wehub-resource-sync
e30e75b5d4
Code Quality / Oxlint + Oxfmt (push) Waiting to run
Code Quality / Template Sync (push) Waiting to run
Code Quality / Build Changed Packages (push) Waiting to run
Code Quality / Test Changed Packages (push) Waiting to run
Deploy Expo Example / Deploy Production (push) Waiting to run
Deploy Ink Example / Deploy Production (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.12) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Waiting to run
Deploy Shadcn Registry / Deploy Production (push) Waiting to run
Template Metrics / LOC + Bundle Size (push) Waiting to run
Changesets / Create Version PR (push) Has been cancelled
80 lines
3.2 KiB
Plaintext
80 lines
3.2 KiB
Plaintext
---
|
|
title: Floating Modal Chat
|
|
description: Embeddable AI assistant in a floating button modal — drop into any React app for in-product copilots or support chat, built on assistant-ui.
|
|
---
|
|
|
|
import { ModalChat } from "@/components/examples/modal";
|
|
|
|
<div className="h-[500px]">
|
|
<ModalChat />
|
|
</div>
|
|
|
|
## Overview
|
|
|
|
The Modal example demonstrates how to create a floating action button that opens an AI assistant chat interface in a modal dialog. This pattern is ideal for applications where you want to provide AI assistance without disrupting the main user interface.
|
|
|
|
## Features
|
|
|
|
- **Floating Action Button**: A clean, accessible button fixed to the corner of the screen
|
|
- **Modal Dialog**: Full-featured chat interface with proper focus management
|
|
- **Smooth Animations**: Enter/exit transitions with zoom and slide effects
|
|
- **Responsive Design**: Works across desktop and mobile devices
|
|
- **Keyboard Navigation**: Escape key to close, proper tab order
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
npx assistant-ui add assistant-modal
|
|
```
|
|
|
|
## Code
|
|
|
|
The modal uses `AssistantModalPrimitive` to create a floating chat interface:
|
|
|
|
```tsx
|
|
import { AssistantModalPrimitive } from "@assistant-ui/react";
|
|
import { Thread } from "@/components/assistant-ui/thread";
|
|
import { BotIcon } from "lucide-react";
|
|
|
|
export const AssistantModal = () => {
|
|
return (
|
|
<AssistantModalPrimitive.Root>
|
|
<AssistantModalPrimitive.Anchor className="fixed right-4 bottom-4 size-11">
|
|
<AssistantModalPrimitive.Trigger asChild>
|
|
<button className="size-full rounded-full bg-primary shadow-lg transition-transform duration-150 ease-out hover:scale-105 active:scale-96 motion-reduce:transition-none">
|
|
<BotIcon />
|
|
</button>
|
|
</AssistantModalPrimitive.Trigger>
|
|
</AssistantModalPrimitive.Anchor>
|
|
|
|
<AssistantModalPrimitive.Content
|
|
sideOffset={16}
|
|
className="h-[500px] w-[400px] origin-(--radix-popover-content-transform-origin) rounded-[2.5rem] border bg-popover shadow-xl ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 data-[state=open]:duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-bottom-2 data-[state=closed]:duration-200 motion-reduce:animate-none"
|
|
>
|
|
<Thread />
|
|
</AssistantModalPrimitive.Content>
|
|
</AssistantModalPrimitive.Root>
|
|
);
|
|
};
|
|
```
|
|
|
|
### Key Components
|
|
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `AssistantModalPrimitive.Root` | Container that manages open/close state |
|
|
| `AssistantModalPrimitive.Anchor` | Positions the trigger button |
|
|
| `AssistantModalPrimitive.Trigger` | Button that opens the modal |
|
|
| `AssistantModalPrimitive.Content` | The modal dialog containing the chat |
|
|
|
|
### Customization Tips
|
|
|
|
- Adjust `sideOffset` to control the gap between button and modal
|
|
- Modify `h-[500px] w-[400px]` to change modal dimensions
|
|
- Use `data-[state=open/closed]` for animation states
|
|
- Position the anchor with `fixed right-4 bottom-4` or any corner
|
|
|
|
## Source
|
|
|
|
<SourceLink href="https://github.com/assistant-ui/assistant-ui/blob/main/apps/docs/components/docs/samples/assistant-modal.tsx" />
|