npm - @dickpy/dsh-imagegen - Versions diffs - 1.3.0 → 1.4.0 - Mend

@dickpy/dsh-imagegen 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/LICENSE +201 -201
package/README.md +203 -182
package/cordis.patch.yml +8 -8
package/docs/images/multi-model-comparison.png +0 -0
package/lib/client.js +1103 -837
package/lib/client.js.map +1 -1
package/lib/index.js +265 -135
package/package.json +70 -68
package/src/agent-image-tools.ts +418 -418
package/src/client/ImageGenPanel.tsx +1699 -1508
package/src/client/SettingsCard.tsx +936 -957
package/src/client/TemplateLibrary.tsx +336 -336
package/src/client/api.ts +193 -193
package/src/client/channels-form.ts +263 -263
package/src/client/controller.ts +46 -46
package/src/client/conversation-sync.ts +14 -0
package/src/client/css-modules.d.ts +5 -5
package/src/client/helpers.ts +33 -33
package/src/client/image-toolview.module.css +73 -73
package/src/client/image-toolview.tsx +169 -158
package/src/client/index.ts +32 -22
package/src/client/locales.ts +610 -594
package/src/client/mount.tsx +185 -96
package/src/client/panel.module.css +1713 -1445
package/src/client/settings-card.module.css +1023 -1023
package/src/client/settings-form.ts +336 -336
package/src/client/settings-scope.ts +298 -298
package/src/client/sidebar-entry.ts +148 -102
package/src/client/templates.module.css +453 -453
package/src/engine.ts +520 -478
package/src/gallery-store.ts +286 -286
package/src/generation-runtime.ts +79 -75
package/src/history-store.ts +250 -244
package/src/image-format.ts +11 -11
package/src/image-models.ts +19 -19
package/src/index.ts +318 -318
package/src/model-catalog.ts +115 -98
package/src/presets.ts +71 -63
package/src/prompt-enhancer.ts +137 -79
package/src/protocol.ts +338 -326
package/src/routes.ts +916 -906
package/src/task-queue.ts +113 -103
package/src/templates/cases.json +10196 -10196
package/src/templates-store.ts +278 -278
package/src/updater.ts +117 -117

package/src/client/mount.tsx CHANGED Viewed

@@ -1,124 +1,213 @@
-/**
- * Panel view mounting.
- *
- * The `conversation` slot is single-occupant (ui-conversation) and external
- * plugins cannot declare slots, so the panel takes over the center column at
- * the DOM level: a container is appended inside the conversation grid item
- * (an extra trailing child React never manages), and a stylesheet rule hides
- * the conversation content while the panel is active. Toggling is a data
- * attribute on <html> — no React involvement, so the conversation subtree
- * underneath stays mounted and stateful.
- *
- * Shell compatibility: the center column is `[data-pane="conversation"]` on
- * legacy shells and `[class*="centerCol"]` on the rc.6+ AppFrame layout (the
- * same dual selector the dsh-ssh / task-board panels use); both are queried
- * and both get the `position: relative` base in panel.module.css.
- */
+/**
+ * Panel view mounting.
+ *
+ * The `conversation` slot is single-occupant (ui-conversation) and external
+ * plugins cannot declare slots, so the panel takes over the center column at
+ * the DOM level: a container is appended inside the conversation grid item
+ * (an extra trailing child React never manages), and a stylesheet rule hides
+ * the conversation content while the panel is active. Toggling is a data
+ * attribute on <html> — no React involvement, so the conversation subtree
+ * underneath stays mounted and stateful.
+ *
+ * Shell compatibility: the center column is `[data-pane="conversation"]` on
+ * legacy shells and `[class*="centerCol"]` on the rc.6+ AppFrame layout (the
+ * same dual selector the dsh-ssh / task-board panels use); both are queried
+ * and both get the `position: relative` base in panel.module.css.
+ */
+import type { ISessions } from '@deepseek-ai/dsh-client-runtime/client'
 import { createRoot, type Root } from 'react-dom/client'
-import type { ImageGenApi } from './api.ts'
-import type { ImageGenController } from './controller.ts'
-import { ImageGenPanel } from './ImageGenPanel.tsx'
+import type { ImageGenApi } from './api.ts'
+import type { ImageGenController } from './controller.ts'
+import { ImageGenPanel } from './ImageGenPanel.tsx'
 import type { ImageGenScope } from './settings-scope.ts'
-import css from './panel.module.css'
-/** The injected panel container (kept in the DOM, hidden when inactive). */
-export const PANEL_VIEW_SELECTOR = '[data-dsh-imagegen-view]'
+import type { ConversationService } from './conversation-sync.ts'
+import css from './panel.module.css'
+/** The injected panel container (kept in the DOM, hidden when inactive). */
+export const PANEL_VIEW_SELECTOR = '[data-dsh-imagegen-view]'
 const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
 const ACTIVE_ATTR = 'data-dsh-imagegen-active'
-/** Sibling panels' activation attributes, removed when this panel opens. */
-const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active']
-/** Cross-plugin activation event; detail is the activating panel name. */
-const ACTIVATE_EVENT = 'dsh-panel-activate'
-const PANEL_NAME = 'imagegen'
-/** Find the center column, or undefined while the frame is not mounted. */
+const RESIZER_SELECTOR = '[data-dsh-imagegen-chat-resizer]'
+const CHAT_WIDTH_STORAGE_KEY = 'dsh-imagegen:chat-width'
+const CHAT_MIN_WIDTH = 320
+/** Sibling panels' activation attributes, removed when this panel opens. */
+const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active']
+/** Cross-plugin activation event; detail is the activating panel name. */
+const ACTIVATE_EVENT = 'dsh-panel-activate'
+const PANEL_NAME = 'imagegen'
+/** Find the center column, or undefined while the frame is not mounted. */
 function conversationColumn(): HTMLElement | undefined {
   return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
 }
-/**
- * Mount the panel React tree into the center column and bind its visibility
- * to the controller's panelOpen state.
- * @param controller - the panel controller driving the view.
- * @param api - the image-generation API client the panel operates through.
- * @param scope - the settings scope (config status banner).
- * @returns disposer unmounting the tree and restoring the column.
- */
+function readChatWidth(): number | undefined {
+  try {
+    const raw = window.localStorage.getItem(CHAT_WIDTH_STORAGE_KEY)
+    if (raw === null) return undefined
+    const value = Number(raw)
+    return Number.isFinite(value) && value >= CHAT_MIN_WIDTH ? value : undefined
+  } catch {
+    return undefined
+  }
+}
+function writeChatWidth(value: number): void {
+  try {
+    window.localStorage.setItem(CHAT_WIDTH_STORAGE_KEY, String(Math.round(value)))
+  } catch {
+    // Private browsing and embedded shells may disable localStorage.
+  }
+}
+function applyChatWidth(column: HTMLElement, clientX: number): void {
+  const bounds = column.getBoundingClientRect()
+  const max = Math.max(CHAT_MIN_WIDTH, bounds.width * 0.7)
+  const width = Math.min(max, Math.max(CHAT_MIN_WIDTH, bounds.right - clientX))
+  column.style.setProperty('--dsh-imagegen-chat-width', `${Math.round(width)}px`)
+  writeChatWidth(width)
+}
+/** Create the visible handle that separates the image workspace and chat. */
+function createChatResizer(column: HTMLElement): HTMLDivElement {
+  const resizer = document.createElement('div')
+  resizer.dataset.dshImagegenChatResizer = ''
+  resizer.className = css.chatResizer
+  resizer.setAttribute('role', 'separator')
+  resizer.setAttribute('aria-orientation', 'vertical')
+  resizer.setAttribute('aria-label', '调整对话区域宽度')
+  resizer.tabIndex = 0
+  const saved = readChatWidth()
+  if (saved !== undefined) column.style.setProperty('--dsh-imagegen-chat-width', `${saved}px`)
+  const onPointerDown = (event: PointerEvent): void => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    resizer.setPointerCapture?.(event.pointerId)
+    const onMove = (move: PointerEvent): void => { applyChatWidth(column, move.clientX) }
+    const onUp = (): void => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onUp)
+      resizer.releasePointerCapture?.(event.pointerId)
+      document.documentElement.style.removeProperty('cursor')
+      document.documentElement.style.removeProperty('user-select')
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onUp)
+    document.documentElement.style.setProperty('cursor', 'col-resize')
+    document.documentElement.style.setProperty('user-select', 'none')
+  }
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+    event.preventDefault()
+    const bounds = column.getBoundingClientRect()
+    const current = column.style.getPropertyValue('--dsh-imagegen-chat-width')
+    const currentWidth = Number.parseFloat(current) || bounds.width * 0.36
+    const delta = event.key === 'ArrowLeft' ? -24 : 24
+    applyChatWidth(column, bounds.right - currentWidth - delta)
+  }
+  resizer.addEventListener('pointerdown', onPointerDown)
+  resizer.addEventListener('keydown', onKeyDown)
+  return resizer
+}
+/**
+ * Mount the panel React tree into the center column and bind its visibility
+ * to the controller's panelOpen state.
+ * @param controller - the panel controller driving the view.
+ * @param api - the image-generation API client the panel operates through.
+ * @param scope - the settings scope (config status banner).
+ * @returns disposer unmounting the tree and restoring the column.
+ */
 export function mountPanel(
   controller: ImageGenController,
   api: ImageGenApi,
   scope: ImageGenScope,
+  services: {
+    sessions?: ISessions
+    conversation?: ConversationService
+  } = {},
 ): () => void {
   let root: Root | undefined
   let container: HTMLDivElement | undefined
-  const ensure = (): void => {
-    if (container !== undefined) {
-      if (container.isConnected) return
-      // The conversation pane was replaced; drop the stale tree and remount.
+  let resizer: HTMLDivElement | undefined
+  const ensure = (): void => {
+    if (container !== undefined) {
+      if (container.isConnected) return
+      // The conversation pane was replaced; drop the stale tree and remount.
       root?.unmount()
       root = undefined
       container.remove()
       container = undefined
-    }
-    const column = conversationColumn()
-    if (column === undefined) return
-    container = document.createElement('div')
-    container.dataset.dshImagegenView = ''
+      resizer?.remove()
+      resizer = undefined
+    }
+    const column = conversationColumn()
+    if (column === undefined) return
+    container = document.createElement('div')
+    container.dataset.dshImagegenView = ''
     container.className = css.view
     column.appendChild(container)
     root = createRoot(container)
-    root.render(<ImageGenPanel api={api} scope={scope} />)
-  }
-  // The frame mounts after boot settlement; watch for the column's arrival.
-  const waitObserver = new MutationObserver(() => { ensure() })
-  waitObserver.observe(document.body, { childList: true, subtree: true })
-  const applyActive = (): void => {
-    if (controller.getSnapshot().panelOpen) {
-      // Single-occupant center column: opening this panel must evict sibling
-      // panels (task board / ssh), both their html attributes and their
-      // controller states, otherwise the visibility rules fight.
-      for (const attr of OTHER_ACTIVE_ATTRS) document.documentElement.removeAttribute(attr)
-      document.documentElement.setAttribute(ACTIVE_ATTR, '')
-      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
-    } else {
-      document.documentElement.removeAttribute(ACTIVE_ATTR)
-    }
-  }
-  const onOtherActivate = (event: Event): void => {
-    const detail = (event as CustomEvent).detail
-    if ((detail === 'ssh' || detail === 'taskboard') && controller.getSnapshot().panelOpen) {
-      controller.close()
-    }
-  }
-  // Jump out on sidebar context clicks: clicking a session/workspace row
-  // hands the center column back to the conversation. Capture phase.
-  const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
-  const onClickSidebarRow = (event: MouseEvent): void => {
-    if (!controller.getSnapshot().panelOpen) return
-    const target = event.target as HTMLElement | null
-    if (target === null) return
-    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) controller.close()
-  }
-  document.addEventListener('click', onClickSidebarRow, true)
-  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
-  const unsubscribe = controller.subscribe(applyActive)
-  applyActive()
-  ensure()
-  return () => {
-    document.removeEventListener('click', onClickSidebarRow, true)
-    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
-    waitObserver.disconnect()
-    unsubscribe()
-    document.documentElement.removeAttribute(ACTIVE_ATTR)
+    root.render(<ImageGenPanel api={api} scope={scope} {...services} />)
+    resizer = column.querySelector<HTMLDivElement>(RESIZER_SELECTOR) ?? createChatResizer(column)
+    if (resizer.parentElement !== column) column.appendChild(resizer)
+  }
+  // The frame mounts after boot settlement; watch for the column's arrival.
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+  const applyActive = (): void => {
+    if (controller.getSnapshot().panelOpen) {
+      // Single-occupant center column: opening this panel must evict sibling
+      // panels (task board / ssh), both their html attributes and their
+      // controller states, otherwise the visibility rules fight.
+      for (const attr of OTHER_ACTIVE_ATTRS) document.documentElement.removeAttribute(attr)
+      document.documentElement.setAttribute(ACTIVE_ATTR, '')
+      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
+    } else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR)
+    }
+  }
+  const onOtherActivate = (event: Event): void => {
+    const detail = (event as CustomEvent).detail
+    if ((detail === 'ssh' || detail === 'taskboard') && controller.getSnapshot().panelOpen) {
+      controller.close()
+    }
+  }
+  // Jump out on sidebar context clicks: clicking a session/workspace row
+  // hands the center column back to the conversation. Capture phase.
+  const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
+  const onClickSidebarRow = (event: MouseEvent): void => {
+    if (!controller.getSnapshot().panelOpen) return
+    const target = event.target as HTMLElement | null
+    if (target === null) return
+    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) controller.close()
+  }
+  document.addEventListener('click', onClickSidebarRow, true)
+  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
+  const unsubscribe = controller.subscribe(applyActive)
+  applyActive()
+  ensure()
+  return () => {
+    document.removeEventListener('click', onClickSidebarRow, true)
+    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    waitObserver.disconnect()
+    unsubscribe()
+    document.documentElement.removeAttribute(ACTIVE_ATTR)
     root?.unmount()
     root = undefined
     container?.remove()
     container = undefined
+    resizer?.remove()
+    resizer = undefined
   }
 }