Sybil-2/web/src/components/chat/chat-messages-panel.tsx

import { cn } from "@/lib/utils";
import type { Message } from "@/lib/api";

type Props = {
  messages: Message[];
  isLoading: boolean;
  isSending: boolean;
};

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";
          const isPendingAssistant = message.id.startsWith("temp-assistant-") && isSending;
          return (
            <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"
                )}
              >
                {isPendingAssistant ? "Thinking..." : message.content}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}