OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.43k stars 221 forks source link

html response from signal handler #41

Closed GIOVANNI-75 closed 10 months ago

GIOVANNI-75 commented 10 months ago

Hi, it's been a long time I haven't followed the progress of the project and I see that it's progressing well, congratulations. I noticed that when using Signal belonging to handler request to return the response in stream it does not accept the html, I don't know if it's a bug or an error on my part

I was able to get around the problem by combining the react state and initialMessage to update the messages gradually but performance level is not great

OvidijusParsiunas commented 10 months ago

Hi @GIOVANNI-75, nice to see you again! Streams currently only support text responses and not html. The reason for this is because in html anything goes, images, videos, custom elements etc so they naturally cannot be streamed like text.

Having said that, I gave this a little bit more thought and think that I may be able to do something to get it to work. I am currently working on another big feature, but I think I can squeeze in this stream functionality in the next couple of days. Just so I am on the right track, can you elaborate a little bit more on your use-case and maybe show me example of what html data do you want to stream per event. E.g. <div>1</div> -> <div>2</div> -> <div>3</div> -> <div>4</div>

What I am thinking of doing is:

  1. Adding the ability to respond in html
  2. Adding the ability to overwrite the previous streamed message as currently each stream event adds content to the messages which is problematic for nested tags as they need the final closing tag to be present at the start e.g. <div><div>Hello</div></div>. Hence overwriting the previous message like the following will work: <div><div>Hello my name is</div></div>.

Let me know more about how you plan to use html tags so I can do this correctly. Thanks!

GIOVANNI-75 commented 10 months ago

the pleasure is shared 👋 regarding your ideas I think that the option of Adding the possibility of overwriting the message already broadcast would indeed pose a lot of problem yes, but I thought of two functions which could organize the solution the first a function which sends a static html with unique ID on each tag and the second function adds or overwrites an attribute or value which will be nested in the static html without re-rendering all the html at each stream, one can as do the current stream in the bubble but this time with html. What do you think ?

OvidijusParsiunas commented 10 months ago

When it comes to request handlers, their APIs are aimed to be similar to the behaviour of the actual functionality that they are handling, e.g. streams having onOpen, onClose and onResponse signals - which actually used internally to handle the streams with external services. This similarity/simplicity makes it easier to maintain the component's code and is why I probably would not want to introduce any more signals/functions into the mix.

Having said that, does re-rendering the message bubble pose performance issues on your end? To-date the component offers a "deep-chat-update-message" class that allows the new AI responses to overwrite the previous AI response which works well for web-sockets and other future implementations that I am currently working on. I was planning to implement something like this for streams. Let me know if this would work for you?

hello

OvidijusParsiunas commented 10 months ago

Update on the progress. I am currently working on this and found a way to consecutively add html onto a stream bubble. I will update this thread when this is closer to being released.

OvidijusParsiunas commented 10 months ago

Hi. You can now stream html messages in Deep Chat version 1.4.4. Please read the release notes for more information.

There are a few strategies you can employ;

Add consecutive elements: {html: "<div>Hello</div>"} -> {html: "<div>Goodbye</div>"}

Mix markup with text (the html property must still be used): {html: "<div>Hello</div>"} -> {html: "Hello"}

Or completely overwrite the message if you want to iterate within the same div using the new overwrite property: {html: "<div>Div 1</div>"} -> {html: "<div>Div 1</div>" overwrite: true}

I will be closing this issue, but if you experience problems relating to streaming html feel free to comment below or raise a new issue for anything else. Thanks!