KBHelper Client - React Component Library

A React component library for integrating KBHelper chat functionality into your applications.

Installation

npm install kbhelper-client
# or
yarn add kbhelper-client

Usage

Basic Usage

import React from 'react';
import { KBHelperChat } from 'kbhelper-client';
import 'kbhelper-client/dist/style.css';

function MyApp() {
  return (
    <div>
      <h1>My Application</h1>
      <KBHelperChat />
    </div>
  );
}

export default MyApp;

With Custom Configuration

import React from 'react';
import { KBHelperChat, TanStackProvider, IChatConfig } from 'kbhelper-client';
import 'kbhelper-client/dist/style.css';

const customConfig: IChatConfig = {
  colors: {
    primary_bg: '#ffffff',
    primary_text: '#000000',
    theme_color: '#3b82f6',
    input_bg: '#f3f4f6',
    input_text: '#374151',
    sidebar_bg: '#f9fafb',
    sidebar_text: '#6b7280'
  },
  display_name: 'My Assistant',
  welcome_msg: 'Hello! How can I help you today?',
  conv_starter_01: 'What can you help me with?',
  conv_starter_02: 'Tell me about your features',
  conv_starter_03: 'How do I get started?',
  is_show_display_name: true,
  is_show_welcome_msg: true,
  is_show_conv_starter_01: true,
  is_show_conv_starter_02: true,
  is_show_conv_starter_03: true,
  input_placeholder: 'Type your message...'
};

function MyApp() {
  return (
    <TanStackProvider>
      <KBHelperChat 
        chatConfig={customConfig}
        className="my-custom-chat"
        style={{ height: '600px' }}
      />
    </TanStackProvider>
  );
}

export default MyApp;

Component Props

KBHelperChat

| Prop | Type | Default | Description | |------|------|---------|-------------| | chatConfig | IChatConfig | undefined | Custom chat configuration | | loading | boolean | undefined | Override loading state | | error | string \| null | undefined | Override error state | | className | string | undefined | Additional CSS classes | | style | React.CSSProperties | undefined | Inline styles |

TypeScript Support

This library includes full TypeScript support. Import types as needed:

import { IChatConfig, IMessageItem, IConversation } from 'kbhelper-client';

Peer Dependencies

This library requires the following peer dependencies:

• react ^18.3.1
• react-dom ^18.3.1

Make sure these are installed in your project.

Development

Building the Library

npm run build

Linting

npm run lint

License

UNLICENSED