feat: 第五轮开发 - 14项未来路线图功能完整实现

W1-W14 全部完成:
- W1: 消息搜索 (ILIKE全文检索 + SearchModal)
- W2: 对话导出 (JSON/Markdown/TXT三格式)
- W3: 记忆时间线 DevTools 可视化
- W4: 通知推送系统 (WebSocket + Browser Notification API)
- W5: 定时提醒 (30s轮询 + 重复提醒 + WebSocket推送)
- W6: 每日简报 (08:00自动生成: 天气+新闻+提醒+AI摘要)
- W7: IoT场景自动化 (规则引擎 10s轮询 + 条件评估 + 场景执行)
- W8: 语音输入 (浏览器 Speech Recognition API)
- W9: STT服务 (voice-service + whisper.cpp)
- W10: TTS服务 (浏览器 Speech Synthesis + edge-tts三档回退)
- W11: 文件管理 (上传/下载/缩略图/纯Go bilinear缩放)
- W12: 知识库RAG (PostgreSQL tsvector + 文档分块 + 检索)
- W13: 多模态 (图片上传+分析: Vision API + 本地Go分析回退)
- W14: PWA (Service Worker + 离线页 + install prompt)

总计: 6个Go微服务 + 10+前端组件 + 10+ PostgreSQL表 + 4个后台调度器

frontend/web/src/components/chat/MessageBubble.tsx

@@ -1,12 +1,16 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { CyreneAvatar } from '@/components/persona/CyreneAvatar';
 import { useAuthStore } from '@/store/authStore';
+import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis';
+import type { MessageAttachment } from '@/types/chat';
+import { ImageLightbox } from './ImageLightbox';
 
 interface MessageBubbleProps {
   role: 'user' | 'assistant' | 'system';
   content: string;
   timestamp: number;
   isStreaming?: boolean;
+  attachments?: MessageAttachment[];
 }
 
 /**
@@ -72,8 +76,70 @@ function useTypewriter(content: string, isStreaming: boolean): string {
   return displayed;
 }
 
-export function MessageBubble({ role, content, timestamp, isStreaming }: MessageBubbleProps) {
+/**
+ * AI 消息的操作栏 — 包含 TTS 朗读按钮
+ */
+function AIMessageActions({ content }: { content: string }) {
+  const { isSpeaking, isSupported, speak, stop } = useSpeechSynthesis();
+  const [isThisSpeaking, setIsThisSpeaking] = useState(false);
+  const contentRef = useRef(content);
+
+  // 当全局 TTS 正在朗读且对应的是本条消息时，设置 isThisSpeaking
+  useEffect(() => {
+    if (!isSpeaking) {
+      setIsThisSpeaking(false);
+    }
+  }, [isSpeaking]);
+
+  const handleToggleTTS = useCallback(() => {
+    if (isThisSpeaking) {
+      stop();
+      setIsThisSpeaking(false);
+    } else {
+      setIsThisSpeaking(true);
+      speak(content, { lang: 'zh-CN' });
+      // 朗读结束后重置
+      const checkEnd = setInterval(() => {
+        if (!window.speechSynthesis.speaking) {
+          setIsThisSpeaking(false);
+          clearInterval(checkEnd);
+        }
+      }, 200);
+    }
+  }, [content, isThisSpeaking, speak, stop]);
+
+  if (!isSupported) return null;
+
+  return (
+    <div className="flex items-center gap-1 mt-1.5">
+      <button
+        onClick={handleToggleTTS}
+        className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-all duration-200 ${
+          isThisSpeaking
+            ? 'bg-pink-100 text-pink-600 tts-playing'
+            : 'text-gray-400 hover:text-pink-500 hover:bg-pink-50'
+        }`}
+        title={isThisSpeaking ? '停止朗读' : '朗读此消息'}
+      >
+        {isThisSpeaking ? (
+          <>
+            <span className="text-sm">⏹</span>
+            <span>停止</span>
+          </>
+        ) : (
+          <>
+            <span className="text-sm">🔊</span>
+            <span>朗读</span>
+          </>
+        )}
+      </button>
+    </div>
+  );
+}
+
+export function MessageBubble({ role, content, timestamp, isStreaming, attachments }: MessageBubbleProps) {
   const isUser = role === 'user';
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
   const time = new Date(timestamp).toLocaleTimeString('zh-CN', {
     hour: '2-digit',
     minute: '2-digit',
@@ -84,6 +150,9 @@ export function MessageBubble({ role, content, timestamp, isStreaming }: Message
   // 判断是否还有未显示完的字符
   const hasMoreChars = isStreaming && displayedContent.length < content.length;
 
+  // 图片附件
+  const imageAttachments = attachments?.filter((a) => a.type === 'image') ?? [];
+
   return (
     <div className={`flex px-4 py-2 gap-3 ${isUser ? 'flex-row-reverse' : ''}`}>
       {/* 头像 */}
@@ -110,23 +179,114 @@ export function MessageBubble({ role, content, timestamp, isStreaming }: Message
             <span className="animate-streaming-cursor" />
           )}
         </p>
-        {!isStreaming && (
-          <p
-            className={`text-xs mt-1 ${
-              isUser ? 'text-pink-100' : 'text-gray-400'
+
+        {/* 图片附件网格 */}
+        {!isStreaming && imageAttachments.length > 0 && (
+          <div
+            className={`grid gap-1.5 mt-2 ${
+              imageAttachments.length === 1
+                ? 'grid-cols-1'
+                : imageAttachments.length === 2
+                ? 'grid-cols-2'
+                : 'grid-cols-3'
             }`}
           >
-            {time}
-          </p>
+            {imageAttachments.map((att, idx) => (
+              <ImageThumbnail
+                key={idx}
+                attachment={att}
+                onClick={() => setLightboxIndex(idx)}
+              />
+            ))}
+          </div>
+        )}
+
+        {!isStreaming && (
+          <>
+            {/* AI 消息操作栏（朗读按钮） */}
+            {!isUser && <AIMessageActions content={content} />}
+            <p
+              className={`text-xs mt-1 ${
+                isUser ? 'text-pink-100' : 'text-gray-400'
+              }`}
+            >
+              {time}
+            </p>
+          </>
         )}
       </div>
 
       {/* 用户头像 */}
       {isUser && <UserAvatar />}
+
+      {/* Lightbox */}
+      {lightboxIndex !== null && (
+        <ImageLightbox
+          attachments={imageAttachments}
+          currentIndex={lightboxIndex}
+          onClose={() => setLightboxIndex(null)}
+        />
+      )}
     </div>
   );
 }
 
+/** 图片缩略图组件 */
+function ImageThumbnail({
+  attachment,
+  onClick,
+}: {
+  attachment: MessageAttachment;
+  onClick: () => void;
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const url = attachment.thumbnail_url || attachment.url;
+
+  return (
+    <button
+      onClick={onClick}
+      className="relative w-full aspect-square rounded-lg overflow-hidden border border-pink-100 dark:border-pink-800 bg-gray-100 dark:bg-gray-700 hover:ring-2 hover:ring-pink-400 transition-all cursor-pointer group"
+      aria-label={`查看图片: ${attachment.filename || '未命名图片'}`}
+    >
+      {/* 加载中 */}
+      {!loaded && !error && (
+        <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+          <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        </div>
+      )}
+
+      {/* 加载失败 */}
+      {error && (
+        <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+          <span className="text-2xl">🖼️</span>
+        </div>
+      )}
+
+      {/* 图片 */}
+      <img
+        src={url}
+        alt={attachment.filename || '图片'}
+        className={`w-full h-full object-cover transition-transform group-hover:scale-105 ${loaded ? 'block' : 'hidden'}`}
+        onLoad={() => setLoaded(true)}
+        onError={() => setError(true)}
+      />
+
+      {/* 悬停遮罩 */}
+      {loaded && (
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <path fillRule="evenodd" d="M15 3.75a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0V5.56l-3.97 3.97a.75.75 0 11-1.06-1.06l3.97-3.97h-3.69a.75.75 0 010-1.5h4.5zM5.25 6.75a3 3 0 00-3 3v7.5a3 3 0 003 3h13.5a3 3 0 003-3v-7.5a3 3 0 00-3-3H15a.75.75 0 000 1.5h3.75a1.5 1.5 0 011.5 1.5v7.5a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-7.5a1.5 1.5 0 011.5-1.5H9a.75.75 0 000-1.5H5.25z" clipRule="evenodd" />
+          </svg>
+        </div>
+      )}
+    </button>
+  );
+}
+
 /** 用户头像组件：管理员使用 Admin_Avatar.jpg，普通用户使用 Default_Avatar.png */
 function UserAvatar() {
   const [imgError, setImgError] = useState(false);