[Bug] duplicate first message when chat history is disabled

[nellysbr]

Bug Description

When i disable ChatHistory using disabled option, the first message comes duplicated.

Steps To Reproduce Steps to reproduce the bug behavior:

   chatHistory: {
          disabled: true,
    },

Expected behavior Duplicated first message

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: Chrome, FIrefox

[tjtanjin]

Hey @nellysbr, I'm trying to reproduce this on the playground with no success, could you try reproducing it there and then sending me the options? On a side note, could this FAQ be relevant?

[nellysbr]

Hey @tjtanjin ! Sure!

options={{
                tooltip: {
                  text: 'Precisa de ajuda?',
                },
                chatHistory: {
                  disabled: true,
                },
                botBubbleStyle: {
                  backgroundColor: '#f4f4f4',
                  color: '#444444',
                },
                footer: {
                  text: (
                    <>
                      <p>
                        <Link
                          href={'https://suave.ppg.br'}
                          className="font-bold text-black"
                          target="_blank"
                          title="Suave Comunicação e Marketing"
                        >
                          Suave Comunicação & Marketing
                        </Link>
                      </p>
                    </>
                  ),
                },
                fileAttachment: {
                  disabled: true,
                },
                emoji: {
                  disabled: true,
                },
                notification: {
                  disabled: true,
                },
                header: {
                  showAvatar: true,
                  avatar: '/assets/images/avatar-audi.webp',
                  title: (
                    <p className="font-bold pt-1">
                      Érica <br />
                      <span className="font-normal text-sm">
                        Assistente Audi Ribeirão Preto
                      </span>
                    </p>
                  ),
                },
                chatButton: {
                  icon: '/assets/images/avatar-audi.webp',
                },
                chatInput: {
                  enabledPlaceholderText: 'Digite aqui suas respostas',
                },
                theme: {
                  primaryColor: '#8e8e8e',
                  secondaryColor: '#444444',
                  fontFamily: 'Roboto',
                },
                headerStyle: {
                  background: '#000',
                  borderBottom: '6px solid #dc133e',
                  maxHeight: '100px',
                  alignItems: 'center',
                  justifyContent: 'space between',
                  padding: '20px 20px',
                  fontFamily: 'Roboto',
                },
}}

[tjtanjin]

Hey @nellysbr, I took your configuration and pasted it into the playground for testing. It is worth noting that I replaced footer.text (playground does not have Link) and added theme.embedded: true to achieve the following:

const MyChatBot = () => {
    const options = {
        tooltip: {
            text: 'Precisa de ajuda?',
        },
        chatHistory: {
            disabled: true,
        },
        botBubbleStyle: {
            backgroundColor: '#f4f4f4',
            color: '#444444',
        },
        footer: {
            text: "Test",
        },
        fileAttachment: {
            disabled: true,
        },
        emoji: {
            disabled: true,
        },
        notification: {
            disabled: true,
        },
        header: {
            showAvatar: true,
            avatar: '/assets/images/avatar-audi.webp',
            title: ( <
                p className = "font-bold pt-1" >
                Érica < br / >
                <
                span className = "font-normal text-sm" >
                Assistente Audi Ribeirão Preto <
                /span> <
                /p>
            ),
        },
        chatButton: {
            icon: '/assets/images/avatar-audi.webp',
        },
        chatInput: {
            enabledPlaceholderText: 'Digite aqui suas respostas',
        },
        theme: {
            primaryColor: '#8e8e8e',
            secondaryColor: '#444444',
            fontFamily: 'Roboto',
            embedded: true
        },
        headerStyle: {
            background: '#000',
            borderBottom: '6px solid #dc133e',
            maxHeight: '100px',
            alignItems: 'center',
            justifyContent: 'space between',
            padding: '20px 20px',
            fontFamily: 'Roboto',
        }
    }

    const flow = {
        start: {
            message: "Welcome to the playground 🥳! Edit and experiment as you wish!",
            path: "end_loop"
        },
        end_loop: {
            message: (params) => `Received: ${params.userInput}`,
            path: "end_loop"
        }
    }
    return ( <
        ChatBot options = {
            options
        }
        flow = {
            flow
        }
        />
    );
};

render( < MyChatBot / > )

You can try pasting this into the playground as well but I am unable to reproduce the duplicate message. Have you checked out the FAQ sent earlier and checked if it is relevant?

[nellysbr]

hey @tjtanjin ! Thank's for your reply!

You can close this ticket! Ill create a new public repo (using next) to trying to reproduce the error for you so i can send it to you later!

Thanks for your help!

[MrCordeiro]

Hi @tjtanjin ! I was able to replicate this issue. It happens when you use React.StrictMode. This makes React render twice in development mode to make sure that there are no side effects. I found this answer, while debugging my own application, helpful

https://stackoverflow.com/a/72238236/2533340

Cheers and thanks for your work with this awesome library! 💖

[tjtanjin]

Hey @MrCordeiro! Thank you for checking 😊 Your situation would match the scenario described in the FAQ. Hoping that @nellysbr isn't having the same issue but for a different reason in NextJS because that would mean more digging required 😰