Function ChatLayout

web/components/chat/ChatLayout.tsx:12–48

()

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