Bug/DX fix: Send prompts from Prompt Library to the currently selected chat box!

vscode/src/chat/protocol.ts

@@ -14,6 +14,7 @@ import type {
     SerializedChatMessage,
     UserProductSubscription,
 } from '@sourcegraph/cody-shared'
+import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 
 import type { BillingCategory, BillingProduct } from '@sourcegraph/cody-shared/src/telemetry-v2'
 
@@ -174,7 +175,12 @@ export type ExtensionMessage =
           smartApplyResult?: SmartApplyResult | undefined | null
           submitHumanInput?: boolean | undefined | null
           setPromptAsInput?:
-              | { text: string; mode?: PromptMode | undefined | null; autoSubmit: boolean }
+              | {
+                    text: string
+                    mode?: PromptMode | undefined | null
+                    autoSubmit: boolean
+                    editorRef: React.RefObject<PromptEditorRefAPI | null>
+                }
               | undefined
               | null
       }

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

@@ -361,12 +361,19 @@ export const HumanMessageEditor: FunctionComponent<{
                                 extensionAPI.hydratePromptMessage(setPromptAsInput.text, initialContext)
                             )
 
+                            let targetEditorRef: React.RefObject<PromptEditorRefAPI | null>
+                            if (setPromptAsInput.editorRef) {
+                                targetEditorRef = setPromptAsInput.editorRef
+                            } else {
+                                targetEditorRef = editorRef
+                            }
+
                             // update editor state
                             requestAnimationFrame(async () => {
-                                if (editorRef.current) {
+                                if (targetEditorRef.current) {
                                     await Promise.all([
-                                        editorRef.current.setEditorState(promptEditorState),
-                                        editorRef.current.setFocus(true),
+                                        targetEditorRef.current.setEditorState(promptEditorState),
+                                        targetEditorRef.current.setFocus(true),
                                     ])
                                 }
                                 resolve()
@@ -453,6 +460,7 @@ export const HumanMessageEditor: FunctionComponent<{
                     models={models}
                     userInfo={userInfo}
                     isEditorFocused={focused}
+                    editorRef={editorRef}
                     onMentionClick={onMentionClick}
                     onSubmitClick={onSubmitClick}
                     submitState={submitState}

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

@@ -1,4 +1,5 @@
 import type { Action, ChatMessage, Model } from '@sourcegraph/cody-shared'
+import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { useExtensionAPI } from '@sourcegraph/prompt-editor'
 import clsx from 'clsx'
 import { type FunctionComponent, useCallback } from 'react'
@@ -20,6 +21,8 @@ export const Toolbar: FunctionComponent<{
 
     isEditorFocused: boolean
 
+    editorRef: React.RefObject<PromptEditorRefAPI | null>
+
     onMentionClick?: () => void
 
     onSubmitClick: (intent?: ChatMessage['intent']) => void
@@ -37,6 +40,7 @@ export const Toolbar: FunctionComponent<{
 }> = ({
     userInfo,
     isEditorFocused,
+    editorRef,
     onMentionClick,
     onSubmitClick,
     submitState,
@@ -86,7 +90,11 @@ export const Toolbar: FunctionComponent<{
                         className={`tw-opacity-60 focus-visible:tw-opacity-100 hover:tw-opacity-100 tw-mr-2 tw-gap-0.5 ${toolbarStyles.button} ${toolbarStyles.buttonSmallIcon}`}
                     />
                 )}
-                <PromptSelectFieldToolbarItem focusEditor={focusEditor} className="tw-ml-1 tw-mr-1" />
+                <PromptSelectFieldToolbarItem
+                    focusEditor={focusEditor}
+                    editorRef={editorRef}
+                    className="tw-ml-1 tw-mr-1"
+                />
                 <ModelSelectFieldToolbarItem
                     models={models}
                     userInfo={userInfo}
@@ -109,19 +117,27 @@ export const Toolbar: FunctionComponent<{
 
 const PromptSelectFieldToolbarItem: FunctionComponent<{
     focusEditor?: () => void
+    editorRef: React.RefObject<PromptEditorRefAPI | null>
     className?: string
-}> = ({ focusEditor, className }) => {
+}> = ({ focusEditor, editorRef, className }) => {
     const runAction = useActionSelect()
 
     const onSelect = useCallback(
-        async (item: Action) => {
-            await runAction(item, () => {})
+        async (item: Action, editorRef: React.RefObject<PromptEditorRefAPI | null>) => {
+            await runAction(item, editorRef, () => {})
             focusEditor?.()
         },
         [focusEditor, runAction]
     )
 
-    return <PromptSelectField onSelect={onSelect} onCloseByEscape={focusEditor} className={className} />
+    return (
+        <PromptSelectField
+            onSelect={onSelect}
+            editorRef={editorRef}
+            onCloseByEscape={focusEditor}
+            className={className}
+        />
+    )
 }
 
 const ModelSelectFieldToolbarItem: FunctionComponent<{

vscode/webviews/chat/components/WelcomeMessage.tsx

@@ -1,5 +1,8 @@
 import { CodyIDE } from '@sourcegraph/cody-shared'
+import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import type { FunctionComponent } from 'react'
+import type { RefObject } from 'react'
+import { useRef } from 'react'
 import { Kbd } from '../../components/Kbd'
 import { PromptList } from '../../components/promptList/PromptList'
 import { Button } from '../../components/shadcn/ui/button'
@@ -30,6 +33,7 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
     const handleRecentlyUsed = () => {
         document.querySelector<HTMLButtonElement>("button[aria-label='Insert prompt']")?.click()
     }
+    const ref: RefObject<PromptEditorRefAPI | null> = useRef(null)
 
     return (
         <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-gap-6 tw-transition-all">
@@ -46,7 +50,8 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
                     showPromptLibraryUnsupportedMessage={false}
                     appearanceMode="chips-list"
                     telemetryLocation="WelcomeAreaPrompts"
-                    onSelect={item => runAction(item, setView)}
+                    editorRef={ref}
+                    onSelect={item => runAction(item, ref, setView)}
                 />
 
                 <div className={clsx(styles.actions, 'tw-flex tw-py-2 tw-gap-8 tw-justify-center')}>

vscode/webviews/components/promptList/PromptList.tsx

@@ -18,6 +18,7 @@ import { usePromptsQuery } from './usePromptsQuery'
 import { commandRowValue } from './utils'
 
 import type { PromptsInput } from '@sourcegraph/cody-shared'
+import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { useLocalStorage } from '../../components/hooks'
 import styles from './PromptList.module.css'
 
@@ -41,7 +42,8 @@ interface PromptListProps {
     appearanceMode?: 'flat-list' | 'chips-list'
     lastUsedSorting?: boolean
     recommendedOnly?: boolean
-    onSelect: (item: Action) => void
+    onSelect: (item: Action, editorRef: React.RefObject<PromptEditorRefAPI | null>) => void
+    editorRef: React.RefObject<PromptEditorRefAPI | null>
 }
 
 /**
@@ -65,6 +67,7 @@ export const PromptList: FC<PromptListProps> = props => {
         lastUsedSorting,
         recommendedOnly,
         onSelect: parentOnSelect,
+        editorRef: parentEditorRef,
     } = props
 
     const endpointURL = new URL(useConfig().authStatus.endpoint)
@@ -92,6 +95,7 @@ export const PromptList: FC<PromptListProps> = props => {
     const onSelect = useCallback(
         (rowValue: string): void => {
             const action = result?.actions.find(p => commandRowValue(p) === rowValue)
+            const editorRef = parentEditorRef
 
             if (!action || !result) {
                 return
@@ -139,7 +143,7 @@ export const PromptList: FC<PromptListProps> = props => {
                 },
             })
 
-            parentOnSelect(action)
+            parentOnSelect(action, editorRef)
         },
         [
             result,
@@ -148,6 +152,7 @@ export const PromptList: FC<PromptListProps> = props => {
             telemetryPublicMetadata,
             debouncedQuery,
             error,
+            parentEditorRef,
         ]
     )
 

vscode/webviews/components/promptSelectField/PromptSelectField.tsx

@@ -1,4 +1,5 @@
 import type { Action } from '@sourcegraph/cody-shared'
+import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { BookText } from 'lucide-react'
 import { useCallback } from 'react'
 import { Button } from '../../components/shadcn/ui/button'
@@ -10,13 +11,14 @@ import { ToolbarPopoverItem } from '../shadcn/ui/toolbar'
 import { cn } from '../shadcn/utils'
 
 export const PromptSelectField: React.FunctionComponent<{
-    onSelect: (item: Action) => void
+    onSelect: (item: Action, editorRef: React.RefObject<PromptEditorRefAPI | null>) => void
+    editorRef: React.RefObject<PromptEditorRefAPI | null>
     onCloseByEscape?: () => void
     className?: string
 
     /** For storybooks only. */
     __storybook__open?: boolean
-}> = ({ onSelect, onCloseByEscape, className, __storybook__open }) => {
+}> = ({ onSelect, editorRef, onCloseByEscape, className, __storybook__open }) => {
     const telemetryRecorder = useTelemetryRecorder()
     const { setView } = useTabView()
 
@@ -49,10 +51,11 @@ export const PromptSelectField: React.FunctionComponent<{
             popoverContent={close => (
                 <div className="tw-flex tw-flex-col tw-max-h-[500px] tw-overflow-auto">
                     <PromptList
-                        onSelect={item => {
-                            onSelect(item)
+                        onSelect={(item, editorRef) => {
+                            onSelect(item, editorRef)
                             close()
                         }}
+                        editorRef={editorRef}
                         showSearch={true}
                         paddingLevels="middle"
                         telemetryLocation="PromptSelectField"

vscode/webviews/prompts/PromptsTab.tsx

@@ -7,14 +7,16 @@ import { getVSCodeAPI } from '../utils/VSCodeApi'
 
 import { CodyIDE } from '@sourcegraph/cody-shared'
 import type { PromptMode } from '@sourcegraph/cody-shared/src/sourcegraph-api/graphql/client'
+import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { PromptMigrationWidget } from '../components/promptsMigration/PromptsMigration'
 import styles from './PromptsTab.module.css'
 
 export const PromptsTab: React.FC<{
     IDE: CodyIDE
     setView: (view: View) => void
     isPromptsV2Enabled?: boolean
-}> = ({ IDE, setView, isPromptsV2Enabled }) => {
+    editorRef: React.RefObject<PromptEditorRefAPI | null>
+}> = ({ IDE, setView, isPromptsV2Enabled, editorRef }) => {
     const runAction = useActionSelect()
 
     return (
@@ -30,7 +32,8 @@ export const PromptsTab: React.FC<{
                 recommendedOnly={false}
                 showOnlyPromptInsertableCommands={false}
                 showPromptLibraryUnsupportedMessage={true}
-                onSelect={item => runAction(item, setView)}
+                onSelect={item => runAction(item, editorRef, setView)}
+                editorRef={editorRef}
                 className={styles.promptsContainer}
                 inputClassName={styles.promptsInput}
             />
@@ -58,7 +61,11 @@ export function useActionSelect() {
         {}
     )
 
-    return async (action: Action, setView: (view: View) => void) => {
+    return async (
+        action: Action,
+        editorRef: React.RefObject<PromptEditorRefAPI | null>,
+        setView: (view: View) => void
+    ) => {
         try {
             const actionKey = action.actionType === 'prompt' ? action.id : action.key
             persistValue({ ...lastUsedActions, [actionKey]: Date.now() })
@@ -76,6 +83,7 @@ export function useActionSelect() {
                             text: action.definition.text,
                             mode: action.mode,
                             autoSubmit: action.autoSubmit || false,
+                            editorRef: editorRef,
                         },
                     },
                     // Buffer because PromptEditor is not guaranteed to be mounted after the `setView`