feat(desktop): show avatars in Add Agent persona pills (#120)

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 (
     <button
       aria-pressed={selected}
       className={cn(
-        "inline-flex min-h-9 items-center rounded-full border px-3 py-1.5 text-sm font-medium transition-colors",
+        "inline-flex min-h-9 items-center gap-2 rounded-full border py-1.5 text-sm font-medium transition-colors",
+        showAvatar ? "pl-1.5 pr-3" : "px-3",
         selected
           ? "border-foreground bg-foreground text-background shadow-sm"
           : "border-border/70 bg-muted/25 text-foreground hover:bg-muted/55",
@@ -43,6 +53,19 @@ function SelectionChipButton({
       onClick={onClick}
       type="button"
     >
+      {showAvatar ? (
+        <ProfileAvatar
+          avatarUrl={avatarUrl}
+          className={cn(
+            "h-6 w-6 rounded-full text-[10px]",
+            selected
+              ? "bg-background/20 text-background"
+              : "bg-primary/20 text-primary",
+          )}
+          iconClassName="h-3.5 w-3.5"
+          label={label}
+        />
+      ) : null}
       {children}
     </button>
   );
@@ -85,9 +108,18 @@ export function AddChannelBotPersonasSection({
                 <div>
                   <SelectionChipButton
                     disabled={!canToggleSelections}
+                    label="Generic"
                     onClick={onToggleGeneric}
                     selected={includeGeneric}
                   >
+                    <Bot
+                      className={cn(
+                        "h-4 w-4",
+                        includeGeneric
+                          ? "text-background/70"
+                          : "text-muted-foreground",
+                      )}
+                    />
                     Generic
                   </SelectionChipButton>
                 </div>
@@ -96,27 +128,42 @@ export function AddChannelBotPersonasSection({
                 Add one custom agent with a channel-specific name and prompt.
               </TooltipContent>
             </Tooltip>
-            {personas.map((persona) => (
-              <Tooltip key={persona.id}>
-                <TooltipTrigger asChild>
-                  <div>
-                    <SelectionChipButton
-                      disabled={!canToggleSelections}
-                      onClick={() => onTogglePersona(persona.id)}
-                      selected={selectedPersonaIds.includes(persona.id)}
-                    >
-                      {persona.displayName}
-                    </SelectionChipButton>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent className="max-w-xs text-left">
-                  <div className="space-y-1">
-                    <p className="font-medium">{persona.displayName}</p>
-                    <p>{promptPreview(persona.systemPrompt)}</p>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ))}
+            {personas.map((persona) => {
+              const isSelected = selectedPersonaIds.includes(persona.id);
+              return (
+                <Tooltip key={persona.id}>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <SelectionChipButton
+                        avatarUrl={persona.avatarUrl}
+                        disabled={!canToggleSelections}
+                        label={persona.displayName}
+                        onClick={() => onTogglePersona(persona.id)}
+                        selected={isSelected}
+                      >
+                        {persona.displayName}
+                      </SelectionChipButton>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-xs text-left">
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <ProfileAvatar
+                          avatarUrl={persona.avatarUrl}
+                          className="h-7 w-7 rounded-full text-[10px]"
+                          iconClassName="h-3.5 w-3.5"
+                          label={persona.displayName}
+                        />
+                        <p className="font-medium">{persona.displayName}</p>
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {promptPreview(persona.systemPrompt)}
+                      </p>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
           </div>
         </TooltipProvider>