HTTP request response as HTML streaming support

[abhinavverma-sf]

Hi

Note: not using websockets or sse

I am sending a HTTP request to my custom API in backend and whole data is received to me in response and in responseInterceptor and i am returning

  responseInterceptor: ResponseInterceptor = response => {
return { 
      html: `<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/>  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br/>  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<a href="www.google.com"> Link </a> <ul><li> Item 1 </li></ul>`,
      role: 'ai',
 }
}

in html I have

      <deep-chat
        id="deep-chat"
       // request details 
        #chatElementRef
        [requestInterceptor]="requestInterceptor"
        [responseInterceptor]="responseInterceptor"
        stream='{"simulation": "6"}'
       </deep-chat>

to have stream like experience for bot responses

I tried with text responses streaming simulation works well but it will show <a href... <ul> li on browser's chat window.. For html responses how can I achieve streaming? Is it possible to achieve similar streaming experience/mimic streaming experience like other tools like bingchat with help of deep-chat?

Note: using above in Angular application

[OvidijusParsiunas]

Hi @abhinavverma-sf.

You can stream html responses. However, each event must contain full html tags.

E.g. this will work:

{html: 'text1'}, {html: '<a href="https://example.com">Website</a>'}, {html: 'text2'}

This will not work:

{html: 'text1'}, {html: '<a '}, {html: 'href="https://example.com">Website</a>'}, {html: 'text2'}

The reason for this is because Deep Chat creates a new element for every chunk using the innerHTML property.

Code can be found here

This has also been discussed in the following issue.

Let me know if this helps. Thanks!

[abhinavverma-sf]

@OvidijusParsiunas Here my case is different i am receiving whole html in one go like I mentioned in response

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br/> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <a href="www.google.com"> Link </a> <ul><li> Item 1 </li></ul>

[OvidijusParsiunas]

Hi @abhinavverma-sf.

My apologies, I missed that you are looking to simulate the stream response.

This is not available in the current Deep Chat version 1.4.11.

Nevertheless, I have made changes to our dev packages version 9.0.168 which should allow you to achieve this.

Due to my current work obligations and the next release being really big, it will take some time for it to go out, hence I would recommend you to use our dev packages in the meanwhile. They are called deep-chat-dev and deep-chat-react-dev and behave just like the main packages except their names are different. They also contain a few property name changes, such as the request property is changed to connect and stream is moved to the connect object. All of the current/old properties will still keep working as usual except you will see warnings in the console for their deprecation and get a few TypeScript warnings which you can ignore.

Let me know if this helps!

[OvidijusParsiunas]

Hi, the code changes mentioned in this issue has now been released in version 2.0.0.