• By default the UI response is rendered without bot icons or any meta murcup by using BotMessageWrapper that wraps the ui response will get the job done.
import { BotMessageWrapper } from "@openchatai/widget";
  • Use the ComponentProps<"YOUR_DATA_TYPE_RETURNED_FROM_THE_API"> generic type to define props for the custom component that will be used to render the UI response. This extends the BotMessageType to include the data type returned from the API.

type WeatherInfo = {
  data: {
    temperature: string;
    humidity: string;
  };
};

type Props = ComponentProps<WeatherInfo>;

const WeatherInfo: React.FC<Props> = ({ data }) => {
  return (
      <div>
        <h3>Weather Info</h3>
        <p>Temperature: {data.temperature}</p>
        <p>Humidity: {data.humidity}</p>
      </div>
  );
};
  • Other helper Hooks
    • useLang to get the current language of the widget (the same as language option defined during the initilization of the widget).
    • useWidgetState to get the current state of the widget (open or close), you can even close the widget.
    • useSendMessage to trigger a message from the widget.
import {useSendMessage} from "@openchatai/widget";

const WeatherInfo: React.FC<Props> = ({ data }) => {
const {send} = useSendMessage();
  return (
      <div>
        <h3>Weather Info</h3>
        <p>Temperature: {data.temperature}</p>
        <p>Humidity: {data.humidity}</p>
      </div>
  );
};
Responding with UIHuman handoff