chatbot-gooup1/README.md

A customizable React chatbot component with SCSS styling, speech recognition, and API integration

# gooup1-chatbot 🤖

First, I will briefly introduce this library.

This library is created for learning purposes, written in **ReactJS**.  
(I would have used NextJS but it had a bug... and honestly, I was too lazy to fix it 😅)

---


## 🔧 Props you can customize

- `LogoIcon`  
- `ChatbotIcon`  
- `Title`  
- `TitleColor`  
- `TitleBgColor`  
- `HolderInputText`  
- `BadgeNumber`  
- `BgColor`  
- `BgMaskColor`  
- `BgOpacity`  
- `BgMaskImg`  
- `MainColor`  
- `SubColor`  
- `AudioShow`  
- `initialMessages`  
- `apiEndpoint`  

---


> Oh, there are quite a few variables you don't need to care about.  
> The **main ones** include:  
> **LogoIcon**, **ChatbotIcon**, **Title**, **initialMessages**, and **apiEndpoint**.

---


## 🧠 Explanation

### `initialMessages`  
This will be the default assigned conversation.

For example:

```js
initialMessages={[
  { role: "assistant", content: "Hello! My name is MyBot!" },
  { role: "user", content: "Hi" },
  { role: "assistant", content: "How can I help you!" },
]}

With apiEndpoint, you can pass the API path directly. But there is one note, the default output structure will be as follows:
const customApiCall = async (message) => {
    const updatedMessages = [...messages, { role: "user", content: message }];

    try {
      const timestamp = Date.now();

      const result = await fetch(
        apiEndpoint,
        {
                  method: "POST",
                  headers: { "Content-Type": "application/json" },
                  body: JSON.stringify({ chatInput: updatedMessages, sessionId: timestamp }),
        }
        );

              if (!result.ok) {
                const errorData = await result.json();
                throw new Error(errorData.error || "API request failed");
        }

              const data = await result.json();
              const response = data?.output || "🤖 No respond";
              // console.log("Response_GooUp1: ", response);
              return response;
    } catch (error) {
        console.error("Error calling API:", error);
              return `🤖 Error: ${error.message}`;
    }
};

This project still has many shortcomings, but I will try to change it in the future. Thanks!