Add browse library link to prompt popover (#5779)

This adds - Ghost styling for welcome area buttons - Link "Browser library" to prompt popover UI <img width="424" alt="Screenshot 2024-10-02 at 14 33 48" src="https://github.com/user-attachments/assets/07ed8fad-c735-409e-8b33-47829c9f6585"> ## Test plan - Check that links work properly  ## Changelog
sourcegraph · Oct 2, 2024 · c24f9b3 · c24f9b3
1 parent 85cd7ec
commit c24f9b3
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 56 deletions.
diff --git a/vscode/webviews/CodyPanel.tsx b/vscode/webviews/CodyPanel.tsx
@@ -1,13 +1,14 @@
 import { type AuthStatus, type ClientCapabilities, CodyIDE } from '@sourcegraph/cody-shared'
 import type React from 'react'
-import { type ComponentProps, type FunctionComponent, useRef } from 'react'
+import { type ComponentProps, type FunctionComponent, useMemo, useRef } from 'react'
 import type { ConfigurationSubsetForWebview, LocalEnv } from '../src/chat/protocol'
 import styles from './App.module.css'
 import { Chat } from './Chat'
 import { ConnectivityStatusBanner } from './components/ConnectivityStatusBanner'
 import { StateDebugOverlay } from './components/StateDebugOverlay'
 import { TabContainer, TabRoot } from './components/shadcn/ui/tabs'
 import { AccountTab, HistoryTab, PromptsTab, SettingsTab, TabsBar, View } from './tabs'
+import { TabViewContext } from './utils/useTabView'
 
 /**
  * The Cody tab panel, with tabs for chat, history, prompts, etc.
@@ -54,48 +55,52 @@ export const CodyPanel: FunctionComponent<
     const tabContainerRef = useRef<HTMLDivElement>(null)
 
     return (
-        <TabRoot
-            defaultValue={View.Chat}
-            value={view}
-            orientation="vertical"
-            className={styles.outerContainer}
-        >
-            {!authStatus.authenticated && authStatus.showNetworkError && <ConnectivityStatusBanner />}
-
-            {/* Hide tab bar in editor chat panels. */}
-            {(clientCapabilities.agentIDE === CodyIDE.Web || config.webviewType !== 'editor') && (
-                <TabsBar currentView={view} setView={setView} IDE={clientCapabilities.agentIDE} />
-            )}
-            {errorMessages && <ErrorBanner errors={errorMessages} setErrors={setErrorMessages} />}
-            <TabContainer value={view} ref={tabContainerRef}>
-                {view === View.Chat && (
-                    <Chat
-                        chatEnabled={chatEnabled}
-                        messageInProgress={messageInProgress}
-                        transcript={transcript}
-                        vscodeAPI={vscodeAPI}
-                        guardrails={attributionEnabled ? guardrails : undefined}
-                        showIDESnippetActions={showIDESnippetActions}
-                        showWelcomeMessage={showWelcomeMessage}
-                        scrollableParent={tabContainerRef.current}
-                        smartApplyEnabled={smartApplyEnabled}
-                        setView={setView}
-                    />
+        <TabViewContext.Provider value={useMemo(() => ({ view, setView }), [view, setView])}>
+            <TabRoot
+                defaultValue={View.Chat}
+                value={view}
+                orientation="vertical"
+                className={styles.outerContainer}
+            >
+                {!authStatus.authenticated && authStatus.showNetworkError && (
+                    <ConnectivityStatusBanner />
                 )}
-                {view === View.History && (
-                    <HistoryTab
-                        IDE={clientCapabilities.agentIDE}
-                        setView={setView}
-                        webviewType={config.webviewType}
-                        multipleWebviewsEnabled={config.multipleWebviewsEnabled}
-                    />
+
+                {/* Hide tab bar in editor chat panels. */}
+                {(clientCapabilities.agentIDE === CodyIDE.Web || config.webviewType !== 'editor') && (
+                    <TabsBar currentView={view} setView={setView} IDE={clientCapabilities.agentIDE} />
                 )}
-                {view === View.Prompts && <PromptsTab setView={setView} />}
-                {view === View.Account && <AccountTab setView={setView} />}
-                {view === View.Settings && <SettingsTab />}
-            </TabContainer>
-            <StateDebugOverlay />
-        </TabRoot>
+                {errorMessages && <ErrorBanner errors={errorMessages} setErrors={setErrorMessages} />}
+                <TabContainer value={view} ref={tabContainerRef}>
+                    {view === View.Chat && (
+                        <Chat
+                            chatEnabled={chatEnabled}
+                            messageInProgress={messageInProgress}
+                            transcript={transcript}
+                            vscodeAPI={vscodeAPI}
+                            guardrails={attributionEnabled ? guardrails : undefined}
+                            showIDESnippetActions={showIDESnippetActions}
+                            showWelcomeMessage={showWelcomeMessage}
+                            scrollableParent={tabContainerRef.current}
+                            smartApplyEnabled={smartApplyEnabled}
+                            setView={setView}
+                        />
+                    )}
+                    {view === View.History && (
+                        <HistoryTab
+                            IDE={clientCapabilities.agentIDE}
+                            setView={setView}
+                            webviewType={config.webviewType}
+                            multipleWebviewsEnabled={config.multipleWebviewsEnabled}
+                        />
+                    )}
+                    {view === View.Prompts && <PromptsTab setView={setView} />}
+                    {view === View.Account && <AccountTab setView={setView} />}
+                    {view === View.Settings && <SettingsTab />}
+                </TabContainer>
+                <StateDebugOverlay />
+            </TabRoot>
+        </TabViewContext.Provider>
     )
 }
 

diff --git a/vscode/webviews/chat/components/WelcomeMessage.tsx b/vscode/webviews/chat/components/WelcomeMessage.tsx
@@ -71,7 +71,7 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({ setView
 
                 <div className="tw-flex tw-gap-8 tw-justify-center">
                     <Button
-                        variant="text"
+                        variant="ghost"
                         className="tw-justify-center tw-basis-0 tw-whitespace-nowrap"
                         onClick={() =>
                             document
@@ -83,7 +83,7 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({ setView
                     </Button>
 
                     <Button
-                        variant="text"
+                        variant="ghost"
                         className="tw-justify-center tw-basis-0 tw-whitespace-nowrap"
                         onClick={() => setView(View.Prompts)}
                     >

diff --git a/vscode/webviews/components/promptSelectField/PromptSelectField.tsx b/vscode/webviews/components/promptSelectField/PromptSelectField.tsx
@@ -1,6 +1,10 @@
 import type { Action } from '@sourcegraph/cody-shared'
+import { BookText } from 'lucide-react'
 import { useCallback } from 'react'
+import { Button } from '../../components/shadcn/ui/button'
+import { View } from '../../tabs'
 import { useTelemetryRecorder } from '../../utils/telemetry'
+import { useTabView } from '../../utils/useTabView'
 import { PromptList } from '../promptList/PromptList'
 import { ToolbarPopoverItem } from '../shadcn/ui/toolbar'
 import { cn } from '../shadcn/utils'
@@ -14,6 +18,7 @@ export const PromptSelectField: React.FunctionComponent<{
     __storybook__open?: boolean
 }> = ({ onSelect, onCloseByEscape, className, __storybook__open }) => {
     const telemetryRecorder = useTelemetryRecorder()
+    const { setView } = useTabView()
 
     const onOpenChange = useCallback(
         (open: boolean): void => {
@@ -42,18 +47,26 @@ export const PromptSelectField: React.FunctionComponent<{
             tooltip="Insert prompt from Prompt Library"
             aria-label="Insert prompt"
             popoverContent={close => (
-                <PromptList
-                    onSelect={item => {
-                        onSelect(item)
-                        close()
-                    }}
-                    showSearch={true}
-                    paddingLevels="middle"
-                    telemetryLocation="PromptSelectField"
-                    showOnlyPromptInsertableCommands={true}
-                    showPromptLibraryUnsupportedMessage={true}
-                    lastUsedSorting={true}
-                />
+                <div className="tw-flex tw-flex-col tw-gap-4">
+                    <PromptList
+                        onSelect={item => {
+                            onSelect(item)
+                            close()
+                        }}
+                        showSearch={true}
+                        paddingLevels="middle"
+                        telemetryLocation="PromptSelectField"
+                        showOnlyPromptInsertableCommands={true}
+                        showPromptLibraryUnsupportedMessage={true}
+                        lastUsedSorting={true}
+                    />
+
+                    <footer className="tw-px-2 tw-py-2 tw-border-t tw-border-border tw-bg-muted">
+                        <Button variant="text" onClick={() => setView(View.Prompts)}>
+                            <BookText size={16} /> Browse library
+                        </Button>
+                    </footer>
+                </div>
             )}
             popoverRootProps={{ onOpenChange }}
             popoverContentProps={{

diff --git a/vscode/webviews/components/shadcn/ui/command.tsx b/vscode/webviews/components/shadcn/ui/command.tsx
@@ -110,7 +110,7 @@ const CommandItem = React.forwardRef<
         <CommandPrimitive.Item
             ref={ref}
             className={cn(
-                'tw-relative tw-flex tw-cursor-pointer tw-select-none tw-items-center tw-rounded-sm tw-py-3 tw-px-2 tw-text-md tw-outline-none aria-selected:tw-bg-accent aria-selected:tw-text-accent-foreground hover:tw-bg-accent hover:tw-text-accent-foreground data-[disabled=true]:tw-pointer-events-none data-[disabled=true]:tw-opacity-50',
+                'tw-relative tw-flex tw-cursor-pointer tw-select-none tw-items-center tw-py-3 tw-px-2 tw-text-md tw-outline-none aria-selected:tw-bg-accent aria-selected:tw-text-accent-foreground hover:tw-bg-accent hover:tw-text-accent-foreground data-[disabled=true]:tw-pointer-events-none data-[disabled=true]:tw-opacity-50',
                 className
             )}
             title={tooltip}

diff --git a/vscode/webviews/utils/useTabView.ts b/vscode/webviews/utils/useTabView.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+import { View } from '../tabs'
+
+interface TabViewContextData {
+    view: View
+    setView: (view: View) => void
+}
+
+export const TabViewContext = createContext<TabViewContextData>({
+    view: View.Chat,
+    setView: () => {},
+})
+
+export function useTabView(): TabViewContextData {
+    return useContext(TabViewContext)
+}