From 9854a30d4e3cd1b9da4434d4182b3e120c17e679 Mon Sep 17 00:00:00 2001
From: Beyang Liu <beyang@sourcegraph.com>
Date: Tue, 12 Nov 2024 13:22:34 -0800
Subject: [PATCH] chat input: '@' -> '@ Context' toolbar button

---
 .../human/editor/toolbar/AddContextButton.tsx            | 9 ++-------
 .../cells/messageCell/human/editor/toolbar/Toolbar.tsx   | 3 ++-
 vscode/webviews/components/shadcn/ui/toolbar.module.css  | 6 ++++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/AddContextButton.tsx b/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/AddContextButton.tsx
index 550826b33ae6..a68f823fc206 100644
--- a/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/AddContextButton.tsx
+++ b/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/AddContextButton.tsx
@@ -10,14 +10,9 @@ export const AddContextButton: FunctionComponent<{
 }> = ({ onClick, className }) => (
     <Tooltip>
         <TooltipTrigger asChild>
-            <Button
-                variant="ghost"
-                size="icon"
-                onClick={onClick}
-                aria-label="Add context"
-                className={className}
-            >
+            <Button variant="ghost" onClick={onClick} aria-label="Add context" className={className}>
                 <AtSignIcon className="tw-w-8 tw-h-8" strokeWidth={1.25} />
+                <span>Context</span>
             </Button>
         </TooltipTrigger>
         <TooltipContent side="bottom">
diff --git a/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/Toolbar.tsx b/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/Toolbar.tsx
index 8a2fa37fe7da..5d7bedaccc9a 100644
--- a/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/Toolbar.tsx
+++ b/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/Toolbar.tsx
@@ -5,6 +5,7 @@ import { type FunctionComponent, useCallback } from 'react'
 import type { UserAccountInfo } from '../../../../../../Chat'
 import { ModelSelectField } from '../../../../../../components/modelSelectField/ModelSelectField'
 import { PromptSelectField } from '../../../../../../components/promptSelectField/PromptSelectField'
+import toolbarStyles from '../../../../../../components/shadcn/ui/toolbar.module.css'
 import { useActionSelect } from '../../../../../../prompts/PromptsTab'
 import { useConfig } from '../../../../../../utils/useConfig'
 import { AddContextButton } from './AddContextButton'
@@ -82,7 +83,7 @@ export const Toolbar: FunctionComponent<{
                 {onMentionClick && (
                     <AddContextButton
                         onClick={onMentionClick}
-                        className="tw-opacity-60 focus-visible:tw-opacity-100 hover:tw-opacity-100 tw-mr-2"
+                        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" />
diff --git a/vscode/webviews/components/shadcn/ui/toolbar.module.css b/vscode/webviews/components/shadcn/ui/toolbar.module.css
index 8452b243b774..deaf031bcbf4 100644
--- a/vscode/webviews/components/shadcn/ui/toolbar.module.css
+++ b/vscode/webviews/components/shadcn/ui/toolbar.module.css
@@ -38,6 +38,12 @@
     margin-left: calc(-1*var(--gap));
 }
 
+.button--small-icon {
+    > svg {
+        height: 1.25em;
+    }
+}
+
 .button--primary {
     color: var(--vscode-button-foreground);
     background-color: var(--vscode-button-background);