Websocket implementation

webui/frontend/package.json

@@ -9,24 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.2.10",
-    "framer-motion": "^11.0.25",
+    "@nextui-org/react": "^2.4.2",
+    "framer-motion": "^11.2.14",
     "next": "14.1.4",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-query": "^3.39.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.1.4",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5"
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
   }
 }

webui/frontend/src/app/components/Header.tsx

@@ -13,8 +13,10 @@ import { usePathname } from "next/navigation";
 const Header = () => {
   const pathName = usePathname();
 
+  const isSticky = pathName === "/" ? "sticky" : "static";
+
   return (
-    <Navbar>
+    <Navbar position={isSticky} className="absolute top-0 left-0">
       <NavbarBrand>
         <h1 className="text-2xl font-bold text-transparent bg-gradient-to-r from-blue-500 to-purple-700 bg-clip-text">
           Research Chain

webui/frontend/src/app/components/PromptInput.tsx

@@ -1,5 +1,6 @@
 "use client";
-import React, { Key, useState } from "react";
+import React, { Key, useState, useContext } from "react";
+import { SummarizerContext } from "@/app/context/SummarizerContext";
 import { Button, Tab, Tabs, Textarea } from "@nextui-org/react";
 import {
   UseMutationOptions,
@@ -14,8 +15,7 @@ type FormValues = {
 };
 
 type MutationResult = {
-  success: boolean;
-  message: string;
+  uuid: string;
 };
 
 function PromptInput() {
@@ -24,6 +24,7 @@ function PromptInput() {
     prompt: "",
     mode: "",
   });
+  const context = useContext(SummarizerContext);
 
   const FormData = z.object({
     prompt: z.string().min(1),
@@ -83,7 +84,9 @@ function PromptInput() {
         return result;
       },
       {
-        onSuccess: (result) => {},
+        onSuccess: (result) => {
+          context?.sendUuid(result.uuid);
+        },
         onError: (error) => {},
       } as UseMutationOptions<MutationResult, unknown, FormValues>
     );
@@ -103,7 +106,7 @@ function PromptInput() {
     }));
   };
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (crawlActive) {
       addCrawl.mutate(formValues);
@@ -113,54 +116,52 @@ function PromptInput() {
   };
 
   return (
-    <form className="w-3/5 flex-col" onSubmit={handleSubmit}>
-      <div className="w-full p-6 py-8 shadow-xl rounded-xl border border-opacity-10 border-gray-400 bg-black bg-opacity-15 z-10 flex flex-col justify-between">
-        <Textarea
-          type="text"
-          name="prompt"
-          value={formValues.prompt}
-          variant="underlined"
-          placeholder="Ask a question :)"
-          color="default"
-          size="lg"
-          minRows={1}
-          onChange={onPromptChange}
-          className="text-gray-300 px-3 text-large whitespace-normal"
-        />
+    <form className="flex-col" onSubmit={handleSubmit}>
+      <Textarea
+        type="text"
+        name="prompt"
+        value={formValues.prompt}
+        variant="underlined"
+        placeholder="Ask a question :)"
+        color="default"
+        size="lg"
+        minRows={1}
+        onChange={onPromptChange}
+        className="text-gray-300 px-3 text-large whitespace-normal"
+      />
+      <Tabs
+        size="md"
+        aria-label="Options"
+        color="primary"
+        variant="light"
+        onSelectionChange={onCrawlChange}
+        className="mt-4 mb-2 shadow-xl  rounded-xl  bg-black bg-opacity-15 z-10 flex flex-col justify-between"
+      >
+        <Tab key="crawl" title="Crawl" />
+        <Tab key="summarize" title="Summarize" />
+      </Tabs>
+      <div className="w-full mt-4 flex justify-between">
         <Tabs
-          size="md"
+          size="lg"
           aria-label="Options"
-          color="primary"
-          variant="light"
-          onSelectionChange={onCrawlChange}
-          className="mt-4 mb-2 shadow-xl  rounded-xl  bg-black bg-opacity-15 z-10 flex flex-col justify-between"
+          variant="underlined"
+          color="default"
+          onSelectionChange={onModeChange}
         >
-          <Tab key="crawl" title="Crawl" />
-          <Tab key="summarize" title="Summarize" />
+          <Tab key="news" title="News" />
+          <Tab key="docs" title="Documentation" />
+          <Tab key="wiki" title="Wikipedia" />
         </Tabs>
-        <div className="w-full mt-4 flex justify-between">
-          <Tabs
+        <div className="w-2/3 mr-3 flex flex-row-reverse">
+          <Button
             size="lg"
-            aria-label="Options"
-            variant="underlined"
+            type="submit"
             color="default"
-            onSelectionChange={onModeChange}
+            variant="bordered"
+            className="w-2/3 mr-3 flex flex-row-reverse"
           >
-            <Tab key="news" title="News" />
-            <Tab key="docs" title="Documentation" />
-            <Tab key="wiki" title="Wikipedia" />
-          </Tabs>
-          <div className="w-2/3 mr-3 flex flex-row-reverse">
-            <Button
-              size="lg"
-              type="submit"
-              color="default"
-              variant="bordered"
-              className="w-2/3 mr-3 flex flex-row-reverse"
-            >
-              Search
-            </Button>
-          </div>
+            Search
+          </Button>
         </div>
       </div>
     </form>

webui/frontend/src/app/components/RenderCompletion.tsx

@@ -0,0 +1,32 @@
+import { Spinner, Button } from "@nextui-org/react";
+import type { RenderCompletionProps } from "@/app/types/RenderCompletionProps";
+import { IoMdClose } from "react-icons/io";
+
+const RenderCompletion = ({
+  executing,
+  completion_result,
+  handleClose,
+}: RenderCompletionProps) => {
+  return (
+    <>
+      {executing ? (
+        <div className="flex items-center justify-center">
+          <Spinner label="Loading..." color="secondary" size="lg" />
+        </div>
+      ) : (
+        <div>
+          <p className="pb-4 text-primary text-2xl">Result</p>
+          <IoMdClose
+            className="rounded-2xl absolute top-2 right-2 hover:bg-gray-800 p-1 cursor-pointer text-3xl"
+            onClick={handleClose}
+          ></IoMdClose>
+          <div className="overflow-auto ">
+            <p className="text-lg">{completion_result}</p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default RenderCompletion;

webui/frontend/src/app/context/SummarizerContext.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { createContext, useState, ReactNode } from "react";
+
+interface SummarizerContextProps {
+  isSummarizing: boolean;
+  completion?: { uuid: string; status: string; payload: string } | null;
+  sendUuid: (uuid: string) => void;
+  handleCloseCompletionModal: () => void;
+}
+
+interface SummarizerContextProviderProps {
+  children?: ReactNode;
+}
+
+export const SummarizerContext = createContext<SummarizerContextProps | null>(
+  null
+);
+
+const SummarizerContextProvider = ({
+  children,
+}: SummarizerContextProviderProps) => {
+  const [isSummarizing, setIsSummarizing] = useState<boolean>(false);
+  const [completion, setCompletion] = useState<{
+    uuid: string;
+    status: string;
+    payload: string;
+  } | null>();
+
+  const socket = new WebSocket("ws://localhost:8000/ws");
+
+  const sendUuid = (uuid: string) => {
+    if (socket && socket.readyState === WebSocket.OPEN && uuid) {
+      setIsSummarizing(true);
+      socket.send(JSON.stringify({ uuid: uuid }));
+    }
+  };
+
+  socket.onmessage = (event) => {
+    try {
+      const completion = JSON.parse(event.data);
+      if (completion.uuid && completion.status === "summary completed") {
+        setCompletion(completion);
+        setIsSummarizing(false);
+      }
+    } catch (error) {
+      console.error("Error parsing message:", error);
+    }
+  };
+  console.log(isSummarizing, completion);
+
+  const handleCloseCompletionModal = () => {
+    setCompletion(null);
+  };
+
+  const value = {
+    isSummarizing,
+    completion,
+    sendUuid,
+    handleCloseCompletionModal,
+  };
+
+  return (
+    <SummarizerContext.Provider value={value}>
+      {children}
+    </SummarizerContext.Provider>
+  );
+};
+
+export default SummarizerContextProvider;

webui/frontend/src/app/crawl-history/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import Header from "../components/Header";
 import { UseQueryResult, useQuery } from "react-query";
 import HistoryCard from "../components/HistoryCard";
 import { CrawlResult } from "../types/TaskType";
@@ -14,13 +13,12 @@ const CrawlHistory = () => {
         throw new Error("Network response was not ok");
       }
       return response.json() as Promise<CrawlResult>;
-    }
+    },
   );
 
   if (isLoading) {
     return (
       <div className="h-full w-full">
-          <Header />
         <div className="text-center">Loading...</div>
       </div>
     );
@@ -29,7 +27,6 @@ const CrawlHistory = () => {
   if (isError) {
     return (
       <div className="h-screen w-screen">
-        <Header />
         <div className="text-center">Fetching data</div>
       </div>
     );
@@ -38,17 +35,15 @@ const CrawlHistory = () => {
   if (!data || data.tasks.length === 0) {
     return (
       <div className="h-screen w-screen">
-        <Header />
         <div className="text-center">There is no crawler history</div>
       </div>
     );
   }
 
   return (
-    <div className="h-screen w-screen flex-col">
-      <Header />
+    <div className="h-full w-screen flex-col">
       <div className="h-4/5 w-full flex-col items-center justify-center">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
+        <div className="grid grid-cols-1 pt-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
           {data.tasks.map((item) => (
             <HistoryCard key={item.uuid} item={item}></HistoryCard>
           ))}

webui/frontend/src/app/layout.tsx

@@ -1,13 +1,25 @@
-import {Providers} from "./providers";
-import './globals.css'
-export default function RootLayout({children}: { children: React.ReactNode }) {
+import React from "react";
+import { Metadata } from "next";
+import { Providers } from "./providers";
+import Header from "./components/Header";
+import "./globals.css";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <html lang="en" className='dark'>
+    <html lang="en" className="dark">
       <body>
         <Providers>
+          <Header />
           {children}
         </Providers>
       </body>
     </html>
   );
-}
+}
+
+export const metadata: Metadata = {
+  title: "Research Chain",
+};