Improve: socket management, errors

ui/src/lib/api.js

@@ -23,8 +23,15 @@ const getApiBaseUrl = () => {
 };
 
 export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || getApiBaseUrl();
-export const socket = io(API_BASE_URL);
+export const socket = io(API_BASE_URL, { autoConnect: false });
 
+export async function checkServerStatus() {
+  try{await fetch(`${API_BASE_URL}/api/status`) ; return true;}
+  catch (error) {
+    return false;
+  }
+
+}
 
 export async function fetchInitialData() {
   const response = await fetch(`${API_BASE_URL}/api/data`);

ui/src/lib/components/ControlPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte";
-  import { projectList, modelList, internet, tokenUsage, agentState, messages, searchEngineList} from "$lib/store";
+  import { projectList, modelList, internet, tokenUsage, agentState, messages, searchEngineList, serverStatus, isSending} from "$lib/store";
   import { createProject, fetchMessages, fetchInitialData, deleteProject, fetchAgentState} from "$lib/api";
   import { get } from "svelte/store";
   import Seperator from "./ui/Seperator.svelte";
@@ -10,7 +10,7 @@
   let selectedSearchEngine;
 
   const checkListAndSetItem = (list, itemKey, defaultItem) => {
-    if (get(list) && get(list).length > 0) {
+    if (get(list)) {
       const item = localStorage.getItem(itemKey);
       return item ? item : defaultItem;
     } else {
@@ -19,10 +19,6 @@
     }
   };
 
-  selectedProject = checkListAndSetItem( projectList, "selectedProject", "Select Project");
-  selectedModel = checkListAndSetItem( modelList, "selectedModel", "Select Model");
-  selectedSearchEngine = checkListAndSetItem( searchEngineList, "selectedSearchEngine", "Select Search Engine");
-
   function selectProject(project) {
     selectedProject = project;
     localStorage.setItem("selectedProject", project);
@@ -32,7 +28,7 @@
   }
   function selectModel(model) {
     selectedModel = `${model[0]}`;
-    localStorage.setItem("selectedModel", model[1]);
+    localStorage.setItem("selectedModel", model[0]);
     document.getElementById("model-dropdown").classList.add("hidden");
   }
   function selectSearchEngine(searchEngine) {
@@ -56,6 +52,8 @@
       messages.set([]);
       agentState.set(null);
       tokenUsage.set(0);
+      agentState.set(null);
+      isSending.set(false);
       selectedProject = "Select Project";
       localStorage.setItem("selectedProject", "");
     }
@@ -82,6 +80,16 @@
     });
   }
   onMount(() => {
+    
+    (async () => {
+      if(serverStatus){
+        await fetchInitialData();
+      }
+    })();
+
+    selectedProject = "Select Project";
+    selectedModel = checkListAndSetItem( modelList, "selectedModel", "Select Model");
+    selectedSearchEngine = checkListAndSetItem( searchEngineList, "selectedSearchEngine", "Select Search Engine");
     dropdowns.forEach(({ dropdown, button }) => {
       document.getElementById(button).addEventListener("click", function () {
         const dropdownElement = document.getElementById(dropdown);

ui/src/lib/components/MessageInput.svelte

@@ -2,10 +2,11 @@
   import { socket } from "$lib/api";
   import { agentState, messages, isSending } from "$lib/store";
   import { calculateTokens } from "$lib/token";
+  import { onMount } from "svelte";
   import { Icons } from "../icons";
 
   let isAgentActive = false;
-
+  let inference_time = 0;
   if ($agentState !== null) {
     isAgentActive = $agentState.agent_is_active;
 
@@ -29,15 +30,6 @@
       $isSending = true;
       if ($messages.length === 0) {
         socket.emit("user-message", { 
-          action: "execute_agent",
-          message: messageInput,
-          base_model: selectedModel,
-          project_name: projectName,
-          search_engine: serachEngine,
-        });
-      } else {
-        socket.emit("user-message", { 
-          action: "continue",
           message: messageInput,
           base_model: selectedModel,
           project_name: projectName,
@@ -48,28 +40,43 @@
       
     }
   }
-
+  onMount(() => {
+    socket.on("inference", function (data) {
+      if(data['type'] == 'time') {
+        inference_time = data["elapsed_time"];
+      }
+    });
+  });
+       
   function setTokenSize(event) {
     const prompt = event.target.value;
     let tokens = calculateTokens(prompt);
     document.querySelector(".token-count").textContent = `${tokens}`;
   }
 </script>
 
-<div class="expandable-input relative">
-  <div class="py-3 px-1 rounded-md text-xs">
-    Agent status:
-    {#if $agentState !== null}
-      {#if $agentState.agent_is_active}
-        <span class="text-green-500">Active</span>
+<div class="flex flex-col gap-2">
+  <div class="flex gap-4 justify-between">
+    <div class="px-1 rounded-md text-xs">
+      Agent status:
+      {#if $agentState !== null}
+        {#if $agentState.agent_is_active}
+          <span class="text-green-500">Active</span>
+        {:else}
+          <span class="text-orange-600">Inactive</span>
+        {/if}
       {:else}
-        <span class="text-orange-600">Inactive</span>
+        Deactive
       {/if}
-    {:else}
-      Deactive
-    {/if}
+    </div>
+    <!-- {#if $agentState !== null} -->
+      <div class="px-1 rounded-md text-xs">
+        Model Inference: <span class="text-orange-600">{inference_time} sec</span>
+      </div>
+    <!-- {/if} -->
   </div>
 
+<div class="expandable-input relative">
   <textarea
     id="message-input"
     class="w-full p-4 font-medium focus:text-foreground rounded-xl outline-none h-28 pr-20 bg-secondary
@@ -82,10 +89,10 @@
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         handleSendMessage();
+        document.querySelector('.token-count').textContent = 0;
       }
     }}
   ></textarea>
-
   <button 
     on:click={handleSendMessage}
     disabled={$isSending}
@@ -94,10 +101,11 @@
   >
   {@html Icons.CornerDownLeft} 
   </button>
-  <p class="absolute text-tertiary p-2 right-4 top-12">
+  <p class="absolute text-tertiary p-2 right-4 top-2">
     <span class="token-count">0</span>
   </p>
 </div>
+</div>
 
 <style>
   .expandable-input textarea {

ui/src/lib/components/ui/sonner/sonner.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <Sonner
+	richColors
 	theme={$mode}
 	position="bottom-left"
 	class="toaster group"

ui/src/lib/sockets.js

@@ -0,0 +1,79 @@
+import { socket } from "./api";
+import { messages, agentState, isSending, tokenUsage } from "./store";
+import { toast } from "svelte-sonner";
+import { get } from "svelte/store";
+
+let prevMonologue = null;
+
+export function initializeSockets() {
+  socket.connect();
+
+  let state = get(agentState);
+  prevMonologue = state?.internal_monologue;
+
+  socket.emit("socket_connect", { data: "frontend connected!" });
+  socket.on("socket_response", function (msg) {
+    console.log(msg);
+  });
+
+  socket.on("server-message", function (data) {
+    console.log("server-message: ", data);
+    messages.update((msgs) => [...msgs, data["messages"]]);
+  });
+
+  socket.on("agent-state", function (state) {
+    const lastState = state[state.length - 1];
+    agentState.set(lastState);
+    if (lastState.completed) {
+      isSending.set(false);
+    }
+  });
+
+  socket.on("tokens", function (tokens) {
+    tokenUsage.set(tokens["token_usage"]);
+  });
+
+  socket.on("inference", function (error) {
+    if (error["type"] == "error") {
+      toast.error(error["message"]);
+    } else if (error["type"] == "warning") {
+      toast.warning(error["message"]);
+    }
+  });
+
+  socket.on("info", function (info) {
+    if (info["type"] == "error") {
+      toast.error(info["message"]);
+    } else if (info["type"] == "warning") {
+      toast.warning(info["message"]);
+    } else if (info["type"] == "info") {
+      toast.info(info["message"]);
+    }
+  });
+
+
+  agentState.subscribe((state) => {
+    function handleMonologueChange(newValue) {
+      if (newValue) {
+        toast(newValue);
+      }
+    }
+    if (
+      state &&
+      state.internal_monologue &&
+      state.internal_monologue !== prevMonologue
+    ) {
+      handleMonologueChange(state.internal_monologue);
+      prevMonologue = state.internal_monologue;
+    }
+  });
+}
+
+export function destroySockets() {
+  if (socket.connected) {
+    socket.off("socket_response");
+    socket.off("server-message");
+    socket.off("agent-state");
+    socket.off("tokens");
+  }
+}

ui/src/lib/store.js

@@ -1,23 +1,11 @@
 import { writable } from 'svelte/store';
 
-const getInitialSelectedProject = () => {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    return localStorage.getItem('selectedProject') || '';
-  }
-  return '';
-};
-
-const getInitialSelectedModel = () => {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    return localStorage.getItem('selectedModel') || '';
-  }
-  return '';
-};
+export const serverStatus = writable(false);
 
 export const messages = writable([]);
 
-export const selectedProject = writable(getInitialSelectedProject());
-export const selectedModel = writable(getInitialSelectedModel());
+export const selectedProject = writable('');
+export const selectedModel = writable('');
 
 export const projectList = writable([]);
 export const modelList = writable({});
@@ -28,16 +16,3 @@ export const isSending = writable(false);
 
 export const internet = writable(true);
 export const tokenUsage = writable(0);
-
-
-selectedProject.subscribe((value) => {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    localStorage.setItem('selectedProject', value);
-  }
-});
-
-selectedModel.subscribe((value) => {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    localStorage.setItem('selectedModel', value);
-  }
-});