feat(explorer): migrate chat UI to global drawer#113481
Conversation
github-actions
Bot
added
the
Scope: Frontend
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Can we align these two heights? It will also help with the transparent buttons no longer being crammed edge to edge.
|
@JonasBa for sure, I'm planning to make follow-up PRs for styles after this merges (to closed beta, not GA) updating the top bar to Ivy's designs in https://www.figma.com/design/3Pfh2LX1K4MXhyJYWPDkNw/Seer-Explorer---Agent?node-id=716-4361&p=f&t=nmrXjrG1tiTK4RkB-0 . Looks like the height alignment is there, and all the extraneous buttons will go in the |
There was a problem hiding this comment.
I know most of this copy paste but it'd be good to break this component into smaller helpers to handle the various interactions instead of all these hooks in the single component.
| export type OpenSeerExplorerDrawerOptions = { | ||
| /** | ||
| * Optional run ID to open. If provided, opens an existing session. | ||
| * Cannot be used together with `startNewRun`. |
There was a problem hiding this comment.
nit: if this is the case then you can enforce it with types via a discriminator field
| }} | ||
| /> | ||
| )} | ||
| <Button |
There was a problem hiding this comment.
Noticed this is still not matching the designs where the close / new buttons are flipped—are you planning on doing that in a follow-up?
There was a problem hiding this comment.
You'd also get the close button for free if you used the DrawerHeader component from @sentry/scraps/drawer
There was a problem hiding this comment.
After thinking it through, this should probably be a follow-up!
natemoo-re
left a comment
natemoo-re
left a comment
There was a problem hiding this comment.
Looking good! Once tests are passing, go ahead and merge.
This reverts commit 424c60e.
Delete the deprecated ExplorerPanel component (superseded by useSeerExplorerDrawer) and its supporting files (panelContainers, openSeerExplorerPanel, usePanelSizing). Extract ExplorerFloatingActionButton into explorerFAB.tsx. Remove dead exports (simulateSeerExplorerKeyboardShortcut, PanelSize, RUN_ID_QUERY_PARAM). Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 9a0ff54. Configure here.
| ariaLabel: t('Seer Explorer Drawer'), | ||
| drawerKey: 'seer-explorer-drawer', | ||
| resizable: true, | ||
| mode: 'passive', | ||
| // XXX: passive mode keeps drawer open on location change. Be sure to update isOpenRef if closing on change is needed - useDrawer doesn't call onClose | ||
| onOpen, | ||
| onClose, | ||
| } | ||
| ); | ||
| }, | ||
| [openDrawer, closeSeerExplorerDrawer, onOpen, onClose, getPageReferrer] |
There was a problem hiding this comment.
Bug: Calling openSeerExplorerDrawer while the drawer is already open fires a duplicate seer.explorer.global_panel.opened analytics event because the onOpen callback is called unconditionally.
Severity: MEDIUM
Suggested Fix
Add a guard to prevent the onOpen callback from being executed if the drawer is already open. This can be done by checking a state reference like isOpenRef.current before calling openDrawer or before firing the analytics event inside the onOpen callback.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location:
static/app/views/seerExplorer/components/drawer/useSeerExplorerDrawer.tsx#L75-L93
Potential issue: When `openSeerExplorerDrawer` is called while the drawer is already
open, such as when switching between sessions, it unconditionally calls `openDrawer`.
This in turn invokes the provided `onOpen` callback every time. The `onOpen` function is
responsible for firing the `seer.explorer.global_panel.opened` analytics event but lacks
a guard to check if the drawer is already open. This results in duplicate analytics
events being fired for a single continuous drawer session, which will artificially
inflate metrics for this event.
6 participants
Re-implements the contents and functionality of the floating chat panel (useGlobalPortal) for useDrawer.
The global
SeerExplorerContextis moved underOrganizationLayout, and updated to use the drawer hook.isMinimized,isOpen/Visible,isSeerDrawerOpenstate is not applicable to the drawer.isMobileis not supported. Unlike the old global panel, the chat content is either mounted and visible, or isn't. This is the key difference between ExplorerDrawerContent and ExplorerPanel.Supports
old explorerPanelthe old FAB when the page frame FF is off. This is a hard cutover to the drawer version and will go out to all current beta users on merge. When the feature releases later this week, page frame will also GA, and FAB will get phased out.Migrates the 2 external opens - instrumentationFixSection and night shift cmd K (both internal features) - to open the drawer after seeding a run_id in sessionStorage. Sending an initial message isn't supported for now, no code uses it.
Demo of basic open/close, send message, switch session, persist current session through open/close -
https://github.com/user-attachments/assets/ffcf6545-c0f1-4063-a711-572413be726c
to be done in a follow-up:
openSeerExplorer, like the old API (renamed to openSeerExplorerPanel.tsx)