Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@sendbird/chat-ai-widget
Advanced tools
Changelog
[1.4.4] (April 25 2024)
Readme
NOTE: Please note that proper utilization through code build is available starting from the "AI Chatbot Pro" plan or higher of the Sendbird AI Chatbot pricing plan.
This is a Sendbird Chat AI Widget implemented on top of React UiKit.
Prepare Sendbird Application ID and Bot ID If you need the Sendbird Application ID and Bot ID, See How to get Application ID and Bot ID
Install Library
npm install @sendbird/chat-ai-widget
Add import ...
and <ChatAiWidget/>
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
/>
);
}
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.
<!-- Load React first and then, ReactDOM. Also, these two libs' version should be same -->
<script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<!-- Load chat-ai-widget script and set process.env to prevent it get undefined -->
<script>process = { env: { NODE_ENV: '' } }</script>
<script
crossorigin
src="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/index.umd.js"
></script>
<link href="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/style.css" rel="stylesheet" />
<!--Optional; to enable JSX syntax-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
...
<!-- div element for chat-ai-widget container -->
<div id="root"></div>
<!-- Initialize chat-ai-widget and render the widget component -->
<script type="text/babel">
const { ChatAiWidget } = window.ChatAiWidget
const App = () => {
return (
<ChatAiWidget
applicationId="AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67"
botId="khan-academy-bot"
/>
)
}
ReactDOM.createRoot(document.querySelector('#root')).render(<div><App/></div>);
</script>
npm install
npm run dev
applicationId
and botId
when running in local, modify the below two 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
https://sendbird.github.io/chat-ai-widget/
PDF
or txt
format and URL
. This data will serve as the Knowledge Base Source that AI Chatbot will use to generate responses.
Click on the Create Bot button to set up a new AI chatbot.
In the Bot Name field, enter Bot Name you want, and make sure to select a unique Bot ID(will be used to invite Bot when creating a new Chat Room).
For the Bot AI Engine, select OpenAI ChatGPT for this time.
Specify the Knowledge Base Source. There are three options:
None: This uses the basic OpenAI Model, and you can adjust the specific parameters to suit your needs.
File: In this option, you can select a PDF or txt file as the Knowledge Base Source.
URL: In this option, the contents of a specified URL will be automatically analyzed and used as the Knowledge Base Source.
Click on the Create button to create your AI Chatbot.
After your chatbot has been created, you can start testing conversations directly from the web interface.
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 customConstants = {
applicationId: 'AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67', // Your Sendbird application ID
botId: 'khan-academy-bot', // Your Sendbird bot ID
botNickName: 'Khan Academy Support Bot',
userNickName: 'User',
betaMark: false,
suggestedMessageContent: {
replyContents: [
{
title: 'Yes, it was helpful! 👍',
text: 'Thanks for your feedback! You can also build your own AI chatbot in Sendbird.',
buttonText: 'Try free trial',
link: 'https://dashboard.sendbird.com/auth/signup',
},
{
title: 'No, I need more help. 💬',
text: "I'm sorry, we couldn't help you. Let us know how we can improve by talking to one of our teammates.",
buttonText: 'Talk to an expert',
link: 'https://sendbird.com/contact-sales',
},
],
messageFilterList: [
'Can you please clarify?',
'How can I assist you',
'How can I help you',
'Can you clarify',
"That's not a question I can answer unfortunately",
'Try again',
"I couldn't find the answer to your question",
'Can you try again?',
'I apologize for any confusion',
"I'm sorry, I couldn't understand your question",
"That's not a valid question",
'Is there a specific question you have',
"I'm here to help you with any questions you have",
],
},
firstMessageData: [
{
data: [
{
suggested_replies: [
'What can I learn from Pre-K 8th grade?',
'Tell me about Math',
],
},
],
message: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!",
},
],
createGroupChannelParams: {
name: 'Khan Academy Support Bot',
coverUrl:
'https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?ix' +
'lib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
},
chatBottomContent: {
text: 'Sendbird AI ChatBot',
backgroundColor:
'linear-gradient(273.73deg, #4DCD90 -0.83%, #6210CC 48.04%, #6210CC 75.45%)',
},
messageBottomContent: {
text: 'AI-generated response powered by OpenAI',
infoIconText:
'This response is generated by AI and may lack complete accuracy.'
},
replacementTextList: [['the Text extracts', 'ChatBot Knowledge Base']],
enableSourceMessage: false,
enableEmojiFeedback: true,
enableMention: true,
enableMobileView: true,
autoOpen: false,
};
const App = () => {
return (
<ChatAiWidget
applicationId={customConstants.applicationId}
botId={customConstants.botId}
botNickName={customConstants.botNickName}
userNickName={customConstants.userNickName}
betaMark={customConstants.betaMark}
customBetaMarkText={customConstants.customBetaMarkText}
suggestedMessageContent={customConstants.suggestedMessageContent}
firstMessageData={customConstants.firstMessageData}
createGroupChannelParams={customConstants.createGroupChannelParams}
chatBottomContent={customConstants.chatBottomContent}
messageBottomContent={customConstants.messageBottomContent}
replacementTextList={customConstants.replacementTextList}
enableSourceMessage={customConstants.enableSourceMessage}
enableEmojiFeedback={customConstants.enableEmojiFeedback}
enableMention={customConstants.enableMention}
enableMobileView={customConstants.enableMobileView}
/>
);
};
export default App;
import { ChatAiWidget } from "@sendbird/chat-ai-widget";
import '@sendbird/chat-ai-widget/dist/style.css';
import { SessionHandler } from '@sendbird/chat'
// Replace below with the real one
const USER_ID = 'UserId';
/**
* To setup auth on your own API,
* You can also create your own custom session handler \w userId.
* More information can be found in
* https://sendbird.com/docs/chat/v3/javascript/guides/authentication
* Also, we recommend to memoize this configureSession function,
* before you pass to ChatAiWidget component.
* */
const issueSessionToken = async (userId, ...) => {
// build your own API request handler
};
const memoizedConfigureSession = useCallback(
(sdk) => {
const sessionHandler = new SessionHandler();
sessionHandler.onSessionTokenRequired = (resolve, reject) => {
console.warn('SessionHandler.onSessionTokenRequired()');
issueSessionToken(USER_ID)
.then(token => {
// curentUserInfo.accessToken = token;
resolve(token);
})
.catch(err => reject(err));
};
sessionHandler.onSessionRefreshed = () => {
console.warn('SessionHandler.onSessionRefreshed()');
};
sessionHandler.onSessionError = (err) => {
console.warn('SessionHandler.onSessionError()', err);
};
sessionHandler.onSessionClosed = () => {
console.warn('SessionHandler.onSessionClosed()');
};
console.warn(sessionHandler);
return sessionHandler;
},[]);
const customConfigs = {
// If instantConnect set to `true`, the SDK connection will be established right after mounting the Chat or ChatAiWidget component
instantConnect: true / false,
// `autoOpen` determines whether the chatbot widget automatically opens
// when the user opens the browser window.
// The default behavior is to open after a certain period,
// but setting this option to `true` will keep it open at all times.
autoOpen: true / false,
configureSession: memoizedConfigureSession,
// Available stringSet can be found at https://github.com/sendbird/sendbird-uikit-react/blob/main/src/ui/Label/stringSet.ts
stringSet: {{
MESSAGE_INPUT__PLACE_HOLDER: 'Type a message',
// ...
}}
customRefreshComponent: {
icon: 'Your SVG icon',
style: {
position: 'relative' as React.CSSProperties['position'],
right: 0,
},
width: '16px',
height: '16px',
onClick: () => { ... },
}
}
const customConstants = {
// Add other constant props like in the basic customization section above
}
const App = () => {
return (
<ChatAiWidget
/**
* userId & configureSession should be used together to create a group channel on the client side.
*/
userId={USER_ID}
configureSession={customConfigs.configureSession}
stringSet={customConfigs.stringSet}
customRefreshComponent={customConfigs.customRefreshComponent}
instantConnect={customConfigs.instantConnect}
autoOpen={customConfigs.autoOpen}
{...customConstants}
/>
);
};
export default App;
FAQs
Sendbird Chat AI Widget, Detailed documentation can be found at https://github.com/sendbird/chat-ai-widget#readme
The npm package @sendbird/chat-ai-widget receives a total of 627 weekly downloads. As such, @sendbird/chat-ai-widget popularity was classified as not popular.
We found that @sendbird/chat-ai-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.