claude-code

web/components/chat/ChatLayout.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect } from "react";
+import { useChatStore } from "@/lib/store";
+import { Sidebar } from "@/components/layout/Sidebar";
+import { Header } from "@/components/layout/Header";
+import { ChatWindow } from "./ChatWindow";
+import { ChatInput } from "./ChatInput";
+import { SkipToContent } from "@/components/a11y/SkipToContent";
+import { AnnouncerProvider } from "@/components/a11y/Announcer";
+
+export function ChatLayout() {
+  const { conversations, createConversation, activeConversationId } = useChatStore();
+
+  useEffect(() => {
+    if (conversations.length === 0) {
+      createConversation();
+    }
+  }, []);
+
+  return (
+    <AnnouncerProvider>
+      <SkipToContent />
+      <div className="flex h-screen bg-surface-950 text-surface-100">
+        <Sidebar />
+        <div className="flex flex-col flex-1 min-w-0">
+          <Header />
+          <main
+            id="main-content"
+            aria-label="Chat"
+            className="flex flex-col flex-1 min-h-0"
+          >
+            {activeConversationId ? (
+              <>
+                <ChatWindow conversationId={activeConversationId} />
+                <ChatInput conversationId={activeConversationId} />
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-surface-500">
+                Select or create a conversation
+              </div>
+            )}
+          </main>
+        </div>
+      </div>
+    </AnnouncerProvider>
+  );
+}