feat(ui): Enhance CodeBuddy description and add configuration handling

- Update the extension description in package.json to highlight AI-powered features and supported models.
- Implement SecretStorageService to securely store API keys and handle configuration changes.
- Add configuration change handling to update configurations like font and chatview theme.
- Add workspace context to disable input on load.
- Publish configuration changes via the event emitter.
- Subscribe to configuration changes in the webview to apply new settings.

Author: Olasunkanmi Oyinlola

.gitignore

@@ -9,4 +9,5 @@ config.ts
 database
 files
 webviewUi/dist
-samples
+samples
+patterns

package.json

@@ -7,7 +7,7 @@
     "url": "https://olasunkanmi.app"
   },
   "publisher": "fiatinnovations",
-  "description": "CodeBuddy is an AI-powered coding assistant that helps developers write, review, and optimize code.",
+  "description": "CodeBuddy is a Visual Studio Code extension that enhances developer productivity through AI-powered code assistance. It provides intelligent code review, refactoring suggestions, optimization tips, and interactive chat capabilities powered by multiple AI models including Gemini, Groq, Anthropic, and Deepseek.",
   "version": "1.2.3",
   "engines": {
     "vscode": "^1.78.0"

src/application/constant.ts

@@ -47,7 +47,11 @@ export const APP_CONFIG = {
   grokModel: "grok.model",
   deepseekApiKey: "deepseek.apiKey",
   deepseekModel: "deepseek.model",
+  font: "font.family",
+  chatview: "chatview.theme",
+  chatviewFont: "chatview.font.size",
 };
+
 export enum generativeAiModels {
   GEMINI = "Gemini",
   GROQ = "Groq",

src/emitter/interface.ts

@@ -14,7 +14,8 @@ type AgentEventKeys =
   | "onStrategizing"
   | "onModelChange"
   | "onModelChangeSuccess"
-  | "onHistoryUpdated";
+  | "onHistoryUpdated"
+  | "onConfigurationChange";
 
 export type IAgentEventMap = Record<AgentEventKeys, IEventPayload>;
 

src/emitter/publisher.ts

@@ -30,6 +30,9 @@ export class EventEmitter extends BaseEmitter<Record<string, IEventPayload>> {
   );
   onHistoryUpdated: vscode.Event<IEventPayload> =
     this.createEvent("onHistoryUpdated");
+  onConfigurationChange: vscode.Event<IEventPayload> = this.createEvent(
+    "onConfigurationChange",
+  );
 
   /**
    * Emits a generic event with specified status, message, and optional data.

src/extension.ts

@@ -32,6 +32,7 @@ import { DeepseekWebViewProvider } from "./webview-providers/deepseek";
 import { GeminiWebViewProvider } from "./webview-providers/gemini";
 import { GroqWebViewProvider } from "./webview-providers/groq";
 import { WebViewProviderManager } from "./webview-providers/manager";
+import { SecretStorageService } from "./services/secret-storage";
 
 const {
   geminiKey,
@@ -84,6 +85,7 @@ async function createFileDB(context: vscode.ExtensionContext) {
 
 export async function activate(context: vscode.ExtensionContext) {
   try {
+    const secretStorageService = new SecretStorageService(context);
     await createFileDB(context);
     await connectToDatabase(context);
     const credentials = new Credentials();
@@ -240,6 +242,7 @@ export async function activate(context: vscode.ExtensionContext) {
       ...subscriptions,
       quickFixCodeAction,
       agentEventEmmitter,
+      secretStorageService,
     );
   } catch (error) {
     Memory.clear();

src/infrastructure/storage/local-storage.ts

@@ -0,0 +1,83 @@
+import * as vscode from "vscode";
+import { Logger, LogLevel } from "../infrastructure/logger/logger";
+import { APP_CONFIG } from "../application/constant";
+import { Orchestrator } from "../agents/orchestrator";
+
+export class SecretStorageService implements vscode.Disposable {
+  private readonly localStorage: vscode.SecretStorage;
+  private readonly logger: Logger;
+  private readonly disposables: vscode.Disposable[] = [];
+  protected readonly orchestrator: Orchestrator;
+
+  constructor(private readonly context: vscode.ExtensionContext) {
+    this.localStorage = context.secrets;
+    this.logger = Logger.initialize("LocalStorageManager", {
+      minLevel: LogLevel.DEBUG,
+    });
+    this.orchestrator = Orchestrator.getInstance();
+    this.disposables.push(
+      this.localStorage.onDidChange(this.handleSecretStorageChange.bind(this)),
+    );
+    this.disposables.push(
+      vscode.workspace.onDidChangeConfiguration(
+        this.handleConfigurationChange.bind(this),
+      ),
+    );
+  }
+
+  async add(key: string, value: string): Promise<void> {
+    await this.localStorage.store(key, value);
+  }
+
+  async get(key: string): Promise<string | undefined> {
+    return await this.localStorage.get(key);
+  }
+
+  async delete(key: string) {
+    await this.localStorage.delete(key);
+  }
+
+  async handleSecretStorageChange(event: vscode.SecretStorageChangeEvent) {
+    const value = await this.localStorage.get(event.key);
+    this.logger.info(`${event.key}'s value has been changed in SecretStorage`);
+    return value;
+  }
+
+  private logConfigurationChange(configKey: string, messagePrefix: string) {
+    const data: any = {};
+    const newValue = vscode.workspace
+      .getConfiguration()
+      .get<string | number>(configKey);
+    const sensitiveValues = newValue ? "Configured" : "Not Configured";
+    const logMessage =
+      typeof newValue === "string" &&
+      (configKey.endsWith("apiKey") || configKey.endsWith("apiKeys"))
+        ? `${messagePrefix} ${sensitiveValues}`
+        : `${messagePrefix} ${newValue}`;
+    data[configKey] = newValue;
+    this.logger.info(`Configuration change detected: ${logMessage}`);
+    this.orchestrator.publish("onConfigurationChange", JSON.stringify(data));
+  }
+
+  async handleConfigurationChange(event: vscode.ConfigurationChangeEvent) {
+    for (const change of Object.values(APP_CONFIG)) {
+      if (event.affectsConfiguration(change)) {
+        this.logConfigurationChange(change, "");
+      }
+    }
+  }
+
+  getModelOption(): string | undefined {
+    return vscode.workspace.getConfiguration().get<string>("option");
+  }
+
+  setModelOption(value: string): Thenable<void> {
+    return vscode.workspace
+      .getConfiguration()
+      .update("generativeAi.option", value, vscode.ConfigurationTarget.Global);
+  }
+
+  public dispose(): void {
+    this.disposables.forEach((d) => d.dispose());
+  }
+}

src/services/secret-storage.ts

@@ -65,6 +65,9 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
       this.orchestrator.onStrategizing(
         this.handleModelResponseEvent.bind(this),
       ),
+      this.orchestrator.onConfigurationChange(
+        this.handleGenericEvents.bind(this),
+      ),
     );
   }
 

src/webview-providers/base.ts

@@ -88,9 +88,9 @@ const WorkspaceSelector: React.FC<WorkspceSelectorProps> = ({
     }
   }
   const [isOpen, setIsOpen] = useState(false);
-  const [currentCategories, setCurrentCategories] = useState<
-    WorkspceCategory[]
-  >([{ id: "activeEditor", name: activeEditor }]);
+  const [currentCategories, setCurrentCategories] = useState<WorkspceCategory[]>([
+    { id: "activeEditor", name: activeEditor },
+  ]);
   const [breadcrumbs, setBreadcrumbs] = useState<WorkspceCategory[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(initialValue);
@@ -107,23 +107,16 @@ const WorkspaceSelector: React.FC<WorkspceSelectorProps> = ({
 
     if (newValue.length > 0 && newValue.startsWith("@")) {
       const lastAtIndex = newValue.lastIndexOf("@");
-      const lastAtIsValidStart =
-        lastAtIndex === 0 || newValue[lastAtIndex - 1] === " ";
+      const lastAtIsValidStart = lastAtIndex === 0 || newValue[lastAtIndex - 1] === " ";
       setIsOpen(lastAtIsValidStart);
       if (!lastAtIsValidStart) {
         setIsOpen(false);
-        setCurrentCategories([
-          { id: "activeEditor", name: activeEditor },
-          ...workspaceFolders,
-        ]);
+        setCurrentCategories([{ id: "activeEditor", name: activeEditor }, ...workspaceFolders]);
         setBreadcrumbs([]);
       }
     } else {
       setIsOpen(false);
-      setCurrentCategories([
-        { id: "activeEditor", name: activeEditor },
-        ...workspaceFolders,
-      ]);
+      setCurrentCategories([{ id: "activeEditor", name: activeEditor }, ...workspaceFolders]);
       setBreadcrumbs([]);
     }
   };
@@ -145,8 +138,7 @@ const WorkspaceSelector: React.FC<WorkspceSelectorProps> = ({
       const parentCategories =
         newBreadcrumbs.length === 0
           ? workspaceFolders
-          : newBreadcrumbs[newBreadcrumbs.length - 1].children ||
-            workspaceFolders;
+          : newBreadcrumbs[newBreadcrumbs.length - 1].children || workspaceFolders;
 
       setCurrentCategories(parentCategories);
       setBreadcrumbs(newBreadcrumbs);
@@ -161,24 +153,16 @@ const WorkspaceSelector: React.FC<WorkspceSelectorProps> = ({
       const textBeforeCursor = inputValue.substring(0, cursorPosition);
       const lastAtIndex = textBeforeCursor.lastIndexOf("@");
 
-      if (
-        lastAtIndex !== -1 &&
-        (lastAtIndex === 0 || textBeforeCursor[lastAtIndex - 1] === " ")
-      ) {
+      if (lastAtIndex !== -1 && (lastAtIndex === 0 || textBeforeCursor[lastAtIndex - 1] === " ")) {
         const newInputValue =
-          textBeforeCursor.substring(0, lastAtIndex) +
-          `@${item.name} ` +
-          inputValue.substring(cursorPosition);
+          textBeforeCursor.substring(0, lastAtIndex) + `@${item.name} ` + inputValue.substring(cursorPosition);
         inputRef.current.value = newInputValue;
         setInputValue(newInputValue);
         onInputChange(newInputValue);
         inputRef.current.focus();
 
         const newCursorPosition = lastAtIndex + item.name.length + 2;
-        inputRef.current.setSelectionRange(
-          newCursorPosition,
-          newCursorPosition
-        );
+        inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
       } else {
         inputRef.current.value = `@${item.name}`;
         setInputValue(`@${item.name}`);
@@ -212,6 +196,7 @@ const WorkspaceSelector: React.FC<WorkspceSelectorProps> = ({
         style={styles.input}
         onChange={handleInputChange}
         value={inputValue}
+        disabled={initialValue.length > 1}
       />
 
       {isOpen && (
@@ -241,11 +226,7 @@ const WorkspaceSelector: React.FC<WorkspceSelectorProps> = ({
 
           <ul style={styles.list}>
             {currentCategories.map((category) => (
-              <li
-                key={category.id}
-                className="list-item"
-                style={styles.listItem}
-              >
+              <li key={category.id} className="list-item" style={styles.listItem}>
                 <button
                   onClick={() => navigateToCategory(category)}
                   style={{