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

vscode/package.json

@@ -600,14 +600,15 @@
         "key": "alt+l",
         "when": "cody.activated"
       },
+
       {
         "command": "cody.mention.selection",
         "key": "alt+l",
         "when": "cody.activated && editorTextFocus && editorHasSelection"
       },
       {
         "command": "cody.chat.new",
-        "key": "shift+alt+/",
+        "key": "cmd+n",
         "when": "cody.activated && !editorTextFocus"
       },
       {

vscode/test/e2e/auth.test.ts

@@ -45,7 +45,7 @@ test.extend<ExpectedV2Events>({
     await expect(sidebar!.getByText('Invalid access token.')).not.toBeVisible()
     await expect(sidebar!.getByText('Sign in to Sourcegraph')).not.toBeVisible()
     await expect(sidebar!.getByLabel('Chat message')).toBeVisible()
-    await expect(sidebar!.getByRole('button', { name: 'New Chat' })).toBeVisible()
+    await expect(sidebar!.getByTestId('tab-chat')).toBeVisible()
 
     // Sign out.
     await signOut(page)
@@ -149,7 +149,7 @@ test.extend<ExpectedV2Events>({
         await expect(sidebar!.getByLabel('Chat message')).toBeVisible()
 
         // Open the User Dropdown menu
-        await expect(sidebar!.getByRole('button', { name: 'New Chat' })).toBeVisible()
+        await expect(sidebar!.getByTestId('tab-chat')).toBeVisible()
         await sidebar!.getByLabel('Account Menu Button').click({ delay: 2000 })
 
         const codeWebview = sidebar!.getByLabel('cody-webview')

vscode/test/e2e/chat-input.test.ts

@@ -202,7 +202,10 @@ test.extend<DotcomUrlOverride>({ dotcomUrl: mockServer.SERVER_URL }).extend<Expe
     const chatFrame = getChatSidebarPanel(page)
     const firstChatInput = getChatInputs(chatFrame).first()
 
-    const modelSelect = chatFrame.getByRole('combobox', { name: 'Select a model' }).last()
+    const chatTab = chatFrame.getByTestId('tab-chat')
+    await chatTab.click()
+
+    const modelSelect = chatFrame.getByTestId('chat-model-selector')
 
     await expect(modelSelect).toBeEnabled()
     await expect(modelSelect).toHaveText(/^Claude 3.5 Sonnet/)
@@ -215,7 +218,10 @@ test.extend<DotcomUrlOverride>({ dotcomUrl: mockServer.SERVER_URL }).extend<Expe
     await modelSelect.click()
     const modelChoices = chatFrame.getByRole('listbox', { name: 'Suggestions' })
     await modelChoices.getByRole('option', { name: 'Claude 3 Haiku' }).click()
+
     const lastChatInput = getChatInputs(chatFrame).last()
+    await lastChatInput.click()
+
     await expect(lastChatInput).toBeFocused()
     await expect(modelSelect).toHaveText(/^Claude 3 Haiku/)
     await lastChatInput.fill('to model2')

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

@@ -12,10 +12,10 @@
     await sidebarSignin(page, sidebar, { enableNotifications: true })
     // Open chat.
     const [chatFrame] = await createEmptyChatPanel(page)
-    let modelSelect = chatFrame.getByRole('combobox', { name: 'Select a model' }).last()
+    let modelSelect = chatFrame.getByTestId('chat-model-selector')
 
     // First model in the server list should be selected as default
     await expect(modelSelect).toBeEnabled()
     await expect(modelSelect).toHaveText(/^Opus/)
 
     // Change selection to Titan and assert it was updated
@@ -31,7 +31,7 @@
     await chatTab.getByRole('button', { name: /^Close/ }).click()
 
     const [newChatFrame] = await createEmptyChatPanel(page)
-    modelSelect = newChatFrame.getByRole('combobox', { name: 'Select a model' }).last()
+    modelSelect = newChatFrame.getByTestId('chat-model-selector')
 
     // First model in the server list should be selected as default
     await expect(modelSelect).toBeEnabled()

vscode/webviews/CodyPanel.tsx

@@ -121,6 +121,7 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
                 {/* Hide tab bar in editor chat panels. */}
                 {config.webviewType !== 'editor' && (
                     <TabsBar
+                        models={chatModels}
                         user={user}
                         currentView={view}
                         setView={setView}

vscode/webviews/chat/Transcript.test.tsx

@@ -35,34 +35,6 @@ describe('Transcript', () => {
         expectCells([{ message: '' }])
     })
 
-    test('renders with provided models', () => {
-        const { container } = render(
-            <Transcript
-                {...PROPS}
-                transcript={[
-                    { speaker: 'human', text: ps`Hello` },
-                    { speaker: 'assistant', text: ps`Hi` },
-                ]}
-            />
-        )
-
-        // Check if the model selector is rendered
-        const modelSelector = container.querySelector('[data-testid="chat-model-selector"]')
-        expect(modelSelector).not.toBeNull()
-        expect(modelSelector?.textContent).toEqual(FIXTURE_MODELS[0].title)
-
-        // Open the menu on click
-        fireEvent.click(modelSelector!)
-        const modelPopover = container?.querySelectorAll('[data-testid="chat-model-popover"]')[0]
-        const modelMenu = modelPopover!.querySelector('[data-testid="chat-model-popover-option"]')
-        const modelOptions = modelMenu!.querySelectorAll('[data-testid="chat-model-popover-option"]')
-        expect(modelOptions).toHaveLength(FIXTURE_MODELS.length)
-
-        // Check if the model titles are correct
-        const modelTitles = Array.from(modelOptions!).map(option => option.textContent)
-        expect(modelTitles.some(title => title === FIXTURE_MODELS[0].title)).toBe(true)
-    })
-
     test('interaction without context', () => {
         render(
             <Transcript

vscode/webviews/chat/cells/messageCell/human/editor/HumanMessageEditor.test.tsx

@@ -135,9 +135,9 @@ describe('HumanMessageEditor', () => {
 
         test('model selector is showing up with the default model name', () => {
             const { container } = renderWithMocks({})
-            const modelSelector = container.querySelector('[data-testid="chat-model-selector"]')
+            const tabsBar = container.querySelector('[class*="tabsRoot"]')
+            const modelSelector = tabsBar?.querySelector('[data-testid="chat-model-selector"]')
             expect(modelSelector).not.toBeNull()
-            expect(modelSelector?.textContent).toEqual(FIXTURE_MODELS[0].title)
         })
     })
 })

vscode/webviews/chat/cells/messageCell/human/editor/toolbar/Toolbar.tsx

@@ -9,11 +9,9 @@ import {
 import clsx from 'clsx'
 import { type FunctionComponent, useCallback, useMemo } from 'react'
 import type { UserAccountInfo } from '../../../../../../Chat'
-import { ModelSelectField } from '../../../../../../components/modelSelectField/ModelSelectField'
 import { PromptSelectField } from '../../../../../../components/promptSelectField/PromptSelectField'
 import toolbarStyles from '../../../../../../components/shadcn/ui/toolbar.module.css'
 import { useActionSelect } from '../../../../../../prompts/PromptsTab'
-import { useClientConfig } from '../../../../../../utils/useClientConfig'
 import { MediaUploadButton } from './MediaUploadButton'
 import { ModeSelectorField } from './ModeSelectorButton'
 import { SubmitButton, type SubmitButtonState } from './SubmitButton'
@@ -117,13 +115,6 @@ export const Toolbar: FunctionComponent<{
                     />
                 )}
                 <PromptSelectFieldToolbarItem focusEditor={focusEditor} className="tw-ml-1 tw-mr-1" />
-                <ModelSelectFieldToolbarItem
-                    models={models}
-                    userInfo={userInfo}
-                    focusEditor={focusEditor}
-                    className="tw-mr-1"
-                    extensionAPI={extensionAPI}
-                />
                 {!userInfo?.isDotComUser && omniBoxEnabled && (
                     <ModeSelectorField
                         className={className}
@@ -157,39 +148,3 @@ const PromptSelectFieldToolbarItem: FunctionComponent<{
 
     return <PromptSelectField onSelect={onSelect} onCloseByEscape={focusEditor} className={className} />
 }
-
-const ModelSelectFieldToolbarItem: FunctionComponent<{
-    models: Model[]
-    userInfo: UserAccountInfo
-    focusEditor?: () => void
-    className?: string
-    extensionAPI: WebviewToExtensionAPI
-}> = ({ userInfo, focusEditor, className, models, extensionAPI }) => {
-    const clientConfig = useClientConfig()
-    const serverSentModelsEnabled = !!clientConfig?.modelsAPIEnabled
-
-    const onModelSelect = useCallback(
-        (model: Model) => {
-            extensionAPI.setChatModel(model.id).subscribe({
-                error: error => console.error('setChatModel:', error),
-            })
-            focusEditor?.()
-        },
-        [extensionAPI.setChatModel, focusEditor]
-    )
-
-    return (
-        !!models?.length &&
-        (userInfo.isDotComUser || serverSentModelsEnabled) && (
-            <ModelSelectField
-                models={models}
-                onModelSelect={onModelSelect}
-                serverSentModelsEnabled={serverSentModelsEnabled}
-                userInfo={userInfo}
-                onCloseByEscape={focusEditor}
-                className={className}
-                data-testid="chat-model-selector"
-            />
-        )
-    )
-}

vscode/webviews/components/modelSelectField/ModelSelectField.module.css

@@ -46,7 +46,7 @@
 }
 
 button > .model-title-with-icon .model-name {
-    font-weight: normal;
+    font-weight: 600;
 }
 
 button > .model-title-with-icon .model-icon,

vscode/webviews/components/modelSelectField/ModelSelectField.tsx

@@ -36,6 +36,8 @@ export const ModelSelectField: React.FunctionComponent<{
 
     /** For storybooks only. */
     __storybook__open?: boolean
+
+    modelSelectorRef?: React.RefObject<{ open: () => void; close: () => void }>
 }> = ({
     models,
     onModelSelect: parentOnModelSelect,
@@ -44,6 +46,7 @@ export const ModelSelectField: React.FunctionComponent<{
     onCloseByEscape,
     className,
     __storybook__open,
+    modelSelectorRef,
 }) => {
     const telemetryRecorder = useTelemetryRecorder()
 
@@ -149,8 +152,11 @@ export const ModelSelectField: React.FunctionComponent<{
 
     const onKeyDown = useCallback(
         (event: React.KeyboardEvent<HTMLDivElement>) => {
+            event.preventDefault()
+            event.stopPropagation()
             if (event.key === 'Escape') {
                 onCloseByEscape?.()
+                return
             }
         },
         [onCloseByEscape]
@@ -167,10 +173,12 @@ export const ModelSelectField: React.FunctionComponent<{
             data-testid="chat-model-selector"
             iconEnd={readOnly ? undefined : 'chevron'}
             className={cn('tw-justify-between', className)}
+            defaultOpen={false}
             disabled={readOnly}
             __storybook__open={__storybook__open}
-            tooltip={readOnly ? undefined : 'Select a model'}
+            tooltip={readOnly ? undefined : 'Switch model (⌘+m)'}
             aria-label="Select a model or an agent"
+            ref={modelSelectorRef}
             popoverContent={close => (
                 <Command
                     loop={true}
@@ -265,7 +273,7 @@ export const ModelSelectField: React.FunctionComponent<{
             popoverRootProps={{ onOpenChange }}
             popoverContentProps={{
                 className: 'tw-min-w-[325px] tw-w-[unset] tw-max-w-[90%] !tw-p-0',
-                onKeyDown: onKeyDown,
+                onKeyDown,
                 onCloseAutoFocus: event => {
                     // Prevent the popover trigger from stealing focus after the user selects an
                     // item. We want the focus to return to the editor.
@@ -278,6 +286,7 @@ export const ModelSelectField: React.FunctionComponent<{
     )
 }
 
+ModelSelectField.displayName = 'ModelSelectField'
 const ENTERPRISE_MODEL_DOCS_PAGE =
     'https://sourcegraph.com/docs/cody/clients/enable-cody-enterprise?utm_source=cody.modelSelector'
 

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

@@ -5,13 +5,13 @@ import { ChevronDownIcon } from 'lucide-react'
 import {
     type ButtonHTMLAttributes,
     type ComponentType,
-    type FunctionComponent,
     type KeyboardEventHandler,
     type PropsWithChildren,
     type ReactNode,
     forwardRef,
     useCallback,
     useEffect,
+    useImperativeHandle,
     useRef,
     useState,
 } from 'react'
@@ -42,7 +42,7 @@ interface ToolbarButtonProps
         VariantProps<typeof buttonVariants> {
     tooltip?: ReactNode
     iconStart?: IconComponent
-    iconEnd?: IconComponent | 'chevron'
+    iconEnd?: IconComponent | 'chevron' | null
 
     asChild?: boolean
 }
@@ -92,36 +92,33 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
 )
 ToolbarButton.displayName = 'ToolbarButton'
 
-export const ToolbarPopoverItem: FunctionComponent<
+export const ToolbarPopoverItem = forwardRef<
+    { open: () => void },
     PropsWithChildren<
         ButtonHTMLAttributes<HTMLButtonElement> &
-            Pick<ToolbarButtonProps, 'iconStart' | 'tooltip'> & {
-                iconEnd: ToolbarButtonProps['iconEnd'] | null
+            Omit<Pick<ToolbarButtonProps, 'iconStart' | 'tooltip'>, 'iconEnd'> & {
+                iconEnd: ToolbarButtonProps['iconEnd'] | undefined
                 popoverContent: (close: () => void) => React.ReactNode
-
                 defaultOpen?: boolean
-
                 onCloseByEscape?: () => void
-
                 popoverRootProps?: Pick<PopoverProps, 'onOpenChange'>
                 popoverContentProps?: Omit<PopoverContentProps, 'align'>
-
-                /** For storybooks only. */
                 __storybook__open?: boolean
             }
     >
-> = ({
-    iconEnd = 'chevron',
-    popoverContent,
-    defaultOpen,
-    onCloseByEscape,
-    popoverRootProps,
-    popoverContentProps,
-    __storybook__open,
-    children,
-    ...props
-}) => {
+>((props, ref) => {
+    const {
+        iconEnd = 'chevron',
+        popoverContent,
+        defaultOpen,
+        onCloseByEscape,
+        popoverRootProps,
+        popoverContentProps,
+        __storybook__open,
+        children,
+    } = props
     const [isOpen, setIsOpen] = useState(defaultOpen)
+
     const onButtonClick = useCallback(() => {
         setIsOpen(isOpen => !isOpen)
     }, [])
@@ -132,6 +129,16 @@ export const ToolbarPopoverItem: FunctionComponent<
         }
     }, [__storybook__open])
 
+    // Expose the open method via ref
+    useImperativeHandle(
+        ref,
+        () => ({
+            open: () => setIsOpen(true),
+            close: () => setIsOpen(false),
+        }),
+        []
+    )
+
     const popoverContentRef = useRef<HTMLDivElement>(null)
 
     const onOpenChange = useCallback(
@@ -171,15 +178,18 @@ export const ToolbarPopoverItem: FunctionComponent<
         [onCloseByEscape, popoverContentProps?.onKeyDown]
     )
 
+    const finalIconEnd = iconEnd === null ? undefined : iconEnd
+    const { iconEnd: _, ...restProps } = props
+
     return (
         <Popover open={isOpen} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
             <PopoverTrigger asChild={true}>
                 <ToolbarButton
                     variant="secondary"
-                    iconEnd={iconEnd ?? undefined}
+                    iconEnd={finalIconEnd}
                     ref={anchorRef}
                     onClick={onButtonClick}
-                    {...props}
+                    {...restProps}
                 >
                     {children}
                 </ToolbarButton>
@@ -194,4 +204,5 @@ export const ToolbarPopoverItem: FunctionComponent<
             </PopoverContent>
         </Popover>
     )
-}
+})
+ToolbarPopoverItem.displayName = 'ToolbarPopoverItem'