tjtanjin/react-chatbotify

[Help] Using multiple advance options

Closed this issue · 4 comments

Etin-osa commented

In my project i want to use multiple advance options namely useCustomBotOptions & useCustomMessages.
This has resulted in some problems. Mainly that the customMessages disregard the customBotOptions entirely. i use audio but it dosen't make any sound i also use simstream which dosen't do anything

I don't know if i set it properly i will share code below

    const defaultBotOptions = getDefaultBotOptions()
    const { voice, audio, chatHistory, botBubble,advance, tooltip, header } = defaultBotOptions
    const [botOptions, setBotOptions] = useState<Options>({
        ...defaultBotOptions,
        isOpen: false,
        audio: {
            ...audio,
            language: 'es-ES',
            volume: 1,
            voiceNames: ['Google español'],
            rate: 1,
            disabled: false,
            defaultToggledOn: true,
        },
        voice: {
            ...voice,
            disabled: false,
        },
        chatHistory: {
            ...chatHistory,
            disabled: true,
        },
        header: {
            ...header,
            title: 'Chatbot',
        },
        tooltip: {
            ...tooltip,
            text: '¡Háblame!',
            mode: 'START'
        },
        botBubble: {
            ...botBubble,
            simStream: true,
            streamSpeed: 60
        },
        advance: {
            ...advance,
            useCustomBotOptions: true,
            useCustomMessages: true
        }
    })
    const [messages, setMessages] = useState<any[]>([])

    useEffect(() => {
        if (botOptions.isOpen) {
            setTimeout(() => {
                setMessages(prev => [...prev, { content: '¿Necesitamos tu información para hacer un formulario?', sender: 'bot' }])
            }, 2000);
        }
    }, [botOptions])

    return (
        <>
            <Homepage />
            <div style={{ position: 'fixed', bottom: 20, right: 20 }}>
                <BotOptionsContext.Provider value={{ botOptions, setBotOptions }}>
                    <MessagesContext.Provider value={{ messages, setMessages }}>
                        <ChatBot 
                            options={botOptions} 
                            flow={{
                                start: {
                                    message: '¿Como te llamas?'
                                }
                            }} 
                        />
                    </MessagesContext.Provider>
                </BotOptionsContext.Provider>
            </div>
        </>
    );

Any form of help is greatly apreciated 😊

tjtanjin commented

Hey @Etin-osa, thank you for reaching out. I combed through the documentation and realized it lacked the following information for the advance usage of custom messages:

  • Audio will not be played
  • Streaming will not work

The reason for these limitations is due to the fact that the playing of audio and streaming of messages are currently sequential (i.e. built into the message flow directly). Advance custom messages hijacks this flow by inserting messages anywhere it wants and there is thus no clean approach to supporting audio and streaming.

Consider a scenario where a message is injected at the start, in the middle, and at the end of the messages array all at once. Should the audio read all messages? What if 10 messages were added at once all over the place? The streaming of messages face the same problem as well. In summary, there is no way to tell when a message should be read or streamed when control of the messages array is handed over to the developers for advance cases.

You can consider building a utility function to stream the messages yourself if you'd like, but based on your code, I am guessing you want a message to be sent every time the chatbot is re-opened.

In that case, perhaps consider using custom paths instead to send the user directly into a block with the message you want. As paths do not interfere with the messages array directly, the audio and streaming of messages will not be affected. This would be my recommended approach.

Let me know if I got your intentions wrong or if you need further assistance 😊

Edit: Updated documentation to make a note on audio and message streaming with useCustomMessages

Etin-osa commented

Thanks for the reply. 😊
It really cleared things up for me, the only problem is that i can't use useCustomPath because generally what i plan on doing is sending the messages from the user to a backend service and then i post the response as a message from the bot.

The code i post is just me playing with the library which is awesome by the way 👌
I think i could create the audio myself using SpeechSynthesisUtterance, not sure if i can recreate the stream effect/animation but it's not that important, it's just fun to see 😅

tjtanjin commented

Hey @Etin-osa! If you're looking to integrate with a backend service or simulate message stream, then these examples might be relevant for your reference:

You can hop onto the discord server if you'd like a more in-depth discussion as well 😄

Etin-osa commented

Thanks a lot. The first link is exactly what i needed. Thanks a lot. 🙌

  • 🎉1