From 135e75b812a44b66ee494c1529d8ddf61218734e Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 3 Jun 2025 20:00:25 +0700
Subject: [PATCH] fix: avatar assistants render (#5181)

* fix: avatar assistants render

* fix: delete assistant

* Update web-app/src/containers/dialogs/AddEditAssistant.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
---
 extensions/assistant-extension/src/index.ts   |  2 +-
 web-app/src/containers/AvatarEmoji.tsx        |  2 +-
 web-app/src/containers/DropdownAssistant.tsx  | 17 +++++++------
 web-app/src/containers/ThreadContent.tsx      | 16 ++++++------
 .../containers/dialogs/AddEditAssistant.tsx   | 15 ++++++-----
 web-app/src/routes/assistant.tsx              | 25 +++++++------------
 6 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/extensions/assistant-extension/src/index.ts b/extensions/assistant-extension/src/index.ts
index 9fc518c36..6706e5ff3 100644
--- a/extensions/assistant-extension/src/index.ts
+++ b/extensions/assistant-extension/src/index.ts
@@ -60,7 +60,7 @@ export default class JanAssistantExtension extends AssistantExtension {
       'assistant.json',
     ])
     if (await fs.existsSync(assistantPath)) {
-      await fs.unlinkSync(assistantPath)
+      await fs.rm(assistantPath)
     }
   }
 
diff --git a/web-app/src/containers/AvatarEmoji.tsx b/web-app/src/containers/AvatarEmoji.tsx
index 65a4bcef0..71444b9eb 100644
--- a/web-app/src/containers/AvatarEmoji.tsx
+++ b/web-app/src/containers/AvatarEmoji.tsx
@@ -12,7 +12,6 @@ const isCustomImageAvatar = (avatar: React.ReactNode): avatar is string => {
  */
 interface AvatarEmojiProps {
   avatar?: React.ReactNode
-  fallback?: React.ReactNode
   imageClassName?: string
   textClassName?: string
 }
@@ -22,6 +21,7 @@ export const AvatarEmoji: React.FC<AvatarEmojiProps> = ({
   imageClassName = 'w-5 h-5 object-contain',
   textClassName = 'text-base',
 }) => {
+  if (!avatar) return null
   if (isCustomImageAvatar(avatar)) {
     return <img src={avatar} alt="Custom avatar" className={imageClassName} />
   }
diff --git a/web-app/src/containers/DropdownAssistant.tsx b/web-app/src/containers/DropdownAssistant.tsx
index aa0649aa1..67f4ef3bf 100644
--- a/web-app/src/containers/DropdownAssistant.tsx
+++ b/web-app/src/containers/DropdownAssistant.tsx
@@ -87,13 +87,16 @@ const DropdownAssistant = () => {
                     updateCurrentThreadAssistant(assistant)
                   }}
                 >
-                  <div className="shrink-0 relative w-4 h-4">
-                    <AvatarEmoji
-                      avatar={assistant?.avatar}
-                      imageClassName="object-cover"
-                      textClassName=""
-                    />
-                  </div>
+                  {assistant?.avatar && (
+                    <div className="shrink-0 relative w-4 h-4">
+                      <AvatarEmoji
+                        avatar={assistant?.avatar}
+                        imageClassName="object-cover"
+                        textClassName=""
+                      />
+                    </div>
+                  )}
+
                   <div className="text-left">
                     <span className="line-clamp-1">{assistant.name}</span>
                   </div>
diff --git a/web-app/src/containers/ThreadContent.tsx b/web-app/src/containers/ThreadContent.tsx
index ac843e4f2..01e5ed59c 100644
--- a/web-app/src/containers/ThreadContent.tsx
+++ b/web-app/src/containers/ThreadContent.tsx
@@ -275,13 +275,15 @@ export const ThreadContent = memo(
           <>
             {item.showAssistant && (
               <div className="flex items-center gap-2 mb-3 text-main-view-fg/60">
-                <div className="flex items-center gap-2 size-8 rounded-md justify-center border border-main-view-fg/10 bg-main-view-fg/5 p-1">
-                  <AvatarEmoji
-                    avatar={assistant?.avatar}
-                    imageClassName="w-6 h-6 object-contain"
-                    textClassName="text-base"
-                  />
-                </div>
+                {assistant?.avatar && (
+                  <div className="flex items-center gap-2 size-8 rounded-md justify-center border border-main-view-fg/10 bg-main-view-fg/5 p-1">
+                    <AvatarEmoji
+                      avatar={assistant?.avatar}
+                      imageClassName="w-6 h-6 object-contain"
+                      textClassName="text-base"
+                    />
+                  </div>
+                )}
 
                 <div className="flex flex-col">
                   <span className="text-main-view-fg font-medium">
diff --git a/web-app/src/containers/dialogs/AddEditAssistant.tsx b/web-app/src/containers/dialogs/AddEditAssistant.tsx
index 7b99bb686..1da79fe37 100644
--- a/web-app/src/containers/dialogs/AddEditAssistant.tsx
+++ b/web-app/src/containers/dialogs/AddEditAssistant.tsx
@@ -233,12 +233,15 @@ export default function AddEditAssistant({
                 className="border rounded-sm p-1 w-9 h-9 flex items-center justify-center border-main-view-fg/10 cursor-pointer"
                 onClick={() => setShowEmojiPicker(!showEmojiPicker)}
               >
-                <AvatarEmoji
-                  avatar={avatar}
-                  imageClassName="w-5 h-5 object-contain"
-                  textClassName=""
-                />
-                <IconMoodSmile size={18} className="text-main-view-fg/50" />
+                {avatar ? (
+                  <AvatarEmoji
+                    avatar={avatar}
+                    imageClassName="w-5 h-5 object-contain"
+                    textClassName=""
+                  />
+                ) : (
+                  <IconMoodSmile size={18} className="text-main-view-fg/50" />
+                )}
               </div>
               <div className="relative" ref={emojiPickerRef}>
                 <EmojiPicker
diff --git a/web-app/src/routes/assistant.tsx b/web-app/src/routes/assistant.tsx
index b6b453e0d..cd6c6b522 100644
--- a/web-app/src/routes/assistant.tsx
+++ b/web-app/src/routes/assistant.tsx
@@ -69,26 +69,19 @@ function Assistant() {
               <div className="flex items-center justify-between gap-2">
                 <h3 className="text-base font-medium text-main-view-fg/80">
                   <div className="flex items-center gap-1">
-                    <span className="shrink-0 w-4 h-4 relative flex items-center justify-center">
-                      <AvatarEmoji
-                        avatar={assistant?.avatar}
-                        imageClassName="object-cover"
-                        textClassName="text-sm"
-                      />
-                    </span>
+                    {assistant?.avatar && (
+                      <span className="shrink-0 w-4 h-4 relative flex items-center justify-center">
+                        <AvatarEmoji
+                          avatar={assistant?.avatar}
+                          imageClassName="object-cover"
+                          textClassName="text-sm"
+                        />
+                      </span>
+                    )}
                     <span className="line-clamp-1">{assistant.name}</span>
                   </div>
                 </h3>
                 <div className="flex items-center gap-0.5">
-                  {/* <div
-                    className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
-                    title="Edit Assistant in JSON"
-                  >
-                    <IconCodeCircle
-                      size={18}
-                      className="text-main-view-fg/50"
-                    />
-                  </div> */}
                   <div
                     className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
                     title="Edit Assistant"