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

Appearance tweaks, fix new message bug

Browse Source
This commit is contained in:
James Magahern
2026-02-14 20:51:52 -08:00
parent ec7b33e6ec
commit 9bfd0ec1e7
6 changed files with 87 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { cn } from "@/lib/utils";
import type { Message } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content";
type Props = {
messages: Message[];
@@ -11,12 +12,6 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
return (
<>
{isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
{!isLoading && messages.length === 0 ? (
<div className="mx-auto flex max-w-3xl flex-col items-center gap-3 rounded-xl border border-dashed p-8 text-center">
<h2 className="text-lg font-semibold">How can I help today?</h2>
<p className="text-sm text-muted-foreground">Ask a question to begin this conversation.</p>
</div>
) : null}
<div className="mx-auto max-w-3xl space-y-6">
{messages.map((message) => {
const isUser = message.role === "user";
@@ -25,11 +20,22 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
<div key={message.id} className={cn("flex", isUser ? "justify-end" : "justify-start")}>
<div
className={cn(
"max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6",
isUser ? "bg-fuchsia-200 text-fuchsia-950" : "bg-violet-900/80 text-fuchsia-50"
"max-w-[85%]",
isUser ? "rounded-2xl bg-violet-900/80 px-4 py-3 text-sm leading-6 text-fuchsia-50" : "text-base leading-7 text-fuchsia-100"
)}
>
{isPendingAssistant ? "Thinking..." : message.content}
{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>
) : (
<MarkdownContent
markdown={message.content}
className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-fuchsia-100")}
/>
)}
</div>
</div>
);