feat(max): showcase capabilities

frontend/package.json

@@ -88,9 +88,11 @@
         "@posthog/tailwind": "workspace:*",
         "@radix-ui/react-accordion": "^1.2.2",
         "@radix-ui/react-context-menu": "^2.2.6",
+        "@radix-ui/react-dismissable-layer": "^1.1.10",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-toggle-group": "^1.1.10",
         "@react-hook/size": "^2.1.2",
         "@stripe/react-stripe-js": "^2.8.0",
         "@stripe/stripe-js": "^4.5.0",

frontend/src/scenes/data-warehouse/editor/QueryPane.tsx

@@ -85,7 +85,7 @@ export function QueryPane(props: QueryPaneProps): JSX.Element {
                         }}
                         introOverride={{
                             headline: 'What data do you want to analyze?',
-                            description: 'On this page, I can help you write and tweak SQL queries.',
+                            description: 'Let me help you quickly write SQL, and tweak it.',
                         }}
                     >
                         <div className="relative" />

frontend/src/scenes/max/Max.stories.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from '@storybook/react'
 import { useActions, useValues } from 'kea'
 import { MOCK_DEFAULT_ORGANIZATION } from 'lib/api.mock'
 import { useEffect } from 'react'
-import { maxSettingsLogic } from 'scenes/settings/environment/maxSettingsLogic'
 import { twMerge } from 'tailwind-merge'
 
 import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
@@ -17,7 +16,7 @@ import {
 } from './__mocks__/chatResponse.mocks'
 import conversationList from './__mocks__/conversationList.json'
 import { MaxInstance, MaxInstanceProps } from './Max'
-import { maxLogic } from './maxLogic'
+import { maxLogic, QUESTION_SUGGESTIONS_DATA } from './maxLogic'
 import { maxThreadLogic } from './maxThreadLogic'
 
 const meta: Meta = {
@@ -72,53 +71,6 @@ export const Welcome: StoryFn = () => {
     return <Template />
 }
 
-export const WelcomeSuggestionsAvailable: StoryFn = () => {
-    useStorybookMocks({
-        post: {
-            '/api/environments/:team_id/query/': () => [
-                200,
-                {
-                    questions: [
-                        'What are our most popular pages in the blog?',
-                        'Where are our new users located?',
-                        'Who are the biggest customers using our paid product?',
-                        'Which feature drives most usage?',
-                    ],
-                },
-            ],
-        },
-    })
-
-    const { loadCoreMemorySuccess } = useActions(maxSettingsLogic)
-
-    useEffect(() => {
-        loadCoreMemorySuccess({ id: 'x', text: 'A Storybook test.' })
-    }, [])
-
-    return <Template />
-}
-
-export const WelcomeLoadingSuggestions: StoryFn = () => {
-    useStorybookMocks({
-        post: {
-            '/api/environments/:team_id/query/': (_req, _res, ctx) => [ctx.delay('infinite')],
-        },
-    })
-
-    const { loadCoreMemorySuccess } = useActions(maxSettingsLogic)
-
-    useEffect(() => {
-        loadCoreMemorySuccess({ id: 'x', text: 'A Storybook test.' })
-    }, [])
-
-    return <Template />
-}
-WelcomeLoadingSuggestions.parameters = {
-    testOptions: {
-        waitForLoadersToDisappear: false,
-    },
-}
-
 export const WelcomeFeaturePreviewAutoEnrolled: StoryFn = () => {
     return <Template />
 }
@@ -380,3 +332,38 @@ ChatHistoryLoading.parameters = {
         waitForLoadersToDisappear: false,
     },
 }
+
+export const ThreadWithOpenedSuggestionsMobile: StoryFn = () => {
+    const { setActiveGroup } = useActions(maxLogic)
+
+    useEffect(() => {
+        // The largest group is the set up group
+        setActiveGroup(QUESTION_SUGGESTIONS_DATA[3])
+    }, [])
+
+    return <Template sidePanel />
+}
+ThreadWithOpenedSuggestionsMobile.parameters = {
+    testOptions: {
+        waitForLoadersToDisappear: false,
+    },
+    viewport: {
+        defaultViewport: 'mobile2',
+    },
+}
+
+export const ThreadWithOpenedSuggestions: StoryFn = () => {
+    const { setActiveGroup } = useActions(maxLogic)
+
+    useEffect(() => {
+        // The largest group is the set up group
+        setActiveGroup(QUESTION_SUGGESTIONS_DATA[3])
+    }, [])
+
+    return <Template sidePanel />
+}
+ThreadWithOpenedSuggestions.parameters = {
+    testOptions: {
+        waitForLoadersToDisappear: false,
+    },
+}

frontend/src/scenes/max/Max.tsx

@@ -34,7 +34,7 @@ import { maxGlobalLogic } from './maxGlobalLogic'
 import { maxLogic } from './maxLogic'
 import { maxThreadLogic, MaxThreadLogicProps } from './maxThreadLogic'
 import { QuestionInput } from './QuestionInput'
-import { QuestionSuggestions } from './QuestionSuggestions'
+import { QuestionInputWithSuggestions } from './QuestionInputWithSuggestions'
 import { Thread } from './Thread'
 
 export const scene: SceneExport = {
@@ -207,8 +207,7 @@ export const MaxInstance = React.memo(function MaxInstance({ sidePanel }: MaxIns
                         )}
                         <div className="flex-1 items-center justify-center flex flex-col gap-3">
                             <Intro />
-                            <QuestionInput />
-                            <QuestionSuggestions />
+                            <QuestionInputWithSuggestions />
                         </div>
                         <HistoryPreview sidePanel={sidePanel} />
                     </div>

frontend/src/scenes/max/QuestionInput.scss

@@ -0,0 +1,41 @@
+.QuestionInput__SuggestionsList {
+    &.QuestionInput__SuggestionsList-enter {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+
+    &.QuestionInput__SuggestionsList-enter-active {
+        opacity: 1;
+        transition: opacity 150ms ease-out, transform 150ms ease-out;
+        transform: translateY(0);
+    }
+
+    &.QuestionInput__SuggestionsList-exit {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+
+    &.QuestionInput__SuggestionsList-exit-active {
+        opacity: 0;
+        transition: opacity 150ms ease-out, transform 150ms ease-out;
+        transform: scale(0.95) translateY(-0.5rem);
+    }
+}
+
+.QuestionInput__QuestionSuggestion {
+    opacity: 0;
+    animation: QuestionInput__QuestionSuggestion__slide-in-fade-down 60ms ease-out forwards;
+    animation-delay: calc(var(--index) * 25ms);
+}
+
+@keyframes QuestionInput__QuestionSuggestion__slide-in-fade-down {
+    from {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

frontend/src/scenes/max/QuestionInput.tsx

@@ -1,15 +1,20 @@
+import './QuestionInput.scss'
+
 import { IconArrowRight, IconStopFilled } from '@posthog/icons'
 import { LemonButton, LemonTextArea } from '@posthog/lemon-ui'
+import { ToggleGroup, ToggleGroupItem } from '@radix-ui/react-toggle-group'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { IconTools } from 'lib/lemon-ui/icons'
 import { useEffect, useRef } from 'react'
+import { CSSTransition } from 'react-transition-group'
 
 import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 import { maxGlobalLogic } from './maxGlobalLogic'
-import { maxLogic } from './maxLogic'
+import { maxLogic, SuggestionGroup } from './maxLogic'
 import { maxThreadLogic } from './maxThreadLogic'
+import { checkSuggestionRequiresUserInput, formatSuggestion, stripSuggestionPlaceholders } from './utils'
 
 interface QuestionInputProps {
     isFloating?: boolean
@@ -18,7 +23,7 @@ interface QuestionInputProps {
 export function QuestionInput({ isFloating }: QuestionInputProps): JSX.Element {
     const { tools } = useValues(maxGlobalLogic)
 
-    const { question } = useValues(maxLogic)
+    const { question, focusCounter } = useValues(maxLogic)
     const { setQuestion } = useActions(maxLogic)
 
     const { threadLoading, inputDisabled, submissionDisabledReason } = useValues(maxThreadLogic)
@@ -34,11 +39,10 @@ export function QuestionInput({ isFloating }: QuestionInputProps): JSX.Element {
 
     useEffect(() => {
         if (textAreaRef.current) {
-            // Autofocus, but a version that also moves cursor to end of text
             textAreaRef.current.focus()
             textAreaRef.current.setSelectionRange(textAreaRef.current.value.length, textAreaRef.current.value.length)
         }
-    }, [])
+    }, [focusCounter]) // Update focus when focusCounter changes
 
     return (
         <div
@@ -95,6 +99,7 @@ export function QuestionInput({ isFloating }: QuestionInputProps): JSX.Element {
                             icon={threadLoading ? <IconStopFilled /> : <IconArrowRight />}
                         />
                     </div>
+                    {!isFloating && <SuggestionsList />}
                 </div>
                 {tools.length > 0 && (
                     <div
@@ -118,3 +123,77 @@ export function QuestionInput({ isFloating }: QuestionInputProps): JSX.Element {
         </div>
     )
 }
+
+function SuggestionsList(): JSX.Element {
+    const focusElementRef = useRef<HTMLDivElement | null>(null)
+    const previousSuggestionGroup = useRef<SuggestionGroup | null>(null)
+
+    const { setQuestion, focusInput, setActiveGroup } = useActions(maxLogic)
+    const { activeSuggestionGroup } = useValues(maxLogic)
+    const { askMax } = useActions(maxThreadLogic)
+
+    useEffect(() => {
+        if (focusElementRef.current && activeSuggestionGroup) {
+            focusElementRef.current.focus()
+        }
+        previousSuggestionGroup.current = activeSuggestionGroup
+    }, [activeSuggestionGroup])
+
+    const memoizedSuggestion = activeSuggestionGroup || previousSuggestionGroup.current
+
+    return (
+        <CSSTransition
+            in={!!activeSuggestionGroup}
+            timeout={150}
+            classNames="QuestionInput__SuggestionsList"
+            mountOnEnter
+            unmountOnExit
+            nodeRef={focusElementRef}
+        >
+            <ToggleGroup
+                ref={focusElementRef}
+                type="single"
+                className="QuestionInput__SuggestionsList absolute inset-x-2 top-full grid auto-rows-auto p-1 border-x border-b rounded-b-lg backdrop-blur-sm bg-[var(--glass-bg-3000)] z-10"
+                onValueChange={(index) => {
+                    const suggestion = activeSuggestionGroup?.suggestions[Number(index)]
+                    if (!suggestion) {
+                        return
+                    }
+
+                    if (checkSuggestionRequiresUserInput(suggestion.content)) {
+                        // Content requires to write something to continue
+                        setQuestion(stripSuggestionPlaceholders(suggestion.content))
+                        focusInput()
+                    } else {
+                        // Otherwise, just launch the generation
+                        askMax(suggestion.content)
+                    }
+
+                    // Close suggestions after asking
+                    setActiveGroup(null)
+                }}
+            >
+                {memoizedSuggestion?.suggestions.map((suggestion, index) => (
+                    <ToggleGroupItem
+                        key={suggestion.content}
+                        value={index.toString()}
+                        tabIndex={0}
+                        aria-label={`Select suggestion: ${suggestion.content}`}
+                        asChild
+                    >
+                        <LemonButton
+                            className="QuestionInput__QuestionSuggestion text-left"
+                            role="button"
+                            style={{ '--index': index } as React.CSSProperties}
+                            size="small"
+                            type="tertiary"
+                            fullWidth
+                        >
+                            <span className="font-normal">{formatSuggestion(suggestion.content)}</span>
+                        </LemonButton>
+                    </ToggleGroupItem>
+                ))}
+            </ToggleGroup>
+        </CSSTransition>
+    )
+}