AI Chat Window
Full-featured AI chat interface with messages, input, and attachments
SaaSAI Chat
Overview
AiChat uses the compound component pattern with dot-notation. Each sub-component owns its relevant props and accepts a labels prop for localization — no hardcoded strings.
Usage
import { AiChat } from "@leanicon/web-builder-library/saas";
<AiChat
session={session}
onSendMessage={handleSend}
onFeedback={handleFeedback}
onStopConversation={handleStop}
onStopStreaming={handleStopStreaming}
onSessionRating={handleRating}
>
<AiChat.Header labels={{ statusActive: "En línea" }} />
<AiChat.Messages messages={messages} labels={{ thinking: "Pensando..." }} />
<AiChat.Footer labels={{ placeholderActive: "Escribe un mensaje..." }} />
</AiChat>;Sub-Components
Component | Own Props | Description |
|---|---|---|
|
| Session title, agent name, status badge, stop/resume buttons |
|
| Message list, empty state, streaming bubble, loading indicator |
|
| Input, stop generating button, session rating form |
Variants
Default
Help with onboarding flowOnboarding Assistant
Active
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
With Stop Conversation
Help with onboarding flowOnboarding Assistant
Active
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
With Resume Conversation
Help with onboarding flowOnboarding Assistant
Ended
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
Streaming with Stop Button
Help with onboarding flowOnboarding Assistant
Active
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
You2 weeks ago
How do I add analytics?
Agentnow
You can add analytics by enabling event hooks.
1. Go to settings
2. Enable
Ended with Session Feedback
Help with onboarding flowOnboarding Assistant
Ended
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
How was your experience with Onboarding Assistant?
Ended with Session Feedback (Dark)
Help with onboarding flowOnboarding Assistant
Ended
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
How was your experience with Onboarding Assistant?
Ended with Submitted Rating
Help with onboarding flowOnboarding Assistant
Ended
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
Thanks for your feedback!
“Very helpful!”
Ended with Resume and Feedback
Help with onboarding flowOnboarding Assistant
Ended
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
How was your experience with Onboarding Assistant?
All Actions
Help with onboarding flowOnboarding Assistant
Active
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
Custom Compositions
With Custom Slot
Help with onboarding flowOnboarding Assistant
Active
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
Powered by AI — responses may be inaccurate
Minimal
You2 weeks ago
How do I set up the onboarding flow?
Agent2 weeks ago
Navigate to Settings > Onboarding in the admin panel. From there you can define steps, configure welcome messages, and set up guided tours.
Localization
All strings are customizable via labels props on each sub-component:
import { AiChat } from "@leanicon/web-builder-library/saas";
<AiChat session={session} onSendMessage={send} onFeedback={fb}>
<AiChat.Header
labels={{
statusActive: "Activo",
statusEnded: "Finalizado",
stopConversation: "Finalizar conversación",
resumeConversation: "Reanudar conversación",
}}
/>
<AiChat.Messages
messages={messages}
labels={{
emptyState: "Inicia una conversación con {agentName}",
thinking: "Pensando...",
agentName: "Agente",
userName: "Tú",
}}
/>
<AiChat.Footer
labels={{
placeholderActive: "Haz una pregunta...",
stopGenerating: "Detener generación",
feedbackTitle: "¿Cómo fue tu experiencia con {agentName}?",
ratingExcellent: "Excelente",
}}
/>
</AiChat>;Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
session | AiChatSession | — | Yes | Current AI chat session |
onSendMessage | (content: string, attachments?: File[] | undefined) => void | — | Yes | Callback when message is sent |
onFeedback | (messageId: string, feedback: AiChatFeedback) => void | — | Yes | Callback when feedback is given on an agent message |
isLoading | boolean | — | No | Whether agent is currently responding (shows "Thinking..." indicator) |
streamingMessage | AiChatStreamingMessage | null | — | No | Partial message being streamed from the agent |
sessionRating | AiChatSessionRating | null | — | No | End-of-conversation rating (1–5 stars) |
onSessionRating | ((rating: AiChatSessionRating) => void) | — | No | Callback when session is rated at end of conversation |
onStopConversation | (() => void) | — | No | Callback to end (stop) the active conversation |
onResumeConversation | (() => void) | — | No | Callback to resume an ended conversation |
onStopStreaming | (() => void) | — | No | Callback to cancel the current streaming response |
children | ReactNode | — | Yes | Compound sub-components: AiChat.Header, AiChat.Messages, AiChat.Footer |
className | string | — | No | Additional CSS class names |