Topic edit assistant (#267)

* edit one

* PUT / POST switch based on if we are creating or editing

* link to edit

Author: mkorpela

frontend/src/App.tsx

@@ -16,7 +16,7 @@ import { MessageWithFiles } from "./utils/formTypes.ts";
 import { useNavigate } from "react-router-dom";
 import { useThreadAndAssistant } from "./hooks/useThreadAndAssistant.ts";
 
-function App() {
+function App(props: { edit?: boolean }) {
   const navigate = useNavigate();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const { chats, createChat } = useChatList();
@@ -124,7 +124,7 @@ function App() {
       {currentChat && assistantConfig && (
         <Chat startStream={startTurn} stopStream={stopStream} stream={stream} />
       )}
-      {!currentChat && assistantConfig && (
+      {!currentChat && assistantConfig && !props.edit && (
         <NewChat
           startChat={startChat}
           configSchema={configSchema}
@@ -134,6 +134,17 @@ function App() {
           enterConfig={selectConfig}
         />
       )}
+      {!currentChat && assistantConfig && props.edit && (
+        <Config
+          className="mb-6"
+          config={assistantConfig}
+          configSchema={configSchema}
+          configDefaults={configDefaults}
+          saveConfig={saveConfig}
+          enterConfig={selectConfig}
+          edit={props.edit}
+        />
+      )}
       {!currentChat && !assistantConfig && !isLoading && (
         <Config
           className="mb-6"

frontend/src/components/Config.tsx

@@ -484,6 +484,7 @@ export function Config(props: {
   config: ConfigInterface | null;
   saveConfig: ConfigListProps["saveConfig"];
   enterConfig: (id: string | null) => void;
+  edit?: boolean;
 }) {
   const [values, setValues] = useState(
     props.config?.config ?? props.configDefaults,
@@ -537,9 +538,9 @@ export function Config(props: {
     }
   }, [dropzone.acceptedFiles, setFiles]);
   const [inflight, setInflight] = useState(false);
-  const readonly = !!props.config && !inflight;
+  const readonly = !!props.config && !props.edit && !inflight;
 
-  const settings = !props.config ? (
+  const settings = !readonly ? (
     <div className="flex flex-row gap-4">
       <div className="flex flex-row flex-1">
         <div className="relative flex flex-grow items-stretch focus-within:z-10">
@@ -550,6 +551,7 @@ export function Config(props: {
             autoComplete="off"
             className="block w-full rounded-none rounded-l-md border-0 py-1.5 pl-4 text-gray-900 ring-1 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 ring-inset ring-gray-300"
             placeholder="Name your bot"
+            defaultValue={props.config?.name}
           />
         </div>
         <button
@@ -564,7 +566,7 @@ export function Config(props: {
     </div>
   ) : (
     <>
-      {props.config.public && (
+      {props.config?.public && (
         <PublicLink assistantId={props.config?.assistant_id} />
       )}
     </>
@@ -585,7 +587,13 @@ export function Config(props: {
           vals.configurable["type==agent/tools"] = [...selectedTools];
           setSelectedTools([]);
         }
-        const assistantId = await props.saveConfig(key, vals!, files, isPublic);
+        const assistantId = await props.saveConfig(
+          key,
+          vals!,
+          files,
+          isPublic,
+          props.config?.assistant_id,
+        );
         props.enterConfig(assistantId);
         setInflight(false);
       }}

frontend/src/components/ConfigList.tsx

@@ -1,6 +1,8 @@
 import { TYPES } from "../constants";
 import { Config, ConfigListProps } from "../hooks/useConfigList";
 import { cn } from "../utils/cn";
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { Link } from "react-router-dom";
 
 function ConfigItem(props: {
   config: Config;
@@ -41,6 +43,13 @@ function ConfigItem(props: {
             }
           </span>
         </div>
+        <Link
+          className="ml-auto w-5"
+          to={`/assistant/${props.config.assistant_id}/edit`}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <PencilSquareIcon />
+        </Link>
       </div>
     </li>
   );

frontend/src/hooks/useConfigList.ts

@@ -22,6 +22,7 @@ export interface ConfigListProps {
     config: Config["config"],
     files: File[],
     isPublic: boolean,
+    assistantId?: string,
   ) => Promise<string>;
 }
 
@@ -64,15 +65,19 @@ export function useConfigList(): ConfigListProps {
       config: Config["config"],
       files: File[],
       isPublic: boolean,
+      assistantId?: string,
     ): Promise<string> => {
-      const confResponse = await fetch(`/assistants`, {
-        method: "POST",
-        body: JSON.stringify({ name, config, public: isPublic }),
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
+      const confResponse = await fetch(
+        assistantId ? `/assistants/${assistantId}` : "/assistants",
+        {
+          method: assistantId ? "PUT" : "POST",
+          body: JSON.stringify({ name, config, public: isPublic }),
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
         },
-      });
+      );
       const savedConfig = (await confResponse.json()) as Config;
       if (files.length) {
         const assistant_id = savedConfig.assistant_id;

frontend/src/main.tsx

@@ -19,6 +19,10 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <BrowserRouter>
         <Routes>
           <Route path="/thread/:chatId" element={<App />} />
+          <Route
+            path="/assistant/:assistantId/edit"
+            element={<App edit={true} />}
+          />
           <Route path="/assistant/:assistantId" element={<App />} />
           <Route path="/" element={<App />} />
           <Route path="*" element={<NotFound />} />