Format next.js web app with prettier

2026-03-05 05:39:11 +00:00 · 2024-08-05 02:27:31 +05:30
parent 41bdd6d6d9
commit 842036688d
64 changed files with 5806 additions and 5087 deletions
--- a/src/interface/web/app/share/chat/layout.tsx
+++ b/src/interface/web/app/share/chat/layout.tsx
@@ -5,29 +5,29 @@ import "../../globals.css";
 const inter = Noto_Sans({ subsets: ["latin"] });

 export const metadata: Metadata = {
-  title: "Khoj AI - Chat",
-  description: "Use this page to view a chat with Khoj AI.",
+    title: "Khoj AI - Chat",
+    description: "Use this page to view a chat with Khoj AI.",
 };

 export default function RootLayout({
-  children,
+    children,
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <meta httpEquiv="Content-Security-Policy"
-        content="default-src 'self' https://assets.khoj.dev;
+    return (
+        <html lang="en">
+            <meta
+                httpEquiv="Content-Security-Policy"
+                content="default-src 'self' https://assets.khoj.dev;
                       script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
                       connect-src 'self' https://ipapi.co/json ws://localhost:42110;
                       style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
                       img-src 'self' data: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
                       font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
                       child-src 'none';
-                       object-src 'none';"></meta>
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
-  );
+                       object-src 'none';"
+            ></meta>
+            <body className={inter.className}>{children}</body>
+        </html>
+    );
 }
--- a/src/interface/web/app/share/chat/page.tsx
+++ b/src/interface/web/app/share/chat/page.tsx
@@ -1,23 +1,22 @@
-'use client'
+"use client";

-import styles from './sharedChat.module.css';
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import styles from "./sharedChat.module.css";
+import React, { Suspense, useEffect, useRef, useState } from "react";

-import SidePanel from '../../components/sidePanel/chatHistorySidePanel';
-import ChatHistory from '../../components/chatHistory/chatHistory';
-import NavMenu from '../../components/navMenu/navMenu';
-import Loading from '../../components/loading/loading';
+import SidePanel from "../../components/sidePanel/chatHistorySidePanel";
+import ChatHistory from "../../components/chatHistory/chatHistory";
+import NavMenu from "../../components/navMenu/navMenu";
+import Loading from "../../components/loading/loading";

-import 'katex/dist/katex.min.css';
+import "katex/dist/katex.min.css";

-import { useIPLocationData, welcomeConsole } from '../../common/utils';
-import { useAuthenticatedData } from '@/app/common/auth';
-
-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';
+import { useIPLocationData, welcomeConsole } from "../../common/utils";
+import { useAuthenticatedData } from "@/app/common/auth";

+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";

 interface ChatBodyDataProps {
    chatOptionsData: ChatOptions | null;
@@ -31,13 +30,12 @@ interface ChatBodyDataProps {
    setQueryToProcess: (query: string) => void;
 }

-
 function ChatBodyData(props: ChatBodyDataProps) {
-    const [message, setMessage] = useState('');
+    const [message, setMessage] = useState("");
    const [processingMessage, setProcessingMessage] = useState(false);
    const [agentMetadata, setAgentMetadata] = useState<AgentData | null>(null);

-    const setQueryToProcess = props.setQueryToProcess
+    const setQueryToProcess = props.setQueryToProcess;
    const streamedMessages = props.streamedMessages;

    useEffect(() => {
@@ -48,22 +46,19 @@ function ChatBodyData(props: ChatBodyDataProps) {
    }, [message, setQueryToProcess]);

    useEffect(() => {
-        if (streamedMessages &&
+        if (
+            streamedMessages &&
            streamedMessages.length > 0 &&
-            streamedMessages[streamedMessages.length - 1].completed) {
-
+            streamedMessages[streamedMessages.length - 1].completed
+        ) {
            setProcessingMessage(false);
        } else {
-            setMessage('');
+            setMessage("");
        }
    }, [streamedMessages]);

    if (!props.publicConversationSlug && !props.conversationId) {
-        return (
-            <div className={styles.suggestions}>
-                Whoops, nothing to see here!
-            </div>
-        );
+        return <div className={styles.suggestions}>Whoops, nothing to see here!</div>;
    }

    return (
@@ -71,13 +66,16 @@ function ChatBodyData(props: ChatBodyDataProps) {
            <div className={false ? styles.chatBody : styles.chatBodyFull}>
                <ChatHistory
                    publicConversationSlug={props.publicConversationSlug}
-                    conversationId={props.conversationId || ''}
+                    conversationId={props.conversationId || ""}
                    setAgent={setAgentMetadata}
                    setTitle={props.setTitle}
-                    pendingMessage={processingMessage ? message : ''}
-                    incomingMessages={props.streamedMessages} />
+                    pendingMessage={processingMessage ? message : ""}
+                    incomingMessages={props.streamedMessages}
+                />
            </div>
-            <div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3`}>
+            <div
+                className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3`}
+            >
                <ChatInputArea
                    isLoggedIn={props.isLoggedIn}
                    sendMessage={(message) => setMessage(message)}
@@ -86,7 +84,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
                    conversationId={props.conversationId}
                    agentColor={agentMetadata?.color}
                    isMobileWidth={props.isMobileWidth}
-                    setUploadedFiles={props.setUploadedFiles} />
+                    setUploadedFiles={props.setUploadedFiles}
+                />
            </div>
        </>
    );
@@ -95,10 +94,10 @@ function ChatBodyData(props: ChatBodyDataProps) {
 export default function SharedChat() {
    const [chatOptionsData, setChatOptionsData] = useState<ChatOptions | null>(null);
    const [isLoading, setLoading] = useState(true);
-    const [title, setTitle] = useState('Khoj AI - Chat');
+    const [title, setTitle] = useState("Khoj AI - Chat");
    const [conversationId, setConversationID] = useState<string | undefined>(undefined);
    const [messages, setMessages] = useState<StreamMessage[]>([]);
-    const [queryToProcess, setQueryToProcess] = useState<string>('');
+    const [queryToProcess, setQueryToProcess] = useState<string>("");
    const [processQuerySignal, setProcessQuerySignal] = useState(false);
    const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
    const [isMobileWidth, setIsMobileWidth] = useState(false);
@@ -108,8 +107,8 @@ export default function SharedChat() {
    const authenticatedData = useAuthenticatedData();

    useEffect(() => {
-        fetch('/api/chat/options')
-            .then(response => response.json())
+        fetch("/api/chat/options")
+            .then((response) => response.json())
            .then((data: ChatOptions) => {
                setLoading(false);
                // Render chat options, if any
@@ -117,7 +116,7 @@ export default function SharedChat() {
                    setChatOptionsData(data);
                }
            })
-            .catch(err => {
+            .catch((err) => {
                console.error(err);
                return;
            });
@@ -126,35 +125,33 @@ export default function SharedChat() {

        setIsMobileWidth(window.innerWidth < 786);

-        window.addEventListener('resize', () => {
+        window.addEventListener("resize", () => {
            setIsMobileWidth(window.innerWidth < 786);
        });

-        setParamSlug(window.location.pathname.split('/').pop() || '');
-
+        setParamSlug(window.location.pathname.split("/").pop() || "");
    }, []);

    useEffect(() => {
        if (queryToProcess && !conversationId) {
            // If the user has not yet started conversing in the chat, create a new conversation
            fetch(`/api/chat/share/fork?public_conversation_slug=${paramSlug}`, {
-                method: 'POST',
+                method: "POST",
                headers: {
-                    'Content-Type': 'application/json',
+                    "Content-Type": "application/json",
                },
            })
-                .then(response => response.json())
-                .then(data => {
+                .then((response) => response.json())
+                .then((data) => {
                    setConversationID(data.conversation_id);
                })
-                .catch(err => {
+                .catch((err) => {
                    console.error(err);
                    return;
                });
            return;
        }

-
        if (queryToProcess) {
            // Add a new object to the state
            const newStreamMessage: StreamMessage = {
@@ -163,10 +160,10 @@ export default function SharedChat() {
                context: [],
                onlineContext: {},
                completed: false,
-                timestamp: (new Date()).toISOString(),
+                timestamp: new Date().toISOString(),
                rawQuery: queryToProcess || "",
-            }
-            setMessages(prevMessages => [...prevMessages, newStreamMessage]);
+            };
+            setMessages((prevMessages) => [...prevMessages, newStreamMessage]);
            setProcessQuerySignal(true);
        }
    }, [queryToProcess, conversationId, paramSlug]);
@@ -177,21 +174,19 @@ export default function SharedChat() {
        }
    }, [processQuerySignal]);

-
    async function readChatStream(response: Response) {
        if (!response.ok) throw new Error(response.statusText);
        if (!response.body) throw new Error("Response body is null");

        const reader = response.body.getReader();
        const decoder = new TextDecoder();
-        const eventDelimiter = '␃🔚␗';
+        const eventDelimiter = "␃🔚␗";
        let buffer = "";

        while (true) {
-
            const { done, value } = await reader.read();
            if (done) {
-                setQueryToProcess('');
+                setQueryToProcess("");
                setProcessQuerySignal(false);
                break;
            }
@@ -205,7 +200,7 @@ export default function SharedChat() {
                const event = buffer.slice(0, newEventIndex);
                buffer = buffer.slice(newEventIndex + eventDelimiter.length);
                if (event) {
-                    const currentMessage = messages.find(message => !message.completed);
+                    const currentMessage = messages.find((message) => !message.completed);

                    if (!currentMessage) {
                        console.error("No current message found");
@@ -217,7 +212,6 @@ export default function SharedChat() {
                    setMessages([...messages]);
                }
            }
-
        }
    }

@@ -246,11 +240,11 @@ export default function SharedChat() {
                    context: [],
                    onlineContext: {},
                    completed: false,
-                    timestamp: (new Date()).toISOString(),
+                    timestamp: new Date().toISOString(),
                    rawQuery: queryToProcess || "",
-                }
+                };
                setProcessQuerySignal(true);
-                setMessages(prevMessages => [...prevMessages, newStreamMessage]);
+                setMessages((prevMessages) => [...prevMessages, newStreamMessage]);
            }
        })();
    }, [conversationId, queryToProcess]);
@@ -260,19 +254,12 @@ export default function SharedChat() {
    }

    if (!paramSlug) {
-        return (
-            <div className={styles.suggestions}>
-                Whoops, nothing to see here!
-            </div>
-        );
+        return <div className={styles.suggestions}>Whoops, nothing to see here!</div>;
    }

-
    return (
        <div className={`${styles.main} ${styles.chatLayout}`}>
-            <title>
-                {title}
-            </title>
+            <title>{title}</title>
            <div className={styles.sidePanel}>
                <SidePanel
                    conversationId={conversationId ?? null}
@@ -293,10 +280,11 @@ export default function SharedChat() {
                            chatOptionsData={chatOptionsData}
                            setTitle={setTitle}
                            setUploadedFiles={setUploadedFiles}
-                            isMobileWidth={isMobileWidth} />
+                            isMobileWidth={isMobileWidth}
+                        />
                    </Suspense>
                </div>
            </div>
        </div>
-    )
+    );
 }