-Created the websocket functionality

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

@@ -1,19 +1,27 @@
-import { Spinner } from "@nextui-org/react";
+import { Spinner, Button } from "@nextui-org/react";
 import type { RenderCompletionProps } from "@/app/types/RenderCompletionProps";
 
 const RenderCompletion = ({
   executing,
   completion_result,
+  handleClose,
 }: RenderCompletionProps) => {
   return (
-    <div className="w-3/5 flex-col" >
-      <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">
+    <div className="w-3/5 flex-col relative">
+      <div className="w-full px-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 relative">
         {executing ? (
           <div className="h-full w-full flex items-center justify-center">
             <Spinner label="Loading..." color="secondary" size="lg" />
           </div>
         ) : (
-          <p className="text-lg">{completion_result}</p>
+          <>
+            <p className="text-lg">{completion_result}</p>
+            <div className="w-full flex justify-end items-center">
+              <Button color="danger" variant="bordered" onClick={handleClose}>
+                Close
+              </Button>
+            </div>
+          </>
         )}
       </div>
     </div>

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

@@ -4,8 +4,9 @@ import { createContext, useState, ReactNode } from "react";
 
 interface SummarizerContextProps {
   isSummarizing: boolean;
-  completion?: { uuid: string; status: string; payload: string };
+  completion?: { uuid: string; status: string; payload: string } | null;
   sendUuid: (uuid: string) => void;
+  handleCloseCompletionModal: () => void;
 }
 
 interface SummarizerContextProviderProps {
@@ -24,13 +25,13 @@ const SummarizerContextProvider = ({
     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(false);
+      setIsSummarizing(true);
       socket.send(JSON.stringify({ uuid: uuid }));
     }
   };
@@ -40,19 +41,23 @@ const SummarizerContextProvider = ({
       const completion = JSON.parse(event.data);
       if (completion.uuid && completion.status === "summary completed") {
         setCompletion(completion);
-      } else {
-        console.error("Received message has an invalid structure:", 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 (

webui/frontend/src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { useContext } from "react";
 import PromptInput from "./components/PromptInput";
 import RenderCompletion from "./components/RenderCompletion";
@@ -8,12 +8,14 @@ export default function Page() {
   const context = useContext(SummarizerContext);
   const isSummarizing = context?.isSummarizing ?? false;
   const completion = context?.completion ?? null;
+  const handleCloseCompletionModal = context!.handleCloseCompletionModal;
   return (
     <>
       <main className="h-screen flex justify-center items-center flex-col">
         {isSummarizing || completion ? (
           <RenderCompletion
             executing={isSummarizing}
+            handleClose={handleCloseCompletionModal}
             completion_result={completion?.payload}
           />
         ) : (

webui/frontend/src/app/types/RenderCompletionProps.ts

@@ -1,4 +1,5 @@
 export interface RenderCompletionProps {
-    executing: boolean;
-    completion_result: string | undefined;
-}
+  executing: boolean;
+  completion_result: string | undefined;
+  handleClose: () => void;
+}

webui/main.py

@@ -83,6 +83,7 @@ async def on_connection(websocket: WebSocket):
             del active_connections[websocket]
 
 
+
 # This decorator allow to call async callback function in side synchronous context
 def sync(f):
     @functools.wraps(f)