chatbot_quickstart.js

// MessageParser starter code
class MessageParser {
  constructor(actionProvider, state) {
    this.actionProvider = actionProvider;
    this.state = state;
  }

  parse(message) {
    console.log(message)
  }
}

export default MessageParser;

// ActionProvider starter code
class ActionProvider {
   constructor(
    createChatBotMessage,
    setStateFunc,
    createClientMessage,
    stateRef,
    createCustomMessage,
    ...rest
  ) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
    this.createClientMessage = createClientMessage;
    this.stateRef = stateRef;
    this.createCustomMessage = createCustomMessage;
  }
}

export default ActionProvider;

// Config starter code
import { createChatBotMessage } from "react-chatbot-kit";

const config = {
  initialMessages: [createChatBotMessage(`Hello world`)]
}

export default config

@pinki-mandal Thanks for providing Style

@ManishaSwain8 thanks for the reference doc !

Hi @FredrikOseberg - great work with the chatbot component. Have a question: can the chatbot component pass data back to its parent component, or raise an event when a new user message is added to the component?

Hey @FredrikOseberg - great package. I am facing one issue, I created a widget to show the links in each chatbot response but whenever I am generating a new response the previous all the widget responses in the UI are getting updated with the new links.

How can I resolve this

Hi @FredrikOseberg How to convert the Action Provider class into a Function Components

HI @FredrikOseberg , Anyway to parse message to show proper formatting. Like bullet points, new lines, paragraphs.
Example: the response from bot is :
Onboarding a client involves several steps and checks. Here are the detailed steps:\n\n1. All clients are required to be onboarded before any credit facilities are made available for utilization. Know Your Customer (KYC) requirements must be satisfied in accordance to requirements of the lending entity that the client is being onboarded to. Such requirements may vary depending on the product, client profile, and country-specific regulations.\n\n2. Check for the products that the client has been onboarded for. T.\n\n3. If it involves a core trade product onboarding .\n\n4. Obtain KYC confirmation email and safe keep in CPD shared drive. Confirmation from Business, RP Team or Trade Sales are acceptable.\n\n5. Download the latest template made available in CPD shared point.

instead it should be like this :
Onboarding a client involves several steps and checks. Here are the detailed steps:

1. All clients are required to be onboarded before any credit facilities are made available for utilization. Know Your Customer (KYC) requirements must be satisfied in accordance to requirements of the lending entity that the client is being onboarded to. Such requirements may vary depending on the product, client profile, and country-specific regulations.
2. Check for the products that the client has been onboarded for.
3. If it involves a core trade product onboarding.
4. Download the latest template made available in CPD shared point.

@Iymanjpmc
The following css should give nicer output from the LLM.

.react-chatbot-kit-chat-bot-message {
    white-space: pre-wrap;
}