feat: initial IQAI multi-model AI dashboard
- 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>
This commit is contained in:
Malin
170
frontend/src/components/ChatArea.jsx
Normal file
170
frontend/src/components/ChatArea.jsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Sparkles, Trash2, Download } from 'lucide-react';
|
||||
import { useStore } from '../store/useStore.js';
|
||||
import MessageItem from './MessageItem.jsx';
|
||||
import MentionInput from './MentionInput.jsx';
|
||||
|
||||
function EmptyState({ models, onCreate }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center px-6 py-16 animate-fade-in">
|
||||
{/* Logo */}
|
||||
<div className="relative mb-8">
|
||||
<div className="w-20 h-20 rounded-3xl bg-brand-gradient-r flex items-center justify-center text-4xl shadow-grape glow-grape">
|
||||
🤖
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-tangerine rounded-full flex items-center justify-center">
|
||||
<Sparkles size={12} className="text-midnight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="font-display font-bold text-3xl text-apricot mb-2">
|
||||
Welcome to <span className="text-gradient">IQAI</span>
|
||||
</h1>
|
||||
<p className="text-apricot/50 text-sm max-w-md mb-8 leading-relaxed">
|
||||
Your multi-model AI dashboard. Chat with multiple AI models simultaneously, tag them with @mentions, and augment with live web search.
|
||||
</p>
|
||||
|
||||
{/* Model grid */}
|
||||
{models.length > 0 && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8 w-full max-w-lg">
|
||||
{models.slice(0, 4).map(m => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-xl border bg-surface-2 border-grape/20"
|
||||
>
|
||||
<span className="text-2xl">{m.avatar}</span>
|
||||
<span className="text-xs font-medium font-display" style={{ color: m.color }}>@{m.tag}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 text-xs text-apricot/30 max-w-xs">
|
||||
<p>• Type <code className="bg-surface-2 px-1 py-0.5 rounded text-tangerine">@claude</code> to direct a message to a specific model</p>
|
||||
<p>• Enable <strong className="text-apricot/50">Web Search</strong> to inject live results as context</p>
|
||||
<p>• Select models from the sidebar to run queries in parallel</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChatArea() {
|
||||
const {
|
||||
getActiveConv, activeConvId, sendMessage,
|
||||
models, createConversation, clearConversation,
|
||||
setSettingsPanelModel
|
||||
} = useStore();
|
||||
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const bottomRef = useRef(null);
|
||||
const conv = getActiveConv();
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [conv?.messages?.length, sending]);
|
||||
|
||||
const handleSend = async (text) => {
|
||||
setError('');
|
||||
setSending(true);
|
||||
try {
|
||||
await sendMessage(text);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const exportConv = () => {
|
||||
if (!conv) return;
|
||||
const text = conv.messages.map(m => {
|
||||
const who = m.role === 'user' ? 'You' : (models.find(md => md.id === m.modelId)?.displayName || m.modelId);
|
||||
return `[${who}]\n${m.content}`;
|
||||
}).join('\n\n---\n\n');
|
||||
const blob = new Blob([text], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${conv.title.slice(0, 30)}.txt`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 min-w-0 h-full">
|
||||
{/* Top bar */}
|
||||
{conv && (
|
||||
<div className="flex items-center justify-between px-6 py-3 border-b border-grape/15 flex-shrink-0">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<h2 className="font-display font-semibold text-apricot/80 truncate text-sm">
|
||||
{conv.title}
|
||||
</h2>
|
||||
{/* Active model tags */}
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{conv.activeModelIds.map(id => {
|
||||
const m = models.find(md => md.id === id);
|
||||
if (!m) return null;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setSettingsPanelModel(m)}
|
||||
title={`System instructions for ${m.displayName}`}
|
||||
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full border hover:opacity-100 transition-opacity"
|
||||
style={{ color: m.color, background: `${m.color}15`, borderColor: `${m.color}30` }}
|
||||
>
|
||||
{m.avatar} {m.tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={exportConv}
|
||||
className="p-2 rounded-lg hover:bg-grape/20 text-apricot/30 hover:text-apricot/60 transition-colors"
|
||||
title="Export conversation"
|
||||
>
|
||||
<Download size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => clearConversation(activeConvId)}
|
||||
className="p-2 rounded-lg hover:bg-blush/10 text-apricot/30 hover:text-blush transition-colors"
|
||||
title="Clear conversation"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto px-4 sm:px-8 py-6 space-y-6">
|
||||
{!conv || conv.messages.length === 0 ? (
|
||||
<EmptyState models={models} onCreate={createConversation} />
|
||||
) : (
|
||||
conv.messages.map(msg => (
|
||||
<MessageItem key={msg.id} message={msg} />
|
||||
))
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div className="mx-6 mb-2 bg-blush/10 border border-blush/30 rounded-xl px-4 py-2.5 text-sm text-blush animate-slide-up flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
<button onClick={() => setError('')} className="text-blush/60 hover:text-blush ml-3">✕</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input */}
|
||||
<div className="px-4 sm:px-8 pb-6 pt-2 flex-shrink-0">
|
||||
<MentionInput onSend={handleSend} sending={sending} />
|
||||
<p className="text-center text-xs text-apricot/20 mt-2">
|
||||
IQAI uses Replicate API · Models may make mistakes · Verify important information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user