Option to lock messages so responseInterceptor modifies the last AI message, not the first available

[nicholasturk]

When a response is streaming, in the response interceptor you can add messages

const responseInterceptor = (response) => {
  if (message.text === "special") {
     return deepChat.addMessage(formatSpecialMessage(response))
  }
  if (domContainsSpecial()) {
     removeSpecial()
     deepChat.addMessage(response)
  }
  return response;
};

So a streamed response like this:

["Foo", "special", "Bar", "Baz"]

Would generate a DeepChat output like:
1.
Foo
2.
Foo
Special
3.
Foo
Bar
4.
Foo Baz
Bar

However, I want the final output to be

Foo
Bar Baz

So the last streamed messages gets appended to the last message. Is this possible?

[OvidijusParsiunas]

Hi @nicholasturk.

The way streamed messages are coded is that they pretty much lock on to the message bubble they are populating. The reason for this is to allow dynamic use-cases where there could be multiple messages being streamed at the same time.

Due to this, what you are proposing cannot be achieved by conventional means.

However, there is a hacky way to do it.

Just to re-iterate, what you want is to be able to add a new separate message bubble via addMessage during a stream and want the stream results to be added to it - instead of the original message bubble.
This can be achieved via the following approach:

• When you want the stream results to be populated onto the new - or any other message, use updateMessage to update that message.
• Return {text: ""} in the interceptor's result.
• You will need to track state like the current stream result in your app

Using your example as a starting reference:

const responseInterceptor = (response) => {
   if (newMessageText) {
      newMessageText += response.text;
      deepChat.updateMessage({text: newMessageText}, deepChat.getMessages().length - 1);
      return {text: ""};
  } else if (message.text === "special") {
      newMessageText = response.text;
      deepChat.addMessage(response);
      return {text: ""}
  }
  return response;
};

• Set up a variable that can track state such as newMessageText which would have the cumulated stream result. It should start of as undefined/null or "".
• The if (newMessageText) { is going to be ignore for the first passes.
• When text is "special", update newMessageText to start tracking what the new message text should be and add the new message.
• For further passes, since newMessageText will have something assigned to it, keep tracking its state and use updateMessage along with getMessages to get the latest message index and update the message accordingly.

Hopefully this helps you.

Thanks!