JazzmineChat

What it manages automatically

Conversation creation and selection.
Conversation history loading and rendering.
Conversation search and result selection.
Conversation deletion and rename flows.
Sidebar pagination and load-more behavior.
Message send/loading states.
Recoverable error handling through onError.

Floating mode

Set floating to true to render JazzmineChat as a compact floating widget. In this mode the full sidebar interface is omitted, conversation history is not preloaded, and the component creates a session-scoped anonymous user automatically.

The sidebar, search, rename, and delete UI are not rendered.
listConversations is never called.
After the first message, a conversation is auto-created and later reused via activeChatId.
The userId prop is ignored; JazzmineChat generates a page-session ID like customer-{uuid4}.
The generated ID is sent as user_id to createConversation for server-side ownership tracking.
refreshConversationSummary is skipped after the first message in floating mode.
On send, JazzmineChat uses the same handleSend flow so optimistic updates and error handling behave like the full interface.

Best fit for this component

Choose JazzmineChat when you want managed conversation workflows and minimal app-level orchestration code.

Full working example

App.tsx

import React from 'react';
import JazzmineClient from '@jazzmine-ui/sdk';
import { JazzmineChat } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

const client = new JazzmineClient('https://your-jazzmine-api.example.com', {
  apiKey: 'your-api-key',
  defaultUserId: 'user',
});

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <JazzmineChat
        client={client} /* Required: your backend client implementation */
        userId="user" /* Optional: used for list/search conversation calls */
        assistantName="Jazzmine AI" /* Optional: header/avatar label */
        logo="/brand-logo.png" /* Optional: custom sidebar/widget branding logo */
        logoAlt="Acme AI" /* Optional: accessible alt text for branding logo */
        assistantAvatar="/brand-logo.png" /* Optional: assistant message avatar image */
        assistantAvatarFallback="AC" /* Optional: fallback text when avatar is unavailable */
        placeholder="Ask anything..." /* Optional: input placeholder */
        defaultMessage="Welcome! Ask me anything to get started." /* Optional: empty-state message */
        onError={(error) => {
          /* Optional: central error capture for recoverable failures */
          console.error('JazzmineChat error:', error);
        }}
      />
    </div>
  );
}

Floating mode example

Enable floating mode to render JazzmineChat as a compact widget with the same send flow and error handling as the full interface.

App.tsx

import React from 'react';
import JazzmineClient from '@jazzmine-ui/sdk';
import { JazzmineChat } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

const client = new JazzmineClient('https://your-jazzmine-api.example.com', {
  apiKey: 'your-api-key',
});

export function App() {
  return (
    <JazzmineChat
      client={client}
      floating={true} /* Renders the floating widget instead of the full sidebar interface */
      initialOpen={true} /* Optional: open the panel on first render */
      defaultMessage="Welcome! Ask me anything." /* Optional: empty-state message */
      loadingText="typing"
      loadingVariant="text-and-dots"
      onError={(error) => {
        console.error('JazzmineChat error:', error);
      }}
    />
  );
}

Branding and avatar customization

App.tsx

import BrandLogo from './assets/brand-logo.png';

<JazzmineChat
  client={client}
  assistantName="Acme Assistant"
  logo={BrandLogo}
  logoAlt="Acme AI"
  assistantAvatar={BrandLogo}
  assistantAvatarFallback="AC"
/>

JazzmineChat props

Prop	Type	Required	Default	Description
client	IJazzmineClient	Yes	-	Backend client implementation.
userId	string	No	'user'	Used for list/search conversation calls when floating is false.
floating	boolean	No	false	Renders JazzmineChat as a floating widget instead of the full sidebar chat interface.
initialOpen	boolean	No	false	When floating=true, controls whether the floating panel starts open.
loadingText	string	No	'typing'	Loading indicator text in floating mode.
loadingVariant	'text-and-dots' \| 'dots-only'	No	'text-and-dots'	Visual style of the loading indicator in floating mode.
assistantName	string	No	Health response or 'AI Assistant'	Header/avatar assistant label.
logo	string	No	Built-in logo	Sidebar/widget branding image source.
logoAlt	string	No	Assistant name or 'AI Assistant'	Accessible alt text for the branding logo.
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.
placeholder	string	No	'Type your message...'	Input placeholder text.
className	string	No	''	Root class override.
defaultMessage	string	No	''	Rendered when conversation has no messages and is not loading.
onError	(error: Error) => void	No	-	Called for recoverable client-side errors.

Gotchas and notes

Set an explicit container height

The chat layout needs a sized parent. If the container has no height, the UI can collapse unexpectedly.

Assistant label behavior

If you do not pass assistantName, JazzmineChat may use the health response agent name, then fall back to AI Assistant.

Floating mode behavior

When floating is enabled, JazzmineChat omits the sidebar and conversation history UI, ignores userId, and creates a session-scoped anonymous ID likecustomer-{uuid4}.

Empty-state message timing

defaultMessage appears only when the conversation has no messages and the component is not in a loading state.