feat(ui): Enhance chat UI with dynamic styles and code highlighting

olasunkanmiraymond · olasunkanmiraymond · commit 753e16f09271 · 2025-03-20T14:11:26.000+08:00
- Implemented dynamic CSS updates in the chat UI to reflect theme and font changes.
- Added code syntax highlighting using highlight.js in webview.
- Introduced a copy button for code blocks to copy the code to clipboard.
diff --git a/package.json b/package.json
@@ -182,7 +182,7 @@
     },
     "configuration": [
       {
-        "title": "CodeBuddy, Ola",
+        "title": "CodeBuddy",
         "properties": {
           "generativeAi.option": {
             "type": "string",
diff --git a/src/extension.ts b/src/extension.ts
@@ -43,7 +43,7 @@ const {
 
 const connectDB = async () => {
   await dbManager.connect(
-    "file:/Users/olasunkanmi/Documents/Github/codebuddy/patterns/dev.db",
+    "file:/Users/olasunkanmioyinlola/Documents/Apps/codebuddy/patterns/aii.db"
   );
 };
 
@@ -57,7 +57,7 @@ export async function activate(context: vscode.ExtensionContext) {
     const session: vscode.AuthenticationSession | undefined =
       await credentials.getSession();
     vscode.window.showInformationMessage(
-      `Logged into GitHub as ${session?.account.label}`,
+      `Logged into GitHub as ${session?.account.label}`
     );
     Memory.getInstance();
     await connectDB();
@@ -75,11 +75,11 @@ export async function activate(context: vscode.ExtensionContext) {
     // const names = await fileUpload.getFileNames();
     // console.log(files, names);
 
-    const index = CodeIndexingService.createInstance();
+    // const index = CodeIndexingService.createInstance();
     // Get each of the folders and call the next line for each
-    const result = await index.buildFunctionStructureMap();
+    // const result = await index.buildFunctionStructureMap();
     // await index.insertFunctionsinDB();
-    console.log(result);
+    // console.log(result);
     const {
       comment,
       review,
@@ -97,49 +97,49 @@ export async function activate(context: vscode.ExtensionContext) {
     } = OLA_ACTIONS;
     const getComment = new Comments(
       `${USER_MESSAGE} generates the code comments...`,
-      context,
+      context
     );
     const getInLineChat = new InLineChat(
       `${USER_MESSAGE} generates a response...`,
-      context,
+      context
     );
     const generateOptimizeCode = new OptimizeCode(
       `${USER_MESSAGE} optimizes the code...`,
-      context,
+      context
     );
     const generateRefactoredCode = new RefactorCode(
       `${USER_MESSAGE} refactors the code...`,
-      context,
+      context
     );
     const explainCode = new ExplainCode(
       `${USER_MESSAGE} explains the code...`,
-      context,
+      context
     );
     const generateReview = new ReviewCode(
       `${USER_MESSAGE} reviews the code...`,
-      context,
+      context
     );
     const codeChartGenerator = new CodeChartGenerator(
       `${USER_MESSAGE} creates the code chart...`,
-      context,
+      context
     );
     const codePattern = fileUpload;
     const knowledgeBase = new ReadFromKnowledgeBase(
       `${USER_MESSAGE} generate your code pattern...`,
-      context,
+      context
     );
     const generateCommitMessage = new GenerateCommitMessage(
       `${USER_MESSAGE} generates a commit message...`,
-      context,
+      context
     );
     const generateInterviewQuestions = new InterviewMe(
       `${USER_MESSAGE} generates interview questions...`,
-      context,
+      context
     );
 
     const generateUnitTests = new GenerateUnitTest(
       `${USER_MESSAGE} generates unit tests...`,
-      context,
+      context
     );
 
     const actionMap = {
@@ -153,7 +153,7 @@ export async function activate(context: vscode.ExtensionContext) {
         new FixError(
           `${USER_MESSAGE} finds a solution to the error...`,
           context,
-          errorMessage,
+          errorMessage
         ).execute(errorMessage),
       [explain]: async () => await explainCode.execute(),
       [pattern]: async () => await codePattern.uploadFileHandler(),
@@ -165,15 +165,15 @@ export async function activate(context: vscode.ExtensionContext) {
     };
 
     const subscriptions: vscode.Disposable[] = Object.entries(actionMap).map(
-      ([action, handler]) => vscode.commands.registerCommand(action, handler),
+      ([action, handler]) => vscode.commands.registerCommand(action, handler)
     );
 
     const selectedGenerativeAiModel = getConfigValue("generativeAi.option");
 
     const quickFix = new CodeActionsProvider();
     quickFixCodeAction = vscode.languages.registerCodeActionsProvider(
       { scheme: "file", language: "*" },
-      quickFix,
+      quickFix
     );
 
     agentEventEmmitter = new EventEmitter();
@@ -216,13 +216,13 @@ export async function activate(context: vscode.ExtensionContext) {
         webviewProviderClass,
         subscriptions,
         quickFixCodeAction,
-        agentEventEmmitter,
+        agentEventEmmitter
       );
     }
   } catch (error) {
     Memory.clear();
     vscode.window.showErrorMessage(
-      "An Error occured while setting up generative AI model",
+      "An Error occured while setting up generative AI model"
     );
     console.log(error);
   }
diff --git a/src/providers/base.ts b/src/providers/base.ts
@@ -21,7 +21,7 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
     private readonly _extensionUri: vscode.Uri,
     protected readonly apiKey: string,
     protected readonly generativeAiModel: string,
-    context: vscode.ExtensionContext,
+    context: vscode.ExtensionContext
   ) {
     this._context = context;
     this.orchestrator = Orchestrator.getInstance();
@@ -31,9 +31,7 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
       this.orchestrator.onThinking(this.handleModelResponseEvent.bind(this)),
       this.orchestrator.onUpdate(this.handleModelResponseEvent.bind(this)),
       this.orchestrator.onError(this.handleModelResponseEvent.bind(this)),
-      this.orchestrator.onSecretChange(
-        this.handleModelResponseEvent.bind(this),
-      ),
+      this.orchestrator.onSecretChange(this.handleModelResponseEvent.bind(this))
     );
   }
 
@@ -54,59 +52,42 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
 
     if (!this.apiKey) {
       vscode.window.showErrorMessage(
-        "API key not configured. Check your settings.",
+        "API key not configured. Check your settings."
       );
       return;
     }
     this.setWebviewHtml(this.currentWebView);
     this.setupMessageHandler(
       this.apiKey,
       this.generativeAiModel,
-      this.currentWebView,
+      this.currentWebView
     );
 
     setTimeout(() => {
-      this.currentWebView?.webview.postMessage({ type: "updateStyles", payload: getChatCss()});
-      this.currentWebView?.webview.postMessage({ type: "modelUpdate", payload: { model: getConfigValue("generativeAi.option")} });
+      this.currentWebView?.webview.postMessage({
+        type: "updateStyles",
+        payload: getChatCss(),
+      });
+      // this.currentWebView?.webview.postMessage({
+      //   type: "modelUpdate",
+      //   payload: { model: getConfigValue("generativeAi.option") },
+      // });
     }, 500);
-
-    vscode.workspace.onDidChangeConfiguration((event) => {
-      console.log("onDidChangeConfiguration event details is: ");
-      console.dir(event);
-
-      let chatViewThemeChange = event.affectsConfiguration("chatview.theme");
-      let chatViewFontSizeChange = event.affectsConfiguration("chatview.font.size");
-      let fontFamilyChange = event.affectsConfiguration("font.family");
-      console.log("Checking if extension config changes are made to chatview.theme: ", chatViewThemeChange);
-      console.log("Checking if extension config changes are made to chatview.font.size: ", chatViewFontSizeChange);
-      console.log("Checking if extension config changes are made to font.family: ", fontFamilyChange);
-
-      if(chatViewThemeChange || chatViewFontSizeChange || fontFamilyChange) {
-        this.currentWebView?.webview.postMessage({type: "updateStyles", payload: getChatCss()});
-      }
-
-      let selectedGenerativeAiModelChange = event.affectsConfiguration("generativeAi.option");
-      console.log("Checking if extension config changes are made to chatview.theme: ", selectedGenerativeAiModelChange);
-
-      if(selectedGenerativeAiModelChange) {
-        this.currentWebView?.webview.postMessage({ type: "modelUpdate", payload: { model: getConfigValue("generativeAi.option")} });
-      }
-    })
   }
 
   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,
+      this._extensionUri
     );
   }
 
   private async setupMessageHandler(
     apiKey: string,
     modelName: string,
-    _view: vscode.WebviewView,
+    _view: vscode.WebviewView
   ): Promise<void> {
     try {
       _view.webview.onDidReceiveMessage(async (message) => {
@@ -115,7 +96,7 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
           if (message.tags?.length > 0) {
             response = await this.generateResponse(
               message.message,
-              message.tags,
+              message.tags
             );
           } else {
             response = await this.generateResponse(message.message);
@@ -137,12 +118,12 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
   }
   abstract generateResponse(
     message?: string,
-    metaData?: Record<string, any>,
+    metaData?: Record<string, any>
   ): Promise<string | undefined>;
 
   abstract sendResponse(
     response: string,
-    currentChat?: string,
+    currentChat?: string
   ): Promise<boolean | undefined>;
 
   public dispose(): void {
diff --git a/src/providers/webview-events-provider.ts b/src/providers/webview-events-provider.ts
@@ -0,0 +1,28 @@
+import * as vscode from "vscode";
+import { Logger } from "../infrastructure/logger/logger";
+
+type Ttopic = "updateStyles" | "modelUpdate" | "bot" | "user-input";
+
+interface IPostMessage {
+  // Note. Change to topic instead
+  type: Ttopic;
+  payload: Record<string, any> | string;
+}
+
+export class WebViewEventsProvider {
+  private readonly logger: Logger;
+  constructor(private readonly webView: vscode.WebviewView) {
+    // Note: Use factory method for the logger
+    this.logger = new Logger("WebViewEventsProvider");
+  }
+
+  public postMessage(message: IPostMessage) {
+    const { type, payload } = message;
+    try {
+      this.webView.webview.postMessage({ type, payload });
+    } catch (error: any) {
+      this.logger.error(`Unable to emit ${type}`, error);
+      throw new Error(error);
+    }
+  }
+}
diff --git a/src/webview/chat_css.ts b/src/webview/chat_css.ts
@@ -270,7 +270,6 @@ div.code {
     align-items: center;
     margin-bottom: -15px;
     padding: 5px 10px;
-    background-color: #222;
     color: #fff;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
diff --git a/src/webview/chat_html.ts b/src/webview/chat_html.ts
@@ -1,8 +1,6 @@
 import { getUri } from "../utils/utils";
 // import { chatCss } from "./chat_css";
-import { chatJs } from "./chat_js";
-import * as path from "path";
-import { Webview, Uri } from "vscode";
+import { Uri, Webview } from "vscode";
 
 // This function generates a random 32-character string (nonce) using alphanumeric characters
 // A nonce is a unique, random value used for security purposes, typically to prevent replay attacks
@@ -36,7 +34,7 @@ export const chartComponent = (webview: Webview, extensionUri: Uri) => {
 <html lang="en">
 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js" integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw==" crossorigin="anonymous" referrerpolicy="no-referrer" charset="utf-8"></script>
-<script>hljs.highlightAll(); console.log("hljs language is: ", hljs.listLanguages());</script>
+<script>hljs.highlightAll();</script>
  <link rel="stylesheet" type="text/css" href="${stylesUri}">
 </head>
 
diff --git a/webviewUi/src/components/webview.tsx b/webviewUi/src/components/webview.tsx
@@ -16,15 +16,17 @@ import {
   VSCodeProgressRing,
   VSCodeTextArea,
 } from "@vscode/webview-ui-toolkit/react";
+import type hljs from "highlight.js";
 import { useEffect, useState } from "react";
 import { codeBuddyMode, modelOptions } from "../constants/constant";
+import { highlightCodeBlocks } from "../utils/highlightCode";
 import AttachmentIcon from "./attachmentIcon";
 import { BotMessage } from "./botMessage";
 import { UserMessage } from "./personMessage";
 import { ModelDropdown } from "./select";
-import type hljs from "highlight.js";
+import { updateStyles } from "../utils/dynamicCss";
 
-const hljsApi = window["hljs" as any] as unknown as typeof hljs
+const hljsApi = window["hljs" as any] as unknown as typeof hljs;
 
 const vsCode = (() => {
   if (typeof window !== "undefined" && "acquireVsCodeApi" in window) {
@@ -44,48 +46,11 @@ export const WebviewUI = () => {
   const [userInput, setUserInput] = useState("");
   const [messages, setMessages] = useState<Message[]>([]);
   const [activeItem, setActiveItem] = useState<string | null>(null);
-  const [isBotLoading, setIsBotLoading] = useState(false); // New state
-  const [forceUpdate, setForceUpdate] = useState(0);
-
-  const updateStyles = (data: any) => {
-    const existingStyle = document.getElementById("dynamic-chat-css");
-
-    if (existingStyle) {
-      console.log("Removing existing extension css style.");
-      existingStyle.remove();
-    }
-
-    // Inject the new stylesheet
-    const styleElement = document.createElement("style");
-    styleElement.id = "dynamic-chat-css";
-    styleElement.innerHTML = data;
-    document.head.appendChild(styleElement);
-    console.log("Updating extension css style.");
-
-    setForceUpdate(() => forceUpdate + 1);
-  }
-
-  // useEffect(() => {
-  //   hljs.highlightAll(); // Ensure highlight.js runs after rendering
-  // }, [messages]); // Runs every time messages updates
+  const [isBotLoading, setIsBotLoading] = useState(false);
 
   useEffect(() => {
-    const highlightCodeBlocks = () => {
-      if (!hljsApi || !messages || messages.length === 0) return;
-  
-      document.querySelectorAll("pre code").forEach((block) => {
-        // Auto-detect language
-        const detected = hljsApi.highlightAuto(block.textContent || "").language;
-        console.log("Detected language:", detected); // Debugging
-        if(detected != undefined) {
-          block.setHTMLUnsafe(hljsApi.highlight(block.getHTML(), {language: detected}).value);
-        }
-      });
-    };
-  
-    highlightCodeBlocks();
-  }, [messages]); // Runs every time messages update
-  
+    highlightCodeBlocks(hljsApi, messages);
+  }, [messages]);
 
   useEffect(() => {
     const messageHandler = (event: any) => {
diff --git a/webviewUi/src/index.css b/webviewUi/src/index.css
diff --git a/webviewUi/src/utils/dynamicCss.ts b/webviewUi/src/utils/dynamicCss.ts
diff --git a/webviewUi/src/utils/highlightCode.ts b/webviewUi/src/utils/highlightCode.ts

Original file line number	Diff line number	Diff line change
`@@ -182,7 +182,7 @@`
`182`	`182`	`},`
`183`	`183`	`"configuration": [`
`184`	`184`	`{`
`185`		`- "title": "CodeBuddy, Ola",`
	`185`	`+ "title": "CodeBuddy",`
`186`	`186`	`"properties": {`
`187`	`187`	`"generativeAi.option": {`
`188`	`188`	`"type": "string",`