Cannot Call createCustomMessage from actionProvider

[kb1flr]

Hi Fredrik,

I've been using this package with great success, but have run into a blocker. I have created a custtom message in config and it fires fine from the initial messages, but when I try to call it from my actionProvider, I get the createCustomMessage is not a function. Not quite sure where I lost the plot.

`import React from 'react';

const ActionProvider = ({ createChatBotMessage, setState, children, createCustomMessage }) => { const handleDiabetes = () => { const botMessage = createChatBotMessage('Diabetes Benefits are...');

    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, botMessage],
    }));
};
const handleDental = () => {
    const botMessage = createChatBotMessage('Dental <br>Benefits are...');

    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, botMessage],
    }));
};
const handleCustom = () => {
    const botMessage = createCustomMessage('Test', 'chatResponse');

    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, botMessage],
    }));
};
return (
<div>
  {React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      actions: {handleDiabetes, handleDental, handleCustom},
    });
  })}
</div>

); };

export default ActionProvider;`

[goldenaman-dev]

i am facing this error Class constructor ActionProvider cannot be invoked without 'new' with create-react-app

[greendinosaur]

I was able to get the custom message working in my ActionProvider. The way I did it was to firstly write a new component to represent the custom message and save this in a new file

const QuotaMessage = () => {
  return (
    <div className="font-bold">
      This chat is getting too long. 
    </div>
  );
};

export default QuotaMessage;

I imported this class into the config component and then added the following to the config

  customMessages: {
    quota: (props) => <QuotaMessage {...props} />,
  },

Then in my actionprovider class, I imported the createCustomMessage class from the react-chatbot-kit

import { createCustomMessage } from "react-chatbot-kit";

I was then able to amend one of the methods in the action provider class to use this:

    let newMessages = [];

      const customMessage = createCustomMessage(
        "some message.",
        "quota"
      );
      newMessages.push(customMessage);
    }

    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, ...newMessages],
    }));

[sean-cedar]

Thanks @greendinosaur, this worked for me for creating custom messages from the actionprovider!

[sjabiulla]

Is there a way I can display a custom dynamic message? My message is determined by a API call that I'm doing in ActionProvider. So, I want to display the message dynamically in CustomMessage.

Can this be achieved?