some questions about simulation param

[wysstartgo]

I have some questions about simulation param in https://deepchat.dev/docs/connect/#stream

Used to stream text responses from the target service.
If the service supports [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) via the text/event-stream MIME type, you can asynchronously stream the incoming events by setting this to true. See [examples](https://deepchat.dev/examples/servers) on how to set this up for your own server.
Alternatively, use the simulation object property to facilitate a stream-like experience for regular responses (incl. [websocket](https://deepchat.dev/docs/connect/#Websocket)). You can also control the millisecond interim of each word's appearance by assigning it a number with the default being 70.

Does it means this param can only be used in websocket?

I used it in common http request,it occurs error. I used it in sse by Flux,it isn't stream-like .

Is there any more examples about how to use it?

[OvidijusParsiunas]

Hi @wysstartgo. The simulation property in stream can be used for any connection type - websocket or regular http requests.

If you are getting an error, can you share the code you are using to set it up and what the error is? Thanks!

[wysstartgo]

I used vue framework,the deep-chat component configuration code is :

     stream="{'simulation':100}"
          :request="{
      url: 'http://localhost:8080/ai-chat/ai/chat',
      method: 'POST',
      headers: { charset: 'utf-8' },
      additionalBodyProps: { field: 'value' },
    }

the http://localhost:8080/ai-chat/ai/chat api is an regular http post request.

the error is about Connection type, I can share it tomorrow.

When I change it to an SSE api interface in Flux,it worked(but the simulation does not work).

[OvidijusParsiunas]

If you have an SSE endpoint, simulation will not work because there is nothing to be simulated as you have a real stream. May I ask why do you want to use simulation?

Just for more info - simulation expects all data to be returned in one call like a regular http endpoint (this is why it does not work with SSE endpoints as they return partial data).

Let me know more about your use-case and perhaps share what kind of objects your endpoint is returning. Thanks!

[wysstartgo]

okay,I will try a few more times based on your guidance.

[wysstartgo]

code in deep-chat with vue：

     stream="{'simulation':100}"
          :request="{
      url: 'http://localhost:8080/ai-chat/ai/chat',
      method: 'POST',
      headers: { charset: 'utf-8' },
      additionalBodyProps: { field: 'value' },
    }

code in server with springboot:

 @PostMapping("/chat")
    public DeepChatTextRespose chatJob(@RequestBody DeepChatRequestBody requestBody, HttpServletRequest request, HttpServletResponse response) {
}

the error in chrome console is :

I see the network shows it invokes text/event-stream request:

the error in server is: .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotAcceptableException: No acceptable representation]

[OvidijusParsiunas]

I have tried to use your example and everything appears to be fine on my end :/

Which version of Vue are you using? Also, what package and which version of Deep Chat are you using?

The fact that 'simulation':100} is still sending text/event-stream is really weird. It is as if Vue is recognising the stream value as :stream="true".

I have also notice that you don't have : before stream. Here is my syntax:

 <deep-chat
    :request="{
      url: 'http://localhost:8080/ai-chat/ai/chat',
      method: 'POST',
      headers: { charset: 'utf-8' },
      additionalBodyProps: { field: 'value' }}"
    :stream="{'simulation': 100}"
  />

I used this in Vue 3. Can you see if this works for you?

[wysstartgo]

I used the deep-chat vue example,the dependencies are:

"dependencies": {
    "deep-chat": "^1.4.3",
    "js-cookie": "^3.0.5",
    "vue": "3.2.45"
  }

[wysstartgo]

the deep-chat component code ：

<deep-chat
          style="width: 96vw; height: calc(100vh - 100px); padding-top: 10px; border-radius: 10px; border-color: #e4e4e4; background: linear-gradient(90deg, rgb(239, 242, 247) 0%, 7.60286%, rgb(237, 240, 249) 15.2057%, 20.7513%, rgb(235, 239, 248) 26.297%, 27.6386%, rgb(235, 239, 248) 28.9803%, 38.2826%, rgb(231, 237, 249) 47.585%, 48.1216%, rgb(230, 236, 250) 48.6583%, 53.1306%, rgb(228, 236, 249) 57.6029%, 61.5385%, rgb(227, 234, 250) 65.4741%, 68.7835%, rgb(222, 234, 250) 72.093%, 75.7603%, rgb(219, 230, 248) 79.4275%, 82.8265%, rgb(216, 229, 248) 86.2254%, 87.8354%, rgb(213, 228, 249) 89.4454%, 91.8605%, rgb(210, 226, 249) 94.2755%, 95.4383%, rgb(209, 225, 248) 96.6011%, 98.3005%, rgb(208, 224, 247) 100%)"
          :textInput='{
    "styles": {
      "container": {
        "borderRadius": "20px",
        "border": "unset",
        "width": "78%",
        "marginLeft": "-15px",
        "boxShadow": "0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)"
      },
      "text": {"padding": "10px", "paddingLeft": "15px", "paddingRight": "34px"}
    },
    "placeholder": {"text": "Ask me anything...", "style": {"color": "#606060"}}
  }'
          :messageStyles='{
    "default": {
      "shared": {
        "bubble": {
          "backgroundColor": "unset",
          "marginTop": "10px",
          "marginBottom": "10px",
          "boxShadow": "0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)"
        }
      },
      "user": {
        "bubble": {
          "background": "linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)"
        }
      },
      "ai": {"bubble": {"background": "rgba(255,255,255,0.7)"}}
    }
  }'

          :submitButtonStyles='{
    "position": "outside-right",
    "submit": {
      "container": {
        "default": {"bottom": "0.75em", "borderRadius": "25px", "padding": "5px", "backgroundColor": "unset"},
        "hover": {"backgroundColor": "#b0deff4f"},
        "click": {"backgroundColor": "#b0deffb5"}
      },
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z\"/></svg>",
        "styles": {
          "default": {
            "width": "1.5em",
            "filter":
              "brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "loading": {
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
          }
        }
      }
    },
    "stop": {
      "container": {"hover": {"backgroundColor": "#ededed94"}},
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
          }
        }
      }
    }
  }'
          :initialMessages='[
    {"text": "Hey, how are you?", "role": "ai"},
    // {"text": "This completely depends on the person.", "role": "ai"}
  ]'
          stream='{"simulation": 150}'

          demo="true"
          :request="{
      url: 'http://localhost:8080/ai-chat/ai/chat',
      method: 'POST',//charset=utf-8
      headers: { charset: 'utf-8' ,u_t_c: utc_c },
      additionalBodyProps: { field: 'value' },
    }"
  ></deep-chat>

[wysstartgo]

It works well in sse interface

[OvidijusParsiunas]

Try adding a colon : before stream to see if it works: change stream='{"simulation": 150}' to :stream='{"simulation": 150}'

[OvidijusParsiunas]

I am going to bed now, and will response later in the day. Thanks!

[wysstartgo]

after change stream='{"simulation": 150}' to :stream='{"simulation": 150}' ,the http request error solved.

but the text output quickly,not stream-like.

have a good sleep,Thanks!

[wysstartgo]

I know the reason.

 public static simulate(messages: Messages, sh: StreamHandlers, result: ResponseI) {
    const simulationSH = sh as unknown as SimulationSH;
    // reason for not streaming html is because there is no standard way to split it
    if (result.files || result.html) messages.addNewMessage({sendUpdate: false, ignoreText: true, ...result}, false);
    if (result.text) {
      // .filter(Boolean) removes '' entries in the array as they stop the simulation
      const responseText = result.text?.split(' ').filter(Boolean) || [];
      sh.onOpen();
      Stream.populateMessages(responseText, messages, simulationSH);
    }
  }

result.text?.split(' ') method works well for english but not worked for chinese.

[wysstartgo]

We can use code as below to solve this:

var text = "Hello World";
var characters = text.split('');
console.log(characters);

[OvidijusParsiunas]

That makes sense.

The reason why we split(' ') was used is because SSE usually responds with events that contain words, hence when simulating the algorithm is used to split up a sentence into individual words. I can now see that this is problematic for Chinese words.

Let me think about what the best way to approach this would be.

[OvidijusParsiunas]

After a bit of consideration I went with split(''). This has now been published in the deep-chat-dev package version 9.0.66 and will be released in the core package some time this week.

[wysstartgo]

Okay,Thanks!

[OvidijusParsiunas]

Hi. The functionality discussed above has now been released in Deep Chat version 1.4.4. Please read the release notes for more information.

To note, simulation functionality has been changed to populate by character rather than word. So the recommended default number value is 6, but you can ofcourse change it to your preference.

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