[Help] Simulate Stream is not working

[GivenToFlyCoder]

First let me tell you that this is a so great library! very usfeul! I have tested with my own logic, API request messages, options etc...

I just want to simulate stream in messages, by setting botBubble: {simStream: true}, but nothing happens, it is not simulating stream messages behavior, any advice?

[tjtanjin]

Hey @GivenToFlyCoder, thank you for your kind words! Do you mind sharing a code snippet of what you tried?

Edit: Just to eliminate doubts, are you on a version >= 1.3.0?

[GivenToFlyCoder]

I'm using: "react-chatbotify": "^1.2.0"

Let me show you a code snippet, from my 1000 lines code:

..............................

const options = {

    advance: {
        useCustomPaths: true
    },

    theme: {
        embedded: false,
        primaryColor: "rgba(179, 142, 93, 1)",
        secondaryColor: "rgba(74, 34, 94, 1)",
        fontFamily: "Montserrat",
    },

    chatHistory: {
        storageKey: "example_simulation_stream",
        disabled: true
    },

    header: {
        avatar: 'data/chatbot_icons/my_logo.svg',
        title: (
            <div className="MyHeaderTitle">
                <p className="MyHeaderTitleP">MyProjectX</p>
                <img className="MyCloseBtnHeder" src="data/chatbot_icons/close1.png" alt=""
                    onClick={() => { OnCloseChatBot(); closeChatbot(); }} />
            </div>),
        closeChatIcon: `data/chatbot_icons/min1.png`,
    },

    botBubble: {
        simStream: true,
        showAvatar: true,
        avatar: 'data/chatbot_icons/icons8-women.png',
        streamSpeed: 50,
    },

    desktopEnabled: true,

    mobileEnabled: true,

    chatInput: {
        enabledPlaceholderText: 'Ingresa tu texto',
        // botDelay: 1000,
    },

    tooltip: {
        text: 'Talk With Me!'
    },

    footer: {
        text: 'My Smart Chat'
    },

    chatButton: {
        icon: 'data/chatbot_icons/clipart-girl.png'
    },

    userBubble: {
        showAvatar: true,
        avatar: 'data/chatbot_icons/icons8-niña-64.png',
    },

    chatWindowStyle: {
        backgroundColor: '#f2f2f2',
    },

    notification: {
        disabled: true,
        // icon: "",
    },

}

const formStyle = {
    marginTop: 10,
    marginLeft: 20,
    border: "1px solid #491d8d",
    padding: 10,
    borderRadius: 5,
    maxWidth: 300
}

const flow = {
    start: {
        message: "Start Message, please select an option:",
        options: initialOptions,
        chatDisabled: true,
        function: (params) => {
            ClearTimers()
            previous_path = params.prevPath
            current_path = 'start'
            user_input = params.userInput
                setTimerId1((setTimeout(MyTimer1, waiting_time, previous_path, current_path, user_input, new Date())))
                setTimerId2(setTimeout(MyTimer2, waiting_time_2))
                setTimersID((timerArray) => [...timerArray, timerId1, timerId2])                
        },
        path: (params) => {
            let next_path_0 = ""
            let process_options_mess = ""
            switch (params.userInput) {
                case "Report":
                    next_path_0 = "report_crime_options"
                    process_options_mess = "Make your report ... selectc an option:"
                    break;
                case "Legal Advice LLM Open AI":
                    next_path_0 = "open_ai_legal_advice"
                    process_options_mess = "ChatGPT Legal Advise, Fetch yo my Back End microservice ..."
                    break;
                case "Support network data":
                    next_path_0 = "support_network"
                    process_options_mess = "Where do you live?"
                    break;
                default:
                    return "unknown_input";
            }
            params.injectMessage(`${process_options_mess}`)
            return next_path_0
        },
    },
    report_crime_options: {
        options: reportPerson,
        chatDisabled: true,
        function: (params) => {
            ClearTimers()
            previous_path = params.prevPath
            current_path = 'report_crime_options'
            user_input = params.userInput
                setTimerId1((setTimeout(MyTimer1, waiting_time, previous_path, current_path, user_input, new Date())))
                setTimerId2(setTimeout(MyTimer2, waiting_time_2))
                setTimersID((timerArray) => [...timerArray, timerId1, timerId2])
        },            
............................

        path: (params) => {
            let next_path_7 = ""
            let process_options_mess = ""
            switch (params.userInput) {
                case Continue":
                    next_path_7 = params.prevPath
                    process_options_mess = `Ok let´s return where you leave: ${params.prevPath}`
                    break;
                case "Exit":
                    next_path_7 = 'start'
                    closeChatbot()
                    break;
                case "Return to start":
                    process_options_mess = `Ok let's return to the begining.`
                    next_path_7 = 'start'
                    break;
                default:
                    return "unknown_input";
            }
            params.injectMessage(`${process_options_mess}`)
            return next_path_7
        },
    },
}

return (
    <>
        <PathsContext.Provider value={{ paths: paths, setPaths: setPaths }}>
            <ChatBot options={options} flow={flow} key={chatID} />
        </PathsContext.Provider>
    </>
);

};

export default MyChatBotify;

[tjtanjin]

@GivenToFlyCoder

Ahhh the simStream option was only added in 1.3.0. Separately, I've been working on further enhancements to the user experience (e.g hiding media control on mobile devices, better handling of new messages while users are scrolling etc). There's likely a 1.4.0 that will drop within the next couple of days with these improvements. Nothing major but should make the experience better for your users 🎉

[GivenToFlyCoder]

I just installed 1.3.0 version and the simStream worked in a beautiful way. But my code did'nt work as well as 1.2.0 version. This behavior seems to be present, between path changes, when previous path has params.injectMessage(), the next path is not set, also the injected message is repited, this is not a Stritc Mode React problem.

[tjtanjin]

I just installed 1.3.0 version and the simStream worked in a beautiful way. But my code did'nt work as well as 1.2.0 version. This behavior seems presente between path changes, when previous path has params.injectMessage(), the next path is not set, also the message injected is repited, this is not a Stritc Mode React problem.

Try the following:

• Update to the latest version
• Add await in front of params.injectMessage

The second option should help as params.injectMessage is now async.

[GivenToFlyCoder]

Thanks, i just added an await in front of params.injectMessage, also the Path arrow function has to be declared as async. It worked so beatiful with simStream (V 1.3.0) and the same code that worked in 1.2.0 version! Thanks!

[tjtanjin]

Thanks, i just added an await in front of params.injectMessage, also the Path arrow function has to be declared as async. It worked so beatiful with simStream (V 1.3.0) and the same code that worked in 1.2.0 version! Thanks!

Glad it worked! Thanks for raising this up, I'll add this into the FAQ. That said, it's still recommended to go on the latest version 😝

[GivenToFlyCoder]

I just updated to the last version (1.3.2) and also works fine! I have a coupple of suggestion, that could improve this great and very customizable tool! Thanks!

[tjtanjin]

I just updated to the last version (1.3.2) and also works fine! I have a coupple of suggestion, that could improve this great and very customizable tool! Thanks!

Go ahead! Suggestions are always welcome!

[tjtanjin]

Saw your suggestions in another issue!