chat input: '@' -> '@ Context' toolbar button

sourcegraph · Nov 12, 2024 · 9854a30 · 9854a30
1 parent e1615b4
commit 9854a30
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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);