Spaces:

preview
/

medical-summarizer

Running

App Files Files Community

ntphuc149 commited on Sep 22, 2025

Commit

c3b8c5f

verified ·

1 Parent(s): c6db123

Upload 21 files

Browse files

Files changed (21) hide show

.env.example +8 -0
.gitattributes +43 -0
.gitignore +30 -0
README.md +0 -0
package-lock.json +0 -0
package.json +36 -0
public/favicon.ico +0 -0
public/index.html +28 -0
public/logo192.png +0 -0
public/logo512.png +0 -0
public/manifest.json +25 -0
public/robots.txt +3 -0
src/App.css +38 -0
src/App.js +772 -0
src/App.test.js +8 -0
src/index.css +9 -0
src/index.js +10 -0
src/logo.svg +1 -0
src/reportWebVitals.js +13 -0
src/services/apiService.js +101 -0
src/setupTests.js +5 -0

.env.example ADDED Viewed

	@@ -0,0 +1,8 @@

+# Frontend Environment Variables
+REACT_APP_API_URL=http://localhost:8000
+REACT_APP_ENV=development
+# Backend Environment Variables
+QWEN_SERVER_IP=https://your-kaggle-server.ngrok.io
+WEB_API_PORT=8000
+WEB_API_HOST=0.0.0.0

.gitattributes ADDED Viewed

	@@ -0,0 +1,43 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+public/Aries.png filter=lfs diff=lfs merge=lfs -text
+public/Gemini.jpg filter=lfs diff=lfs merge=lfs -text
+public/Leo.jpg filter=lfs diff=lfs merge=lfs -text
+public/Libra.jpg filter=lfs diff=lfs merge=lfs -text
+public/Pisces.jpg filter=lfs diff=lfs merge=lfs -text
+public/Sagittarius.jpg filter=lfs diff=lfs merge=lfs -text
+public/Taurus.jpg filter=lfs diff=lfs merge=lfs -text
+public/Virgo.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,30 @@

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# api keys
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

README.md ADDED Viewed

File without changes

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,36 @@

+{
+  "name": "medical-mas-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": ".",
+  "dependencies": {
+    "lucide-react": "^0.542.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://localhost:8000"
+}

public/favicon.ico ADDED Viewed

public/index.html ADDED Viewed

	@@ -0,0 +1,28 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Customization Patient Healcare with AI Powered Multi-Agent System"
+    />
+    <title>Medical Multi-Agent System</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@tabler/icons-sprite@latest/dist/tabler-icons.css"
+    />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/logo192.png ADDED Viewed

public/logo512.png ADDED Viewed

public/manifest.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css ADDED Viewed

	@@ -0,0 +1,38 @@

+.App {
+  text-align: center;
+}
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+.App-link {
+  color: #61dafb;
+}
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js ADDED Viewed

	@@ -0,0 +1,772 @@

+import React, { useState, useEffect, useRef } from "react";
+import {
+  Send,
+  Moon,
+  Sun,
+  User,
+  Bot,
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  Heart,
+  Phone,
+  Calendar,
+  MapPin,
+  FileText,
+} from "lucide-react";
+import { apiService } from "./services/apiService";
+const MedicalChatUI = () => {
+  // UI State
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [currentMessage, setCurrentMessage] = useState("");
+  const [messages, setMessages] = useState([]);
+  const [isTyping, setIsTyping] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [connectionError, setConnectionError] = useState("");
+  // Patient Data State
+  const [patientRecord, setPatientRecord] = useState({
+    personal_info: {
+      full_name: "",
+      dob: "",
+      gender: "",
+      phone: "",
+      address: "",
+    },
+    medical_info: {
+      current_symptoms: [],
+      symptom_start_date: "",
+      previous_medications: [],
+      allergies: [],
+      severity_level: "",
+    },
+  });
+  // Session State
+  const [sessionStatus, setSessionStatus] = useState("idle"); // idle | collecting | completed
+  const [confidenceScores, setConfidenceScores] = useState({
+    extraction: 0,
+    validation: 0,
+  });
+  const messagesEndRef = useRef(null);
+  // Auto-scroll to bottom
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  // Initialize connection and start chat
+  useEffect(() => {
+    initializeChat();
+  }, []);
+  const initializeChat = async () => {
+    try {
+      // Health check
+      await apiService.healthCheck();
+      setIsConnected(true);
+      setConnectionError("");
+      // Start chat session
+      const response = await apiService.startChat();
+      // Add initial AI message
+      setMessages([
+        {
+          id: Date.now(),
+          text: response.message,
+          sender: "ai",
+          timestamp: new Date().toISOString(),
+        },
+      ]);
+      setSessionStatus("collecting");
+    } catch (error) {
+      setIsConnected(false);
+      setConnectionError(error.message);
+      console.error("Failed to initialize chat:", error);
+    }
+  };
+  const handleSendMessage = async () => {
+    if (!currentMessage.trim() || isTyping) return;
+    const userMessage = {
+      id: Date.now(),
+      text: currentMessage.trim(),
+      sender: "user",
+      timestamp: new Date().toISOString(),
+    };
+    // Add user message to chat
+    setMessages((prev) => [...prev, userMessage]);
+    setCurrentMessage("");
+    setIsTyping(true);
+    try {
+      // Send to backend
+      const response = await apiService.sendMessage(userMessage.text);
+      // Update patient record
+      setPatientRecord(response.patient_record);
+      setConfidenceScores(response.confidence_scores);
+      setSessionStatus(response.session_status);
+      // Add AI response
+      const aiMessage = {
+        id: Date.now() + 1,
+        text: response.ai_message,
+        sender: "ai",
+        timestamp: new Date().toISOString(),
+        metadata: response.metadata,
+      };
+      setMessages((prev) => [...prev, aiMessage]);
+      // If conversation completed, show completion message
+      if (response.should_end) {
+        setTimeout(() => {
+          const completionMessage = {
+            id: Date.now() + 2,
+            text: "✅ Information collection completed! Click 'Generate Summary' to create a doctor report.",
+            sender: "system",
+            timestamp: new Date().toISOString(),
+          };
+          setMessages((prev) => [...prev, completionMessage]);
+        }, 1000);
+      }
+    } catch (error) {
+      console.error("Failed to send message:", error);
+      // Add error message
+      const errorMessage = {
+        id: Date.now() + 1,
+        text: `❌ Error: ${error.message}. Please try again.`,
+        sender: "system",
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsTyping(false);
+    }
+  };
+  const handleGenerateSummary = async () => {
+    try {
+      setIsTyping(true);
+      const summary = await apiService.generateSummary();
+      const summaryMessage = {
+        id: Date.now(),
+        text: `📋 **Doctor Summary Generated**\n\n**Summary:** ${
+          summary.doctor_summary
+        }\n\n**Urgency Level:** ${
+          summary.urgency_level
+        }\n\n**Key Findings:**\n${summary.key_findings
+          .map((f) => `• ${f}`)
+          .join(
+            "\n"
+          )}\n\n**Recommended Questions:**\n${summary.recommended_questions
+          .map((q) => `• ${q}`)
+          .join("\n")}`,
+        sender: "system",
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, summaryMessage]);
+    } catch (error) {
+      console.error("Failed to generate summary:", error);
+    } finally {
+      setIsTyping(false);
+    }
+  };
+  const handleResetChat = async () => {
+    try {
+      await apiService.resetSession();
+      setMessages([]);
+      setPatientRecord({
+        personal_info: {
+          full_name: "",
+          dob: "",
+          gender: "",
+          phone: "",
+          address: "",
+        },
+        medical_info: {
+          current_symptoms: [],
+          symptom_start_date: "",
+          previous_medications: [],
+          allergies: [],
+          severity_level: "",
+        },
+      });
+      setSessionStatus("idle");
+      setConfidenceScores({ extraction: 0, validation: 0 });
+      // Restart chat
+      await initializeChat();
+    } catch (error) {
+      console.error("Failed to reset chat:", error);
+    }
+  };
+  // Components
+  const MessageBubble = ({ message }) => {
+    const isUser = message.sender === "user";
+    const isSystem = message.sender === "system";
+    return (
+      <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-4`}>
+        <div className="flex items-start space-x-3 max-w-3xl">
+          {!isUser && (
+            <div
+              className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
+                isSystem
+                  ? isDarkMode
+                    ? "bg-yellow-900/50 text-yellow-300"
+                    : "bg-yellow-100 text-yellow-700"
+                  : isDarkMode
+                  ? "bg-blue-600"
+                  : "bg-blue-500"
+              }`}
+            >
+              {isSystem ? (
+                <AlertCircle className="w-4 h-4" />
+              ) : (
+                <Bot className="w-4 h-4 text-white" />
+              )}
+            </div>
+          )}
+          <div
+            className={`px-4 py-3 rounded-2xl ${
+              isUser
+                ? isDarkMode
+                  ? "bg-blue-600 text-white"
+                  : "bg-blue-500 text-white"
+                : isSystem
+                ? isDarkMode
+                  ? "bg-yellow-900/20 text-yellow-200 border border-yellow-700"
+                  : "bg-yellow-50 text-yellow-800 border border-yellow-200"
+                : isDarkMode
+                ? "bg-gray-700 text-gray-200"
+                : "bg-gray-100 text-gray-900"
+            }`}
+          >
+            <div className="whitespace-pre-wrap">{message.text}</div>
+            {message.metadata && (
+              <div className="text-xs mt-2 opacity-70">
+                Exchange #{message.metadata.exchange_count} | Confidence:{" "}
+                {(message.metadata.confidence || 0).toFixed(2)}
+              </div>
+            )}
+          </div>
+          {isUser && (
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center">
+              <User className="w-4 h-4 text-white" />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+  const TypingIndicator = () => (
+    <div className="flex justify-start mb-4">
+      <div className="flex items-center space-x-3 max-w-xs">
+        <div
+          className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
+            isDarkMode ? "bg-blue-600" : "bg-blue-500"
+          }`}
+        >
+          <Bot className="w-4 h-4 text-white" />
+        </div>
+        <div
+          className={`px-4 py-3 rounded-2xl ${
+            isDarkMode ? "bg-gray-700" : "bg-gray-100"
+          }`}
+        >
+          <div className="flex space-x-1">
+            <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
+            <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce [animation-delay:0.1s]"></div>
+            <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce [animation-delay:0.2s]"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+  const PatientPanel = () => (
+    <div
+      className={`w-96 ${
+        isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"
+      } border-l flex flex-col`}
+    >
+      {/* Header */}
+      <div
+        className={`p-4 border-b ${
+          isDarkMode ? "border-gray-700" : "border-gray-200"
+        }`}
+      >
+        <h2
+          className={`text-lg font-semibold ${
+            isDarkMode ? "text-gray-200" : "text-gray-900"
+          } flex items-center`}
+        >
+          <FileText className="w-5 h-5 mr-2" />
+          Patient Record
+        </h2>
+        <div className="flex items-center mt-2 space-x-4">
+          <div
+            className={`text-sm ${
+              isDarkMode ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            Status: {sessionStatus}
+          </div>
+          <div className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
+            Confidence:{" "}
+            {Math.round(
+              ((confidenceScores.extraction + confidenceScores.validation) /
+                2) *
+                100
+            )}
+            %
+          </div>
+        </div>
+      </div>
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        {/* Personal Information */}
+        <div>
+          <h3
+            className={`text-sm font-medium ${
+              isDarkMode ? "text-gray-300" : "text-gray-700"
+            } mb-3 flex items-center`}
+          >
+            <User className="w-4 h-4 mr-2" />
+            Personal Information
+          </h3>
+          <div className="space-y-3">
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Name:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                }`}
+              >
+                {patientRecord.personal_info.full_name || "Not provided"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Date of Birth:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                } flex items-center`}
+              >
+                <Calendar className="w-3 h-3 mr-1" />
+                {patientRecord.personal_info.dob || "Not provided"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Phone:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                } flex items-center`}
+              >
+                <Phone className="w-3 h-3 mr-1" />
+                {patientRecord.personal_info.phone || "Not provided"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Address:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                } flex items-center`}
+              >
+                <MapPin className="w-3 h-3 mr-1" />
+                {patientRecord.personal_info.address || "Not provided"}
+              </p>
+            </div>
+          </div>
+        </div>
+        {/* Medical Information */}
+        <div>
+          <h3
+            className={`text-sm font-medium ${
+              isDarkMode ? "text-gray-300" : "text-gray-700"
+            } mb-3 flex items-center`}
+          >
+            <Heart className="w-4 h-4 mr-2" />
+            Medical Information
+          </h3>
+          <div className="space-y-3">
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Symptoms:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                }`}
+              >
+                {patientRecord.medical_info.current_symptoms?.length > 0
+                  ? patientRecord.medical_info.current_symptoms.join(", ")
+                  : "Not provided"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Duration:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                } flex items-center`}
+              >
+                <Clock className="w-3 h-3 mr-1" />
+                {patientRecord.medical_info.symptom_start_date ||
+                  "Not provided"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Severity:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                }`}
+              >
+                {patientRecord.medical_info.severity_level || "Not assessed"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Medications:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                }`}
+              >
+                {patientRecord.medical_info.previous_medications?.length > 0
+                  ? patientRecord.medical_info.previous_medications.join(", ")
+                  : "None reported"}
+              </p>
+            </div>
+            <div>
+              <span
+                className={`text-sm ${
+                  isDarkMode ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                Allergies:
+              </span>
+              <p
+                className={`text-sm mt-1 ${
+                  isDarkMode ? "text-gray-200" : "text-gray-900"
+                }`}
+              >
+                {patientRecord.medical_info.allergies?.length > 0
+                  ? patientRecord.medical_info.allergies.join(", ")
+                  : "None reported"}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Actions */}
+      <div
+        className={`p-4 border-t ${
+          isDarkMode ? "border-gray-700" : "border-gray-200"
+        } space-y-2`}
+      >
+        <button
+          onClick={handleGenerateSummary}
+          disabled={sessionStatus === "idle"}
+          className={`w-full px-4 py-2 rounded-lg transition-colors ${
+            sessionStatus === "idle"
+              ? `${
+                  isDarkMode
+                    ? "bg-gray-700 text-gray-500 cursor-not-allowed"
+                    : "bg-gray-200 text-gray-400 cursor-not-allowed"
+                }`
+              : `${
+                  isDarkMode
+                    ? "bg-blue-600 hover:bg-blue-700"
+                    : "bg-blue-500 hover:bg-blue-600"
+                } text-white`
+          }`}
+        >
+          Generate Summary
+        </button>
+        <button
+          onClick={handleResetChat}
+          className={`w-full px-4 py-2 rounded-lg transition-colors ${
+            isDarkMode
+              ? "border border-gray-600 hover:bg-gray-700 text-gray-300"
+              : "border border-gray-300 hover:bg-gray-50 text-gray-700"
+          }`}
+        >
+          New Session
+        </button>
+      </div>
+    </div>
+  );
+  // Connection error screen
+  if (!isConnected && connectionError) {
+    return (
+      <div
+        className={`h-screen flex items-center justify-center ${
+          isDarkMode ? "bg-gray-900" : "bg-gray-50"
+        }`}
+      >
+        <div
+          className={`text-center p-8 rounded-lg ${
+            isDarkMode ? "bg-gray-800" : "bg-white"
+          } shadow-lg`}
+        >
+          <AlertCircle
+            className={`w-16 h-16 mx-auto mb-4 ${
+              isDarkMode ? "text-red-400" : "text-red-500"
+            }`}
+          />
+          <h2
+            className={`text-xl font-semibold mb-2 ${
+              isDarkMode ? "text-gray-200" : "text-gray-900"
+            }`}
+          >
+            Connection Failed
+          </h2>
+          <p
+            className={`mb-4 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`}
+          >
+            {connectionError}
+          </p>
+          <button
+            onClick={initializeChat}
+            className={`px-4 py-2 rounded-lg ${
+              isDarkMode
+                ? "bg-blue-600 hover:bg-blue-700"
+                : "bg-blue-500 hover:bg-blue-600"
+            } text-white transition-colors`}
+          >
+            Retry Connection
+          </button>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div
+      className={`h-screen flex ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`}
+    >
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col">
+        {/* Header */}
+        <header
+          className={`${
+            isDarkMode
+              ? "bg-gray-800 border-gray-700"
+              : "bg-white border-gray-200"
+          } border-b px-6 py-4 flex items-center justify-between`}
+        >
+          <div className="flex items-center space-x-4">
+            <h1
+              className={`text-xl font-semibold ${
+                isDarkMode ? "text-gray-200" : "text-gray-900"
+              }`}
+            >
+              Medical Multi-Agent System
+            </h1>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div
+              className={`px-3 py-1 rounded-full text-sm flex items-center space-x-2 ${
+                isConnected
+                  ? isDarkMode
+                    ? "bg-green-900/50 text-green-300 border border-green-700"
+                    : "bg-green-100 text-green-700 border border-green-200"
+                  : isDarkMode
+                  ? "bg-red-900/50 text-red-300 border border-red-700"
+                  : "bg-red-100 text-red-700 border border-red-200"
+              }`}
+            >
+              {isConnected ? (
+                <CheckCircle className="w-3 h-3" />
+              ) : (
+                <AlertCircle className="w-3 h-3" />
+              )}
+              <span>
+                {isConnected ? "Connected to Qwen 3-4B" : "Disconnected"}
+              </span>
+            </div>
+            <button
+              onClick={() => setIsDarkMode(!isDarkMode)}
+              className={`p-2 rounded-lg ${
+                isDarkMode
+                  ? "hover:bg-gray-700 text-gray-300"
+                  : "hover:bg-gray-100 text-gray-600"
+              } transition-colors`}
+            >
+              {isDarkMode ? (
+                <Sun className="w-5 h-5" />
+              ) : (
+                <Moon className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+        </header>
+        <div className="flex-1 flex min-h-0 overflow-hidden">
+          {/* Chat Area */}
+          <div className="flex-1 flex flex-col">
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto p-6">
+              {messages.length === 0 && (
+                <div className="flex items-center justify-center h-full">
+                  <div className="text-center">
+                    <Bot
+                      className={`w-16 h-16 mx-auto mb-4 ${
+                        isDarkMode ? "text-gray-600" : "text-gray-400"
+                      }`}
+                    />
+                    <p
+                      className={`text-lg ${
+                        isDarkMode ? "text-gray-400" : "text-gray-600"
+                      }`}
+                    >
+                      Initializing Medical Multi-Agent System...
+                    </p>
+                  </div>
+                </div>
+              )}
+              {messages.map((message) => (
+                <MessageBubble key={message.id} message={message} />
+              ))}
+              {isTyping && <TypingIndicator />}
+              <div ref={messagesEndRef} />
+            </div>
+            {/* Input Area */}
+            <div
+              className={`p-6 border-t ${
+                isDarkMode ? "border-gray-700" : "border-gray-200"
+              }`}
+            >
+              <div className="flex space-x-4">
+                <input
+                  type="text"
+                  value={currentMessage}
+                  onChange={(e) => setCurrentMessage(e.target.value)}
+                  onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
+                  placeholder="Describe your symptoms or provide requested information..."
+                  disabled={!isConnected}
+                  className={`flex-1 px-4 py-3 rounded-lg border ${
+                    isDarkMode
+                      ? "bg-gray-700 border-gray-600 text-gray-200 placeholder-gray-400"
+                      : "bg-white border-gray-300 text-gray-900 placeholder-gray-500"
+                  } focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50`}
+                />
+                <button
+                  onClick={handleSendMessage}
+                  disabled={!currentMessage.trim() || isTyping || !isConnected}
+                  className={`px-6 py-3 rounded-lg transition-colors flex items-center space-x-2 ${
+                    !currentMessage.trim() || isTyping || !isConnected
+                      ? `${
+                          isDarkMode
+                            ? "bg-gray-700 text-gray-500"
+                            : "bg-gray-200 text-gray-400"
+                        } cursor-not-allowed`
+                      : `${
+                          isDarkMode
+                            ? "bg-blue-600 hover:bg-blue-700"
+                            : "bg-blue-500 hover:bg-blue-600"
+                        } text-white`
+                  }`}
+                >
+                  <Send className="w-4 h-4" />
+                  <span>{isTyping ? "Sending..." : "Send"}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+          {/* Patient Panel */}
+          <PatientPanel />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MedicalChatUI;

src/App.test.js ADDED Viewed

	@@ -0,0 +1,8 @@

+import { render, screen } from '@testing-library/react';
+import App from './App';
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/index.css ADDED Viewed

	@@ -0,0 +1,9 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Custom styles nếu cần */
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}

src/index.js ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/logo.svg ADDED Viewed

src/reportWebVitals.js ADDED Viewed

	@@ -0,0 +1,13 @@

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+export default reportWebVitals;

src/services/apiService.js ADDED Viewed

	@@ -0,0 +1,101 @@

+/**
+ * API Service for Medical Multi-Agent System
+ * Handles communication with backend Web API
+ */
+const API_BASE_URL = process.env.REACT_APP_API_URL || "http://localhost:8000";
+class ApiService {
+  constructor() {
+    this.baseUrl = API_BASE_URL;
+  }
+  /**
+   * Generic API call wrapper
+   */
+  async apiCall(endpoint, options = {}) {
+    const url = `${this.baseUrl}${endpoint}`;
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers,
+      },
+      ...options,
+    };
+    try {
+      const response = await fetch(url, config);
+      if (!response.ok) {
+        const errorData = await response
+          .json()
+          .catch(() => ({ detail: "Unknown error" }));
+        throw new Error(
+          `API Error: ${response.status} - ${
+            errorData.detail || response.statusText
+          }`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("API call failed:", error);
+      throw error;
+    }
+  }
+  /**
+   * Health check
+   */
+  async healthCheck() {
+    return this.apiCall("/api/health");
+  }
+  /**
+   * Start new chat session
+   */
+  async startChat() {
+    return this.apiCall("/api/chat/start", {
+      method: "POST",
+    });
+  }
+  /**
+   * Send message to AI
+   */
+  async sendMessage(message) {
+    return this.apiCall("/api/chat/send", {
+      method: "POST",
+      body: JSON.stringify({ message }),
+    });
+  }
+  /**
+   * Get current session status and patient record
+   */
+  async getSessionStatus() {
+    return this.apiCall("/api/chat/status");
+  }
+  /**
+   * Generate doctor summary
+   */
+  async generateSummary() {
+    return this.apiCall("/api/chat/summary", {
+      method: "POST",
+    });
+  }
+  /**
+   * Reset current session
+   */
+  async resetSession() {
+    return this.apiCall("/api/chat/reset", {
+      method: "DELETE",
+    });
+  }
+}
+// Export singleton instance
+export const apiService = new ApiService();
+export default apiService;

src/setupTests.js ADDED Viewed

	@@ -0,0 +1,5 @@

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';