JazzmineChat

JazzmineChat is the managed, batteries-included chat experience. Give it a client and it handles conversation state, history, search, and send/loading flows for you.

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.
• On send, JazzmineChat uses the same send flow so optimistic updates and error handling behave like the full interface.

Full working example

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}
        userId="user"
        assistantName="Jazzmine AI"
        placeholder="Ask anything..."
        defaultMessage="Welcome! Ask me anything to get started."
        onError={(error) => console.error('JazzmineChat error:', error)}
      />
    </div>
  );
}

Floating mode example

import { JazzmineChat } from '@jazzmine-ui/react';

export function App() {
  return (
    <JazzmineChat
      client={client}
      floating={true}
      initialOpen={true}
      defaultMessage="Welcome! Ask me anything."
      loadingText="typing"
      loadingVariant="text-and-dots"
    />
  );
}

Props

Gotchas and notes