sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/chat/page.tsx
View file

@ -217,7 +217,7 @@ function ChatInputArea(props: ChatInputProps) {
<PopoverContent
onOpenAutoFocus={(e) => e.preventDefault()}
className={`${props.isMobileWidth} ? 'w-[100vw] : w-full`}>
<Command className='max-w-full'>
<Command className='max-w-full shadow-md'>
<CommandInput placeholder="Type a command or search..." value={message} className='hidden' />
<CommandList>
<CommandEmpty>No matching commands.</CommandEmpty>

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)}>

16
src/interface/web/app/globals.css
View file

@ -38,24 +38,24 @@
}
.dark {
--background: 224 71.4% 4.1%;
--background: 0 0% 14%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card: 0 0% 14%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover: 0 0% 14%;
--popover-foreground: 210 20% 98%;
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--secondary: 215 27.9% 16.9%;
--secondary: 0 0% 9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted: 0 0% 9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent: 0 0% 9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--border: 0 0% 9%;
--input: 0 0% 9%;
--ring: 263.4 70% 50.4%;
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
--box-shadow-color: rgba(255, 255, 255, 0.05);