Appearance tweaks, fix new message bug

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

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

web/src/components/search/search-results-panel.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "preact/hooks";
-import { Search } from "lucide-preact";
 import type { SearchDetail } from "@/lib/api";
 import { MarkdownContent } from "@/components/markdown/markdown-content";
 import { cn } from "@/lib/utils";
@@ -27,11 +26,10 @@ type Props = {
   search: SearchDetail | null;
   isLoading: boolean;
   isRunning: boolean;
-  showPrompt?: boolean;
   className?: string;
 };
 
-export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt = true, className }: Props) {
+export function SearchResultsPanel({ search, isLoading, isRunning, className }: Props) {
   const ANSWER_COLLAPSED_HEIGHT_CLASS = "h-[3rem]";
   const [isAnswerExpanded, setIsAnswerExpanded] = useState(false);
   const [canExpandAnswer, setCanExpandAnswer] = useState(false);
@@ -159,14 +157,6 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
         <p className="text-sm text-muted-foreground">{isRunning ? "Searching Exa..." : "Loading search..."}</p>
       ) : null}
 
-      {showPrompt && !isLoading && !search?.query ? (
-        <div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed p-8 text-center">
-          <Search className="h-6 w-6 text-muted-foreground" />
-          <h2 className="text-lg font-semibold">Search the web</h2>
-          <p className="text-sm text-muted-foreground">Use the composer below to run a new Exa search.</p>
-        </div>
-      ) : null}
-
       {!isLoading && !isRunning && !!search?.query && search.results.length === 0 ? (
         <p className="text-sm text-muted-foreground">No results found.</p>
       ) : null}