feat(assistant): Make the sidebar Max's home #28710

Twixes · 2025-02-14T08:56:10Z

Problem

People don't necessarily want to always go to a full-page Max view to get insights. It'd be faster to be able to query while already doing something else, from the sidebar.

Changes

Max is in a side panel now:

This side panel can still be expanded into the full-page view.

How did you test this code?

~~TODO: Stories~~ See UI snapshot changes.

greptile-apps

PR Summary

This PR integrates Max, PostHog's AI assistant, into the application's sidebar panel, moving it from its previous location in the main navigation menu.

Added new SidePanelMax component in /frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelMax.tsx with a minimalist interface and "Open as main focus" button
Modified SidePanel.tsx to include Max tab with dynamic icon that switches between hedgehog profile and sparkles based on panel state
Enhanced Thread.tsx with container queries (@container/thread) and responsive design improvements for better mobile/sidebar display
Updated QuestionInput.tsx and QuestionSuggestions.tsx with improved layout and styling for sidebar integration
Added error handling and message management improvements in maxLogic.ts for better API response handling and thread management

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

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelMax.tsx

frontend/src/scenes/max/QuestionInput.tsx

frontend/src/scenes/max/Intro.tsx

Twixes · 2025-02-18T19:44:30Z

frontend/src/scenes/max/Thread.tsx

                {rating !== 'bad' && (
                    <LemonButton
                        icon={rating === 'good' ? <IconThumbsUpFilled /> : <IconThumbsUp />}
                        type="tertiary"
-                        size="small"
+                        size="xsmall"


The message actions, like thumbs up, are generally more compact now. I think currently even too compact, because the xmsall icon is absolutely tiny. I'll make it a bit larger, but in a separate PR, because it's more of a design system change

Twixes · 2025-02-18T19:45:07Z

frontend/src/scenes/max/maxLogic.ts

+                const threadEl = document.getElementsByClassName('@container/thread')[0]
+                let scrollableEl = threadEl?.parentElement // .Navigation3000__scene or .SidePanel3000__content
+                if (scrollableEl && !scrollableEl.classList.contains('SidePanel3000__content')) {
+                    // In this case we need to go up to <main>, since .Navigation3000__scene is not scrollable
+                    scrollableEl = scrollableEl.parentElement
+                }
+                if (scrollableEl) {
+                    scrollableEl.scrollTo({
+                        top: threadEl.scrollHeight,
+                        behavior: 'smooth',
+                    })
+                }


Not as elegant, but this ensures we always scroll the scrollable parent of the thread in both the full-page and side-panel case

Twixes · 2025-02-18T19:47:29Z

frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx


 import { SidePanelTab } from '~/types'

 import type { sidePanelStateLogicType } from './sidePanelStateLogicType'

+export const WithinSidePanelContext = React.createContext<boolean>(false)


Much like Within3000PageHeader

Copilot reviewed 5 out of 19 changed files in this pull request and generated no comments.

Files not reviewed (14)

frontend/src/scenes/max/Thread.tsx: Evaluated as low risk
frontend/src/scenes/settings/organization/AIConsentPopoverWrapper.tsx: Evaluated as low risk
frontend/src/scenes/scenes.ts: Evaluated as low risk
frontend/src/layout/navigation-3000/navigationLogic.tsx: Evaluated as low risk
frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx: Evaluated as low risk
frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx: Evaluated as low risk
frontend/src/lib/lemon-ui/Link/Link.tsx: Evaluated as low risk
frontend/src/scenes/max/QuestionInput.tsx: Evaluated as low risk
frontend/src/scenes/max/QuestionSuggestions.tsx: Evaluated as low risk
frontend/src/types.ts: Evaluated as low risk
frontend/src/scenes/max/Intro.tsx: Evaluated as low risk
frontend/src/scenes/notebooks/Notebook/NotebookMeta.tsx: Evaluated as low risk
frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx: Evaluated as low risk
frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx: Evaluated as low risk

Comments suppressed due to low confidence (1)

frontend/src/scenes/max/Max.tsx:1

Ensure that the 'IconSidePanel' and 'IconArrowLeft' icons are correctly imported and used in the JSX.

import { IconArrowLeft, IconGear, IconSidePanel } from '@posthog/icons'

posthog-bot · 2025-02-19T11:30:26Z

📸 UI snapshots have been updated

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

chromium: 0 added, 19 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

Found two things:

How can I access Max on mobile? The sidebar seems to be unavailable in mobile. As an option, we can just keep Max on its own page.
Insights height is too low. It's 150px now. 240px looks much better IMO.

Neither issue blocks it from shipping though.

skoob13 · 2025-02-19T12:22:13Z

frontend/src/lib/lemon-ui/Link/Link.tsx

@@ -98,6 +98,12 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
            href: typeof to === 'string' ? to : undefined,
        })

+        const withinSidePanel = useContext(WithinSidePanelContext)
+
+        if (withinSidePanel && target === '_blank' && !isExternalLink(to)) {


I think the same effect is possible with event capturing on the Max's level without using the context, but this looks good to me.

For sure, thinking more generally here as we'll now be adding more such links/actions

skoob13 · 2025-02-19T12:23:27Z

frontend/src/layout/navigation-3000/navigationLogic.tsx

-                        to: urls.max(),
-                        tag: 'beta' as const,
-                    })
-                }


As we've discussed, people would expect Max to be in the sidebar navigation for some time.

Added back, with an info toast:

skoob13 · 2025-02-19T12:24:45Z

frontend/src/scenes/max/maxLogic.ts

@@ -350,6 +362,7 @@ export const maxLogic = kea<maxLogicType>([
            actions.loadSuggestions({ refresh: 'async_except_on_cache_miss' })
        }
    }),
+    permanentlyMount(), // Prevent state from being reset when Max is unmounted, especially key in the side panel


We'll need to prioritize the reset button😄

posthog-bot · 2025-02-19T16:29:32Z

📸 UI snapshots have been updated

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

chromium: 0 added, 2 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.

greptile-apps bot reviewed Feb 14, 2025

View reviewed changes

Twixes force-pushed the side-panel-max branch 2 times, most recently from ea8b06d to 958acf2 Compare February 17, 2025 18:47

This comment was marked as outdated.

Sign in to view

Twixes force-pushed the side-panel-max branch 2 times, most recently from 7db8699 to ef79641 Compare February 18, 2025 19:12

This comment was marked as outdated.

Sign in to view

Twixes added 6 commits February 18, 2025 20:40

feat(assistant): Make the sidebar Max's home

f7af848

Fix text wrapping

c6a91ac

Add SidePanelMax story

ea18eea

Improve some copy

31240b9

Fix scrolling

bc4cc2c

Revert LemonButton icon size change

6a2458a

Twixes force-pushed the side-panel-max branch from 75facf1 to 6a2458a Compare February 18, 2025 19:41

Twixes commented Feb 18, 2025

View reviewed changes

Clarify one @container

dd20a16

Twixes commented Feb 18, 2025

View reviewed changes

Fix SidePanelMax story snapshot

e837d1f

Twixes requested review from skoob13 and Copilot February 18, 2025 22:26

Copilot AI reviewed Feb 18, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

Fix snapshot flapping

136523f

Twixes force-pushed the side-panel-max branch from b58ea8e to 136523f Compare February 19, 2025 11:11

Update UI snapshots for chromium (1)

e73d788

skoob13 approved these changes Feb 19, 2025

View reviewed changes

Twixes added 2 commits February 19, 2025 17:07

Improve VisualizationAnswer sizing

585f68a

Add Max back to navbar, with a toast

9da42b4

Twixes enabled auto-merge (squash) February 19, 2025 16:10

Update UI snapshots for chromium (1)

af7a0d6

Twixes merged commit 2621209 into master Feb 19, 2025
98 checks passed

Twixes deleted the side-panel-max branch February 19, 2025 16:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(assistant): Make the sidebar Max's home #28710

feat(assistant): Make the sidebar Max's home #28710

Twixes commented Feb 14, 2025 •

edited

Loading

greptile-apps bot left a comment

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

Twixes Feb 18, 2025

Twixes Feb 18, 2025

Twixes Feb 18, 2025

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

posthog-bot commented Feb 19, 2025

skoob13 left a comment

skoob13 Feb 19, 2025

Twixes Feb 19, 2025

skoob13 Feb 19, 2025

Twixes Feb 19, 2025

skoob13 Feb 19, 2025

posthog-bot commented Feb 19, 2025

feat(assistant): Make the sidebar Max's home #28710

feat(assistant): Make the sidebar Max's home #28710

Conversation

Twixes commented Feb 14, 2025 • edited Loading

Problem

Changes

How did you test this code?

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

posthog-bot commented Feb 19, 2025

📸 UI snapshots have been updated

skoob13 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

posthog-bot commented Feb 19, 2025

📸 UI snapshots have been updated

Twixes commented Feb 14, 2025 •

edited

Loading