Implement the context size warning threshold setting in the settings view and refactor the Input component into a common UI component

Author: robertpiosik

…nts/editor/panel/Input/Input.module.scss …ts/editor/common/Input/Input.module.scsspackages/ui/src/components/editor/panel/Input/Input.module.scss renamed to packages/ui/src/components/editor/common/Input/Input.module.scss packages/ui/src/components/editor/panel/Input/Input.module.scss renamed to packages/ui/src/components/editor/common/Input/Input.module.scss

@@ -24,3 +24,15 @@ export const WithValue = () => {
     />
   )
 }
+export const WithMaxWidth = () => {
+  const [value, set_value] = useState('')
+
+  return (
+    <Input
+      value={value}
+      onChange={set_value}
+      placeholder="Max width is 200px"
+      max_width={200}
+    />
+  )
+}

…nts/editor/panel/Input/Input.stories.tsx …ts/editor/common/Input/Input.stories.tsxpackages/ui/src/components/editor/panel/Input/Input.stories.tsx renamed to packages/ui/src/components/editor/common/Input/Input.stories.tsx packages/ui/src/components/editor/panel/Input/Input.stories.tsx renamed to packages/ui/src/components/editor/common/Input/Input.stories.tsx

@@ -4,17 +4,23 @@ type Props = {
   type?: string
   value: string
   placeholder?: string
+  max_width?: number
   onChange: (value: string) => void
 }
 
 export const Input: React.FC<Props> = (props) => {
+  const style = props.max_width
+    ? { maxWidth: `${props.max_width}px` }
+    : undefined
+
   return (
     <input
       type={props.type || 'text'}
       value={props.value}
       onChange={(e) => props.onChange(e.target.value)}
       className={styles.input}
       placeholder={props.placeholder}
+      style={style}
     />
   )
 }

…/components/editor/panel/Input/Input.tsx …components/editor/common/Input/Input.tsxpackages/ui/src/components/editor/panel/Input/Input.tsx renamed to packages/ui/src/components/editor/common/Input/Input.tsx packages/ui/src/components/editor/panel/Input/Input.tsx renamed to packages/ui/src/components/editor/common/Input/Input.tsx

@@ -12,7 +12,7 @@
 }
 
 .bar {
-  width: 100%;
+  flex: 1;
   height: 3px;
   background-color: var(--vscode-dropdown-border);
   border-radius: var(--border-radius-999px);

…c/components/editor/panel/Input/index.ts …/components/editor/common/Input/index.tspackages/ui/src/components/editor/panel/Input/index.ts renamed to packages/ui/src/components/editor/common/Input/index.ts packages/ui/src/components/editor/panel/Input/index.ts renamed to packages/ui/src/components/editor/common/Input/index.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react'
 import styles from './ContextUtilisation.module.scss'
 import cn from 'classnames'
 
@@ -7,27 +6,16 @@ type Props = {
   context_size_warning_threshold: number
 }
 
-const format_number = (num: number): string => {
-  if (num < 1000) {
-    return num.toLocaleString()
-  }
-  return `${Math.floor(num / 1000)}k`
-}
-
-export const ContextUtilisation: FC<Props> = (props) => {
-  const { current_context_size, context_size_warning_threshold } = props
+export const ContextUtilisation: React.FC<Props> = (props) => {
   const is_above_threshold =
-    current_context_size > context_size_warning_threshold
+    props.current_context_size > props.context_size_warning_threshold
   const progress = Math.min(
-    (current_context_size / context_size_warning_threshold) * 100,
+    (props.current_context_size / props.context_size_warning_threshold) * 100,
     100
   )
 
   return (
     <div className={styles.container}>
-      <span className={styles.label}>
-        {format_number(current_context_size)}
-      </span>
       <div className={styles.bar}>
         <div
           className={cn(styles.bar__progress, {
@@ -36,8 +24,14 @@ export const ContextUtilisation: FC<Props> = (props) => {
           style={{ width: `${progress}%` }}
         />
       </div>
-      <span className={styles.label}>
-        {format_number(context_size_warning_threshold)}
+      <span
+        className={styles.label}
+        title="Selecting more than set threshold will show warning"
+      >
+        {props.current_context_size > 0
+          ? `~${props.current_context_size}`
+          : '0'}
+        /{props.context_size_warning_threshold} tokens in context
       </span>
     </div>
   )

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Field } from './Field'
-import { Input } from '../Input'
+import { Input } from '../../common/Input'
 import { Checkbox } from '../Checkbox'
 
 export default {

packages/ui/src/components/editor/panel/ContextUtilisation/ContextUtilisation.tsx

@@ -102,7 +102,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
   return (
     <div className={styles.container}>
       <div className={styles['my-presets']}>
-        <div className={styles['my-presets__left']}>{'MY CHAT PRESETS'}</div>
+        <div className={styles['my-presets__left']}>MY PRESETS</div>
         <IconButton codicon_icon="add" on_click={props.on_create_preset} />
       </div>
 

packages/ui/src/components/editor/panel/Field/Field.stories.tsx

@@ -694,7 +694,7 @@ export class ViewProvider implements vscode.WebviewViewProvider {
   private _send_context_size_warning_threshold() {
     if (!this._webview_view) return
     const config = vscode.workspace.getConfiguration('codeWebChat')
-    const threshold = config.get<number>('contextSizeWarningThreshold')!
+    const threshold = config.get<number>('contextSizeWarningThreshold', 60000)
     this.send_message({
       command: 'CONTEXT_SIZE_WARNING_THRESHOLD',
       threshold

packages/ui/src/components/editor/panel/Presets/Presets.tsx

@@ -0,0 +1,17 @@
+import * as vscode from 'vscode'
+import { SettingsProvider } from '@/views/settings/backend/settings-provider'
+
+export const handle_get_context_size_warning_threshold = async (
+  provider: SettingsProvider
+): Promise<void> => {
+  const config = vscode.workspace.getConfiguration('codeWebChat')
+  const threshold = config.get<number>('contextSizeWarningThreshold')
+  if (threshold === undefined) {
+    // Should not happen if default is set in package.json
+    return
+  }
+  provider.postMessage({
+    command: 'CONTEXT_SIZE_WARNING_THRESHOLD',
+    threshold
+  })
+}