Enable deleting assistants via UI.

brighthive · May 3, 2024 · ff14091 · ff14091
1 parent 5b10ff0
commit ff14091
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -21,7 +21,7 @@ function App(props: { edit?: boolean }) {
   const navigate = useNavigate();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const { chats, createChat, deleteChat } = useChatList();
-  const { configs, saveConfig } = useConfigList();
+  const { configs, saveConfig, deleteConfig } = useConfigList();
   const { startStream, stopStream, stream } = useStreamState();
   const { configSchema, configDefaults } = useSchemas();
 
@@ -153,6 +153,7 @@ function App(props: { edit?: boolean }) {
           configs={configs}
           saveConfig={saveConfig}
           enterConfig={selectConfig}
+          deleteConfig={deleteConfig}
         />
       )}
       {!currentChat && assistantConfig && props.edit && (

diff --git a/frontend/src/components/ConfigList.tsx b/frontend/src/components/ConfigList.tsx
@@ -1,13 +1,14 @@
 import { TYPES } from "../constants";
 import { Config, ConfigListProps } from "../hooks/useConfigList";
 import { cn } from "../utils/cn";
-import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { PencilSquareIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Link } from "react-router-dom";
 
 function ConfigItem(props: {
   config: Config;
   currentConfig: Config | null;
   enterConfig: (id: string | null) => void;
+  deleteConfig: (id: string) => void;
 }) {
   return (
     <li key={props.config.assistant_id}>
@@ -50,6 +51,22 @@ function ConfigItem(props: {
         >
           <PencilSquareIcon />
         </Link>
+        <Link
+          className="w-5"
+          to="#"
+          onClick={(event) => {
+            event.preventDefault();
+            if (
+              window.confirm(
+                `Are you sure you want to delete bot "${props.config.name}?"`,
+              )
+            ) {
+              props.deleteConfig(props.config.assistant_id);
+            }
+          }}
+        >
+          <TrashIcon />
+        </Link>
       </div>
     </li>
   );
@@ -59,6 +76,7 @@ export function ConfigList(props: {
   configs: ConfigListProps["configs"];
   currentConfig: Config | null;
   enterConfig: (id: string | null) => void;
+  deleteConfig: (id: string) => void;
 }) {
   return (
     <>
@@ -74,6 +92,7 @@ export function ConfigList(props: {
               config={assistant}
               currentConfig={props.currentConfig}
               enterConfig={props.enterConfig}
+              deleteConfig={props.deleteConfig}
             />
           )) ?? (
           <li className="leading-6 p-2 animate-pulse font-black text-gray-400 text-lg">
@@ -94,6 +113,7 @@ export function ConfigList(props: {
               config={assistant}
               currentConfig={props.currentConfig}
               enterConfig={props.enterConfig}
+              deleteConfig={props.deleteConfig}
             />
           )) ?? (
           <li className="leading-6 p-2 animate-pulse font-black text-gray-400 text-lg">

diff --git a/frontend/src/components/NewChat.tsx b/frontend/src/components/NewChat.tsx
@@ -15,6 +15,7 @@ interface NewChatProps extends ConfigListProps {
   configSchema: Schemas["configSchema"];
   configDefaults: Schemas["configDefaults"];
   enterConfig: (id: string | null) => void;
+  deleteConfig: (id: string) => Promise<void>;
   startChat: (
     config: ConfigInterface,
     message: MessageWithFiles,
@@ -39,11 +40,12 @@ export function NewChat(props: NewChatProps) {
       )}
     >
       <div className="flex-1 flex flex-col md:flex-row lg:items-stretch self-stretch">
-        <div className="w-72 border-r border-gray-200 pr-6">
+        <div className="md:w-72 border-r border-gray-200 pr-6">
           <ConfigList
             configs={props.configs}
             currentConfig={assistantConfig}
             enterConfig={(id) => navigator(`/assistant/${id}`)}
+            deleteConfig={props.deleteConfig}
           />
         </div>
 

diff --git a/frontend/src/hooks/useConfigList.ts b/frontend/src/hooks/useConfigList.ts
@@ -30,6 +30,7 @@ export interface ConfigListProps {
     isPublic: boolean,
     assistantId?: string,
   ) => Promise<string>;
+  deleteConfig: (assistantId: string) => Promise<void>;
 }
 
 function configsReducer(
@@ -102,8 +103,22 @@ export function useConfigList(): ConfigListProps {
     [],
   );
 
+  const deleteConfig = useCallback(
+    async (assistantId: string): Promise<void> => {
+      await fetch(`/assistants/${assistantId}`, {
+        method: "DELETE",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+      setConfigs((configs || []).filter((c) => c.assistant_id !== assistantId));
+    },
+    [configs],
+  );
+
   return {
     configs,
     saveConfig,
+    deleteConfig,
   };
 }