feat: implement-gram-elements

frontend/.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "@babel/preset-react",
+    ["@babel/preset-react", { "runtime": "automatic" }],
     "@babel/preset-typescript",
     [
       "@babel/preset-env",
@@ -33,8 +33,7 @@
     "production": {
       "plugins": [
         "transform-react-remove-prop-types",
-        "@babel/transform-react-constant-elements",
-        "@babel/transform-react-inline-elements"
+        "@babel/transform-react-constant-elements"
       ]
     }
   }

frontend/api/index.js

@@ -121,6 +121,8 @@ app.get('/config/project-overrides', (req, res) => {
       name: 'evaluationAnalyticsServerUrl',
       value: process.env.EVALUATION_ANALYTICS_SERVER_URL,
     },
+    { name: 'gramProjectSlug', value: process.env.GRAM_PROJECT_SLUG },
+    { name: 'gramMcpUrl', value: process.env.GRAM_MCP_URL },
   ]
   let output = values.map(getVariable).join('')
   res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate')
@@ -230,6 +232,47 @@ if (process.env.FLAGSMITH_PROXY_API_URL) {
 }
 
 app.use(bodyParser.json())
+
+// Gram Elements chat session endpoint
+if (process.env.GRAM_API_KEY) {
+  const { createElementsServerHandlers } = require('@gram-ai/elements/server')
+  const gramHandlers = createElementsServerHandlers()
+
+  app.post('/api/gram/session', async (req, res) => {
+    const token = req.headers.authorization
+    if (!token) {
+      return res.status(401).json({ error: 'Authentication required' })
+    }
+
+    const apiUrl = process.env.FLAGSMITH_PROXY_API_URL
+      ? process.env.FLAGSMITH_PROXY_API_URL.replace(/\/?$/, '/')
+      : process.env.FLAGSMITH_API_URL || 'https://api.flagsmith.com/'
+
+    try {
+      const userResponse = await fetch(`${apiUrl}api/v1/auth/users/me/`, {
+        headers: { Authorization: token },
+      })
+      if (!userResponse.ok) {
+        return res.status(401).json({ error: 'Invalid authentication token' })
+      }
+      const user = await userResponse.json()
+
+      return gramHandlers.session(req, res, {
+        embedOrigin:
+          req.headers.origin ||
+          (req.headers.referer && req.headers.referer.replace(/\/$/, '')) ||
+          '*',
+        userIdentifier: String(user.id),
+        expiresAfter: 3600,
+      })
+    } catch (err) {
+      // eslint-disable-next-line
+      console.error('Gram session error:', err)
+      return res.status(500).json({ error: 'Failed to create chat session' })
+    }
+  })
+}
+
 app.use(spm)
 const genericWebsite = (url) => {
   if (!url) return true

frontend/common/hooks/useCollapsibleHeight.ts

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Hook for animating height transitions (expand/collapse).
+ *
+ * Uses a double requestAnimationFrame on collapse to ensure the browser
+ * paints the current scrollHeight before transitioning to 0.
+ */
+export default function useCollapsibleHeight(open: boolean) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState<number | undefined>(open ? undefined : 0)
+
+  useEffect(() => {
+    if (!contentRef.current) return
+    if (open) {
+      setHeight(contentRef.current.scrollHeight)
+      const timer = setTimeout(() => setHeight(undefined), 300)
+      return () => clearTimeout(timer)
+    } else {
+      setHeight(contentRef.current.scrollHeight)
+      let innerFrameId: number
+      const outerFrameId = requestAnimationFrame(() => {
+        innerFrameId = requestAnimationFrame(() => {
+          setHeight(0)
+        })
+      })
+      return () => {
+        cancelAnimationFrame(outerFrameId)
+        cancelAnimationFrame(innerFrameId)
+      }
+    }
+  }, [open])
+
+  const style = {
+    height: height !== undefined ? `${height}px` : 'auto',
+    overflow: 'hidden' as const,
+    transition: 'height 0.3s ease',
+  }
+
+  return { contentRef, style }
+}

frontend/common/providers/ConfigProvider.js

@@ -28,7 +28,6 @@ export default (WrappedComponent) => {
 
       return (
         <WrappedComponent
-          ref='wrappedComponent'
           isLoading={isLoading}
           error={error}
           history={this.props.history}

frontend/common/providers/withSegmentOverrides.js

@@ -225,7 +225,6 @@ export default (WrappedComponent) => {
     render() {
       return (
         <WrappedComponent
-          ref='wrappedComponent'
           updateSegments={this.updateSegments}
           onEnvironmentVariationsChange={this.onEnvironmentVariationsChange}
           removeMultivariateOption={this.removeMultivariateOption}