Have the responsive be written slowly like ChatGPT and Gemini

[miguelisidoro]

Hello,

Is it possible to have the response be written slowly like ChatGPT and Gemini instead of the whole answer be displayed at once?
If yes, how?

Thanks

[tjtanjin]

Hello,

Is it possible to have the response be written slowly like ChatGPT and Gemini instead of the whole answer be displayed at once? If yes, how?

Thanks

It appears in chunks because that's how the responses are returned from the API calls. You can emulate the writing though, like this example: https://react-chatbotify.com/docs/examples/real_time_stream

It's not the best and can be improved but you get the idea 😊

[miguelisidoro]

Hello @tjtanjin,

Thanks for the information.
Our API returns the whole response at once.
Is it possible to emulate the writing even if the API returns the whole response at once? If yes, how?

Thanks

[tjtanjin]

Yup if that's the case you can loop through each character and use params.streamMessage within the loop. It's actually similar to a snippet in the example shared above:

for (let i = offset; i < text.length; i++) {
    await params.streamMessage(text.slice(0, i + 1));
    await new Promise(resolve => setTimeout(resolve, 30));
}

[miguelisidoro]

Hello @tjtanjin ,

Thanks for the response.
Where do we put that code?

Thanks

[tjtanjin]

Hey @miguelisidoro, that's a little hard to advice since I don't have visibility into how your code is written. Perhaps you can share what you have?

That said, you can also reference the provided example above which basically puts the logic within the message attribute by passing it a function with params.

[miguelisidoro]

Hello @tjtanjin ,

I think it is inside the getResponse method.

Here is a bit of my code:

const getResponse = async (userInput: string) => {
    try {
      const aiAssistantSubmitActionUrl = `/ai-assistant/submit?userInput=${encodeURI(userInput)}`;
      
      let newChatHistory = chatHistory;
      if (!newChatHistory) {
        newChatHistory = { messages: [] };
      }
      newChatHistory?.messages?.push({ role: 'user', content: userInput });

      setChatHistory(newChatHistory);

      const requestAsString = JSON.stringify(newChatHistory);
      
      const response = await fetch(aiAssistantSubmitActionUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'},
        body: requestAsString,
        },
      );
      
      const responseMessage = await response.json();

      newChatHistory?.messages?.push({ role: 'assistant', content: responseMessage });
      setChatHistory(newChatHistory);

      return responseMessage;
    }
    catch (error) {
      console.error(error);
    }
  };

  const flow = {
    start: {
      message: aiIntroText,
      path: 'loop'
    },
    loop: {
      message: async (params: any) => {
        const result = await getResponse(params.userInput);
        return result;
      },
      path: 'loop',
    }
  };

[tjtanjin]

Hey @miguelisidoro, I'm not on my PC now so it is a little hard to type. I'll try to describe the changes needed for now but if you need further help, I'll do so on PC tomorrow.

So based on what you have, instead of passing just params.userInput into getResponse, you pass the entire params in. Then inside getResponse, you'll add the for loop I shared previously right after you get the responseMessage. You no longer need to return anything, since you're just using params.streamMessage inside the loop to send messages. These changes should suffice 😊

[miguelisidoro]

Hello @tjtanjin,

Thanks once again! It worked|

My updated code:

const getResponse = async (params: any) => {
    try {
      const aiAssistantSubmitActionUrl = `/ai-assistant/submit?userInput=${encodeURI(params.userInput)}`;
      
      let newChatHistory = chatHistory;
      if (!newChatHistory) {
        newChatHistory = { messages: [] };
      }
      newChatHistory?.messages?.push({ role: 'user', content: params.userInput });

      setChatHistory(newChatHistory);

      const requestAsString = JSON.stringify(newChatHistory);
      
      const response = await fetch(aiAssistantSubmitActionUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'},
        body: requestAsString,
        },
      );
      
      const responseMessage = await response.json();

      newChatHistory?.messages?.push({ role: 'assistant', content: responseMessage });
      setChatHistory(newChatHistory);

      for (let i = 0; i < responseMessage.length; i++) {
        await params.streamMessage(responseMessage.slice(0, i + 1));
        await new Promise(resolve => setTimeout(resolve, 15));
      }
    }
    catch (error) {
      console.error(error);
    }
  };

  const flow = {
    start: {
      message: aiIntroText,
      path: 'loop'
    },
    loop: {
      message: async (params: any) => {
        await getResponse(params);
      },
      path: 'loop',
    }
  };

[tjtanjin]

Happy to hear! If there're no other issues can close this discussion 😛