Duplicate messages ( not duplicated of pass issues), avatar logo and userinput disabled

Describe the bug The steps array is not shown properly as should be...

To Reproduce This is my steps object:


[
  {
    "id": "0",
    "message": "Hola amigo!",
    "trigger": "1"
  },
  {
    "id": "1",
    "message": "Por favor hazme una pregunta e intentaré ayudarte.",
    "trigger": "2"
  },
  {
    "id": "2",
    "message": "dsfdasfdasdas",
    "trigger": "3"
  },
  {
    "id": "3",
    "message": "Respuesta del bot",
    "trigger": "4"
  },
  {
    "id": "4",
    "message": "dsfdasfdasdas",
    "trigger": "5"
  },
  {
    "id": "5",
    "message": "Respuesta del bot",
    "trigger": "6"
  },
  {
    "id": "6",
    "user": true
  }
]

Result: In screenshots 1- Some messages are duplicated 2 - AvatarBot is not showing 3 - once as a user writes the first prompt or question, the user input appears disabled, and you cant continue the chat

Expected behavior That the steps array would be shown propely in chatbot.

Screenshots

imagen .

Desktop (please complete the following information):

OS: Ubuntu 22.04
Browser Firefox
Version 126.0 (64-bit)

Additional context React with vite

So my main objective is create a chatbot to use with AI using API ( gemini or chatgpt). So i would replace the message "Respuesta del bot" with the response of the model of AI after sending him the message with the question, and if possible with the history of the chat conversation. Then left the bot ready to receive a new userinput ( now dont know why after sending the first message, the userinput is disabled)

My code:

import ChatBot from 'react-simple-chatbot';
import { ThemeProvider } from 'styled-components';
import chatlogo from '../../assets/robot-chatbot-icon-sign-free-vector.jpg';
import { useState } from 'react';

     // Creating our own theme
     const theme = {
        background: '#C9FF8F',
        headerBgColor: '#197B22',
        headerFontSize: '20px',
        botBubbleColor: '#0F3789',
        headerFontColor: 'white',
        botFontColor: 'white',
        userBubbleColor: '#FF5733',
        userFontColor: 'white',
    };

    // Set some properties of the bot
    const config = {
        botAvatar: chatlogo,
        floating: true,
    };

export function ComponentChatBox() {

    const stepsInicial = [
        {
            id: '0',
            message: 'Hola amigo!',

            // This calls the next id
            // i.e. id 1 in this case
            trigger: '1',
        }, {
            id: '1',

            // This message appears in
            // the bot chat bubble
            message: 'Por favor hazme una pregunta e intentaré ayudarte.',
            trigger: '2'
        }, {
            id: '2',

            // Here we want the user
            // to enter input
            user: true,
            trigger: (userInput) => handleUserInput(userInput),
        },
    ];

    const [steps, setSteps] = useState(stepsInicial);
  //  const [id, setId] = useState('');

function handleUserInput(userInput) {

    if (userInput.value.length === 0) {
        console.log('No se ha introducido nada');
    }
    else {
        //Elimino la entrada con user a true
        steps.pop();
        let idActual= steps.length-1;

        // Aquí puedes manejar la entrada del usuario y agregarla a los pasos
        const questionUser = {
            id: `${idActual+ 1}`,
            message: userInput.value,
            trigger: `${idActual + 2}`,
        };

        const responseBot = {
            id: `${idActual + 2}`,
            message: 'Respuesta del bot',
            trigger: `${idActual + 3}`,
        };

        const nextStep = {
                id: `${idActual + 3}`,
                user: true,
                trigger: (userInput) => handleUserInput(userInput),
            };

        steps.push(questionUser, responseBot, nextStep);

      //  setId(`${idActual + 3}`);
        setSteps([steps]);

        //return `${idActual + 3}`;
        }
    }

    return (
        <div className="ComponentChatBox">
            <ThemeProvider theme={theme}>
                <ChatBot

                    // This appears as the header
                    // text for the chat bot
                    headerTitle="EduBot"
                    steps={steps}
                    {...config}
                />
                {console.log(steps)}
            </ThemeProvider>
        </div>
    );
}

export default ComponentChatBox;

Any help would be apreciated

My project: https://github.com/ejgutierrez74/workshop-react-eduardo

As you can see this is an educational project and i need this to teach my students of JavaScript and front end web apps.

LucasBassetti / react-simple-chatbot

Duplicate messages ( not duplicated of pass issues), avatar logo and userinput disabled #386