Refactor ApiToolHeader to ApiTool component and migrate commit message setting key

robertpiosik · robertpiosik · commit 0548ee47ba4f · 2025-05-22T18:51:07.000+02:00
diff --git a/README.md b/README.md
@@ -11,12 +11,10 @@
   <br/>
   👉 Generate meaningful commit messages
   </h4>
-
-<a href="https://marketplace.visualstudio.com/items?itemName=robertpiosik.gemini-coder"><img src="https://img.shields.io/badge/Download-VS_Code_Marketplace-blue" alt="Download from Visual Studio Code Marketplace"></a>
-<a href="https://x.com/CodeWebChat"><img src="https://img.shields.io/badge/Follow-@CodeWebChat-black?logo=x" alt="X"></a>
-<a href="https://www.reddit.com/r/CodeWebChat"><img src="https://img.shields.io/badge/Join_subreddit-r%2FCodeWebChat-orange?logo=reddit&logoColor=white" alt="Join subreddit r/CodeWebChat on Reddit"></a>
-<br/>
-
+  <a href="https://marketplace.visualstudio.com/items?itemName=robertpiosik.gemini-coder"><img src="https://img.shields.io/badge/Download-VS_Code_Marketplace-blue" alt="Download from Visual Studio Code Marketplace"></a>
+  <a href="https://x.com/CodeWebChat"><img src="https://img.shields.io/badge/Follow-@CodeWebChat-black?logo=x" alt="X"></a>
+  <a href="https://www.reddit.com/r/CodeWebChat"><img src="https://img.shields.io/badge/Join_subreddit-r%2FCodeWebChat-orange?logo=reddit&logoColor=white" alt="Join subreddit r/CodeWebChat on Reddit"></a>
+  <br/>
 </div>
 
 <a href="https://codeweb.chat/">Documentation</a>
diff --git a/packages/ui/src/components/editor/ApiTool/ApiTool.module.scss b/packages/ui/src/components/editor/ApiTool/ApiTool.module.scss
@@ -1,7 +1,14 @@
-.header {
+.container {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  gap: var(--padding-6px);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-2px);
 
   &__top {
     display: flex;
@@ -32,13 +39,37 @@
   &__bottom {
     font-size: 16px;
     font-weight: bold;
-    padding: 2px 0 6px 0;
     text-align: center;
     color: var(--vscode-editor-foreground);
   }
+}
 
-  &__description {
-    font-size: 12px;
-    color: var(--vscode-editor-foreground);
+.description {
+  font-size: var(--font-size-12px);
+  color: var(--vscode-editor-foreground);
+
+  &__toggle {
+    color: var(--vscode-textLink-foreground);
+    padding-left: 4px;
+    font-size: var(--font-size-12px);
+
+    &:hover {
+      color: var(--vscode-textLink-activeForeground);
+    }
+  }
+}
+
+.checkmarks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-2px);
+
+  &__item {
+    display: flex;
+    gap: var(--padding-5px);
+
+    > span {
+      font-size: var(--font-size-12px) !important;
+    }
   }
 }
diff --git a/packages/ui/src/components/editor/ApiTool/ApiTool.stories.tsx b/packages/ui/src/components/editor/ApiTool/ApiTool.stories.tsx
@@ -0,0 +1,31 @@
+import { ApiTool } from './ApiTool'
+
+export default {
+  component: ApiTool
+}
+
+export const Default = () => (
+  <ApiTool
+    top_line="API TOOL"
+    bottom_line="Code Completions"
+    description="Use any model for accurate code completions. The tool attaches selected context in each request."
+    checkmarks={[
+      'Uses selected context',
+      'Supports any model',
+      'Accurate completions'
+    ]}
+  />
+)
+
+export const LongDescription = () => (
+  <ApiTool
+    top_line="API TOOL"
+    bottom_line="Advanced Code Analysis"
+    description="This is a very long description that exceeds 100 characters and should be truncated with a Read more/Read less toggle functionality to improve the user experience and prevent overwhelming the interface with too much text at once."
+    checkmarks={[
+      'Advanced analysis capabilities',
+      'Multi-language support',
+      'Real-time feedback'
+    ]}
+  />
+)
diff --git a/packages/ui/src/components/editor/ApiTool/ApiTool.tsx b/packages/ui/src/components/editor/ApiTool/ApiTool.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import styles from './ApiTool.module.scss'
+
+type Props = {
+  top_line: string
+  bottom_line: string
+  description: string
+  checkmarks?: string[]
+}
+
+const MAX_INIT_LENGTH = 120
+
+export const ApiTool: React.FC<Props> = (props) => {
+  const [is_expanded, set_is_expanded] = useState(false)
+  const should_truncate = props.description.length > MAX_INIT_LENGTH
+
+  const displayDescription =
+    should_truncate && !is_expanded
+      ? `${props.description.slice(0, MAX_INIT_LENGTH)}...`
+      : props.description
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.header__top}>
+          <span>{props.top_line}</span>
+        </div>
+        <div className={styles.header__bottom}>{props.bottom_line}</div>
+      </div>
+
+      <div className={styles.description}>
+        {displayDescription}
+        {should_truncate && (
+          <button
+            className={styles.description__toggle}
+            onClick={() => set_is_expanded(!is_expanded)}
+          >
+            {is_expanded ? 'Read less' : 'Read more'}
+          </button>
+        )}
+      </div>
+
+      {props.checkmarks && (
+        <div className={styles.checkmarks}>
+          {props.checkmarks.map((checkmark, index) => (
+            <div key={index} className={styles.checkmarks__item}>
+              <span className="codicon codicon-check" />
+              <span>{checkmark}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/editor/ApiTool/index.ts b/packages/ui/src/components/editor/ApiTool/index.ts
@@ -0,0 +1 @@
+export * from './ApiTool'
diff --git a/packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.stories.tsx b/packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.stories.tsx
diff --git a/packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.tsx b/packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.tsx
diff --git a/packages/ui/src/components/editor/ApiToolHeader/index.ts b/packages/ui/src/components/editor/ApiToolHeader/index.ts
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -608,10 +608,10 @@
       "type": "object",
       "title": "Code Web Chat Settings",
       "properties": {
-        "codeWebChat.commitMessagePrompt": {
+        "codeWebChat.commitMessageInstructions": {
           "type": "string",
           "scope": "resource",
-          "description": "The prompt text used when generating commit messages.",
+          "description": "The instructions used when generating a commit message.",
           "default": "Write a brief and precise summary for the following diff, limited to a single sentence if possible and nothing else. Use an imperative tone to ensure clarity and focus on the primary change or purpose."
         },
         "codeWebChat.ignoredExtensions": {
diff --git a/packages/vscode/src/commands/generate-commit-message-command.ts b/packages/vscode/src/commands/generate-commit-message-command.ts
@@ -61,7 +61,7 @@ export function generate_commit_message_command(
         }
 
         const config = vscode.workspace.getConfiguration('codeWebChat')
-        const commit_message_prompt = config.get<string>('commitMessagePrompt')
+        const commit_message_prompt = config.get<string>('commitMessageInstructions')
         const config_ignored_extensions = new Set(
           config
             .get<string[]>('ignoredExtensions', [])
diff --git a/packages/vscode/src/extension.ts b/packages/vscode/src/extension.ts
@@ -37,6 +37,7 @@ import { migrate_keybindings } from './migrations/migrate-keybindings'
 import { migrate_api_keys_to_providers } from './migrations/migrate-api-keys-to-providers'
 import { migrate_api_tool_configs } from './migrations/migrate-api-tool-configs'
 import { migrate_api_providers_to_secret_storage } from './migrations/migrate-api-providers-to-secret-storage'
+import { migrate_commit_message_prompt_to_instructions } from './migrations/migrate-commit-message-prompt-to-instructions'
 
 // Store WebSocketServer instance at module level
 let websocket_server_instance: WebSocketManager | null = null
@@ -67,6 +68,8 @@ export async function activate(context: vscode.ExtensionContext) {
     await migrate_api_providers_to_secret_storage(context)
     // Remove a few weeks after 22 May 2025
     await migrate_file_refactoring_to_array(context)
+    // Remove a few weeks after 25 May 2025
+    await migrate_commit_message_prompt_to_instructions(context)
   }
 
   await migrations()
diff --git a/packages/vscode/src/migrations/migrate-commit-message-prompt-to-instructions.ts b/packages/vscode/src/migrations/migrate-commit-message-prompt-to-instructions.ts
@@ -0,0 +1,60 @@
+import * as vscode from 'vscode'
+import { Logger } from '../helpers/logger'
+
+const MIGRATION_ID = 'commit-message-prompt-to-instructions-migration-20250522'
+const OLD_SETTING_KEY = 'codeWebChat.commitMessagePrompt'
+const NEW_SETTING_KEY = 'codeWebChat.commitMessageInstructions'
+
+/**
+ * Migration to rename commitMessagePrompt setting to commitMessageInstructions
+ * This migration runs only once per extension installation.
+ */
+export async function migrate_commit_message_prompt_to_instructions(
+  context: vscode.ExtensionContext
+): Promise<void> {
+  try {
+    // Check if migration has already run
+    if (context.globalState.get(MIGRATION_ID)) {
+      Logger.log({
+        function_name: 'migrate_commit_message_prompt_to_instructions',
+        message:
+          'Commit message prompt to instructions migration already completed. Skipping.'
+      })
+      return
+    }
+
+    const config = vscode.workspace.getConfiguration()
+    const existing_value = config.get<string>(OLD_SETTING_KEY)
+
+    if (existing_value !== undefined) {
+      // Set the new setting with the existing value
+      await config.update(
+        NEW_SETTING_KEY,
+        existing_value,
+        vscode.ConfigurationTarget.Global
+      )
+
+      Logger.log({
+        function_name: 'migrate_commit_message_prompt_to_instructions',
+        message:
+          'Successfully migrated commitMessagePrompt to commitMessageInstructions'
+      })
+    } else {
+      Logger.log({
+        function_name: 'migrate_commit_message_prompt_to_instructions',
+        message: 'No existing commitMessagePrompt setting found to migrate.'
+      })
+    }
+
+    // Mark migration as completed
+    await context.globalState.update(MIGRATION_ID, true)
+  } catch (error) {
+    Logger.error({
+      function_name: 'migrate_commit_message_prompt_to_instructions',
+      message:
+        'Error migrating commitMessagePrompt to commitMessageInstructions',
+      data: error instanceof Error ? error.message : String(error)
+    })
+    // Do NOT mark as completed if an error occurred
+  }
+}
diff --git a/packages/vscode/src/view/backend/message-handlers/handle-setup-api-tool-multi-config.ts b/packages/vscode/src/view/backend/message-handlers/handle-setup-api-tool-multi-config.ts
@@ -525,7 +525,7 @@ export const handle_setup_api_tool_multi_config = async (params: {
 
     const provider_items = providers.map((p) => ({
       label: p.name,
-      description: p.type == 'built-in' ? '(built-in)' : '(custom)',
+      description: p.type == 'built-in' ? 'Predefined' : 'Custom',
       provider: p
     }))
 
diff --git a/packages/vscode/src/view/backend/message-handlers/handle-setup-api-tool.ts b/packages/vscode/src/view/backend/message-handlers/handle-setup-api-tool.ts
@@ -8,10 +8,11 @@ import {
 import { ModelFetcher } from '@/services/model-fetcher'
 import { PROVIDERS } from '@shared/constants/providers'
 
-export const handle_setup_api_tool = async (
+export const handle_setup_api_tool = async (params: {
   provider: ViewProvider
-): Promise<void> => {
-  const providers_manager = new ApiProvidersManager(provider.context)
+  tool: 'commit-messages' | 'some-other-introduced-later'
+}): Promise<void> => {
+  const providers_manager = new ApiProvidersManager(params.provider.context)
   const model_fetcher = new ModelFetcher()
   const default_temperature = 0.3
 
@@ -50,8 +51,10 @@ export const handle_setup_api_tool = async (
     const api_provider_label = 'API Provider'
     const model_label = 'Model'
     const temperature_label = 'Temperature'
+    const edit_instructions_label = 'Edit instructions'
+
     const show_config_options = async () => {
-      const options = [
+      const options: vscode.QuickPickItem[] = [
         { label: api_provider_label, description: config.provider_name },
         { label: model_label, description: config.model },
         {
@@ -62,6 +65,17 @@ export const handle_setup_api_tool = async (
         }
       ]
 
+      if (params.tool == 'commit-messages') {
+        const current_prompt = vscode.workspace
+          .getConfiguration('codeWebChat')
+          .get<string>('commitMessageInstructions', '')
+
+        options.push({
+          label: edit_instructions_label,
+          detail: current_prompt
+        })
+      }
+
       const selection = await vscode.window.showQuickPick(options, {
         title: 'Update Commit Messages Configuration',
         placeHolder: 'Select setting to update'
@@ -116,7 +130,14 @@ export const handle_setup_api_tool = async (
         }
         config.temperature = new_temperature
         updated = true
+      } else if (selection.label == edit_instructions_label) {
+        await vscode.commands.executeCommand(
+          'workbench.action.openSettings',
+          'codeWebChat.commitMessageInstructions'
+        )
+        return
       }
+
       if (updated) {
         await providers_manager.save_commit_messages_tool_config(config)
       }
diff --git a/packages/vscode/src/view/backend/view-provider.ts b/packages/vscode/src/view/backend/view-provider.ts
@@ -391,7 +391,10 @@ export class ViewProvider implements vscode.WebviewViewProvider {
               tool: 'file-refactoring'
             })
           } else if (message.command == 'SETUP_API_TOOL_COMMIT_MESSAGES') {
-            await handle_setup_api_tool(this)
+            await handle_setup_api_tool({
+              provider: this,
+              tool: 'commit-messages'
+            })
           } else if (message.command == 'PICK_OPEN_ROUTER_MODEL') {
             await handle_pick_open_router_model(this)
           }
diff --git a/packages/vscode/src/view/frontend/tabs/settings/Settings.tsx b/packages/vscode/src/view/frontend/tabs/settings/Settings.tsx
diff --git a/packages/website/docs/features/generate-commit-message.mdx b/packages/website/docs/features/generate-commit-message.mdx

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@ export function generate_commit_message_command(`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`const config = vscode.workspace.getConfiguration('codeWebChat')`
`64`		`- const commit_message_prompt = config.get<string>('commitMessagePrompt')`
	`64`	`+ const commit_message_prompt = config.get<string>('commitMessageInstructions')`
`65`	`65`	`const config_ignored_extensions = new Set(`
`66`	`66`	`config`
`67`	`67`	`.get<string[]>('ignoredExtensions', [])`