Jazzmine

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.

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 { 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) => {
    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 */
      initialOpen={false} /* Optional: panel starts closed by default */
      assistantName="Support Assistant" /* Optional: widget header title */
      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.
isLoading	boolean	No	false	Loading state.
loadingText	string	No	'typing'	Loading text.
loadingVariant	'text-and-dots' \| 'dots-only'	No	'text-and-dots'	Loading indicator style.
initialOpen	boolean	No	false	Initial panel open state.
onOpen	(open: boolean) => void	No	-	Open/close change callback.
onSend	(text: string) => void	No	-	Message send callback.
logo	string	No	Built-in logo	Widget button image source.
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.