Enable persistence / removal of assistant icons + remove accidental regression (#2153)

* enable persistence / removal of assistant icons + remove accidental regression

* simpler env seeding for web building

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -114,6 +114,7 @@ export function AssistantEditor({
 
   const [finalPrompt, setFinalPrompt] = useState<string | null>("");
   const [finalPromptError, setFinalPromptError] = useState<string>("");
+  const [removePersonaImage, setRemovePersonaImage] = useState(false);
 
   const triggerFinalPromptUpdate = async (
     systemPrompt: string,
@@ -228,6 +229,9 @@ export function AssistantEditor({
     groups: existingPersona?.groups ?? [],
   };
 
+  const [existingPersonaImageId, setExistingPersonaImageId] = useState<
+    string | null
+  >(existingPersona?.uploaded_image_id || null);
   return (
     <div>
       {popup}
@@ -352,6 +356,7 @@ export function AssistantEditor({
                 user && !checkUserIsNoAuthUser(user.id) ? [user.id] : undefined,
               groups,
               tool_ids: enabledTools,
+              remove_image: removePersonaImage,
             });
           } else {
             [promptResponse, personaResponse] = await createPersona({
@@ -488,7 +493,9 @@ export function AssistantEditor({
 
                   <IconImageSelection
                     setFieldValue={setFieldValue}
-                    existingPersona={existingPersona!}
+                    existingPersonaImageId={existingPersonaImageId!}
+                    setExistingPersonaImageId={setExistingPersonaImageId}
+                    setRemovePersonaImage={setRemovePersonaImage}
                   />
                 </div>
 

web/src/app/admin/assistants/lib.ts

@@ -18,6 +18,7 @@ interface PersonaCreationRequest {
   tool_ids: number[];
   icon_color: string | null;
   icon_shape: number | null;
+  remove_image?: boolean;
   uploaded_image: File | null;
 }
 
@@ -41,6 +42,7 @@ interface PersonaUpdateRequest {
   tool_ids: number[];
   icon_color: string | null;
   icon_shape: number | null;
+  remove_image: boolean;
   uploaded_image: File | null;
 }
 
@@ -119,6 +121,7 @@ function buildPersonaAPIBody(
     tool_ids,
     icon_color,
     icon_shape,
+    remove_image,
   } = creationRequest;
 
   return {
@@ -140,6 +143,7 @@ function buildPersonaAPIBody(
     icon_color,
     icon_shape,
     uploaded_image_id,
+    remove_image,
   };
 }
 

web/src/app/chat/sessionSidebar/PagesTab.tsx

@@ -71,7 +71,6 @@ export function PagesTab({
         <div className="py-2 border-b border-border">
           <div className="text-xs text-subtle flex pb-0.5 mb-1.5 mt-2 font-bold">
             Chat Folders
-            {newFolderId ? newFolderId : "Hi"}
           </div>
           <FolderList
             newFolderId={newFolderId}

web/src/components/assistants/AssistantIconCreation.tsx

@@ -1,19 +1,23 @@
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { buildImgUrl } from "@/app/chat/files/images/utils";
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import Dropzone from "react-dropzone";
 import { usePopup } from "../admin/connectors/Popup";
 
 export const IconImageSelection = ({
-  existingPersona,
   setFieldValue,
+  existingPersonaImageId,
+  setExistingPersonaImageId,
+  setRemovePersonaImage,
 }: {
-  existingPersona: Persona | null;
+  setExistingPersonaImageId: Dispatch<SetStateAction<string | null>>;
+  existingPersonaImageId: string | null;
   setFieldValue: (
     field: string,
     value: any,
     shouldValidate?: boolean
   ) => Promise<any>;
+  setRemovePersonaImage: Dispatch<SetStateAction<boolean>>;
 }) => {
   const [uploadedImage, setUploadedImage] = useState<File | null>(null);
 
@@ -22,19 +26,37 @@ export const IconImageSelection = ({
     setFieldValue("uploaded_image", image);
   };
 
+  const resetPreviousAssistantImage = () => {
+    setRemovePersonaImage(true);
+    setExistingPersonaImageId(null);
+  };
+
   return (
     <div className="mt-2 gap-y-2 flex flex-col">
       <p className="font-bold text-sm text-gray-800">Or Upload Image</p>
-      {existingPersona && existingPersona.uploaded_image_id && (
+      {existingPersonaImageId && (
         <div className="flex gap-x-2">
           Current image:
           <img
             className="h-12 w-12"
-            src={buildImgUrl(existingPersona?.uploaded_image_id)}
+            src={buildImgUrl(existingPersonaImageId)}
           />
         </div>
       )}
-      <IconImageUpload selectedFile={uploadedImage} updateFile={updateFile} />
+      <div className="flex gap-x-2">
+        <IconImageUpload selectedFile={uploadedImage} updateFile={updateFile} />
+        {existingPersonaImageId && (
+          <button
+            onClick={resetPreviousAssistantImage}
+            className={
+              "text-sm text-text-800 max-w-[200px] p-2 rounded " +
+              "shadow-lg border border-border cursor-pointer"
+            }
+          >
+            Remove current image
+          </button>
+        )}
+      </div>
       <p className="text-sm text-gray-600">
         Uploading an image will override the generated icon.
       </p>