feat(ui): integrate Helpmate-AI chatbot with improved UX

This commit improves the integration of the Helpmate-AI chatbot into the CoderAI application with several key enhancements:

- fix(launch): prevent multiple browser windows by adding --server.headless=true flag to Streamlit
- feat(ui): implement popup chatbot interface accessible from dashboard and chat tab
- fix(ui): remove success notification message for Helpmate-AI initialization
- refactor(ui): simplify chatbot implementation using Streamlit session state
- fix(ui): implement reliable close button using page refresh
- style(ui): improve chatbot popup styling with header bar and proper dimensions
- perf(ui): remove complex JavaScript that caused TypeError with html() component

The chatbot now appears as a popup window when triggered by buttons in the UI rather than opening in a separate browser window, providing a more seamless user experience.

Author: jkarthid

Helpmate-AI/package-lock.json

@@ -4,6 +4,7 @@ import axios from "axios";
 import ReactMarkdown from "react-markdown";
 import Footer from "./Footer";
 import ShareButtons from "./components/ShareButtons";
+import CodeAnalysis from "./components/CodeAnalysis";
 import { FaMicrophone, FaPaperPlane, FaVolumeUp } from "react-icons/fa";
 
 const cache = new Map();
@@ -15,8 +16,13 @@ function App() {
   const [isListening, setIsListening] = useState(false);
   const [recognition, setRecognition] = useState(null);
   const [isSpeaking, setIsSpeaking] = useState(false);
+  const [mode, setMode] = useState("chat"); // "chat" or "code"
+  const [isEmbedded, setIsEmbedded] = useState(false);
 
   useEffect(() => {
+    // Check if running in an iframe
+    setIsEmbedded(window.self !== window.top);
+
     if ("webkitSpeechRecognition" in window) {
       const recognition = new window.webkitSpeechRecognition();
       recognition.continuous = false;
@@ -149,71 +155,95 @@ function App() {
   }
 
   return (
-    <div className="flex flex-col min-h-screen bg-gray-950 text-white">
-      <nav className="p-4 bg-[#040E23]">
-        <h1 className="text-2xl font-bold text-center">Helpmate AI</h1>
-      </nav>
-      <div className="flex-grow p-4">
-        <div className="chat-display space-y-4">
-          {chatHistory.map((chat, index) => (
-            <div
-              key={index}
-              className={`p-3 rounded-lg ${
-                chat.type === "question"
-                  ? "bg-blue-600 text-white self-end text-right w-fit max-w-[90%] ml-auto"
-                  : "bg-gray-800 text-white self-start text-left w-fit max-w-[90%]"
-              }`}
+    <div className={`flex flex-col ${isEmbedded ? 'h-screen' : 'min-h-screen'} bg-gray-950 text-white`}>
+      <nav className="p-2 bg-[#040E23]">
+        <div className="flex justify-between items-center max-w-4xl mx-auto">
+          <h1 className="text-xl font-bold">Helpmate AI</h1>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setMode("chat")}
+              className={`px-3 py-1 rounded-lg ${mode === "chat" ? "bg-blue-600" : "bg-gray-700"} text-white transition-colors text-sm`}
             >
-              <ReactMarkdown className="markdown-body">{chat.text}</ReactMarkdown>
-              {chat.type === "answer" && (
-                <div className="flex flex-wrap justify-end mt-2 space-x-2">
-                  <button onClick={() => toggleSpeaking(chat.text)} className="flex items-center text-gray-300 mt-2 mr-2">
-                    <FaVolumeUp className="mr-1" />
-                  </button>
-                  <ShareButtons answer={chat.text} />
-                </div>
-              )}
-            </div>
-          ))}
-          {generatingAnswer && (
-            <div className="p-3 rounded-lg bg-gray-900 animate-pulse">
-              <div className="h-4 bg-gray-700 rounded w-3/4 mb-2"></div>
-              <div className="h-4 bg-gray-700 rounded w-2/3 mb-2"></div>
-              <div className="h-4 bg-gray-700 rounded w-1/2"></div>
-            </div>
-          )}
-        </div>
-      </div>
-      <form onSubmit={generateAnswer} className="flex items-center w-full bg-gray-900 p-3">
-        <textarea
-          required
-          className="border border-gray-800 bg-gray-800 text-white rounded-lg w-full p-2 h-12 resize-none focus:border-blue-500 outline-none"
-          value={question}
-          onChange={(e) => setQuestion(e.target.value)}
-          placeholder="Your AI mate is here to help!"
-        />
-        <div className="flex items-center space-x-2 ml-4">
-          {recognition && (
+              Chat
+            </button>
             <button
-              type="button"
-              onClick={toggleListening}
-              className={`p-2 rounded-full transition-transform duration-300 ease-in-out ${
-                isListening ? "bg-red-500" : "bg-blue-500"
-              } hover:opacity-80`}
+              onClick={() => setMode("code")}
+              className={`px-3 py-1 rounded-lg ${mode === "code" ? "bg-blue-600" : "bg-gray-700"} text-white transition-colors text-sm`}
             >
-              <FaMicrophone className="text-white" />
+              Code Analysis
             </button>
-          )}
-          <button
-            type="submit"
-            className="p-2 rounded-full bg-blue-600 hover:bg-blue-700"
-            disabled={generatingAnswer}
-          >
-            <FaPaperPlane className={`text-white ${generatingAnswer ? "send-animation" : ""}`} />
-          </button>
+          </div>
+        </div>
+      </nav>
+      <div className="flex-grow p-2">
+        {mode === "chat" ? (
+          <div className="chat-display space-y-2">
+            {chatHistory.map((chat, index) => (
+              <div
+                key={index}
+                className={`p-2 rounded-lg ${
+                  chat.type === "question"
+                    ? "bg-blue-600 text-white self-end text-right w-fit max-w-[90%] ml-auto"
+                    : "bg-gray-800 text-white self-start text-left w-fit max-w-[90%]"
+                }`}
+              >
+                <ReactMarkdown className="markdown-body">{chat.text}</ReactMarkdown>
+                {chat.type === "answer" && (
+                  <div className="flex flex-wrap justify-end mt-1 space-x-1">
+                    <button onClick={() => toggleSpeaking(chat.text)} className="flex items-center text-gray-300 mt-1 mr-1">
+                      <FaVolumeUp className="mr-1" />
+                    </button>
+                    <ShareButtons answer={chat.text} />
+                  </div>
+                )}
+              </div>
+            ))}
+            {generatingAnswer && (
+              <div className="p-2 rounded-lg bg-gray-900 animate-pulse">
+                <div className="h-3 bg-gray-700 rounded w-3/4 mb-1"></div>
+                <div className="h-3 bg-gray-700 rounded w-2/3 mb-1"></div>
+                <div className="h-3 bg-gray-700 rounded w-1/2"></div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <CodeAnalysis />
+        )}
+      </div>
+      {mode === "chat" && (
+        <div>
+          <form onSubmit={generateAnswer} className="flex items-center w-full bg-gray-900 p-2">
+            <textarea
+              required
+              className="border border-gray-800 bg-gray-800 text-white rounded-lg w-full p-1 h-10 resize-none focus:border-blue-500 outline-none"
+              value={question}
+              onChange={(e) => setQuestion(e.target.value)}
+              placeholder="Your AI mate is here to help!"
+            />
+            <div className="flex items-center space-x-1 ml-2">
+              {recognition && (
+                <button
+                  type="button"
+                  onClick={toggleListening}
+                  className={`p-1 rounded-full transition-transform duration-300 ease-in-out ${
+                    isListening ? "bg-red-500" : "bg-blue-500"
+                  } hover:opacity-80`}
+                >
+                  <FaMicrophone className="text-white" />
+                </button>
+              )}
+              <button
+                type="submit"
+                className="p-1 rounded-full bg-blue-600 hover:bg-blue-700"
+                disabled={generatingAnswer}
+              >
+                <FaPaperPlane className={`text-white ${generatingAnswer ? "send-animation" : ""}`} />
+              </button>
+            </div>
+          </form>
+          <Footer />
         </div>
-      </form>
-      <Footer />
+      )}
     </div>
   );
 }

Helpmate-AI/src/App.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import coderAIService from '../services/coderAIService';
+import ReactMarkdown from 'react-markdown';
+
+const CodeAnalysis = () => {
+  const [code, setCode] = useState('');
+  const [analysis, setAnalysis] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleAnalyze = async () => {
+    if (!code.trim()) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await coderAIService.analyzeCode(code);
+      setAnalysis(result);
+    } catch (err) {
+      setError('Failed to analyze code. Please try again.');
+      console.error('Analysis error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-4xl mx-auto p-4">
+      <h2 className="text-2xl font-bold mb-4 text-white">Code Analysis</h2>
+      <div className="mb-4">
+        <textarea
+          className="w-full h-48 p-3 bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          placeholder="Paste your code here..."
+        />
+      </div>
+      <button
+        onClick={handleAnalyze}
+        disabled={loading}
+        className={`px-4 py-2 rounded-lg ${loading ? 'bg-gray-600' : 'bg-blue-600 hover:bg-blue-700'} text-white font-medium transition-colors`}
+      >
+        {loading ? 'Analyzing...' : 'Analyze Code'}
+      </button>
+
+      {error && (
+        <div className="mt-4 p-3 bg-red-500 bg-opacity-20 border border-red-500 rounded-lg text-red-500">
+          {error}
+        </div>
+      )}
+
+      {analysis && (
+        <div className="mt-6 p-4 bg-gray-800 rounded-lg">
+          <h3 className="text-xl font-semibold mb-3 text-white">Analysis Results</h3>
+          <div className="prose prose-invert">
+            <ReactMarkdown>{analysis.result}</ReactMarkdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CodeAnalysis;

Helpmate-AI/src/components/CodeAnalysis.jsx

@@ -0,0 +1,56 @@
+import axios from 'axios';
+
+const CODER_AI_BASE_URL = 'http://localhost:5000';
+
+class CoderAIService {
+  constructor() {
+    this.client = axios.create({
+      baseURL: CODER_AI_BASE_URL,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  async analyzeCode(code) {
+    try {
+      const response = await this.client.post('/analyze', { code });
+      return response.data;
+    } catch (error) {
+      console.error('Error analyzing code:', error);
+      throw error;
+    }
+  }
+
+  async getProjectSuggestions() {
+    try {
+      const response = await this.client.get('/suggestions');
+      return response.data;
+    } catch (error) {
+      console.error('Error getting project suggestions:', error);
+      throw error;
+    }
+  }
+
+  async reviewCode(codeSnippet) {
+    try {
+      const response = await this.client.post('/review', { code: codeSnippet });
+      return response.data;
+    } catch (error) {
+      console.error('Error reviewing code:', error);
+      throw error;
+    }
+  }
+
+  async getGitHubIntegration() {
+    try {
+      const response = await this.client.get('/github/status');
+      return response.data;
+    } catch (error) {
+      console.error('Error getting GitHub integration status:', error);
+      throw error;
+    }
+  }
+}
+
+export default new CoderAIService();