diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index 98faad15..6aa43dc9 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -217,7 +217,7 @@ function ChatInputArea(props: ChatInputProps) { e.preventDefault()} className={`${props.isMobileWidth} ? 'w-[100vw] : w-full`}> - + No matching commands. diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx index e828c1a7..dc44b7a9 100644 --- a/src/interface/web/app/components/chatMessage/chatMessage.tsx +++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx @@ -9,7 +9,7 @@ import React, { useEffect, useRef, useState } from 'react'; import 'katex/dist/katex.min.css'; import 'highlight.js/styles/github.css' -import { ReferencePanelData, TeaserReferencesSection, constructAllReferences } from '../referencePanel/referencePanel'; +import { TeaserReferencesSection, constructAllReferences } from '../referencePanel/referencePanel'; import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture, ArrowRight, SpeakerHifi } from '@phosphor-icons/react'; import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'; @@ -140,17 +140,6 @@ function FeedbackButtons({ uquery, kquery }: { uquery: string, kquery: string }) ) } -// WHAT TO DO WHEN CLICK ON KHOJ MESSAGE -function onClickMessage( - event: React.MouseEvent, - referencePanelData: ReferencePanelData, - setReferencePanelData: Function, - setShowReferencePanel: Function) { - - setReferencePanelData(referencePanelData); - setShowReferencePanel(true); -} - interface ChatMessageProps { chatMessage: SingleChatMessage; isMobileWidth: boolean; @@ -215,25 +204,36 @@ export function TrainOfThought(props: TrainOfThoughtProps) { export default function ChatMessage(props: ChatMessageProps) { const [copySuccess, setCopySuccess] = useState(false); const [isHovering, setIsHovering] = useState(false); - - let message = props.chatMessage.message; - - // Replace LaTeX delimiters with placeholders - message = message.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN') - .replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET'); - - if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image2") { - message = `![generated_image](${message})\n\n${props.chatMessage.intent["inferred-queries"][0]}` - } - - let markdownRendered = md.render(message); - - // Replace placeholders with LaTeX delimiters - markdownRendered = markdownRendered.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)') - .replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]'); - + const [markdownRendered, setMarkdownRendered] = useState(''); const messageRef = useRef(null); + useEffect(() => { + let message = props.chatMessage.message; + + // Replace LaTeX delimiters with placeholders + message = message.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN') + .replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET'); + + if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image2") { + message = `![generated_image](${message})\n\n${props.chatMessage.intent["inferred-queries"][0]}` + } + + let markdownRendered = md.render(message); + + // Replace placeholders with LaTeX delimiters + markdownRendered = markdownRendered.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)') + .replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]'); + setMarkdownRendered(markdownRendered); + }, [props.chatMessage.message]); + + useEffect(() => { + if (copySuccess) { + setTimeout(() => { + setCopySuccess(false); + }, 2000); + } + }, [copySuccess]); + useEffect(() => { if (messageRef.current) { const preElements = messageRef.current.querySelectorAll('pre > .hljs'); @@ -260,8 +260,12 @@ export default function ChatMessage(props: ChatMessageProps) { } }, [markdownRendered]); + if (!props.chatMessage.message) { + return null; + } + function renderTimeStamp(timestamp: string) { - const messageDateTime = new Date(timestamp); + const messageDateTime = new Date(timestamp + 'Z'); const currentDataTime = new Date(); const timeDiff = currentDataTime.getTime() - messageDateTime.getTime(); @@ -270,24 +274,17 @@ export default function ChatMessage(props: ChatMessageProps) { } if (timeDiff < 3600000) { - return `${Math.floor(timeDiff / 60000)}m ago`; + // Using Math.round for closer to actual time representation + return `${Math.round(timeDiff / 60000)}m ago`; } if (timeDiff < 86400000) { - return `${Math.floor(timeDiff / 3600000)}h ago`; + return `${Math.round(timeDiff / 3600000)}h ago`; } - return `${Math.floor(timeDiff / 86400000)}d ago`; + return `${Math.round(timeDiff / 86400000)}d ago`; } - useEffect(() => { - if (copySuccess) { - setTimeout(() => { - setCopySuccess(false); - }, 2000); - } - }, [copySuccess]); - function constructClasses(chatMessage: SingleChatMessage) { let classes = [styles.chatMessageContainer]; classes.push(styles[chatMessage.by]); diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx index ee02104d..6263adf6 100644 --- a/src/interface/web/app/components/referencePanel/referencePanel.tsx +++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx @@ -102,7 +102,6 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) { const [isHovering, setIsHovering] = useState(false); if (!props.link) { - console.log("invalid link", props); return null; } diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx index 4a275527..1d532e1b 100644 --- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx +++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx @@ -45,7 +45,7 @@ import { import { ScrollArea } from "@/components/ui/scroll-area"; -import { ArrowRight, ArrowLeft, ArrowDown, Spinner, Check, FolderPlus } from "@phosphor-icons/react"; +import { ArrowRight, ArrowLeft, ArrowDown, Spinner, Check, FolderPlus, DotsThreeVertical } from "@phosphor-icons/react"; interface ChatHistory { conversation_id: string; @@ -496,7 +496,7 @@ function ChatSessionActionMenu(props: ChatSessionActionMenuProps) { setIsOpen(open)} open={isOpen}> - : +