import type { ExampleUsage, StoryUsage } from './types';
/**
* Support Assistant — a compact chat bubble docked to the bottom-right corner
* of the host page, absolutely positioned over any app content.
*/
const supportAssistant: StoryUsage = {
intro:
'Use **Docked Widget** for a support or assistant chat that floats over any page — the classic bottom-right widget. The widget is an absolutely-positioned card (`position:absolute; bottom:…; right:…`) layered over a relative-positioned host wrapper. Same `ChatContainer` + `Message` + `PromptInput` building blocks as the other patterns, just smaller (`proseSize="sm"`, compact padding) and sized to ~360 × 460 px. Shadow-DOM isolation means zero CSS bleed onto the host page.',
snippets: {
html: `
Support
Hi! 👋 How can I help you today?
How do I reset my password?
Head to **Settings → Security** and click **Reset password**.
`,
react: `import { useState } from 'react';
import {
ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
Message, MessageAvatar, MessageContent,
PromptInput, PromptInputTextarea, PromptInputActions,
Button,
} from '@kitn.ai/chat/react';
/**
* Docked Widget — a compact chat bubble docked to the bottom-right of the page.
* Render this inside a relative-positioned root wrapper so the absolute
* positioning stays within your app boundary.
*/
export function DockedWidget() {
const [input, setInput] = useState('');
const [open, setOpen] = useState(true);
if (!open) return null;
return (
{/* Widget: docked bottom-right — size to taste */}
{/* Header */}
Support
{/* Scrollable thread */}
Hi! 👋 How can I help you today?
How do I reset my password?
Head to **Settings → Security** and click **Reset password**.
{/* Composer */}
setInput('')}>
);
}`,
vue: `
Support
Hi! 👋 How can I help you today?
How do I reset my password?
Head to **Settings → Security** and click **Reset password**.
`,
svelte: `
{#if open}
Support
Hi! 👋 How can I help you today?
How do I reset my password?
Head to **Settings → Security** and click **Reset password**.
{/if}`,
angular: `// main.ts: import '@kitn.ai/chat/elements' before bootstrapApplication,
// and add CUSTOM_ELEMENTS_SCHEMA to the component.
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgIf } from '@angular/common';
/**
* Docked Widget — a compact chat bubble docked to the bottom-right.
* Render inside a relative-positioned host so absolute positioning works.
*/
@Component({
selector: 'app-docked-widget',
standalone: true,
imports: [NgIf],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
styles: [':host { display: contents; }'],
template: \`
Support
Hi! How can I help you today?
How do I reset my password?
Head to **Settings → Security** and click **Reset password**.
\`,
})
export class DockedWidgetComponent {
open = true;
input = '';
}`,
solid: `import { createSignal } from 'solid-js';
import {
ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
Message, MessageAvatar, MessageContent,
PromptInput, PromptInputTextarea, PromptInputActions,
Button,
} from '@kitn.ai/chat';
import { ArrowUp, X } from 'lucide-solid';
/**
* Docked Widget — a compact support assistant docked to the bottom-right.
* Render this inside a relative-positioned host element.
* proseSize="sm" gives tighter line-heights suitable for the compact size.
*/
export function DockedWidget() {
const [input, setInput] = createSignal('');
const [open, setOpen] = createSignal(true);
return (
{/* Widget: absolutely docked — size to taste */}
{/* Header */}
Support
{/* Scrollable thread */}
Hi! 👋 How can I help you today?
How do I reset my password?
Head to **Settings → Security** and click **Reset password**.
{/* Composer */}
setInput('')}>
);
}`,
},
};
/**
* Pattern: Docked Widget — a compact floating assistant docked to the
* bottom-right corner of the host page. Same building blocks as the other
* patterns (`ChatContainer` + `Message` + `PromptInput`) at compact sizing;
* absolutely positioned over the host so zero CSS bleed. Per-story: the Usage
* tab shows the snippet for the story you're on; the example-level fields below
* are the fallback.
*/
const dockedWidget: ExampleUsage = {
title: 'Patterns/Docked Widget',
...supportAssistant,
stories: {
'Support Assistant': supportAssistant,
},
};
export default dockedWidget;