Display the selected preset or API configuration in the chat input submit button tooltip

Author: robertpiosik

packages/browser/src/manifest.json

@@ -4,7 +4,7 @@
   "name": "Code Web Chat Connector",
   "short_name": "CWC",
   "description": "Connect your editor with free chatbots. Include websites in context.",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "homepage_url": "https://github.com/robertpiosik/CodeWebChat",
   "icons": {
     "16": "icons/icon-16.png",

packages/ui/src/components/editor/ChatInput/ChatInput.tsx

@@ -32,6 +32,7 @@ export type ChatInputProps = {
   on_caret_position_set?: () => void
   focus_key?: number
   focus_and_select_key?: number
+  use_last_choice_button_title?: string
 }
 
 export const ChatInput: React.FC<ChatInputProps> = (props) => {
@@ -271,6 +272,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 <button
                   className={styles.footer__right__button}
                   onClick={handle_submit}
+                  title={props.use_last_choice_button_title}
                 >
                   <Icon variant="ENTER" />
                   <span>{component_dictionary.use_last_choice}</span>

packages/vscode/src/views/panel/frontend/main/MainView/MainView.tsx

@@ -19,6 +19,7 @@ import { IconButton } from '@ui/components/editor/IconButton/IconButton'
 import { Scrollable } from '@ui/components/editor/Scrollable'
 import { BrowserExtensionMessage as UiBrowserExtensionMessage } from '@ui/components/editor/BrowserExtensionMessage'
 import { ApiToolConfiguration } from '@/views/panel/types/messages'
+import { use_last_choice_button_title } from './hooks/use-last-choice-button-title'
 
 type Props = {
   initialize_chats: (params: {
@@ -217,6 +218,14 @@ export const MainView: React.FC<Props> = (props) => {
     }
   }
 
+  const last_choice_button_title = use_last_choice_button_title({
+    home_view_type: props.home_view_type,
+    selected_preset_or_group_name: props.selected_preset_or_group_name,
+    presets: props.presets,
+    selected_configuration_index: props.selected_configuration_index,
+    configurations: props.configurations
+  })
+
   return (
     <div ref={container_ref} className={styles.container}>
       <Scrollable>
@@ -297,6 +306,7 @@ export const MainView: React.FC<Props> = (props) => {
               on_caret_position_set={props.on_caret_position_set}
               focus_and_select_key={props.chat_input_focus_and_select_key}
               focus_key={props.chat_input_focus_key}
+              use_last_choice_button_title={last_choice_button_title}
             />
           </div>
 

packages/vscode/src/views/panel/frontend/main/MainView/hooks/use-last-choice-button-title.ts

@@ -0,0 +1,85 @@
+import { useMemo } from 'react'
+import {
+  HOME_VIEW_TYPES,
+  HomeViewType
+} from '@/views/panel/types/home-view-type'
+import { ApiToolConfiguration } from '@/views/panel/types/messages'
+import { CHATBOTS } from '@shared/constants/chatbots'
+import { Preset } from '@shared/types/preset'
+
+export const use_last_choice_button_title = (params: {
+  home_view_type: HomeViewType
+  selected_preset_or_group_name?: string
+  presets: Preset[]
+  selected_configuration_index?: number
+  configurations: ApiToolConfiguration[]
+}): string | undefined => {
+  return useMemo(() => {
+    if (params.home_view_type == HOME_VIEW_TYPES.WEB) {
+      if (params.selected_preset_or_group_name) {
+        if (params.selected_preset_or_group_name == 'Ungrouped') {
+          return 'Ungrouped'
+        } else {
+          const preset = params.presets.find(
+            (p) => p.name == params.selected_preset_or_group_name
+          )
+          if (preset) {
+            const is_unnamed =
+              !preset.name || /^\(\d+\)$/.test(preset.name.trim())
+            let display_name: string
+            if (preset.chatbot) {
+              display_name = is_unnamed ? preset.chatbot : preset.name
+            } else {
+              display_name = is_unnamed ? 'Unnamed group' : preset.name
+            }
+
+            const get_subtitle = (): string => {
+              const { chatbot, model } = preset
+              if (!chatbot) {
+                return model || ''
+              }
+              const model_display_name = model
+                ? (CHATBOTS[chatbot].models as any)[model]?.label || model
+                : null
+              if (is_unnamed) {
+                return model_display_name || ''
+              }
+              if (model_display_name) {
+                return `${chatbot} · ${model_display_name}`
+              }
+              return chatbot
+            }
+
+            const subtitle = get_subtitle()
+            if (subtitle) {
+              return `${display_name} (${subtitle})`
+            } else {
+              return display_name
+            }
+          }
+        }
+      }
+    } else {
+      // HOME_VIEW_TYPES.API
+      if (params.selected_configuration_index !== undefined) {
+        const configuration =
+          params.configurations[params.selected_configuration_index]
+        if (configuration) {
+          const description_parts = [configuration.provider_name]
+          if (configuration.reasoning_effort) {
+            description_parts.push(`${configuration.reasoning_effort}`)
+          }
+          const description = description_parts.join(' · ')
+          return `${configuration.model} (${description})`
+        }
+      }
+    }
+    return undefined
+  }, [
+    params.home_view_type,
+    params.selected_preset_or_group_name,
+    params.presets,
+    params.selected_configuration_index,
+    params.configurations
+  ])
+}