Enable drag-and-drop reordering for API tool configurations in the UI and implement corresponding backend message handling and persistence

Author: robertpiosik

packages/ui/src/components/editor/Configurations/Configurations.module.scss

@@ -47,15 +47,40 @@
     }
 
     &__left {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-5px);
       overflow: hidden;
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
+      height: 100%;
+
+      &__drag_handle {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        cursor: grab;
+        opacity: 0.5;
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        &--disabled {
+          opacity: 0.3;
+          cursor: auto;
+        }
+      }
 
-      > span:last-child {
-        margin-left: 0.5em;
-        opacity: 0.7;
-        font-size: 0.9em;
+      &__text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        > span:last-child {
+          margin-left: 0.5em;
+          opacity: 0.7;
+          font-size: 0.9em;
+        }
       }
     }
   }

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

@@ -2,9 +2,11 @@ import styles from './Configurations.module.scss'
 import { DEFAULT_TEMPERATURE } from '@shared/constants/api-tools'
 import cn from 'classnames'
 import { dictionary } from '@shared/constants/dictionary'
+import { ReactSortable } from 'react-sortablejs'
 
 export namespace Configurations {
   export type Configuration = {
+    id: string
     model: string
     provider: string
     temperature?: number
@@ -16,6 +18,7 @@ export namespace Configurations {
     api_mode: 'edit-context' | 'code-completions'
     configurations: Configuration[]
     on_configuration_click: (i: number) => void
+    on_reorder?: (configurations: Configuration[]) => void
     selected_configuration_index?: number
   }
 }
@@ -30,42 +33,69 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
       </div>
 
       <div className={styles.configurations}>
-        {props.configurations.map((configuration, i) => {
-          const description_parts = [configuration.provider]
-          if (configuration.reasoning_effort) {
-            description_parts.push(`${configuration.reasoning_effort}`)
-          }
-          if (
-            configuration.temperature &&
-            configuration.temperature != DEFAULT_TEMPERATURE[props.api_mode]
-          ) {
-            description_parts.push(`${configuration.temperature}`)
-          }
-          if (configuration.cache_enabled) {
-            description_parts.push('cache-enabled')
-          }
+        <ReactSortable
+          list={props.configurations}
+          setList={(new_state) => {
+            if (props.on_reorder) {
+              props.on_reorder(new_state)
+            }
+          }}
+          animation={150}
+          handle={`.${styles.configurations__item__left__drag_handle}`}
+          disabled={!props.on_reorder}
+        >
+          {props.configurations.map((configuration, i) => {
+            const description_parts = [configuration.provider]
+            if (configuration.reasoning_effort) {
+              description_parts.push(`${configuration.reasoning_effort}`)
+            }
+            if (
+              configuration.temperature &&
+              configuration.temperature != DEFAULT_TEMPERATURE[props.api_mode]
+            ) {
+              description_parts.push(`${configuration.temperature}`)
+            }
+            if (configuration.cache_enabled) {
+              description_parts.push('cache-enabled')
+            }
 
-          const description = description_parts.join(' · ')
+            const description = description_parts.join(' · ')
 
-          return (
-            <div
-              key={i}
-              className={cn(styles.configurations__item, {
-                [styles['configurations__item--highlighted']]:
-                  props.selected_configuration_index == i
-              })}
-              onClick={() => {
-                props.on_configuration_click(i)
-              }}
-              role="button"
-            >
-              <div className={styles.configurations__item__left}>
-                <span>{configuration.model}</span>
-                <span>{description}</span>
+            return (
+              <div
+                key={configuration.id}
+                className={cn(styles.configurations__item, {
+                  [styles['configurations__item--highlighted']]:
+                    props.selected_configuration_index == i
+                })}
+                onClick={() => {
+                  props.on_configuration_click(i)
+                }}
+                role="button"
+              >
+                <div className={styles.configurations__item__left}>
+                  <div
+                    className={cn(
+                      styles.configurations__item__left__drag_handle,
+                      {
+                        [styles[
+                          'configurations__item__left__drag_handle--disabled'
+                        ]]: !props.on_reorder
+                      }
+                    )}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <span className="codicon codicon-gripper" />
+                  </div>
+                  <div className={styles.configurations__item__left__text}>
+                    <span>{configuration.model}</span>
+                    <span>{description}</span>
+                  </div>
+                </div>
               </div>
-            </div>
-          )
-        })}
+            )
+          })}
+        </ReactSortable>
       </div>
     </div>
   )

packages/vscode/src/views/panel/backend/message-handlers/handle-get-api-tool-configurations.ts

@@ -38,9 +38,17 @@ export const handle_get_api_tool_configurations = async (
   }
 
   const configurations: { [T in ApiMode]?: ApiToolConfiguration[] } = {
-    'edit-context': edit_context_configs,
+    'edit-context': edit_context_configs.map((config) => ({
+      ...config,
+      id: `${config.provider_name}:${config.model}:${config.temperature}:${
+        config.reasoning_effort ?? ''
+      }:${config.instructions_placement ?? ''}`
+    })),
     'code-completions': code_completions_configs.map((config) => ({
       ...config,
+      id: `${config.provider_name}:${config.model}:${config.temperature}:${
+        config.reasoning_effort ?? ''
+      }`,
       is_default: is_config_default(config, default_code_completions_config)
     }))
   }

packages/vscode/src/views/panel/backend/message-handlers/handle-reorder-api-tool-configurations.ts

@@ -0,0 +1,66 @@
+import { ViewProvider } from '@/views/panel/backend/view-provider'
+import { ReorderApiToolConfigurationsMessage } from '@/views/panel/types/messages'
+import {
+  ModelProvidersManager,
+  ToolConfig
+} from '@/services/model-providers-manager'
+
+const generate_edit_context_id = (config: ToolConfig) =>
+  `${config.provider_name}:${config.model}:${config.temperature}:${
+    config.reasoning_effort ?? ''
+  }:${config.instructions_placement ?? ''}`
+
+const generate_code_completions_id = (config: ToolConfig) =>
+  `${config.provider_name}:${config.model}:${config.temperature}:${
+    config.reasoning_effort ?? ''
+  }`
+
+export const handle_reorder_api_tool_configurations = async (
+  provider: ViewProvider,
+  message: ReorderApiToolConfigurationsMessage
+): Promise<void> => {
+  const providers_manager = new ModelProvidersManager(provider.context)
+  const reordered_ids = message.configurations.map((p) => p.id)
+
+  if (message.mode === 'edit-context') {
+    const current_configs =
+      await providers_manager.get_edit_context_tool_configs()
+    const reordered_configs = reordered_ids
+      .map((id) => {
+        const found = current_configs.find(
+          (p) => generate_edit_context_id(p) === id
+        )
+        if (!found) {
+          console.error(`Config with id ${id} not found during reorder.`)
+          return null
+        }
+        return found
+      })
+      .filter((p): p is ToolConfig => p !== null)
+
+    if (reordered_configs.length === current_configs.length) {
+      await providers_manager.save_edit_context_tool_configs(reordered_configs)
+    }
+  } else if (message.mode === 'code-completions') {
+    const current_configs =
+      await providers_manager.get_code_completions_tool_configs()
+    const reordered_configs = reordered_ids
+      .map((id) => {
+        const found = current_configs.find(
+          (p) => generate_code_completions_id(p) === id
+        )
+        if (!found) {
+          console.error(`Config with id ${id} not found during reorder.`)
+          return null
+        }
+        return found
+      })
+      .filter((p): p is ToolConfig => p !== null)
+
+    if (reordered_configs.length === current_configs.length) {
+      await providers_manager.save_code_completions_tool_configs(
+        reordered_configs
+      )
+    }
+  }
+}

packages/vscode/src/views/panel/backend/message-handlers/index.ts

@@ -31,6 +31,7 @@ export * from './handle-save-mode-api'
 export * from './handle-get-version'
 export * from './handle-at-sign-quick-pick-for-preset-affix'
 export * from './handle-get-api-tool-configurations'
+export * from './handle-reorder-api-tool-configurations'
 export * from './handle-get-donations-visibility'
 export * from './handle-save-donations-visibility'
 export * from './handle-focus-on-file-in-review'

packages/vscode/src/views/panel/backend/view-provider.ts

@@ -40,6 +40,7 @@ import {
   handle_show_prompt_template_quick_pick,
   handle_at_sign_quick_pick_for_preset_affix,
   handle_get_api_tool_configurations,
+  handle_reorder_api_tool_configurations,
   handle_pick_open_router_model,
   handle_pick_chatbot,
   handle_get_donations_visibility,
@@ -411,6 +412,8 @@ export class ViewProvider implements vscode.WebviewViewProvider {
             }
           } else if (message.command == 'GET_API_TOOL_CONFIGURATIONS') {
             await handle_get_api_tool_configurations(this)
+          } else if (message.command == 'REORDER_API_TOOL_CONFIGURATIONS') {
+            await handle_reorder_api_tool_configurations(this, message)
           } else if (message.command == 'SAVE_WEB_MODE') {
             await handle_save_mode_web(this, message.mode)
           } else if (message.command == 'GET_API_MODE') {

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

@@ -15,6 +15,7 @@ import {
 } from '@/views/panel/types/messages'
 import { ApiToolConfiguration } from '@/views/panel/types/messages'
 import { post_message } from '../utils/post_message'
+import { Configurations as UiConfigurations } from '@ui/components/editor/Configurations'
 
 type Props = {
   vscode: any
@@ -337,6 +338,36 @@ export const Main: React.FC<Props> = (props) => {
     })
   }
 
+  const handle_configurations_reorder = (
+    reordered_configs: (UiConfigurations.Configuration & { id: string })[]
+  ) => {
+    if (all_configurations && props.api_mode) {
+      const current_api_configs = all_configurations[props.api_mode]
+      if (!current_api_configs) return
+
+      const reordered_api_tool_configs = reordered_configs
+        .map((ui_config) => {
+          return current_api_configs.find((c) => c.id === ui_config.id)!
+        })
+        .filter(Boolean)
+
+      if (reordered_api_tool_configs.length !== current_api_configs.length) {
+        return
+      }
+
+      set_all_configurations({
+        ...all_configurations,
+        [props.api_mode]: reordered_api_tool_configs
+      })
+
+      post_message(props.vscode, {
+        command: 'REORDER_API_TOOL_CONFIGURATIONS',
+        mode: props.api_mode,
+        configurations: reordered_api_tool_configs
+      })
+    }
+  }
+
   const handle_create_preset = () => {
     post_message(props.vscode, {
       command: 'CREATE_PRESET'
@@ -554,6 +585,7 @@ export const Main: React.FC<Props> = (props) => {
       copy_to_clipboard={handle_copy_to_clipboard}
       configurations={configurations_for_current_mode || []}
       on_configuration_click={handle_configuration_click}
+      on_configurations_reorder={handle_configurations_reorder}
       on_search_click={handle_search_click}
       on_at_sign_click={handle_at_sign_click}
       on_curly_braces_click={handle_curly_braces_click}

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

@@ -39,6 +39,9 @@ type Props = {
   presets: Preset[]
   configurations: ApiToolConfiguration[]
   on_configuration_click: (index: number) => void
+  on_configurations_reorder: (
+    reordered_configurations: UiConfigurations.Configuration[]
+  ) => void
   has_active_editor: boolean
   has_active_selection: boolean
   has_changes_to_commit: boolean
@@ -406,12 +409,12 @@ export const MainView: React.FC<Props> = (props) => {
               <UiConfigurations
                 api_mode={props.api_mode}
                 configurations={props.configurations.map((c) => ({
-                  model: c.model,
+                  ...c,
                   provider: c.provider_name,
-                  reasoning_effort: c.reasoning_effort,
                   cache_enabled: c.instructions_placement == 'below-only'
                 }))}
                 on_configuration_click={props.on_configuration_click}
+                on_reorder={props.on_configurations_reorder}
                 selected_configuration_index={
                   props.selected_configuration_index
                 }

packages/vscode/src/views/panel/types/messages.ts

@@ -10,11 +10,14 @@ export interface BaseMessage {
 }
 
 export type ApiToolConfiguration = {
+  id: string
   provider_type: string
   provider_name: string
   model: string
+  temperature: number
   reasoning_effort?: string
   instructions_placement?: InstructionsPlacement
+  is_default?: boolean
 }
 
 // === FROM FRONTEND TO BACKEND ===
@@ -197,6 +200,12 @@ export interface GetApiToolConfigurationsMessage extends BaseMessage {
   command: 'GET_API_TOOL_CONFIGURATIONS'
 }
 
+export interface ReorderApiToolConfigurationsMessage extends BaseMessage {
+  command: 'REORDER_API_TOOL_CONFIGURATIONS'
+  mode: ApiMode
+  configurations: ApiToolConfiguration[]
+}
+
 export interface GetVersionMessage extends BaseMessage {
   command: 'GET_VERSION'
 }
@@ -296,6 +305,7 @@ export type FrontendMessage =
   | GetApiModeMessage
   | SaveApiModeMessage
   | GetApiToolConfigurationsMessage
+  | ReorderApiToolConfigurationsMessage
   | SaveDonationsVisibilityMessage
   | GetVersionMessage
   | CheckClipboardForApplyMessage