پنل دستیار (AssistantPanel)

معرفی

AssistantPanel گفت‌وگو با دستیار هوش مصنوعی را نمایش می‌دهد: پیام‌های کاربر، پاسخ‌های دستیار (به‌صورت markdown)، فراخوانی‌های ابزار با ToolCard، نشانگر «در حال نوشتن…» و کادر ارسال. Enter پیام را می‌فرستد و Shift+Enter خط تازه می‌سازد.

سه جایگاه دارد:

• aside: درون جریان صفحه، مثلاً در اسلات aside قالب DetailPage.
• floating: دکمه‌ای شناور در گوشهٔ پایین صفحه که پنل را باز می‌کند.
• sheet: شیت کناری که با open و onOpenChange کنترل می‌شود.

چه زمانی استفاده نکنیم:

• برای نمایش یک پاسخ یا خلاصهٔ AI بدون گفت‌وگو: از MarkdownRenderer استفاده کنید.

استفاده

import { AssistantPanel } from '@partodata/ui/assistant-panel'

const [messages, setMessages] = React.useState<AssistantMessage[]>([])
const [streaming, setStreaming] = React.useState(false)

<DetailPage
  title="گزارش کمپین تخفیف فصلی"
  aside={
    <AssistantPanel
      messages={messages}
      streaming={streaming}
      onSend={(text) => ask(text)}
    />
  }
>
  …
</DetailPage>

کارت ابزار

<ToolCard name="جست‌وجوی پست‌ها" status="done" input={{ q: 'تخفیف' }} output={{ count: 12 }} />

Props

AssistantPanel

AssistantMessage

ToolCard

دسترسی‌پذیری

• فهرست پیام‌ها role="log" با aria-live="polite" است، پس پیام‌های تازه خوانده می‌شوند.
• جزئیات کارت ابزار با صفحه‌کلید باز و بسته می‌شود.