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

loading indicator, growing message box

Browse Source
This commit is contained in:
James Magahern
2026-02-14 21:07:31 -08:00
parent cd449a30fa
commit 0c892d0ffa
2 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/components/chat/chat-messages-panel.tsx
View File

@@ -9,6 +9,8 @@ type Props = {
};
export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
const hasPendingAssistant = messages.some((message) => message.id.startsWith("temp-assistant-"));
return (
<>
{isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
@@ -26,9 +28,9 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
>
{isPendingAssistant ? (
<span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-white [animation-delay:0ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-white [animation-delay:140ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-white [animation-delay:280ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:280ms]" />
</span>
) : (
<MarkdownContent
@@ -40,6 +42,17 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
</div>
);
})}
{isSending && !hasPendingAssistant ? (
<div className="flex justify-start">
<div className="max-w-[85%] text-base leading-7 text-fuchsia-100">
<span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:280ms]" />
</span>
</div>
</div>
) : null}
</div>
</>
);