@datasqrl/acorn-chatbot
v1.4.2
Published
This package is part of the datasqrl website. It is responsible for displaying the Acorn Chatbot UI.
Downloads
22
Keywords
Readme
Acorn Chatbot
A chatbot for the default acorn agent implementation that's used by the cloud-frontend and the Acorn docker image.
Usage
Plain JS
Load script and css styles to your file. Then use AcornChatbot.create method to initialize a graph in selected DOM node.
<head>
<title>DataSQRL Acorn ChatBot</title>
<script src="https://unpkg.com/@datasqrl/acorn-chatbot/dist/umd/index.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@datasqrl/acorn-chatbot/dist/index.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/@datasqrl/acorn-chatbot/dist/data-grid.css"
/>
</head>
<body>
<div id="chatbot"></div>
<script>
// Fill user info
const user = {
userid: "",
username: "",
orgid: "",
orgname: "",
projectid: "",
deploymentid: "",
};
const config = {
history: {
initialView: {
logoUrl: "./bot.svg",
},
assistant: {
imageUrl: "./bot.svg",
},
},
messageInput: {
onPostMessage: async (userMessageText) => {
const res = await fetch("https://example.com/message", {
method: "POST",
body: JSON.stringify({
content: userMessageText,
...user,
}),
});
const data = await res.json();
const responseMessage = {
type: "chatbotTextMessage",
content: data.content,
};
if (data.clientFunction) {
// Test if response message contains Chart
if (data.clientFunction.name === "data_visualization") {
responseMessage.type = "chatbotChartMessage";
responseMessage.chart =
AcornChatbot.defaultDataTransformers.dataVisualization(
data.clientFunction.arguments,
);
} else {
throw new Error(
"Unrecognized function call: " + data.clientFunction.name,
);
}
}
return responseMessage;
},
},
auth: {
enabled: false,
user: {
imageUrl: "./user.svg",
},
},
};
const chatbot = AcornChatbot.create(
document.getElementById("chatbot"),
config,
);
</script>
</body>React
Install @datasqrl/acorn-chatbot package and render <Chatbot /> with config passed as props.
import { Chatbot } from '@datasqrl/acorn-chatbot';
// You can use the same config object as in example above
const config = {};
return <Chatbot {...config} />;Data format
The config object presented in usage examples may contain the following properties (but none of them are required):
auth
enabled?: boolean;- Should user see login form after Chatbot initialization.trueby default.onAuthentication?: (userId: string) => MaybePromise<ChatbotUser | undefined>- Triggers callback on form submission. You can throwErrorwith amessagefield to abort form submission and display error to end user. When user object is returned, chatbot config is automatically updated with this user.user?: ChatbotUser;- Currently authenticated userform.title?: string;- Form title.Log in with User IDby default.form.submitButton.text: string;- Text of the Submit button.Loginby default.form.submitButton.text: inProgressText;- Text of the Submit button displayed whileonAuthenticationfunction is executing.Login...by default.form.field.label- User Id field label. Hidden by default.form.field.placeholder- Placeholder for the input field.User Idby default.
history
initialMessages?: Message[];- Set messages initially displayed to the user instead of anInitialViewcomponent.persistMessageHistory.location?: "localStorage" | "sessionStorage";- Saves history in session or local storage. the "Clear History" feature should be configured when turned on.persistMessageHistory.storageKey?: string- The key used to save and access data in selected storage.acornChatbotby default.persistMessageHistory.clearHistoryButton.enabled?: boolean- Displays the "Clear messages" button on UI.trueby default.persistMessageHistory.clearHistoryButton.text?: string- Text the "Clear messages" button.Clear messagesby default.
scrollToBottom
enabled?: boolean;- Display "Scroll to bottom" button when message history is scrolled to the top.trueby default.text?: string;- Text displayed on a button.↓by default.title?: string;- Title text displayed on hover.Scroll to bottomby default.
messageInput
onPostMessage?: (content: string, user: ChatbotUser | null) => MaybePromise<Message>;- Handle process of submitting user message to the backend and receiving a response message. You can throwErrorwith amessagefield to abort form submission and display error message to end user. When response message object is returned it is automatically added to the end of the history.form.submitButton.show- Should Message submit button be displayed.falseby default.form.submitButton.text- Text of the Submit button.form.submitButton.inProgressText- Text of the Submit button displayed whileonAuthenticationfunction is executing.form.field.label- Input field label. Hidden by default.form.field.placeholder- Placeholder for the input field.Message your Assistantby default.form.field.label- Should textarea height be automatically adjusted according to the content.trueby default.
suggestedMessages
enabled?: boolean;- Display suggested button when message history is scrolled to the top.trueby default.onFetchSuggested?: () => MaybePromise<SuggestedMessage[]>;- When this function is passed, it will be executed on a chat mount. Returns array of suggested messages to be shown to the user.initialMessages?: SuggestedMessage[];- Set suggested messages initially displayed to the user instead of an InitialView component.