Upgrade: New Home Screen for Khoj

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwindcss": "^3.4.6"
+  }
+}

src/interface/web/app/agents/page.tsx

@@ -71,8 +71,9 @@ async function openChat(slug: string, userData: UserProfile | null) {
     }
 
     const response = await fetch(`/api/chat/sessions?agent_slug=${slug}`, { method: "POST" });
+    const data = await response.json();
     if (response.status == 200) {
-        window.location.href = `/home`;
+        window.location.href = `/chat?conversationId=${data.conversation_id}`;
     } else if (response.status == 403 || response.status == 401) {
         window.location.href = unauthenticatedRedirectUrl;
     } else {
@@ -294,7 +295,7 @@ export default function Agents() {
         return (
             <main className={styles.main}>
                 <div className={`${styles.titleBar} text-5xl`}>
-                    Talk to a Specialized Agent
+                    Agents
                 </div>
                 <div className={styles.agentList}>
                     Error loading agents
@@ -307,7 +308,7 @@ export default function Agents() {
         return (
             <main className={styles.main}>
                 <div className={`${styles.titleBar} text-5xl`}>
-                    Talk to a Specialized Agent
+                    Agents
                 </div>
                 <div className={styles.agentList}>
                     <InlineLoading /> booting up your agents

src/interface/web/app/chat/page.tsx

@@ -18,15 +18,6 @@ import { welcomeConsole } from '../common/utils';
 import ChatInputArea, { ChatOptions } from '../components/chatInputArea/chatInputArea';
 import { useAuthenticatedData } from '../common/auth';
 
-export interface AgentData {
-    slug: string;
-    avatar: string;
-    name: string;
-    personality: string;
-    color: string;
-    icon: string;
-}
-
 interface ChatBodyDataProps {
     chatOptionsData: ChatOptions | null;
     setTitle: (title: string) => void;
@@ -36,9 +27,7 @@ interface ChatBodyDataProps {
     setUploadedFiles: (files: string[]) => void;
     isMobileWidth?: boolean;
     isLoggedIn: boolean;
-    conversationId: string | null; // Added this line
 }
-type Suggestion = [string, string, string, string, string];
 
 function ChatBodyData(props: ChatBodyDataProps) {
     const searchParams = useSearchParams();
@@ -77,7 +66,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
     }, [props.streamedMessages]);
 
     if(!conversationId) {
-        window.location.href = '/home';
+        window.location.href = '/';
         return;
     }
 
@@ -90,13 +79,13 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     pendingMessage={processingMessage ? message : ''}
                     incomingMessages={props.streamedMessages} />
             </div>
-            <div className={`${styles.inputBox} bg-background align-middle items-center justify-center px-3`}>
+            <div className={`${styles.inputBox} bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm`}>
                 <ChatInputArea
                     isLoggedIn={props.isLoggedIn}
                     sendMessage={(message) => setMessage(message)}
                     sendDisabled={processingMessage}
                     chatOptionsData={props.chatOptionsData}
-                    conversationId={props.conversationId ?? conversationId}
+                    conversationId={conversationId}
                     isMobileWidth={props.isMobileWidth}
                     setUploadedFiles={props.setUploadedFiles} />
             </div>
@@ -282,7 +271,7 @@ export default function Chat() {
             <title>
                 {title}
             </title>
-            <div className={styles.sidePanel}>
+            <div>
                 <SidePanel
                     webSocketConnected={chatWS !== null}
                     conversationId={conversationId}
@@ -302,8 +291,7 @@ export default function Chat() {
                             setQueryToProcess={setQueryToProcess}
                             setUploadedFiles={setUploadedFiles}
                             isMobileWidth={isMobileWidth}
-                            onConversationIdChange={handleConversationIdChange}
-                            conversationId={conversationId}/>
+                            onConversationIdChange={handleConversationIdChange} />
                     </Suspense>
                 </div>
             </div>

src/interface/web/app/common/chatFunctions.ts

@@ -77,7 +77,6 @@ export const setupWebSocket = async (conversationId: string, initialMessage?: st
     let webSocketUrl = `${wsProtocol}//${host}/api/chat/ws`;
 
     if (conversationId === null) {
-        console.error("No conversation ID provided");
         return null;
     }
 
@@ -91,7 +90,6 @@ export const setupWebSocket = async (conversationId: string, initialMessage?: st
         console.log('WebSocket connection established');
         if (initialMessage) {
             chatWS.send(initialMessage);
-            console.log("ws data: ", initialMessage, conversationId, webSocketUrl);
         }
     };
 

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

@@ -176,6 +176,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
         fetch(conversationFetchURL)
             .then(response => response.json())
             .then((chatData: ChatResponse) => {
+                console.log("CHAT DATA RESPONSE", chatData);
                 props.setTitle(chatData.response.slug);
                 if (chatData && chatData.response && chatData.response.chat && chatData.response.chat.length > 0) {
 
@@ -192,6 +193,16 @@ export default function ChatHistory(props: ChatHistoryProps) {
                     }
                     setFetchingData(false);
                 } else {
+                    if (chatData.response.agent && chatData.response.conversation_id) {
+                        const chatMetadata ={
+                            chat: [],
+                            agent: chatData.response.agent,
+                            conversation_id: chatData.response.conversation_id,
+                            slug: chatData.response.slug,
+                        }
+                        setData(chatMetadata);
+                    }
+
                     setHasMoreMessages(false);
                     setFetchingData(false);
                 }
@@ -243,6 +254,8 @@ export default function ChatHistory(props: ChatHistoryProps) {
         return null;
     }
 
+    console.log("CHAT HISTORY DATA", data);
+
     return (
         <ScrollArea className={`h-[80vh]`}>
             <div ref={ref}>
@@ -335,7 +348,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                 <ProfileCard
                                     name={constructAgentName()}
                                     link={constructAgentLink()}
-                                    avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
+                                    avatar={<Lightbulb color='orange' weight='fill' />}
                                     description={constructAgentPersona()}
                                 />
                             </div>

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

@@ -306,11 +306,11 @@ export default function ChatInputArea(props: ChatInputProps) {
                     className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                     disabled={props.sendDisabled}
                     onClick={handleFileButtonClick}>
-                    <FileArrowUp weight='fill' />
+                    <FileArrowUp weight='fill' className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
                 </Button>
                 <div className="grid w-full gap-1.5 relative">
                     <Textarea
-                        className='border-none w-full h-16 min-h-16 md:py-4 rounded-lg text-lg resize-none'
+                        className={`border-none w-full h-16 min-h-16 md:py-4 rounded-lg resize-none dark:bg-neutral-700 ${props.isMobileWidth ? 'text-md' : 'text-lg'}`}
                         placeholder="Type / to see a list of commands"
                         id="message"
                         value={message}
@@ -327,13 +327,13 @@ export default function ChatInputArea(props: ChatInputProps) {
                     variant={'ghost'}
                     className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                     disabled={props.sendDisabled}>
-                    <Microphone weight='fill' />
+                    <Microphone weight='fill' className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
                 </Button>
                 <Button
                     className="bg-orange-300 hover:bg-orange-500 rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1"
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
-                    <ArrowCircleUp />
+                    <ArrowCircleUp className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
                 </Button>
             </div>
         </>

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

@@ -116,7 +116,7 @@ export default function NavMenu(props: NavMenuProps) {
                         <DropdownMenuTrigger>=</DropdownMenuTrigger>
                         <DropdownMenuContent>
                             <DropdownMenuItem>
-                                <Link href='/chat' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background no-underline`}>Chat</Link>
+                                <Link href='/' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background no-underline`}>Chat</Link>
                             </DropdownMenuItem>
                             <DropdownMenuItem>
                                 <Link href='/agents' className={`${props.selected.toLowerCase() === 'agent' ? styles.selected : ''} hover:bg-background no-underline`}>Agents</Link>
@@ -142,7 +142,7 @@ export default function NavMenu(props: NavMenuProps) {
                     :
                     <Menubar className='items-top inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground'>
                         <MenubarMenu>
-                            <Link href='/home' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background no-underline`}>
+                            <Link href='/' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background no-underline`}>
                                 <MenubarTrigger>Chat</MenubarTrigger>
                             </Link>
                         </MenubarMenu>

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

@@ -1,34 +1,56 @@
 import React from 'react';
 import { ArrowRight } from '@phosphor-icons/react';
 
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from '@/components/ui/button';
+
+
 interface ProfileCardProps {
 	name: string;
-    avatar: JSX.Element;
+	avatar: JSX.Element;
 	link: string;
 	description?: string; // Optional description field
 }
 
 const ProfileCard: React.FC<ProfileCardProps> = ({ name, avatar, link, description }) => {
 	return (
 		<div className="relative group flex">
-            {avatar}
-            <span>{name}</span>
-			<div className="absolute left-0 bottom-full w-80 h-30 p-2 pb-4 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-				<div className="flex items-center">
-                    {avatar}
-                    <span className="mr-2 mt-1 flex">
-                        {name}
-                        <a href={link} target="_blank" rel="noreferrer" className="mt-1 ml-2 block">
-                            <ArrowRight weight="bold"/>
-                        </a>
-                    </span>
-				</div>
-				{description && (
-					<p className="mt-2 ml-6 text-sm text-gray-600 line-clamp-2">
-						{description || 'A Khoj agent'}
-					</p>
-				)}
-			</div>
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button variant="ghost" className="flex items-center justify-center gap-2">
+							{avatar}
+							<div>{name}</div>
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>
+						<div className='w-80 h-30'>
+							{/* <div className="absolute left-0 bottom-full w-80 h-30 p-2 pb-4 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"> */}
+							<a href={link} target="_blank" rel="noreferrer" className="mt-1 ml-2 block no-underline">
+								<div className="flex items-center justify-start gap-2">
+									{avatar}
+									<div className="mr-2 mt-1 flex justify-center items-center text-sm font-semibold text-gray-800">
+										{name}
+										<ArrowRight weight="bold" className='ml-1' />
+									</div>
+								</div>
+							</a>
+							{description && (
+								<p className="mt-2 ml-6 text-sm text-gray-600 line-clamp-2">
+									{description || 'A Khoj agent'}
+								</p>
+							)}
+						</div>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+
+
 		</div>
 	);
 };

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

@@ -351,7 +351,7 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
                                         agent_avatar={chatHistory.agent_avatar}
                                         agent_name={chatHistory.agent_name}
                                         showSidePanel={props.setEnabled}
-                                        />
+                                    />
                                 ))}
                             </div>
                         ))}
@@ -548,7 +548,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
         <Dialog>
             <DialogTrigger
                 className="flex text-left text-medium text-gray-500 hover:text-gray-300 cursor-pointer my-4 text-sm p-[0.5rem]">
-                <span className="mr-2">See All <ArrowRight className="inline h-4 w-4" weight="bold"/></span>
+                <span className="mr-2">See All <ArrowRight className="inline h-4 w-4" weight="bold" /></span>
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
@@ -570,7 +570,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
                                             slug={chatHistory.slug}
                                             agent_avatar={chatHistory.agent_avatar}
                                             agent_name={chatHistory.agent_name}
-                                            showSidePanel={showSidePanel}/>
+                                            showSidePanel={showSidePanel} />
                                     ))}
                                 </div>
                             ))}
@@ -701,21 +701,27 @@ export default function SidePanel(props: SidePanelProps) {
     }, [chatSessions]);
 
     function newConvo() {
-        window.location.href = '/home';
+        window.location.href = '/';
     }
 
     return (
         <div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed}`}>
-            <div className="flex items-center justify-between">
-                <img src="/khoj-logo.svg" alt="logo" className="w-16 relative bottom-1"/>
+            <div className={`flex items-center justify-between ${enabled ? 'flex-row' : 'flex-col'}`}>
+                <Link href='/'>
+                    <img
+                        src="/khoj-logo.svg"
+                        alt="khoj logo"
+                        width={52}
+                        height={52} />
+                </Link>
                 {
                     authenticatedData && props.isMobileWidth ?
                         <Drawer open={enabled} onOpenChange={(open) => {
                             if (!enabled) setEnabled(false);
                             setEnabled(open);
                         }
                         }>
-                            <DrawerTrigger><ArrowRight className="h-4 w-4 mx-2" weight="bold"/></DrawerTrigger>
+                            <DrawerTrigger><ArrowRight className="h-4 w-4 mx-2" weight="bold" /></DrawerTrigger>
                             <DrawerContent>
                                 <DrawerHeader>
                                     <DrawerTitle>Sessions and Files</DrawerTitle>
@@ -742,13 +748,13 @@ export default function SidePanel(props: SidePanelProps) {
                             </DrawerContent>
                         </Drawer>
                         :
-                        <div>
-                        <button className={`ml-4 mr-4 ${styles.button}`} onClick={newConvo}>
-                            {enabled ? <NotePencil className="h-7 w-7"/> : <NotePencil className="h-7 w-7" color="gray"/>}
-                        </button>
-                        <button className={styles.button} onClick={() => setEnabled(!enabled)}>
-                            {enabled ? <Sidebar className="h-7 w-7"/> : <Sidebar className="ml-2 h-7 w-7" color="gray"/>}
-                        </button>
+                        <div className={`flex items-center ${enabled ? 'flex-row gap-2' : 'flex-col pt-2'}`}>
+                            <Link className={` ${enabled ? 'ml-2' : ''}`} href="/">
+                                {enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
+                            </Link>
+                            <button className={styles.button} onClick={() => setEnabled(!enabled)}>
+                                {enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
+                            </button>
                         </div>
                 }
             </div>
@@ -778,7 +784,7 @@ export default function SidePanel(props: SidePanelProps) {
                         <Button variant="ghost"><StackPlus className="h-4 w-4 mr-1" />New Conversation</Button>
                     </Link>
                     <Link href={`/login?next=${encodeURIComponent(window.location.pathname)}`}> {/* Redirect to login page */}
-                        <Button variant="default"><UserCirclePlus className="h-4 w-4 mr-1"/>Sign Up</Button>
+                        <Button variant="default"><UserCirclePlus className="h-4 w-4 mr-1" />Sign Up</Button>
                     </Link>
                 </div>
             }

src/interface/web/app/components/sidePanel/sidePanel.module.css

@@ -60,6 +60,10 @@ div.collapsed {
     display: grid;
     grid-template-columns: 1fr;
     height: fit-content;
+    padding-top: 1rem;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 1rem;
 }
 
 p.session {