dsh-codinput 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-codinput",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "DSH WebUI 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar）。",
   "license": "MIT",
   "author": "Witherwithwinter",

package/src/client/components/CodinputSurface.tsx

@@ -73,6 +73,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   const cardRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
   const caretRef = useRef<number | null>(null);
+  const previewRef = useRef<HTMLDivElement | null>(null);
 
   // 高度调节：仅顶边把手，1:1 跟手（顶边上移多少、编辑区就高多少），松手持久化。
   // 宽度不做自有调节——沿用官方聊天宽度调节器（wSkVaW_widthHandle）：
@@ -245,6 +246,34 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
     [state?.draft, previewOn],
   );
 
+  // ---- 分屏同步滚动：两侧按滚动比例互随（内容高度不同，比例映射） ----
+  // scroll 不冒泡但走捕获相位，挂在 body 上的 onScrollCapture 能收到两栏的
+  // 滚动，且 CM 视图随会话重建（scrollDOM 换新）也无需重挂监听；epsilon 防
+  // 两侧事件互馈成回环。预览栏不显示滚动条（编辑栏为主），滚轮仍可反向带动。
+  const syncSplitScroll = (event: React.SyntheticEvent<HTMLDivElement>): void => {
+    if (!editOn || !previewOn) return;
+    const src = event.target as HTMLElement;
+    const editorScroll = viewRef.current?.scrollDOM;
+    const previewScroll = previewRef.current;
+    if (!editorScroll || !previewScroll) return;
+    const dst = src === editorScroll ? previewScroll : src === previewScroll ? editorScroll : null;
+    if (!dst) return;
+    const srcMax = src.scrollHeight - src.clientHeight;
+    if (srcMax <= 0) return;
+    const top = (src.scrollTop / srcMax) * (dst.scrollHeight - dst.clientHeight);
+    if (Math.abs(dst.scrollTop - top) > 1) dst.scrollTop = top;
+  };
+  // 进入分屏 / 草稿更新 / 切会话后，预览按编辑器当前比例对齐。
+  useEffect(() => {
+    if (!editOn || !previewOn) return;
+    const editorScroll = viewRef.current?.scrollDOM;
+    const previewScroll = previewRef.current;
+    if (!editorScroll || !previewScroll) return;
+    const editorMax = editorScroll.scrollHeight - editorScroll.clientHeight;
+    if (editorMax <= 0) return;
+    previewScroll.scrollTop = (editorScroll.scrollTop / editorMax) * (previewScroll.scrollHeight - previewScroll.clientHeight);
+  }, [editOn, previewOn, html, sessionId]);
+
   const toggleEdit = (): void => {
     if (!editOn && previewOn) setEditOn(true);
     else if (editOn && previewOn) setEditOn(false);
@@ -329,6 +358,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
         <div
           className="dci-body"
           data-split={editOn && previewOn}
+          onScrollCapture={syncSplitScroll}
           style={
             !side && !float && bodyHeight !== null
               ? ({ '--dci-body-h': `${bodyHeight}px`, '--dci-body-max': `${bodyHeight}px` } as React.CSSProperties)
@@ -352,7 +382,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
             />
           ) : null}
           {previewOn ? (
-            <div className="dci-preview" data-solo={!editOn}>
+            <div className="dci-preview" data-solo={!editOn} ref={previewRef}>
               {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : <span style={{ opacity: 0.4 }}>{t("preview.empty")}</span>}
             </div>
           ) : null}

package/src/client/components/Toolbar.tsx

@@ -1,18 +1,23 @@
 /**
  * 工具行：结构与样式逐条对齐官方 InputBar 工具行——
  * 左侧 .dci-tools：指令（plus）、权限（shield 触发器）；
- * 右侧 .dci-trailing：模型与思考强度（触发器）、发送（.primary 圆钮）。
+ * 右侧 .dci-trailing：模型与思考强度（触发器）、语音输入（官方 activity 槽位
+ * 条目，桌面版宿主才有）、发送（.primary 圆钮）。
  * 按钮沿用官方 keepFocus 语义（mousedown 不夺走编辑器焦点）。
  * 附件无独立按钮（官方已并入 slash「添加 · 文件」），粘贴/拖拽路径保留。
  * 0.1.7-rc.2 起官方上下文小圈不再在工具行（挪进卡片下方 dock 行，见 StatsRow）。
+ * 语音展开时隐藏 tools 与模型（官方 activity 同款：capture 行接管整行，
+ * 发送/停止保持可见）。
  */
 
+import { useCallback, useState } from 'react';
 import type { DraftAttachmentId, InputActions, InputState, InputTriggerController, UseProjection } from '../host-types';
 import { openCommandMenu } from '../triggers';
 import { t, useT } from '../i18n';
 import { IconPlusOfficial, IconSendOfficial, IconStopOfficial } from '../icons';
 import { ModelMenu } from './ModelMenu';
 import { PermissionMenu } from './PermissionMenu';
+import { VoiceActivity } from './VoiceActivity';
 
 export interface ToolbarProps {
   sessionId: string | undefined;
@@ -44,6 +49,9 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
   useT();
 
   const attachments: readonly DraftAttachmentId[] = state?.attachmentIds ?? [];
+  // 官方 activity 语义：语音展开时本行左侧工具与模型控件隐藏、capture 行伸展。
+  const [voiceActive, setVoiceActive] = useState(false);
+  const onVoiceActiveChange = useCallback((active: boolean): void => setVoiceActive(active), []);
 
   const onCommandClick = (): void => {
     if (!triggers) return;
@@ -51,7 +59,7 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
   };
 
   return (
-    <div className="dci-row">
+    <div className="dci-row" data-voice-active={voiceActive || undefined}>
       <div className="dci-tools">
         <button
           type="button"
@@ -75,10 +83,20 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
         />
       </div>
       <div className="dci-trailing">
-        <ModelMenu
-          sessionId={sessionId}
-          onNotify={onNotify}
-        />
+        <div className="dci-standard-controls">
+          <ModelMenu
+            sessionId={sessionId}
+            onNotify={onNotify}
+          />
+        </div>
+        <div className="dci-voice-seat">
+          <VoiceActivity
+            sessionId={sessionId}
+            inputActions={actions}
+            locked={disabled === true}
+            onActiveChange={onVoiceActiveChange}
+          />
+        </div>
         <button
           type="button"
           className="dci-send"

package/src/client/components/VoiceActivity.tsx

@@ -0,0 +1,172 @@
+/**
+ * 语音输入按钮：渲染官方 voice-input 插件注册在 conversation.input.activity
+ * 槽位的**条目组件本体**（麦克风触发钮、录音波形、转写、未就绪引导弹窗全部
+ * 是官方代码，其闭包自带 primitives 与样式注入）。
+ *
+ * 检测即兼容：官方桌面版（0.2.0-rc.2 起）挂载 experimental-client-ui-voice-input
+ * 后，原生输入框工具行右侧（模型选择器与发送钮之间）出现麦克风钮；web 宿主
+ * （0.1.x）没有该插件、槽位无条目，官方输入框也没有按钮——Codinput 同样不
+ * 渲染。条目出现/消失经 slots.subscribe 响应式跟随（用户开关语音插件即时生效）。
+ *
+ * props 组装复刻官方 renderer 的合成公式：
+ *   {...standard(sessionId/inputActions), ...entry.inject()（其 hooks 子表的
+ *   speechReadiness 按 standardHookPropName 变成 useSpeechReadiness 选择器钩子）,
+ *   ...ownerProps(locked/onActiveChange), t = locale.bind(entry.locale)}
+ * inject 结果按（条目 × 会话）缓存——官方 renderer 同款缓存轴，避免每次渲染
+ * 重建对象让钩子身份漂移。宿主未就绪（slots 无检视面 / inject 不可调 /
+ * locale 缺席）一律不渲染，绝不半组装。
+ */
+
+import { createElement, useCallback, useMemo, useSyncExternalStore, Component } from 'react';
+import type { HostObservable, SlotEntryLike } from '../host-types';
+import { stash } from '../services';
+import { bindForeign } from '../i18n';
+import { diagError } from '../diag';
+
+const ACTIVITY_SLOT = 'conversation.input.activity';
+const VOICE_NS_FALLBACK = 'voice-input';
+
+type Translator = (key: string, params?: Record<string, string | number>) => string;
+type ReadinessSelector = (value: unknown) => unknown;
+type ReadinessHook = (selector: ReadinessSelector) => unknown;
+
+const EMPTY_ENTRIES: readonly unknown[] = [];
+
+/** observableHook 同款缓存轴：钩子身份按 readiness store 稳定，不逐渲染重订。 */
+const readinessHookCache = new WeakMap<object, ReadinessHook>();
+/** 官方 renderer 的 inject 缓存轴：条目 × 会话绑定。 */
+const injectCache = new WeakMap<object, Map<string, Record<string, unknown> | null>>();
+const translatorCache = new Map<string, Translator | null>();
+
+/** 槽位条目快照：entries 引用在变更之间稳定（官方契约），直接作 uSES 源。 */
+function useSlotEntries(key: string): readonly unknown[] {
+  const slots = stash.slots;
+  const subscribe = useCallback(
+    (fn: () => void) => {
+      if (typeof slots?.subscribe !== 'function') return () => {};
+      try {
+        return slots.subscribe(key, fn) ?? (() => {});
+      } catch {
+        return () => {};
+      }
+    },
+    [slots, key],
+  );
+  const getSnapshot = useCallback(() => {
+    if (typeof slots?.entries !== 'function') return EMPTY_ENTRIES;
+    try {
+      return slots.entries(key) ?? EMPTY_ENTRIES;
+    } catch {
+      return EMPTY_ENTRIES;
+    }
+  }, [slots, key]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+/** 调条目 inject 工厂取 props 面（session 槽位以 sessionId 调用，官方同参）。 */
+function resolveInjected(entry: SlotEntryLike, sessionId: string): Record<string, unknown> | null {
+  if (typeof entry.inject !== 'function') return null;
+  let perSession = injectCache.get(entry);
+  if (!perSession) {
+    perSession = new Map();
+    injectCache.set(entry, perSession);
+  }
+  if (!perSession.has(sessionId)) {
+    let face: Record<string, unknown> | null = null;
+    try {
+      face = (entry.inject as (key: string) => Record<string, unknown>)(sessionId) ?? null;
+    } catch (error) {
+      diagError('voice.inject', error);
+      face = null;
+    }
+    perSession.set(sessionId, face);
+  }
+  return perSession.get(sessionId) ?? null;
+}
+
+/** 官方 renderer 的 locale 座位：locale.bind(entry.locale)，按 ns 缓存。 */
+function translatorFor(entry: SlotEntryLike): Translator | null {
+  const ns = entry.locale ?? VOICE_NS_FALLBACK;
+  if (!translatorCache.has(ns)) translatorCache.set(ns, bindForeign(ns));
+  return translatorCache.get(ns) ?? null;
+}
+
+/** hooks.speechReadiness（快照 store）→ use<Name> 选择器钩子（observableHook 同款）。 */
+function readinessHookFor(source: unknown): ReadinessHook | null {
+  const face = source as HostObservable<unknown> | undefined;
+  if (!face || typeof face.subscribe !== 'function' || typeof face.getSnapshot !== 'function') return null;
+  let hook = readinessHookCache.get(face);
+  if (!hook) {
+    hook = (selector: ReadinessSelector): unknown =>
+      useSyncExternalStore(
+        (fn: () => void) => face.subscribe(fn) ?? (() => {}),
+        () => selector(face.getSnapshot()),
+        () => selector(face.getSnapshot()),
+      );
+    readinessHookCache.set(face, hook);
+  }
+  return hook;
+}
+
+/** 条目崩溃只丢语音钮，不连坐 Codinput 的 bar 条目（bar 被废黜 = 全部输入消失）。 */
+class VoiceBoundary extends Component<{ children?: React.ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true };
+  }
+  componentDidCatch(error: unknown): void {
+    diagError('voice.entry', error);
+  }
+  render(): React.ReactNode {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+export interface VoiceActivityProps {
+  sessionId: string | undefined;
+  /** 官方输入机动作面（bar 槽位 standard props 里的 inputActions 原样透传）。 */
+  inputActions: unknown;
+  /** 输入锁定（官方 ownerProps.locked：submitting/inert 时触发钮禁用）。 */
+  locked: boolean;
+  /** 展开/收起上报（官方 ownerProps.onActiveChange：录音时宿主隐藏其余工具）。 */
+  onActiveChange(active: boolean): void;
+}
+
+export function VoiceActivity(props: VoiceActivityProps): JSX.Element | null {
+  const { sessionId, inputActions, locked, onActiveChange } = props;
+  const entries = useSlotEntries(ACTIVITY_SLOT);
+
+  // single 槽位赢家 = 优先级最低者 = entries 首个（register 即按优先级排序）。
+  const entry = useMemo((): SlotEntryLike | null => {
+    for (const candidate of entries) {
+      const record = candidate as SlotEntryLike | null | undefined;
+      if (record && typeof record === 'object' && typeof record.component === 'function') return record;
+    }
+    return null;
+  }, [entries]);
+
+  const injected = useMemo(
+    () => (entry && sessionId ? resolveInjected(entry, sessionId) : null),
+    [entry, sessionId],
+  );
+  const translator = useMemo(() => (entry ? translatorFor(entry) : null), [entry]);
+  const readinessSource = (injected?.['hooks'] as { speechReadiness?: unknown } | undefined)?.speechReadiness;
+  const useReadiness = useMemo(() => readinessHookFor(readinessSource), [readinessSource]);
+
+  if (!entry || !sessionId || !injected || !translator || !useReadiness) return null;
+
+  // hooks 子表已折成 use* 钩子（bindInjectSources 同款），其余 props 原样下传。
+  const { hooks: _hooks, ...actions } = injected;
+  void _hooks;
+  return createElement(VoiceBoundary, {
+    children: createElement(entry.component as React.ComponentType<Record<string, unknown>>, {
+      sessionId,
+      inputActions,
+      locked,
+      onActiveChange,
+      ...actions,
+      useSpeechReadiness: useReadiness,
+      t: translator,
+    }),
+  });
+}

package/src/client/host-types.ts

@@ -44,6 +44,24 @@ export interface SlotsService {
   register(options: SlotRegisterOptions, component: unknown): () => void;
   /** 锚定槽位：当该槽被声明时运行工厂；工厂 yield 掉的可清理返回值统一登记生命周期。 */
   inject(slotName: string, factory: () => Generator<unknown> | (() => unknown)): void;
+  /**
+   * 槽位检视面（0.2.x 起的 SlotCore 公开方法，鸭子探测）：entries 返回条目
+   * 快照（引用在变更之间稳定，可作 uSES getSnapshot 源；未声明槽返回稳定
+   * 空数组）；subscribe 订阅该槽条目变更。
+   */
+  entries?(key: string): readonly unknown[];
+  subscribe?(key: string, fn: () => void): () => void;
+}
+
+/** 槽位条目记录（SlotCore.register 产物）里我们消费的切面。 */
+export interface SlotEntryLike {
+  /** 条目 React 组件（官方 renderer 以 {...kit,...injected,...ownerProps} 渲染）。 */
+  readonly component?: unknown;
+  /** 注入工厂：session 槽位以 binding.key（sessionId）调用，返回 props 面。 */
+  readonly inject?: (...args: unknown[]) => Record<string, unknown>;
+  /** 条目词典命名空间（locale.bind(ns) 即官方传给组件的 t）。 */
+  readonly locale?: string;
+  readonly registrant?: string;
 }
 
 // ---------- input machine ----------

package/src/client/i18n.ts

@@ -232,9 +232,11 @@ interface LocaleFaceLike {
   getSnapshot?(): { active?: string };
 }
 
+let hostFace: LocaleFaceLike | null = null;
 let bound: ((key: string, params?: TranslateParams) => string) | null = null;
 let activeLocale = 'zh';
 const listeners = new Set<() => void>();
+const foreignBinds = new Map<string, ((key: string, params?: TranslateParams) => string) | null>();
 
 function emit(): void {
   for (const fn of listeners) fn();
@@ -257,6 +259,7 @@ function builtinDict(): Dict {
 export function installI18n(locale: unknown): void {
   const face = locale as LocaleFaceLike | undefined;
   if (!face) return;
+  hostFace = face;
   try {
     face.register?.(NS, 'zh', ZH);
     face.register?.(NS, 'en', EN);
@@ -282,6 +285,24 @@ export function installI18n(locale: unknown): void {
   }
 }
 
+/**
+ * 绑定其他命名空间的宿主词典（如语音插件注册的 voice-input——渲染官方条目
+ * 组件时，官方 renderer 传的就是 locale.bind(entry.locale)）。返回引用稳定
+ * 的翻译函数；宿主 face 未就绪或 bind 失败返回 null。结果按 ns 缓存。
+ */
+export function bindForeign(ns: string): ((key: string, params?: TranslateParams) => string) | null {
+  if (!foreignBinds.has(ns)) {
+    let bound: ((key: string, params?: TranslateParams) => string) | null = null;
+    try {
+      bound = hostFace?.bind?.(ns) ?? null;
+    } catch {
+      bound = null;
+    }
+    foreignBinds.set(ns, bound);
+  }
+  return foreignBinds.get(ns) ?? null;
+}
+
 export function subscribeI18n(fn: () => void): () => void {
   listeners.add(fn);
   return () => {

package/src/client/services.ts

@@ -10,11 +10,13 @@ import type {
   ModelDirectoriesFace,
   SessionsFace,
   SidebarRightFace,
+  SlotsService,
 } from './host-types';
 import { diagError, runGuarded } from './diag';
 import { installI18n } from './i18n';
 
 export interface ServiceStash {
+  slots?: SlotsService;
   conversation?: ConversationFace;
   sessions?: SessionsFace;
   commandUi?: CommandUiFace;
@@ -33,8 +35,11 @@ export function installServices(ctx: ClientContext): void {
   });
 
   // sessions / commandUi：被消费服务自身的 static inject 链由宿主装配。
+  // slots 一并取入 stash：语音按钮要检视 conversation.input.activity 槽位
+  // 条目（见 components/VoiceActivity）。
   runGuarded('stash.services', () => {
     ctx.inject(['slots', 'sessions', 'commandUi'], (scope: Record<string, unknown>) => {
+      stash.slots = scope['slots'] as SlotsService;
       stash.sessions = scope['sessions'] as SessionsFace;
       stash.commandUi = scope['commandUi'] as CommandUiFace;
     });

package/src/client/styles.ts

@@ -50,8 +50,14 @@ const CSS = `
 .dci-body { position: relative; display: flex; gap: 0; min-height: 60px; max-height: var(--dci-body-max, 46vh); overflow: hidden; }
 .dci-body[style*="--dci-body-h"] { height: var(--dci-body-h); }
 /* 分屏：grid 等宽两栏（fr 计入 padding/border，两栏边界严格居中；flex
- * 会把预览栏的横向 padding 泄漏进空间分配，做不到对半）。 */
-.dci-body[data-split="true"] { display: grid; grid-template-columns: 1fr 1fr; }
+ * 会把预览栏的横向 padding 泄漏进空间分配，做不到对半）。行高必须
+ * minmax(0,1fr)+两栏 min-height:0：隐式 auto 行随内容撑高、不受 max-height
+ * 钳制，内容一高整行溢出被 overflow:hidden 裁掉，两栏都出不了滚动条。 */
+.dci-body[data-split="true"] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
+.dci-body[data-split="true"] > * { min-height: 0; }
+/* 分屏同步滚动：只留编辑栏一个滚动条，预览栏藏起但滚轮仍可反向带动编辑器。 */
+.dci-body[data-split="true"] .dci-preview { scrollbar-width: none; }
+.dci-body[data-split="true"] .dci-preview::-webkit-scrollbar { display: none; }
 .dci-body[data-split="true"] .dci-editor-wrap { border-right: 1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 12%, transparent)); }
 .dci-editor-wrap { position: relative; flex: 1 1 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; }
 .dci-editor-wrap[data-solo="true"] { flex-basis: 100%; }
@@ -79,6 +85,16 @@ const CSS = `
 .dci-tools { align-items: center; min-width: 0; gap: 12px; display: flex; }
 .dci-trailing { align-items: center; flex: none; min-width: 0; gap: 12px; margin-left: auto; display: flex; }
 
+/* ===== 语音输入座位（官方 .standardControls / .activity / .activityExpanded）=====
+   按钮本体是官方 activity 槽位条目组件（Gyyz9a_* 样式由语音插件自带注入）；
+   这里只负责座位：展开时 capture 行接管整行、左侧工具与模型控件让位。 */
+.dci-standard-controls { align-items: center; min-width: 0; gap: 12px; display: flex; }
+.dci-voice-seat { flex: none; align-items: center; display: flex; }
+.dci-voice-seat:empty { display: none; }
+.dci-row[data-voice-active] .dci-tools, .dci-row[data-voice-active] .dci-standard-controls { display: none; }
+.dci-row[data-voice-active] .dci-trailing { flex: 1; margin-left: 0; }
+.dci-row[data-voice-active] .dci-voice-seat { flex: 1; min-width: 0; }
+
 /* 圆形图标按钮（官方 .add）*/
 .dci-add { background: var(--dsw-specific-selector, color-mix(in srgb, currentColor 8%, transparent));
   width: 28px; height: 28px; color: var(--dsw-alias-label-primary, currentColor); cursor: pointer; border: none;