Cody Web: Polish cody web Prompts (#6135)

This PR does a few improvements for the prompts library in Cody Web
- First of all, it fixes recent regression in openctx (apparently
internally openctx library tries to find vs code setting file and with
an empty Cody Web Workspace URI it fails in runtime and therefore
doesn't produce any openctx providers such as remote files or
repositories)
- It fixes prompts editor placeholder appearance (we no longer add
whitespaces to the field unconditionally)
- Disables non-runnable in Cody Web prompts (insert or inline commands)
before we render them and these actions did nothing

## Test plan
- Check that you can use openctx mentions in Cody Web (with Cody Web
linked in sg, check ./web contribution doc to see how to link Cody Web
and sg instance)
- Check that you can't click non-chat prompts in Cody Web and see that
they are disabled
- Check that you can see the prompts library placeholder if you don't
have context (Cody Web standalone page case)

lib/prompt-editor/src/PromptEditor.tsx

@@ -256,7 +256,12 @@ export const PromptEditor: FunctionComponent<Props> = ({
                                 const nodesToInsert = lexicalNodesForContextItems(items, {
                                     isFromInitialContext: true,
                                 })
-                                nodesToInsert.push($createTextNode(' '))
+
+                                // Add whitespace after initial context items chips
+                                if (items.length > 0) {
+                                    nodesToInsert.push($createTextNode(' '))
+                                }
+
                                 $setSelection($getRoot().selectStart()) // insert at start
                                 $insertNodes(nodesToInsert)
                                 $selectEnd()

lib/shared/src/configuration/clientCapabilities.ts

@@ -9,7 +9,7 @@ import type { ContextMentionProviderID } from '../mentions/api'
  * {@link ClientCapabilitiesWithLegacyFields.agentIDE} that are inferred in an ad-hoc way from the
  * environment and aren't self-reported by the client.
  */
-export interface ClientCapabilitiesWithLegacyFields {
+export interface ClientCapabilitiesWithLegacyFields extends ClientCapabilities {
     /**
      * The `agentIDE` value, which is the editor that Cody is being used with. If not set, it
      * defaults to {@link CodyIDE.VSCode} to match the previous behavior.

vscode/webviews/chat/components/WelcomeMessage.tsx

@@ -40,12 +40,12 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
                 <PromptList
                     showSearch={false}
                     showFirstNItems={4}
-                    appearanceMode="chips-list"
-                    telemetryLocation="PromptsTab"
+                    recommendedOnly={true}
                     showCommandOrigins={true}
                     showOnlyPromptInsertableCommands={false}
                     showPromptLibraryUnsupportedMessage={false}
-                    recommendedOnly={true}
+                    appearanceMode="chips-list"
+                    telemetryLocation="WelcomeAreaPrompts"
                     onSelect={item => runAction(item, setView)}
                 />
 

vscode/webviews/components/promptList/ActionItem.module.css

@@ -19,6 +19,17 @@
             color: inherit;
         }
     }
+
+    &[data-disabled="true"]  {
+        /*
+         In order to override internal cmdk styles for disabled item.
+         We need to have events over element to have a tooltip over the
+         element on hover/focus.
+        */
+        pointer-events: auto !important;
+        background-color: transparent;
+        cursor: not-allowed;
+    }
 }
 
 .prompt {

vscode/webviews/components/promptList/ActionItem.tsx

@@ -25,6 +25,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/shadcn
 
 import { commandRowValue } from './utils'
 
+import { useConfig } from '../../utils/useConfig'
 import styles from './ActionItem.module.css'
 
 interface ActionItemProps {
@@ -35,11 +36,22 @@ interface ActionItemProps {
 
 export const ActionItem: FC<ActionItemProps> = props => {
     const { action, className, onSelect } = props
+    const { clientCapabilities } = useConfig()
+    const isEditEnabled = clientCapabilities.edit !== 'none'
+    const isActionEditLike =
+        action.actionType === 'prompt' ? action.mode !== 'CHAT' : action.mode !== 'ask'
+    const isDisabled = !isEditEnabled && isActionEditLike
 
     return (
         <CommandItem
             value={commandRowValue(action)}
+            disabled={isDisabled}
             className={clsx(className, styles.item)}
+            tooltip={
+                isDisabled
+                    ? 'Edit-like action is not supported in current read-only environment'
+                    : undefined
+            }
             onSelect={onSelect}
         >
             {action.actionType === 'prompt' ? (

vscode/webviews/components/promptList/PromptList.tsx

@@ -24,7 +24,7 @@ import styles from './PromptList.module.css'
 interface PromptListProps {
     showSearch: boolean
     showFirstNItems?: number
-    telemetryLocation: 'PromptSelectField' | 'PromptsTab'
+    telemetryLocation: 'PromptSelectField' | 'PromptsTab' | 'WelcomeAreaPrompts'
     showOnlyPromptInsertableCommands?: boolean
     showCommandOrigins?: boolean
     showPromptLibraryUnsupportedMessage?: boolean

web/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.13.0
+- Fix openctx mention by mocking Cody Web workspace root
+- Disable non-runnable prompts in Cody Web
+- Fix prompt editor placeholder 
+
 ## 0.11.0
 - Support an external API for Cody Panel functionality (now you can trigger running prompts outside of Cody Web component)
 

web/lib/agent/agent.client.ts

@@ -19,7 +19,6 @@ interface AgentClientOptions {
     serverEndpoint: string
     accessToken: string
     createAgentWorker: () => Worker
-    workspaceRootUri: string
     telemetryClientName?: string
     customHeaders?: Record<string, string>
     debug?: boolean
@@ -30,7 +29,6 @@ export async function createAgentClient({
     serverEndpoint,
     accessToken,
     createAgentWorker,
-    workspaceRootUri,
     customHeaders,
     telemetryClientName,
     debug = true,
@@ -70,8 +68,11 @@ export async function createAgentClient({
     const serverInfo: ServerInfo = await rpc.sendRequest('initialize', {
         name: process.env.CODY_WEB_DEMO ? 'standalone-web' : 'web',
         version: '0.0.1',
-        workspaceRootUri,
+        // Empty root URI leads to openctx configuration resolution failure, any non-empty
+        // mock value (Cody Web doesn't really use any workspace related features)
+        workspaceRootUri: 'sourcegraph/cody',
         capabilities: {
+            edit: 'none',
             completions: 'none',
             webview: 'agentic',
             disabledMentionsProviders: [FILE_CONTEXT_MENTION_PROVIDER.id],

web/lib/components/CodyWebChat.tsx

@@ -39,7 +39,7 @@ import { ChatSkeleton } from './skeleton/ChatSkeleton'
 // the cody agent properly (completely mock data)
 setDisplayPathEnvInfo({
     isWindows: false,
-    workspaceFolders: [URI.file('/tmp/foo')],
+    workspaceFolders: [],
 })
 
 export interface CodyWebChatProps {

web/lib/components/use-cody-agent.ts

@@ -62,7 +62,6 @@ export function useCodyWebAgent(input: UseCodyWebAgentInput): UseCodyWebAgentRes
             customHeaders,
             telemetryClientName,
             createAgentWorker,
-            workspaceRootUri: '',
             serverEndpoint: serverEndpoint,
             accessToken: accessToken ?? '',
         })

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sourcegraph/cody-web",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Cody standalone web app",
   "license": "Apache-2.0",
   "repository": {