diff --git a/llm-fe/public/favicon.jpg b/llm-fe/public/favicon.jpg new file mode 100644 index 0000000..bb90219 Binary files /dev/null and b/llm-fe/public/favicon.jpg differ diff --git a/llm-fe/public/index.html b/llm-fe/public/index.html index 2538616..2d68acb 100644 --- a/llm-fe/public/index.html +++ b/llm-fe/public/index.html @@ -1,21 +1,19 @@ - - - - - - - - - - - Chat by AI ML Operations. LCC - - -
- - - + + + \ No newline at end of file diff --git a/llm-fe/src/llm-fe/components/ConversationCard/ConversationCard.tsx b/llm-fe/src/llm-fe/components/ConversationCard/ConversationCard.tsx index 50580a0..b34b3d9 100644 --- a/llm-fe/src/llm-fe/components/ConversationCard/ConversationCard.tsx +++ b/llm-fe/src/llm-fe/components/ConversationCard/ConversationCard.tsx @@ -9,16 +9,16 @@ type ConversationCardProps = { title: string, conversation_id: number | undefined, setSelectConversation: Dispatch>; // state function to set the selected conversation - deleteConversation: (conversation_id: number | undefined)=>void; + deleteConversation: (conversation_id: number | undefined) => void; selectedConversation: number | undefined; }; -const ConversationCard = ({title, conversation_id, setSelectConversation, deleteConversation, selectedConversation}: ConversationCardProps): JSX.Element => { - const backgroundColor = selectedConversation===conversation_id ? '#ffffff' : 'lightgray'; +const ConversationCard = ({ title, conversation_id, setSelectConversation, deleteConversation, selectedConversation }: ConversationCardProps): JSX.Element => { + const backgroundColor = selectedConversation === conversation_id ? '#ffffff' : 'lightgray'; return ( // - + // // {setSelectConversation(conversation_id)}} style={{width: "80%", margin:'1px'}}> // {title} @@ -30,39 +30,39 @@ const ConversationCard = ({title, conversation_id, setSelectConversation, delete // - - - {setSelectConversation(conversation_id)}} - key={conversation_id} - color={'white'} - fontWeight={selectedConversation===conversation_id ? 'bold' : 'regular'} - display="block" - variant="caption" - textTransform="uppercase" - mt={2} - mb={1} - ml={1} - noWrap - > - {title} - - - - - - deleteConversation(conversation_id)} - - - - - > - - - + + { setSelectConversation(conversation_id) }} + key={conversation_id} + color={'white'} + fontWeight={selectedConversation === conversation_id ? 'bold' : 'regular'} + display="block" + variant="caption" + textTransform="uppercase" + mt={2} + mb={1} + ml={1} + noWrap + > + {title} + + + + + + + deleteConversation(conversation_id)} + + + + + > + + + // deleteConversation(conversation_id)}> // // - + // // - - + + // ); } diff --git a/llm-fe/src/llm-fe/contexts/WebSocketContext.js b/llm-fe/src/llm-fe/contexts/WebSocketContext.js index e9c4a76..4f5d579 100644 --- a/llm-fe/src/llm-fe/contexts/WebSocketContext.js +++ b/llm-fe/src/llm-fe/contexts/WebSocketContext.js @@ -69,13 +69,15 @@ function WebSocketProvider({ children }) { /* WS initialization and cleanup */ if (account) { ws.current = new WebSocket(`ws://localhost:8011/ws/chat_again/`); + //ws.current = new WebSocket(`ws://localhost:8011/ws/conditional_chat/`); //ws.current = new WebSocket('wss://chatbackend.aimloperations.com/ws/chat_again/') + //ws.current = new WebSocket('wss://chatbackend.aimloperations.com/ws/conditional_chat/') //ws.current = process.env.REACT_APP_BACKEND_WS_API_BASE_URL; ws.current.onopen = () => { setSocket(ws.current); }; - ws.current.onclose = () => {}; + ws.current.onclose = () => { }; ws.current.onmessage = (message) => { const data = message.data; // lookup for an existing chat in which this message belongs diff --git a/llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx b/llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx index 5cbf070..e094490 100644 --- a/llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx +++ b/llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from "react"; import styled, { ThemeContext } from "styled-components"; import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; -import { AttachFile, Send } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed +import { AttachFile, Delete, Send } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed import Markdown from "markdown-to-jsx"; import { @@ -155,10 +155,10 @@ const ConversationItem = styled.div<{ $active: boolean }>` background: ${(props) => (props.$active ? props.theme.main + "33" : "transparent")}; color: ${(props) => (props.$active ? props.theme.colors.text : props.theme.darkMode ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)")}; transition: all 0.2s ease; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; border: 1px solid ${(props) => (props.$active ? props.theme.main + "66" : "transparent")}; + display: flex; + justify-content: space-between; + align-items: center; &:hover { background: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}; @@ -166,6 +166,15 @@ const ConversationItem = styled.div<{ $active: boolean }>` } `; +const ConversationTitle = styled.span` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 0; + margin-right: 8px; +`; + const NewChatButton = styled.button` width: 100%; padding: 0.8rem; @@ -221,7 +230,7 @@ const AsyncDashboardInner = ({ }): JSX.Element => { useContext(WebSocketContext); const { account } = useContext(AccountContext); - const { conversations, selectedConversation, setSelectedConversation } = + const { conversations, selectedConversation, setSelectedConversation, deleteConversation } = useContext(ConversationContext); const { @@ -284,7 +293,19 @@ const AsyncDashboardInner = ({ }): JSX.Element => { $active={convo.id === selectedConversation} onClick={() => setSelectedConversation(convo.id)} > - {convo.title || "New Conversation"} + {convo.title || "New Conversation"} + {convo.id === selectedConversation && ( + { + e.stopPropagation(); + deleteConversation(convo.id); + }} + style={{ padding: 4, width: 'auto', height: 'auto' }} + > + + + )} ))} @@ -345,7 +366,7 @@ const AsyncDashboardInner = ({ }): JSX.Element => { { const file = event.target.files?.[0]; if (file) {