71965939a1
- Express backend with Replicate API proxy (chat, models, account, search) - React + Vite + Tailwind frontend with custom Midnight Violet color scheme - @mention autocomplete to route messages to specific models - Parallel multi-model queries with model selection in sidebar - DuckDuckGo web search context injection - Model manager UI (add/edit/remove Replicate models) - Per-model system instructions per conversation - Replicate account info display in sidebar - Conversation history with local persistence (Zustand) - Full Docker deployment (backend + nginx-served frontend) - Montserrat + Poppins fonts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import Sidebar from './components/Sidebar.jsx';
|
|
import ChatArea from './components/ChatArea.jsx';
|
|
import ModelManager from './components/ModelManager.jsx';
|
|
import SystemPromptPanel from './components/SystemPromptPanel.jsx';
|
|
import { useStore } from './store/useStore.js';
|
|
|
|
export default function App() {
|
|
const { fetchModels, createConversation, conversations, activeConvId, sidebarOpen } = useStore();
|
|
|
|
useEffect(() => {
|
|
fetchModels().then(() => {
|
|
// Auto-create first conversation if none exists
|
|
const state = useStore.getState();
|
|
if (state.conversations.length === 0) {
|
|
state.createConversation();
|
|
} else if (!state.activeConvId) {
|
|
useStore.setState({ activeConvId: state.conversations[0].id });
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden bg-midnight">
|
|
{/* Subtle background gradient */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
<div className="absolute top-0 left-0 w-96 h-96 bg-grape/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
|
|
<div className="absolute bottom-0 right-0 w-96 h-96 bg-blush/5 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
|
|
</div>
|
|
|
|
{/* Layout */}
|
|
<Sidebar />
|
|
|
|
<main className="flex-1 flex flex-col min-w-0 relative">
|
|
<ChatArea />
|
|
</main>
|
|
|
|
{/* Modals / overlays */}
|
|
<ModelManager />
|
|
<SystemPromptPanel />
|
|
</div>
|
|
);
|
|
}
|