diff --git a/App/frontend-app/src/components/chat/chatRoom.tsx b/App/frontend-app/src/components/chat/chatRoom.tsx index e726c601..8b187d56 100644 --- a/App/frontend-app/src/components/chat/chatRoom.tsx +++ b/App/frontend-app/src/components/chat/chatRoom.tsx @@ -50,7 +50,7 @@ interface ChatRoomProps { export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDocument, disableOptionsPanel, clearChatFlag }: ChatRoomProps) { const customStyles = useStyles(); const { t } = useTranslation(); - const [chatSessionId, setChatSessionId] = useState(null); + const [chatSessionId, setChatSessionId] = useState(null); const [isLoading, setIsLoading] = useState(false); const [disableSources, setDisableSources] = useState(false); const [error, setError] = useState(); @@ -99,8 +99,8 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc useEffect(() => { handleModelChange(DefaultChatModel) }, []); - - // Effect to clear chat when clearChat prop changes + + // Effect to clear chat when clearChat prop changes useEffect(() => { if (clearChatFlag) { clearChat(); @@ -108,7 +108,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc }, [clearChatFlag]); // Runs whenever clearChat changes - + const chatContainerRef = useRef(null); function scrollToBottom() { if (chatContainerRef.current) { @@ -128,23 +128,23 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc setTextareaKey(prev => prev + 1); setDisableSources(true); setIsLoading(true); - + // A simple function to check if the text contains Markdown const isMarkdown = (text: string) => { const markdownPattern = /(^|\s)(#{1,6}|\*\*|__|[-*]|\d+\.\s|\[.*\]\(.*\)|```|`[^`]*`)/; return markdownPattern.test(text); - }; + }; const userTimestamp = new Date(); // Ensure we have a chatSessionId or create one if null/undefined - - + + let currentSessionId = chatSessionId; // Get the current value of chatSessionId if (!currentSessionId) { const newSessionId = uuidv4(); // Generate a new UUID if no session exists setChatSessionId(newSessionId); // Save it for future renders currentSessionId = newSessionId; // Immediately use the new session ID in this function - + } const markdownToHtmlString = (markdown: string) => { return renderToStaticMarkup({markdown}); @@ -170,7 +170,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc | Total NPLs sold by Enterprises through December 2023 | 168,364 | FHFA Non-Performing Loan Sales Report | Page 2 | | Average delinquency of NPLs sold | 2.8 years | FHFA Non-Performing Loan Sales Report | Page 2 | | Average current mark-to-market LTV ratio of NPLs | 83% | FHFA Non-Performing Loan Sales Report | Page 2 |`; - + const htmlString = await marked.parse(markdown); const htmlString2 = markdownToHtmlString(markdown); @@ -183,18 +183,18 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc }], ]); - - + + let filterByDocumentIds: string[] = []; - - + + const transformDocuments = (documents: any[]) => { return documents.map(doc => doc.documentId); // Extracting documentId from each document }; const formattedDocuments = transformDocuments(selectedDocuments); - + if (button === "Selected Document" && selectedDocument) { filterByDocumentIds = [selectedDocument[0].documentId]; @@ -205,13 +205,13 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc } try { - - - + + + const request: ChatRequest = { Question: question, chatSessionId: currentSessionId, - DocumentIds: button === "All Documents" ? [] : formattedDocuments + DocumentIds: button === "All Documents" ? [] : formattedDocuments // cha: history, // options: { // model: model, @@ -221,11 +221,11 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc // }, // filterByDocumentIds: filterByDocumentIds, }; - - + + const response: ChatApiResponse = await Completion(request); - - + + setIsLoading(false); @@ -233,13 +233,13 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc try { if (response && response.answer) { - + const formattedAnswer = removeNewlines(response.answer) const chatResp = await marked.parse(formattedAnswer) // Convert to HTML if Markdown detected - - - - + + + + // Update the conversation with the formatted answer setConversationAnswers((prevAnswers) => { const newAnswers = [...prevAnswers]; @@ -279,7 +279,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc setChatSessionId(null); }; - const handleModelChange = (model: string) => { + const handleModelChange = (model: string) => { setModel(model); }; @@ -293,7 +293,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc }; function handleSend(ev: TextareaSubmitEvents, data: TextareaValueData) { - if (data.value.trim() !='') { + if (data.value.trim() != '') { makeApiRequest(data.value); } } @@ -340,10 +340,10 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc button === "Selected Documents" ? selectedDocuments.map((document) => document.documentId) : button === "Search Results" - ? searchResultDocuments.map((document) => document.documentId) - : button === "Selected Document" - ? [selectedDocument[0]?.documentId || ""] - : [], + ? searchResultDocuments.map((document) => document.documentId) + : button === "Selected Document" + ? [selectedDocument[0]?.documentId || ""] + : [], groundTruthAnswer: "", documentURLs: [], chunkTexts: [], @@ -482,8 +482,12 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc {response.suggestingQuestions.map((followUp, index) => ( handleFollowUpQuestion(followUp)} + className={`!mr-2 !mt-2 !text-base ${isLoading ? "pointer-events-none text-gray-400" : ""}`} + onClick={() => { + if (!isLoading) { + handleFollowUpQuestion(followUp); + } + }} > {followUp} @@ -594,11 +598,11 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc contentAfter={undefined} /> - + ); } function uuidv4() { - return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); });