@wszhoho/dsh-file-attachment 0.5.0 → 0.5.1

package/lib/client.js

@@ -28,7 +28,7 @@ window.__ModuleLoader__.load({
 		// ---- 模块级状态：document 监听器 / dock 槽（同步桥）/ overlay 槽（toast）共享 ----
 		let ctxRef = null // apply 时记下 ctx，供远程调用与降级判断
 		const bridge = {
-			shell: null,          // 输入机 shell（insertReference/snapshot），来自当前会话
+			shell: null,          // 输入机 shell（insertText/snapshot），来自当前会话
 			actions: null,        // InputActions（setDraft/addImages...），来自当前会话
 			input: undefined,     // 最新 InputState（draft/phase...），随渲染刷新
 			conversation: undefined, // conversation 服务：登记草稿图片
@@ -189,10 +189,10 @@ window.__ModuleLoader__.load({
 			noticeTimer = setTimeout(() => { noticeTimer = null; if (bridge.noticeText === text) publishNotice(null) }, NOTICE_MS)
 		}
 
-		// ---- 已附加文件（待发送）：runBatch 插入 chip 成功后登记，FaFileDock 渲染，发送后清空 ----
+		// ---- 已附加文件（待发送）：runBatch 插入 @路径 成功后登记，FaAttachments（输入框内附件条）渲染，发送后清空 ----
 		let faSeq = 0
 		const attached = new Map() // id -> { id, name, path, isImage, url, sessionId }
-		const attachedListeners = new Set() // 变化订阅（FaFileDock 重渲染）
+		const attachedListeners = new Set() // 变化订阅（FaAttachments 重渲染）
 		function emitAttached() { for (const fn of attachedListeners) { try { fn() } catch (err) { /* 忽略 */ } } }
 		function attachFile(entry) { attached.set(entry.id, entry); emitAttached() }
 		function detachFile(id) { if (attached.delete(id)) emitAttached() }
@@ -202,38 +202,40 @@ window.__ModuleLoader__.load({
 			if (changed) emitAttached()
 		}
 
-		// 文件条移除时清除草稿中指向给定路径的全部 @引用 chip（同一文件拖多次会留多个 chip，需全清）。
-		// 兼容两代 dsh 输入机：旧版（Lexical）draft 是 clipboard 投影（chip 展开为 @路径 文本），
-		// 新版（纯文本机，chip 外观是文本上的扫描装饰）draft 是纯文本——两代里 occurrence 的
-		// [offset, offset+length) 都是 snap.draft 内的文本区间，故统一 setDraft 整文拼接删除
-		//（新版 consumeToken 的 span 分支内部本就是 setDraft 拼接）。每轮删一个目标区间
-		//（连带 chip 后机器自动补的尾随空格 gap），draftRev 递增后重读 snapshot，循环至无目标。
+		// 附件条移除时清除草稿中指向给定路径的引用。
+		// chip 模式下 snap.draft（clipboardText 投影）包含 chip 的 @完整路径；
+		// setDraft 会清空所有 Lexical 节点（含 chip）重建为纯文本——调用后 chip 变为
+		// @路径 纯文本（TextRefNode 颜色装饰，可发送）。子串须位于行首或前面是空白，
+		// 防误伤用户文本；同一文件拖多次会留多份，循环至无目标。
 		function removeDraftRefs(path) {
 			const shell = bridge.shell
 			if (shell === null || typeof path !== 'string' || path === '') return
 			if (typeof shell.setDraft !== 'function') return
 			const plain = '@' + path
 			const quoted = '@"' + path + '"'
-			const isTarget = (oc) => oc.ref === plain || oc.ref === quoted
-				|| (oc.clipboardText !== void 0 && (oc.clipboardText === plain || oc.clipboardText === quoted))
 			for (let n = 0; n < 64; n++) {
 				const snap = readShellSnapshot(shell)
 				if (snap === null || snap === void 0 || typeof snap.draft !== 'string') break
-				// 发送进行中不动草稿（此时 occurrence 会随发送完成清空）
+				// 发送进行中不动草稿（此时 @引用 会随发送完成清空）
 				if (snap.phase === 'adjudicating' || snap.phase === 'submitting') break
-				// 取第一个有效（类型+边界健全）且指向目标路径的 occurrence，边界失配直接跳过防误伤用户文本
-				const occs = snap.occurrences || []
-				let oc = null
-				for (let i = 0; i < occs.length; i++) {
-					const o = occs[i]
-					if (typeof o.offset !== 'number' || typeof o.length !== 'number' || o.length <= 0) continue
-					if (o.offset < 0 || o.offset + o.length > snap.draft.length) continue
-					if (isTarget(o)) { oc = o; break }
+				const draft = snap.draft
+				let idx = -1
+				for (let i = 0; i <= draft.length; i++) {
+					const p = draft.indexOf(plain, i)
+					if (p === -1) break
+					if (p === 0 || /\s/.test(draft[p - 1])) { idx = p; break }
 				}
-				if (oc === null) break
-				let end = oc.offset + oc.length
-				if (snap.draft.charCodeAt(end) === 32) end += 1 // 吃掉插入 chip 时机器自动补的尾随空格 gap
-				shell.setDraft(snap.draft.slice(0, oc.offset) + snap.draft.slice(end))
+				if (idx === -1) {
+					for (let i = 0; i <= draft.length; i++) {
+						const p = draft.indexOf(quoted, i)
+						if (p === -1) break
+						if (p === 0 || /\s/.test(draft[p - 1])) { idx = p; break }
+					}
+				}
+				if (idx === -1) break
+				let end = idx + plain.length
+				if (draft.charCodeAt(end) === 32) end += 1 // 吃掉插入时补的尾随空格 gap
+				shell.setDraft(draft.slice(0, idx) + draft.slice(end))
 			}
 		}
 
@@ -510,7 +512,7 @@ window.__ModuleLoader__.load({
 				announce('输入框不可用')
 				return true
 			}
-			// 有输入桥：接管全部（图片与文档统一落盘 → @引用芯片，方案 B 绕开 dsh image 能力检查）
+			// 有输入桥：接管全部（图片与文档统一落盘 → @路径 纯文本，方案 B 绕开 dsh image 能力检查）
 			e.preventDefault()
 			e.stopImmediatePropagation()
 			dismissDropOverlay()
@@ -518,8 +520,8 @@ window.__ModuleLoader__.load({
 			return true
 		}
 
-		// 异步批处理：文档 + 图片统一落盘 → shell.insertReference 芯片（不显示长路径，发送还原 @ 路径）。
-		// 图片不走 dsh 草稿附件链路（方案 B：文本模型被 dsh 拒绝 image 附件），改与文档同链路：落盘 → @引用 → 文件条登记。
+		// 异步批处理：文档 + 图片统一落盘 → shell.insertReference chip（label=短文件名显示，clipboardText=@完整路径发送）。
+		// 图片不走 dsh 草稿附件链路（方案 B：文本模型被 dsh 拒绝 image 附件），改与文档同链路：落盘 → chip 引用 → 附件条登记。
 		// 目录拒绝；扩展名按配置校验（图片恒允许）。
 		async function runBatch(images, docs) {
 			const shell = bridge.shell
@@ -563,7 +565,7 @@ window.__ModuleLoader__.load({
 				const it = pending[i]
 				try {
 					if (it.isImage) {
-						// 图片：落盘 → @引用芯片 + 文件条登记（方案 B：走文件引用链路，
+						// 图片：落盘 → @路径 纯文本 + 附件条登记（方案 B：走文件引用链路，
 						// 不触发 dsh 的 image 能力检查，文本模型可正常发送到历史）
 						const data = it.file
 						const name = it.name
@@ -582,7 +584,7 @@ window.__ModuleLoader__.load({
 						// 每次插入前重取 snapshot（draftRev 随插入递增，span 取当前末尾）
 						const snap = readShellSnapshot(shell)
 						// 前导分隔空格：聊天记录对 @引用 的 file-chip 渲染（projectUserText）
-						// 要求 @ 前是行首或空白，而 insertReference 只在 chip 后补空格。
+						// 要求 @ 前是行首或空白；纯文本 @路径 也遵循同样边界。
 						// 草稿末尾紧贴文字时先补一格，否则发送后聊天记录显示裸 @路径。
 						if (snap !== void 0 && typeof snap.draft === 'string' && snap.draft !== ''
 							&& !isSpace(snap.draft.charCodeAt(snap.draft.length - 1))) {
@@ -594,10 +596,9 @@ window.__ModuleLoader__.load({
 							}
 						}
 						// 补空格会递增 draftRev，重新取快照后再定插入 span。
-						// 关键：insertReference 的 span 是 detect 坐标（编辑器实际节点坐标），
-						// draft.length 是 clipboard 投影坐标（chip 展开为 @路径 文本），草稿含 chip 时两者不一致
-						// 会导致 selectSpan 越界失败（span.end > detectLength → null → ok:false）。
-						// 用 shell.caretSpan() 拿 detect 坐标（有光标返回光标处，否则返回文档末尾）。
+						// 关键：insertText 的 span 是 detect 坐标（编辑器实际节点坐标），
+						// draft.length 是投影坐标，纯文本机下两者一致；仍优先 shell.caretSpan()
+						// 拿 detect 坐标（有光标返回光标处，否则返回文档末尾），与历史行为对齐。
 						const snap2 = readShellSnapshot(shell)
 						let span
 						if (typeof shell.caretSpan === 'function') {
@@ -610,25 +611,17 @@ window.__ModuleLoader__.load({
 						} else {
 							span = { draftRev: snap2.draftRev, start: snap2.draft.length, end: snap2.draft.length }
 						}
-						const okInsert = shell.insertReference(
-							{
-								source: 'reference', // 复用内置已注册的 @引用 source（带 codec.serialize），否则报 no serializer
-								ref: clipboardText, // codec.serialize 原样返回 ref 作为模型文本，故放完整 @路径
-								label: name,
-								appearance: 'file',
-								clipboardText: clipboardText,
-							},
-							span,
-						)
-						if (typeof console !== 'undefined' && console.log) console.log('[dsh-file-attachment] image insertReference result', { ok: okInsert, span, clipboardText, draftRev: snap2.draftRev, draftLen: snap2.draft.length })
+						// chip 插入：label=短文件名（显示用），clipboardText=@完整路径（发送用）
+						const okInsert = shell.insertReference({ source: 'reference', ref: clipboardText, label: name, appearance: 'file', clipboardText: clipboardText }, span)
+						if (typeof console !== 'undefined' && console.log) console.log('[dsh-file-attachment] image insertReference result', { ok: okInsert, span, name, clipboardText, draftRev: snap2.draftRev })
 						if (okInsert) {
 							inserted += 1
-							// 登记到文件条（图片：data URL 缩略图 + 点击打开；发送后随 chip 清空）
+							// 登记到附件条（图片：data URL 缩略图 + 点击打开；发送后随 @引用 清空）
 							attachFile({ id: 'fa' + (++faSeq), name, path: res.path, isImage: true, url: thumbUrl, sessionId: bridge.sessionId })
 						} else failed += 1
 						continue
 					}
-					// 文档：原样落盘 → @引用芯片 + 文件条登记
+					// 文档：原样落盘 → @路径 纯文本 + 附件条登记
 					const data = it.file
 					const name = it.name
 					if (data === null || typeof data.size !== 'number' || data.size === 0) throw new Error('size')
@@ -641,7 +634,7 @@ window.__ModuleLoader__.load({
 					// 每次插入前重取 snapshot（draftRev 随插入递增，span 取当前末尾）
 					const snap = readShellSnapshot(shell)
 					// 前导分隔空格：聊天记录对 @引用 的 file-chip 渲染（projectUserText）
-					// 要求 @ 前是行首或空白，而 insertReference 只在 chip 后补空格。
+					// 要求 @ 前是行首或空白；纯文本 @路径 也遵循同样边界。
 					// 草稿末尾紧贴文字时先补一格，否则发送后聊天记录显示裸 @路径
 					//（旧版 insertTextAtCaret 的 padStart 同款保底）。
 					if (snap !== void 0 && typeof snap.draft === 'string' && snap.draft !== ''
@@ -650,12 +643,11 @@ window.__ModuleLoader__.load({
 						if (typeof shell.insertText === 'function') {
 							try { shell.insertText(' ', leadSpan) } catch (err) { /* 忽略：补空格失败不阻塞插入 */ }
 						} else if (typeof shell.setDraft === 'function') {
-							// 含 chip 的草稿末尾必为空白（chip 自动尾随空格），故此处必为纯文本，拼接安全
 							try { shell.setDraft(snap.draft + ' ') } catch (err) { /* 忽略 */ }
 						}
 					}
 					// 补空格会递增 draftRev，重新取快照后再定插入 span。
-					// 与图片分支同理：insertReference 的 span 须为 detect 坐标，优先 shell.caretSpan()。
+					// 与图片分支同理：insertText 的 span 须为 detect 坐标，优先 shell.caretSpan()。
 					const snap2 = readShellSnapshot(shell)
 					let span
 					if (typeof shell.caretSpan === 'function') {
@@ -668,19 +660,11 @@ window.__ModuleLoader__.load({
 					} else {
 						span = { draftRev: snap2.draftRev, start: snap2.draft.length, end: snap2.draft.length }
 					}
-					const okInsert = shell.insertReference(
-						{
-							source: 'reference', // 复用内置已注册的 @引用 source（带 codec.serialize），否则报 no serializer
-							ref: clipboardText, // codec.serialize 原样返回 ref 作为模型文本，故放完整 @路径
-							label: name,
-							appearance: 'file',
-							clipboardText: clipboardText,
-						},
-						span,
-					)
+					// chip 插入：label=短文件名（显示用），clipboardText=@完整路径（发送用）
+					const okInsert = shell.insertReference({ source: 'reference', ref: clipboardText, label: name, appearance: 'file', clipboardText: clipboardText }, span)
 					if (okInsert) {
 						inserted += 1
-						// 登记到文件条（图片：data URL 缩略图；文档：类型图标；发送后随 chip 清空）
+						// 登记到附件条（图片：data URL 缩略图；文档：类型图标；发送后随 @引用 清空）
 						attachFile({ id: 'fa' + (++faSeq), name, path: res.path, isImage: false, url: null, sessionId: bridge.sessionId })
 					} else failed += 1
 				} catch (err) {
@@ -770,15 +754,9 @@ window.__ModuleLoader__.load({
 					if (conversation !== void 0 && actx !== void 0) {
 						shell = conversation.input.for(actx)
 						if (shell !== null) {
-							addImages = (files) => {
-								try {
-									const drafts = conversation.createDrafts(sessionId, files)
-									if (!shell.addAttachments(drafts.map((draft) => draft.id))) conversation.releaseDraftAttachments(drafts)
-									return null
-								} catch (error) {
-									return error instanceof Error ? error.message : String(error)
-								}
-							}
+							// 不再注册 dsh 原生附件（createDrafts + addAttachments 会导致原生附件条重复显示）
+							// 插件已接管图片落盘 + chip 引用 + 自定义附件条（FaAttachments）
+							addImages = (files) => { return null }
 						}
 					}
 				}
@@ -812,8 +790,10 @@ window.__ModuleLoader__.load({
 			)
 		}
 
-		// 文件条（输入框上方 dock）：图片真缩略图 / 文件类型图标，点击用默认程序打开，可移除，发送后自动清空。
-		function FaFileDock() {
+		// 输入框内附件条（conversation.input.attachments 槽，shadow 原生 ComposerAttachments）：
+		// 图片显示真缩略图预览 / 文件仅类型图标；文件名横排显示在缩略图/图标右侧（草稿 @引用 chip
+		// 已改为只留图标不显示文字，避免双份名称）；可移除（先清草稿 @引用 再登记移除）；发送后自动清空。
+		function FaAttachments() {
 			const [, force] = react.useState(0)
 			react.useEffect(() => {
 				const fn = () => force(n => n + 1)
@@ -839,26 +819,25 @@ window.__ModuleLoader__.load({
 			if (entries.length === 0) return null
 			return react.createElement('div', {
 				style: {
-					display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center',
-					width: '100%', maxWidth: 'calc(var(--dsh-composer-card-max-width, 720px) - 24px)',
-					margin: '0 auto 6px', padding: '2px 4px', boxSizing: 'border-box',
+					display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center',
+					width: '100%', boxSizing: 'border-box',
 				},
 			},
 				entries.map(e =>
 					react.createElement('div', { key: e.id, style: {
-						display: 'inline-flex', alignItems: 'center', gap: '6px',
+						display: 'inline-flex', alignItems: 'center', gap: '8px',
 						background: 'rgba(128,128,128,0.12)', border: '1px solid rgba(128,128,128,0.2)',
-						borderRadius: '8px', padding: '3px 8px', fontSize: '12px', lineHeight: '1.4', maxWidth: '240px',
+						borderRadius: '10px', padding: '4px 8px', fontSize: '12px', lineHeight: '1.4', maxWidth: '260px',
 					} },
 						e.isImage && e.url
-							? react.createElement('img', { src: e.url, alt: '', style: { width: '20px', height: '20px', objectFit: 'cover', borderRadius: '4px', flex: 'none' } })
+							? react.createElement('img', { src: e.url, alt: e.name, title: e.name, style: { width: '56px', height: '56px', objectFit: 'cover', borderRadius: '8px', flex: 'none', display: 'block' } })
 							: react.createElement('span', { style: { display: 'inline-flex', width: '20px', height: '20px', flex: 'none', color: 'inherit' } }, fileGlyph(e.name)),
 						react.createElement('span', {
 							style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 },
 						}, e.name),
 						react.createElement('span', {
 							onClick: () => {
-								// 先清草稿中指向该文件的全部 @引用 chip，再移除文件条条目
+								// 先清草稿中指向该文件的全部 @引用 chip，再移除附件条条目
 								try { removeDraftRefs(e.path) } catch (err) { /* 忽略：引用清理失败不阻塞移除 */ }
 								detachFile(e.id)
 							},
@@ -870,12 +849,231 @@ window.__ModuleLoader__.load({
 			)
 		}
 
+		// ---- 聊天区用户消息渲染器（shadow conversation.chat.node keyed 'user'）----
+		// 需求：图片在聊天区也要预览（缩略图 + 点击放大）；文件自始至终不需要预览（保持 chip）。
+		// 方案 B 下用户消息以 @绝对路径 文本形式落库（无原生附件块），故核心是扫描 text 块内的
+		// @路径：图片路径 → /api/file?path= 缩略图（宿主既有文件服务路由，同 AssistantMarkdown
+		// localPathMediaUrl 机制）；文件路径 → 复刻 dsh projectUserText 的 refChip 样式（无预览）。
+		// 原生 image/file 附件块（多模态模型场景）→ 尽力渲染（renderMessageImages / 文件卡片）。
+		// 本插件自包含（无法 import dsh 包），全部 react.createElement + 内联样式复刻。
 
-		// 扩展名规范化：小写/去前导点/仅 [a-z0-9]；非法返回 null
-		function normExt(v) {
-			const s = String(v == null ? '' : v).trim().toLowerCase().replace(/^\.+/u, '')
-			return (s !== '' && /^[a-z0-9]+$/u.test(s)) ? s : null
+		// 图片扩展名集合（与 host IMAGE_EXT 一致：png/jpg/jpeg/gif/webp/bmp）
+		const IMAGE_EXT_SET = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'])
+		function isImagePath(p) {
+			if (typeof p !== 'string' || p === '') return false
+			const dot = p.lastIndexOf('.')
+			if (dot <= 0) return false
+			return IMAGE_EXT_SET.has(p.slice(dot + 1).toLowerCase())
+		}
+		// 复刻 dsh fileSizeText：字节数 → 人类可读
+		function fileSizeText(bytes) {
+			if (typeof bytes !== 'number' || !isFinite(bytes) || bytes < 0) return ''
+			if (bytes < 1024) return bytes + ' B'
+			if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1).replace(/\.0$/u, '') + ' KB'
+			if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1).replace(/\.0$/u, '') + ' MB'
+			return (bytes / (1024 * 1024 * 1024)).toFixed(1).replace(/\.0$/u, '') + ' GB'
+		}
+		// 复刻 dsh contentParts：用户消息 content（块数组）拆 text/attachments/rest
+		function contentParts(content) {
+			const texts = []
+			const attachments = []
+			const rest = []
+			if (!Array.isArray(content)) {
+				return { text: (typeof content === 'string' ? content : ''), attachments, rest }
+			}
+			for (const block of content) {
+				const b = (block !== null && typeof block === 'object') ? block : null
+				if (b !== null && b.type === 'text' && typeof b.text === 'string') texts.push(b.text)
+				else if (b !== null && b.type === 'image' && b.attachment !== void 0) attachments.push({ type: 'image', image: b.attachment })
+				else if (b !== null && b.type === 'file' && b.attachment !== void 0) attachments.push({ type: 'file', file: b.attachment })
+				else if (b !== null) rest.push(block)
+			}
+			return { text: texts.join(''), attachments, rest }
+		}
+		// 复刻 dsh projectUserText 的 @路径 正则（含引号形式），扫描 text 中的引用 token。
+		// 返回 [{ start, end, raw, path }]：raw=完整 token（含@），path=去 @ 与前导引号后的路径。
+		function scanRefTokens(text) {
+			const out = []
+			if (typeof text !== 'string' || text === '') return out
+			const re = /(^|\s)(\/[\w-]+(?=\s|$)|@"[^"\n]+"|@[^\s]+)/gu
+			let m = null
+			while ((m = re.exec(text)) !== null) {
+				const tokenStart = m.index + (m[1] || '').length
+				const raw = m[2]
+				if (typeof raw !== 'string' || raw.charAt(0) !== '@') continue // /name 是 skill/command，保持文本
+				let path = raw.slice(1)
+				if (path.charAt(0) === '"' && path.length > 1 && path.charAt(path.length - 1) === '"') path = path.slice(1, -1)
+				out.push({ start: tokenStart, end: tokenStart + raw.length, raw, path })
+			}
+			return out
 		}
+		// 复刻 dsh IconBrowseOutline16 的 SVG path（16×16 viewBox，文件浏览图标，currentColor）
+		function fileBrowseGlyph(size) {
+			return react.createElement('svg', { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', 'aria-hidden': true, style: { display: 'block' } },
+				react.createElement('path', { d: 'M11.2426 4.80473V6.10551H4.75819V4.80473H11.2426Z', fill: 'currentColor' }),
+				react.createElement('path', { d: 'M9.40858 7.84478V9.14557H4.75819V7.84478H9.40858Z', fill: 'currentColor' }),
+				react.createElement('path', {
+					d: 'M9.23438 0.546389C10.1941 0.546389 10.9683 0.544914 11.5859 0.611819C12.2161 0.680096 12.7634 0.825745 13.2393 1.17139C13.5172 1.3733 13.7619 1.61812 13.9639 1.896C14.3096 2.37183 14.4551 2.91922 14.5234 3.54932C14.5903 4.16686 14.5889 4.94133 14.5889 5.90088V10.0981C14.5889 11.0576 14.5903 11.8321 14.5234 12.4497C14.4552 13.0798 14.3094 13.6272 13.9639 14.103C13.7619 14.381 13.5172 14.6257 13.2393 14.8276C12.7633 15.1734 12.2163 15.3189 11.5859 15.3872C10.9683 15.4541 10.1942 15.4536 9.23438 15.4536H6.76563C5.80591 15.4536 5.03168 15.4541 4.41407 15.3872C3.78385 15.3189 3.23665 15.1734 2.76074 14.8276C2.48291 14.6257 2.23802 14.3809 2.03614 14.103C1.69066 13.6272 1.54483 13.0798 1.47657 12.4497C1.40973 11.8321 1.41114 11.0576 1.41114 10.0981V5.90088C1.41113 4.94132 1.40966 4.16686 1.47657 3.54932C1.54488 2.91921 1.69042 2.37184 2.03614 1.896C2.2381 1.61807 2.4828 1.37333 2.76074 1.17139C3.23665 0.825682 3.78386 0.680109 4.41407 0.611819C5.03168 0.544905 5.80591 0.546389 6.76563 0.546389H9.23438ZM6.76563 1.896C5.77586 1.896 5.0876 1.89738 4.55957 1.95459C4.0443 2.01043 3.76214 2.11349 3.55469 2.26416C3.39135 2.38284 3.24761 2.52662 3.12891 2.68994C2.97821 2.89736 2.8752 3.17967 2.81934 3.69483C2.76214 4.22279 2.76075 4.91131 2.76074 5.90088V10.0981C2.76074 11.0876 2.76221 11.7762 2.81934 12.3042C2.87516 12.8194 2.97829 13.1026 3.12891 13.3101C3.24754 13.4733 3.39147 13.6172 3.55469 13.7358C3.76213 13.8865 4.04438 13.9896 4.55957 14.0454C5.0876 14.1026 5.77586 14.103 6.76563 14.103H9.23438C10.2242 14.103 10.9124 14.1026 11.4404 14.0454C11.9556 13.9896 12.2379 13.8865 12.4453 13.7358C12.6086 13.6172 12.7525 13.4733 12.8711 13.3101C13.0217 13.1026 13.1248 12.8195 13.1807 12.3042C13.2378 11.7762 13.2393 11.0876 13.2393 10.0981V5.90088C13.2393 4.91131 13.2379 4.22279 13.1807 3.69483C13.1248 3.17969 13.0218 2.89736 12.8711 2.68994C12.7524 2.52667 12.6086 2.38281 12.4453 2.26416C12.2379 2.11355 11.9556 2.01041 11.4404 1.95459C10.9124 1.8974 10.2241 1.896 9.23438 1.896H6.76563Z', fill: 'currentColor' }),
+			)
+		}
+		// 聊天区 @文件路径 → refChip（复刻 dsh css.refChip：inline + 主题色 + 图标 + 末段名；无预览）
+		function renderRefChip(raw, path) {
+			let name = path
+			const sl = path.lastIndexOf('/')
+			if (sl >= 0 && sl < path.length - 1) name = path.slice(sl + 1)
+			const isFolder = raw.charAt(raw.length - 1) === '/' || path.charAt(path.length - 1) === '/'
+			return react.createElement('span', {
+				title: raw,
+				style: {
+					display: 'inline', margin: '0 2px', whiteSpace: 'nowrap',
+					color: 'var(--dsw-alias-state-business-primary)', fontWeight: 500,
+				},
+			},
+				react.createElement('span', { style: { display: 'inline-block', width: '1em', height: '1em', marginRight: '4px', verticalAlign: '-0.125em', color: 'inherit' } },
+					fileBrowseGlyph(16)),
+				name,
+			)
+		}
+		// 图片放大预览（Lightbox）：模块级状态，FaUserMessage 缩略图点击打开，FaLightbox 渲染
+		let lightboxSrc = null
+		let lightboxName = ''
+		let lightboxListener = null
+		function openLightbox(src, name) {
+			lightboxSrc = src
+			lightboxName = name || ''
+			if (lightboxListener !== null) lightboxListener()
+		}
+		function FaLightbox() {
+			const [, force] = react.useState(0)
+			react.useEffect(() => {
+				lightboxListener = () => force(n => n + 1)
+				return () => { if (lightboxListener !== null) lightboxListener = null }
+			}, [])
+			const src = lightboxSrc
+			if (src === null || src === '') return null
+			const close = () => { openLightbox(null, '') }
+			return react.createElement('div', {
+				onClick: close,
+				style: {
+					position: 'fixed', inset: '0', zIndex: 3000,
+					background: 'rgba(0,0,0,0.74)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+					cursor: 'zoom-out',
+				},
+			},
+				react.createElement('img', { src, alt: lightboxName, style: { maxWidth: '90vw', maxHeight: '90vh', borderRadius: '8px', boxShadow: '0 8px 40px rgba(0,0,0,0.5)' } }),
+				react.createElement('span', {
+					onClick: (e) => { e.stopPropagation(); close() },
+					title: '关闭',
+					style: { position: 'absolute', top: '18px', right: '24px', color: '#fff', fontSize: '30px', cursor: 'pointer', lineHeight: '1', userSelect: 'none' },
+				}, '×'),
+			)
+		}
+		// 宿主文件服务 URL：与 dsh AssistantMarkdown.localPathMediaUrl 同机制
+		function imageUrlFor(path) {
+			return '/api/file?path=' + encodeURIComponent(path)
+		}
+		// 聊天区 @图片路径 → 缩略图（<img /api/file?path=> + 点击放大 Lightbox）
+		function renderImageThumb(path, raw) {
+			const src = imageUrlFor(path)
+			return react.createElement('img', {
+				src,
+				alt: '',
+				title: raw,
+				onClick: () => { openLightbox(src, path) },
+				style: {
+					maxWidth: '240px', maxHeight: '240px', width: 'auto', height: 'auto',
+					objectFit: 'contain', borderRadius: '12px', display: 'inline-block',
+					verticalAlign: 'middle', cursor: 'zoom-in', margin: '2px 2px',
+				},
+			})
+		}
+		// text 块 → 节点序列：普通文本 run + @路径（图片→缩略图 / 文件→chip）
+		function projectTextWithImages(text) {
+			const tokens = scanRefTokens(text)
+			if (tokens.length === 0) return react.createElement('span', null, text)
+			const parts = []
+			let cursor = 0
+			for (const tk of tokens) {
+				if (tk.start > cursor) parts.push(react.createElement('span', { key: 't' + cursor }, text.slice(cursor, tk.start)))
+				if (isImagePath(tk.path)) parts.push(react.createElement('span', { key: 'i' + tk.start }, renderImageThumb(tk.path, tk.raw)))
+				else parts.push(react.createElement('span', { key: 'r' + tk.start }, renderRefChip(tk.raw, tk.path)))
+				cursor = tk.end
+			}
+			if (cursor < text.length) parts.push(react.createElement('span', { key: 't' + cursor }, text.slice(cursor)))
+			return react.createElement(react.Fragment, null, parts)
+		}
+		// 聊天区文件附件块 → 文件卡片（名 + 扩展名/大小 meta；无预览）
+		function renderFileCard(file, key) {
+			const ext = (file && typeof file.name === 'string' ? file.name.lastIndexOf('.') : -1) > 0
+				? String(file.name.slice(file.name.lastIndexOf('.') + 1)).toUpperCase().slice(0, 8)
+				: ''
+			const meta = [ext, fileSizeText(file && file.bytes)].filter(Boolean).join(' ')
+			return react.createElement('span', {
+				key, title: file && file.name,
+				style: {
+					display: 'inline-flex', flex: '0 0 240px', alignItems: 'center', gap: '10px',
+					width: '240px', minHeight: '64px', padding: '8px 12px',
+					border: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
+					borderRadius: '16px', background: 'var(--dsw-specific-input-major, transparent)',
+					boxSizing: 'border-box',
+				},
+			},
+				react.createElement('span', { style: { display: 'inline-flex', width: '20px', height: '20px', flex: 'none' } },
+					fileGlyph(file && file.name ? file.name : 'file')),
+				react.createElement('span', { style: { display: 'flex', flexDirection: 'column', minWidth: 0 } },
+					react.createElement('span', { style: { fontSize: '13px', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, file && file.name),
+					react.createElement('span', { style: { fontSize: '11px', opacity: 0.7 } }, meta),
+				),
+			)
+		}
+		// 聊天区用户消息渲染器：气泡 + @图片缩略图预览 / @文件 chip；附件块尽力渲染
+		function FaUserMessage(props) {
+			const node = props && props.node
+			const data = node ? node.data : null
+			const content = data ? data.content : []
+			const renderMessageImages = props && props.renderMessageImages
+			const { text, attachments, rest } = contentParts(content)
+			const showBubble = text !== '' || rest.length > 0
+			const rows = []
+			// 附件块（image → 原生缩略图画廊 / file → 文件卡片）
+			for (let i = 0; i < attachments.length; i++) {
+				const a = attachments[i]
+				if (a.type === 'image') {
+					// 原生 image 附件块：交 dsh 缩略图画廊渲染（ChatNodeOwnerProps.renderMessageImages，
+					// 由 CHAT_NODE_INJECT 注入，宿主必有）
+					if (typeof renderMessageImages === 'function') {
+						rows.push(react.createElement(react.Fragment, { key: 'image:' + i }, renderMessageImages({ images: [{ attachment: a.image }], align: 'end', compact: attachments.length > 1 })))
+					}
+				} else {
+					rows.push(renderFileCard(a.file, 'file:' + i))
+				}
+			}
+			// 气泡（text + rest）
+			if (showBubble) {
+				rows.push(react.createElement('div', {
+					key: 'bubble',
+					style: {
+						maxWidth: '100%', background: 'var(--dsw-specific-bubble)', borderRadius: '22px',
+						padding: '10px 16px', fontSize: 'var(--dsh-content-font-size, 14px)',
+						lineHeight: 'calc(22px + var(--dsh-content-font-delta, 0px))',
+						whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+					},
+				},
+					projectTextWithImages(text),
+					rest.map((block, i) => {
+						let label = ''
+						try { label = JSON.stringify(block) } catch (err) { label = String(block) }
+						if (label.length > 200) label = label.slice(0, 200) + '…'
+						return react.createElement('div', { key: 'rest' + i, style: { fontSize: '12px', opacity: 0.75, marginTop: '4px' } }, label)
+					}),
+				))
+			}
+			if (rows.length === 0) return null
+			return react.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '6px' } },
+				react.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '8px', minWidth: 0, maxWidth: 'min(calc(var(--dsh-chat-content-width, 748px) * 0.702), 82%)' } }, rows),
+			)
+		}
+
 		function addExt(setList, value, current) {
 			const s = normExt(value)
 			if (s === null || current.indexOf(s) >= 0) return
@@ -927,6 +1125,11 @@ window.__ModuleLoader__.load({
 			)
 		}
 
+		// 扩展名规范化：小写/去前导点/仅 [a-z0-9]；非法返回 null
+		function normExt(v) {
+			const s = String(v == null ? '' : v).trim().toLowerCase().replace(/^\.+/u, '')
+			return (s !== '' && /^[a-z0-9]+$/u.test(s)) ? s : null
+		}
 		// 设置页：配置可上传的文档/代码/配置文件扩展名，保存写 ~/.dsh/file-attachment.json
 		function FaSettingsPage() {
 			const [doc, setDoc] = react.useState(DEFAULT_TYPES.doc.slice())
@@ -1075,15 +1278,28 @@ window.__ModuleLoader__.load({
 					},
 					FaBridge
 				))
-				// 文件条：渲染已附加文件（缩略图/类型图标 + 点击打开 + 可移除），发送后清空
-				slots.inject('conversation.input.dock', () => slots.register(
-					{ name: 'conversation.input.dock', id: 'dsh-file-attachment-dock', order: 400 },
-					FaFileDock
+				// 输入框内附件条：shadow 原生 ComposerAttachments（priority -100 < ui-attachment 的 0，
+				// lowest wins），图片缩略图预览 / 文件条目（无预览），发送后清空
+				slots.inject('conversation.input.attachments', () => slots.register(
+					{ name: 'conversation.input.attachments', id: 'dsh-file-attachment-attachments', priority: -100 },
+					FaAttachments
+				))
+				// 聊天区用户消息：shadow 原生 UserMessageNodeView（keyed 'user'，priority -100 < 0，
+				// lowest wins；Reusing a key replaces that node renderer），@图片路径→缩略图预览，
+				// @文件路径→chip（无预览）
+				slots.inject('conversation.chat.node', () => slots.register(
+					{ name: 'conversation.chat.node', key: 'user', priority: -100 },
+					FaUserMessage
 				))
 				slots.inject('shell.overlay', () => slots.register(
 					{ name: 'shell.overlay', id: 'dsh-file-attachment-toast', order: 100 },
 					FaToast
 				))
+				// 图片放大预览（Lightbox）：list 槽，与 toast 共存（order 200 渲染在 toast 之上）
+				slots.inject('shell.overlay', () => slots.register(
+					{ name: 'shell.overlay', id: 'dsh-file-attachment-lightbox', order: 200 },
+					FaLightbox
+				))
 				// 设置页：文件附件类型配置（左侧菜单项 + 右侧配置页）
 				slots.inject('settings.section', () => [
 					slots.register({

package/lib/index.js

@@ -8,7 +8,6 @@ import { access, mkdir, readFile, writeFile } from 'node:fs/promises'
 import { homedir } from 'node:os'
 import { join, resolve } from 'node:path'
 import { defineTool } from '@deepseek-ai/dsh-tools'
-import { createUserMessage } from '@deepseek-ai/dsh-llm'
 
 /** 本包声明依赖的 Host 服务。 */
 export const name = 'dsh-file-attachment'
@@ -227,17 +226,18 @@ async function handleSave(root, body) {
  * @returns 图片的简洁中文描述。
  * @throws VLM 请求失败或未返回有效内容时抛错。
  */
-async function describeImage(vlm, dataUrl) {
+async function describeImage(vlm, dataUrl, prompt) {
   const url = vlm.baseURL.replace(/\/+$/u, '') + '/chat/completions'
+  const userPrompt = (typeof prompt === 'string' && prompt.trim() !== '') ? prompt.trim() : '请描述这张图片。'
   const payload = {
     model: vlm.model,
     thinkingType: vlm.thinkingType,
     messages: [
-      { role: 'system', content: '你是图片描述助手，用简洁中文描述图片主要内容。' },
+      { role: 'system', content: '你是图片描述助手，用简洁中文回答。' },
       {
         role: 'user',
         content: [
-          { type: 'text', text: '请描述这张图片。' },
+          { type: 'text', text: userPrompt },
           { type: 'image_url', image_url: { url: dataUrl } },
         ],
       },
@@ -326,7 +326,7 @@ function registerRoutes(ctx) {
           return
         }
         try {
-          const description = await describeImage(vlm, dataUrl)
+          const description = await describeImage(vlm, dataUrl, body.prompt)
           json(res, { ok: true, value: { description } })
           return
         } catch (err) {
@@ -359,8 +359,8 @@ function mimeFromPath(p) {
 
 /**
  * 注册 describe_image 工具：模型看到用户消息里的图片路径引用（@/绝对路径）时调用，
- * 读图片 → 调 VLM 识别 → 描述仅注入模型上下文（deferContext，不进 UI/session 历史），
- * UI 只渲染简短确认。实现「图片进历史后自动识别、结果不发给用户」。
+ * 读图片 → 调 VLM 识别 → 识别结果直接作为工具输出返回：
+ * UI 展示描述文本，同时该输出即模型可见内容（tool/result 的 content 是 model-facing）。
  */
 function registerTools(ctx) {
   const tools = (ctx !== undefined && ctx !== null && typeof ctx.tools === 'object' && ctx.tools !== null)
@@ -372,13 +372,17 @@ function registerTools(ctx) {
   }
   tools.register(defineTool({
     name: 'describe_image',
-    description: '当用户消息里出现图片路径引用（形如 @/绝对路径，扩展名 png/jpg/jpeg/gif/webp/bmp）且需要理解图片内容时调用此工具，获取该图片的中文内容描述。path 参数填去掉前导 @ 的绝对路径。',
+    description: '当用户消息里出现图片路径引用（形如 @/绝对路径，扩展名 png/jpg/jpeg/gif/webp/bmp）且需要理解图片内容时调用此工具，获取该图片的中文内容描述。path 参数填去掉前导 @ 的绝对路径。prompt 可选，指定要关注的内容（如"识别图中文字"、"描述 UI 布局"）。',
     parameters: {
       path: {
         type: 'string',
         required: true,
         description: '图片文件的绝对路径（去掉前导 @）',
       },
+      prompt: {
+        type: 'string',
+        description: '可选。告诉多模态模型要关注什么（如"识别图中的文字"、"描述 UI 布局"）。不填则默认"请描述这张图片"。',
+      },
     },
     output: {
       schema: {
@@ -386,11 +390,15 @@ function registerTools(ctx) {
         additionalProperties: false,
         properties: {
           ok: { type: 'boolean', required: true },
+          description: { type: 'string' },
         },
       },
-      render: (_args, value) => [
-        { type: 'text', text: (value && value.ok === true) ? '（图片已识别，描述已注入上下文）' : '（图片识别失败）' },
-      ],
+      render: (_args, value) => {
+        if (value && value.ok === true && typeof value.description === 'string' && value.description !== '') {
+          return [{ type: 'text', text: '图片识别结果：' + value.description }]
+        }
+        return [{ type: 'text', text: (value && value.ok === true) ? '（图片已识别）' : '（图片识别失败）' }]
+      },
     },
     async execute(args, exec) {
       let path = typeof args.path === 'string' ? args.path.trim() : ''
@@ -402,13 +410,10 @@ function registerTools(ctx) {
       const dataUrl = 'data:' + mimeFromPath(path) + ';base64,' + bytes.toString('base64')
       const cfg = await readConfig()
       if (cfg.vlm.apiKey === '') throw new Error('未配置多模态 API Key（设置→文件附件填写），无法识别图片')
-      const description = await describeImage(cfg.vlm, dataUrl)
-      // 描述仅注入模型上下文（不进 session 历史 / UI），实现「结果不发给用户」
-      exec.deferContext(createUserMessage({
-        content: [{ type: 'text', text: '图片 ' + path + ' 的内容描述：' + description }],
-        source: { kind: 'plugin', plugin: 'dsh-file-attachment' },
-      }))
-      return { ok: true }
+      const description = await describeImage(cfg.vlm, dataUrl, args.prompt)
+      // 识别结果直接作为工具输出返回：UI 直接展示描述文本，
+      // 同时该输出就是模型可见内容（tool/result 的 content），无需额外 deferContext 注入。
+      return { ok: true, description }
     },
   }))
   console.log('[dsh-file-attachment] describe_image tool registered')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wszhoho/dsh-file-attachment",
-  "version": "0.5.0",
-  "description": "文件附件：输入框上传按钮 + 拖拽/粘贴文件（支持多文件）；图片走 dsh 原生图片草稿机制（addImages，不缩放/不落盘），文档落盘到 .dsh-file-attachment 并以芯片 @短名 引用（发送时还原 @绝对路径）；非多模态模型下图片自动调用可配置 VLM 识别生成中文描述回填草稿；文档/代码/配置文件可上传类型可在设置页配置；支持 PC 与移动端浏览器",
+  "version": "0.5.1",
+  "description": "文件附件：拖拽/粘贴/上传文件（支持多文件）；图片与文档统一落盘到 .dsh-file-attachment 并以 @绝对路径 引用发送（文本模型可正常使用）；输入框内联显示图片缩略图预览与文件条目，聊天区图片同样渲染为可点击放大的缩略图、文件保持芯片样式；非多模态模型下图片自动调用可配置 VLM 识别生成中文描述回填草稿；文档/代码/配置文件可上传类型可在设置页配置；支持 PC 与移动端浏览器",
   "keywords": [
     "dsh",
     "plugin",