Stream text and html

[m1nka]

We want to display a server reponse together with some custom button. So our goal is to display something like this:

We can successfully send either html or text, but we cannot send both in the same response. This would be extremely helpful since with AI agents we need to give an anwer to the user and then present some options to reply.

If we send a stream back with text and html at the same time like this (server-side code):

for await (const chunk of answerStream) {
        if (chunk.choices[0].delta.content) {
          await stream.write(
            `data: ${JSON.stringify({
              text: `${chunk.choices[0].delta.content}`,
              role: `assistant`,
              html: `<button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">What do shrimps eat?</button>`
            })}\n\n`
          );
        }
      }

the html is just ignored. And if we send text first (which works fine) and some html at the end

stream.write(`data: ${JSON.stringify({
        role: `assistant`,
        html: `<button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">What do shrimps eat?</button>`
      })}\n\n`)

we get a Deepchat error:

Cannot mix {text: string} and {html: string} responses.

Is this a bug? How can we work around this? We need to provide the user with a text answer and custom elements.

Thanks a lot!

[buzhou9]

You can try returning an HTML fragment containing text content and adding styles to it to achieve the desired effect, which only requires the use of HTML attributes.

[OvidijusParsiunas]

The response given by @buzhou9 is a great one!

Unfortunately Deep Chat does not allow the server to stream text and html at the same time as it is a very unnatural use-case and something that is difficult to parse/render for the same message. However, I can see that for your use-case you want to add the html message as a separate message, so as an alternative to the @buzhou9 suggestion, you can also try to listen to when the stream has finished and add the suggestion message manually. Details on how to do that are listed in the following issue

Let me know if this helps. Thanks!

[OvidijusParsiunas]

Hi, I will be closing this issue since there has been no further communication. Thanks!