Spaces:

preview
/

medical-summarizer

Running

App Files Files Community

ntphuc149 commited on Sep 22, 2025

Commit

6733769

verified ·

1 Parent(s): be55f39

Upload 21 files

Browse files

Files changed (17) hide show

.env.example +8 -0
README.md +0 -81
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

README.md CHANGED Viewed

@@ -1,81 +0,0 @@
----
-title: Medical Summarizer
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: build/index.html
----
-# Getting Started with Create React App
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-## Available Scripts
-In the project directory, you can run:
-### `npm start`
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-### `npm test`
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-### `npm run build`
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-### `npm run eject`
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-## Learn More
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-To learn React, check out the [React documentation](https://reactjs.org/).
-### Code Splitting
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-### Analyzing the Bundle Size
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-### Making a Progressive Web App
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-### Advanced Configuration
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-### Deployment
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-### `npm run build` fails to minify
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

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';