<feat(webview): Add code insertion and terminal execution buttons

- Add  and  message handlers in base.ts to support editor/terminal interactions
- Remove unused streaming UI elements and BotIcon import from botMessage.tsx
- Update webview.tsx to pass VS Code API to highlightCodeBlocks
- Add insert/run buttons to code blocks in highlightCode.ts with language-specific terminal support
- Remove isStreaming prop and associated conditional rendering from BotMessage component

Author: olasunkanmi.raymond

src/webview-providers/base.ts

@@ -779,6 +779,30 @@ export abstract class BaseWebViewProvider implements vscode.Disposable {
                 vscode.env.openExternal(vscode.Uri.parse(message.text));
               }
               break;
+            case "insertCode":
+              {
+                const editor = vscode.window.activeTextEditor;
+                if (editor) {
+                  editor.edit((editBuilder) => {
+                    editBuilder.insert(editor.selection.active, message.text);
+                  });
+                } else {
+                  vscode.window.showErrorMessage(
+                    "No active editor to insert code into.",
+                  );
+                }
+              }
+              break;
+            case "runInTerminal":
+              {
+                let terminal = vscode.window.activeTerminal;
+                if (!terminal) {
+                  terminal = vscode.window.createTerminal("CodeBuddy");
+                }
+                terminal.show();
+                terminal.sendText(message.text);
+              }
+              break;
             case "update-model-event":
               await this.orchestrator.publish("onModelChange", message);
               break;

webviewUi/src/components/botMessage.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import DOMPurify from "dompurify";
 import React from "react";
-import { BotIcon } from "./botIcon";
 import { DownloadIcon } from "./downloadIcon";
 import { IParseURL, parseUrl } from "../utils/parseUrl";
 import UrlCardList from "./urlCardList";
@@ -15,7 +14,6 @@ interface BotMessageProps {
 
 export const BotMessage: React.FC<BotMessageProps> = ({ 
   content, 
-  isStreaming = false 
 }) => {
   const sanitizedContent = DOMPurify.sanitize(content);
   // const action = "Researching...";
@@ -113,36 +111,20 @@ export const BotMessage: React.FC<BotMessageProps> = ({
   };
 
   // Show streaming indicator
-  if (isStreaming && !content) {
-    return (
-      <div className="doc-content">
-        <span style={{ display: "flex", alignItems: "center" }}>
-          <small>Generating response...</small> <BotIcon isBlinking={true} />
-        </span>
-      </div>
-    );
-  }
-
-  // Show thinking state
-  // if (content.includes("thinking")) {
+  // if (isStreaming && !content) {
   //   return (
   //     <div className="doc-content">
   //       <span style={{ display: "flex", alignItems: "center" }}>
-  //         <small>{action}</small> <BotIcon isBlinking={true} />
+  //         <small>Generating response...</small> <BotIcon isBlinking={true} />
   //       </span>
   //     </div>
   //   );
   // }
-
+  
   // Show normal message with streaming cursor if applicable
   return (
     <div className="bot-message">
       <div className="bot-message-actions">
-        {/* {isStreaming && (
-          <span className="streaming-status">
-            Generating...
-          </span>
-        )} */}
         <div className="action-buttons">
           <DownloadIcon onClick={handleCopyMarkdown} />
         </div>
@@ -155,19 +137,6 @@ export const BotMessage: React.FC<BotMessageProps> = ({
       ) : (
         <div style={{ position: "relative" }}>
           <ThinkingComponent content={content} />
-          {/* {isStreaming && (
-            <span 
-              className="streaming-cursor"
-              style={{
-                display: "inline-block",
-                width: "8px",
-                height: "16px",
-                backgroundColor: "currentColor",
-                marginLeft: "2px",
-                animation: "blink 1s infinite",
-              }}
-            />
-          )} */}
         </div>
       )}
     </div>

webviewUi/src/components/webview.tsx

@@ -349,7 +349,7 @@ export const WebviewUI = () => {
 
   // Highlight code blocks when messages update
   useEffect(() => {
-    highlightCodeBlocks(hljsApi, streamedMessages);
+    highlightCodeBlocks(hljsApi, streamedMessages, vsCode);
   }, [streamedMessages]);
 
   // Clear command execution state when streaming completes

webviewUi/src/utils/highlightCode.ts

@@ -8,7 +8,11 @@ function decodeHtml(html: string): string {
   return txt.value;
 }
 
-export const highlightCodeBlocks = (hljsApi: HLJSApi, messages: any) => {
+export const highlightCodeBlocks = (
+  hljsApi: HLJSApi,
+  messages: any,
+  vscodeApi?: any,
+) => {
   if (!hljsApi || messages?.length <= 0) return;
   document
     .querySelectorAll("pre code:not(.hljs-done):not(.mermaid-processed)")
@@ -38,10 +42,19 @@ export const highlightCodeBlocks = (hljsApi: HLJSApi, messages: any) => {
           block.setHTMLUnsafe(highlightedCode);
           block.classList.add("hljs-done");
 
+          // Create container for buttons
+          const buttonContainer = document.createElement("div");
+          buttonContainer.style.display = "flex";
+          buttonContainer.style.gap = "8px";
+          buttonContainer.style.alignItems = "center";
+
+          // Create Copy Button
           const copyButton = document.createElement("button");
           copyButton.innerHTML = "Copy";
           copyButton.classList.add("copy-button");
           copyButton.setAttribute("aria-label", "Copy code to clipboard");
+          copyButton.style.position = "static";
+          copyButton.style.margin = "0";
 
           copyButton.addEventListener("click", () => {
             try {
@@ -56,6 +69,73 @@ export const highlightCodeBlocks = (hljsApi: HLJSApi, messages: any) => {
             }
           });
 
+          // Create Insert Button
+          let insertButton: HTMLButtonElement | null = null;
+          let runButton: HTMLButtonElement | null = null;
+
+          if (vscodeApi) {
+            insertButton = document.createElement("button");
+            insertButton.innerHTML = "Insert";
+            insertButton.classList.add("copy-button"); // Recycle copy-button styles for now
+            insertButton.setAttribute("aria-label", "Insert code into editor");
+            insertButton.style.position = "static";
+            insertButton.style.margin = "0";
+
+            insertButton.addEventListener("click", () => {
+              vscodeApi.postMessage({
+                command: "insertCode",
+                text: block.textContent ?? "",
+              });
+              insertButton!.textContent = "Inserted!";
+              setTimeout(() => {
+                insertButton!.textContent = "Insert";
+              }, 2000);
+            });
+
+            // Create Run Button for terminal-compatible languages
+            const terminalLanguages = [
+              "bash",
+              "sh",
+              "shell",
+              "zsh",
+              "python",
+              "node",
+              "js",
+              "javascript",
+            ];
+            if (
+              detectedLanguage &&
+              terminalLanguages.includes(detectedLanguage.toLowerCase())
+            ) {
+              runButton = document.createElement("button");
+              runButton.innerHTML = "Run";
+              runButton.classList.add("copy-button");
+              runButton.setAttribute("aria-label", "Run code in terminal");
+              runButton.style.position = "static";
+              runButton.style.margin = "0";
+
+              runButton.addEventListener("click", () => {
+                vscodeApi.postMessage({
+                  command: "runInTerminal",
+                  text: block.textContent ?? "",
+                  language: detectedLanguage,
+                });
+                runButton!.textContent = "Running...";
+                setTimeout(() => {
+                  runButton!.textContent = "Run";
+                }, 2000);
+              });
+            }
+          }
+
+          buttonContainer.appendChild(copyButton);
+          if (insertButton) {
+            buttonContainer.appendChild(insertButton);
+          }
+          if (runButton) {
+            buttonContainer.appendChild(runButton);
+          }
+
           // Create a wrapper for the code block with its own copy button
           const preElement = block.closest("pre");
           if (preElement && !preElement.querySelector(".code-block-wrapper")) {
@@ -84,12 +164,8 @@ export const highlightCodeBlocks = (hljsApi: HLJSApi, messages: any) => {
             languageLabel.style.color = "var(--vscode-editor-foreground)";
             languageLabel.style.opacity = "0.8";
 
-            // Add copy button to the header
-            copyButton.style.position = "static";
-            copyButton.style.margin = "0";
-
             codeHeader.appendChild(languageLabel);
-            codeHeader.appendChild(copyButton);
+            codeHeader.appendChild(buttonContainer);
 
             // Wrap the pre element
             preElement.parentNode?.insertBefore(wrapper, preElement);