diff --git a/desktop/src/features/channels/ui/AddChannelBotPersonasSection.tsx b/desktop/src/features/channels/ui/AddChannelBotPersonasSection.tsx index f5a8465f9..55e535503 100644 --- a/desktop/src/features/channels/ui/AddChannelBotPersonasSection.tsx +++ b/desktop/src/features/channels/ui/AddChannelBotPersonasSection.tsx @@ -1,5 +1,8 @@ +import { Bot } from "lucide-react"; + import type { AgentPersona } from "@/shared/api/types"; import { cn } from "@/shared/lib/cn"; +import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar"; import { Tooltip, TooltipContent, @@ -17,23 +20,30 @@ function promptPreview(prompt: string) { } type SelectionChipButtonProps = { + avatarUrl?: string | null; disabled: boolean; + label: string; onClick: () => void; selected: boolean; children: React.ReactNode; }; function SelectionChipButton({ + avatarUrl, disabled, + label, onClick, selected, children, }: SelectionChipButtonProps) { + const showAvatar = avatarUrl !== undefined; + return ( ); @@ -85,9 +108,18 @@ export function AddChannelBotPersonasSection({
+ Generic
@@ -96,27 +128,42 @@ export function AddChannelBotPersonasSection({ Add one custom agent with a channel-specific name and prompt. - {personas.map((persona) => ( - - -
- onTogglePersona(persona.id)} - selected={selectedPersonaIds.includes(persona.id)} - > - {persona.displayName} - -
-
- -
-

{persona.displayName}

-

{promptPreview(persona.systemPrompt)}

-
-
-
- ))} + {personas.map((persona) => { + const isSelected = selectedPersonaIds.includes(persona.id); + return ( + + +
+ onTogglePersona(persona.id)} + selected={isSelected} + > + {persona.displayName} + +
+
+ +
+
+ +

{persona.displayName}

+
+

+ {promptPreview(persona.systemPrompt)} +

+
+
+
+ ); + })}