Jazzmine

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.

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 */
        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>
  );
}

JazzmineChat props

Prop	Type	Required	Default	Description
client	IJazzmineClient	Yes	-	Backend client implementation.
userId	string	No	'user'	Used for list/search conversation calls.
assistantName	string	No	Health response or 'AI Assistant'	Header/avatar assistant label.
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.

Empty-state message timing

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