AskaEth
d00a8313ad
1. 修复前端清空对话无反应 (clearMainSessionMessages 链路) 2. 修复清除所有对话后侧边栏残留 + 重复新增按钮 3. 修复侧边栏点击无法切换会话 (Zustand 竞态 + URL hash) 4. 修复 URL 不显示 session ID (hash 同步链) 5. DevTools 会话监看刷新保持展开/折叠状态 6. 首页性能仪表盘去重 + 资源使用卡片 60s sparkline 7. DevTools 全局刷新改为 DOM 局部增量更新 8. 替换前端昔涟头像、聊天背景、用户头像为实际图片 9. 修复图片文件名 (双.png + 目录拼写)
54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
import { useChat } from '@/hooks/useChat';
|
|
import { useChatStore } from '@/store/chatStore';
|
|
import { MessageList } from './MessageList';
|
|
import { IoTStatusBar } from './IoTStatusBar';
|
|
|
|
export function ChatContainer() {
|
|
const { messages, isTyping } = useChat();
|
|
const continuousMode = useChatStore((s) => s.continuousMode);
|
|
const backgroundThinkingStatus = useChatStore((s) => s.backgroundThinkingStatus);
|
|
|
|
const thinkingLabel = backgroundThinkingStatus === 'thinking' ? '昔涟正在回忆中...' : '';
|
|
const statusLabel = continuousMode ? '主对话 · 进行中' : '';
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-hidden chat-background">
|
|
{/* 状态指示器栏 */}
|
|
<div className="flex items-center justify-between px-4 py-1.5 border-b border-pink-100 dark:border-pink-900 bg-pink-50/50 dark:bg-pink-950/20 flex-shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
{statusLabel && (
|
|
<span className="text-xs font-medium text-pink-500 dark:text-pink-400 bg-pink-100 dark:bg-pink-900/50 px-2 py-0.5 rounded-full">
|
|
{statusLabel}
|
|
</span>
|
|
)}
|
|
{thinkingLabel && (
|
|
<span className="text-xs text-pink-400 dark:text-pink-500 animate-pulse flex items-center gap-1">
|
|
<span className="inline-block w-1.5 h-1.5 bg-pink-400 rounded-full animate-bounce" />
|
|
<span className="inline-block w-1.5 h-1.5 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '0.15s' }} />
|
|
<span className="inline-block w-1.5 h-1.5 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '0.3s' }} />
|
|
{thinkingLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{continuousMode && (
|
|
<button
|
|
onClick={() => useChatStore.getState().setContinuousMode(!continuousMode)}
|
|
className="text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
title="切换连续对话模式"
|
|
>
|
|
{continuousMode ? '🔗 连续对话' : '⏸️ 暂停中'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* 消息列表 */}
|
|
<div className="flex-1 min-h-0 overflow-hidden">
|
|
<MessageList messages={messages} isTyping={isTyping} />
|
|
</div>
|
|
|
|
{/* IoT 状态栏（底部） */}
|
|
<IoTStatusBar />
|
|
</div>
|
|
);
|
|
}
|