iqAI/frontend/src/components/ChatArea.jsx

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