---
title: "Composer panel"
description: "composer-panel là UI contextual phía trên composer. Đây là surface duy nhất được bind public composer API: quan sát draft, edit atomically, đọc deferred result pending của exact…"
url: "https://sotaagents.ai/vi/manual/developer-guide/composer-panels"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "vi"
---

# Composer panel

`composer-panel` là UI contextual phía trên composer. Đây là surface duy nhất được bind public composer API: quan sát draft, edit atomically, đọc deferred result pending của exact execution và giữ 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 weekly report template
    </button>
  );
}
```

Slot phải chính xác là `chat.composer.panel`. Panel có thể render `null` khi điều kiện riêng của app không còn. Slash command và panel là hai contribution độc lập.