@dickpy/dsh-imagegen 1.3.0 → 1.5.0

package/src/client/SettingsCard.tsx

@@ -249,10 +249,11 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
                           <button type="button" className={css.channelMain} disabled={disabled} onClick={() => { setEditingId(channel.id) }}>
                             <span className={css.channelName}>{isDefault ? `★ ${channel.name || t('channels.untitled')}` : (channel.name || t('channels.untitled'))}</span>
                             <span className={css.channelMeta}>
-                              {channel.apiUrl !== '' ? <span className={css.channelHost}>{hostOf(channel.apiUrl)}</span> : null}
-                              <span className={css.channelBadge} data-warn={keyHeld ? undefined : ''}>{keyHeld ? t('channels.keySet') : t('channels.keyMissing')}</span>
-                              <span className={css.channelBadge} data-warn={channel.models.length > 0 ? undefined : ''}>{channel.models.length > 0 ? t('channels.modelCount', { n: channel.models.length }) : t('channels.noModels')}</span>
-                              {isDefault ? <span className={css.channelBadge} data-default>{t('channels.defaultLabel')}</span> : null}
+                              <span className={css.channelBadge} data-warn={!keyHeld || channel.models.length === 0 ? '' : undefined}>
+                                {keyHeld ? t('channels.keySet') : t('channels.keyMissing')}
+                                {' · '}
+                                {channel.models.length > 0 ? t('channels.modelCount', { n: channel.models.length }) : t('channels.noModels')}
+                              </span>
                             </span>
                           </button>
                           <button type="button" className={css.channelAction} onClick={() => { setEditingId(channel.id) }}>{t('channels.edit')}</button>
@@ -517,14 +518,6 @@ function replaceChannel(channels: ChannelDraft[], id: string, patch: Partial<Cha
   form.setChannels(channels.map(channel => channel.id === id ? { ...channel, ...patch } : channel))
 }
 
-function hostOf(apiUrl: string): string {
-  try {
-    return new URL(apiUrl).hostname
-  } catch {
-    return apiUrl
-  }
-}
-
 function clientId(): string {
   const random = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : undefined
   return random ?? `ch-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
@@ -561,8 +554,7 @@ function PresetPicker(props: {
         {props.presets.map(preset => (
           <button key={preset.id} type="button" className={css.presetRow} disabled={props.disabled} onClick={() => { props.onPick(preset) }}>
             <span className={css.presetName}>{preset.name}</span>
-            <span className={css.presetMeta}>{preset.apiUrl} · {t('channels.presetModelsHint', { n: preset.models.length })}</span>
-            <span className={css.presetHint}>{preset.hint}</span>
+            <span className={css.presetMeta}>{preset.models.map(model => model.alias).join(' · ')}</span>
           </button>
         ))}
         <button type="button" className={css.presetRow} data-custom disabled={props.disabled} onClick={props.onCustom}>
@@ -656,18 +648,6 @@ function ChannelEditor(props: {
     setCopyFrom('')
   }
 
-  const onlyKnown = (): void => {
-    const known = (candidates ?? []).filter(id => describeModel(id).known)
-    const merged = [...channel.models]
-    for (const id of known) {
-      const alias = id
-      if (!merged.some(model => model.alias === alias)) merged.push({ alias, id })
-    }
-    props.onSetModels(merged)
-  }
-
-  const knownCount = (candidates ?? []).filter(id => describeModel(id).known).length
-
   return (
     <div className={css.editorBackdrop} role="dialog" aria-modal="true" aria-label={`${t('channels.editorTitle')} · ${channel.name || t('channels.untitled')}`} onClick={props.onClose}>
       <div className={css.editorPanel} onClick={event => { event.stopPropagation() }}>
@@ -776,7 +756,6 @@ function ChannelEditor(props: {
           <div className={css.modelCandidateList}>
             <span className={css.modelCandidateLabel}>
               {t('channels.candidatesTitle')}
-              <button type="button" className={css.inlineDisclosure} disabled={!props.writable || knownCount === 0} onClick={onlyKnown}>{t('channels.candidatesQuick')}</button>
             </span>
             {candidates.map(candidate => {
               const selected = channel.models.some(model => model.alias === candidate)

package/src/client/api.ts

@@ -3,7 +3,7 @@
  * data access path the panel uses — plain fetch, same origin.
  */
 
-import { GALLERY_API, GENERATE_API, HISTORY_API, PROMPT_ENHANCE_API, TASK_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type GenerationTask, type HistoryEntry, type HistoryEntryInput, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
+import { CONVERSATION_IMAGE_API, GALLERY_API, GENERATE_API, HISTORY_API, PROMPT_ENHANCE_API, TASK_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type GenerationTask, type HistoryEntry, type HistoryEntryInput, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
 
 /** Error carrying the route's JSON error message. */
 export class ImageGenApiError extends Error {
@@ -84,6 +84,16 @@ export class ImageGenApi {
     return body.prompt
   }
 
+  /** Stage a generated image as a durable reference for `/edit_image`. */
+  async attachConversationImage(sessionId: string, dataUrl: string, name: string): Promise<void> {
+    const response = await fetch(CONVERSATION_IMAGE_API, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ sessionId, dataUrl, name }),
+    })
+    await readEnvelope<{ ok: true }>(response)
+  }
+
   async taskSubmit(request: GenerateRequest): Promise<GenerationTask> {
     const response = await fetch(TASK_API.submit, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(request) })
     return (await readEnvelope<{ ok: true; task: GenerationTask }>(response)).task

package/src/client/conversation-sync.ts

@@ -0,0 +1,14 @@
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
+import type { ConversationController, IConversation } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** Document event used to bridge chat tool results into the image workspace. */
+export const CHAT_IMAGE_EVENT = 'dsh-imagegen:chat-images'
+
+export interface ChatImageEventDetail {
+  sessionId: SessionId
+  refs: readonly ImageAttachmentRef[]
+}
+
+/** Composer-facing extension of the narrower public conversation interface. */
+export type ConversationService = IConversation & Pick<ConversationController, 'createDraftImages' | 'releaseDraftImages'>

package/src/client/image-toolview.tsx

@@ -1,165 +1,176 @@
-/** 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 { AGENT_IMAGE_API } from '../protocol.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>
-  }
-
-  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)
-    }
-  })
-}
+/** 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 { 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)
+
+    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])
+
+    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

@@ -12,6 +12,7 @@
  * the GUI down.
  */
 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'
@@ -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 { registerImageToolviews, type ImageToolViewOwnerProps } from './image-toolview.tsx'
+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
@@ -104,10 +106,18 @@ export function apply(ctx: ClientContext): 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.label'), tt('entry.tooltip')))
-      disposers.push(mountPanel(controller, api, scope))
+      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)