Floating Chat Widget

How the floating UX works

This works well for support bots, embedded assistants, and any app where chat is secondary to the main page content.

The widget forwards defaultMessage into the chat window and supportsonSend(text, contexts?) for context-aware send flows.

Full working example

Inline comments explain what each prop controls in the launcher and panel flow.

Widget.tsx

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 [isLoading, setIsLoading] = React.useState(false);

  const onSend = (text: string, contexts?: Context[]) => {
    console.log('Selected contexts:', contexts);
    setMessages((prev) => [
      ...prev,
      { id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString() },
      {
        id: crypto.randomUUID(),
        text: `Echo: ${text}`,
        sender: 'assistant',
        timestamp: new Date().toISOString(),
      },
    ]);
  };

  return (
    <FloatingChatWidget
      messages={messages} /* Required: current widget message feed */
      isLoading={isLoading} /* Optional: assistant loading state */
      defaultMessage="Welcome! Ask me anything." /* Optional: empty-state message */
      initialOpen={false} /* Optional: panel starts closed by default */
      assistantName="Support Assistant" /* Optional: widget header title */
      assistantAvatar="/brand-logo.png" /* Optional: assistant avatar image */
      assistantAvatarFallback="SA" /* Optional: fallback text for assistant avatar */
      logo="/brand-logo.png" /* Optional: widget launcher image source */
      logoAlt="Support chat" /* Optional: widget logo alt text */
      onSend={onSend} /* Optional: send handler for user messages */
      onOpen={(open) => {
        /* Optional: track open/close transitions for analytics or UI state */
        console.log('Widget open state:', open);
      }}
    />
  );
}

FloatingChatWidget props

Prop	Type	Required	Default	Description
messages	Message[]	Yes	-	Message feed data.
assistantName	string	No	-	Header title in widget panel.
assistantAvatar	string	No	-	Global assistant avatar image for assistant messages.
assistantAvatarFallback	string	No	First assistant-name letter (or 'A')	Placeholder text shown when assistant avatar image is unavailable.
isLoading	boolean	No	false	Loading state.
loadingText	string	No	'typing'	Loading indicator text.
loadingVariant	'text-and-dots' \| 'dots-only'	No	'text-and-dots'	Loading indicator style.
defaultMessage	string	No	''	Rendered when there are no messages and the widget is not loading.
initialOpen	boolean	No	false	Initial panel open state.
onOpen	(open: boolean) => void	No	-	Open/close change callback.
onSend	(text: string, contexts?: Context[]) => void	No	-	Message send callback. Receives optional selected context snippets.
logo	string	No	Built-in logo	Widget button image source.
logoAlt	string	No	Assistant avatar alt or 'Chat'	Accessible alt text for the widget button logo.
className	string	No	''	Root class override.

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.