refactor(webview): relocate model selector (CODY-5194) #7322

julialeex · 2025-03-04T18:25:57Z

Context: https://sourcegraph.slack.com/archives/C08DP4R5CG0/p1740789400315269

part of https://linear.app/sourcegraph/issue/CODY-5194/move-model-selector-to-the-top-nav-bar

moves the model selector to the top left instead of below the chat box
introduces a keyboard shortcut (cmd+m) to open the model selection dropdown in the webview
introduces a keyboard shortcut (cmd+n) to open a new chat

Test plan

Loom: https://www.loom.com/share/e742c98c2e3e4dada5eee85c40164b60

This commit introduces a new `ModeSelectorButton` component to replace the intent selection logic within the submit button. The changes include: - Removal of intent selection logic from `SubmitButton.tsx`. - Introduction of `ModeSelectorButton.tsx` with a popover menu for selecting chat modes (Chat, Search, Edit, Insert). - Integration of the new `ModeSelectorButton` into the `Toolbar.tsx`. - Optimizations for intent options and keyboard shortcuts to avoid recreating React elements.

This commit moves the model selection dropdown from the chat editor toolbar to the tab bar for better visibility and accessibility. It also simplifies the logic for determining the "new chat" command. The changes include: - Moving the `ModelSelectField` component from `vscode/webviews/chat/cells/messageCell/human/editor/toolbar/Toolbar.tsx` to `vscode/webviews/tabs/TabsBar.tsx`. - Adding the `models` prop to the `TabsBar` component to pass available models to the `ModelSelectField`. - Removing the `ModelSelectFieldToolbarItem` component. - Adjusting the layout of the `TabsBar` to accommodate the new model selection dropdown. - Simplifying the `getCreateNewChatCommand` function in `vscode/webviews/tabs/utils.ts` to always use `cody.chat.newPanel` instead of `cody.chat.newEditorPanel`. - Adding a tooltip to the "New Chat" button in the tab bar.

add keyboard shorcut

Co-authored-by: Beatrix <[email protected]>

…into bee/move-model

Co-authored-by: Beatrix <[email protected]>

alexromano · 2025-03-04T18:30:55Z

Loom: https://www.loom.com/share/59c757bedbd048f795a7876424183783?sid=c1a419d6-cc85-4782-ad65-66b7c5ea70ca
i noticed at around 0:19 here, the tooltip shows the file path, and then we you hover again, it shows the keyboard shortcut,. is that a bug?

…Field This commit introduces a keyboard shortcut (Cmd/Ctrl+M) to open the model selection dropdown in the webview. The ModelSelectField component has been refactored to: - Use a ref to directly control the popover's open/close state. - Add an Escape key listener to close the dropdown. - Remove the forwardRef and useImperativeHandle, simplifying the component's structure. - Remove the openDropdownRef prop. - Add a modelSelectorRef prop to allow parent components to control the dropdown. These changes improve the user experience by providing a quick way to access the model selection and ensure the dropdown can be closed with the Escape key.

julialeex · 2025-03-04T19:47:16Z

Loom: https://www.loom.com/share/59c757bedbd048f795a7876424183783?sid=c1a419d6-cc85-4782-ad65-66b7c5ea70ca
i noticed at around 0:19 here, the tooltip shows the file path, and then we you hover again, it shows the keyboard shortcut,. is that a bug?

@alexromano I don't think so. Re-record the video with the latest changes. https://www.loom.com/share/d91731628d7042c680d6150de392d412?sid=231710c7-3829-4f43-b819-9ac2fc1132d3

julialeex · 2025-03-04T20:17:49Z

vscode/test/e2e/enterprise-server-sent-models.test.ts

@@ -12,7 +12,7 @@ test('allows multiple enterprise models when server-sent models is enabled', asy
    await sidebarSignin(page, sidebar, { enableNotifications: true })
    // Open chat.
    const [chatFrame] = await createEmptyChatPanel(page)


@abeatrix just realized that if we open a new empty chat panel we can't see the model selector. However do we plan to remove the empty chat panel option?

we could just add the tab bar to the editor chat panel to show the model dropdown?

vscode/package.json

vscode/webviews/components/shadcn/ui/toolbar.tsx

abeatrix · 2025-03-04T20:32:32Z

vscode/test/e2e/enterprise-server-sent-models.test.ts

@@ -12,7 +12,7 @@ test('allows multiple enterprise models when server-sent models is enabled', asy
    await sidebarSignin(page, sidebar, { enableNotifications: true })
    // Open chat.
    const [chatFrame] = await createEmptyChatPanel(page)


we could just add the tab bar to the editor chat panel to show the model dropdown?

alexromano · 2025-03-04T20:49:20Z

https://www.loom.com/share/d91731628d7042c680d6150de392d412?sid=231710c7-3829-4f43-b819-9ac2fc1132d3

noticed a couple bugs here:

there's a huge delay when selecting the new model. i think this was pointed out previously but seems worse in this video. i get no delay on my extension right now
the "new chat" icon changes when you switch to history. i'd suggest we unify on the "+" icon for that
we should use the same pattern for all of the keyboard shortcut hovers. just the keys, with capitalized letters, no "+". so here it should be "⌘M"

julialeex · 2025-03-04T20:53:20Z

there's a huge delay when selecting the new model. i think this was pointed out previously but seems worse in this video. i get no delay on my extension right now

@alexromano You mean between selecting and getting the new models rendered properly?

the "new chat" icon changes when you switch to history. i'd suggest we unify on the "+" icon for that

This is expected. I was trying to unify the chat and new chat icons. Will change to icon to always be '+' then!

we should use the same pattern for all of the keyboard shortcut hovers. just the keys, with capitalized letters, no "+". so here it should be "⌘M"

Will do!

abeatrix

couldn't get your changes to work but pushed mine instead, can you give it a try and let me know if it doesn't work for you?
If not, we can revert it and debug it tmr

abeatrix · 2025-03-05T03:19:04Z

vscode/webviews/tabs/TabsBar.tsx

-                        title: 'Chat',
-                        Icon: MessagesSquareIcon,
+                        title: currentView === View.Chat ? 'New Chat' : 'Chat',
+                        Icon: PlusIcon,


Suggested change

Icon: PlusIcon,

Icon: PlusIcon,

Probably a question for product / design team. I noticed most of the apps use + icon for adding attachment, and the paper pen icon for new chat, so maybe we should use this icon instead? Wdyt?

I don't have a strong opinion here. @alexromano Wdyt? If we want product/design team's input who would be the good person to take a look here? I think Tim is OOO this week.

(it's not a big deal and can be done in a follow up)

For references:

Meta AI

Grok

ChatGPT

abeatrix · 2025-03-05T04:35:48Z

Might need some padding around the model dropdown in editor view:

julialeex · 2025-03-05T04:36:47Z

couldn't get your changes to work but pushed mine instead, can you give it a try and let me know if it doesn't work for you? If not, we can revert it and debug it tmr

Thanks Bee! Yeah your changes work for me. My change works for me locally (commit 00ed8f003c894a1cd15e428560e0fa62e3aac302). @alexromano Does it work for you?

alexromano · 2025-03-05T04:41:02Z

@alexromano Does it work for you?

most recent commit (47a55e93a6d54956b31a0f7cac783ba09762dff7) works for me!

capital M please! 😄

julialeex · 2025-03-05T04:42:54Z

@alexromano Does it work for you?

most recent commit (47a55e93a6d54956b31a0f7cac783ba09762dff7) works for me!

capital M please! 😄

@abeatrix Since it works for Alex I'll revert your changes?

abeatrix · 2025-03-05T04:47:52Z

@julialeex @alexromano was cmd + n and escape working for you on 47a55e9 ?

julialeex · 2025-03-05T04:48:42Z

@julialeex @alexromano was cmd + n and escape working for you on 47a55e9 ?

yes

julialeex · 2025-03-05T05:17:37Z

@alexromano @abeatrix Thank you guys for the detailed comments! I just updated my code again. Loom: https://www.loom.com/share/e742c98c2e3e4dada5eee85c40164b60

abeatrix

Left some comments in line. I think we should revert the changes on updating the cody.chat.new keybinding to "cmd+n", and make sure it would work for other clients since the event listener is registered in the webview, which would make it work / break the other clients 😄

abeatrix · 2025-03-05T05:48:37Z

vscode/webviews/components/shadcn/ui/toolbar.tsx

@@ -92,36 +92,33 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
 )
 ToolbarButton.displayName = 'ToolbarButton'

-export const ToolbarPopoverItem: FunctionComponent<
+export const ToolbarPopoverItem = forwardRef<


QQ: why do we need to update this to forwardRef? It seems like it still work as FunctionComponent?

It seems like it still work as FunctionComponent?

What do you mean

why do we need to update this to forwardRef

I need it for the open: () => void

vscode/webviews/tabs/TabsBar.tsx

Co-authored-by: Beatrix <[email protected]>

vscode/webviews/components/shadcn/ui/toolbar.tsx

Co-authored-by: Beatrix <[email protected]> fix biome fix

vscode/package.json

This reverts commit d1a5d47.

…#7351) ## Description **WHAT** 1. Fix React warnings caused by [relocating the model selector](#7322) - Warning: React does not recognize the `popoverContentProps` prop on a DOM element - Warning: Nested Buttons - There are also other pre-existing warnings, but this PR does not fix them 2. Remove `cmd+N` keyboard shortcut as it is not compatible for other non vscode IDEs **WHY** Good practice to avoid React warnings. This prevents us from having bigger problems in the future **CONTEXT** Slack: https://sourcegraph.slack.com/archives/C05AGQYD528/p1741247210218679 Model Selector PR: #7322 ## Test plan **1. New e2e test `keyboard shortcuts cmd+M opens model selector`** - Run `pnpm -C vscode test:e2e chat-keyboard-shortcuts.test.ts` and make sure the test passes  **2. Fix React warnings caused by the model selector** - Run `pnpm run test:unit --run -v` and scroll through the output and check for warnings. - The top warning should be `Warning: flushSync` was called from inside a lifecycle method., which is a pre-existing warning. - `popoverContentProps` and nested buttons warnings should not exist when you search for them. ![Screenshot 2025-03-06 at 1 18 31 AM](https://github.com/user-attachments/assets/3c0abd26-93a3-405e-b836-216c695e44a7) **3. Remove `cmd+N` keyboard shortcut as it is not compatible for other non vscode IDEs** - Run `pnpm install && pnpm build && pnpm -C vscode build && pnpm -C vscode run dev ` - Click the Cody chat box and type `cmd+N`. This should create a new file. - Hover open the model select to see the tooltip - `cmd+M` opens the model options, escape key closes the model options See video before for my local testing https://www.loom.com/share/0018805561774723a286350b57e3c9d1 --------- Co-authored-by: Beatrix <[email protected]>

This reverts commit d1a5d47.

abeatrix and others added 16 commits February 28, 2025 17:11

flipe model and mode

71d62e7

fix ui unit test

1c3d077

Merge branch 'bee/mode-selector' into bee/move-model

cbc78a7

update css

d228ee8

address PR comments

4e97263

attempt to add shortcut (wip)

fd63bcd

add keyboard shorcut

code cleanup

36510bd

fix tests

72a2bf0

Update vscode/src/commands/index.ts

6569d12

Co-authored-by: Beatrix <[email protected]>

Update vscode/src/chat/protocol.ts

b2a2b1e

Co-authored-by: Beatrix <[email protected]>

Merge branch 'main' into bee/move-model

b9c170c

Merge branch 'bee/move-model' of https://github.com/sourcegraph/cody …

f9b8dfc

…into bee/move-model

address PR comments

3056b5e

re-implement keyboard shortcut

e8e110e

julialeex mentioned this pull request Mar 4, 2025

refactor(webview): relocate model selector #7288

Closed

julialeex requested review from abeatrix, alexromano and a team March 4, 2025 18:27

Update lib/shared/src/misc/rpc/webviewAPI.ts

9bc8dc5

Co-authored-by: Beatrix <[email protected]>

julialeex and others added 2 commits March 4, 2025 10:45

add cmd+m

4b7d457

show the model selector only when we are on chat view + fix tests

948856b

julialeex commented Mar 4, 2025

View reviewed changes

abeatrix reviewed Mar 4, 2025

View reviewed changes

julialeex added 3 commits March 4, 2025 13:57

add model selector to chat editor

ea52b67

fix bug

b19916d

update cmd+n

00ed8f0

julialeex requested a review from abeatrix March 4, 2025 23:07

julialeex force-pushed the jlxu/move-model branch from 34ed589 to 00ed8f0 Compare March 5, 2025 03:48

abeatrix reviewed Mar 5, 2025

View reviewed changes

small fixes

1045d37

julialeex force-pushed the jlxu/move-model branch from 47a55e9 to 1045d37 Compare March 5, 2025 05:15

julialeex requested a review from abeatrix March 5, 2025 05:16

padding

bfead3a

abeatrix approved these changes Mar 5, 2025

View reviewed changes

Update vscode/webviews/tabs/TabsBar.tsx

706fb0e

Co-authored-by: Beatrix <[email protected]>

abeatrix reviewed Mar 5, 2025

View reviewed changes

vscode/webviews/components/shadcn/ui/toolbar.tsx Outdated Show resolved Hide resolved

Update vscode/webviews/components/shadcn/ui/toolbar.tsx

7facec6

Co-authored-by: Beatrix <[email protected]> fix biome fix

julialeex force-pushed the jlxu/move-model branch from e2cde87 to 7facec6 Compare March 5, 2025 15:47

julialeex merged commit d1a5d47 into main Mar 5, 2025
20 of 22 checks passed

julialeex deleted the jlxu/move-model branch March 5, 2025 16:21

ichim-david reviewed Mar 6, 2025

View reviewed changes

vscode/package.json Show resolved Hide resolved

julialeex added a commit that referenced this pull request Mar 6, 2025

Revert "refactor(webview): relocate model selector (CODY-5194) (#7322)"

d405c8b

This reverts commit d1a5d47.

julialeex mentioned this pull request Mar 6, 2025

fix(chat): Fix React warnings caused by relocating the model selector #7351

Merged

sourcegraph-release-bot mentioned this pull request Mar 7, 2025

[Backport M76] fix(chat): Fix React warnings caused by relocating the model selector #7366

Open

julialeex added a commit that referenced this pull request Mar 9, 2025

Revert "refactor(webview): relocate model selector (CODY-5194) (#7322)"

52bac5c

This reverts commit d1a5d47.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(webview): relocate model selector (CODY-5194) #7322

refactor(webview): relocate model selector (CODY-5194) #7322

julialeex commented Mar 4, 2025 •

edited

Loading

alexromano commented Mar 4, 2025

julialeex commented Mar 4, 2025

julialeex Mar 4, 2025

abeatrix Mar 4, 2025

abeatrix Mar 4, 2025

alexromano commented Mar 4, 2025 •

edited

Loading

julialeex commented Mar 4, 2025 •

edited

Loading

abeatrix left a comment

abeatrix Mar 5, 2025

julialeex Mar 5, 2025

abeatrix Mar 5, 2025

abeatrix commented Mar 5, 2025

julialeex commented Mar 5, 2025 •

edited

Loading

alexromano commented Mar 5, 2025 •

edited

Loading

julialeex commented Mar 5, 2025

abeatrix commented Mar 5, 2025

julialeex commented Mar 5, 2025

julialeex commented Mar 5, 2025 •

edited

Loading

abeatrix left a comment

abeatrix Mar 5, 2025

julialeex Mar 5, 2025

refactor(webview): relocate model selector (CODY-5194) #7322

refactor(webview): relocate model selector (CODY-5194) #7322

Conversation

julialeex commented Mar 4, 2025 • edited Loading

Test plan

alexromano commented Mar 4, 2025

julialeex commented Mar 4, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexromano commented Mar 4, 2025 • edited Loading

julialeex commented Mar 4, 2025 • edited Loading

abeatrix 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

abeatrix commented Mar 5, 2025

julialeex commented Mar 5, 2025 • edited Loading

alexromano commented Mar 5, 2025 • edited Loading

julialeex commented Mar 5, 2025

abeatrix commented Mar 5, 2025

julialeex commented Mar 5, 2025

julialeex commented Mar 5, 2025 • edited Loading

abeatrix left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julialeex commented Mar 4, 2025 •

edited

Loading

alexromano commented Mar 4, 2025 •

edited

Loading

julialeex commented Mar 4, 2025 •

edited

Loading

julialeex commented Mar 5, 2025 •

edited

Loading

alexromano commented Mar 5, 2025 •

edited

Loading

julialeex commented Mar 5, 2025 •

edited

Loading