react-chatbot-kit
react-chatbot-kit copied to clipboard
Published
20 hours ago •
FredrikOseberg
FredrikOseberg
how can use "useChatbot()" hook
i want use "useChatbot()" but i get error configurationError: "I think you forgot to feed me some props. Did you remember to pass a config, a messageparser and an actionprovider?" "
how can i solve my issue?"useChatbot" is ok?
import Chatbot, {createClientMessage, useChatbot, } from "react-chatbot-kit";
export default function App() {
const [state, dispatch] = useReducer(userReducer, {});
const {setState} = useChatbot({config, ActionProvider, MessageParser});
console.debug('x', x);
useEffect(() => {
debugger;
const botMessage = createCustomMessage('hello', "bot", {
widget: "pardakhtGhest"});
}, []);
return (
<div className="App">
<UserContext.Provider value={userAction(state, dispatch)}>
<header className="App-header">
<Chatbot className="chat-bot"
config={config}
messageParser={MessageParser}
actionProvider={ActionProvider}
placeholderText='Input placeholder'
/>
</header>
</UserContext.Provider>
</div>
);
}
and my ActionProvider is same this
function ActionProvider({createChatBotMessage, setState, children, ...props}) {
const {accountNumber, amountHavaleMellati,destinationAccountNumber,count,flag} = useContext(UserContext);
const {accountData,destinationAccountNumberData,amountHavaleMellatiData,countData} = useContext(UserContext);
useEffect(() => {
count({count: 1});
debugger;
if (countData===1){
const message=createChatBotMessage("hiiiiiiiiiii", {
widget: "pardakhtGhest",
})
updateChatbotState(message);
count({count: 2});
}
}, []);
const setValueIntoContext = (text, value) => {
debugger;
switch (text) {
case "account": {
accountNumber({account: value});
}
case "destinationAccountNumber": {
destinationAccountNumber({destinationAccountNumber: value});
}
case "amountHavaleMellati": {
amountHavaleMellati({amountHavaleMellati: value});
}
default:
return "";
}
}
const getValueFromContext = (text) => {
switch (text) {
case "accountData": {
return accountData
}
case "destinationAccountNumberData": {
return destinationAccountNumberData;
}
case "amountHavaleMellatiData": {
return amountHavaleMellatiData;
}
default:
return "";
}
}
const createMessage = (message, widget) => {
const outPut = createChatBotMessage(
message,
{
widget: widget,
}
);
return outPut;
}
const handleHello = () => {
const botMessage = createChatBotMessage('Hello. Nice to meet you.');
setState((prev) => ({...prev, messages: [...prev.messages, botMessage],}));
};
const greet = () => {
const greetingMessage = createChatBotMessage("Hi, friend.");
updateChatbotState(greetingMessage);
}
const updateChatbotState = (message) => {
// NOTICE: This function is set in the constructor, and is passed in from the top level Chatbot component. The setState function here actually manipulates the top level state of the Chatbot, so it's important that we make sure that we preserve the previous state.
setState((prevState) => ({
...prevState,
messages: [...prevState.messages, message],
}));
}
const removeAllMessageFromChatBot = () => {
setState(() => ({
messages: [""],
}));
}
// Put the handleHello function in the actions object to pass to the MessageParser
return (
<div>
{children && React.Children.map(children, (child) => {
return React.cloneElement(child, {
actions: {
handleHello,
greet,
removeAllMessageFromChatBot,
updateChatbotState,
chooseAccount: (e, method) => chooseAccount(e, method),
createMessage: (text, widget) => createMessage(text, widget),
confirmHandle: (method) => confirmHandle(method),
cancelHandle: (method) => cancelHandle(method),
submitConfirmOption: (method) => submitConfirmOption(method),
startHavaleMellati: (method) => startHavaleMellati(method),
getDestinationAccountNumber: (method) => getDestinationAccountNumber(method),
useValueTextBox: (e, method) => useValueTextBox(e, method),
// destinationAccountNumber: () => destinationAccountNumber(),
chooseAccountHavaleMellati: (e, method) => chooseAccountHavaleMellati(e, method),
setValueIntoContext: (text, e) => setValueIntoContext(text, e),
useValueTextBoxAmountHavale: (e, method) => useValueTextBoxAmountHavale(e, method),
amountHavaleMelati: (e, method) => amountHavaleMelati(e, method),
confirmHavaleMelati: (method) => confirmHavaleMelati(method),
submitHavaleMelati: (method) => submitHavaleMelati(method),
getValueFromContext: (txt) => getValueFromContext(txt),
},
});
})}
</div>);
};
export default ActionProvider
and my config.js
const config = {
botName: "LearningBot",
initialMessages: [
// createChatBotMessage("موعد پرداخت قسط شما فرارسیده آیا مایل به پرداخت میباشد؟", {
// widget: "pardakhtGhest",
// }),
],
customStyles: {
botMessageBox: {
backgroundColor: "#376B7E",
},
chatButton: {
backgroundColor: "#376B7E",
},
},
widgets: [
{
widgetName: "pardakhtGhest",
widgetFunc: (props) => {
return <LearningOptions {...props} />
},
},
{
widgetName: "chooseAccountNumber",
widgetFunc: (props) => {
return <LinkList {...props} />
},
},
{
widgetName: "confirm",
widgetFunc: (props) => <ConfirmList {...props} />,
},
{
widgetName: "ChooseAccountHavaleMellati",
widgetFunc: (props) => <ChooseAccountHavaleMellati {...props} />,
},
{
widgetName: "getAccountNumberHavaleMellati",
widgetFunc: (props) => <DestinationAccountNumber {...props} />,
},
{
widgetName: "amountHavaleMellati",
widgetFunc: (props) => <AmountHavale {...props} />,
},
{
widgetName: "confirmHavaleMellati",
widgetFunc: (props) => <ConfirmHavaleMellati {...props} />,
},
],
};
and my MessageParser is
function MessageParser({children, actions,...props}){
const parse = (message) => {
const lowerCaseMessage = message.toLowerCase();
if (lowerCaseMessage.includes("حواله ملتی")) {
debugger;
actions.startHavaleMellati(actions);
}
if (lowerCaseMessage.includes("javascript")) {
actions.confirmHandle();
}
// props.set
};
return (
<div>
{React.Children.map(children, (child) => {
return React.cloneElement(child, {
parse: parse,
actions,
props
});
})}
</div>
);
};
export default MessageParser;
"react": "^18.2.0",
"react-chatbot-kit": "^2.1.2",
my cod work corectly but i cant use "useChatbot()" hook
