From 4a1224eb48bd725f2d5ab48492cec07bf14ca1a0 Mon Sep 17 00:00:00 2001
From: leehk <leehongkai@gmail.com>
Date: Wed, 9 Apr 2025 15:02:27 +0800
Subject: [PATCH] update

---
 app/frontend/src/App.test.tsx |  21 ++++++
 app/frontend/src/App.tsx      | 118 +++++++++++++++++++++++++---------
 app/llmops/config.yaml        |   2 +-
 3 files changed, 109 insertions(+), 32 deletions(-)
 create mode 100644 app/frontend/src/App.test.tsx

diff --git a/app/frontend/src/App.test.tsx b/app/frontend/src/App.test.tsx
new file mode 100644
index 0000000..310a534
--- /dev/null
+++ b/app/frontend/src/App.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import App from './App';
+import { vi } from 'vitest';
+
+it('renders initial state', () => {
+  render(<App />);
+  expect(screen.getByText('Simple Chatbot')).toBeInTheDocument();
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /send/i })).toBeInTheDocument();
+});
+
+// it('sends a message', () => {
+//   const mockSend = vi.fn();
+//   const mockSocket = { send: mockSend };
+//   render(<App />);
+//   const inputElement = screen.getByRole('textbox');
+//   const buttonElement = screen.getByRole('button', { name: /send/i });
+//   fireEvent.change(inputElement, { target: { value: 'Hello' } });
+//   fireEvent.keyDown(inputElement, { key: 'Enter', code: 'Enter' }); // Simulate Enter key press
+//   expect(mockSend).toHaveBeenCalled();
+// });
\ No newline at end of file
diff --git a/app/frontend/src/App.tsx b/app/frontend/src/App.tsx
index 48f3fa8..0a9f2cf 100644
--- a/app/frontend/src/App.tsx
+++ b/app/frontend/src/App.tsx
@@ -1,34 +1,90 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import React, { useState, useEffect, useRef } from 'react';
 
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="h-6 w-6" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="h-6 w-6" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="p-4 bg-gray-100 rounded shadow">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p className="text-gray-700">
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="text-gray-500 text-sm">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+interface Message {
+  sender: 'user' | 'bot';
+  text: string;
 }
 
-export default App
+const App: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [socket, setSocket] = useState<WebSocket | null>(null);
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    mounted.current = true;
+    const ws = new WebSocket('ws://localhost:8000/ws');
+    setSocket(ws);
+    ws.onopen = () => {
+      console.log('WebSocket connection opened');
+    };
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'message' && data.payload && mounted.current) {
+          setMessages((prevMessages) => {
+            const lastMessage = prevMessages[prevMessages.length - 1];
+            if (lastMessage && lastMessage.sender === 'bot') {
+              return [...prevMessages.slice(0, -1), { ...lastMessage, text: lastMessage.text + data.payload }];
+            } else {
+              return [...prevMessages, { sender: 'bot', text: data.payload }];
+            }
+          });
+        } else {
+          console.error('Unexpected message format:', data);
+        }
+      } catch (error) {
+        console.error('Error parsing message:', error);
+      }
+    };
+    ws.onclose = () => {
+      console.log('WebSocket connection closed');
+    };
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+    return () => {
+      mounted.current = false;
+      ws.close();
+    };
+  }, []);
+
+  const sendMessage = () => {
+    if (newMessage.trim() !== '') {
+      const message = [{ role: 'user', content: newMessage }];
+      setMessages((prevMessages) => [...prevMessages, { sender: 'user', text: newMessage }]);
+      socket?.send(JSON.stringify(message));
+      setNewMessage('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-100">
+      <div className="p-4">
+        <h1 className="text-3xl font-bold text-center text-gray-800">Simple Chatbot</h1>
+      </div>
+      <div className="flex-grow overflow-y-auto p-4">
+        {messages.map((msg, index) => (
+          <div key={index} className={`p-4 rounded-lg mb-2 ${msg.sender === 'user' ? 'bg-blue-100 text-blue-800' : 'bg-gray-200 text-gray-800'}`}>
+            {msg.text}
+          </div>
+        ))}
+      </div>
+      <div className="p-4 border-t border-gray-300">
+        <div className="flex">
+          <input
+            type="text"
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            className="flex-grow p-2 border border-gray-300 rounded-lg mr-2"
+          />
+          <button onClick={sendMessage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/app/llmops/config.yaml b/app/llmops/config.yaml
index eaaf910..af642d2 100644
--- a/app/llmops/config.yaml
+++ b/app/llmops/config.yaml
@@ -15,7 +15,7 @@ rag:
 testing:
   query: "如何治疗乳腺癌?"
 evaluation:
-  evaluation_dataset_csv_path: "../../../../data/qa_dataset_20250401b.csv"
+  evaluation_dataset_csv_path: "../../../../data/qa_dataset_20250409_onlyBreast.csv"
   evaluation_dataset_column_question: question
   evaluation_dataset_column_answer: answer
   ls_chat_model_provider: