Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sendbird/chat-ai-widget

Package Overview
Dependencies
Maintainers
0
Versions
138
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sendbird/chat-ai-widget

Sendbird Chat AI Widget, Detailed documentation can be found at https://github.com/sendbird/chat-ai-widget#readme

  • 1.9.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

last-commit repo-top-language

Developed with the software and tools below.

React TypeScript JavaScript Vite
Prettier HTML5 styledcomponents ESLint GitHub%20Actions


What is this for?

This is a Sendbird Chat AI Widget implemented on top of React UiKit.

NOTE: Proper utilization through code build is available starting from the "AI Chatbot Pro" plan or higher of the Sendbird AI Chatbot pricing plan.

Demo

How to use

  1. Prepare Sendbird Application ID and Bot ID. Here's how you can get them:

    • Application ID: If you don't have an account, sign up on the Sendbird Dashboard and create a new application. sendbird-app-id

    • Bot ID: If you don't have a bot, create one on the Sendbird Dashboard under AI Chatbot > Manage Bots > Create Bot. sendbird-ai-chatbot-id

    • You can also find your application ID and bot ID in the Sendbird Dashboard under AI Chatbot > Manage Bots > Bot Settings > Add to My Website.

  2. Install the library:

    # With npm
    npm install @sendbird/chat-ai-widget
    # Or if you're using yarn
    yarn add @sendbird/chat-ai-widget
    
  3. Add the import statement and component to your code:

     import { ChatAiWidget } from "@sendbird/chat-ai-widget";
     import "@sendbird/chat-ai-widget/dist/style.css";
    
     const App = () => {
       return (
         <ChatAiWidget
           applicationId="AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67" // Your Sendbird Application ID
           botId="khan-academy-bot" // Your Bot ID
         />
       );
     };
    
     export default App;
    

    Not using React in your environment? You can also load this Chat AI Widget component from an HTML file on your website. Please refer to js-example.html for an example.

Run locally

yarn install:deps
yarn dev
  • If you want to change applicationId and botId when running locally, modify the following variables in .env:
    # Vite prefix is required for Vite to load the env variables
    # Plz modify below two env variables on your needs
    VITE_CHAT_WIDGET_APP_ID=AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67
    VITE_CHAT_WIDGET_BOT_ID=khan-academy-bot
    

Customization

You can customize the UI of the ChatBot by using the ChatAiWidget component. The following are the props that can be used to customize the UI.

import { ChatAiWidget } from "@sendbird/chat-ai-widget";
import '@sendbird/chat-ai-widget/dist/style.css';

const App = () => {
  return (
    <ChatAiWidget
      applicationId="Your Sendbird application ID"
      botId="Your Sendbird bot ID"
      // more available props can be found in the next section
    />
  );
};

export default App;

Available props

Prop NameTypeRequiredDefault ValueDescription
applicationIdstringYesN/AYour Sendbird application ID
botIdstringYesN/AYour Sendbird bot ID
userNickNamestringNoN/AThe nickname of the user
enableEmojiFeedbackbooleanNotrueEnables emoji feedback functionality.
enableMentionbooleanNotrueEnables mention functionality.
deviceType'desktop' | 'mobile'NoN/ADevice type to be used in the widget
stringSet{ [key: string]: string }NoN/ACustomizable string set. Available string sets can be found here.
customRefreshComponent{ icon: string, style: React.CSSProperties, width: string, height: string, onClick: () => void }NoN/ACustomizable refresh component. You can set properties such as icon, style, width, height, and onClick.
userIdstringNoN/AUser ID to be used in the widget connect. Must be used with sessionToken and configureSession. The example usage can be found here.
sessionTokenstringNoN/ASession token to be used in the widget connect. Must be used with userId and configureSession. The example usage can be found here.
configureSession() => SessionHandlerNoN/ASession configuration function. Must be used with userId and sessionToken. The example usage can be found here.
autoOpenbooleanNoN/ADetermines whether the chatbot widget automatically opens when the browser window is opened. This property is being ignored in mobile view.
enableResetHistoryOnConnectbooleanNofalseDetermines whether the chatbot widget history is reset when the user connects.
messageInputControls.blockWhileBotRespondingboolean | numberNoN/AAllows to control enabled/disabled state of the message input for waiting for the bot's reply mesage. If number value is given, a timer will be set to force unblock the message input.
dateLocaleLocaleNoenUSLocale value to be applied to string values of message timestamp and date separator. Locale values must be imported from date-fns.
enableHideWidgetForDeactivatedUserbooleanNofalseDetermines whether the chatbot widget is hidden when the user is deactivated.
enableWidgetExpandButtonbooleanNofalseDetermines whether the expand button is displayed in the chatbot widget.

For internal contributors

FAQs

Package last updated on 27 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc