FloatingChatWidget
A floating launcher button fixed to the screen corner that opens a compact chat panel when clicked.
FloatingChatWidget is a launcher button fixed to a screen corner that opens a compact chat
panel. It works well for support bots and embedded assistants where chat is secondary to the
main page content.
The widget mounts in the bottom-right of this frame.
I'm a floating widget — open me and say hi!
How the floating UX works
The widget forwards defaultMessage into the chat window and supports onSend(text, contexts?)
for context-aware send flows. Use initialOpen to control whether the panel starts open, and
onOpen to react to open/close transitions.
Full working example
import React from 'react';
import { FloatingChatWidget } from '@jazzmine-ui/react';
import type { Context, Message } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';
export function Widget() {
const [messages, setMessages] = React.useState<Message[]>([]);
const onSend = (text: string, contexts?: Context[]) => {
setMessages((prev) => [
...prev,
{ id: crypto.randomUUID(), text, sender: 'user' },
{ id: crypto.randomUUID(), text: `Echo: ${text}`, sender: 'assistant' },
]);
};
return (
<FloatingChatWidget
messages={messages}
defaultMessage="Welcome! Ask me anything."
initialOpen={false}
assistantName="Support Assistant"
onSend={onSend}
onOpen={(open) => console.log('Widget open state:', open)}
/>
);
}Props
Prop
Type
Notes
initialOpen sets first render state
initialOpen only controls whether the panel starts open or closed on mount.
Use onOpen for analytics and app events
onOpen fires when the panel opens or closes, which is useful for tracking engagement or
synchronizing global UI state.