@dickpy/dsh-imagegen 1.5.5 → 1.5.7

package/src/client/ImageGenPanel.tsx

@@ -17,15 +17,15 @@ import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type { ImageGenApi } from './api.ts'
 import { errorMessage, tt } from './helpers.ts'
 import { TemplateLibrary } from './TemplateLibrary.tsx'
-import { InspirationGallery } from './InspirationGallery.tsx'
-import { CanvasWorkspace } from './CanvasWorkspace.tsx'
+import { InspirationGallery } from './InspirationGallery.tsx'
+import { CanvasWorkspace } from './CanvasWorkspace.tsx'
 import { useImageGenLanguageTick } from './use-language.ts'
 import type { EcommerceRefRole, GeneratedImage, GenerateMode, GenerateRequest, GenerationTask, GenerationTaskStatus, HistoryEntry, HistoryImageRef, ProductSetDraft, ProductSetSlot, UpdateInfo } from '../protocol.ts'
 import { AGENT_IMAGE_API } from '../protocol.ts'
 import type { ImageGenConfig, ImageGenScope } from './settings-scope.ts'
 import { imageModelOptions } from './settings-scope.ts'
 import { normalizeImageModels } from '../image-models.ts'
-import { describeModel } from '../model-catalog.ts'
+import { describeModel, promptCharLimit } from '../model-catalog.ts'
 import { CHAT_IMAGE_EVENT, type ChatImageEventDetail, type ConversationService } from './conversation-sync.ts'
 import css from './panel.module.css'
 
@@ -396,7 +396,7 @@ type PanelTab = GenerateMode | 'gallery'
 
 /** Top-level workspaces inside the panel. 'normal' is the classic studio;
  *  more task-oriented modes (prototype, …) can join alongside 'ecommerce'. */
-type PanelWorkspace = 'normal' | 'ecommerce' | 'canvas'
+type PanelWorkspace = 'normal' | 'ecommerce' | 'canvas'
 
 type GalleryFilter = string
 type ComparisonSession = { taskIds: string[]; prompt: string; comparisonId: string }
@@ -484,18 +484,18 @@ export function ImageGenPanel(props: {
   const apiKeySet = (config?.channels ?? []).length > 0 ? channelKeySet : legacyKeySet
   const connected = enabled && configured && apiKeySet
 
-  const [tab, setTab] = useState<PanelTab>('text')
-  const [workspace, setWorkspace] = useState<PanelWorkspace>('normal')
-  const [canvasImportRequest, setCanvasImportRequest] = useState<{ source: 'history' | 'gallery'; entryId: string; imageIndex: number } | undefined>()
+  const [tab, setTab] = useState<PanelTab>('text')
+  const [workspace, setWorkspace] = useState<PanelWorkspace>('normal')
+  const [canvasImportRequest, setCanvasImportRequest] = useState<{ source: 'history' | 'gallery'; entryId: string; imageIndex: number } | undefined>()
   /** Switch to a normal-generation tab, leaving any task workspace. */
-  const openTab = (next: PanelTab): void => {
-    setWorkspace('normal')
-    setTab(next)
-  }
-  const addEntryToCanvas = (source: 'history' | 'gallery', entryId: string, imageIndex = 0): void => {
-    setCanvasImportRequest({ source, entryId, imageIndex })
-    setWorkspace('canvas')
-  }
+  const openTab = (next: PanelTab): void => {
+    setWorkspace('normal')
+    setTab(next)
+  }
+  const addEntryToCanvas = (source: 'history' | 'gallery', entryId: string, imageIndex = 0): void => {
+    setCanvasImportRequest({ source, entryId, imageIndex })
+    setWorkspace('canvas')
+  }
   const [prompt, setPrompt] = useState('')
   const [size, setSize] = useState<string>('auto')
   const [quality, setQuality] = useState<string>('auto')
@@ -524,6 +524,7 @@ export function ImageGenPanel(props: {
   const [galleryAdding, setGalleryAdding] = useState(false)
   const [galleryMessage, setGalleryMessage] = useState<string | null>(null)
   const [galleryFilter, setGalleryFilter] = useState<GalleryFilter>('all')
+  const galleryUploadRef = useRef<HTMLInputElement>(null)
   const [galleryRatio, setGalleryRatio] = useState('all')
   const [galleryTagFilter, setGalleryTagFilter] = useState<string | null>(null)
   const [galleryView, setGalleryView] = useState<'masonry' | 'grid'>('masonry')
@@ -1253,6 +1254,47 @@ export function ImageGenPanel(props: {
     }
   }
 
+  /** Save local image files into the asset library so the canvas and studio
+   *  can reuse them later; entries dedupe by content host-side. */
+  const uploadGalleryFiles = async (files: File[]): Promise<void> => {
+    if (files.length === 0 || galleryAdding) return
+    setGalleryAdding(true)
+    try {
+      let entries: HistoryEntry[] | undefined
+      for (const file of files) {
+        const dataUrl = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = () => resolve(String(reader.result))
+          reader.onerror = () => reject(new Error(tt('canvas.dropSub')))
+          reader.readAsDataURL(file)
+        })
+        const separator = dataUrl.indexOf(',')
+        const result = await api.galleryAppend({
+          id: '',
+          createdAt: Date.now(),
+          mode: 'text',
+          model: tt('gallery.uploadModel'),
+          prompt: file.name.replace(/\.[a-z0-9]+$/i, ''),
+          size: 'auto',
+          quality: 'auto',
+          detail: '',
+          n: 1,
+          images: [{ b64: separator >= 0 ? dataUrl.slice(separator + 1) : dataUrl, mime: file.type || 'image/png' }],
+        })
+        entries = result.entries
+      }
+      if (entries !== undefined) {
+        setGallery(entries)
+        setGalleryMessage(tt('gallery.uploaded'))
+        window.setTimeout(() => { setGalleryMessage(null) }, 2200)
+      }
+    } catch (caught) {
+      setError(errorMessage(caught))
+    } finally {
+      setGalleryAdding(false)
+    }
+  }
+
   /** Put a generated image into the native conversation composer. */
   const addImageToConversation = async (image: GeneratedImage, index: number, actionKey: number | string = index): Promise<void> => {
     if (addingToConversation !== null) return
@@ -1439,7 +1481,15 @@ export function ImageGenPanel(props: {
     })
   }
 
-  const generateDisabled = submitting || modeModels.length === 0
+  // Prompt hard limit of the model the generate button will actually use
+  // (mirrors handleGenerate's pick). Over the limit the counter turns red and
+  // the button locks — the engine would fast-fail anyway, but the user sees
+  // why before spending a click.
+  const activeModel = modeModels.includes(model) ? model : modeModels[0] ?? ''
+  const promptLimit = promptCharLimit(activeModel)
+  const promptOverLimit = promptLimit !== null && prompt.trim().length >= promptLimit
+
+  const generateDisabled = submitting || modeModels.length === 0 || promptOverLimit
   const ecommerceSlots = ecommerce.slots.filter(slot => slot.enabled && slot.count > 0)
   const ecommerceTotal = ecommerceSlots.reduce((total, slot) => total + slot.count, 0)
   const ecommerceGenerateDisabled = submitting || ecommerceGenerating || ecommerceSlots.length === 0 || ecommerce.productName.trim() === '' || (ecommerce.language === 'custom' && effectiveEcommerceLanguage(ecommerce) === '')
@@ -1626,8 +1676,8 @@ export function ImageGenPanel(props: {
                   </span>
                 </button>
                 <span className={css.historyActions}>
-                  {entry.images.length > 0 ? (
-                    <button
+                  {entry.images.length > 0 ? (
+                    <button
                       type="button"
                       className={css.historyIconAction}
                       disabled={conversationBusy}
@@ -1650,21 +1700,21 @@ export function ImageGenPanel(props: {
                       onClick={() => { void addHistoryEntryToGallery(entry) }}
                     >
                       <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="3" width="11" height="10" rx="1.5" /><circle cx="5.9" cy="6.1" r="1" /><path d="M13.5 10.2l-3.1-3.1L4.6 13" /></svg>
-                    </button>
-                  ) : null}
-                  {entry.images.length > 0 ? (
-                    <button
-                      type="button"
-                      className={css.historyIconAction}
-                      title={tt('canvas.addToCanvas')}
-                      aria-label={tt('canvas.addToCanvas')}
-                      data-history-add-canvas=""
-                      onClick={() => { addEntryToCanvas('history', entry.id, 0) }}
-                    >
-                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" /><path d="M5 8h6M8 5v6" /></svg>
-                    </button>
-                  ) : null}
-                  <button
+                    </button>
+                  ) : null}
+                  {entry.images.length > 0 ? (
+                    <button
+                      type="button"
+                      className={css.historyIconAction}
+                      title={tt('canvas.addToCanvas')}
+                      aria-label={tt('canvas.addToCanvas')}
+                      data-history-add-canvas=""
+                      onClick={() => { addEntryToCanvas('history', entry.id, 0) }}
+                    >
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" /><path d="M5 8h6M8 5v6" /></svg>
+                    </button>
+                  ) : null}
+                  <button
                     type="button"
                     className={css.historyIconAction}
                     data-danger
@@ -1683,6 +1733,9 @@ export function ImageGenPanel(props: {
     </aside>
   )
 
+  const isGallery = workspace === 'normal' && tab === 'gallery'
+  const isGeneration = workspace === 'normal' && tab !== 'gallery'
+
   return (
     <div className={css.panel}>
       <header className={css.panelHeader}>
@@ -1699,12 +1752,12 @@ export function ImageGenPanel(props: {
             <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
           </a>
         </span>
-        <nav className={css.topNav} role="tablist" aria-label={tt('workspace.label')}>
-          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab !== 'gallery' ? '' : undefined} onClick={() => { if (workspace !== 'normal' || tab === 'gallery') openTab('text') }}>{tt('workspace.normal')}</button>
-          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab === 'gallery' ? '' : undefined} onClick={() => { openTab('gallery') }}>{tt('gallery.title')}</button>
-          <span className={css.topNavDivider} aria-hidden="true" />
-          <button type="button" className={css.topNavItem} data-active={workspace === 'canvas' ? '' : undefined} onClick={() => { setWorkspace('canvas') }}>{tt('workspace.canvas')}</button>
-          <button type="button" className={css.topNavItem} data-active={workspace === 'ecommerce' ? '' : undefined} onClick={() => { setWorkspace('ecommerce') }}>{tt('workspace.ecommerce')}<span className={css.previewBadge}>{tt('ecommerce.badge')}</span></button>
+        <nav className={css.topNav} role="tablist" aria-label={tt('workspace.label')}>
+          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab !== 'gallery' ? '' : undefined} onClick={() => { if (workspace !== 'normal' || tab === 'gallery') openTab('text') }}>{tt('workspace.normal')}</button>
+          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab === 'gallery' ? '' : undefined} onClick={() => { openTab('gallery') }}>{tt('gallery.title')}</button>
+          <span className={css.topNavDivider} aria-hidden="true" />
+          <button type="button" className={css.topNavItem} data-active={workspace === 'canvas' ? '' : undefined} onClick={() => { setWorkspace('canvas') }}>{tt('workspace.canvas')}</button>
+          <button type="button" className={css.topNavItem} data-active={workspace === 'ecommerce' ? '' : undefined} onClick={() => { setWorkspace('ecommerce') }}>{tt('workspace.ecommerce')}<span className={css.previewBadge}>{tt('ecommerce.badge')}</span></button>
         </nav>
         <span className={css.panelHeaderActions}>
           <button
@@ -1746,7 +1799,7 @@ export function ImageGenPanel(props: {
 
       <div className={css.studio}>
         {/* ------------------------------- left history + generation workspace */}
-        <div className={css.generation} data-workspace={workspace}>
+        <div className={css.generation} data-workspace={workspace}>
           {/* ------------------------------------------------ config sidebar */}
           <aside
             ref={configAsideRef}
@@ -1770,7 +1823,7 @@ export function ImageGenPanel(props: {
               </svg>
             </button>
           </div>
-          {workspace === 'normal' && tab === 'gallery' ? (
+          {isGallery ? (
             <div className={css.galleryFilters}>
               <div className={css.galleryFilterHeading}>{tt('gallery.categories')}</div>
               {[
@@ -2000,7 +2053,7 @@ export function ImageGenPanel(props: {
               </section>
             ) : null}
 
-            {tab === 'edit' ? (
+            {isGeneration && tab === 'edit' ? (
               <section className={css.card}>
                 {refImage === null
                   ? (
@@ -2048,7 +2101,7 @@ export function ImageGenPanel(props: {
             ) : null}
 
                 {/* prompt (normal workspace only — ecommerce has its own form) */}
-                {workspace === 'normal' ? (<>
+                {isGeneration ? (<>
                 <section className={css.card}>
               <textarea
                 className={css.prompt}
@@ -2075,7 +2128,15 @@ export function ImageGenPanel(props: {
                 >
                   {enhancing ? tt('prompt.enhancing') : tt('prompt.enhance')}
                 </button>
-                <span className={css.promptCount}>{tt('prompt.count', { count: prompt.length })}</span>
+                <span
+                  className={css.promptCount}
+                  data-over={promptOverLimit ? '' : undefined}
+                  title={promptOverLimit ? tt('prompt.overLimit', { limit: promptLimit ?? 0 }) : undefined}
+                >
+                  {promptLimit === null
+                    ? tt('prompt.count', { count: prompt.length })
+                    : tt('prompt.countLimit', { count: prompt.length, limit: promptLimit })}
+                </span>
               </div>
             </section>
 
@@ -2172,7 +2233,7 @@ export function ImageGenPanel(props: {
                 )}
               </div>
             ) : null}
-            {workspace === 'ecommerce' ? null : <label className={css.modelWrap}>
+            {isGeneration ? <label className={css.modelWrap}>
               <span className={css.modelLabel}>{tt('model.label')}</span>
               <span ref={modelMenuRef} className={css.modelMenu} data-open={modelOpen ? 'true' : 'false'}>
                 <button
@@ -2204,8 +2265,8 @@ export function ImageGenPanel(props: {
                   </div>
                 ) : null}
               </span>
-            </label>}
-            {workspace !== 'ecommerce' ? <div className={css.compareControl}>
+            </label> : null}
+            {isGeneration ? <div className={css.compareControl}>
               <label className={css.compareToggle}>
                 <input type="checkbox" checked={compareEnabled} onChange={event => { setCompareEnabled(event.target.checked) }} />
                 <span>{tt('compare.enable')}</span>
@@ -2221,7 +2282,7 @@ export function ImageGenPanel(props: {
                 </div>
               ) : null}
             </div> : null}
-            {workspace !== 'ecommerce' ? <Button
+            {isGeneration ? <Button
               variant="primary"
               size="md"
               className={css.generateButton}
@@ -2236,26 +2297,26 @@ export function ImageGenPanel(props: {
               ) : tt('generate')}
               </Button> : null}
             </section>
-          </aside>
-
-          {workspace === 'canvas' ? (
-            <CanvasWorkspace
-              api={api}
-              imageModels={imageModels}
-              defaultChannelId={defaultChannelId}
-              connected={connected}
-              history={history}
-              gallery={gallery}
-              tasks={tasks}
-              importRequest={canvasImportRequest}
-              onImportRequestHandled={() => { setCanvasImportRequest(undefined) }}
-              onOpenSettings={() => { openSettingsGuide('generation') }}
-            />
-          ) : null}
-
-          {/* ------------------------------------------------------- canvas */}
-          <section className={css.canvas} data-gallery={workspace === 'normal' && tab === 'gallery' ? 'true' : undefined}>
-          {workspace === 'normal' && tab === 'gallery' ? (
+          </aside>
+
+          {workspace === 'canvas' ? (
+            <CanvasWorkspace
+              api={api}
+              imageModels={imageModels}
+              defaultChannelId={defaultChannelId}
+              connected={connected}
+              history={history}
+              gallery={gallery}
+              tasks={tasks}
+              importRequest={canvasImportRequest}
+              onImportRequestHandled={() => { setCanvasImportRequest(undefined) }}
+              onOpenSettings={() => { openSettingsGuide('generation') }}
+            />
+          ) : null}
+
+          {/* ------------------------------------------------------- canvas */}
+          <section className={css.canvas} data-gallery={isGallery ? 'true' : undefined}>
+          {isGallery ? (
             <div className={css.galleryWorkspace}>
               <header className={css.galleryToolbar}>
                 <div>
@@ -2264,6 +2325,19 @@ export function ImageGenPanel(props: {
                 </div>
                 <div className={css.galleryToolbarActions}>
                   <input className={css.gallerySearch} value={galleryQuery} onChange={event => { setGalleryQuery(event.target.value) }} placeholder={tt('gallery.search')} aria-label={tt('gallery.search')} />
+                  <button type="button" className={css.gallerySelectMode} disabled={galleryAdding} title={tt('gallery.uploadHint')} onClick={() => galleryUploadRef.current?.click()}>{galleryAdding ? '…' : tt('gallery.upload')}</button>
+                  <input
+                    ref={galleryUploadRef}
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/gif"
+                    multiple
+                    hidden
+                    onChange={event => {
+                      const files = [...(event.target.files ?? [])]
+                      event.target.value = ''
+                      if (files.length > 0) void uploadGalleryFiles(files)
+                    }}
+                  />
                   <button type="button" className={css.gallerySelectMode} data-active={gallerySelecting ? '' : undefined} aria-pressed={gallerySelecting} onClick={() => { setGallerySelecting(previous => !previous) }}>
                     {gallerySelecting ? tt('gallery.selectionDone') : tt('gallery.select')}
                   </button>
@@ -2310,7 +2384,7 @@ export function ImageGenPanel(props: {
                           <span className={css.galleryBadge}>{entry.mode === 'edit' ? tt('mode.edit') : tt('mode.text')}</span>
                         </button>
                         <div className={css.galleryCardActions}>
-                          <button
+                          <button
                             type="button"
                             className={css.galleryCardAction}
                             data-gallery-add-conversation=""
@@ -2319,19 +2393,19 @@ export function ImageGenPanel(props: {
                             onClick={(event) => { event.stopPropagation(); void addGalleryEntryToConversation(entry) }}
                           >
                             <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 4.5h10v7H3z"/><path d="M5.5 2.5h5M8 6v4M6 8h4"/></svg>
-                            {galleryConversationAddingId === entry.id || addingToConversation === `gallery:${entry.id}` ? tt('conversation.adding') : tt('conversation.add')}
-                          </button>
-                          <button
-                            type="button"
-                            className={css.galleryCardAction}
-                            data-gallery-add-canvas=""
-                            title={tt('canvas.addToCanvas')}
-                            onClick={(event) => { event.stopPropagation(); addEntryToCanvas('gallery', entry.id, 0) }}
-                          >
-                            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" /><path d="M5 8h6M8 5v6" /></svg>
-                            {tt('canvas.addToCanvas')}
-                          </button>
-                        </div>
+                            {galleryConversationAddingId === entry.id || addingToConversation === `gallery:${entry.id}` ? tt('conversation.adding') : tt('conversation.add')}
+                          </button>
+                          <button
+                            type="button"
+                            className={css.galleryCardAction}
+                            data-gallery-add-canvas=""
+                            title={tt('canvas.addToCanvas')}
+                            onClick={(event) => { event.stopPropagation(); addEntryToCanvas('gallery', entry.id, 0) }}
+                          >
+                            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" /><path d="M5 8h6M8 5v6" /></svg>
+                            {tt('canvas.addToCanvas')}
+                          </button>
+                        </div>
                         <div className={css.galleryCardFooter}>
                           <span className={css.galleryAvatar}>{entry.model.toLowerCase().startsWith('nanobanana') ? 'N' : entry.model.toLowerCase().startsWith('seedream') ? 'S' : entry.model.startsWith('grok') ? 'G' : 'D'}</span>
                           <span className={css.galleryCardInfo}>
@@ -2426,7 +2500,7 @@ export function ImageGenPanel(props: {
               )}
             </div>
           ) : null}
-          {(workspace === 'ecommerce' || tab !== 'gallery') && tasks.length > 0 ? (
+          {!isGallery && tasks.length > 0 ? (
             <section className={css.taskTray} data-open={taskTrayOpen ? 'true' : 'false'} aria-label={tt('tasks.title')}>
               <header className={css.taskTrayHeader}>
                 <button type="button" className={css.taskTrayToggle} aria-expanded={taskTrayOpen} onClick={() => { setTaskTrayOpen(open => !open) }}>
@@ -2474,7 +2548,7 @@ export function ImageGenPanel(props: {
               </div>
             </section>
           ) : null}
-          {generating && comparison === null && workspace !== 'ecommerce' ? (
+          {generating && comparison === null && isGeneration ? (
             <div className={css.canvasState} data-generation-state={activeTask?.status ?? 'submitting'} role="status">
               <span className={css.bigSpinner} />
               <span className={css.canvasStateTitle}>
@@ -2496,7 +2570,7 @@ export function ImageGenPanel(props: {
             <div className={css.canvasError} role="alert">{tt('canvas.error', { error })}</div>
           ) : null}
 
-          {!generating && !error && images.length === 0 && workspace !== 'ecommerce' ? (
+          {isGeneration && !generating && !error && images.length === 0 ? (
             <InspirationGallery
               api={api}
               onUse={(text) => {
@@ -2506,7 +2580,7 @@ export function ImageGenPanel(props: {
             />
           ) : null}
 
-          {!generating && images.length > 0 && workspace !== 'ecommerce' ? (
+          {isGeneration && !generating && images.length > 0 ? (
             <div className={css.canvasBody}>
               <div className={css.canvasMeta}>
                 <span>{tt('canvas.images', { count: images.length })}</span>