ideaco 1.1.5

package/src/components/CachedAvatar.jsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * 全局内存缓存：url → dataURL / blob URL
+ * 避免组件重新挂载时重复请求头像，消除闪动
+ */
+const avatarCache = new Map();
+const pendingRequests = new Map();
+
+function loadAvatar(src) {
+  if (avatarCache.has(src)) return Promise.resolve(avatarCache.get(src));
+  if (pendingRequests.has(src)) return pendingRequests.get(src);
+
+  const promise = fetch(src)
+    .then(res => res.blob())
+    .then(blob => {
+      const objectUrl = URL.createObjectURL(blob);
+      avatarCache.set(src, objectUrl);
+      pendingRequests.delete(src);
+      return objectUrl;
+    })
+    .catch(() => {
+      pendingRequests.delete(src);
+      return src; // fallback to original URL
+    });
+
+  pendingRequests.set(src, promise);
+  return promise;
+}
+
+/**
+ * CachedAvatar - 带内存缓存的头像组件
+ * 首次加载后缓存为 blob URL，后续渲染零闪动
+ */
+export default function CachedAvatar({ src, alt, className, title, onClick, style }) {
+  const [cachedSrc, setCachedSrc] = useState(() => avatarCache.get(src) || null);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!src) return;
+
+    // 已缓存，直接使用
+    const cached = avatarCache.get(src);
+    if (cached) {
+      setCachedSrc(cached);
+      return;
+    }
+
+    // 加载并缓存
+    loadAvatar(src).then(url => {
+      if (mountedRef.current) setCachedSrc(url);
+    });
+
+    return () => { mountedRef.current = false; };
+  }, [src]);
+
+  // 缓存命中时直接渲染，无闪动
+  if (cachedSrc) {
+    return <img src={cachedSrc} alt={alt || ''} className={className} title={title} onClick={onClick} style={style} />;
+  }
+
+  // 首次加载：先显示背景占位，img 隐藏加载完后淡入
+  return (
+    <img
+      src={src}
+      alt={alt || ''}
+      className={className}
+      title={title}
+      onClick={onClick}
+      style={{ ...style, opacity: 0, transition: 'opacity 0.2s ease-in' }}
+      onLoad={e => { e.target.style.opacity = 1; }}
+    />
+  );
+}

package/src/components/ChatPanel.jsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { useStore } from '@/lib/client-store';
+import { getAvatarUrl } from '@/lib/avatar';
+import { useI18n } from '@/lib/i18n';
+import { MessageBubble, ChatInput, TaskStatusPanel } from './ChatShared';
+import ProvidersBoard from './ProvidersBoard';
+
+export default function ChatPanel() {
+  const { company, chatWithSecretary, chatOpen, setChatOpen, chatMinimized, setChatMinimized } = useStore();
+  const { t } = useI18n();
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const [localHistory, setLocalHistory] = useState([]);
+  const [showProviders, setShowProviders] = useState(false);
+  const messagesEndRef = useRef(null);
+
+  // Check if any provider is enabled across all categories
+  const hasAnyProvider = useMemo(() => {
+    const dashboard = company?.providerDashboard;
+    if (!dashboard) return false;
+    return Object.values(dashboard).some(cat => cat.enabled > 0);
+  }, [company?.providerDashboard]);
+
+  useEffect(() => {
+    if (company?.chatHistory) {
+      setLocalHistory(company.chatHistory);
+    }
+  }, [company?.chatHistory]);
+
+  useEffect(() => {
+    if (chatOpen && !chatMinimized) {
+      setTimeout(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      }, 50);
+    }
+  }, [localHistory, chatOpen, chatMinimized]);
+
+  if (!company || !chatOpen) return null;
+
+  const secretary = company.secretary;
+
+  const handleSend = async () => {
+    if (!message.trim() || sending) return;
+    const msg = message.trim();
+    setMessage('');
+    setSending(true);
+
+    setLocalHistory(prev => [...prev, { role: 'boss', content: msg, time: new Date().toISOString() }]);
+
+    try {
+      await chatWithSecretary(msg);
+    } catch (e) {
+      setLocalHistory(prev => [...prev, {
+        role: 'secretary',
+        content: `${t('chat.errorPrefix')}${e.message}`,
+        time: new Date().toISOString(),
+      }]);
+    }
+    setSending(false);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  if (chatMinimized) {
+    return (
+      <button
+        onClick={() => setChatMinimized(false)}
+        className="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 shadow-2xl flex items-center justify-center z-[70] hover:scale-110 transition-all animate-fade-in group"
+        title={t('chat.openChat', { name: secretary?.name || t('setup.defaultSecretary') })}
+      >
+        <img
+          src={secretary?.avatar || getAvatarUrl('secretary')}
+          alt={t('chat.secretary')}
+          className="w-11 h-11 rounded-full border-2 border-white/20"
+        />
+        <span className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-[#0d0d0d] animate-pulse" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-6 right-6 w-[440px] h-[600px] bg-[var(--card)] border border-[var(--border)] rounded-2xl shadow-2xl flex flex-col z-[70] animate-fade-in overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--border)] bg-gradient-to-r from-blue-900/30 to-purple-900/30 shrink-0">
+        <img
+          src={secretary?.avatar || getAvatarUrl('secretary')}
+          alt={t('chat.secretary')}
+          className="w-10 h-10 rounded-full bg-[var(--border)]"
+        />
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-semibold flex items-center gap-2">
+            {secretary?.name || t('setup.defaultSecretary')}
+            <span className="w-2 h-2 bg-green-500 rounded-full" />
+          </div>
+          {secretary?.signature ? (
+            <div className="text-[10px] text-[var(--muted)] italic truncate" title={secretary.signature}>"{secretary.signature}"</div>
+          ) : (
+            <div className="text-[10px] text-[var(--muted)]">{t('chat.online')}</div>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setChatMinimized(true)}
+            className="text-[var(--muted)] hover:text-white text-lg w-7 h-7 flex items-center justify-center rounded-lg hover:bg-white/10 transition-all"
+            title={t('common.minimize')}
+          >
+            ▾
+          </button>
+          <button
+            onClick={() => setChatOpen(false)}
+            className="text-[var(--muted)] hover:text-white text-lg w-7 h-7 flex items-center justify-center rounded-lg hover:bg-white/10 transition-all"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {/* No provider configured — block chat and show setup prompt */}
+      {!hasAnyProvider ? (
+        <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
+          <div className="text-5xl mb-4">🧠</div>
+          <h3 className="text-base font-semibold text-yellow-400 mb-2">{t('chat.noProviderTitle')}</h3>
+          <p className="text-xs text-[var(--muted)] mb-5 max-w-xs leading-relaxed">{t('chat.noProviderDesc')}</p>
+          <button
+            onClick={() => setShowProviders(true)}
+            className="px-5 py-2.5 rounded-lg bg-[var(--accent)] text-white text-sm font-medium hover:opacity-90 transition-all"
+          >
+            {t('chat.noProviderBtn')}
+          </button>
+
+          {/* Inline ProvidersBoard modal */}
+          {showProviders && (
+            <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-[80] !m-0" onClick={() => setShowProviders(false)}>
+              <div className="bg-[var(--card)] border border-[var(--border)] rounded-2xl max-w-4xl w-full mx-4 max-h-[85vh] overflow-auto" onClick={e => e.stopPropagation()}>
+                <div className="flex justify-end p-3 pb-0">
+                  <button onClick={() => setShowProviders(false)} className="text-[var(--muted)] hover:text-white text-lg">✕</button>
+                </div>
+                <ProvidersBoard />
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (<>
+      {/* Messages area - reuse MessageBubble from ChatShared */}
+      <div className="flex-1 overflow-auto p-3 space-y-3">
+        {localHistory.length === 0 && (
+          <div className="text-center py-8">
+            <div className="text-4xl mb-2">💬</div>
+            <p className="text-sm text-[var(--muted)]">
+              {t('chat.welcome', { name: secretary?.name || t('setup.defaultSecretary') })}
+            </p>
+            <div className="mt-3 space-y-1">
+              {t('chat.suggestions').map((q, i) => (
+                <button
+                  key={i}
+                  className="block w-full text-xs text-left px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 text-[var(--muted)] hover:text-white transition-all"
+                  onClick={() => { setMessage(q); }}
+                >
+                  💡 {q}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {localHistory.map((msg, i) => (
+          <MessageBubble
+            key={i}
+            isMe={msg.role === 'boss'}
+            avatar={msg.role === 'secretary' ? (secretary?.avatar || getAvatarUrl('secretary')) : null}
+            name={msg.role === 'boss' ? company.boss : (secretary?.name || t('setup.defaultSecretary'))}
+            content={msg.content}
+            time={msg.time}
+            action={msg.action}
+            agentId={null}
+            onClickAvatar={null}
+            bossAvatar={company?.bossAvatar}
+          />
+        ))}
+
+        {sending && (
+          <div className="flex gap-2">
+            <img
+              src={secretary?.avatar || getAvatarUrl('secretary')}
+              alt={t('chat.secretary')}
+              className="w-7 h-7 rounded-full bg-[var(--border)] shrink-0"
+            />
+            <div className="bg-[var(--card)] border border-[var(--border)] rounded-2xl rounded-bl-sm px-3 py-2 text-sm">
+              <span className="animate-pulse text-[var(--muted)]">{t('chat.typing')}</span>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Task status panel - shared component */}
+      <TaskStatusPanel />
+
+      {/* Input area - reuse ChatInput from ChatShared */}
+      <ChatInput
+        value={message}
+        onChange={setMessage}
+        onSend={handleSend}
+        onKeyDown={handleKeyDown}
+        sending={sending}
+        placeholder={t('chat.inputPlaceholder', { name: secretary?.name || t('setup.defaultSecretary') })}
+      />
+      </>)}
+    </div>
+  );
+}

package/src/components/ChatShared.jsx

@@ -0,0 +1,255 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { useI18n } from '@/lib/i18n';
+import { useStore } from '@/lib/client-store';
+import { parseFileReferences, FileRefList } from './FileReference';
+import { cleanMessageContent } from './GroupChatView';
+import CachedAvatar from './CachedAvatar';
+
+// ============ Markdown 渲染组件 ============
+
+export const chatMarkdownComponents = {
+  p: ({ children }) => <p className="mb-1 last:mb-0">{children}</p>,
+  ul: ({ children }) => <ul className="list-disc list-inside mb-1 space-y-0.5">{children}</ul>,
+  ol: ({ children }) => <ol className="list-decimal list-inside mb-1 space-y-0.5">{children}</ol>,
+  li: ({ children }) => <li className="text-sm">{children}</li>,
+  strong: ({ children }) => <strong className="font-bold">{children}</strong>,
+  em: ({ children }) => <em className="italic">{children}</em>,
+  code: ({ inline, children }) => {
+    if (inline) {
+      return <code className="bg-white/10 px-1 py-0.5 rounded text-xs font-mono">{children}</code>;
+    }
+    return (
+      <pre className="bg-black/30 rounded-lg p-2 my-1 overflow-x-auto">
+        <code className="text-xs font-mono">{children}</code>
+      </pre>
+    );
+  },
+  a: ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-400 underline hover:text-blue-300">
+      {children}
+    </a>
+  ),
+  h1: ({ children }) => <h1 className="text-base font-bold mb-1">{children}</h1>,
+  h2: ({ children }) => <h2 className="text-sm font-bold mb-1">{children}</h2>,
+  h3: ({ children }) => <h3 className="text-sm font-semibold mb-0.5">{children}</h3>,
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-2 border-white/30 pl-2 my-1 text-[var(--muted)]">{children}</blockquote>
+  ),
+  hr: () => <hr className="my-2 border-white/10" />,
+  table: ({ children }) => (
+    <div className="overflow-x-auto my-1">
+      <table className="text-xs border-collapse">{children}</table>
+    </div>
+  ),
+  th: ({ children }) => <th className="border border-white/20 px-2 py-1 bg-white/5 font-semibold">{children}</th>,
+  td: ({ children }) => <td className="border border-white/20 px-2 py-1">{children}</td>,
+};
+
+// ============ 时间格式化 ============
+
+export function formatTime(time, t = (k) => k) {
+  if (!time) return '';
+  const d = new Date(time);
+  const now = new Date();
+  const diff = now - d;
+
+  if (diff < 60 * 1000) return t('time.justNow');
+  if (diff < 60 * 60 * 1000) return t('time.minutesAgo', { n: Math.floor(diff / 60000) });
+  if (diff < 24 * 60 * 60 * 1000) {
+    return d.toLocaleTimeString('zh', { hour: '2-digit', minute: '2-digit' });
+  }
+  if (diff < 7 * 24 * 60 * 60 * 1000) {
+    const days = [t('time.sun'), t('time.mon'), t('time.tue'), t('time.wed'), t('time.thu'), t('time.fri'), t('time.sat')];
+    return days[d.getDay()];
+  }
+  return d.toLocaleDateString('zh', { month: 'short', day: 'numeric' });
+}
+
+// ============ 消息气泡组件 ============
+
+/**
+ * 共享消息气泡组件
+ * 支持 Markdown 渲染、文件引用、action 标签
+ */
+export function MessageBubble({ isMe, avatar, name, content, time, action, subject, agentId, onClickAvatar, bossAvatar }) {
+  const { t } = useI18n();
+  const { cleanContent, fileRefs } = parseFileReferences(content);
+  return (
+    <div className={`flex gap-2 ${isMe ? 'flex-row-reverse' : ''}`}>
+      {!isMe ? (
+        <CachedAvatar
+          src={avatar}
+          alt=""
+          className={`w-8 h-8 rounded-full bg-[var(--border)] shrink-0 mt-0.5 ${
+            agentId ? 'cursor-pointer hover:ring-2 hover:ring-[var(--accent)] transition-all' : ''
+          }`}
+          onClick={() => agentId && onClickAvatar?.(agentId)}
+        />
+      ) : (
+        bossAvatar ? (
+          <CachedAvatar src={bossAvatar} alt="boss" className="w-8 h-8 rounded-full bg-[var(--border)] shrink-0 mt-0.5" />
+        ) : (
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
+            👤
+          </div>
+        )
+      )}
+      <div className={`max-w-[min(70%,560px)] ${isMe ? 'items-end' : 'items-start'}`}>
+        {/* Name + time */}
+        <div className={`flex items-center gap-2 mb-0.5 ${isMe ? 'flex-row-reverse' : ''}`}>
+          <span className="text-[10px] text-[var(--muted)]">{name}</span>
+          {time && (
+            <span className="text-[10px] text-[var(--muted)]/60">
+              {formatTime(time, t)}
+            </span>
+          )}
+        </div>
+        {/* Subject tag */}
+        {subject && (
+          <div className="text-[10px] text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded mb-1 inline-block">
+            📌 {subject}
+          </div>
+        )}
+        {/* Bubble */}
+        <div className={`rounded-2xl px-3 py-2 text-sm leading-relaxed ${
+          isMe
+            ? 'bg-[var(--accent)] text-white rounded-br-sm'
+            : 'bg-[var(--card)] border border-[var(--border)] rounded-bl-sm'
+        }`}>
+          <div className="break-words chat-markdown">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={chatMarkdownComponents}>
+              {cleanMessageContent(cleanContent)}
+            </ReactMarkdown>
+          </div>
+          <FileRefList fileRefs={fileRefs} />
+        </div>
+        {/* Action tag */}
+        {action && (
+          <div className="mt-1 text-[10px] text-blue-400 bg-blue-900/10 px-2 py-0.5 rounded inline-block">
+            {action.type === 'task_assigned' && (
+              <>
+                {t('chat.taskAssigned', { dept: action.departmentName })}
+                {action.taskStatus === 'running' && <span className="ml-1 animate-pulse">{t('chat.running')}</span>}
+              </>
+            )}
+            {action.type === 'need_new_department' && t('chat.needNewDept')}
+            {action.type === 'create_department' && (
+              <>
+                {t('chat.creatingDept', { dept: action.departmentName })}
+                {action.taskStatus === 'running' && <span className="ml-1 animate-pulse">{t('chat.planningHiring')}</span>}
+              </>
+            )}
+            {action.type === 'department_created' && t('chat.deptCreated', { dept: action.departmentName })}
+            {action.type === 'progress_report' && t('chat.progressReport')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============ 输入框组件 ============
+
+/**
+ * 共享聊天输入框组件
+ */
+export function ChatInput({ value, onChange, onSend, onKeyDown, sending, placeholder, inputRef }) {
+  const { t } = useI18n();
+  return (
+    <div className="px-4 py-3 border-t border-white/[0.06] bg-[var(--card)]">
+      <div className="flex gap-2 items-end">
+        <textarea
+          ref={inputRef}
+          className="input flex-1 text-sm resize-none min-h-[40px] max-h-[120px]"
+          placeholder={placeholder}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          disabled={sending}
+          rows={1}
+          style={{ height: 'auto' }}
+          onInput={e => {
+            e.target.style.height = 'auto';
+            e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
+          }}
+        />
+        <button
+          className="btn-primary px-4 py-2 text-sm shrink-0"
+          disabled={!value.trim() || sending}
+          onClick={onSend}
+        >
+          {sending ? '⏳' : t('mailbox.sendBtn')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============ 任务状态面板 ============
+
+/**
+ * 共享任务进度/结果面板
+ * 当有 runningTaskId 或 taskResult 时显示
+ */
+export function TaskStatusPanel() {
+  const { t } = useI18n();
+  const { runningTaskId, taskResult, clearTaskResult } = useStore();
+
+  if (!runningTaskId && !taskResult) return null;
+
+  return (
+    <div className="border-t border-[var(--border)] bg-gradient-to-r from-blue-950/40 to-indigo-950/40 shrink-0">
+      {runningTaskId && !taskResult && (
+        <div className="px-4 py-3 flex items-center gap-3">
+          <div className="relative w-5 h-5 shrink-0">
+            <div className="absolute inset-0 rounded-full border-2 border-blue-400/30" />
+            <div className="absolute inset-0 rounded-full border-2 border-blue-400 border-t-transparent animate-spin" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-medium text-blue-300">{t('chat.running')}</div>
+            <div className="text-[10px] text-[var(--muted)] mt-0.5 truncate">{t('chat.taskAssigned', { dept: '...' })}</div>
+          </div>
+          <div className="flex gap-1">
+            <span className="w-1 h-1 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: '0ms' }} />
+            <span className="w-1 h-1 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: '150ms' }} />
+            <span className="w-1 h-1 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: '300ms' }} />
+          </div>
+        </div>
+      )}
+      {taskResult && (
+        <div className="px-4 py-3">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <span className="text-sm">{taskResult.error ? '❌' : '✅'}</span>
+              <span className="text-xs font-medium text-white">{taskResult.error ? t('chat.errorPrefix') : t('chat.progressReport')}</span>
+            </div>
+            <button
+              onClick={clearTaskResult}
+              className="text-[10px] text-[var(--muted)] hover:text-white px-2 py-0.5 rounded hover:bg-white/10 transition-all"
+            >
+              ✕
+            </button>
+          </div>
+          {taskResult.error ? (
+            <div className="text-xs text-red-300 bg-red-900/20 rounded-lg px-3 py-2 border border-red-500/20">
+              {taskResult.error}
+            </div>
+          ) : (
+            <div className="text-xs text-[var(--foreground)] bg-white/5 rounded-lg px-3 py-2 border border-white/10 max-h-32 overflow-auto">
+              {typeof taskResult === 'string' ? (
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={{
+                  p: ({ children }) => <p className="mb-1 last:mb-0">{children}</p>,
+                }}>{taskResult}</ReactMarkdown>
+              ) : (
+                <pre className="whitespace-pre-wrap text-[10px]">{JSON.stringify(taskResult, null, 2)}</pre>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}