react-chatbot-client

Multi-purpose chatbot client for react.

import 'react';

import { createRoot } from 'react-dom/client';

import Chat from './components/Chat';
import { postChatFeedback } from './demo/postChatFeedback';
import { postQuery } from './demo/postQuery';
import type { Message } from './models';

const container = document.getElementById('app');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript

const defaultMessages: Message[] = [
  {
    message:
      "Hi! I'm *Taobot*, ready to help with anything regarding Taobao, Weidian or 1688. How can I help?",
    type: 'welcomeMessage',
  },
  {
    message: 'What is Taobot?',
    type: 'followupMessage',
  },
  {
    message: "What's new in this new version of Taobot?",
    type: 'followupMessage',
  },
  {
    message:
      'Taobot, what is all of this? What are Taobao, Weidian, 1688 and so on?',
    type: 'followupMessage',
  },
];
root.render(
  <div style={{ width: '100%', height: '90vh', fontSize: '16px' }}>
    <Chat
      defaultMessages={defaultMessages}
      fnQuery={postQuery}
      fnPostChatFeedback={postChatFeedback}
      icons={{
        api: 'https://taobot.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftaobot_192x192.bfd999b9.png&w=128&q=75',
        user: 'https://taobot.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftaobot_192x192.bfd999b9.png&w=128&q=75',
      }}
      historyLen={4}
      useSessionStorage
    />
  </div>
);