chainlit Incorrect message ordering in UI after 1.1.400

Describe the bug Assistant messages (including AskUserMessages) are stacked at the top of the chat window, with user messages at the bottom, instead of being in the order they were posted.

To Reproduce Steps to reproduce the behavior:

Update to chainlit 1.1.400 or later. Emit >1 turns of AskUserMessage/user input events to UI.

Expected behavior Messages are displayed in the order they were posted, with user input below the corresponding AskUserMessage.

Screenshots Screenshot 2024-08-16 at 9 58 56 PM

Desktop (please complete the following information):

Mac, Chrome 127

Aug 17 '24 15:08 francisjervis

+1 also seeing this problem

Aug 18 '24 16:08 marty-sullivan

x2, also here!

Aug 28 '24 20:08 puppetm4st3r

I have the same issue

Aug 29 '24 02:08 Harbon

back to 1.3

Aug 29 '24 05:08 puppetm4st3r

I thought it was intentional ;) But it seams is an error.

Sep 10 '24 20:09 fdojose

Confirming that this is still not fixed in 1.2.0.

Sep 20 '24 21:09 francisjervis

any news with this?

Sep 20 '24 22:09 puppetm4st3r

agree this is broken .. If you refresh page, it reorders correctly. Downgrading to 1.1.306 works.

Sep 27 '24 16:09 scdozier

same issue.

Version: 1.1.306

Version: 1.2

Oct 11 '24 07:10 tugbayatilla

@dokterbob the issue is clear in this commit "e3a42ba377cf70bc851c3bea2aa65f161602a634" for version 1.1.400rc1

It seems something is wrong with the Messages.tsx file where the sequence of messages is not being properly handled

@willydouhard I have seen you are the developer for this change. I would appreciate if you can jump in and have a look thanks The flag isLast has been removed from the Message class and not being used anymore after version 1.1.306

Oct 23 '24 09:10 yyoussef11

The problem remains in v1.3.0 [2024-10-22]. Long live v1.1.306!!!!

Oct 23 '24 18:10 gcleaves

+1 here. It would seem to me that showing messages in the correct order is a must have for a chat application.

Oct 28 '24 09:10 previacita

Samen problem.

Oct 29 '24 12:10 anthonym1991

+1 Facing the same problem here with v1.3.1 too.

Nov 04 '24 10:11 pmercier

Tested different code version to confirm that it's front related:

Using 1.1.306 for front and back : No problem
Using 1.1.400 for front and back : Incorrect sequencing
Using 1.1.306 frontend code with 1.3.1 backend : No problem
Using 1.1.400 frontend code with 1.3.1 backend : Incorrect sequencing

Looking in changelog / code / debugging :

Between 1.1.306 and 1.1.400, the step notion was added.
Before 1.1.400, all messages was stored sequentially in frontend memory.
After 1.1.400, they are stored as step in their parent.

When activating data persistency, if we reload the chat with a good old F5, whatever code version, the messages are displayed in proper order.

Nov 05 '24 10:11 pmercier

With persistency and this code:

async def main(msg: cl.Message):
        await cl.AskUserMessage(content="Hello, give me an answer that'll ignore.").send()
        await cl.Message(content="Don't care am happy !").send()

I've this when chatting :

And when reloading the conversation i've :

The message memory is different before and after the refresh.

Message memory before the refresh :

[
  {
    "threadId": "",
    "id": "0652bb75-c9e9-42d5-ba97-d27f1762cfd3",
    "name": "admin",
    "type": "user_message",
    "output": "case h3",
    "createdAt": "2024-11-05T11:22:29.671Z",
    "steps": [
      {
        "steps": [
          {
            "id": "5eab16ab-c331-4c1d-98c0-41311404bf9c",
            "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
            "parentId": "00f10720-879a-404c-9358-d62509dfb02f",
            "createdAt": "2024-11-05T11:22:31.362621Z",
            "start": "2024-11-05T11:22:31.362621Z",
            "end": "2024-11-05T11:22:31.362621Z",
            "output": "Hello, give me an answer that'll ignore.",
            "name": "Assistant",
            "type": "assistant_message",
            "language": null,
            "streaming": false,
            "isError": false,
            "waitForAnswer": true,
            "indent": null,
            "metadata": {},
            "tags": null,
            "showInput": null
          },
          {
            "id": "144ab8f7-cf9d-487b-aea2-ddc158b03376",
            "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
            "parentId": "00f10720-879a-404c-9358-d62509dfb02f",
            "createdAt": "2024-11-05T11:22:42.479838Z",
            "start": "2024-11-05T11:22:42.479838Z",
            "end": "2024-11-05T11:22:42.479838Z",
            "output": "Don't care am happy !",
            "name": "Assistant",
            "type": "assistant_message",
            "language": null,
            "streaming": false,
            "isError": false,
            "waitForAnswer": false,
            "indent": null,
            "metadata": {},
            "tags": null
          }
        ],
        "name": "on_message",
        "type": "run",
        "id": "00f10720-879a-404c-9358-d62509dfb02f",
        "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
        "parentId": "0652bb75-c9e9-42d5-ba97-d27f1762cfd3",
        "streaming": false,
        "metadata": {},
        "tags": null,
        "input": "case h3",
        "isError": false,
        "output": "",
        "createdAt": "2024-11-05T11:22:31.355751Z",
        "start": "2024-11-05T11:22:31.355773Z",
        "end": "2024-11-05T11:22:42.481253Z",
        "language": null,
        "showInput": "json",
        "generation": null
      }
    ]
  },
  {
    "threadId": "",
    "id": "1446cf15-52ef-4bda-b09a-0193ae45a0e4",
    "name": "admin",
    "type": "user_message",
    "output": "test",
    "createdAt": "2024-11-05T11:22:40.050Z"
  }
]

Chat memory after the reload :

[
  {
    "id": "0652bb75-c9e9-42d5-ba97-d27f1762cfd3",
    "name": "admin",
    "type": "user_message",
    "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
    "parentId": null,
    "streaming": false,
    "waitForAnswer": false,
    "isError": false,
    "metadata": {},
    "tags": null,
    "input": "",
    "output": "case h3",
    "createdAt": "2024-11-05T11:22:31.353220Z",
    "start": "2024-11-05T11:22:31.353220Z",
    "end": "2024-11-05T11:22:31.353220Z",
    "generation": {},
    "showInput": null,
    "language": null,
    "indent": null,
    "feedback": null,
    "steps": [
      {
        "id": "00f10720-879a-404c-9358-d62509dfb02f",
        "name": "on_message",
        "type": "run",
        "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
        "parentId": "0652bb75-c9e9-42d5-ba97-d27f1762cfd3",
        "streaming": false,
        "waitForAnswer": null,
        "isError": false,
        "metadata": {},
        "tags": null,
        "input": "case h3",
        "output": "",
        "createdAt": "2024-11-05T11:22:31.355751Z",
        "start": "2024-11-05T11:22:31.355773Z",
        "end": "2024-11-05T11:22:42.481253Z",
        "generation": null,
        "showInput": "json",
        "language": null,
        "indent": null,
        "feedback": null,
        "steps": [
          {
            "id": "5eab16ab-c331-4c1d-98c0-41311404bf9c",
            "name": "Assistant",
            "type": "assistant_message",
            "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
            "parentId": "00f10720-879a-404c-9358-d62509dfb02f",
            "streaming": false,
            "waitForAnswer": true,
            "isError": false,
            "metadata": {},
            "tags": null,
            "input": "",
            "output": "Hello, give me an answer that'll ignore.",
            "createdAt": "2024-11-05T11:22:31.362621Z",
            "start": "2024-11-05T11:22:31.362621Z",
            "end": "2024-11-05T11:22:31.362621Z",
            "generation": {},
            "showInput": null,
            "language": null,
            "indent": null,
            "feedback": null
          },
          {
            "id": "1446cf15-52ef-4bda-b09a-0193ae45a0e4",
            "name": "admin",
            "type": "user_message",
            "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
            "parentId": "00f10720-879a-404c-9358-d62509dfb02f",
            "streaming": false,
            "waitForAnswer": false,
            "isError": false,
            "metadata": {},
            "tags": null,
            "input": "",
            "output": "test",
            "createdAt": "2024-11-05T11:22:42.475248Z",
            "start": "2024-11-05T11:22:42.475248Z",
            "end": "2024-11-05T11:22:42.475248Z",
            "generation": {},
            "showInput": null,
            "language": null,
            "indent": null,
            "feedback": null
          },
          {
            "id": "144ab8f7-cf9d-487b-aea2-ddc158b03376",
            "name": "Assistant",
            "type": "assistant_message",
            "threadId": "730b0b55-b4b9-4589-b1c8-3a95735cb323",
            "parentId": "00f10720-879a-404c-9358-d62509dfb02f",
            "streaming": false,
            "waitForAnswer": false,
            "isError": false,
            "metadata": {},
            "tags": null,
            "input": "",
            "output": "Don't care am happy !",
            "createdAt": "2024-11-05T11:22:42.479838Z",
            "start": "2024-11-05T11:22:42.479838Z",
            "end": "2024-11-05T11:22:42.479838Z",
            "generation": {},
            "showInput": null,
            "language": null,
            "indent": null,
            "feedback": null
          }
        ]
      }
    ]
  }
]

We can clearly see that AskUserMessage don't store the parentId during a chat session but it'll send it to the persistency layer.

Nov 05 '24 11:11 pmercier

Have it working correctly now. It'll make a PR .

Nov 05 '24 13:11 pmercier

For those who need it, the patch can be back ported to 1.1.400 if you package your own frontend.

Nov 05 '24 15:11 pmercier

@dokterbob @willydouhard Please review the pull request ;)

Nov 06 '24 07:11 gcleaves

guys make sure that you are not entering a static id. res = cl.Message(content="", id="message_id")

Dec 24 '24 12:12 imadNaseer