Refactor the ChatInput component by removing token count display, eliminating dedicated search and copy buttons, and integrating the edit format selector directly into the input footer

Author: robertpiosik

packages/ui/src/assets/icons/command.svg

@@ -6,14 +6,12 @@ import ChatGPT from '../../../../assets/icons/openai.svg'
 import Claude from '../../../../assets/icons/claude.svg'
 import CodeWebChatLogo from '../../../../assets/icons/code-web-chat-logo.svg'
 import CodeWebChatText from '../../../../assets/icons/code-web-chat-text.svg'
-import Command from '../../../../assets/icons/command.svg'
 import Copilot from '../../../../assets/icons/copilot.svg'
 import CurlyBraces from '../../../../assets/icons/curly-braces.svg'
 import GithubCopilot from '../../../../assets/icons/github-copilot.svg'
 import DeepSeek from '../../../../assets/icons/deepseek.svg'
 import Discord from '../../../../assets/icons/discord.svg'
 import Doubao from '../../../../assets/icons/doubao.svg'
-import Enter from '../../../../assets/icons/enter.svg'
 import Gemini from '../../../../assets/icons/gemini.svg'
 import Grok from '../../../../assets/icons/grok.svg'
 import HashSign from '../../../../assets/icons/hash-sign.svg'
@@ -41,13 +39,11 @@ export namespace Icon {
     | 'CLAUDE'
     | 'CODE_WEB_CHAT_LOGO'
     | 'CODE_WEB_CHAT_TEXT'
-    | 'COMMAND'
     | 'COPILOT'
     | 'CURLY_BRACES'
     | 'DEEPSEEK'
     | 'DISCORD'
     | 'DOUBAO'
-    | 'ENTER'
     | 'GEMINI'
     | 'GITHUB_COPILOT'
     | 'GROK'
@@ -99,9 +95,6 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
     case 'CODE_WEB_CHAT_TEXT':
       icon = <CodeWebChatText />
       break
-    case 'COMMAND':
-      icon = <Command />
-      break
     case 'COPILOT':
       icon = <Copilot />
       break
@@ -117,9 +110,6 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
     case 'DOUBAO':
       icon = <Doubao />
       break
-    case 'ENTER':
-      icon = <Enter />
-      break
     case 'GEMINI':
       icon = <Gemini />
       break

packages/ui/src/components/editor/common/Icon/Icon.tsx

@@ -1,6 +1,5 @@
 .container {
-  --padding: var(--padding-4px) var(--padding-20px) var(--padding-4px)
-    var(--padding-7px);
+  --padding: var(--padding-5px) var(--padding-7px);
   position: relative;
 
   &__inner {
@@ -20,57 +19,6 @@
       border-color: var(--vscode-focusBorder);
     }
 
-    &__search-button {
-      display: flex;
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      right: 0;
-      padding: var(--padding-1px) var(--padding-3px) var(--padding-5px)
-        var(--padding-3px);
-      color: var(--vscode-icon-foreground);
-      cursor: pointer;
-      opacity: 0.7;
-
-      &::before {
-        font-size: var(--font-size-13px);
-      }
-
-      &:hover {
-        opacity: 1;
-      }
-
-      &:first-of-type {
-        z-index: 2;
-      }
-    }
-
-    &__copy-button {
-      display: flex;
-      position: absolute;
-      z-index: 1;
-      top: 18px;
-      right: 0;
-      padding: var(--padding-1px) var(--padding-3px) var(--padding-6px)
-        var(--padding-3px);
-      color: var(--vscode-icon-foreground);
-      cursor: pointer;
-      opacity: 0.8;
-
-      &::before {
-        font-size: var(--font-size-13px);
-      }
-
-      &:hover:enabled {
-        opacity: 1;
-      }
-
-      &:disabled {
-        opacity: 0.35;
-        cursor: default;
-      }
-    }
-
     &--disabled {
       pointer-events: none;
       > * {
@@ -165,7 +113,8 @@
   display: flex;
   bottom: 0;
   right: 0;
-  padding: var(--padding-6px);
+  padding: var(--padding-6px) var(--padding-8px) var(--padding-6px)
+    var(--padding-6px);
   justify-content: space-between;
   overflow: hidden;
 
@@ -201,13 +150,27 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    gap: var(--padding-4px);
+    gap: var(--padding-8px);
     pointer-events: none;
 
-    &__count {
-      font-size: 0.9em;
-      color: var(--vscode-descriptionForeground);
-      margin-right: 3px;
+    &__edit-format {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-6px);
+
+      &__button {
+        font-size: var(--font-size-11px);
+        opacity: 0.5;
+        pointer-events: all;
+
+        &:hover {
+          opacity: 1;
+        }
+
+        &--selected {
+          opacity: 1;
+        }
+      }
     }
 
     &__button {
@@ -216,26 +179,22 @@
       justify-content: center;
       gap: 3px;
       height: 20px;
-      padding: 0 4px;
-      border-radius: 5px;
+      padding: 0 var(--padding-2px);
+      border-radius: var(--border-radius-5px);
       color: var(--vscode-foreground);
-      border: 1px solid var(--vscode-commandCenter-inactiveBorder);
-      font-size: 12px;
       pointer-events: all;
 
       > svg {
         width: 10px;
         fill: var(--vscode-icon-foreground);
       }
 
-      &:hover:enabled {
-        background-color: var(--vscode-toolbar-hoverBackground);
-        border-color: var(--vscode-commandCenter-activeBorder);
+      &.codicon::before {
+        font-size: 16px;
       }
 
-      &__ctrl {
-        color: var(--vscode-icon-foreground);
-        letter-spacing: -0.6px;
+      &:hover:enabled {
+        background-color: var(--vscode-toolbar-hoverBackground);
       }
 
       &:disabled {
@@ -246,14 +205,6 @@
           background-color: none;
         }
       }
-
-      &--secondary {
-        @media (max-width: 360px) {
-          > span {
-            display: none;
-          }
-        }
-      }
     }
   }
 }

packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss

@@ -1,4 +1,5 @@
-import { ChatInput } from './ChatInput'
+import { useState } from 'react'
+import { ChatInput, type EditFormat } from './ChatInput'
 
 export default {
   component: ChatInput
@@ -28,7 +29,6 @@ export const Empty = () => (
 export const WithText = () => (
   <ChatInput
     value="Hello, this is a sample message"
-    token_count={6}
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
     on_submit={() => console.log('Submitted')}
@@ -49,8 +49,7 @@ export const WithText = () => (
 
 export const LongText = () => (
   <ChatInput
-    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    token_count={100}
+    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
     on_submit={() => console.log('Submitted')}
@@ -110,3 +109,35 @@ export const WithPlaceholderSelection = () => (
     on_curly_braces_click={() => {}}
   />
 )
+
+export const WithEditFormatSelector = () => {
+  const [edit_format, set_edit_format] = useState<EditFormat>('diff')
+  return (
+    <ChatInput
+      value="Hello, this is a sample message"
+      chat_history={[]}
+      on_change={(value) => console.log('Changed:', value)}
+      on_submit={() => console.log('Submitted')}
+      on_copy={() => console.log('Copied')}
+      is_connected={true}
+      is_in_code_completions_mode={false}
+      has_active_selection={false}
+      has_active_editor={true}
+      on_caret_position_change={(pos) => console.log('Caret position:', pos)}
+      is_web_mode={false}
+      on_at_sign_click={() => console.log('@ clicked')}
+      on_hash_sign_click={() => console.log('# clicked')}
+      on_search_click={() => console.log('Search clicked')}
+      on_submit_with_control={() => {}}
+      on_curly_braces_click={() => {}}
+      show_edit_format_selector={true}
+      edit_format={edit_format}
+      on_edit_format_change={set_edit_format}
+      edit_format_instructions={{
+        whole: 'Use the whole...',
+        truncated: 'Use truncated...',
+        diff: 'Use diff...'
+      }}
+    />
+  )
+}