AskAi

AI chat assistant panel with keyboard shortcuts and streaming responses.

The AskAi component renders a floating chat button and a slide-in panel for AI-powered documentation Q&A.

Usage

---
import { AskAi } from '@publier/shell/qwik';
---

<AskAi />

The component is self-contained — it manages its own open/close state and renders both the trigger button and the chat panel.

Features

• Floating trigger button — bottom-right pill button, hides when panel opens
• Chat panel — slide-in sidebar (460px on desktop, fullscreen on mobile)
• Keyboard shortcuts — Cmd/Ctrl + / to toggle, Escape to close
• Input area — auto-growing textarea with send button
• Cross-container events — toggle from external code via DOM events

External control

Toggle the panel from anywhere on the page via a DOM custom event:

// Toggle the panel from anywhere
document.dispatchEvent(new CustomEvent('publier:ai-toggle'));

Backend integration

The component currently shows a placeholder UI. When the backend API is ready, wire the send button to fetch() your AI endpoint and render streamed responses in the messages area.

Configure the endpoint in publier.config.yaml:

ai:
  endpoint: https://api.your-domain.com/ai/chat