@dickpy/dsh-imagegen 1.2.3 → 1.4.0

package/src/client/image-toolview.tsx

@@ -1,158 +1,176 @@
-/** 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'
+/** Inline renderer for image-generation tool-result attachments. */
+
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
+import type { ClientContext, 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 => {
+import { AGENT_IMAGE_API } from '../protocol.ts'
+import { CHAT_IMAGE_EVENT } from './conversation-sync.ts'
+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 []
+  const resultContent = block.resultView?.card === 'generic' ? block.resultView.content ?? [] : []
+  return [...block.content, ...resultContent]
+    .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 {
+  const load = async (_sessionId: SessionId, ref: ImageAttachmentRef): Promise<string> => {
+    // Tool-result images intentionally do not occur in model-visible session
+    // content, so session.readAttachment() rejects them. The plugin route
+    // reads the same durable attachment after validating the complete ref.
+    const query = new URLSearchParams({
+      attachment_id: String(ref.attachmentId),
+      media_type: ref.mediaType,
+      bytes: String(ref.bytes),
+      width: String(ref.width),
+      height: String(ref.height),
+    })
+    const response = await fetch(`${AGENT_IMAGE_API}?${query.toString()}`)
+    if (!response.ok) throw new Error(`无法读取图片附件（HTTP ${response.status}）。`)
+    const blob = await response.blob()
+    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>
-  }
+    useEffect(() => {
+      if (images.length === 0) return
+      document.dispatchEvent(new CustomEvent(CHAT_IMAGE_EVENT, {
+        detail: {
+          sessionId: props.sessionId,
+          refs: images.map(image => image.ref),
+        },
+      }))
+    }, [images, props.sessionId])
 
-  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)
-    }
-  })
-}
+    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

@@ -11,8 +11,9 @@
  * whole boot when a plugin apply throws, and an external plugin must not take
  * the GUI down.
  */
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
-import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ISessions } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 // Type-only: pulls the LocaleNamespaceMap merge table.
@@ -23,9 +24,10 @@ 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'
+import type { ConversationService } from './conversation-sync.ts'
 
 /** Locale namespace this plugin owns. */
 const NS = 'dsh-imagegen'
@@ -36,7 +38,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
@@ -45,11 +47,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 }
-    /** Image-generation results render their durable image blocks inline. */
-    'tool.call.toolview': { kind: 'keyed'; scope: 'session'; owner: ImageToolViewOwnerProps }
-  }
-}
+    '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 {
@@ -58,15 +60,15 @@ export interface ImageGenPluginItemOwnerProps {
 }
 
 /** Required services (fiber inject waiting — the runtime must be up first). */
-export const inject = ['slots', 'locale', 'connection', 'sessions']
+export const inject = ['slots', 'locale', 'connection', 'sessions', 'conversation']
 
 /**
  * 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')
-  registerImageToolviews(ctx)
+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
@@ -100,14 +102,22 @@ export function apply(ctx: ClientContext): void {
   // the scope is still loading, the composition default is unknown, so nothing
   // mounts yet. Only an unavailable scope falls back to the default (enabled).
   let uiDisposer: (() => void) | undefined
-  const mountUi = (): void => {
-    if (uiDisposer !== undefined) return
-    const controller = new ImageGenController()
-    const api = new ImageGenApi()
-    const disposers: Array<() => void> = []
-    try {
-      disposers.push(mountSidebarEntry(controller, tt('entry.label'), tt('entry.tooltip')))
-      disposers.push(mountPanel(controller, api, scope))
+  const mountUi = (): void => {
+    if (uiDisposer !== undefined) return
+    const controller = new ImageGenController()
+    const api = new ImageGenApi()
+    const sessions = ctx.get('sessions') as ISessions | undefined
+    const conversation = ctx.get('conversation') as ConversationService | undefined
+    const disposers: Array<() => void> = []
+    try {
+      disposers.push(mountSidebarEntry(
+        controller,
+        tt('entry.newSession'),
+        tt('entry.newSessionTooltip'),
+        tt('entry.image'),
+        tt('entry.tooltip'),
+      ))
+      disposers.push(mountPanel(controller, api, scope, { sessions, conversation }))
     } catch (error) {
       // DOM failures degrade the studio, never the GUI.
       console.warn('[dsh-imagegen] mount failed:', error)