Ingest new format for server sent events within the HTTP streamed response

- Note that the SSR for next doesn't support rendering on the client-side, so it'll only update it one big chunk
- Fix unique key error in the chatmessage history for incoming messages
- Remove websocket value usage in the chat history side panel
- Remove other websocket code from the chat page

src/interface/web/app/components/chatHistory/chatHistory.tsx

@@ -17,6 +17,7 @@ import { Lightbulb } from "@phosphor-icons/react";
 import ProfileCard from '../profileCard/profileCard';
 import { getIconFromIconName } from '@/app/common/iconUtils';
 import { AgentData } from '@/app/agents/page';
+import React from 'react';
 
 interface ChatResponse {
     status: string;
@@ -120,7 +121,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
     }, [props.conversationId]);
 
     useEffect(() => {
-        console.log(props.incomingMessages);
         if (props.incomingMessages) {
             const lastMessage = props.incomingMessages[props.incomingMessages.length - 1];
             if (lastMessage && !lastMessage.completed) {
@@ -195,7 +195,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                     setFetchingData(false);
                 } else {
                     if (chatData.response.agent && chatData.response.conversation_id) {
-                        const chatMetadata ={
+                        const chatMetadata = {
                             chat: [],
                             agent: chatData.response.agent,
                             conversation_id: chatData.response.conversation_id,
@@ -256,7 +256,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
             <div ref={ref}>
                 <div className={styles.chatHistory} ref={chatHistoryRef}>
                     <div ref={sentinelRef} style={{ height: '1px' }}>
-                        {fetchingData && <InlineLoading message="Loading Conversation" className='opacity-50'/>}
+                        {fetchingData && <InlineLoading message="Loading Conversation" className='opacity-50' />}
                     </div>
                     {(data && data.chat) && data.chat.map((chatMessage, index) => (
                         <ChatMessage
@@ -271,7 +271,8 @@ export default function ChatHistory(props: ChatHistoryProps) {
                     {
                         props.incomingMessages && props.incomingMessages.map((message, index) => {
                             return (
-                                <>
+                                <React.Fragment key={`incomingMessage${index}`}>
+
                                     <ChatMessage
                                         key={`${index}outgoing`}
                                         isMobileWidth={isMobileWidth}
@@ -314,7 +315,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                         borderLeftColor={`${data?.agent.color}-500`}
                                         isLastMessage={true}
                                     />
-                                </>
+                                </React.Fragment>
                             )
                         })
                     }

src/interface/web/app/components/chatMessage/chatMessage.module.css

@@ -123,6 +123,11 @@ div.trainOfThought.primary p {
     color: inherit;
 }
 
+div.trainOfThoughtElement {
+    display: grid;
+    grid-template-columns: auto 1fr;
+}
+
 @media screen and (max-width: 768px) {
     div.youfullHistory {
         max-width: 90%;

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -10,7 +10,7 @@ import 'katex/dist/katex.min.css';
 
 import { TeaserReferencesSection, constructAllReferences } from '../referencePanel/referencePanel';
 
-import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture, SpeakerHigh, MagnifyingGlass, Pause } from '@phosphor-icons/react';
+import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture, SpeakerHigh, MagnifyingGlass, Pause, Palette } from '@phosphor-icons/react';
 
 import * as DomPurify from 'dompurify';
 import { InlineLoading } from '../loading/loading';
@@ -180,10 +180,14 @@ function chooseIconFromHeader(header: string, iconColor: string) {
         return <MagnifyingGlass className={`${classNames}`} />;
     }
 
-    if (compareHeader.includes("summary") || compareHeader.includes("summarize")) {
+    if (compareHeader.includes("summary") || compareHeader.includes("summarize") || compareHeader.includes("enhanc")) {
         return <Aperture className={`${classNames}`} />;
     }
 
+    if (compareHeader.includes("paint")) {
+        return <Palette className={`${classNames}`} />;
+    }
+
     return <Brain className={`${classNames}`} />;
 }
 
@@ -195,7 +199,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
     const icon = chooseIconFromHeader(header, iconColor);
     let markdownRendered = DomPurify.sanitize(md.render(props.message));
     return (
-        <div className={`flex items-center ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
+        <div className={`${styles.trainOfThoughtElement} items-center ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
             {icon}
             <div dangerouslySetInnerHTML={{ __html: markdownRendered }} />
         </div>

src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx

@@ -320,7 +320,6 @@ function FilesMenu(props: FilesMenuProps) {
 }
 
 interface SessionsAndFilesProps {
-    webSocketConnected?: boolean;
     setEnabled: (enabled: boolean) => void;
     subsetOrganizedData: GroupedChatHistory | null;
     organizedData: GroupedChatHistory | null;
@@ -591,12 +590,6 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
     );
 }
 
-interface UserProfileProps {
-    userProfile: UserProfile;
-    webSocketConnected?: boolean;
-    collapsed: boolean;
-}
-
 const fetchChatHistory = async (url: string) => {
     const response = await fetch(url, {
         method: 'GET',
@@ -618,7 +611,6 @@ export const useChatSessionsFetchRequest = (url: string) => {
 };
 
 interface SidePanelProps {
-    webSocketConnected?: boolean;
     conversationId: string | null;
     uploadedFiles: string[];
     isMobileWidth: boolean;
@@ -691,7 +683,6 @@ export default function SidePanel(props: SidePanelProps) {
                                 </DrawerHeader>
                                 <div className={`${styles.panelWrapper}`}>
                                     <SessionsAndFiles
-                                        webSocketConnected={props.webSocketConnected}
                                         setEnabled={setEnabled}
                                         subsetOrganizedData={subsetOrganizedData}
                                         organizedData={organizedData}
@@ -724,7 +715,6 @@ export default function SidePanel(props: SidePanelProps) {
                 authenticatedData && !props.isMobileWidth && enabled &&
                 <div className={`${styles.panelWrapper}`}>
                     <SessionsAndFiles
-                        webSocketConnected={props.webSocketConnected}
                         setEnabled={setEnabled}
                         subsetOrganizedData={subsetOrganizedData}
                         organizedData={organizedData}