Implement selected preset count display for all groups in the Presets UI and quick pick menus

Author: robertpiosik

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

@@ -96,6 +96,21 @@ export const Presets: React.FC<Presets.Props> = (props) => {
     is_group: boolean
   }>()
 
+  const ungrouped_selected_count = (() => {
+    let count = 0
+    if (props.presets[0]?.chatbot !== undefined) {
+      for (const p of props.presets) {
+        if (!p.chatbot) {
+          break
+        }
+        if (p.is_selected) {
+          count++
+        }
+      }
+    }
+    return count
+  })()
+
   const pinned_presets = props.presets.filter((p) => p.is_pinned && p.chatbot)
 
   const get_visible_presets = (presets: Presets.Preset[]): Presets.Preset[] => {
@@ -493,7 +508,11 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                           />
                         </div>
                         <div className={styles.presets__item__left__text}>
-                          Ungrouped
+                          <span>Ungrouped</span>
+                          <span>
+                            {ungrouped_selected_count > 0 &&
+                              `${ungrouped_selected_count} selected`}
+                          </span>
                         </div>
                       </div>
                       <div
@@ -602,6 +621,29 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                   const { chatbot, model } = preset
 
                   if (!chatbot) {
+                    const group_index = props.presets.findIndex(
+                      (p) => p.name === preset.name
+                    )
+
+                    if (group_index !== -1) {
+                      let selected_count = 0
+                      for (
+                        let i = group_index + 1;
+                        i < props.presets.length;
+                        i++
+                      ) {
+                        const child_preset = props.presets[i]
+                        if (!child_preset.chatbot) {
+                          break
+                        }
+                        if (child_preset.is_selected) {
+                          selected_count++
+                        }
+                      }
+                      if (selected_count > 0) {
+                        return `${selected_count} selected`
+                      }
+                    }
                     return model || ''
                   }
 

packages/vscode/src/views/panel/backend/message-handlers/handle-send-prompt.ts

@@ -320,9 +320,7 @@ async function show_preset_quick_pick(params: {
       items.push({
         label: 'Ungrouped',
         group_name: 'Ungrouped',
-        description: `${selected_count} selected preset${
-          selected_count !== 1 ? 's' : ''
-        }`
+        description: `${selected_count} selected`
       })
     }
   }
@@ -344,9 +342,7 @@ async function show_preset_quick_pick(params: {
           ? 'Group'
           : preset.name.replace(/ \(\d+\)$/, ''),
         group_name: preset.name,
-        description: `${selected_presets_count} selected preset${
-          selected_presets_count != 1 ? 's' : ''
-        }`
+        description: `${selected_presets_count} selected`
       })
     } else {
       // Preset

packages/vscode/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -92,7 +92,7 @@ export const Header: React.FC<Props> = (props) => {
               selected_value={props.web_mode}
               on_change={props.on_web_mode_change}
               max_width={dropdown_max_width}
-              info="mode"
+              info="prompt"
             />
           )}
           {props.home_view_type == HOME_VIEW_TYPES.API && (
@@ -103,7 +103,7 @@ export const Header: React.FC<Props> = (props) => {
               selected_value={props.api_mode}
               on_change={props.on_api_mode_change}
               max_width={dropdown_max_width}
-              info="mode"
+              info="prompt"
             />
           )}
         </div>