@lynn123411/dsh-model-submenu 0.1.0

package/src/client/ModelSubmenu.tsx

@@ -0,0 +1,426 @@
+import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  IconCheckOutline16,
+  IconChevronDownOutline14,
+  IconChevronLeftOutline14,
+  IconChevronRightOutline14,
+  IconDataOutline16,
+  IconWarningOutline16,
+  Toast,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ModelDirectoryState, ModelSelectInjected } from '@deepseek-ai/dsh-client-ui-model-selection/client'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import css from './ModelSubmenu.module.css'
+
+type ModelSubmenuProps = ModelSelectInjected & { locked: boolean } & PropsLocale<'modelSubmenu'>
+
+type Selection = Parameters<ModelSelectInjected['select']>[0]
+type ProviderGroup = ModelDirectoryState['groups'][number]
+type CatalogModel = ProviderGroup['models'][number]
+
+/** Which list the open menu is showing. */
+type Pane = 'root' | 'providers' | 'models' | 'effort'
+
+/** Unplaced portal card: hidden but laid out at a fixed origin so offsetWidth/offsetHeight are real. */
+const MEASURE_STYLE = {
+  visibility: 'hidden',
+  left: 0,
+  top: 0,
+} as const
+
+const cls = (...parts: readonly (string | false | undefined)[]): string => parts.filter((part) => part !== false && part !== undefined).join(' ')
+
+/**
+ * The composer's model seat (`conversation.input.model`), taken over from the
+ * built-in occupant with a provider level: the root pane keeps the built-in's
+ * two cells — 供应商 in place of 模型, plus the native 推理等级 — the provider
+ * cell drills into the catalog's providers, and a provider drills into its
+ * models before submitting. The trigger, the menu surface, the keyboard
+ * contract (arrows move, Tab settles, Escape and Shift+Tab leave a drilled pane
+ * first), the effort list and the failure surfaces are the built-in ones.
+ */
+export function ModelSubmenu({ locked, available, directory, load, select, t }: ModelSubmenuProps) {
+  const state = useSyncExternalStore((fn) => directory.subscribe(fn), () => directory.getSnapshot())
+  const [open, setOpen] = useState(false)
+  const [pane, setPane] = useState<Pane>('root')
+  const [providerId, setProviderId] = useState<string | null>(null)
+  const lastActionRef = useRef<'load' | 'select'>('load')
+  const [toast, setToast] = useState<{ seq: number; text: string } | null>(null)
+  const toastSeq = useRef(0)
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+  const [menuPos, setMenuPos] = useState<{ left: number; top: number } | null>(null)
+  const itemRefs = useRef(new Map<string, HTMLButtonElement>())
+  const focusIntent = useRef<string | null>(null)
+  const id = useId()
+
+  const groups = state.groups
+  const current = state.current
+  const currentGroup = current === null ? undefined : groups.find((group) => group.id === current.provider)
+  const currentModel = currentGroup?.models.find((model) => model.id === current?.model)
+  const reasoning = currentModel?.reasoning
+  const effectiveEffort = current?.reasoningEffort ?? reasoning?.defaultEffort
+  const effortLabel = reasoning === undefined
+    ? undefined
+    : effectiveEffort === undefined
+      ? t('effort.providerDefault')
+      : reasoning.efforts.find((level) => level.id === effectiveEffort)?.name ?? effectiveEffort
+  const effortChoices = useMemo(() => reasoning === undefined ? [] : [
+    ...reasoning.defaultEffort === undefined
+      ? [{ key: 'provider-default', effort: undefined as string | undefined, label: t('effort.providerDefault') }]
+      : [],
+    ...reasoning.efforts.map((level) => ({ key: `effort:${level.id}`, effort: level.id as string | undefined, label: level.name })),
+  ], [reasoning, t])
+
+  const shownGroup = pane === 'models' && providerId !== null ? groups.find((group) => group.id === providerId) : undefined
+  const busy = state.status === 'selecting'
+
+  const reload = () => {
+    lastActionRef.current = 'load'
+    load()
+  }
+
+  useEffect(() => {
+    if (!open) return
+    const closeOutside = (event: MouseEvent) => {
+      if (rootRef.current?.contains(event.target as Node) === true) return
+      if (menuRef.current?.contains(event.target as Node) === true) return
+      setOpen(false)
+      setPane('root')
+    }
+    document.addEventListener('mousedown', closeOutside)
+    return () => {
+      document.removeEventListener('mousedown', closeOutside)
+    }
+  }, [open])
+
+  useEffect(() => {
+    const intent = focusIntent.current
+    focusIntent.current = null
+    if (!open || intent === null) return
+    if (intent === 'initial') {
+      const checked = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"][aria-checked="true"]:not([disabled]), [role="menuitem"][aria-current="true"]:not([disabled])')
+      const first = [...itemRefs.current].find(([key]) => !key.startsWith('back:'))?.[1]
+      ;(checked ?? first ?? triggerRef.current)?.focus()
+      return
+    }
+    ;(itemRefs.current.get(intent) ?? triggerRef.current)?.focus()
+  }, [open, pane])
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setMenuPos(null)
+      return
+    }
+    const place = () => {
+      const rect = triggerRef.current?.getBoundingClientRect()
+      if (rect === undefined) return
+      const MARGIN = 12
+      const lw = menuRef.current?.offsetWidth ?? 0
+      const lh = menuRef.current?.offsetHeight ?? 0
+      let x = rect.right - lw
+      let y = rect.top - 8 - lh
+      if (lw > 0) x = Math.min(Math.max(x, MARGIN), window.innerWidth - lw - MARGIN)
+      if (lh > 0) y = Math.min(Math.max(y, MARGIN), window.innerHeight - lh - MARGIN)
+      setMenuPos({ left: x, top: y })
+    }
+    place()
+    window.addEventListener('scroll', place, true)
+    window.addEventListener('resize', place)
+    return () => {
+      window.removeEventListener('scroll', place, true)
+      window.removeEventListener('resize', place)
+    }
+  }, [open, pane, state])
+
+  if (!available) return null
+
+  const show = () => {
+    setPane('root')
+    setProviderId(null)
+    setOpen(true)
+    reload()
+  }
+  const close = (restoreFocus = false) => {
+    setOpen(false)
+    setPane('root')
+    setProviderId(null)
+    if (restoreFocus) queueMicrotask(() => {
+      triggerRef.current?.focus()
+    })
+  }
+  const drill = (next: Pane) => {
+    focusIntent.current = 'initial'
+    setPane(next)
+  }
+  /** Leave the shown pane for its parent, handing the keyboard back to the row that opened it. */
+  const back = () => {
+    if (pane === 'models') {
+      focusIntent.current = providerId === null ? null : `provider:${providerId}`
+      setPane('providers')
+      return
+    }
+    focusIntent.current = pane === 'effort' ? 'root:effort' : 'root:provider'
+    setPane('root')
+  }
+  const moveFocus = (offset: number) => {
+    const items = [...itemRefs.current.values()]
+    if (items.length === 0) return
+    const active = items.findIndex((item) => item === document.activeElement)
+    items[active === -1 ? offset > 0 ? 0 : items.length - 1 : (active + offset + items.length) % items.length]?.focus()
+  }
+  const onRootKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape' && open) {
+      event.preventDefault()
+      if (pane !== 'root') back()
+      else close(true)
+      return
+    }
+    if (!open) return
+    if (event.key === 'Tab') {
+      if (event.shiftKey) {
+        event.preventDefault()
+        if (pane !== 'root') back()
+        else close(true)
+        return
+      }
+      const focused = document.activeElement
+      const rows = [...itemRefs.current.values()]
+      if (focused instanceof HTMLButtonElement && rows.includes(focused)) {
+        event.preventDefault()
+        focused.click()
+        return
+      }
+      if (focused !== triggerRef.current) return
+      event.preventDefault()
+      const checked = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"][aria-checked="true"]:not([disabled]), [role="menuitem"][aria-current="true"]:not([disabled])')
+      ;(checked ?? rows.find((item) => !item.disabled))?.focus()
+      return
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveFocus(event.key === 'ArrowDown' ? 1 : -1)
+    }
+  }
+  const onBlur = (event: React.FocusEvent) => {
+    if (event.relatedTarget instanceof Node && (rootRef.current?.contains(event.relatedTarget) === true || menuRef.current?.contains(event.relatedTarget) === true)) return
+    close()
+  }
+  const settleSelection = (result: Awaited<ReturnType<ModelSelectInjected['select']>>) => {
+    if (result === undefined) return
+    if (result.ok) {
+      if (rootRef.current !== null) close(true)
+      return
+    }
+    const { error } = result
+    toastSeq.current += 1
+    setToast({
+      seq: toastSeq.current,
+      text: error.code === 'session/writer-held' ? t('error.sessionInUse') : t('error.action', { message: `${error.code}: ${error.message}` }),
+    })
+  }
+  const submit = (selection: Selection) => {
+    lastActionRef.current = 'select'
+    select(selection).then(settleSelection)
+  }
+  /** A model commits outright; its reasoning levels stay behind the root's effort cell. */
+  const chooseModel = (provider: string, model: CatalogModel) => {
+    if (current?.provider === provider && current.model === model.id) {
+      close(true)
+      return
+    }
+    submit({ provider, model: model.id })
+  }
+  const chooseEffort = (effort: string | undefined) => {
+    if (current === null) return
+    if (effectiveEffort === effort) {
+      close(true)
+      return
+    }
+    submit({ provider: current.provider, model: current.model, ...effort === undefined ? {} : { reasoningEffort: effort } })
+  }
+  const waiting = current === null && state.status === 'loading'
+  const modelLabel = waiting ? t('trigger.loading') : currentModel?.name ?? (current === null ? t('trigger.fallback') : `${current.provider}/${current.model}`)
+  const triggerLabel = effortLabel === undefined ? modelLabel : `${modelLabel} · ${effortLabel}`
+  const triggerAria = waiting
+    ? t('trigger.loading')
+    : current === null
+      ? t('trigger.selectAria')
+      : effortLabel === undefined
+        ? t('trigger.aria', { model: modelLabel })
+        : t('trigger.ariaEffort', { model: modelLabel, effort: effortLabel })
+
+  itemRefs.current = new Map()
+  const itemRef = (key: string) => (node: HTMLButtonElement | null) => {
+    if (node === null) itemRefs.current.delete(key)
+    else itemRefs.current.set(key, node)
+  }
+  const backRow = () => (
+    <button ref={itemRef('back')} type="button" role="menuitem" className={css.cell} onClick={back}>
+      <IconChevronLeftOutline14 className={css.cellChevron} />
+      <span className={css.cellLabel}>{t('back')}</span>
+    </button>
+  )
+  return (
+    <div ref={rootRef} className={css.root} onKeyDown={onRootKeyDown} onBlur={onBlur}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={css.trigger}
+        aria-label={triggerAria}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? `${id}-menu` : undefined}
+        title={triggerLabel}
+        disabled={locked}
+        onClick={() => {
+          if (open) close()
+          else show()
+        }}
+      >
+        <IconDataOutline16 className={css.triggerIcon} size={16} />
+        <span className={css.triggerLabel}>{modelLabel}</span>
+        {effortLabel !== undefined && <span className={css.triggerEffort}>{effortLabel}</span>}
+        <IconChevronDownOutline14 className={cls(css.chevron, open && css.chevronOpen)} />
+      </button>
+      {open && createPortal((
+        <div
+          ref={menuRef}
+          id={`${id}-menu`}
+          className={css.menu}
+          style={menuPos ?? MEASURE_STYLE}
+          role="menu"
+          aria-label={pane === 'models' && shownGroup !== undefined ? shownGroup.name : pane === 'effort' ? t('menu.effort') : t('menu.aria')}
+          aria-busy={state.status === 'loading' || busy}
+        >
+          {pane === 'root' && (
+            <Fragment>
+              <button ref={itemRef('root:provider')} type="button" role="menuitem" className={css.cell} onClick={() => drill('providers')}>
+                <span className={css.cellLabel}>{t('menu.provider')}</span>
+                <span className={css.cellValue}>{currentGroup?.name ?? current?.provider ?? ''}</span>
+                <IconChevronRightOutline14 className={css.cellChevron} />
+              </button>
+              {reasoning !== undefined && (
+                <button ref={itemRef('root:effort')} type="button" role="menuitem" className={css.cell} onClick={() => drill('effort')}>
+                  <span className={css.cellLabel}>{t('menu.effort')}</span>
+                  <span className={css.cellValue}>{effortLabel}</span>
+                  <IconChevronRightOutline14 className={css.cellChevron} />
+                </button>
+              )}
+            </Fragment>
+          )}
+          {pane === 'providers' && (
+            <Fragment>
+              {state.status === 'loading' && <div className={css.status}>{t('status.loading')}</div>}
+              {state.error !== null && lastActionRef.current === 'load' && (
+                <div className={css.error}>
+                  <span>{t('error.action', { message: state.error })}</span>
+                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
+                </div>
+              )}
+              {state.failures.map((failure) => (
+                <div className={css.warning} key={failure.id}>
+                  <span>{t('warning.groupLoad', { name: failure.name, message: failure.message })}</span>
+                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
+                </div>
+              ))}
+              {state.status === 'ready' && groups.length === 0 && <div className={css.empty}>{t('empty.models')}</div>}
+              <div className={cls(css.groups, 'scrollable')}>
+                {groups.map((group) => {
+                  const mine = current?.provider === group.id
+                  return (
+                    <button
+                      key={group.id}
+                      ref={itemRef(`provider:${group.id}`)}
+                      type="button"
+                      role="menuitem"
+                      aria-current={mine ? 'true' : undefined}
+                      className={css.cell}
+                      title={group.name}
+                      onClick={() => {
+                        setProviderId(group.id)
+                        drill('models')
+                      }}
+                    >
+                      <span className={css.cellLabel}>{group.name}</span>
+                      <span className={css.cellValue}>{mine ? currentModel?.name ?? current?.model ?? '' : t('provider.modelCount', { count: String(group.models.length) })}</span>
+                      {mine && <span className={css.check}><IconCheckOutline16 /></span>}
+                      <IconChevronRightOutline14 className={css.cellChevron} />
+                    </button>
+                  )
+                })}
+              </div>
+            </Fragment>
+          )}
+          {pane === 'models' && shownGroup !== undefined && (
+            <Fragment>
+              {backRow()}
+              <div className={cls(css.groups, 'scrollable')}>
+                {shownGroup.models.map((model) => {
+                  const selected = current?.provider === shownGroup.id && current.model === model.id
+                  return (
+                    <button
+                      key={model.id}
+                      ref={itemRef(`model:${shownGroup.id}/${model.id}`)}
+                      type="button"
+                      role="menuitemradio"
+                      aria-checked={selected}
+                      className={cls(css.option, selected && css.selected)}
+                      title={model.name}
+                      disabled={busy}
+                      onClick={() => chooseModel(shownGroup.id, model)}
+                    >
+                      <span className={css.optionCopy}><span className={css.modelName}>{model.name}</span></span>
+                      <span className={css.check}>{selected ? <IconCheckOutline16 /> : null}</span>
+                    </button>
+                  )
+                })}
+              </div>
+            </Fragment>
+          )}
+          {pane === 'effort' && (
+            <Fragment>
+              {backRow()}
+              {state.error !== null && lastActionRef.current === 'load' && (
+                <div className={css.error}>
+                  <span>{t('error.action', { message: state.error })}</span>
+                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
+                </div>
+              )}
+              {effortChoices.length === 0
+                ? <div className={css.empty}>{t('empty.efforts')}</div>
+                : effortChoices.map((level) => (
+                  <button
+                    key={level.key}
+                    ref={itemRef(`effort:${level.key}`)}
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={effectiveEffort === level.effort}
+                    className={cls(css.option, effectiveEffort === level.effort && css.selected)}
+                    disabled={busy}
+                    onClick={() => chooseEffort(level.effort)}
+                  >
+                    <span className={css.optionCopy}><span className={css.modelName}>{level.label}</span></span>
+                    <span className={css.check}>{effectiveEffort === level.effort ? <IconCheckOutline16 /> : null}</span>
+                  </button>
+                ))}
+            </Fragment>
+          )}
+        </div>
+      ), document.body)}
+      {toast !== null && (
+        <Toast
+          key={toast.seq}
+          text={toast.text}
+          icon={<IconWarningOutline16 />}
+          anchor={rootRef.current?.closest('[data-composer-card]') ?? null}
+          onDone={() => {
+            setToast(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/index.ts

@@ -0,0 +1,59 @@
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
+// Type-only: `slots` and its LocaleNamespaceMap merge come from the renderer and
+// the slot package; the composer seat's SlotMap entry and owner props from
+// ui-conversation; the `modelDirectories` service and the seat's injected face
+// from ui-model-selection's browser half.
+import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type {} from '@deepseek-ai/dsh-client-ui-model-selection/client'
+import { ModelSubmenu } from './ModelSubmenu.tsx'
+import { NS, en, zh } from './locales.ts'
+
+export { ModelSubmenu } from './ModelSubmenu.tsx'
+
+/**
+ * Cordis services required by the browser half. `slots` is the contribution
+ * registry, `sessions` tells whether a session may select a model, and
+ * `modelDirectories` owns the per-session catalog snapshot this seat renders
+ * from. `remote` / `remote.session` are declared because a service method runs
+ * on the calling context: `directoryFor` reads `this.ctx.remote.session` while
+ * building the directory, so the seat must carry that service too.
+ */
+export const inject = ['locale', 'modelDirectories', 'remote', 'remote.session', 'sessions', 'slots']
+
+/**
+ * Client plugin body: register this plugin's dictionaries, then take over the
+ * composer model seat below the built-in occupant's priority so this menu
+ * renders in its place.
+ * @param ctx - client root context.
+ */
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-model-submenu: dictionaries')
+  ctx.inject(['slots', 'modelDirectories'], (scope) => {
+    const models = scope.modelDirectories
+    const sessions = scope.sessions
+    scope.slots.inject('conversation.input.model', () => scope.slots.register({
+      name: 'conversation.input.model',
+      priority: -100,
+      registrant: '@lynn123411/dsh-model-submenu',
+      locale: NS,
+      inject: (sessionId) => {
+        // The seat's inject parameter is typed as a bare string; the service
+        // faces carry the branded SessionId of that same runtime value.
+        const key = sessionId as Parameters<typeof models.directoryFor>[0]
+        const directory = models.directoryFor(key)
+        const available = sessions.subagentAddress(key) === undefined
+        return {
+          available,
+          directory: directory.store,
+          load: () => {
+            if (available) directory.load().catch(() => {})
+          },
+          select: (selection) => available ? directory.select(selection) : Promise.resolve(undefined),
+        }
+      },
+    }, ModelSubmenu))
+  })
+}

package/src/client/locales.ts

@@ -0,0 +1,76 @@
+/** Locale bundles for the composer model seat this plugin takes over. */
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'modelSubmenu'
+
+/** Locale keys the seat renders. */
+export type ModelSubmenuLocaleKey =
+  | 'back'
+  | 'provider.modelCount'
+  | 'action.reload'
+  | 'trigger.fallback'
+  | 'trigger.loading'
+  | 'trigger.selectAria'
+  | 'trigger.aria'
+  | 'trigger.ariaEffort'
+  | 'menu.aria'
+  | 'menu.provider'
+  | 'menu.effort'
+  | 'effort.providerDefault'
+  | 'status.loading'
+  | 'error.action'
+  | 'error.sessionInUse'
+  | 'warning.groupLoad'
+  | 'empty.models'
+  | 'empty.efforts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** The composer model seat's copy. */
+    modelSubmenu: ModelSubmenuLocaleKey
+  }
+}
+
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export const zh: Record<ModelSubmenuLocaleKey, string> = {
+  'back': '返回',
+  'provider.modelCount': '{count} 个模型',
+  'action.reload': '重新加载',
+  'trigger.fallback': '选择模型',
+  'trigger.loading': '正在加载模型…',
+  'trigger.selectAria': '选择模型',
+  'trigger.aria': '选择模型，当前 {model}',
+  'trigger.ariaEffort': '选择模型，当前 {model}，推理等级 {effort}',
+  'menu.aria': '供应商与推理等级',
+  'menu.provider': '供应商',
+  'menu.effort': '推理等级',
+  'effort.providerDefault': 'Default',
+  'status.loading': '正在刷新模型列表…',
+  'error.action': '模型操作失败：{message}',
+  'error.sessionInUse': '当前会话已被占用，可能是其他正在运行的 DSH 导致的（如其他 dsh web、桌面端），请退出其他正在运行的 DSH 后重试。',
+  'warning.groupLoad': '{name} 加载失败：{message}',
+  'empty.models': '没有可用的模型。',
+  'empty.efforts': '当前模型未提供推理等级。',
+}
+
+/** English dictionary, checked complete against the zh key set. */
+export const en: Record<ModelSubmenuLocaleKey, string> = {
+  'back': 'Back',
+  'provider.modelCount': '{count} models',
+  'action.reload': 'Reload',
+  'trigger.fallback': 'Select model',
+  'trigger.loading': 'Loading models…',
+  'trigger.selectAria': 'Select model',
+  'trigger.aria': 'Select model, current {model}',
+  'trigger.ariaEffort': 'Select model, current {model}, reasoning effort {effort}',
+  'menu.aria': 'Provider and reasoning effort',
+  'menu.provider': 'Provider',
+  'menu.effort': 'Effort',
+  'effort.providerDefault': 'Default',
+  'status.loading': 'Refreshing model list…',
+  'error.action': 'Model operation failed: {message}',
+  'error.sessionInUse': 'This session is already in use, possibly by another running DSH instance (such as dsh web or the desktop app). Quit other running DSH instances and try again.',
+  'warning.groupLoad': '{name} failed to load: {message}',
+  'empty.models': 'No models available.',
+  'empty.efforts': 'This model provides no reasoning effort levels.',
+}

package/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+/** Host entry. This plugin is client-only; the browser half is `./client`. */
+export function apply(): void {}