how can use "useChatbot()" hook
matiyem opened this issue · comments
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
Did you ever figure out a solution for this?
Did you ever figure out a solution for this?
not yet.do you have any idea?