refactor(chat): extract ai disclosure into dedicated banner component

- Move AiDisclosure and EmptyState logic into a new AiDisclosureBanner component
- Remove isGuest prop from ChatArea as it's no longer needed there
- Update styling with explicit color values for better visibility

src/app/chat/components/chat-area.module.css

@@ -22,6 +22,7 @@
   border-radius: var(--radius-md, 8px);
   padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
   font-size: var(--font-size-xs, 11px);
+  color: #000;
   opacity: 0.75;
 }
 
@@ -31,7 +32,7 @@
   border-radius: var(--radius-md, 8px);
   padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
   font-size: var(--font-size-sm, 12px);
-  opacity: 0.75;
+  color: #8c8b8b;
   text-align: center;
 }
 

src/app/chat/components/chat-area.tsx

@@ -18,6 +18,7 @@ import { useEffect, useRef } from "react";
 
 import type { UiMessage } from "@/models/chat/ui-message";
 
+import { AiDisclosureBanner } from "./ai-disclosure-banner";
 import { DateHeader } from "./date-header";
 import { LottieMessageBubble } from "./lottie-message-bubble";
 import { MessageBubble } from "./message-bubble";
@@ -29,7 +30,7 @@ export interface ChatAreaProps {
   isGuest: boolean;
 }
 
-export function ChatArea({ messages, isReplyingAI, isGuest }: ChatAreaProps) {
+export function ChatArea({ messages, isReplyingAI }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const prevLengthRef = useRef(messages.length);
 
@@ -46,11 +47,7 @@ export function ChatArea({ messages, isReplyingAI, isGuest }: ChatAreaProps) {
 
   return (
     <main ref={scrollRef} className={styles.area} aria-label="Chat messages">
-      <AiDisclosure />
-
-      {messages.length === 0 && !isReplyingAI && (
-        <EmptyState isGuest={isGuest} />
-      )}
+      <AiDisclosureBanner />
 
       {renderMessagesWithDateHeaders(messages)}
 
@@ -83,21 +80,3 @@ function renderMessagesWithDateHeaders(messages: readonly UiMessage[]) {
     ),
   );
 }
-
-function AiDisclosure() {
-  return (
-    <div className={styles.aiDisclosure}>
-      {'You' + String.fromCharCode(39) + 're chatting with an AI companion.'}
-    </div>
-  );
-}
-
-function EmptyState({ isGuest }: { isGuest: boolean }) {
-  return (
-    <div className={styles.aiDisclosure}>
-      {isGuest
-        ? "Say hi to start chatting. (Guest mode · 40 free messages)"
-        : "Say hi to start chatting."}
-    </div>
-  );
-}