Implement setup progress tracking to display a warning indicator on the settings button when configurations are missing, and refactor the button into a reusable component

Author: robertpiosik

apps/editor/src/views/i18n/translations.ts

@@ -12,12 +12,16 @@ export const translations = {
     'settings.sidebar.intelligent-update': 'Intelligent Update',
     'settings.sidebar.prune-context': 'Prune Context',
     'settings.sidebar.commit-messages': 'Commit Messages',
-    'settings.sidebar.voice-input': 'Voice Input'
+    'settings.sidebar.voice-input': 'Voice Input',
+    'settings.action.add-new': 'Add New...',
+    'settings.message.missing-configuration': 'Missing configuration.'
   },
   pl: {
     'panel.header.settings': 'Ustawienia',
     'panel.header.prompt-type': 'Typ promptu',
-    'settings.sidebar.settings': 'Ustawienia'
+    'settings.sidebar.settings': 'Ustawienia',
+    'settings.action.add-new': 'Dodaj nowy...',
+    'settings.message.missing-configuration': 'Brak konfiguracji.'
   },
   'zh-cn': {
     'panel.header.settings': '设置',

apps/editor/src/views/panel/backend/panel-provider.ts

@@ -118,6 +118,7 @@ import { dictionary } from '@shared/constants/dictionary'
 import { DEFAULT_CONTEXT_SIZE_WARNING_THRESHOLD } from '@/constants/values'
 import { upsert_configuration } from '../../utils/upsert-configuration'
 import { delete_configuration } from '../../utils/delete-configuration'
+import { ModelProvidersManager } from '@/services/model-providers-manager'
 
 export class PanelProvider implements vscode.WebviewViewProvider {
   private _webview_view: vscode.WebviewView | undefined
@@ -190,6 +191,40 @@ export class PanelProvider implements vscode.WebviewViewProvider {
     })
   }
 
+  public async send_setup_progress() {
+    const providers_manager = new ModelProvidersManager(this.context)
+    const [
+      providers,
+      edit_context,
+      intelligent_update,
+      prune_context,
+      code_at_cursor,
+      voice_input,
+      commit_messages
+    ] = await Promise.all([
+      providers_manager.get_providers(),
+      providers_manager.get_edit_context_tool_configs(),
+      providers_manager.get_intelligent_update_tool_configs(),
+      providers_manager.get_prune_context_tool_configs(),
+      providers_manager.get_code_completions_tool_configs(),
+      providers_manager.get_voice_input_tool_configs(),
+      providers_manager.get_commit_messages_tool_configs()
+    ])
+
+    this.send_message({
+      command: 'SETUP_PROGRESS',
+      setup_progress: {
+        has_model_provider: providers.length > 0,
+        has_configuration_for_edit_context: edit_context.length > 0,
+        has_configuration_for_intelligent_update: intelligent_update.length > 0,
+        has_configuration_for_prune_context: prune_context.length > 0,
+        has_configuration_for_code_at_cursor: code_at_cursor.length > 0,
+        has_configuration_for_voice_input: voice_input.length > 0,
+        has_configuration_for_commit_messages: commit_messages.length > 0
+      }
+    })
+  }
+
   public send_currently_open_file_text() {
     const active_editor = vscode.window.activeTextEditor
     this.send_message({
@@ -317,6 +352,22 @@ export class PanelProvider implements vscode.WebviewViewProvider {
           handle_get_api_tool_configurations(this)
         }
 
+        const setup_progress_keys = [
+          'codeWebChat.modelProviders',
+          'codeWebChat.configurationsForEditContext',
+          'codeWebChat.configurationsForCodeAtCursor',
+          'codeWebChat.configurationsForPruneContext',
+          'codeWebChat.configurationsForIntelligentUpdate',
+          'codeWebChat.configurationsForCommitMessages',
+          'codeWebChat.configurationsForVoiceInput'
+        ]
+
+        if (
+          setup_progress_keys.some((key) => event.affectsConfiguration(key))
+        ) {
+          this.send_setup_progress()
+        }
+
         if (event.affectsConfiguration('codeWebChat.isTimelineCollapsed')) {
           handle_get_collapsed_states(this)
         }
@@ -796,6 +847,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             await handle_paste_url(this, message)
           } else if (message.command == 'SET_RECORDING_STATE') {
             await handle_voice_input(this, message)
+          } else if (message.command == 'GET_SETUP_PROGRESS') {
+            await this.send_setup_progress()
           }
         } catch (error: any) {
           Logger.error({

apps/editor/src/views/panel/frontend/Home/Home.module.scss

@@ -33,33 +33,6 @@
     letter-spacing: 1px;
     padding-top: 1px;
   }
-
-  &__settings {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    cursor: pointer;
-    text-decoration: none;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    padding: 1px 0 1px 5px;
-
-    &:hover {
-      background-color: var(--vscode-toolbar-hoverBackground);
-    }
-
-    &__icon-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      --size: 20px;
-      width: var(--size);
-      height: var(--size);
-      color: var(--vscode-icon-foreground);
-    }
-  }
 }
 
 .content {

apps/editor/src/views/panel/frontend/Home/Home.tsx

@@ -5,7 +5,11 @@ import { Timeline } from '@ui/components/editor/panel/Timeline'
 import { ModeButton } from '@ui/components/editor/panel/ModeButton'
 import cn from 'classnames'
 import { post_message } from '../utils/post_message'
-import { Checkpoint, FrontendMessage } from '@/views/panel/types/messages'
+import {
+  Checkpoint,
+  FrontendMessage,
+  SetupProgress
+} from '@/views/panel/types/messages'
 import { Responses as UiResponses } from '@ui/components/editor/panel/Responses'
 import { ResponseHistoryItem } from '@shared/types/response-history-item'
 import { Separator } from '@ui/components/editor/panel/Separator'
@@ -16,6 +20,7 @@ import { Tasks } from '@ui/components/editor/panel/Tasks'
 import { Task } from '@shared/types/task'
 import { use_tasks } from './hooks/use-tasks'
 import { use_timeline_scroll } from './hooks/use-timeline-scroll'
+import { SettingsButton } from '@ui/components/editor/panel/SettingsButton'
 
 type Props = {
   vscode: any
@@ -42,6 +47,7 @@ type Props = {
   on_tasks_change: (root: string, tasks: Task[]) => void
   on_task_delete: (root: string, timestamp: number) => void
   on_task_forward: (text: string) => void
+  setup_progress?: SetupProgress
 }
 
 export const Home: React.FC<Props> = (props) => {
@@ -92,6 +98,10 @@ export const Home: React.FC<Props> = (props) => {
     } as FrontendMessage)
   }
 
+  const has_incomplete_setup = props.setup_progress
+    ? Object.values(props.setup_progress).some((v) => !v)
+    : false
+
   return (
     <>
       <div className={styles.header}>
@@ -101,16 +111,11 @@ export const Home: React.FC<Props> = (props) => {
           </div>
           <span className={styles['header__text']}>Home</span>
         </div>
-        <button
-          className={styles['header__settings']}
-          onClick={handle_settings_click}
-          title={t('panel.header.settings')}
-        >
-          <span>{t('panel.header.settings')}</span>
-          <span className={styles['header__settings__icon-wrapper']}>
-            <span className={cn('codicon', 'codicon-settings-gear')} />
-          </span>
-        </button>
+        <SettingsButton
+          on_click={handle_settings_click}
+          label={t('panel.header.settings')}
+          show_warning_icon={has_incomplete_setup}
+        />
       </div>
 
       <Scrollable

apps/editor/src/views/panel/frontend/Main/Main.tsx

@@ -9,7 +9,8 @@ import {
   ApiToolConfigurationsMessage,
   PresetsMessage,
   FrontendMessage,
-  SelectionState
+  SelectionState,
+  SetupProgress
 } from '@/views/panel/types/messages'
 import { ApiToolConfiguration } from '@/views/panel/types/messages'
 import { post_message } from '../utils/post_message'
@@ -72,6 +73,7 @@ type Props = {
   is_recording: boolean
   on_recording_started: () => void
   on_recording_finished: () => void
+  setup_progress?: SetupProgress
 }
 
 export const Main: React.FC<Props> = (props) => {
@@ -855,6 +857,7 @@ export const Main: React.FC<Props> = (props) => {
       is_recording={props.is_recording}
       on_recording_started={props.on_recording_started}
       on_recording_finished={props.on_recording_finished}
+      setup_progress={props.setup_progress}
     />
   )
 }

apps/editor/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -16,7 +16,7 @@ import { use_last_choice_button_title } from './hooks/use-last-choice-button-tit
 import { ContextUtilisation as UiContextUtilisation } from '@ui/components/editor/panel/ContextUtilisation'
 import { Header } from './components/Header'
 import { use_invocation_counts } from './hooks/use-invocation-counts'
-import { SelectionState } from '@/views/panel/types/messages'
+import { SelectionState, SetupProgress } from '@/views/panel/types/messages'
 
 type Props = {
   scroll_reset_key: number
@@ -113,6 +113,7 @@ type Props = {
   is_recording: boolean
   on_recording_started: () => void
   on_recording_finished: () => void
+  setup_progress?: SetupProgress
 }
 
 export const MainView: React.FC<Props> = (props) => {
@@ -193,6 +194,7 @@ export const MainView: React.FC<Props> = (props) => {
         on_api_prompt_type_change={props.on_api_prompt_type_change}
         on_quick_action_click={props.on_quick_action_click}
         are_keyboard_shortcuts_disabled={props.are_keyboard_shortcuts_disabled}
+        setup_progress={props.setup_progress}
       />
       <Scrollable scroll_to_top_key={props.scroll_reset_key}>
         <UiSeparator height={4} />

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.module.scss

@@ -51,26 +51,5 @@
       width: 100%;
       height: 24px;
     }
-
-    &__settings {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      --size: 20px;
-      width: var(--size);
-      height: var(--size);
-      color: var(--vscode-icon-foreground);
-      cursor: pointer;
-      text-decoration: none;
-      background: none;
-      border: none;
-      padding: 0;
-      border-radius: 5px;
-
-      &:hover {
-        background-color: var(--vscode-toolbar-hoverBackground);
-      }
-    }
   }
 }

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -1,5 +1,4 @@
 import { useRef, useCallback } from 'react'
-import cn from 'classnames'
 import { MODE, Mode } from '@/views/panel/types/main-view-mode'
 import { use_is_narrow_viewport, use_is_mac } from '@shared/hooks'
 import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
@@ -10,8 +9,10 @@ import {
   api_prompt_type_labels,
   web_prompt_type_labels
 } from '../../prompt-type-labels'
+import { SettingsButton as UiSettingsButton } from '@ui/components/editor/panel/SettingsButton'
 import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
 import { use_translation } from '@/views/i18n/use-translation'
+import { SetupProgress } from '@/views/panel/types/messages'
 
 type Props = {
   mode: Mode
@@ -23,6 +24,7 @@ type Props = {
   on_api_prompt_type_change: (prompt_type: ApiPromptType) => void
   on_quick_action_click: (command: string) => void
   are_keyboard_shortcuts_disabled: boolean
+  setup_progress?: SetupProgress
 }
 
 export const Header: React.FC<Props> = (props) => {
@@ -50,6 +52,10 @@ export const Header: React.FC<Props> = (props) => {
     is_disabled: props.are_keyboard_shortcuts_disabled
   })
 
+  const has_incomplete_setup = props.setup_progress
+    ? Object.values(props.setup_progress).some((v) => !v)
+    : false
+
   return (
     <div className={styles.header} ref={header_ref}>
       <div className={styles.header__left} ref={header_left_ref}>
@@ -118,13 +124,11 @@ export const Header: React.FC<Props> = (props) => {
           )}
         </div>
 
-        <button
-          className={styles['header__right__settings']}
-          onClick={() => props.on_quick_action_click('codeWebChat.settings')}
+        <UiSettingsButton
+          on_click={() => props.on_quick_action_click('codeWebChat.settings')}
           title="Settings"
-        >
-          <span className={cn('codicon', 'codicon-settings-gear')} />
-        </button>
+          show_warning_icon={has_incomplete_setup}
+        />
       </div>
     </div>
   )

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -107,7 +107,8 @@ export const Panel = () => {
     handle_open_document,
     handle_paste_url,
     is_recording,
-    handle_set_recording_state
+    handle_set_recording_state,
+    setup_progress
   } = use_panel(vscode)
 
   const [checkpoint_to_edit, set_checkpoint_to_edit] = useState<
@@ -319,6 +320,7 @@ export const Panel = () => {
                 is_recording={is_recording}
                 on_recording_started={() => handle_set_recording_state(true)}
                 on_recording_finished={() => handle_set_recording_state(false)}
+                setup_progress={setup_progress}
               />
             </div>
             <div
@@ -396,6 +398,7 @@ export const Panel = () => {
                 on_tasks_change={handle_tasks_change}
                 on_task_delete={handle_task_delete}
                 on_task_forward={handle_task_forward}
+                setup_progress={setup_progress}
               />
             </div>
           </Layout>

apps/editor/src/views/panel/frontend/hooks/use-panel.ts

@@ -3,7 +3,8 @@ import { Preset } from '@shared/types/preset'
 import {
   BackendMessage,
   FrontendMessage,
-  SelectionState
+  SelectionState,
+  SetupProgress
 } from '../../types/messages'
 import { Checkpoint } from '../../types/messages'
 import { Mode, MODE } from '../../types/main-view-mode'
@@ -115,6 +116,7 @@ export const use_panel = (vscode: any) => {
   ] = useState<string>('')
   const [fix_all_automatically, set_fix_all_automatically] = useState(false)
   const [is_recording, set_is_recording] = useState(false)
+  const [setup_progress, set_setup_progress] = useState<SetupProgress>()
 
   const handle_instructions_change = (
     value: string,
@@ -393,6 +395,8 @@ export const use_panel = (vscode: any) => {
         set_prune_context_instructions_prefix(message.prefix)
       } else if (message.command == 'RECORDING_STATE') {
         set_is_recording(message.is_recording)
+      } else if (message.command == 'SETUP_PROGRESS') {
+        set_setup_progress(message.setup_progress)
       }
     }
     window.addEventListener('message', handle_message)
@@ -415,7 +419,8 @@ export const use_panel = (vscode: any) => {
       { command: 'REQUEST_CURRENTLY_OPEN_FILE_TEXT' },
       { command: 'REQUEST_CAN_UNDO' },
       { command: 'GET_TASKS' },
-      { command: 'GET_PRUNE_CONTEXT_INSTRUCTIONS_PREFIX' }
+      { command: 'GET_PRUNE_CONTEXT_INSTRUCTIONS_PREFIX' },
+      { command: 'GET_SETUP_PROGRESS' }
     ]
     initial_messages.forEach((message) => post_message(vscode, message))
 
@@ -629,6 +634,7 @@ export const use_panel = (vscode: any) => {
     handle_open_document,
     handle_paste_url,
     is_recording,
-    handle_set_recording_state
+    handle_set_recording_state,
+    setup_progress
   }
 }