91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { useChatStore } from '@/stores/chatStore';
|
|
import Sidebar from '@/components/layout/Sidebar';
|
|
import ChatArea from '@/components/chat/ChatArea';
|
|
import SettingsModal from '@/components/chat/SettingsModal';
|
|
import KnowledgePanel from '@/components/knowledge/KnowledgePanel';
|
|
import { Menu, Settings } from 'lucide-react';
|
|
|
|
function App() {
|
|
const {
|
|
conversations,
|
|
currentConversationId,
|
|
isSidebarOpen,
|
|
isSettingsOpen,
|
|
createConversation,
|
|
toggleSidebar,
|
|
toggleSettings,
|
|
} = useChatStore();
|
|
|
|
const initialized = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (!initialized.current && conversations.length === 0) {
|
|
initialized.current = true;
|
|
createConversation();
|
|
}
|
|
}, [conversations.length, createConversation]);
|
|
|
|
return (
|
|
<div className="flex h-screen w-screen overflow-hidden bg-[var(--color-bg)]">
|
|
{/* Mobile sidebar overlay */}
|
|
{isSidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-30 lg:hidden"
|
|
onClick={toggleSidebar}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`fixed lg:static inset-y-0 left-0 z-40 w-72 bg-[var(--color-surface)] border-r border-[var(--color-border)] transform transition-transform duration-300 ease-in-out ${
|
|
isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0 lg:hidden'
|
|
}`}
|
|
>
|
|
<Sidebar />
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 flex flex-col min-w-0">
|
|
{/* Header */}
|
|
<header className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border)] bg-[var(--color-bg)]">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="p-2 rounded-lg hover:bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
|
|
>
|
|
<Menu size={20} />
|
|
</button>
|
|
<h1 className="text-lg font-semibold text-[var(--color-text)] truncate">
|
|
AIUI Chat
|
|
</h1>
|
|
</div>
|
|
<button
|
|
onClick={toggleSettings}
|
|
className="p-2 rounded-lg hover:bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
|
|
>
|
|
<Settings size={20} />
|
|
</button>
|
|
</header>
|
|
|
|
{/* Chat Area */}
|
|
{currentConversationId ? (
|
|
<ChatArea conversationId={currentConversationId} />
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center text-[var(--color-text-muted)]">
|
|
<p>Select or create a conversation to start chatting</p>
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{/* Settings Modal */}
|
|
{isSettingsOpen && <SettingsModal />}
|
|
|
|
{/* Knowledge Panel */}
|
|
<KnowledgePanel />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|