New Component: Message Stream

[rakuzen25]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Would be good to have a component that looks like a chat/log/event stream with timestamps, icons, etc, something like a terminal console or an IRC client. e.g. Discord's compact mode:

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

Haven't found a good UI lib example yet, will keep looking.

Right now I'm trying to implement using a plain list. I'll post a screenshot once I'm finished.

[rakuzen25]

Absolutely terrible mockup and colour choice, but basically something like this.

[endigo9740]

Thanks @leranjun. This is definitely something I'm interested in creating at some point. I like the idea of these odd non-standard components. I'm on Twitch and YouTube Live all the time, so I know we can draw some inspiration for what they're doing.

[rakuzen25]

Good point! Livestream chats could be a good ref.

[rakuzen25]

Something I found similar to this: https://dribbble.com/shots/18260734-Cards-Event-Log

[endigo9740]

@leranjun I'm sorry it's taken me so long to be back to this issue, but I misunderstood the original intention of this. I was under the impression you were looking for something closer to a chat log. There's been a solution available for this all the time - the list element!

<div class="w-full text-token card p-4 space-y-4">
	<ol class="list">
		{#each listData as v, i}
			<li>
				<small>Jan 05 01:15</small>
				<i class="fa-solid fa-credit-card text-xs" />
				<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</span>
			</li>
		{/each}
	</ol>
</div>

Obviously you may wish to adjust and customize this a bit further, but this should offer what you're looking for. You might just make considerations for setting a set width for the items within the <li>, but it naturally accepts multiple elements as a column per row.

FYI I do have need of a proper chat-style UI (ex: Twitch chat), so I'll open a new ticket that will cover this. I'll be prioritizing this as part of the next release of Skeleton as we have need for it in an upcoming Skeleton Labs project.

[endigo9740]

For anyone looking for the chat UI, I've created a feature request here:

• New Component: Chat/Prompt UI #1354