Upgrade: New Home Screen for Khoj

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 = `/chat`;
+        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/chat.module.css

@@ -4,10 +4,14 @@ div.main {
 }
 
 .suggestions {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    display: flex;
+    overflow-x: none;
+    height: 50%;
+    padding: 10px;
+    white-space: nowrap;
+    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
     gap: 1rem;
-    justify-content: center;
+    /* justify-content: center; */
 }
 
 div.inputBox {
@@ -124,3 +128,33 @@ div.agentIndicator {
     }
 
 }
+
+#pink {
+    background-color: #f8d1f8;
+    color: #000000;
+    background-image: linear-gradient(to top, #f8d1f8 1%, white 100%);
+}
+
+#blue {
+    background-color: #d1f8f8;
+    color: #000000;
+    background-image: linear-gradient(to top, #d1f8f8 1%, white 100%);
+}
+
+#green {
+    background-color: #d1f8d1;
+    color: #000000;
+    background-image: linear-gradient(to top, #d1f8d1 1%, white 100%);
+}
+
+#purple {
+    background-color: #f8d1f8;
+    color: #000000;
+    background-image: linear-gradient(to top, #f8d1f8 1%, white 100%);
+}
+
+#yellow {
+    background-color: #f8f8d1;
+    color: #000000;
+    background-image: linear-gradient(to top, #f8f8d1 1%, white 100%);
+}

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

@@ -3,7 +3,6 @@
 import styles from './chat.module.css';
 import React, { Suspense, useEffect, useState } from 'react';
 
-import SuggestionCard from '../components/suggestions/suggestionCard';
 import SidePanel from '../components/sidePanel/chatHistorySidePanel';
 import ChatHistory from '../components/chatHistory/chatHistory';
 import NavMenu from '../components/navMenu/navMenu';
@@ -19,9 +18,6 @@ import { welcomeConsole } from '../common/utils';
 import ChatInputArea, { ChatOptions } from '../components/chatInputArea/chatInputArea';
 import { useAuthenticatedData } from '../common/auth';
 
-
-const styleClassOptions = ['pink', 'blue', 'green', 'yellow', 'purple'];
-
 interface ChatBodyDataProps {
     chatOptionsData: ChatOptions | null;
     setTitle: (title: string) => void;
@@ -40,43 +36,38 @@ function ChatBodyData(props: ChatBodyDataProps) {
     const [processingMessage, setProcessingMessage] = useState(false);
 
     useEffect(() => {
-        if (conversationId) {
-            props.onConversationIdChange?.(conversationId);
+        const storedMessage = localStorage.getItem("message");
+        if (storedMessage) {
+            setMessage(storedMessage);
         }
-    }, [conversationId, props.onConversationIdChange]);
+    }, []);
 
     useEffect(() => {
-        if (message) {
+        if(message){
             setProcessingMessage(true);
             props.setQueryToProcess(message);
         }
     }, [message]);
 
+    useEffect(() => {
+        if (conversationId) {
+            props.onConversationIdChange?.(conversationId);
+        }
+    }, [conversationId]);
+
     useEffect(() => {
         if (props.streamedMessages &&
             props.streamedMessages.length > 0 &&
             props.streamedMessages[props.streamedMessages.length - 1].completed) {
-
             setProcessingMessage(false);
         } else {
             setMessage('');
         }
     }, [props.streamedMessages]);
 
-    if (!conversationId) {
-        return (
-            <div className={styles.suggestions}>
-                {props.chatOptionsData && Object.entries(props.chatOptionsData).map(([key, value]) => (
-                    <SuggestionCard
-                        key={key}
-                        title={`/${key}`}
-                        body={value}
-                        link='#' // replace with actual link if available
-                        styleClass={styleClassOptions[Math.floor(Math.random() * styleClassOptions.length)]}
-                    />
-                ))}
-            </div>
-        );
+    if(!conversationId) {
+        window.location.href = '/';
+        return;
     }
 
     return (
@@ -88,7 +79,7 @@ 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)}
@@ -121,7 +112,6 @@ export default function Chat() {
     const handleWebSocketMessage = (event: MessageEvent) => {
         let chunk = event.data;
         let currentMessage = messages.find(message => !message.completed);
-
         if (!currentMessage) {
             console.error("No current message found");
             return;
@@ -204,52 +194,73 @@ export default function Chat() {
 
     }, []);
 
+    useEffect(() => {
+    if (chatWS) {
+        chatWS.onmessage = handleWebSocketMessage;
+    }
+    }, [chatWS, messages]);
+
+    //same as ChatBodyData for local storage message
+    useEffect(() => {
+        const storedMessage = localStorage.getItem("message");
+        setQueryToProcess(storedMessage || '');
+    }, []);
+
     useEffect(() => {
         if (chatWS && queryToProcess) {
-            // Add a new object to the state
             const newStreamMessage: StreamMessage = {
-                rawResponse: "",
-                trainOfThought: [],
-                context: [],
-                onlineContext: {},
-                completed: false,
-                timestamp: (new Date()).toISOString(),
-                rawQuery: queryToProcess || "",
-            }
+            rawResponse: "",
+            trainOfThought: [],
+            context: [],
+            onlineContext: {},
+            completed: false,
+            timestamp: (new Date()).toISOString(),
+            rawQuery: queryToProcess || "",
+            };
             setMessages(prevMessages => [...prevMessages, newStreamMessage]);
-            setProcessQuerySignal(true);
-        } else {
-            if (!chatWS) {
-                console.error("No WebSocket connection available");
+
+            if (chatWS.readyState === WebSocket.OPEN) {
+                chatWS.send(queryToProcess);
+                setProcessQuerySignal(true);
             }
-            if (!queryToProcess) {
-                console.error("No query to process");
+            else {
+                console.error("WebSocket is not open. ReadyState:", chatWS.readyState);
             }
+
+          setQueryToProcess('');
         }
-    }, [queryToProcess]);
+    }, [queryToProcess, chatWS]);
 
-    useEffect(() => {
-        if (processQuerySignal && chatWS) {
+   useEffect(() => {
+        if (processQuerySignal && chatWS && chatWS.readyState === WebSocket.OPEN) {
             setProcessQuerySignal(false);
             chatWS.onmessage = handleWebSocketMessage;
-            chatWS?.send(queryToProcess);
+            chatWS.send(queryToProcess);
+            localStorage.removeItem("message");
         }
-    }, [processQuerySignal]);
+    }, [processQuerySignal, chatWS]);
 
     useEffect(() => {
-        (async () => {
-            if (conversationId) {
+        const setupWebSocketConnection = async () => {
+          if (conversationId && (!chatWS || chatWS.readyState === WebSocket.CLOSED)) {
+            if(queryToProcess) {
+                const newWS = await setupWebSocket(conversationId, queryToProcess);
+                localStorage.removeItem("message");
+                setChatWS(newWS);
+            }
+            else {
                 const newWS = await setupWebSocket(conversationId);
                 setChatWS(newWS);
             }
-        })();
+          }
+        };
+        setupWebSocketConnection();
     }, [conversationId]);
 
     const handleConversationIdChange = (newConversationId: string) => {
         setConversationID(newConversationId);
     };
 
-
     if (isLoading) {
         return <Loading />;
     }
@@ -260,7 +271,7 @@ export default function Chat() {
             <title>
                 {title}
             </title>
-            <div className={styles.sidePanel}>
+            <div>
                 <SidePanel
                     webSocketConnected={chatWS !== null}
                     conversationId={conversationId}

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

@@ -76,7 +76,9 @@ export const setupWebSocket = async (conversationId: string, initialMessage?: st
 
     let webSocketUrl = `${wsProtocol}//${host}/api/chat/ws`;
 
-    if (conversationId === null) return null;
+    if (conversationId === null) {
+        return null;
+    }
 
     if (conversationId) {
         webSocketUrl += `?conversation_id=${conversationId}`;

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

@@ -0,0 +1,60 @@
+export function convertColorToTextClass(color: string) {
+    if (color === 'red') return `text-red-500`;
+    if (color === 'yellow') return `text-yellow-500`;
+    if (color === 'green') return `text-green-500`;
+    if (color === 'blue') return `text-blue-500`;
+    if (color === 'orange') return `text-orange-500`;
+    if (color === 'purple') return `text-purple-500`;
+    if (color === 'pink') return `text-pink-500`;
+    if (color === 'teal') return `text-teal-500`;
+    if (color === 'cyan') return `text-cyan-500`;
+    if (color === 'lime') return `text-lime-500`;
+    if (color === 'indigo') return `text-indigo-500`;
+    if (color === 'fuschia') return `text-fuschia-500`;
+    if (color === 'rose') return `text-rose-500`;
+    if (color === 'sky') return `text-sky-500`;
+    if (color === 'amber') return `text-amber-500`;
+    if (color === 'emerald') return `text-emerald-500`;
+    return `text-gray-500`;
+}
+
+export function convertSuggestionColorToTextClass(color: string) {
+    const colors = ['blue', 'yellow', 'green', 'pink', 'purple'];
+    if (colors.includes(color)) {
+        return "" + `bg-gradient-to-b from-[hsl(var(--background))] to-${color}-100/${color == "green" ? "90" : "70"} dark:from-[hsl(var(--background))] dark:to-${color}-950/30 dark:border dark:border-neutral-700`;
+    }
+    return `bg-gradient-to-b from-white to-orange-50`;
+}
+
+export function convertColorToBorderClass(color: string) {
+    console.log("Color:", color);
+    if (color === 'red') return `border-red-500`;
+    if (color === 'yellow') return `border-yellow-500`;
+    if (color === 'green') return `border-green-500`;
+    if (color === 'blue') return `border-blue-500`;
+    if (color === 'orange') return `border-orange-500`;
+    if (color === 'purple') return `border-purple-500`;
+    if (color === 'pink') return `border-pink-500`;
+    if (color === 'teal') return `border-teal-500`;
+    if (color === 'cyan') return `border-cyan-500`;
+    if (color === 'lime') return `border-lime-500`;
+    if (color === 'indigo') return `border-indigo-500`;
+    if (color === 'fuschia') return `border-fuschia-500`;
+    if (color === 'rose') return `border-rose-500`;
+    if (color === 'sky') return `border-sky-500`;
+    if (color === 'amber') return `border-amber-500`;
+    if (color === 'emerald') return `border-emerald-500`;
+    return `border-gray-500`;
+}
+
+export const colorMap: Record<string, string> = {
+    'red': 'border-red-500',
+    'blue': 'border-blue-500',
+    'green': 'border-green-500',
+    'yellow': 'border-yellow-500',
+    'purple': 'border-purple-500',
+    'pink': 'border-pink-500',
+    'indigo': 'border-indigo-500',
+    'gray': 'border-gray-500',
+    'orange': 'border-orange-500',
+};