Merge pull request #248 from olasunkanmi-SE/development

Development

Author: olasunkanmi-SE

.vscode/settings.json

@@ -9,8 +9,5 @@
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
   "liveServer.settings.port": 5501,
-  "chatview.theme": "Code Pen",
-  "generativeAi.option": "Anthropic",
-  "font.family": "Source Code Pro",
 
 }

package.json

@@ -159,7 +159,7 @@
               "XGrok",
               "Deepseek"
             ],
-            "default": "Groq",
+            "default": "Gemini",
             "description": "Select Model"
           },
           "google.gemini.apiKeys": {

src/commands/handler.ts

@@ -387,7 +387,7 @@ export abstract class CodeCommandHandler implements ICodeCommandHandler {
     }
   }
 
-  async execute(message?: string): Promise<void> {
+  async execute(message?: string, action?: string): Promise<void> {
     try {
       let prompt: string | undefined;
       const response = (await this.generateResponse(
@@ -404,18 +404,30 @@ export abstract class CodeCommandHandler implements ICodeCommandHandler {
       }
       switch (this.generativeAi) {
         case generativeAiModels.GROQ:
+          await GroqWebViewProvider.webView?.webview.postMessage({
+            type: "codebuddy-commands",
+            message: action,
+          });
           await GroqWebViewProvider.webView?.webview.postMessage({
             type: "bot-response",
             message: formattedResponse,
           });
           break;
         case generativeAiModels.GEMINI:
+          await GeminiWebViewProvider.webView?.webview.postMessage({
+            type: "codebuddy-commands",
+            message: action,
+          });
           await GeminiWebViewProvider.webView?.webview.postMessage({
             type: "bot-response",
             message: formattedResponse,
           });
           break;
         case generativeAiModels.ANTHROPIC || generativeAiModels.GROK:
+          await AnthropicWebViewProvider.webView?.webview.postMessage({
+            type: "codebuddy-commands",
+            message: action,
+          });
           await AnthropicWebViewProvider.webView?.webview.postMessage({
             type: "bot-response",
             message: formattedResponse,

src/emitter/interface.ts

@@ -28,7 +28,7 @@ type AgentEventKeys =
   | "onFix"
   | "onExplain"
   | "onCommitMessage"
-  | "generateMermaidDiagram"
+  | "onGenerateMermaidDiagram"
   | "onInlineChat"
   | "onCommenting"
   | "onReviewing"

src/emitter/publisher.ts

@@ -55,7 +55,7 @@ export class EventEmitter extends BaseEmitter<Record<string, IEventPayload>> {
   onExplain: vscode.Event<IEventPayload> = this.createEvent("onExplain");
   onCommitMessage: vscode.Event<IEventPayload> =
     this.createEvent("onCommitMessage");
-  generateMermaidDiagram: vscode.Event<IEventPayload> = this.createEvent(
+  onGenerateMermaidDiagram: vscode.Event<IEventPayload> = this.createEvent(
     "generateMermaidDiagram",
   );
   onInlineChat: vscode.Event<IEventPayload> = this.createEvent("onInlineChat");

src/extension.ts

@@ -99,7 +99,7 @@ export async function activate(context: vscode.ExtensionContext) {
       await credentials.getSession();
     logger.info(`Logged into GitHub as ${session?.account.label}`);
     Memory.getInstance();
-
+    // TODO for RAG codeIndexing incase user allows
     // const index = CodeIndexingService.createInstance();
     // Get each of the folders and call the next line for each
     // const result = await index.buildFunctionStructureMap();
@@ -156,48 +156,65 @@ export async function activate(context: vscode.ExtensionContext) {
 
     const actionMap = {
       [comment]: async () => {
-        orchestrator.publish("onCommenting");
-        await getComment.execute();
+        await getComment.execute(
+          undefined,
+          "💭 Add a helpful comment to explain the code logic",
+        );
       },
       [review]: async () => {
-        orchestrator.publish("onReviewing");
-        await generateReview.execute();
+        await generateReview.execute(
+          undefined,
+          "🔍 Perform a thorough code review to ensure best practices",
+        );
       },
       [refactor]: async () => {
-        orchestrator.publish("onRefactoring");
-        await generateRefactoredCode.execute();
+        await generateRefactoredCode.execute(
+          undefined,
+          " 🔄 Improve code readability and maintainability",
+        );
       },
       [optimize]: async () => {
-        orchestrator.publish("onOptimizing");
-        await generateOptimizeCode.execute();
+        await generateOptimizeCode.execute(
+          undefined,
+          "⚡ optimize for performance and efficiency",
+        );
       },
       [interviewMe]: async () => {
-        orchestrator.publish("onInterviewMe");
-        await generateInterviewQuestions.execute();
+        await generateInterviewQuestions.execute(
+          undefined,
+          "📚 Prepare for technical interviews with relevant questions",
+        );
       },
       [fix]: (errorMessage: string) => {
-        orchestrator.publish("onFix");
         new FixError(
           `${USER_MESSAGE} finds a solution to the error...`,
           context,
           errorMessage,
-        ).execute(errorMessage);
+        ).execute(errorMessage, "🔧 Debug and fix the issue");
       },
       [explain]: async () => {
-        orchestrator.publish("onExplain");
-        await explainCode.execute();
+        await explainCode.execute(
+          undefined,
+          "💬 Get a clear and concise explanation of the code concept",
+        );
       },
       [commitMessage]: async () => {
-        orchestrator.publish("onCommitMessage");
-        await generateCommitMessage.execute("commitMessage");
+        await generateCommitMessage.execute(
+          undefined,
+          "🧪 generating commit message",
+        );
       },
       [generateDiagram]: async () => {
-        orchestrator.publish("generateMermaidDiagram");
-        await generateMermaidDiagram.execute();
+        await generateMermaidDiagram.execute(
+          undefined,
+          "📈 Visualize the code with a Mermaid diagram",
+        );
       },
       [inlineChat]: async () => {
-        orchestrator.publish("onInlineChat");
-        await getInLineChat.execute();
+        await getInLineChat.execute(
+          undefined,
+          "💬 Discuss and reason about your code with me",
+        );
       },
     };
 

src/webview-providers/base.ts

@@ -14,6 +14,7 @@ import { formatText } from "../utils/utils";
 import { getWebviewContent } from "../webview/chat";
 import { ChatHistoryManager } from "../services/chat-history-manager";
 import { LogLevel } from "../services/telemetry";
+import { CODEBUDDY_ACTIONS } from "../application/constant";
 
 let _view: vscode.WebviewView | undefined;
 export abstract class BaseWebViewProvider implements vscode.Disposable {

webviewUi/src/components/context.tsx

@@ -17,7 +17,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     padding: "0.5rem",
     border: "2px solid var(--vscode-editor-background)",
     borderRadius: "4px",
-    backgroundColor: "var(--vscode-input-background, #252526)",
+    background: "#16161e",
     color: "inherit",
   },
   dropdown: {

webviewUi/src/components/webview.tsx

@@ -77,23 +77,38 @@ export const WebviewUI = () => {
               type: "bot",
               content: message.message,
               language: "Typescript",
+              alias: "O",
             },
           ]);
           break;
-        case "user-prompt":
+        // case "user-prompt":
+        //   setMessages((prevMessages) => [
+        //     ...(prevMessages || []),
+        //     {
+        //       type: "user",
+        //       // display only the user query with the highlighted code
+        //       content: message.message.split("\n").slice(0, 2),
+        //       alias: "O",
+        //     },
+        //   ]);
+        //   break;
+        case "bootstrap":
+          setFolders(message);
+          break;
+        case "codebuddy-commands":
           setMessages((prevMessages) => [
             ...(prevMessages || []),
             {
               type: "user",
-              // display only the user query with the highlighted code
-              content: message.message.split("\n").slice(0, 2),
+              content:
+                message.message.toLowerCase() === "inline chat"
+                  ? message.message.split("\n").slice(0, 2)
+                  : message.message,
+              language: "Typescript",
               alias: "O",
             },
           ]);
           break;
-        case "bootstrap":
-          setFolders(message);
-          break;
         case "chat-history":
           try {
             setMessages((prevMessages) => [
@@ -284,6 +299,7 @@ export const WebviewUI = () => {
                   value={username}
                   className="text-input"
                   maxLength={10}
+                  disabled={true}
                 />
               </span>
               <span style={{ marginLeft: "5px" }}>
@@ -292,6 +308,7 @@ export const WebviewUI = () => {
                   initialText="save"
                   clickedText="saving..."
                   duration={2000}
+                  disabled={true}
                 ></Button>
               </span>
             </div>
@@ -380,6 +397,7 @@ export const WebviewUI = () => {
             onInput={handleTextChange}
             placeholder="Ask Anything"
             onKeyDown={handleKeyDown}
+            style={{ background: "#16161e" }}
           />
         </div>
         <div className="horizontal-stack">

webviewUi/src/constants/constant.ts

@@ -94,7 +94,33 @@ export const faqItems: FAQItem[] = [
 
   {
     question: "CAN I DOWNLOAD MY CHAT HISTORY",
-    answer: `This version of codebuddy give the data back to the user by creating a gitignored file called .codebuddy. This file can be found at the root level of your application. It houses your chatHistory and in the future, your logs.`,
+    answer: `Yes you can. This version of codebuddy give the data back to the user by creating a gitignored file called .codebuddy. This file can be found at the root level of your application. It houses your chatHistory and in the future, your logs.`,
+  },
+  {
+    question: "WHAT IS THE ACTIVE WORKSPACE",
+    answer: `<p>The active workspace displays the current working workspace of the user within VS Code, providing the following benefits:</p>
+
+<ul>
+    <li><strong>Workspace Context:</strong>Your current workspace appears at the top of the file and directory hierarchy as you navigate through your codebase, making it easier to stay oriented</li>
+    <li><strong>Workspace Management:</strong> Particularly useful when different workspace is opened, as it confirms which project CodeBuddy is analyzing</li>
+</ul>
+`,
+  },
+  {
+    question:
+      "WHAT IS THE CHAT CONTEXT AND HOW CAN IT HELP ME TO ENHANCE MY CODING EXPERIENCE ",
+    answer: `
+
+<p>Chat Context in CodeBuddy is a powerful feature that allows you to add multiple files to provide relevant background information to the AI model when you ask questions. Here's how it works and why it's beneficial:</p>
+
+<h3>How Chat Context Works:</h3> <ul> <li>When working on complex code problems, you can select specific files from your workspace to include as "context"</li> <li>These files are bundled together and sent to the LLM (Gemini, Anthropic, or Groq) along with your question</li> <li>The AI can then analyze these files to understand your codebase's structure, dependencies, and implementation details</li> <li>This gives the AI a more comprehensive understanding of your project, enabling it to provide more accurate and contextually relevant answers</li> </ul>
+
+<h3>Benefits of Using Chat Context:</h3> <ul> <li><strong>More accurate responses:</strong> The AI can provide solutions that align with your existing code patterns and architectural decisions</li> <li><strong>Reduced explanation effort:</strong> Instead of describing your code structure in detail, you can simply include relevant files</li> <li><strong>Contextual debugging:</strong> Include error logs or problematic files to help the AI pinpoint issues faster</li> <li><strong>Project-aware recommendations:</strong> Receive suggestions that take into account your specific implementation, not just generic advice</li> <li><strong>Time savings:</strong> Eliminate back-and-forth exchanges where the AI requests more information about your code</li> </ul>
+
+<h3>When to Use Chat Context:</h3> <ul> <li>When debugging complex issues that span multiple files</li> <li>When asking how to implement a feature that needs to integrate with your existing code</li> <li>When seeking code optimization advice for specific parts of your application</li> <li>When requesting explanations about code functionality across different components</li> </ul>
+
+<p>By utilizing Chat Context, you transform CodeBuddy from a general coding assistant into a specialized collaborator that truly understands your unique project environment.</p> </div>
+`,
   },
 
   {