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>
This commit is contained in:
Faisal Amir 2025-06-03 20:00:25 +07:00 committed by GitHub
parent a3ebabfd4e
commit 135e75b812
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 39 additions and 38 deletions

View File

@ -60,7 +60,7 @@ export default class JanAssistantExtension extends AssistantExtension {
'assistant.json', 'assistant.json',
]) ])
if (await fs.existsSync(assistantPath)) { if (await fs.existsSync(assistantPath)) {
await fs.unlinkSync(assistantPath) await fs.rm(assistantPath)
} }
} }

View File

@ -12,7 +12,6 @@ const isCustomImageAvatar = (avatar: React.ReactNode): avatar is string => {
*/ */
interface AvatarEmojiProps { interface AvatarEmojiProps {
avatar?: React.ReactNode avatar?: React.ReactNode
fallback?: React.ReactNode
imageClassName?: string imageClassName?: string
textClassName?: string textClassName?: string
} }
@ -22,6 +21,7 @@ export const AvatarEmoji: React.FC<AvatarEmojiProps> = ({
imageClassName = 'w-5 h-5 object-contain', imageClassName = 'w-5 h-5 object-contain',
textClassName = 'text-base', textClassName = 'text-base',
}) => { }) => {
if (!avatar) return null
if (isCustomImageAvatar(avatar)) { if (isCustomImageAvatar(avatar)) {
return <img src={avatar} alt="Custom avatar" className={imageClassName} /> return <img src={avatar} alt="Custom avatar" className={imageClassName} />
} }

View File

@ -87,13 +87,16 @@ const DropdownAssistant = () => {
updateCurrentThreadAssistant(assistant) updateCurrentThreadAssistant(assistant)
}} }}
> >
<div className="shrink-0 relative w-4 h-4"> {assistant?.avatar && (
<AvatarEmoji <div className="shrink-0 relative w-4 h-4">
avatar={assistant?.avatar} <AvatarEmoji
imageClassName="object-cover" avatar={assistant?.avatar}
textClassName="" imageClassName="object-cover"
/> textClassName=""
</div> />
</div>
)}
<div className="text-left"> <div className="text-left">
<span className="line-clamp-1">{assistant.name}</span> <span className="line-clamp-1">{assistant.name}</span>
</div> </div>

View File

@ -275,13 +275,15 @@ export const ThreadContent = memo(
<> <>
{item.showAssistant && ( {item.showAssistant && (
<div className="flex items-center gap-2 mb-3 text-main-view-fg/60"> <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"> {assistant?.avatar && (
<AvatarEmoji <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">
avatar={assistant?.avatar} <AvatarEmoji
imageClassName="w-6 h-6 object-contain" avatar={assistant?.avatar}
textClassName="text-base" imageClassName="w-6 h-6 object-contain"
/> textClassName="text-base"
</div> />
</div>
)}
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-main-view-fg font-medium"> <span className="text-main-view-fg font-medium">

View File

@ -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" 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)} onClick={() => setShowEmojiPicker(!showEmojiPicker)}
> >
<AvatarEmoji {avatar ? (
avatar={avatar} <AvatarEmoji
imageClassName="w-5 h-5 object-contain" avatar={avatar}
textClassName="" imageClassName="w-5 h-5 object-contain"
/> textClassName=""
<IconMoodSmile size={18} className="text-main-view-fg/50" /> />
) : (
<IconMoodSmile size={18} className="text-main-view-fg/50" />
)}
</div> </div>
<div className="relative" ref={emojiPickerRef}> <div className="relative" ref={emojiPickerRef}>
<EmojiPicker <EmojiPicker

View File

@ -69,26 +69,19 @@ function Assistant() {
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<h3 className="text-base font-medium text-main-view-fg/80"> <h3 className="text-base font-medium text-main-view-fg/80">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="shrink-0 w-4 h-4 relative flex items-center justify-center"> {assistant?.avatar && (
<AvatarEmoji <span className="shrink-0 w-4 h-4 relative flex items-center justify-center">
avatar={assistant?.avatar} <AvatarEmoji
imageClassName="object-cover" avatar={assistant?.avatar}
textClassName="text-sm" imageClassName="object-cover"
/> textClassName="text-sm"
</span> />
</span>
)}
<span className="line-clamp-1">{assistant.name}</span> <span className="line-clamp-1">{assistant.name}</span>
</div> </div>
</h3> </h3>
<div className="flex items-center gap-0.5"> <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 <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" 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" title="Edit Assistant"