@octo-cyber/sea-king 0.5.0

package/web/pages/ChatPage.tsx

@@ -0,0 +1,482 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import {
+  Send,
+  Heart,
+  HeartCrack,
+  AlertTriangle,
+  Users,
+  Clock,
+  Crown,
+  X,
+  Sparkles,
+  MessageCircle,
+} from 'lucide-react';
+import {
+  startSession,
+  sendMessage,
+  triggerCrisis,
+  resolveCrisis,
+  endSession,
+} from '../services/sea-king-service';
+import type {
+  ChatSession,
+  ChatThread,
+  ChatMessage,
+  CrisisEvent,
+  SendMessageResult,
+} from '../types/sea-king';
+
+const PERSONALITY_COLORS: Record<string, string> = {
+  gentle: 'bg-pink-100 text-pink-800 border-pink-300',
+  tsundere: 'bg-red-100 text-red-800 border-red-300',
+  intellectual: 'bg-indigo-100 text-indigo-800 border-indigo-300',
+  rational: 'bg-blue-100 text-blue-800 border-blue-300',
+  playful: 'bg-amber-100 text-amber-800 border-amber-300',
+  mysterious: 'bg-purple-100 text-purple-800 border-purple-300',
+};
+
+const PERSONALITY_LABELS: Record<string, string> = {
+  gentle: '温柔型',
+  tsundere: '傲娇型',
+  intellectual: '文艺型',
+  rational: '理性型',
+  playful: '活泼型',
+  mysterious: '神秘型',
+};
+
+export default function ChatPage() {
+  const t = useTranslations('seaKing.chat');
+
+  const [session, setSession] = useState<ChatSession | null>(null);
+  const [threads, setThreads] = useState<ChatThread[]>([]);
+  const [activeThreadId, setActiveThreadId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Record<string, ChatMessage[]>>({});
+  const [inputText, setInputText] = useState('');
+  const [sending, setSending] = useState(false);
+  const [crisis, setCrisis] = useState<CrisisEvent | null>(null);
+  const [crisisInput, setCrisisInput] = useState('');
+  const [starting, setStarting] = useState(false);
+  const [charCount, setCharCount] = useState(3);
+  const [sessionEnded, setSessionEnded] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, activeThreadId]);
+
+  // 随机触发紧急事件
+  useEffect(() => {
+    if (!session || session.status !== 'active') return;
+
+    const timer = setInterval(async () => {
+      // 20%概率触发紧急事件
+      if (Math.random() < 0.2 && !crisis) {
+        try {
+          const newCrisis = await triggerCrisis(session.id);
+          setCrisis(newCrisis);
+        } catch {
+          // ignore
+        }
+      }
+    }, 30000); // 每30秒检查一次
+
+    return () => clearInterval(timer);
+  }, [session, crisis]);
+
+  const handleStart = async () => {
+    setStarting(true);
+    try {
+      const result = await startSession({ characterCount: charCount, difficulty: 'normal' });
+      setSession(result.session);
+      setThreads(result.threads);
+      setActiveThreadId(result.threads[0]?.id ?? null);
+
+      // 初始化消息列表
+      const initialMessages: Record<string, ChatMessage[]> = {};
+      for (const thread of result.threads) {
+        initialMessages[thread.id] = thread.messages ?? [];
+      }
+      setMessages(initialMessages);
+    } catch (err: any) {
+      console.error('Failed to start session:', err);
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  const handleSend = async () => {
+    if (!activeThreadId || !inputText.trim() || sending) return;
+
+    setSending(true);
+    const text = inputText;
+    setInputText('');
+
+    try {
+      const result: SendMessageResult = await sendMessage({
+        threadId: activeThreadId,
+        content: text,
+      });
+
+      // 更新消息列表
+      setMessages((prev) => ({
+        ...prev,
+        [activeThreadId]: [
+          ...(prev[activeThreadId] ?? []),
+          result.userMessage,
+          result.characterReply,
+        ],
+      }));
+
+      // 更新线程好感度
+      setThreads((prev) =>
+        prev.map((t) =>
+          t.id === activeThreadId
+            ? {
+                ...t,
+                favorability: result.newFavorability,
+                threadStatus: result.threadStatus,
+                lastMessage: result.characterReply.content,
+              }
+            : {
+                ...t,
+                unreadCount: t.unreadCount + (Math.random() > 0.5 ? 1 : 0),
+              },
+        ),
+      );
+    } catch (err: any) {
+      console.error('Failed to send message:', err);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleResolveCrisis = async () => {
+    if (!crisis || !crisisInput.trim()) return;
+
+    try {
+      const resolved = await resolveCrisis({
+        crisisId: crisis.id,
+        response: crisisInput,
+      });
+      setCrisis(null);
+      setCrisisInput('');
+      // 刷新线程数据以获取更新的好感度
+    } catch (err: any) {
+      console.error('Failed to resolve crisis:', err);
+    }
+  };
+
+  const handleEndSession = async () => {
+    if (!session) return;
+    try {
+      const ended = await endSession(session.id);
+      setSession(ended);
+      setSessionEnded(true);
+    } catch (err: any) {
+      console.error('Failed to end session:', err);
+    }
+  };
+
+  const activeThread = threads.find((t) => t.id === activeThreadId);
+  const activeMessages = activeThreadId ? messages[activeThreadId] ?? [] : [];
+
+  // ─── Start Screen ───────────────────────────────────────────────────────
+  if (!session) {
+    return (
+      <div className="flex items-center justify-center min-h-[600px] p-6">
+        <div className="text-center max-w-lg">
+          <div className="text-8xl mb-6 animate-bounce">🌊</div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-cyan-500 to-purple-600 bg-clip-text text-transparent">
+            {t('title')}
+          </h1>
+          <p className="text-gray-500 mt-3 text-lg">{t('startDescription')}</p>
+
+          <div className="mt-8 bg-gray-50 rounded-xl p-6">
+            <label className="block text-sm font-medium text-gray-700 mb-3">
+              {t('selectCharacterCount')}
+            </label>
+            <div className="flex items-center justify-center gap-3">
+              {[2, 3, 4, 5, 6].map((n) => (
+                <button
+                  key={n}
+                  onClick={() => setCharCount(n)}
+                  className={`w-12 h-12 rounded-xl font-bold text-lg transition-all ${
+                    charCount === n
+                      ? 'bg-gradient-to-br from-cyan-500 to-blue-600 text-white shadow-lg scale-110'
+                      : 'bg-white border-2 border-gray-200 hover:border-cyan-300 text-gray-600'
+                  }`}
+                >
+                  {n}
+                </button>
+              ))}
+            </div>
+            <p className="text-xs text-gray-400 mt-2">
+              {t('characterCountHint', { count: charCount })}
+            </p>
+          </div>
+
+          <button
+            onClick={handleStart}
+            disabled={starting}
+            className="mt-6 px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 text-white rounded-xl font-semibold text-lg hover:shadow-xl transition-all hover:-translate-y-1 disabled:opacity-50"
+          >
+            {starting ? (
+              <span className="flex items-center gap-2">
+                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white" />
+                {t('matching')}
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <Sparkles className="h-5 w-5" />
+                {t('startTraining')}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // ─── Session End Screen ────────────────────────────────────────────────
+  if (sessionEnded && session.summary) {
+    return (
+      <div className="flex items-center justify-center min-h-[600px] p-6">
+        <div className="text-center max-w-lg bg-white rounded-2xl shadow-xl p-8 border">
+          <div className="text-6xl mb-4">🎉</div>
+          <h2 className="text-2xl font-bold mb-4">{t('sessionComplete')}</h2>
+          <pre className="text-left bg-gray-50 rounded-xl p-4 text-sm whitespace-pre-wrap mb-6">
+            {session.summary}
+          </pre>
+          <button
+            onClick={() => {
+              setSession(null);
+              setThreads([]);
+              setMessages({});
+              setSessionEnded(false);
+            }}
+            className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 text-white rounded-xl font-semibold hover:shadow-lg transition-all"
+          >
+            {t('playAgain')} 🔄
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // ─── Main Chat Interface ───────────────────────────────────────────────
+  return (
+    <div className="flex h-[calc(100vh-120px)] bg-gray-50 rounded-xl overflow-hidden border">
+      {/* Thread List (Left Sidebar) */}
+      <div className="w-80 bg-white border-r flex flex-col">
+        <div className="p-4 border-b bg-gradient-to-r from-cyan-500 to-blue-600">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-white">
+              <Users className="h-5 w-5" />
+              <span className="font-semibold">{t('chatList')}</span>
+            </div>
+            <button
+              onClick={handleEndSession}
+              className="text-white/80 hover:text-white text-sm flex items-center gap-1"
+            >
+              <X className="h-4 w-4" />
+              {t('endSession')}
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {threads.map((thread) => (
+            <button
+              key={thread.id}
+              onClick={() => {
+                setActiveThreadId(thread.id);
+                setThreads((prev) =>
+                  prev.map((t) =>
+                    t.id === thread.id ? { ...t, unreadCount: 0 } : t,
+                  ),
+                );
+              }}
+              className={`w-full p-4 text-left border-b hover:bg-gray-50 transition-colors ${
+                activeThreadId === thread.id ? 'bg-cyan-50 border-l-4 border-l-cyan-500' : ''
+              } ${thread.threadStatus === 'broken' ? 'opacity-50' : ''}`}
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">{thread.character.avatar}</span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium truncate">{thread.character.name}</span>
+                    {thread.unreadCount > 0 && (
+                      <span className="bg-red-500 text-white text-xs rounded-full px-2 py-0.5">
+                        {thread.unreadCount}
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-xs text-gray-400 truncate mt-0.5">
+                    {thread.lastMessage ?? '...'}
+                  </div>
+                </div>
+              </div>
+              {/* Favorability Bar */}
+              <div className="mt-2 flex items-center gap-2">
+                <span className="text-xs">
+                  {thread.favorability > 70 ? '💕' : thread.favorability > 30 ? '💛' : '💔'}
+                </span>
+                <div className="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full rounded-full transition-all duration-500 ${
+                      thread.favorability > 70
+                        ? 'bg-pink-500'
+                        : thread.favorability > 30
+                          ? 'bg-amber-400'
+                          : 'bg-red-500'
+                    }`}
+                    style={{ width: `${thread.favorability}%` }}
+                  />
+                </div>
+                <span className="text-xs font-mono text-gray-500">{thread.favorability}</span>
+              </div>
+              {/* Personality Tag */}
+              <div className="mt-1">
+                <span
+                  className={`inline-block text-xs px-2 py-0.5 rounded-full border ${
+                    PERSONALITY_COLORS[thread.character.personality] ?? 'bg-gray-100 text-gray-600'
+                  }`}
+                >
+                  {PERSONALITY_LABELS[thread.character.personality] ?? thread.character.personality}
+                </span>
+                {thread.threadStatus === 'broken' && (
+                  <span className="inline-block text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600 ml-1">
+                    已拉黑
+                  </span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Chat Area (Right) */}
+      <div className="flex-1 flex flex-col">
+        {/* Chat Header */}
+        {activeThread && (
+          <div className="p-4 border-b bg-white flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <span className="text-3xl">{activeThread.character.avatar}</span>
+              <div>
+                <div className="font-semibold">{activeThread.character.name}</div>
+                <div className="text-xs text-gray-400">
+                  {activeThread.character.backstory.slice(0, 50)}...
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {activeThread.favorability > 70 ? (
+                <Heart className="h-5 w-5 text-pink-500 fill-pink-500" />
+              ) : activeThread.favorability < 30 ? (
+                <HeartCrack className="h-5 w-5 text-red-500" />
+              ) : (
+                <Heart className="h-5 w-5 text-gray-300" />
+              )}
+              <span className="font-mono font-bold text-lg">{activeThread.favorability}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Crisis Alert */}
+        {crisis && (
+          <div className="mx-4 mt-4 bg-red-50 border-2 border-red-300 rounded-xl p-4 animate-pulse">
+            <div className="flex items-center gap-2 mb-2">
+              <AlertTriangle className="h-5 w-5 text-red-500" />
+              <span className="font-bold text-red-700">{t('crisisAlert')}</span>
+              <Clock className="h-4 w-4 text-red-400 ml-auto" />
+              <span className="text-sm text-red-400">{crisis.timeLimit}s</span>
+            </div>
+            <p className="text-red-800 mb-3">{crisis.description}</p>
+            <div className="flex gap-2">
+              <input
+                value={crisisInput}
+                onChange={(e) => setCrisisInput(e.target.value)}
+                placeholder={t('crisisPlaceholder')}
+                className="flex-1 px-3 py-2 border border-red-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400"
+                onKeyDown={(e) => e.key === 'Enter' && handleResolveCrisis()}
+              />
+              <button
+                onClick={handleResolveCrisis}
+                className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors font-medium"
+              >
+                {t('respond')}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+          {activeMessages.map((msg) => (
+            <div
+              key={msg.id}
+              className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`max-w-[70%] rounded-2xl px-4 py-3 ${
+                  msg.role === 'user'
+                    ? 'bg-gradient-to-r from-cyan-500 to-blue-500 text-white'
+                    : 'bg-white border shadow-sm'
+                }`}
+              >
+                <p className="text-sm">{msg.content}</p>
+                {msg.favorDelta !== 0 && msg.role === 'character' && (
+                  <div
+                    className={`text-xs mt-2 pt-2 border-t ${
+                      msg.favorDelta > 0
+                        ? 'text-green-600 border-green-200'
+                        : 'text-red-500 border-red-200'
+                    }`}
+                  >
+                    {msg.favorDelta > 0 ? '📈' : '📉'} {msg.favorDelta > 0 ? '+' : ''}
+                    {msg.favorDelta} · {msg.favorReason}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input Area */}
+        <div className="p-4 border-t bg-white">
+          {activeThread?.threadStatus === 'broken' ? (
+            <div className="text-center text-red-500 py-2">
+              💔 {t('blocked')}
+            </div>
+          ) : (
+            <div className="flex gap-3">
+              <input
+                value={inputText}
+                onChange={(e) => setInputText(e.target.value)}
+                placeholder={t('inputPlaceholder')}
+                className="flex-1 px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent"
+                onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSend()}
+                disabled={sending}
+              />
+              <button
+                onClick={handleSend}
+                disabled={sending || !inputText.trim()}
+                className="px-5 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-xl hover:shadow-lg transition-all disabled:opacity-50"
+              >
+                <Send className="h-5 w-5" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}