klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 21:29:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update dark mode, fix chat message time stamp, fix rendering for new message

Browse Source
This commit is contained in:
sabaimran
2024-07-09 20:50:20 +05:30
parent 0c6b6de09e
commit 998e2aec30
5 changed files with 49 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -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<any>,
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<boolean>(false);
const [isHovering, setIsHovering] = useState<boolean>(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<string>('');
const messageRef = useRef<HTMLDivElement>(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]);

1
src/interface/web/app/components/referencePanel/referencePanel.tsx
View File

@@ -102,7 +102,6 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
const [isHovering, setIsHovering] = useState(false);
if (!props.link) {
console.log("invalid link", props);
return null;
}

4
src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
View File

@@ -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) {
<DropdownMenu
onOpenChange={(open) => setIsOpen(open)}
open={isOpen}>
<DropdownMenuTrigger>:</DropdownMenuTrigger>
<DropdownMenuTrigger><DotsThreeVertical className="h-4 w-4"/></DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button className="p-0 text-sm h-auto" variant={'ghost'} onClick={() => setIsRenaming(true)}>