web: busy character animation

web/src/App.tsx

@@ -7,6 +7,7 @@ import { AuthScreen } from "@/components/auth/auth-screen";
 import { ChatAttachmentList } from "@/components/chat/chat-attachment-list";
 import { ChatMessagesPanel } from "@/components/chat/chat-messages-panel";
 import { SearchResultsPanel } from "@/components/search/search-results-panel";
+import { SybilCharacter } from "@/components/sybil-character";
 import {
   createChat,
   createChatFromSearch,
@@ -1999,12 +2000,9 @@ export default function App() {
                 Sybil Web{authMode ? ` (${authMode === "open" ? "open mode" : "token mode"})` : ""}
               </p>
             </div>
-            <img
+            <SybilCharacter
-              aria-hidden="true"
+              className="absolute right-4 top-3 h-[calc(100%-1.5rem)]"
-              alt=""
+              isBusy={isSending}
-              className="absolute right-4 top-3 aspect-square h-[calc(100%-1.5rem)] rounded-xl border border-violet-200/24 bg-white/6 object-cover p-1 shadow-[inset_0_1px_0_hsl(252_90%_86%/0.12),0_10px_24px_hsl(240_80%_2%/0.3)]"
-              draggable={false}
-              src="/character-idle.gif"
             />
           </div>
 

web/src/components/sybil-character.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "preact/hooks";
+import { cn } from "@/lib/utils";
+
+const CHARACTER_IDLE_SRC = "/character-idle.gif";
+const CHARACTER_BUSY_SRC = "/character-busy.gif";
+
+type SybilCharacterProps = {
+  className?: string;
+  isBusy?: boolean;
+};
+
+export function SybilCharacter({ className, isBusy = false }: SybilCharacterProps) {
+  useEffect(() => {
+    const busyImage = new Image();
+    busyImage.src = CHARACTER_BUSY_SRC;
+  }, []);
+
+  return (
+    <img
+      aria-hidden="true"
+      alt=""
+      className={cn(
+        "aspect-square rounded-xl border border-violet-200/24 bg-white/6 object-cover p-1 shadow-[inset_0_1px_0_hsl(252_90%_86%/0.12),0_10px_24px_hsl(240_80%_2%/0.3)]",
+        className
+      )}
+      data-state={isBusy ? "busy" : "idle"}
+      draggable={false}
+      src={isBusy ? CHARACTER_BUSY_SRC : CHARACTER_IDLE_SRC}
+    />
+  );
+}

web/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/root-router.tsx","./src/vite-env.d.ts","./src/components/auth/auth-screen.tsx","./src/components/chat/chat-attachment-list.tsx","./src/components/chat/chat-messages-panel.tsx","./src/components/markdown/markdown-content.tsx","./src/components/search/search-results-panel.tsx","./src/components/ui/button.tsx","./src/components/ui/input.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/separator.tsx","./src/components/ui/textarea.tsx","./src/hooks/use-session-auth.ts","./src/lib/api.ts","./src/lib/utils.ts","./src/pages/search-route-page.tsx"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/root-router.tsx","./src/vite-env.d.ts","./src/components/sybil-character.tsx","./src/components/auth/auth-screen.tsx","./src/components/chat/chat-attachment-list.tsx","./src/components/chat/chat-messages-panel.tsx","./src/components/markdown/markdown-content.tsx","./src/components/search/search-results-panel.tsx","./src/components/ui/button.tsx","./src/components/ui/input.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/separator.tsx","./src/components/ui/textarea.tsx","./src/hooks/use-session-auth.ts","./src/lib/api.ts","./src/lib/utils.ts","./src/pages/search-route-page.tsx"],"version":"5.9.3"}