feat(ui): Enhance chat view with dynamic theme and improved code highlighting

Implemented dynamic theming for the chat view using chat_css.ts.
Removed bundled CSS and JavaScript files from src/webview.
Modified the webview to dynamically load theme styles.
Updated the database connection path.

Author: Olasunkanmi Oyinlola

src/extension.ts

@@ -1,10 +1,5 @@
 import * as vscode from "vscode";
-import {
-  APP_CONFIG,
-  generativeAiModels,
-  OLA_ACTIONS,
-  USER_MESSAGE,
-} from "./application/constant";
+import { APP_CONFIG, generativeAiModels, OLA_ACTIONS, USER_MESSAGE } from "./application/constant";
 import { Comments } from "./commands/comment";
 import { ExplainCode } from "./commands/explain";
 import { FixError } from "./commands/fixError";
@@ -24,27 +19,16 @@ import { AnthropicWebViewProvider } from "./providers/anthropic";
 import { CodeActionsProvider } from "./providers/code-actions";
 import { GeminiWebViewProvider } from "./providers/gemini";
 import { GroqWebViewProvider } from "./providers/groq";
-import { CodeIndexingService } from "./services/code-indexing";
 import { FileUploader } from "./services/file-uploader";
 import { initializeGenerativeAiEnvironment } from "./services/generative-ai-model-manager";
 import { Credentials } from "./services/github-authentication";
 import { getConfigValue } from "./utils/utils";
 
-const {
-  geminiKey,
-  geminiModel,
-  groqApiKey,
-  groqModel,
-  anthropicApiKey,
-  anthropicModel,
-  grokApiKey,
-  grokModel,
-} = APP_CONFIG;
+const { geminiKey, geminiModel, groqApiKey, groqModel, anthropicApiKey, anthropicModel, grokApiKey, grokModel } =
+  APP_CONFIG;
 
 const connectDB = async () => {
-  await dbManager.connect(
-    "file:/Users/olasunkanmioyinlola/Documents/Apps/codebuddy/patterns/aii.db"
-  );
+  await dbManager.connect("file:/Users/olasunkanmi/Documents/Github/codebuddy/patterns/dev.db");
 };
 
 let quickFixCodeAction: vscode.Disposable;
@@ -54,11 +38,8 @@ export async function activate(context: vscode.ExtensionContext) {
   try {
     const credentials = new Credentials();
     await credentials.initialize(context);
-    const session: vscode.AuthenticationSession | undefined =
-      await credentials.getSession();
-    vscode.window.showInformationMessage(
-      `Logged into GitHub as ${session?.account.label}`
-    );
+    const session: vscode.AuthenticationSession | undefined = await credentials.getSession();
+    vscode.window.showInformationMessage(`Logged into GitHub as ${session?.account.label}`);
     Memory.getInstance();
     await connectDB();
     // const web = WebSearchService.getInstance();
@@ -95,52 +76,19 @@ export async function activate(context: vscode.ExtensionContext) {
       generateCodeChart,
       inlineChat,
     } = OLA_ACTIONS;
-    const getComment = new Comments(
-      `${USER_MESSAGE} generates the code comments...`,
-      context
-    );
-    const getInLineChat = new InLineChat(
-      `${USER_MESSAGE} generates a response...`,
-      context
-    );
-    const generateOptimizeCode = new OptimizeCode(
-      `${USER_MESSAGE} optimizes the code...`,
-      context
-    );
-    const generateRefactoredCode = new RefactorCode(
-      `${USER_MESSAGE} refactors the code...`,
-      context
-    );
-    const explainCode = new ExplainCode(
-      `${USER_MESSAGE} explains the code...`,
-      context
-    );
-    const generateReview = new ReviewCode(
-      `${USER_MESSAGE} reviews the code...`,
-      context
-    );
-    const codeChartGenerator = new CodeChartGenerator(
-      `${USER_MESSAGE} creates the code chart...`,
-      context
-    );
+    const getComment = new Comments(`${USER_MESSAGE} generates the code comments...`, context);
+    const getInLineChat = new InLineChat(`${USER_MESSAGE} generates a response...`, context);
+    const generateOptimizeCode = new OptimizeCode(`${USER_MESSAGE} optimizes the code...`, context);
+    const generateRefactoredCode = new RefactorCode(`${USER_MESSAGE} refactors the code...`, context);
+    const explainCode = new ExplainCode(`${USER_MESSAGE} explains the code...`, context);
+    const generateReview = new ReviewCode(`${USER_MESSAGE} reviews the code...`, context);
+    const codeChartGenerator = new CodeChartGenerator(`${USER_MESSAGE} creates the code chart...`, context);
     const codePattern = fileUpload;
-    const knowledgeBase = new ReadFromKnowledgeBase(
-      `${USER_MESSAGE} generate your code pattern...`,
-      context
-    );
-    const generateCommitMessage = new GenerateCommitMessage(
-      `${USER_MESSAGE} generates a commit message...`,
-      context
-    );
-    const generateInterviewQuestions = new InterviewMe(
-      `${USER_MESSAGE} generates interview questions...`,
-      context
-    );
+    const knowledgeBase = new ReadFromKnowledgeBase(`${USER_MESSAGE} generate your code pattern...`, context);
+    const generateCommitMessage = new GenerateCommitMessage(`${USER_MESSAGE} generates a commit message...`, context);
+    const generateInterviewQuestions = new InterviewMe(`${USER_MESSAGE} generates interview questions...`, context);
 
-    const generateUnitTests = new GenerateUnitTest(
-      `${USER_MESSAGE} generates unit tests...`,
-      context
-    );
+    const generateUnitTests = new GenerateUnitTest(`${USER_MESSAGE} generates unit tests...`, context);
 
     const actionMap = {
       [comment]: async () => await getComment.execute(),
@@ -150,31 +98,23 @@ export async function activate(context: vscode.ExtensionContext) {
       [interviewMe]: async () => await generateInterviewQuestions.execute(),
       [generateUnitTest]: async () => await generateUnitTests.execute(),
       [fix]: (errorMessage: string) =>
-        new FixError(
-          `${USER_MESSAGE} finds a solution to the error...`,
-          context,
-          errorMessage
-        ).execute(errorMessage),
+        new FixError(`${USER_MESSAGE} finds a solution to the error...`, context, errorMessage).execute(errorMessage),
       [explain]: async () => await explainCode.execute(),
       [pattern]: async () => await codePattern.uploadFileHandler(),
       [knowledge]: async () => await knowledgeBase.execute(),
-      [commitMessage]: async () =>
-        await generateCommitMessage.execute("commitMessage"),
+      [commitMessage]: async () => await generateCommitMessage.execute("commitMessage"),
       [generateCodeChart]: async () => await codeChartGenerator.execute(),
       [inlineChat]: async () => await getInLineChat.execute(),
     };
 
-    const subscriptions: vscode.Disposable[] = Object.entries(actionMap).map(
-      ([action, handler]) => vscode.commands.registerCommand(action, handler)
+    const subscriptions: vscode.Disposable[] = Object.entries(actionMap).map(([action, handler]) =>
+      vscode.commands.registerCommand(action, handler)
     );
 
     const selectedGenerativeAiModel = getConfigValue("generativeAi.option");
 
     const quickFix = new CodeActionsProvider();
-    quickFixCodeAction = vscode.languages.registerCodeActionsProvider(
-      { scheme: "file", language: "*" },
-      quickFix
-    );
+    quickFixCodeAction = vscode.languages.registerCodeActionsProvider({ scheme: "file", language: "*" }, quickFix);
 
     agentEventEmmitter = new EventEmitter();
 
@@ -221,9 +161,7 @@ export async function activate(context: vscode.ExtensionContext) {
     }
   } catch (error) {
     Memory.clear();
-    vscode.window.showErrorMessage(
-      "An Error occured while setting up generative AI model"
-    );
+    vscode.window.showErrorMessage("An Error occured while setting up generative AI model");
     console.log(error);
   }
 }

src/providers/base.ts

@@ -3,15 +3,14 @@ import { Orchestrator } from "../agents/orchestrator";
 import { IEventPayload } from "../emitter/interface";
 import { Logger } from "../infrastructure/logger/logger";
 import { FileUploader } from "../services/file-uploader";
-import { formatText, getConfigValue } from "../utils/utils";
+import { formatText } from "../utils/utils";
 import { getWebviewContent } from "../webview/chat";
-import { getChatCss } from "../webview/chat_css";
 
 let _view: vscode.WebviewView | undefined;
 export abstract class BaseWebViewProvider implements vscode.Disposable {
   protected readonly orchestrator: Orchestrator;
   public static readonly viewId = "chatView";
-  static webView: vscode.WebviewView | undefined;
+  public static webView: vscode.WebviewView | undefined;
   public currentWebView: vscode.WebviewView | undefined = _view;
   _context: vscode.ExtensionContext;
   protected readonly logger: Logger;
@@ -51,53 +50,25 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
     webviewView.webview.options = webviewOptions;
 
     if (!this.apiKey) {
-      vscode.window.showErrorMessage(
-        "API key not configured. Check your settings."
-      );
+      vscode.window.showErrorMessage("API key not configured. Check your settings.");
       return;
     }
     this.setWebviewHtml(this.currentWebView);
-    this.setupMessageHandler(
-      this.apiKey,
-      this.generativeAiModel,
-      this.currentWebView
-    );
-
-    setTimeout(() => {
-      this.currentWebView?.webview.postMessage({
-        type: "updateStyles",
-        payload: getChatCss(),
-      });
-      // this.currentWebView?.webview.postMessage({
-      //   type: "modelUpdate",
-      //   payload: { model: getConfigValue("generativeAi.option") },
-      // });
-    }, 500);
+    this.setupMessageHandler(this.apiKey, this.generativeAiModel, this.currentWebView);
   }
 
   private async setWebviewHtml(view: vscode.WebviewView): Promise<void> {
     const codepatterns: FileUploader = new FileUploader(this._context);
-    // const knowledgeBaseDocs: string[] = await codepatterns.getFiles();
-    view.webview.html = getWebviewContent(
-      this.currentWebView?.webview!,
-      this._extensionUri
-    );
+    view.webview.html = getWebviewContent(this.currentWebView?.webview!, this._extensionUri);
   }
 
-  private async setupMessageHandler(
-    apiKey: string,
-    modelName: string,
-    _view: vscode.WebviewView
-  ): Promise<void> {
+  private async setupMessageHandler(apiKey: string, modelName: string, _view: vscode.WebviewView): Promise<void> {
     try {
       _view.webview.onDidReceiveMessage(async (message) => {
         let response: any;
         if (message.command === "user-input") {
           if (message.tags?.length > 0) {
-            response = await this.generateResponse(
-              message.message,
-              message.tags
-            );
+            response = await this.generateResponse(message.message, message.tags);
           } else {
             response = await this.generateResponse(message.message);
           }
@@ -116,15 +87,9 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
   public handleModelResponseEvent(event: IEventPayload) {
     this.sendResponse(formatText(event.message), "bot");
   }
-  abstract generateResponse(
-    message?: string,
-    metaData?: Record<string, any>
-  ): Promise<string | undefined>;
+  abstract generateResponse(message?: string, metaData?: Record<string, any>): Promise<string | undefined>;
 
-  abstract sendResponse(
-    response: string,
-    currentChat?: string
-  ): Promise<boolean | undefined>;
+  abstract sendResponse(response: string, currentChat?: string): Promise<boolean | undefined>;
 
   public dispose(): void {
     this.disposables.forEach((d) => d.dispose());