### Render Chatbot Component in React

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Demonstrates how to import and render the main Chatbot component from the 'react-chatbot-kit' library. It requires 'config', 'messageParser', and 'actionProvider' as props. This example also includes a button to toggle the chatbot's visibility.

```jsx
import React, { useState } from "react";
import Chatbot from "react-chatbot-kit";
import config from "./config";
import MessageParser from "./MessageParser";
import ActionProvider from "./ActionProvider";

function App() {
  const [showChatbot, toggleChatbot] = useState(true);

  return (
    <div className="App">
      {showChatbot && (
        <Chatbot
          config={config}
          messageParser={MessageParser}
          actionProvider={ActionProvider}
        />
      )}
      <button onClick={() => toggleChatbot((prev) => !prev)}>
        Toggle Chatbot
      </button>
    </div>
  );
}

export default App;

```

--------------------------------

### Define Chatbot Configuration Object

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Illustrates the structure of the configuration object used to customize the chatbot. Key properties include 'botName', 'initialMessages', 'customStyles', 'state', 'customComponents', and 'widgets'. The 'initialMessages' are crucial for setting the chatbot's starting dialogue.

```javascript
import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";
import Overview from "./widgets/Overview/Overview";
import CustomBotAvatar from "./components/CustomBotAvatar";

const botName = "DocsBot";

const config = {
  botName: botName,
  lang: "en",
  customStyles: {
    botMessageBox: {
      backgroundColor: "#376B7E",
    },
    chatButton: {
      backgroundColor: "#5ccc9d",
    },
  },
  initialMessages: [
    createChatBotMessage(`Hi I'm ${botName}. I'm here to help you. לקראת`),
    createChatBotMessage(
      "Here's a quick overview of what I can do.",
      {
        withAvatar: false,
        delay: 500,
        widget: "overview",
      }
    ),
  ],
  state: {
    gist: "",
    selectedOption: null,
    userData: {},
  },
  customComponents: {
    botAvatar: (props) => <CustomBotAvatar {...props} />,
  },
  widgets: [
    {
      widgetName: "overview",
      widgetFunc: (props) => <Overview {...props} />,
      mapStateToProps: ["gist", "selectedOption"],
    },
  ],
};

export default config;

```

--------------------------------

### Configure Chatbot Widgets in React

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Register custom widgets in the chatbot configuration. Widgets require a name, a function component, and can optionally define mapStateToProps for state access. This setup allows for modular and dynamic chatbot responses.

```javascript
import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";
import AirportSelector from "./widgets/AirportSelector/AirportSelector";
import FlightList from "./widgets/FlightList/FlightList";
import GeneralOptions from "./widgets/GeneralOptions/GeneralOptions";

const config = {
  botName: "SkyBot",
  initialMessages: [
    createChatBotMessage("Hi! Which airport are you looking for?", {
      widget: "airportSelector",
      delay: 500,
    }),
  ],
  state: {
    selectedAirport: { iata: "OSL", nameCompact: "Oslo" },
    flightType: "",
    selectedFlightId: "",
  },
  widgets: [
    {
      widgetName: "airportSelector",
      widgetFunc: (props) => <AirportSelector {...props} />,
      mapStateToProps: ["selectedAirport", "messages"],
    },
    {
      widgetName: "options",
      widgetFunc: (props) => <GeneralOptions {...props} />,
    },
    {
      widgetName: "flightList",
      widgetFunc: (props) => <FlightList {...props} />,
      mapStateToProps: ["flightType", "selectedAirport"],
    },
  ],
};

export default config;
```

--------------------------------

### Implement Options Widget Pattern in React Chatbot

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Create interactive option buttons within a widget that trigger action provider methods when clicked. This pattern facilitates guided conversations by presenting users with clear choices.

```jsx
import React from "react";
import "./Options.css";

const GeneralOptions = ({ actionProvider }) => {
  const options = [
    {
      text: "Flights",
      handler: () => actionProvider.handleFlightsChoice(),
      id: 1,
    },
    {
      text: "Parking",
      handler: () => actionProvider.handleParkingOptions(),
      id: 2,
    },
    {
      text: "Lost Luggage",
      handler: () => actionProvider.handleLostLuggage(),
      id: 3,
    },
    {
      text: "Contact Info",
      handler: () => actionProvider.handleContactInfo(),
      id: 4,
    },
  ];

  return (
    <div className="options-container">
      {options.map((option) => (
        <button
          key={option.id}
          onClick={option.handler}
          className="option-button"
        >
          {option.text}
        </button>
      ))}
    </div>
  );
};

export default GeneralOptions;
```

--------------------------------

### Implement MessageParser Class Logic

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Shows how to create a MessageParser class to process user input and route it to the appropriate actions. The 'parse' method uses conditional logic and pattern matching to determine the user's intent, including specific keywords and a flight ID pattern.

```javascript
class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse = (message) => {
    const lowerCase = message.toLowerCase();

    if (
      lowerCase.includes("messageparser") ||
      lowerCase.includes("parse") ||
      lowerCase.includes("parser")
    ) {
      return this.actionProvider.handleMessageParserDocs();
    }

    if (lowerCase.includes("action") || lowerCase.includes("actionprovider")) {
      return this.actionProvider.handleActionProviderDocs();
    }

    if (lowerCase.includes("config")) {
      return this.actionProvider.handleConfigDocs();
    }

    if (lowerCase.includes("widget")) {
      return this.actionProvider.handleWidgetDocs();
    }

    // Check for flight ID pattern (e.g., SK1423)
    if (this.containsFlightId(message)) {
      const id = this.containsFlightId(message);
      return this.actionProvider.handleFlightIdMatch(id);
    }

    return this.actionProvider.handleDefault();
  };

  containsFlightId = (message) => {
    const regexp = /[A-Z]{2,}[0-9]{2,}/gim;
    return message.match(regexp);
  };
}

export default MessageParser;

```

--------------------------------

### ActionProvider Class for Bot Responses (JavaScript)

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

The ActionProvider class manages chatbot responses and state. It utilizes `createChatBotMessage` to generate messages and `setStateFunc` to update the chatbot's state. This class is essential for defining the bot's conversational flow.

```javascript
class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleMessageParserDocs = () => {
    const message = this.createChatBotMessage(
      "The message parser controls how the bot reads input and decides which action to invoke.",
      { widget: "messageParser", withAvatar: true }
    );
    this.addMessageToBotState(message);
  };

  handleActionProviderDocs = () => {
    const messages = [
      this.createChatBotMessage(
        "The action provider defines the bot's response after the message is parsed.",
        { widget: "actionProviderDocs", withAvatar: true }
      ),
    ];
    this.addMessageToBotState(messages);
  };

  handleConfigDocs = () => {
    const message = this.createChatBotMessage(
      "The config controls every configurable aspect of the chatbot.",
      { widget: "config", withAvatar: true }
    );
    this.addMessageToBotState(message);
  };

  handleDefault = () => {
    const message = this.createChatBotMessage(
      "How can I help? Here is the overview.",
      { withAvatar: true, widget: "overview" }
    );
    this.addMessageToBotState(message);
  };

  addMessageToBotState = (messages, newState) => {
    if (Array.isArray(messages)) {
      this.setState((state) => ({
        ...state,
        ...newState,
        messages: [...state.messages, ...messages],
      }));
    } else {
      this.setState((state) => ({
        ...state,
        ...newState,
        messages: [...state.messages, messages],
      }));
    }
  };
}

export default ActionProvider;
```

--------------------------------

### Fetch Async Data in React Chatbot Widgets

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Fetch external data asynchronously within a widget using `useEffect` and update the chatbot's state. Ensure content visibility after updates by calling `scrollIntoView`. This pattern is useful for dynamic content loading.

```jsx
import React, { useState, useEffect } from "react";

const FlightList = ({ flightType, selectedAirport, scrollIntoView }) => {
  const [flights, setFlights] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getFlights = async () => {
      try {
        const response = await fetch(
          `https://api.example.com/flights?iata=${selectedAirport.iata}&direction=${flightType}`
        );
        const data = await response.json();
        const filteredFlights = data.flights.filter(
          (item) => item.Status === null
        );
        setFlights(filteredFlights);
      } catch (error) {
        console.error("Error fetching flights:", error);
      } finally {
        setLoading(false);
      }
    };
    getFlights();
  }, [selectedAirport.iata, flightType]);

  useEffect(() => {
    scrollIntoView();
  });

  if (loading) return <div>Loading flights...</div>;

  const flightSlice = flights.slice(0, 5);

  return (
    <div className="flight-list-container">
      <div className="flight-header">
        <span>Flight ID</span>
        <span>{flightType === "departure" ? "To" : "From"}</span>
        <span>Time</span>
        <span>Gate</span>
      </div>
      <ul className="flight-list">
        {flightSlice.map((flight) => (
          <li key={flight.FlightId} className="flight-list-item">
            <span>{flight.FlightId}</span>
            <span>{flight.AirportToOrFrom}</span>
            <span>{flight.ScheduledTime}</span>
            <span>{flight.Gate}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FlightList;
```

--------------------------------

### Create Custom Bot Avatar Component in React

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

Replace the default bot avatar with a custom component by defining it in the chatbot configuration. The custom component receives standard props from the chatbot, allowing for complete visual customization.

```jsx
import React from "react";
import { ReactComponent as PlaneIcon } from "../icons/plane-alt.svg";

const FlightBotAvatar = () => {
  return (
    <div className="react-chatbot-kit-chat-bot-avatar">
      <div
        className="react-chatbot-kit-chat-bot-avatar-container"
        style={{ background: "#1e88e5" }}
      >
        <PlaneIcon className="react-chatbot-kit-chat-bot-avatar-icon" />
      </div>
    </div>
  );
};

export default FlightBotAvatar;

// Register in config
const config = {
  botName: "SkyBot",
  customComponents: {
    botAvatar: (props) => <FlightBotAvatar {...props} />,
  },
  // ... rest of config
};
```

--------------------------------

### createChatBotMessage Function for Message Creation (JavaScript)

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

The `createChatBotMessage` function is a utility for generating formatted message objects for the chatbot. It accepts a message string and an optional configuration object to customize aspects like widgets, avatars, and delays. This function is crucial for constructing the bot's output.

```javascript
import { createChatBotMessage } from "react-chatbot-kit";

// Basic message
const basicMessage = createChatBotMessage("Hello! How can I help you?");

// Message with widget
const messageWithWidget = createChatBotMessage(
  "Here are your options:",
  {
    widget: "optionsWidget",
    withAvatar: true,
  }
);

// Message with delay and loading state
const delayedMessage = createChatBotMessage(
  "Processing your request...",
  {
    delay: 500,
    loading: true,
    terminateLoading: true,
    withAvatar: false,
  }
);

// Using in ActionProvider
class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleParkingOptions = () => {
    const message = this.createChatBotMessage(
      "How can I help you with parking?",
      {
        loading: true,
        terminateLoading: true,
        withAvatar: true,
        widget: "parkingOptions",
      }
    );
    this.setState((state) => ({
      ...state,
      messages: [...state.messages, message],
    }));
  };
}
```

--------------------------------

### AirportSelector Widget Component (JSX)

Source: https://context7.com/fredrikoseberg/react-chatbot-kit-docs/llms.txt

The `AirportSelector` is a custom React component used as a widget within the chatbot. It allows users to select an airport from a dropdown and confirms their selection. This component demonstrates how to integrate interactive UI elements with the chatbot's state management and action providers.

```jsx
import React, { useState, useEffect } from "react";

const AirportSelector = ({ selectedAirport, setState, actionProvider }) => {
  const [displaySelector, toggleDisplaySelector] = useState(true);
  const [airports, setAirports] = useState([]);

  const airportOptions = [
    { iata: "OSL", nameCompact: "Oslo" },
    { iata: "BGO", nameCompact: "Bergen" },
    { iata: "SVG", nameCompact: "Stavanger" },
    { iata: "TRD", nameCompact: "Trondheim" },
  ];

  useEffect(() => {
    setAirports(airportOptions);
  }, []);

  const handleSubmit = (e) => {
    setState((state) => ({
      ...state,
      selectedAirport: airports.find(
        (airport) => airport.iata === e.target.value
      ),
    }));
  };

  const handleConfirm = () => {
    actionProvider.handleOptions();
    toggleDisplaySelector(false);
  };

  return (
    <div className="airport-selector-container">
      {displaySelector ? (
        <>
          <h2>Select Airport</h2>
          <select value={selectedAirport.iata} onChange={handleSubmit}>
            {airports.map((item) => (
              <option key={item.iata} value={item.iata}>
                {item.nameCompact}
              </option>
            ))}
          </select>
          <button onClick={handleConfirm}>Confirm</button>
        </>
      ) : (
        <p>Selected airport: {selectedAirport.nameCompact}</p>
      )}
    </div>
  );
};

export default AirportSelector;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.