Chatbot

AI chatbot interface with customizable rules and responses for interactive user engagement.

Import

import { Chatbot } from '@akitectio/aki-ui'

Basic Usage

Example Chatbot Preview:

AI Assistant

Hello! How can I help you today?
Tell me about your features
I can help you with various tasks and answer your questions!
<Chatbot 
  greeting="Hello! How can I help?" 
  title="Support Bot" 
/>

With Custom Rules

const customRules = [
  {
    keywords: ['hello', 'hi', 'hey'],
    responses: ['Hello! How can I help you?', 'Hi there! What can I do for you?']
  },
  {
    keywords: ['price', 'cost', 'pricing'],
    responses: ['Our pricing starts at $9/month. Would you like to see our plans?']
  },
  {
    keywords: ['support', 'help'],
    responses: ['I am here to help! What do you need assistance with?']
  }
]

<Chatbot 
  rules={customRules}
  greeting="Welcome to our support chat!"
  title="Customer Support"
/>

Minimized State

Minimized Chatbot Preview:

💬
<Chatbot 
  minimized 
  greeting="Click to start chatting!"
  title="Help Assistant"
/>

API Reference

PropTypeDefaultDescription
rulesChatbotRule[]-Chatbot conversation rules
greetingstring-Initial greeting message
titlestring"AI Assistant"Chat window title
minimizedbooleanfalseStart in minimized state

ChatbotRule Interface

interface ChatbotRule {
  keywords: string[]       // Keywords to match in user input
  responses: string[]      // Possible responses to choose from
  exact?: boolean         // Whether to match keywords exactly
  caseSensitive?: boolean // Whether matching is case sensitive
}

Accessibility

Accessibility Features

  • Keyboard Navigation: Full keyboard support for all interactive elements
  • Screen Reader Support: Proper ARIA labels and roles for assistive technologies
  • Focus Management: Clear focus indicators and logical tab order