@dickpy/dsh-imagegen 1.2.0 → 1.2.2

package/src/client/image-toolview.tsx

@@ -0,0 +1,158 @@
+/** Inline renderer for image-generation tool-result attachments. */
+
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
+import type { ClientContext, ISessions, SessionId, ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client'
+import { useEffect, useMemo, useState } from 'react'
+import css from './image-toolview.module.css'
+
+/** Owner props supplied by the host's keyed tool-call slot. */
+export interface ImageToolViewOwnerProps {
+  callId: string
+  toolName: string
+  block: ToolCallBlock
+  cwd?: string
+  home?: string
+  openFile: (path: string) => void
+  inspect?: () => void
+}
+
+interface LoadedImage {
+  ref: ImageAttachmentRef
+  src: string
+}
+
+interface ImageToolViewProps extends ImageToolViewOwnerProps {
+  sessionId: SessionId
+}
+
+function isSettled(block: ToolCallBlock): block is Extract<ToolCallBlock, { kind: 'tool-result' }> {
+  return 'kind' in block
+}
+
+function imageRefsOf(block: ToolCallBlock): ImageAttachmentRef[] {
+  if (!isSettled(block)) return []
+  return block.content.flatMap(content => content.type === 'image' ? [content.attachment] : [])
+}
+
+function textOf(block: ToolCallBlock): string {
+  if (!isSettled(block)) return ''
+  return block.content
+    .filter(content => content.type === 'text')
+    .map(content => content.text)
+    .join('\n')
+}
+
+function resultInfo(block: ToolCallBlock): { status: string; message: string } {
+  if (!isSettled(block)) return { status: 'running', message: '正在生成图片…' }
+  const text = textOf(block)
+  try {
+    const parsed = JSON.parse(text) as { status?: unknown; message?: unknown }
+    return {
+      status: typeof parsed.status === 'string' ? parsed.status : block.isError ? 'failed' : 'completed',
+      message: typeof parsed.message === 'string' ? parsed.message : '',
+    }
+  } catch {
+    return { status: block.isError ? 'failed' : 'completed', message: text }
+  }
+}
+
+function statusLabel(status: string): string {
+  if (status === 'running' || status === 'queued') return '生成中'
+  if (status === 'failed') return '生成失败'
+  if (status === 'cancelled') return '已取消'
+  return '图片结果'
+}
+
+function useAttachmentImages(
+  sessionId: SessionId,
+  refs: ImageAttachmentRef[],
+  load: (sessionId: SessionId, ref: ImageAttachmentRef) => Promise<string>,
+): { images: LoadedImage[]; error: string | null } {
+  const key = useMemo(() => refs.map(ref => String(ref.attachmentId)).join('|'), [refs])
+  const [images, setImages] = useState<LoadedImage[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let disposed = false
+    const urls: string[] = []
+    const revoke = (): void => {
+      for (const url of urls) URL.revokeObjectURL(url)
+      urls.length = 0
+    }
+
+    setImages([])
+    setError(null)
+    if (refs.length === 0) return () => { /* no attachments to clean up */ }
+
+    void Promise.all(refs.map(async ref => {
+      const src = await load(sessionId, ref)
+      urls.push(src)
+      return { ref, src }
+    }))
+      .then(next => {
+        if (!disposed) setImages(next)
+      })
+      .catch(errorValue => {
+        revoke()
+        if (!disposed) setError(errorValue instanceof Error ? errorValue.message : String(errorValue))
+      })
+
+    return () => {
+      disposed = true
+      revoke()
+    }
+  }, [key, load, refs, sessionId])
+
+  return { images, error }
+}
+
+/** Register the inline image result view for all image-generation result tools. */
+export function registerImageToolviews(ctx: ClientContext): void {
+  // Older client typings still expose the host-side SessionStore on the
+  // generic Context property. The runtime service itself provides the newer
+  // binding/session face, so resolve it through Cordis and narrow locally.
+  const sessions = ctx.get('sessions') as unknown as ISessions | undefined
+  const load = async (sessionId: SessionId, ref: ImageAttachmentRef): Promise<string> => {
+    const session = sessions?.binding(sessionId)?.session
+    if (session === undefined) throw new Error('当前会话不可用，无法读取图片附件。')
+    const result = await session.readAttachment(ref.attachmentId)
+    if (!result.ok) throw new Error(result.error.message)
+    const blob = new Blob([new Uint8Array(result.value.data)], { type: result.value.attachment.mediaType })
+    return URL.createObjectURL(blob)
+  }
+
+  const ImageToolView = (props: ImageToolViewProps): React.JSX.Element => {
+    const refs = useMemo(() => imageRefsOf(props.block), [props.block])
+    const { status, message } = resultInfo(props.block)
+    const { images, error } = useAttachmentImages(props.sessionId, refs, load)
+
+    return <section className={css.root} data-state={status} data-tool={props.toolName}>
+      <header className={css.header}>
+        <span className={css.icon} aria-hidden="true">▧</span>
+        <strong>{props.toolName}</strong>
+        <span className={css.status}>{statusLabel(status)}</span>
+      </header>
+      {message !== '' && <p className={css.message}>{message}</p>}
+      {images.length > 0 && <div className={css.images}>
+        {images.map(image => <a
+          className={css.imageLink}
+          href={image.src}
+          key={String(image.ref.attachmentId)}
+          rel="noreferrer"
+          target="_blank"
+          title="打开原图"
+        >
+          <img className={css.image} src={image.src} alt={image.ref.name ?? '生成图片'} />
+        </a>)}
+      </div>}
+      {refs.length > 0 && images.length === 0 && error === null && <p className={css.loading}>正在加载图片…</p>}
+      {error !== null && <p className={css.error}>{error}</p>}
+    </section>
+  }
+
+  ctx.slots.inject('tool.call.toolview', function* () {
+    for (const key of ['generate_image', 'edit_image', 'get_image_generation_task']) {
+      yield ctx.slots.register({ name: 'tool.call.toolview', key }, ImageToolView)
+    }
+  })
+}

package/src/client/index.ts

@@ -23,8 +23,9 @@ import { tt } from './helpers.ts'
 import { en, zh, type ImageGenKey } from './locales.ts'
 import { mountPanel } from './mount.tsx'
 import { mountSidebarEntry } from './sidebar-entry.ts'
-import { ImageGenSettingsCard, ImageGenSettingsCardController } from './SettingsCard.tsx'
-import { bindImageGenScope, type ImageGenScope } from './settings-scope.ts'
+import { ImageGenSettingsCard, ImageGenSettingsCardController } from './SettingsCard.tsx'
+import { bindImageGenScope, type ImageGenScope } from './settings-scope.ts'
+import { registerImageToolviews, type ImageToolViewOwnerProps } from './image-toolview.tsx'
 
 /** Locale namespace this plugin owns. */
 const NS = 'dsh-imagegen'
@@ -35,7 +36,7 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
     'dsh-imagegen': ImageGenKey
   }
 
-  interface SlotMap {
+  interface SlotMap {
     /**
      * The official plugin-configuration slot the Settings → Plugins →
      * Configurable tab declares and renders. This card registers there as its
@@ -44,9 +45,11 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
      * same shape so this package can register without depending on the
      * sibling UI package.
      */
-    'settings.plugin.item': { kind: 'keyed'; scope: 'root'; owner: ImageGenPluginItemOwnerProps }
-  }
-}
+    'settings.plugin.item': { kind: 'keyed'; scope: 'root'; owner: ImageGenPluginItemOwnerProps }
+    /** Image-generation results render their durable image blocks inline. */
+    'tool.call.toolview': { kind: 'keyed'; scope: 'session'; owner: ImageToolViewOwnerProps }
+  }
+}
 
 /** Owner share of a plugin card (the section supplies nothing). */
 export interface ImageGenPluginItemOwnerProps {
@@ -55,14 +58,15 @@ export interface ImageGenPluginItemOwnerProps {
 }
 
 /** Required services (fiber inject waiting — the runtime must be up first). */
-export const inject = ['slots', 'locale', 'connection']
+export const inject = ['slots', 'locale', 'connection', 'sessions']
 
 /**
  * Mount the studio, its sidebar entry, and the settings card.
  * @param ctx - client root context (services: slots, locale, connection).
  */
-export function apply(ctx: ClientContext): void {
-  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-imagegen: dictionaries')
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-imagegen: dictionaries')
+  registerImageToolviews(ctx)
 
   const connection = ctx.get('connection') as ConnectionHandle | undefined
   const loopback = connection?.isLoopback === true

package/src/client/panel.module.css

@@ -325,6 +325,9 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   top: 12px;
   right: 12px;
   width: min(360px, calc(100% - 24px));
+  max-height: calc(100% - 24px);
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 9px;
@@ -333,7 +336,18 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   backdrop-filter: blur(10px);
 }
 
-.taskTrayHeader { display: flex; justify-content: space-between; padding: 8px 10px; color: var(--dsw-alias-label-primary); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+.taskTray[data-open='false'] { width: auto; max-width: calc(100% - 24px); }
+.taskTrayHeader { display: flex; align-items: stretch; min-height: 34px; color: var(--dsw-alias-label-primary); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+.taskTray[data-open='false'] .taskTrayHeader { border-bottom: 0; }
+.taskTrayToggle { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 8px 10px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-size: inherit; font-weight: inherit; text-align: left; }
+.taskTrayToggle:hover { background: var(--dsw-alias-bg-layer-2); }
+.taskTrayCount { min-width: 18px; padding: 1px 5px; border-radius: 999px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); font-size: 11px; font-weight: 500; text-align: center; }
+.taskTrayChevron { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 400; }
+.taskTrayClose { width: 32px; border: 0; border-left: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-tertiary); background: transparent; cursor: pointer; font: inherit; font-size: 17px; }
+.taskTrayClose:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
+.taskTray[data-open='false'] .taskTrayToggle { min-height: 34px; }
+.taskRows { min-height: 0; overflow-y: auto; }
+.taskTray[data-open='false'] .taskRows { display: none; }
 .taskRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--dsw-alias-border-l1); }
 .taskRow:first-of-type { border-top: 0; }
 .taskStatus { color: var(--dsw-alias-label-tertiary); font-size: 11px; white-space: nowrap; }

package/src/index.ts

@@ -83,7 +83,7 @@ const DEFAULT_ALLOW_AGENT_IMAGE_GENERATION = true
 const SECTION_ORDER = 150
 
 /** Model-facing announcement: plugin presence, capabilities, and limits. */
-export const IMAGEGEN_GUIDANCE = '本机已安装 dsh-imagegen 插件（DSH AI 生图）：侧边栏「AI 生图」入口。能力：对接 OpenAI 兼容图像生成 API，模型由用户在「设置 → 插件 → AI 生图」中检测或手动配置的生图模型列表决定；支持文生图（/images/generations）与图生图（/images/edits，上传参考图，grok-imagine 模型按官方 JSON image_url 协议发送）。API 地址与密钥在 GUI 设置中配置，密钥仅存于本机设置文档；生成请求由本地宿主代理转发，结果以 base64 返回面板，可预览与下载。模型只能使用已配置的生图模型；模型出现在 /models 中不等于其网关原生支持生图协议，遇到 Qwen、Gemini 等非 OpenAI 生图协议时应如实说明上游兼容性。可一键把满意的图片加入「画廊」。内置「提示词模板库」（面板提示词框左下角「模板库」按钮）：打包 awesome-gpt-image-2 的数百条提示词案例，可搜索、筛选与复用。Agent 可直接调用 `generate_image` 提交文生图，也可用 `edit_image` 图生图；任务后台异步执行，完成后插件会自动唤醒原对话，并以可直接查看和复用的图片附件回贴结果，因此不要反复轮询。仅在用户明确要求进度或需要恢复任务时，才使用 `get_image_generation_task` 查询状态。限制：生成消耗上游 API 额度；图片内容由上游模型生成，可能不符合预期或包含不适宜内容；api_key 以明文存储在设置文档中；参考图会发送至所配置的 API 服务；模板库在线刷新与参考图首次加载需要访问 vibeui.top。用户提到「生图 / 绘画 / 生成图片 / 文生图 / 图生图 / 画廊 / 提示词模板」时即指本插件，请据此协作。'
+export const IMAGEGEN_GUIDANCE = '本机已安装 dsh-imagegen 插件（DSH AI 生图）：侧边栏「AI 生图」入口。能力：对接 OpenAI 兼容图像生成 API，模型由用户在「设置 → 插件 → AI 生图」中检测或手动配置的生图模型列表决定；支持文生图（/images/generations）与图生图（/images/edits，上传参考图，grok-imagine 模型按官方 JSON image_url 协议发送）。API 地址与密钥在 GUI 设置中配置，密钥仅存于本机设置文档；生成请求由本地宿主代理转发，结果以 base64 返回面板，可预览与下载。模型只能使用已配置的生图模型；模型出现在 /models 中不等于其网关原生支持生图协议，遇到 Qwen、Gemini 等非 OpenAI 生图协议时应如实说明上游兼容性。可一键把满意的图片加入「画廊」。内置「提示词模板库」（面板提示词框左下角「模板库」按钮）：打包 awesome-gpt-image-2 的数百条提示词案例，可搜索、筛选与复用。Agent 可直接调用 `generate_image` 提交文生图，也可用 `edit_image` 图生图；默认保持工具调用等待直到任务完成，完成图片直接作为工具结果附件返回，不会额外伪造用户消息。若明确需要后台执行，可传 `wait_for_completion: false`，之后再用 `get_image_generation_task` 查询；不要反复轮询。限制：生成消耗上游 API 额度；图片内容由上游模型生成，可能不符合预期或包含不适宜内容；api_key 以明文存储在设置文档中；参考图会发送至所配置的 API 服务；模板库在线刷新与参考图首次加载需要访问 vibeui.top。用户提到「生图 / 绘画 / 生成图片 / 文生图 / 图生图 / 画廊 / 提示词模板」时即指本插件，请据此协作。'
 
 /** Add the live allow-list so an Agent can honor a user's model choice. */
 function guidanceFor(imageModels: string[]): string {
@@ -129,7 +129,8 @@ export function apply(ctx: Context, config?: Config): void {
 
   // Browser endpoints and Agent tools share the exact same serial queue. This
   // keeps image persistence, cancellation, and retries coherent across both
-  // entry points while a tool call itself returns immediately with a task id.
+  // entry points; Agent tools wait for their task result by default and render
+  // images in the tool result instead of injecting a synthetic user message.
   const runtime = new ImageGenerationRuntime(() => {
     const value = resolve()
     return { apiUrl: value.apiUrl, apiKey: value.apiKey }

package/src/protocol.ts

@@ -8,7 +8,7 @@
 export const IMAGEGEN_SETTINGS_NAMESPACE = 'dsh-imagegen'
 
 /** Published package version shared by the host updater and the client UI. */
-export const PLUGIN_VERSION = '1.2.0'
+export const PLUGIN_VERSION = '1.2.2'
 
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 export const SETTINGS_API = {