web: separate search route

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

@@ -0,0 +1,40 @@
+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-slate-200 text-slate-900" : "bg-slate-800 text-slate-100"
+                )}
+              >
+                {isPendingAssistant ? "Thinking..." : message.content}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}