多模態輸入輸出與檔案預覽

概述

Work 支援豐富的多模態互動：使用者可以傳送圖片、文件、音訊等多種類型的內容給 Agent；Agent 的回覆中可以包含程式碼、文件、圖表等多種格式的輸出，均支援內嵌預覽與全螢幕檢視。

---

多模態輸入

支援的輸入類型

上傳方式

1. 拖曳上傳 — 將檔案直接拖到輸入區
2. 點擊上傳 — 點擊輸入區的附件按鈕選擇檔案
3. 貼上 — 從剪貼簿貼上圖片

模型格式適配

系統會根據目前使用的 LLM 供應商自動轉換輸入格式：

系統透過 resolveCapabilities 函式自動偵測目前模型的多模態能力（vision / document / audio），不支援的類型會提示使用者或降級處理。

---

多模態輸出與預覽

9 種預覽類型

Agent 輸出的檔案會被自動辨識類型並算繪為對應的預覽元件：

內嵌預覽卡片

Agent 輸出的檔案首先會以**內嵌預覽卡片（InlinePreviewCard）**的形式出現在對話流中：

操作按鈕（圖示 + 工具提示）：

全螢幕預覽視窗

點擊「展開」按鈕進入全螢幕預覽視窗：

預覽工具列（PreviewToolbar）：

• 縮放控制：放大 / 縮小 / 符合寬度
• 頁面導覽：上一頁 / 下一頁（多頁文件）
• 頁碼狀態：目前頁 / 總頁數

快速鍵：

預覽版面配置模式

---

Web 與 APP 能力共享

多模態預覽的核心元件在 claw-shared 層實作，Web 與 APP 共享同一套程式碼：

• DocumentPreviewModal — 預覽視窗容器
• InlinePreviewCard — 內嵌預覽卡片
• PreviewToolbar — 預覽工具列
• previewUtils.ts — 檔案類型辨識與載入工具

兩端透過 FileAccess 介面抽象檔案讀取方式：

• APP 端：透過 Tauri 本機檔案 API 讀取
• Web 端：透過 HTTP URL 或 data URL 載入

---

---

操作指南

如何傳送圖片/文件給 Agent

1. 拖曳上傳：將檔案從桌面或檔案總管直接拖到 Work 輸入區
2. 點擊上傳：點擊輸入區左側的 📎 附件按鈕，選擇檔案
3. 貼上圖片：複製圖片後在輸入區 Ctrl+V / Cmd+V 貼上
4. 附件出現在輸入區上方的預覽列中
5. 輸入文字描述你想讓 Agent 做什麼（如「分析這張圖片」），按 Enter 傳送

檔案大小限制：Read File 工具支援最大 5MB 的檔案。更大的檔案建議先上傳到雲端儲存再提供連結。

如何使用檔案預覽

1. 當 Agent 輸出包含檔案時，對話流中會出現內嵌預覽卡片
2. 懸停卡片檢視更多資訊
3. 點擊 展開 按鈕進入全螢幕預覽
4. 在全螢幕預覽中使用工具列操作（縮放、翻頁等）
5. 按 Esc 或點擊關閉按鈕退出預覽

---

常見問題

為什麼圖片傳送後 Agent 沒有分析？

• 目前模型可能不支援 vision 能力。檢查模型設定中的模型是否標記了 vision 支援。DeepSeek 系列模型不支援圖片輸入。
• 建議切換到 Claude Sonnet 4 或 GPT-4o。

為什麼 PDF 傳送後只回傳「不支援」？

• document 能力目前僅 Anthropic 系列模型（Claude）原生支援。使用 OpenAI 模型時，PDF 會降級處理。
• 替代方案：讓 Agent 使用 Read File 工具讀取 PDF 檔案路徑。

預覽視窗中檔案顯示異常

• 確認檔案格式正確（如 .xlsx 檔案不能用 .csv 副檔名）
• 超大檔案可能載入緩慢，請等待載入完成
• 部分特殊格式的 Office 檔案可能需要在外部應用程式中開啟

---

相關文件

• Work 對話概述 — 介面版面配置與入口
• 對話互動 — 訊息流與工作階段管理
• 工具管理 — 工具的檔案輸出能力