wip

SimiaCryptus · Nov 26, 2024 · 2fe8155 · 2fe8155
1 parent e34f7be
commit 2fe8155
Show file tree

Hide file tree

Showing 11 changed files with 420 additions and 304 deletions.
diff --git a/webapp/chat-app/package.json b/webapp/chat-app/package.json
@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dompurify": "^3.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^8.1.3",
@@ -19,6 +20,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/dompurify": "^3.2.0",
     "@types/node": "^18.0.0",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",

diff --git a/webapp/chat-app/src/components/ChatInterface.tsx b/webapp/chat-app/src/components/ChatInterface.tsx
@@ -7,6 +7,12 @@ import MessageList from './MessageList';
 import InputArea from './InputArea';
 import websocket from '@services/websocket';
 
+interface WebSocketMessage {
+    data: string;
+    isHtml: boolean;
+    timestamp: number;
+}
+
 interface ChatInterfaceProps {
     sessionId?: string;
     websocket: typeof websocket;
@@ -32,10 +38,16 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
     useEffect(() => {
         console.log('[ChatInterface] Setting up message handler for sessionId:', sessionId);
 
-        const handleMessage = (data: string) => {
+        const handleMessage = (data: WebSocketMessage) => {
             console.log('[ChatInterface] Received message:', data);
+            // If data is an object with raw data property, use that instead
+            const messageData = typeof data === 'object' ? data.data : data;
+            if (!messageData || typeof messageData !== 'string') {
+                console.warn('[ChatInterface] Invalid message format received:', data);
+                return;
+            }
 
-            const [id, version, content] = data.split(',');
+            const [id, version, content] = messageData.split(',');
             const timestamp = Date.now();
             const messageObject = {
                 id: `${id}-${timestamp}`,

diff --git a/webapp/chat-app/src/components/Menu/Menu.tsx b/webapp/chat-app/src/components/Menu/Menu.tsx
@@ -139,6 +139,12 @@ export const Menu: React.FC = () => {
                     <DropdownContent>
                         <DropdownItem onClick={() => handleModalOpen('privacy')}>Privacy Policy</DropdownItem>
                         <DropdownItem onClick={() => handleModalOpen('tos')}>Terms of Service</DropdownItem>
+                    </DropdownContent>
+                </Dropdown>
+
+                <Dropdown>
+                    <DropButton onClick={() => console.log('About menu clicked')}>Config</DropButton>
+                    <DropdownContent>
                         <WebSocketMenu/>
                     </DropdownContent>
                 </Dropdown>

diff --git a/webapp/chat-app/src/components/MessageList.tsx b/webapp/chat-app/src/components/MessageList.tsx
@@ -50,9 +50,9 @@ const MessageList: React.FC = () => {
       {messages.map((message) => {
         logger.debug('MessageList - Rendering message', message);
         return (
-          <MessageItem key={`${message.id}-${message.timestamp}`} type={message.type}>
-            {message.content}
-          </MessageItem>
+            <MessageItem key={`${message.id}-${message.timestamp}`} type={message.type}>
+              <div className="message-body" dangerouslySetInnerHTML={{__html: message.content}}/>
+            </MessageItem>
         );
       })}
     </MessageListContainer>

diff --git a/webapp/chat-app/src/hooks/useWebSocket.ts b/webapp/chat-app/src/hooks/useWebSocket.ts
@@ -1,30 +1,51 @@
 import {useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import {addMessage} from '../store/slices/messageSlice';
 import WebSocketService from '../services/websocket';
+import {Message} from "../types";
 
 export const useWebSocket = (sessionId: string) => {
     const [isConnected, setIsConnected] = useState(false);
+    const dispatch = useDispatch();
 
     useEffect(() => {
-        console.log(`[WebSocket] Initializing with sessionId: ${sessionId}`);
+        console.debug(`[WebSocket] Initializing with sessionId: ${sessionId}`);
+        if (!sessionId) {
+            console.debug('[WebSocket] No sessionId provided, skipping connection');
+            return;
+        }
 
-        const handleConnection = () => {
-            console.log('[WebSocket] Connected successfully');
-            setIsConnected(true);
+        const handleMessage = (message: Message) => {
+            if (message.isHtml) {
+                console.debug('[WebSocket] Processing HTML message');
+                const htmlMessage = {
+                    id: Date.now().toString(),
+                    content: message.content,
+                    type: 'response' as const,
+                    timestamp: message.timestamp,
+                    isHtml: true,
+                    rawHtml: message.rawHtml,
+                    version: '1.0',
+                    sanitized: false,
+                };
+                console.debug('[WebSocket] Dispatching HTML message:', htmlMessage);
+                dispatch(addMessage(htmlMessage));
+            }
         };
 
-        const handleDisconnection = () => {
+        const handleConnectionChange = (connected: boolean) => {
             console.log('[WebSocket] Disconnected');
-            setIsConnected(false);
+            setIsConnected(connected);
         };
 
-        WebSocketService.addMessageHandler(handleConnection);
-        WebSocketService.addMessageHandler(handleDisconnection);
+        WebSocketService.addMessageHandler(handleMessage);
+        WebSocketService.addConnectionHandler(handleConnectionChange);
         WebSocketService.connect(sessionId);
 
         return () => {
             console.log('[WebSocket] Cleaning up connection');
-            WebSocketService.removeMessageHandler(handleConnection);
-            WebSocketService.removeMessageHandler(handleDisconnection);
+            WebSocketService.removeMessageHandler(handleMessage);
+            WebSocketService.removeConnectionHandler(handleConnectionChange);
             WebSocketService.disconnect();
         };
     }, [sessionId]);

diff --git a/webapp/chat-app/src/index.tsx b/webapp/chat-app/src/index.tsx
@@ -10,21 +10,21 @@ console.log('Application initializing...');
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
-  console.error('Failed to find root element in DOM');
-  throw new Error('Failed to find the root element');
+    console.error('Failed to find root element in DOM');
+    throw new Error('Failed to find the root element');
 }
 
 const root = createRoot(rootElement);
 console.log('React root created successfully');
 try {
 
-root.render(
-  <Provider store={store}>
-    <App />
-  </Provider>
-);
-  console.log('Application rendered successfully');
+    root.render(
+        <Provider store={store}>
+            <App/>
+        </Provider>
+    );
+    console.log('Application rendered successfully');
 } catch (error) {
-  console.error('Failed to render application:', error);
-  throw error;
+    console.error('Failed to render application:', error);
+    throw error;
 }