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)

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} />
+}

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>
 )