Merge branch 'master' of github.com:khoj-ai/khoj into features/advanced-reasoning

2026-03-04 05:39:06 +00:00 · 2024-10-23 19:15:51 -07:00
parent c6c48cfc18 5120597d4e
commit 30f9225021
85 changed files with 5132 additions and 3202 deletions
--- a/src/interface/web/app/share/chat/layout.tsx
+++ b/src/interface/web/app/share/chat/layout.tsx
@@ -27,7 +27,14 @@ export default function RootLayout({
                       child-src 'none';
                       object-src 'none';"
            ></meta>
-            <body className={inter.className}>{children}</body>
+            <body className={inter.className}>
+                {children}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `window.EXCALIDRAW_ASSET_PATH = 'https://assets.khoj.dev/@excalidraw/excalidraw/dist/';`,
+                    }}
+                />
+            </body>
        </html>
    );
 }
--- a/src/interface/web/app/share/chat/page.tsx
+++ b/src/interface/web/app/share/chat/page.tsx
@@ -13,7 +13,7 @@ import "katex/dist/katex.min.css";
 import { useIPLocationData, useIsMobileWidth, welcomeConsole } from "../../common/utils";
 import { useAuthenticatedData } from "@/app/common/auth";

-import ChatInputArea, { ChatOptions } from "@/app/components/chatInputArea/chatInputArea";
+import { ChatInputArea, ChatOptions } from "@/app/components/chatInputArea/chatInputArea";
 import { StreamMessage } from "@/app/components/chatMessage/chatMessage";
 import { processMessageChunk } from "@/app/common/chatFunctions";
 import { AgentData } from "@/app/agents/page";
@@ -28,22 +28,44 @@ interface ChatBodyDataProps {
    isLoggedIn: boolean;
    conversationId?: string;
    setQueryToProcess: (query: string) => void;
-    setImage64: (image64: string) => void;
+    setImages: (images: string[]) => void;
 }

 function ChatBodyData(props: ChatBodyDataProps) {
    const [message, setMessage] = useState("");
-    const [image, setImage] = useState<string | null>(null);
+    const [images, setImages] = useState<string[]>([]);
    const [processingMessage, setProcessingMessage] = useState(false);
    const [agentMetadata, setAgentMetadata] = useState<AgentData | null>(null);
+    const chatInputRef = useRef<HTMLTextAreaElement>(null);
+
    const setQueryToProcess = props.setQueryToProcess;
    const streamedMessages = props.streamedMessages;

+    const chatHistoryCustomClassName = props.isMobileWidth ? "w-full" : "w-4/6";
+
    useEffect(() => {
-        if (image) {
-            props.setImage64(encodeURIComponent(image));
+        if (images.length > 0) {
+            const encodedImages = images.map((image) => encodeURIComponent(image));
+            props.setImages(encodedImages);
        }
-    }, [image, props.setImage64]);
+    }, [images, props.setImages]);
+
+    useEffect(() => {
+        const storedImages = localStorage.getItem("images");
+        if (storedImages) {
+            const parsedImages: string[] = JSON.parse(storedImages);
+            setImages(parsedImages);
+            const encodedImages = parsedImages.map((img: string) => encodeURIComponent(img));
+            props.setImages(encodedImages);
+            localStorage.removeItem("images");
+        }
+
+        const storedMessage = localStorage.getItem("message");
+        if (storedMessage) {
+            setProcessingMessage(true);
+            setQueryToProcess(storedMessage);
+        }
+    }, [setQueryToProcess, props.setImages]);

    useEffect(() => {
        if (message) {
@@ -78,21 +100,23 @@ function ChatBodyData(props: ChatBodyDataProps) {
                    setTitle={props.setTitle}
                    pendingMessage={processingMessage ? message : ""}
                    incomingMessages={props.streamedMessages}
+                    customClassName={chatHistoryCustomClassName}
                />
            </div>
            <div
-                className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}
+                className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`}
            >
                <ChatInputArea
                    isLoggedIn={props.isLoggedIn}
                    sendMessage={(message) => setMessage(message)}
-                    sendImage={(image) => setImage(image)}
+                    sendImage={(image) => setImages((prevImages) => [...prevImages, image])}
                    sendDisabled={processingMessage}
                    chatOptionsData={props.chatOptionsData}
                    conversationId={props.conversationId}
                    agentColor={agentMetadata?.color}
                    isMobileWidth={props.isMobileWidth}
                    setUploadedFiles={props.setUploadedFiles}
+                    ref={chatInputRef}
                />
            </div>
        </>
@@ -109,7 +133,7 @@ export default function SharedChat() {
    const [processQuerySignal, setProcessQuerySignal] = useState(false);
    const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
    const [paramSlug, setParamSlug] = useState<string | undefined>(undefined);
-    const [image64, setImage64] = useState<string>("");
+    const [images, setImages] = useState<string[]>([]);

    const locationData = useIPLocationData() || {
        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -168,7 +192,7 @@ export default function SharedChat() {
                completed: false,
                timestamp: new Date().toISOString(),
                rawQuery: queryToProcess || "",
-                uploadedImageData: decodeURIComponent(image64),
+                images: images,
            };
            setMessages((prevMessages) => [...prevMessages, newStreamMessage]);
            setProcessQuerySignal(true);
@@ -195,7 +219,7 @@ export default function SharedChat() {
            if (done) {
                setQueryToProcess("");
                setProcessQuerySignal(false);
-                setImage64("");
+                setImages([]);
                break;
            }

@@ -237,7 +261,7 @@ export default function SharedChat() {
                country_code: locationData.countryCode,
                timezone: locationData.timezone,
            }),
-            ...(image64 && { image: image64 }),
+            ...(images.length > 0 && { image: images }),
        };

        const response = await fetch(chatAPI, {
@@ -276,6 +300,19 @@ export default function SharedChat() {

            <div className={styles.chatBox}>
                <div className={styles.chatBoxBody}>
+                    {!isMobileWidth && title && (
+                        <div
+                            className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8 pt-6 col-auto h-fit`}
+                        >
+                            {title && (
+                                <h2
+                                    className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`}
+                                >
+                                    {title}
+                                </h2>
+                            )}
+                        </div>
+                    )}
                    <Suspense fallback={<Loading />}>
                        <ChatBodyData
                            conversationId={conversationId}
@@ -287,7 +324,7 @@ export default function SharedChat() {
                            setTitle={setTitle}
                            setUploadedFiles={setUploadedFiles}
                            isMobileWidth={isMobileWidth}
-                            setImage64={setImage64}
+                            setImages={setImages}
                        />
                    </Suspense>
                </div>
--- a/src/interface/web/app/share/chat/sharedChat.module.css
+++ b/src/interface/web/app/share/chat/sharedChat.module.css
@@ -75,7 +75,7 @@ div.titleBar {
 div.chatBoxBody {
    display: grid;
    height: 100%;
-    width: 70%;
+    width: 95%;
    margin: auto;
 }