buzzert/Sybil-2
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web: busy character animation

Browse Source
This commit is contained in:
James Magahern
2026-05-03 17:52:50 -07:00
parent 89bd418566
commit 2403dd99ae
4 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/public/character-busy.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

10
web/src/App.tsx
View File

@@ -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
aria-hidden="true"
alt=""
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"
<SybilCharacter
className="absolute right-4 top-3 h-[calc(100%-1.5rem)]"
isBusy={isSending}
/>
</div>

31
web/src/components/sybil-character.tsx Normal file
View File

@@ -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}
/>
);
}

2
web/tsconfig.tsbuildinfo
View File

@@ -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"}