feat(max): showcase capabilities by skoob13 · Pull Request #32556 · PostHog/posthog

skoob13 · 2025-05-22T19:06:26Z

Problem

One of the pieces of feedback we frequently get is that it is not clear what Max can and cannot do. Let's replace random suggestions with a hardcoded list of suggestions where Max excels.

Changes

Create the suggestions list (verified).
Add nested menus.

Demo

Mobile

Did you write or update any docs for this change?

I've added or updated the docs
I've reached out for help from the docs team
No docs needed for this change

How did you test this code?

Manual testing & a new story

greptile-apps

PR Summary

This PR enhances Max AI's user interface by replacing random suggestions with a structured, categorized menu system to better showcase its capabilities.

Added maxQuestionSuggestionsLogic.tsx with predefined categories (SQL, Product Analytics, Docs, etc.) and their specific suggestions
Implemented two-level navigation in QuestionSuggestions.tsx with category selection and detailed suggestions
Added new animation effects in QuestionSuggestions.scss for staggered suggestion appearance
Enhanced focus management in maxLogic.tsx with new focusCounter reducer and focusInput action
Added ThreadWithOpenedSuggestions story to test the new suggestion system

_{8 file(s) reviewed, 8 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

posthog-bot · 2025-05-22T19:18:43Z

📸 UI snapshots have been updated

12 snapshot changes in total. 0 added, 12 modified, 0 deleted:

chromium: 0 added, 12 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

kappa90

Beautiful. Just left some minor UX comments.

I also noticed that the suggestions are center-aligned, I think it makes sense to always aligns them to the left (like in ChatGPT).

kappa90 · 2025-05-23T01:13:09Z

-                disabledReason={!dataProcessingAccepted ? 'Please accept OpenAI processing data' : undefined}
-                center
-            >
-                Let's get started with me learning about your project!


I think we still need this button to trigger the onboarding manually.

Shouldn't the onboarding be triggered when any of the product analytics suggestions are clicked?

There was a button to also run it directly, but yeah you're right, now that we have direct product analytics suggestions, we can keep it this way.

kappa90 · 2025-05-23T01:17:02Z

    )
 }
+
+function useClickOutside<T extends HTMLElement>(


Still on a fan of this. I think on ChatGPT it works well because there's lots of space around the suggestions, but Max lives in a tiny sidebar, so clicking "outside" is kinda difficult.

This experience should be more obvious and easier with the UI. You typically expect to be able to click anywhere to close an autocomplete.

kappa90 · 2025-05-23T01:26:23Z

+                                onClick={() => {
+                                    // If it's a product-based skill, open the URL first
+                                    if (group.url && !router.values.currentLocation.pathname.includes(group.url)) {
+                                        router.actions.push(group.url)


There's an edge case where this is slightly annoying: you're editing an insight, click by mistake on a suggestion, you get the alert: "You have unsaved changes", and you click yes by mistake because you're not reading the alert text like 90% of the people out there (including me) 😄 There's no way to solve it, it's just that one wouldn't necessarily expect Max's suggestions to also redirect to a different page (although it makes sense).

Product-based flows will solve it👀 It's probably fine for now unless you think otherwise.

kappa90 · 2025-05-23T01:28:01Z

+                label: 'What are the top referring domains?',
+            },
+            {
+                label: 'Calculate a conversion rate for <events or features>',


This is slightly difficult to understand, specifically the "or features" part, since there is no "feature" concept within PostHog (yet). Maybe we can just write "Calculate a conversion rate for..." and it prefills the input, like you did.

kappa90 · 2025-05-23T01:29:04Z

+        tooltip: 'Max can generate insights from natural language and tweak existing ones.',
+    },
+    {
+        label: 'Docs',


I wonder if we can "suggest" to Max that it should always answers these by searching the docs. It could be an additional field in askMax, which forces the Root to use a specific tool. This also applies to the insight questions.

Those questions are prompted in a way that should always trigger their flows. Did you experience a situation when it hadn't triggered a flow?

I didn't, I was just wondering if it would make sense to add some "guardrails".

kappa90 · 2025-05-23T01:30:36Z

+        icon: <IconPlug />,
+        suggestions: [
+            {
+                label: 'How can I set up the session replay in <a framework or language>',


This overflows:

posthog-bot · 2025-05-26T09:44:32Z

📸 UI snapshots have been updated

14 snapshot changes in total. 0 added, 14 modified, 0 deleted:

Caution

Detected flapping snapshots

These snapshots have auto-updated more than once since the last human commit:

scenes-app-max-ai--thread-with-opened-suggestions--dark.png (chromium, shard 1)
scenes-app-max-ai--thread-with-opened-suggestions--light.png (chromium, shard 1)
scenes-app-max-ai--welcome--dark.png (chromium, shard 1)
scenes-app-max-ai--welcome--light.png (chromium, shard 1)
scenes-app-max-ai--welcome-feature-preview-auto-enrolled--dark.png (chromium, shard 1)
scenes-app-max-ai--welcome-feature-preview-auto-enrolled--light.png (chromium, shard 1)
scenes-app-max-ai--welcome-loading-suggestions--dark.png (chromium, shard 1)
scenes-app-max-ai--welcome-loading-suggestions--light.png (chromium, shard 1)
scenes-app-max-ai--welcome-suggestions-available--dark.png (chromium, shard 1)
scenes-app-max-ai--welcome-suggestions-available--light.png (chromium, shard 1)
scenes-app-max-ai--welcome-with-latest-conversations--dark.png (chromium, shard 1)
scenes-app-max-ai--welcome-with-latest-conversations--light.png (chromium, shard 1)

The flippy-flappies are deadly and must be fixed ASAP. They're productivity killers.
Run pnpm storybook locally and make the fix now.
(Often, the cause is ResizeObserver being used instead of the better CSS container queries.)

chromium: 0 added, 14 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

skoob13 · 2025-05-26T09:51:02Z

@Twixes are the snapshots above actually flapping? It looks like they're generated for the first time.

github-actions · 2025-05-26T09:55:49Z

Size Change: 0 B

Total Size: 3.72 MB

ℹ️ View Unchanged

Filename	Size
`frontend/dist/toolbar.js`	3.72 MB

_{compressed-size-action}

Twixes

Sweet stuff, now with some suggestions for making things even smoother ;)

Twixes · 2025-05-26T21:20:59Z

+                label: 'How can I set up the session replay in a framework or language',
+                content: 'How can I set up the session replay in ',


To bump up Em's point, I think the suggestions will be more intuitive the other way, and we can probably standardize this so that it's not needed to have label and content separate.

We can keep just label in this format:
How can I set up the session replay in <framework or language>? or Write an SQL query to …

This way we can handle angled brackets <> and the ellipsis … as markup in terms of the resulting content:

angled brackets <> – the opening bracket <, and everything after it, is stripped, so the content automatically becomes just How can I set up the session replay in

ellipsis … – just gets removed, so only Write an SQL query to remains

It seemed to me like overkill for the hardcoded suggestions. Nevertheless, it's implemented now👍

Twixes · 2025-05-26T21:44:20Z

    return scrollableEl
 }
+
+export const QUESTION_SUGGESTIONS_DATA: readonly SuggestionGroup[] = [


I had the idea to use verbs instead to signify things to do, but it seems to wordy after trying:

Real polish suggestions though:

let's add an ellipsis after "Ask Max…"

Let's use sentence case in accordance with our style, which applies even to product names, i.e. "Product analytics" rather than "Product Analytics"

To me, it'd be slightly more intuitive to still put "Product analytics" first, since that's the broadest use case for Max.

"Set up" is vague, "SDK setup" would be clearer. I'd put it second to last

"Docs" feel like they should be at the end, since they're the the least in-product of these items, if that makes sense

Twixes · 2025-05-26T21:44:31Z

+        icon: <IconHogQL />,
+        suggestions: [
+            {
+                label: 'Generate an SQL query to',


Slightly friendlier wording: "Write an SQL query to …"

Twixes · 2025-05-26T21:45:01Z

+            },
+        ],
+        url: urls.sqlEditor(),
+        tooltip: 'Max can generate SQL queries using your PostHog data and the data warehouse.',


Suggested change

tooltip: 'Max can generate SQL queries using your PostHog data and the data warehouse.',

tooltip: 'Max can generate SQL queries for your PostHog data, both analytics and the data warehouse.',

Twixes · 2025-05-26T21:51:22Z

+                label: 'How can I capture an exception?',
+            },
+        ],
+        tooltip: 'Max can help you find the right documentation pieces.',


"pieces" is slightly odd

Suggested change

tooltip: 'Max can help you find the right documentation pieces.',

tooltip: 'Max has access to PostHog docs and can help you get the most out of PostHog.',

Twixes · 2025-05-26T21:52:19Z

+        suggestionGroups: [
+            () => [], // Kea selector typing hint
+            (): readonly SuggestionGroup[] => QUESTION_SUGGESTIONS_DATA,
+        ],


Hmm, doesn't look like we need this to be a selector

Twixes · 2025-05-26T21:52:54Z

+            (index, groups): SuggestionGroup | undefined => {
+                if (index === null) {
+                    return undefined
+                }


Nit: I always find null to be a clearer indication of an intended lack of result than undefined.

Twixes · 2025-05-26T22:02:24Z

+                    {activeSuggestionGroup && !isFloating && (
+                        <ToggleGroup
+                            type="single"
+                            className="absolute inset-x-2 top-full grid auto-rows-auto p-1 border-x border-b rounded-b backdrop-blur-sm bg-[var(--glass-bg-3000)] z-10"


For visual harmony, we need to round with -lg, because we're wrapping a collection of elements that are each rounded with the base radius – this looks slightly off:

Suggested change

className="absolute inset-x-2 top-full grid auto-rows-auto p-1 border-x border-b rounded-b backdrop-blur-sm bg-[var(--glass-bg-3000)] z-10"

className="absolute inset-x-2 top-full grid auto-rows-auto p-1 border-x border-b rounded-lg-b backdrop-blur-sm bg-[var(--glass-bg-3000)] z-10"

Twixes · 2025-05-26T22:03:08Z

+@keyframes QuestionSuggestion__slide-in-fade-down {
+    from {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}


I would propose a CSSTransition instead, as currently we only have an entry animation, but jarringly exit is just abrupt disappearance

…gestions

graphite-app Bot reviewed May 22, 2025

View reviewed changes

Comment thread frontend/src/scenes/max/maxQuestionSuggestionsLogic.tsx Resolved

skoob13 requested a review from a team May 22, 2025 19:07

greptile-apps Bot reviewed May 22, 2025

View reviewed changes

kappa90 approved these changes May 23, 2025

View reviewed changes

skoob13 and others added 16 commits May 26, 2025 11:30

feat: hardcoded suggestions

4abd345

feat: animation

1a7b05d

feat: render elements & focus of elements

22358c6

feat: animations

479c865

feat: better copies

f1e27f7

feat: prevent layout shift

12589f2

fix: break all

c95b2c8

fix: logic

2c29bef

fix: copy

59ed025

feat: dropdown

bc44bce

fix: handle clicks

9e1fcc6

refactor: merge logics

dad9c82

fix: types

0ba670c

test: logic

780157c

fix: better suggestion for the conversion rate

819c9cc

Update UI snapshots for chromium (1)

81c73b6

skoob13 force-pushed the feat/max-suggestions branch from 38e25de to 81c73b6 Compare May 26, 2025 09:32

Update UI snapshots for chromium (1)

306ed0b

skoob13 requested a review from Twixes May 26, 2025 09:49

Merge branch 'master' into feat/max-suggestions

0aa616c

Twixes suggested changes May 26, 2025

View reviewed changes

Merge branch 'master' of github.com:PostHog/posthog into feat/max-sug…

2ec705b

…gestions

		label: 'How can I set up the session replay in a framework or language',
		content: 'How can I set up the session replay in ',

	tooltip: 'Max can generate SQL queries using your PostHog data and the data warehouse.',
	tooltip: 'Max can generate SQL queries for your PostHog data, both analytics and the data warehouse.',

	tooltip: 'Max can help you find the right documentation pieces.',
	tooltip: 'Max has access to PostHog docs and can help you get the most out of PostHog.',

	className="absolute inset-x-2 top-full grid auto-rows-auto p-1 border-x border-b rounded-b backdrop-blur-sm bg-[var(--glass-bg-3000)] z-10"
	className="absolute inset-x-2 top-full grid auto-rows-auto p-1 border-x border-b rounded-lg-b backdrop-blur-sm bg-[var(--glass-bg-3000)] z-10"

Conversation

skoob13 commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes

Did you write or update any docs for this change?

How did you test this code?

Uh oh!

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

posthog-bot commented May 22, 2025

📸 UI snapshots have been updated

Uh oh!

kappa90 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

posthog-bot commented May 26, 2025

📸 UI snapshots have been updated

Detected flapping snapshots

Uh oh!

skoob13 commented May 26, 2025

Uh oh!

github-actions Bot commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Twixes left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

skoob13 commented May 22, 2025 •

edited

Loading

github-actions Bot commented May 26, 2025 •

edited

Loading

Twixes left a comment •

edited

Loading