Composer panel

composer-panel は composer 上部の contextual app UI で、public composer API に bind される唯一の surface です。Draft の観察と atomic edit、exact execution の pending deferred result、composer lock を利用できます。

YAML

contributes:
  ui:
    - id: report-panel
      kind: nativeModule
      surface: composer-panel
      slot: chat.composer.panel
      module:
        entry: dist/ui/app.js
        export: ReportPanel

TSX

import { useComposer } from '@sota/core/hooks';

export function ReportPanel() {
  const value = useComposer((composer) => composer.value);
  const applyEdit = useComposer((composer) => composer.applyEdit);
  if (!value.includes('/report')) return null;
  return <button type="button" onClick={() => applyEdit({
    mode: 'replace', content: [{ kind: 'text', text: 'Create a weekly report for ' }],
  })}>Use template</button>;
}

Slot は正確に chat.composer.panel とします。App 固有条件がなければ null を描画できます。Slash command と panel は独立 contribution です。