From 33745a905f434cb1cc61d030611402213986c52a Mon Sep 17 00:00:00 2001
From: Beatrix <68532117+abeatrix@users.noreply.github.com>
Date: Fri, 19 Jul 2024 14:43:29 -0700
Subject: [PATCH] Chat UI: add custom commands list (#4948)

After discussing with kevin, we believe removing the custom commands
from the command list would cause discovery issuse. This PR update the
Commands tab list Custom Commands if there is any.

- Adds a `CustomCommandsList` component to the `CommandsTab` to display
any custom commands the user has defined
- The `CustomCommandsList` is only rendered if there are any custom
commands to display

## Test plan

<!-- Required. See
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles.
-->

Check if your custom commands are showing up in the commands tab:


![image](https://github.com/user-attachments/assets/c6b34e82-4a82-4459-8893-74a3c8594d9a)
---
 .../chat/components/CustomCommandsList.tsx    | 35 +++++++++++++++++++
 vscode/webviews/tabs/CommandsTab.tsx          |  2 ++
 2 files changed, 37 insertions(+)
 create mode 100644 vscode/webviews/chat/components/CustomCommandsList.tsx

diff --git a/vscode/webviews/chat/components/CustomCommandsList.tsx b/vscode/webviews/chat/components/CustomCommandsList.tsx
new file mode 100644
index 000000000000..e71d8a1a948f
--- /dev/null
+++ b/vscode/webviews/chat/components/CustomCommandsList.tsx
@@ -0,0 +1,35 @@
+import { type CodyCommand, CodyIDE, CustomCommandType } from '@sourcegraph/cody-shared'
+import { PencilRulerIcon } from 'lucide-react'
+import type { FunctionComponent } from 'react'
+import { Button } from '../../components/shadcn/ui/button'
+import { Collapsible } from '../../components/shadcn/ui/collapsible'
+import { getVSCodeAPI } from '../../utils/VSCodeApi'
+
+export const CustomCommandsList: FunctionComponent<{ commands: CodyCommand[]; IDE?: CodyIDE }> = ({
+    commands,
+    IDE,
+}) => {
+    const customCommandsList = commands.filter(
+        c => c.type === CustomCommandType.Workspace || c.type === CustomCommandType.User
+    )
+
+    if (IDE !== CodyIDE.VSCode || !customCommandsList.length) {
+        return null
+    }
+
+    const customCommands = customCommandsList.map(({ key, prompt, description }) => (
+        <Button
+            key={key}
+            variant="text"
+            size="none"
+            onClick={() => getVSCodeAPI().postMessage({ command: 'command', id: key })}
+            className="tw-px-2 hover:tw-bg-button-background-hover"
+            title={description ?? prompt}
+        >
+            <PencilRulerIcon className="tw-inline-flex" size={13} />
+            <span className="tw-px-4 tw-truncate tw-w-full">{key}</span>
+        </Button>
+    ))
+
+    return <Collapsible title="Custom Commands" items={customCommands} />
+}
diff --git a/vscode/webviews/tabs/CommandsTab.tsx b/vscode/webviews/tabs/CommandsTab.tsx
index 5f3145e3a17f..ecdc8f1ae62a 100644
--- a/vscode/webviews/tabs/CommandsTab.tsx
+++ b/vscode/webviews/tabs/CommandsTab.tsx
@@ -1,4 +1,5 @@
 import type { CodyCommand, CodyIDE } from '@sourcegraph/cody-shared'
+import { CustomCommandsList } from '../chat/components/CustomCommandsList'
 import { DefaultCommandsList } from '../chat/components/DefaultCommandsList'
 
 interface CommandsTabProps {
@@ -9,5 +10,6 @@ interface CommandsTabProps {
 export const CommandsTab: React.FC<CommandsTabProps> = ({ commands, IDE }) => (
     <div className="tw-flex tw-flex-col tw-gap-4 tw-px-8">
         <DefaultCommandsList IDE={IDE} />
+        {commands.length && <CustomCommandsList commands={commands} IDE={IDE} />}
     </div>
 )