Merge branch 'features/big-upgrade-chat-ux' of github.com:khoj-ai/khoj into document-styling-on-chat-ux

src/interface/web/app/components/chatHistory/chatHistory.tsx

@@ -9,12 +9,12 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 
 import renderMathInElement from 'katex/contrib/auto-render';
 import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/github.css'
 
 import { InlineLoading } from '../loading/loading';
 
+import { Lightbulb } from "@phosphor-icons/react";
+
 import ProfileCard from '../profileCard/profileCard';
-import { Lightbulb } from '@phosphor-icons/react';
 
 interface ChatResponse {
     status: string;

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -7,7 +7,6 @@ import mditHljs from "markdown-it-highlightjs";
 import React, { useEffect, useRef, useState } from 'react';
 
 import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/github.css'
 
 import { TeaserReferencesSection, constructAllReferences } from '../referencePanel/referencePanel';
 
@@ -111,7 +110,6 @@ export interface StreamMessage {
     timestamp: string;
 }
 
-
 export interface ChatHistoryData {
     chat: SingleChatMessage[];
     agent: AgentData;
@@ -189,7 +187,6 @@ function chooseIconFromHeader(header: string, iconColor: string) {
     return <Brain className={`${classNames}`} />;
 }
 
-
 export function TrainOfThought(props: TrainOfThoughtProps) {
     // The train of thought comes in as a markdown-formatted string. It starts with a heading delimited by two asterisks at the start and end and a colon, followed by the message. Example: **header**: status. This function will parse the message and render it as a div.
     let extractedHeader = props.message.match(/\*\*(.*)\*\*/);
@@ -198,7 +195,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
     const icon = chooseIconFromHeader(header, iconColor);
     let markdownRendered = DomPurify.sanitize(md.render(props.message));
     return (
-        <div className={`flex mt-1 ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
+        <div className={`flex items-center ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
             {icon}
             <div dangerouslySetInnerHTML={{ __html: markdownRendered }} />
         </div>
@@ -253,7 +250,7 @@ export default function ChatMessage(props: ChatMessageProps) {
             preElements.forEach((preElement) => {
                 const copyButton = document.createElement('button');
                 const copyImage = document.createElement('img');
-                copyImage.src = '/copy-button.svg';
+                copyImage.src = '/static/copy-button.svg';
                 copyImage.alt = 'Copy';
                 copyImage.width = 24;
                 copyImage.height = 24;
@@ -267,11 +264,12 @@ export default function ChatMessage(props: ChatMessageProps) {
                     textContent = textContent.replace(/^Copy/, '');
                     textContent = textContent.trim();
                     navigator.clipboard.writeText(textContent);
+                    copyImage.src = '/static/copy-button-success.svg';
                 });
                 preElement.prepend(copyButton);
             });
         }
-    }, [markdownRendered]);
+    }, [markdownRendered, isHovering, messageRef]);
 
     if (!props.chatMessage.message) {
         return null;

src/interface/web/app/components/navMenu/navMenu.tsx

@@ -2,7 +2,7 @@
 
 import styles from './navMenu.module.css';
 import Link from 'next/link';
-import { useAuthenticatedData, UserProfile } from '@/app/common/auth';
+import { useAuthenticatedData } from '@/app/common/auth';
 import { useState, useEffect } from 'react';
 
 import {
@@ -55,7 +55,6 @@ export default function NavMenu(props: NavMenuProps) {
             document.documentElement.classList.add('dark');
             setDarkMode(true);
         }
-
     }, []);
 
     useEffect(() => {
@@ -126,12 +125,12 @@ export default function NavMenu(props: NavMenuProps) {
                             <MenubarTrigger>Profile</MenubarTrigger>
                             <MenubarContent>
                                 <MenubarItem>
-                                <Toggle
-                                    pressed={darkMode}
-                                    onClick={() => {
-                                        console.log("clicked on dark mode method");
-                                        setDarkMode(!darkMode)}
-                                    }>
+                                    <Toggle
+                                        pressed={darkMode}
+                                        onClick={() => {
+                                            setDarkMode(!darkMode)
+                                        }
+                                        }>
                                         <Moon />
                                     </Toggle>
                                 </MenubarItem>

src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx

@@ -2,13 +2,12 @@
 
 import styles from "./sidePanel.module.css";
 
-import { Suspense, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { UserProfile, useAuthenticatedData } from "@/app/common/auth";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import Link from "next/link";
 import useSWR from "swr";
-import Image from "next/image";
 
 import {
     Command,
@@ -72,8 +71,9 @@ import {
 
 import { Pencil, Trash, Share } from "@phosphor-icons/react";
 
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
 import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
@@ -338,7 +338,7 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
                     <div className={styles.sessionsList}>
                         {props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => (
                             <div key={timeGrouping} className={`my-4`}>
-                                <div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
+                                <div className={`text-muted-foreground text-sm font-bold p-[0.5rem]`}>
                                     {timeGrouping}
                                 </div>
                                 {props.subsetOrganizedData && props.subsetOrganizedData[timeGrouping].map((chatHistory) => (