Chat thread simulator with a dynamic/non-linear timeline?

[nebrekab]

Hi,

My goal is to create a simulation/demo of a whatsapp style chat thread that is driven by a JSON file and constructed (and repurposed) on-the-fly. I am thinking that Remotion could be a good fit?..

The concept
You have 2 users that have a conversation over time. The speech bubbles within the thread would animate into place. The first user's speech bubbles would appear on the left and the second user on the right. The thread playback would pause between messages until the conversation ends.

JSON to drive a chat thread
Here's some dummy JSON that I think is a good starting point:

{
    "conversers" : {
        "coach": {
            "name": "Sam,",
            "icon": "logo.svg",
            "position": "left"
        },
        "user": {
            "name": "Christina",
            "icon": "whatsapp.svg",
            "position": "right"
        }
    },
    "thread": [
        {
            "type": "pause",
            "duration": 4000
        },
        {
            "type": "chat",
            "converser": "coach",
            "message": "Let's get you trained up on xyz",
            "timestamp": "22-08-2024 11:00:00",
            "duration": 5000
        },
        {
            "type": "pause",
            "duration": 4000
        },
        {
            "type": "chat",
            "converser": "user",
            "message": "Okay, how do I use this thing?",
            "timestamp": "22-08-2024 11:02:00",
            "duration": 5000
        },
        {
            "type": "pause",
            "duration": 4000
        }
    ]
}

So over time a conversation between Sam and Christina would take place. The duration of the video would be based on the totalled duration of items in the thread property. Simply by switching out this JSON data, you could make a new conversation example with a thread duration as long as necessary.

A dynamic non-linear timeline?
With the above example, the thread array and its inner objects would not just drive the duration, but also the structure. Based on the type of thread event, the message content and the user speaking at the time, the threads visuals would be built over time.

Questions
Is the above feasible within Remotion? I see you can control duration, but am wondering about controlling the structure of the composition based on the configuration of the thread array data.

Thanks very much!

[JonnyBurger]

I think Remotion would be a great fit for this! I also thought about building this.

The JSON would be the input props.
You could render a <Sequence layout="none"> for each item in the array to make messages appear after another.
The duration you could dynamically calculate in calculateMetadata() for example by multiplying the array length with a set duration

[nebrekab]

Bah, and there was me thinking I was a trailblazer... :)

Great to hear it's a good fit, and thanks for the pointer. I had spotted both the metadata and Sequence components, and thought they could come into the fold.

This has been parked for the time-being, but I'm eager to delve into Remotion and explore the possibilities. Thanks for your reply and creating such a cool tool!

[JonnyBurger]

You still are, because it only gets real once somebody builds it, ideas are cheap :)

[nebrekab]

Very true!