simpli-ai-assistant-chat

Reusable React component for embedding a Simpli AI assistant chat panel.

Installation

npm install simpli-ai-assistant-chat-ui

Usage

Import the component and use it in your React app:

import { SimpliAIAssistantChat } from 'simpli-ai-assistant-chat-ui';
import 'simpli-ai-assistant-chat-ui/dist/index.css';

function App() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  return (
    <SimpliAIAssistantChat
      type="policy" // or "knowledge"
      userRole="client" // or "broker"
      quickReplies={[]} // Array of quick reply objects
      messages={messages}
      onSendMessage={handleSendMessage}
      onEditMessage={handleEditMessage}
      onRetryMessage={handleRetryMessage}
      onBookmarkMessage={handleBookmarkMessage}
      onFeedbackMessage={handleFeedbackMessage}
      isLoading={isLoading}
    />
  );
}

Props

| Prop | Type | Description | |---------------------|-------------|----------------------------------------------| | type | string | Chat type, e.g., "policy" or "knowledge" | | userRole | string | User role, e.g., "client" or "broker" | | quickReplies | array | Array of quick reply objects | | messages | array | Array of message objects | | onSendMessage | function | Handler for sending a message | | onEditMessage | function | Handler for editing a message | | onRetryMessage | function | Handler for retrying a message | | onBookmarkMessage | function | Handler for bookmarking a message | | onFeedbackMessage | function | Handler for feedback on a message | | isLoading | boolean | Loading state |

Note: You may need to provide your own state management and handler functions as shown in the example.