Merge pull request #259 from olasunkanmi-SE/UI-enhancement

feat(ui): Add download functionality for bot responses

Author: olasunkanmi-SE

webviewUi/src/components/botMessage.tsx

@@ -2,13 +2,14 @@
 import DOMPurify from "dompurify";
 import React from "react";
 import { BotIcon } from "./botIcon";
+import { DownloadIcon } from "./downloadIcon";
+import { downloadAsMarkdown } from "../utils/downloadMarkdown";
 import { IParseURL, parseUrl } from "../utils/parseUrl";
 import UrlCardList from "./urlCardList";
 
 interface CodeBlockProps {
   language?: string;
   content: string;
-  isLoading?: boolean;
 }
 
 export const BotMessage: React.FC<CodeBlockProps> = ({ language, content }) => {
@@ -18,6 +19,19 @@ export const BotMessage: React.FC<CodeBlockProps> = ({ language, content }) => {
   if (sanitizedContent.includes("favicon")) {
     parsedUrls = parseUrl(sanitizedContent);
   }
+
+  const handleDownload = () => {
+    console.log("Download button clicked");
+    console.log("Content length:", sanitizedContent.length);
+    console.log("Content preview:", sanitizedContent.substring(0, 100));
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, "-");
+    const filename = `codebuddy-response-${timestamp}`;
+    console.log("Filename:", filename);
+
+    downloadAsMarkdown(sanitizedContent, filename);
+  };
+
   return (
     <>
       {content.includes("thinking") ? (
@@ -30,6 +44,9 @@ export const BotMessage: React.FC<CodeBlockProps> = ({ language, content }) => {
         <div className="code-block">
           <div className="code-header">
             <span className="language-label">{language}</span>
+            <div className="header-buttons">
+              <DownloadIcon onClick={handleDownload} />
+            </div>
           </div>
           {parsedUrls.length > 0 ? (
             <div className="doc-content">

webviewUi/src/components/downloadIcon.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+interface DownloadIconProps {
+  onClick: () => void;
+  className?: string;
+  title?: string;
+}
+
+export const DownloadIcon: React.FC<DownloadIconProps> = ({
+  onClick,
+  className = "",
+  title = "Download as Markdown",
+}) => {
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleClick = async () => {
+    setIsDownloading(true);
+    try {
+      await onClick();
+    } finally {
+      setTimeout(() => setIsDownloading(false), 1000);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`download-button ${className} ${isDownloading ? "downloading" : ""}`}
+      title={title}
+      aria-label={title}
+      disabled={isDownloading}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="7,10 12,15 17,10" />
+        <line x1="12" y1="15" x2="12" y2="3" />
+      </svg>
+      <span className="download-text">{isDownloading ? "..." : "MD"}</span>
+    </button>
+  );
+};

webviewUi/src/components/skeletonLoader.tsx

@@ -3,7 +3,7 @@ import { BotIcon } from "./botIcon";
 
 export const SkeletonLoader: React.FC = () => {
   return (
-    <div className="skeleton-loader">
+    <div className="skeleton-loader-container">
       <div className="skeleton-header">
         <BotIcon isBlinking={true} />
         <div className="skeleton-line skeleton-line-short"></div>

webviewUi/src/components/webview.tsx

@@ -62,7 +62,6 @@ export const WebviewUI = () => {
 
   useEffect(() => {
     const messageHandler = (event: any) => {
-      setIsBotLoading(true);
       const message = event.data;
       switch (message.type) {
         case "bot-response":
@@ -75,6 +74,7 @@ export const WebviewUI = () => {
               alias: "O",
             },
           ]);
+          setIsBotLoading(false);
           break;
         case "bootstrap":
           setFolders(message);
@@ -86,10 +86,10 @@ export const WebviewUI = () => {
             console.log(error);
             throw new Error(error.message);
           }
-
           break;
         case "error":
           console.error("Extension error", message.payload);
+          setIsBotLoading(false);
           break;
         case "onActiveworkspaceUpdate":
           setActiveEditor(message.message ?? "");
@@ -111,11 +111,14 @@ export const WebviewUI = () => {
       }
     };
     window.addEventListener("message", messageHandler);
-    highlightCodeBlocks(hljsApi, messages);
-    setIsBotLoading(false);
     return () => {
       window.removeEventListener("message", messageHandler);
     };
+  }, []);
+
+  // Separate effect for highlighting code blocks
+  useEffect(() => {
+    highlightCodeBlocks(hljsApi, messages);
   }, [messages]);
 
   const handleClearHistory = () => {

webviewUi/src/index.css

@@ -276,6 +276,7 @@ vscode-button>.codicon {
   border-radius: 6px;
   font-family: "JetBrains Mono", SF Mono, "Geist Mono", "Fira Code", "Fira Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
   margin: 16px 0;
+  position: relative;
 }
 
 .code-header {
@@ -285,6 +286,23 @@ vscode-button>.codicon {
   padding: 8px 16px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
+  position: relative;
+}
+
+.code-header .language-label {
+  flex: 1;
+}
+
+.header-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.code-header .download-button,
+.code-header .copy-button {
+  flex-shrink: 0;
+  margin-left: 0;
 }
 
 .language-label {
@@ -545,9 +563,13 @@ hr {
   padding: 4px 8px;
   font-size: 12px;
   cursor: pointer;
-  margin-left: 12px;
+  margin-left: 8px;
   transition: background 0.3s ease, border-color 0.3s ease;
-  float: right;
+  background: transparent;
+  color: var(--vscode-editor-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .copy-button:hover {
@@ -556,6 +578,49 @@ hr {
   color: white;
 }
 
+.download-button {
+  border: 1px solid #28a745;
+  background: transparent;
+  border-radius: 8px;
+  padding: 6px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-editor-foreground);
+  margin-left: 8px;
+}
+
+.download-button:hover {
+  background: #28a745;
+  border-color: #28a745;
+  color: white;
+}
+
+.download-button.downloading {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.download-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.download-button svg {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+}
+
+.download-text {
+  font-size: 10px;
+  font-weight: 600;
+  opacity: 0.8;
+}
+
 .app-container {
   padding: 20px;
   background-color: #1a1a1a;
@@ -868,4 +933,4 @@ hr {
   cursor: pointer;
   transition: background-color 0.3s ease;
   color: var(--vscode-dropdown-foreground);
-}
+}

webviewUi/src/themes/atom-one-dark.ts

@@ -1,3 +1,8 @@
+import {
+  generateSkeletonLoaderCSS,
+  SKELETON_THEME_PRESETS,
+} from "./skeletonLoader";
+
 export const oneDarkCss = `/*
 
 Atom One Dark by Daniel Gamage
@@ -93,62 +98,4 @@ hue-6-2: #e6c07b
   text-decoration: underline;
 }
 
-/* Skeleton Loader Styles */
-.skeleton-loader {
-  background: var(--vscode-editor-background, #282c34);
-  border-radius: 8px;
-  padding: 16px;
-  margin: 8px 0;
-  border: 1px solid var(--vscode-widget-border, #3e4451);
-}
-
-.skeleton-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.skeleton-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.skeleton-line {
-  height: 12px;
-  background: linear-gradient(90deg, 
-    var(--vscode-editor-background, #282c34) 0%,
-    var(--vscode-input-background, #3e4451) 50%,
-    var(--vscode-editor-background, #282c34) 100%
-  );
-  border-radius: 6px;
-  background-size: 200px 100%;
-  background-position: -200px 0;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-}
-
-.skeleton-line-short {
-  width: 30%;
-}
-
-.skeleton-line-medium {
-  width: 60%;
-}
-
-.skeleton-line-long {
-  width: 80%;
-}
-
-.skeleton-line-full {
-  width: 100%;
-}
-
-@keyframes skeleton-pulse {
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}`;
+${generateSkeletonLoaderCSS(SKELETON_THEME_PRESETS.atomOneDark)}`;