botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/lib/image-extractor.ts

@@ -0,0 +1,156 @@
+// ============================================================================
+// image-extractor.ts - 從 Tool Response 提取圖片 URL
+// 遵循 SOLID 原則：單一職責 - 只負責圖片 URL 提取
+// ============================================================================
+
+/**
+ * 提取的圖片資訊
+ */
+export interface ExtractedImage {
+  url: string;
+  alt: string;
+  gcsUri?: string;
+  expiresAt?: string;
+  sessionId?: string;
+}
+
+/**
+ * 從 Markdown 內容中提取圖片 URL
+ * 格式：![alt text](https://...)
+ * @param content - Markdown 內容
+ * @returns 提取的圖片陣列
+ */
+export function extractImagesFromMarkdown(content: string): ExtractedImage[] {
+  if (!content || typeof content !== 'string') {
+    return [];
+  }
+
+  const images: ExtractedImage[] = [];
+
+  // Markdown 圖片語法：![alt](url)
+  const markdownImageRegex = /!\[([^\]]*)\]\((https:\/\/[^)]+)\)/g;
+  let match;
+
+  while ((match = markdownImageRegex.exec(content)) !== null) {
+    const [, alt, url] = match;
+
+    // 只接受 HTTPS URL（安全性考量）
+    if (url.startsWith('https://')) {
+      images.push({
+        url,
+        alt: alt || 'Generated Image',
+      });
+    }
+  }
+
+  return images;
+}
+
+/**
+ * 從內容中提取 Session ID
+ * 格式：Session ID: `abc123-...`
+ * @param content - 內容字串
+ * @returns Session ID 或 undefined
+ */
+export function extractSessionId(content: string): string | undefined {
+  if (!content || typeof content !== 'string') {
+    return undefined;
+  }
+
+  // 匹配 Session ID: `xxx` 格式
+  const sessionIdRegex = /Session ID:\s*`([a-zA-Z0-9-]+)`/;
+  const match = content.match(sessionIdRegex);
+
+  return match ? match[1] : undefined;
+}
+
+/**
+ * 從 toolOutput 提取所有圖片資訊
+ * 支援多種格式：
+ * 1. 純字串（Markdown）
+ * 2. MCP 標準格式（陣列）
+ * @param toolOutput - 工具輸出
+ * @returns 提取的圖片陣列
+ */
+export function extractImagesFromToolOutput(toolOutput: unknown): ExtractedImage[] {
+  if (!toolOutput) {
+    return [];
+  }
+
+  let content = '';
+
+  // 處理不同格式
+  if (typeof toolOutput === 'string') {
+    content = toolOutput;
+  } else if (Array.isArray(toolOutput)) {
+    // MCP 標準格式：[{ type: 'text', text: '...' }]
+    content = toolOutput
+      .filter((item): item is { type: string; text: string } =>
+        item?.type === 'text' && typeof item?.text === 'string'
+      )
+      .map((item) => item.text)
+      .join('\n\n');
+  } else if (typeof toolOutput === 'object') {
+    // 其他物件格式，嘗試序列化
+    content = JSON.stringify(toolOutput);
+  }
+
+  const images = extractImagesFromMarkdown(content);
+  const sessionId = extractSessionId(content);
+
+  // 為所有圖片添加 sessionId
+  if (sessionId) {
+    images.forEach((img) => {
+      img.sessionId = sessionId;
+    });
+  }
+
+  return images;
+}
+
+/**
+ * 從多個 toolUses 提取所有圖片
+ * @param toolUses - 工具呼叫陣列
+ * @returns 提取的圖片陣列
+ */
+export function extractImagesFromToolUses(
+  toolUses?: Array<{ toolOutput?: unknown }>
+): ExtractedImage[] {
+  if (!toolUses || !Array.isArray(toolUses)) {
+    return [];
+  }
+
+  const allImages: ExtractedImage[] = [];
+
+  for (const toolUse of toolUses) {
+    if (toolUse.toolOutput) {
+      const images = extractImagesFromToolOutput(toolUse.toolOutput);
+      allImages.push(...images);
+    }
+  }
+
+  return allImages;
+}
+
+/**
+ * 檢查 URL 是否為有效的圖片 URL
+ * @param url - URL 字串
+ * @returns 是否為有效圖片 URL
+ */
+export function isValidImageUrl(url: string): boolean {
+  if (!url || typeof url !== 'string') {
+    return false;
+  }
+
+  // 必須是 HTTPS
+  if (!url.startsWith('https://')) {
+    return false;
+  }
+
+  // 檢查是否為 GCS Signed URL 或常見圖片格式
+  const isGcsUrl = url.includes('storage.googleapis.com') || url.includes('storage.cloud.google.com');
+  const hasImageExtension = /\.(png|jpg|jpeg|gif|webp)/i.test(url);
+  const hasImageMimeType = url.includes('Content-Type=image');
+
+  return isGcsUrl || hasImageExtension || hasImageMimeType;
+}

package/botrun-c/web/lib/path-utils.ts

@@ -0,0 +1,48 @@
+/**
+ * 路徑轉換工具
+ * 用途：統一處理 GCS URI ↔ 本地路徑的轉換
+ */
+
+/**
+ * 將 GCS URI 或純檔名轉換為本地路徑格式（供 MCP 工具使用）
+ *
+ * @example
+ * convertToLocalPath("gs://botrun-c/user123/projects/default/uploads/test.pdf")
+ * // => "uploads/test.pdf"
+ *
+ * @example
+ * convertToLocalPath("IMG_9167.PNG")
+ * // => "uploads/IMG_9167.PNG"
+ */
+export function convertToLocalPath(displayPath: string | undefined): string {
+  console.log(`🔄 [convertToLocalPath] Input:`, displayPath);
+
+  if (!displayPath) {
+    console.warn(`⚠️ [convertToLocalPath] displayPath is undefined/null`);
+    return '';
+  }
+
+  // 如果是 GCS URL (gs://...)，提取相對路徑
+  if (displayPath.startsWith('gs://')) {
+    // gs://botrun-c/{userId}/projects/default/uploads/55.pdf -> uploads/55.pdf
+    const match = displayPath.match(/\/projects\/default\/(.+)$/);
+    if (match) {
+      const localPath = match[1];
+      console.log(`✅ [convertToLocalPath] GCS -> local: ${displayPath} -> ${localPath}`);
+      return localPath;
+    }
+    console.warn(`⚠️ [convertToLocalPath] Could not match GCS pattern, returning original: ${displayPath}`);
+    return displayPath;
+  }
+
+  // 如果是純檔名（本地開發），加上 uploads/ 前綴
+  if (!displayPath.includes('/')) {
+    const localPath = `uploads/${displayPath}`;
+    console.log(`✅ [convertToLocalPath] Filename -> local: ${displayPath} -> ${localPath}`);
+    return localPath;
+  }
+
+  // 如果已經包含路徑，直接返回
+  console.log(`📍 [convertToLocalPath] Path exists, returning as-is: ${displayPath}`);
+  return displayPath;
+}

package/botrun-c/web/lib/rehype-del-to-mark.ts

@@ -0,0 +1,19 @@
+/**
+ * Rehype plugin: 將 <del> 標籤轉換為 <mark> 標籤
+ *
+ * 目的：將 Markdown 的刪除線語法 (~~text~~) 轉換為強調標記
+ * 原因：在某些情境下，~~text~~ 是用來強調而非刪除
+ */
+import { visit } from 'unist-util-visit';
+import type { Element } from 'hast';
+
+export function rehypeDelToMark() {
+  return (tree: any) => {
+    visit(tree, 'element', (node: Element) => {
+      // 將所有 <del> 標籤改為 <mark>
+      if (node.tagName === 'del') {
+        node.tagName = 'mark';
+      }
+    });
+  };
+}

package/botrun-c/web/lib/upload-service.ts

@@ -0,0 +1,326 @@
+/**
+ * 統一檔案上傳服務
+ *
+ * 功能：
+ * 1. 自動偵測環境（本地/生產）選擇上傳方式
+ * 2. 本地開發：Direct Upload 到後端檔案系統
+ * 3. 生產環境：Presigned URL → GCS
+ * 4. 支援驗證和錯誤處理
+ *
+ * 使用場景：
+ * - 迴紋針檔案上傳
+ * - 麥克風錄音上傳
+ * - 相機拍照/錄影上傳
+ */
+
+import { getApiEndpoint } from './api-url';
+
+export interface UploadOptions {
+  file: File;
+  idToken: string;
+  userId: string;  // 用於產生 audioUploadId
+  projectId?: string;
+  onProgress?: (progress: number) => void;
+}
+
+export interface UploadResult {
+  success: boolean;
+  displayPath: string;
+  size: number;
+  audioUploadId?: string;  // 回傳給 caller，用於後續 transcribe API
+  error?: string;
+}
+
+/**
+ * 產生 audioUploadId（用於串連上傳、驗證、轉錄流程）
+ *
+ * 格式：audio_${userId}_${timestamp}_${uuid}
+ */
+function generateAudioUploadId(userId: string): string {
+  const timestamp = Date.now();
+  const uuid = crypto.randomUUID().split('-')[0]; // 使用短 UUID
+  return `audio_${userId}_${timestamp}_${uuid}`;
+}
+
+/**
+ * 判斷是否為本地開發環境
+ */
+function isLocalDevelopment(): boolean {
+  if (typeof window === 'undefined') return false;
+  const hostname = window.location.hostname;
+  return hostname === "localhost" || hostname === "127.0.0.1";
+}
+
+/**
+ * 判斷是否為 Capacitor Native 環境
+ */
+function isCapacitorNative(): boolean {
+  if (typeof window === 'undefined') return false;
+  const capacitor = (window as any).Capacitor;
+  if (!capacitor) return false;
+  // 使用 Capacitor 官方方法判斷是否真正運行在原生平台
+  return capacitor.isNativePlatform?.() ?? false;
+}
+
+/**
+ * 使用 XMLHttpRequest 上傳以支援進度回報
+ */
+function uploadWithProgress(
+  url: string,
+  options: {
+    method: 'POST' | 'PUT';
+    headers?: Record<string, string>;
+    body: FormData | File;
+    onProgress?: (progress: number) => void;
+  }
+): Promise<{ ok: boolean; status: number; text: () => Promise<string>; json: () => Promise<any> }> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(options.method, url);
+
+    // 設定 headers
+    if (options.headers) {
+      Object.entries(options.headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+    }
+
+    // 上傳進度事件
+    xhr.upload.addEventListener('progress', (event) => {
+      if (event.lengthComputable && options.onProgress) {
+        const progress = Math.round((event.loaded / event.total) * 100);
+        console.log(`📊 [UploadService] Progress: ${progress}% (${event.loaded}/${event.total})`);
+        options.onProgress(progress);
+      }
+    });
+
+    xhr.addEventListener('load', () => {
+      resolve({
+        ok: xhr.status >= 200 && xhr.status < 300,
+        status: xhr.status,
+        text: async () => xhr.responseText,
+        json: async () => JSON.parse(xhr.responseText),
+      });
+    });
+
+    xhr.addEventListener('error', () => {
+      reject(new Error('網路錯誤'));
+    });
+
+    xhr.addEventListener('abort', () => {
+      reject(new Error('上傳已取消'));
+    });
+
+    xhr.send(options.body);
+  });
+}
+
+/**
+ * 本地開發模式上傳（Direct Upload）
+ */
+async function uploadDirect(options: UploadOptions): Promise<UploadResult> {
+  const { file, idToken, projectId = 'default', onProgress } = options;
+
+  console.log(`📁 [UploadService] Using direct upload (local development)`);
+
+  const formData = new FormData();
+  formData.append("file", file);
+  if (projectId) {
+    formData.append("projectId", projectId);
+  }
+
+  const response = await uploadWithProgress(getApiEndpoint("/api/upload/direct"), {
+    method: "POST",
+    headers: {
+      "Authorization": `Bearer ${idToken}`,
+    },
+    body: formData,
+    onProgress,
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(errorData.error || "直接上傳失敗");
+  }
+
+  const data = await response.json();
+  console.log(`✅ [UploadService] Direct upload completed:`, data);
+
+  return {
+    success: true,
+    displayPath: data.displayPath,
+    size: data.size,
+  };
+}
+
+/**
+ * 生產環境模式上傳（Presigned URL → GCS → Verify）
+ * 進度分配：取得 URL (5%) → 上傳 GCS (90%) → 驗證 (5%)
+ */
+async function uploadViaPresignedUrl(options: UploadOptions): Promise<UploadResult> {
+  const { file, idToken, userId, projectId = 'default', onProgress } = options;
+
+  console.log(`☁️ [UploadService] Using presigned URL (production)`);
+
+  // === 產生 audioUploadId（用於串連整個流程）===
+  const audioUploadId = generateAudioUploadId(userId);
+  console.log(`🎫 [UploadService] Generated audioUploadId: ${audioUploadId}`);
+
+  // Step 1: 取得 Presigned URL (進度 0-5%)
+  onProgress?.(2);
+  const presignedResponse = await fetch(getApiEndpoint("/api/upload/presigned-url"), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${idToken}`,
+      "X-Audio-Upload-Id": audioUploadId,  // 加入 correlation header
+    },
+    body: JSON.stringify({
+      filename: file.name,
+      contentType: file.type || "application/octet-stream",
+      fileSize: file.size,
+      projectId,
+    }),
+  });
+
+  console.log(`📡 [UploadService] Presigned response status:`, presignedResponse.status);
+
+  if (!presignedResponse.ok) {
+    const errorData = await presignedResponse.json();
+    console.error(`❌ [UploadService] Presigned URL failed:`, errorData);
+    throw new Error(errorData.error || "無法取得上傳 URL");
+  }
+
+  const presignedData = await presignedResponse.json();
+  console.log(`📦 [UploadService] Presigned data:`, presignedData);
+  onProgress?.(5);
+
+  const { uploadUrl, displayPath: gcsPath } = presignedData;
+
+  // Step 2: 上傳到 GCS (進度 5-95%)
+  console.log(`☁️ [UploadService] Uploading to GCS...`);
+  const uploadResponse = await uploadWithProgress(uploadUrl, {
+    method: "PUT",
+    headers: {
+      "Content-Type": file.type || "application/octet-stream",
+    },
+    body: file,
+    onProgress: (gcsProgress) => {
+      // GCS 上傳佔 90%（5% ~ 95%）
+      const mappedProgress = 5 + Math.round(gcsProgress * 0.9);
+      onProgress?.(mappedProgress);
+    },
+  });
+
+  console.log(`📡 [UploadService] GCS upload status:`, uploadResponse.status);
+
+  if (!uploadResponse.ok) {
+    const errorText = await uploadResponse.text();
+    console.error(`❌ [UploadService] GCS upload failed:`, errorText);
+    throw new Error(`GCS 上傳失敗: ${uploadResponse.status}`);
+  }
+
+  console.log(`✅ [UploadService] Uploaded to GCS successfully`);
+  onProgress?.(95);
+
+  // Step 3: 驗證上傳 (進度 95-100%)
+  console.log(`🔍 [UploadService] Verifying upload...`);
+  const verifyResponse = await fetch(getApiEndpoint("/api/upload/verify"), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${idToken}`,
+      "X-Audio-Upload-Id": audioUploadId,  // 傳遞同樣的 audioUploadId
+    },
+    body: JSON.stringify({
+      gcsUri: gcsPath,
+      filename: file.name,
+    }),
+  });
+
+  console.log(`📡 [UploadService] Verify response status:`, verifyResponse.status);
+
+  if (!verifyResponse.ok) {
+    const errorData = await verifyResponse.json();
+    console.error(`❌ [UploadService] Verify failed:`, errorData);
+    throw new Error("上傳驗證失敗");
+  }
+
+  const verifyData = await verifyResponse.json();
+  console.log(`📦 [UploadService] Verify data:`, verifyData);
+  onProgress?.(100);
+
+  return {
+    success: true,
+    displayPath: verifyData.displayPath || verifyData.gcsUri,
+    size: verifyData.size,
+    audioUploadId,  // 回傳 audioUploadId，供後續 transcribe 使用
+  };
+}
+
+/**
+ * 統一上傳方法（自動選擇上傳方式）
+ *
+ * @param options - 上傳選項
+ * @returns 上傳結果（包含 displayPath 和 size）
+ *
+ * @example
+ * const result = await uploadFile({
+ *   file: audioBlob,
+ *   idToken: await user.getIdToken(),
+ *   projectId: 'default',
+ * });
+ * console.log(result.displayPath); // "gs://..." 或 "filename.ext"
+ */
+export async function uploadFile(options: UploadOptions): Promise<UploadResult> {
+  const { file } = options;
+
+  console.log(`📤 [UploadService] Starting upload for: ${file.name} (${file.size} bytes)`);
+
+  const isLocalDev = isLocalDevelopment();
+  const isNative = isCapacitorNative();
+
+  console.log(`🔍 [UploadService] Environment: Local=${isLocalDev}, Native=${isNative}`);
+
+  try {
+    // 本地開發（非 Capacitor Native）：使用 Direct Upload
+    // 除非設定了 NEXT_PUBLIC_FORCE_GCS_UPLOAD=true 強制使用 GCS
+    const forceGcs = process.env.NEXT_PUBLIC_FORCE_GCS_UPLOAD === 'true' || process.env.NEXT_PUBLIC_FORCE_GCS_UPLOAD === '1';
+
+    if (isLocalDev && !isNative && !forceGcs) {
+      return await uploadDirect(options);
+    } else {
+      // 生產環境或 Capacitor Native 或 強制 GCS：使用 Presigned URL
+      return await uploadViaPresignedUrl(options);
+    }
+  } catch (error) {
+    console.error(`❌ [UploadService] Upload failed:`, error);
+    return {
+      success: false,
+      displayPath: '',
+      size: 0,
+      error: error instanceof Error ? error.message : "上傳失敗",
+    };
+  }
+}
+
+/**
+ * 批次上傳多個檔案
+ */
+export async function uploadFiles(
+  files: File[],
+  idToken: string,
+  userId: string,
+  projectId?: string
+): Promise<UploadResult[]> {
+  console.log(`📤 [UploadService] Batch upload: ${files.length} files`);
+
+  const results = await Promise.all(
+    files.map(file => uploadFile({ file, idToken, userId, projectId }))
+  );
+
+  const successCount = results.filter(r => r.success).length;
+  console.log(`✅ [UploadService] Batch upload completed: ${successCount}/${files.length} successful`);
+
+  return results;
+}

package/botrun-c/web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/botrun-c/web/next.config.js

@@ -0,0 +1,49 @@
+const path = require('path')
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // 🎯 Production 最佳化設定（最小化 footprint）
+  reactStrictMode: true,
+
+  // 📦 Static export（配合 Hono 服務）
+  // Note: Next.js 16 Turbopack 會自動輸出到 'out' 目錄
+  output: 'export',
+
+  env: {
+    // 🔢 注入版本號到前端（從 Docker build argument 傳入）
+    NEXT_PUBLIC_APP_VERSION: process.env.APP_VERSION || 'dev',
+  },
+
+  // 🔍 型別檢查（快速建置時可暫時停用）
+  typescript: {
+    ignoreBuildErrors: true, // 改為 false 啟用型別檢查
+  },
+
+  // 🗜️ Production 最佳化
+  productionBrowserSourceMaps: false, // ❌ 停用 sourcemap（減少檔案大小）
+
+  // 🧹 移除 console（減少 bundle size）
+  // 暫時停用以便本地除錯
+  // compiler: {
+  //   removeConsole: {
+  //     exclude: ['error', 'warn'], // 保留 error 和 warn，移除 log/info/debug
+  //   },
+  // },
+
+  // 🖼️ 圖片最佳化設定
+  images: {
+    unoptimized: true, // Static export 必須設定（不支援 server-side 圖片最佳化）
+  },
+
+  // 🚀 Turbopack 設定 (Next.js 16)
+  // Note: Turbopack 已內建 minification 和 tree-shaking，無需額外設定
+  turbopack: {
+    root: path.resolve(__dirname, '..'), // pnpm workspace root (絕對路徑)
+  },
+
+  experimental: {
+    turbopackFileSystemCacheForDev: true, // ✅ 開發模式快取（加速後續建置）
+  },
+}
+
+module.exports = nextConfig