Tailwind

Chat

Create a custom chat feed or AI prompt interface using features provided by Skeleton and Tailwind.

Page Source

Demo

Jane

Yesterday @ 2:30pm

Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.

Michael

Yesterday @ 2:45pm

Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.

Jane

Yesterday @ 2:50pm

Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.

Michael

Yesterday @ 2:52pm

Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.

If you wish to review the source for the complete example above, please tap the Page Source button near the top of the page. We'll cover each core principle in the sections below.

Layout Columns

We recommend using Tailwind's grid column utility classes to define horizontal columns for your layout.

(nav)
(feed)
(online)
(nav)
(feed)

Layout Rows

We recommend using Tailwind's grid row utility classes to define vertical layout rows for your layout.

(search)
(list)
(footer)

(feed)

Assumenda perferendis distinctio vel ut perferendis earum voluptatibus. Aliquam quos fugit temporibus aliquam ab voluptatum. Unde distinctio pariatur rem provident. Eum illo officia. Dicta iste quos libero doloribus. A deserunt cumque delectus optio consequatur dicta aperiam. Eaque a architecto ad similique similique totam. Modi facere dignissimos. Facilis voluptatibus delectus. Totam debitis minus officia unde officia aspernatur nisi magnam. Assumenda eligendi dolorem. Alias odio esse quia.

(prompt)

Message Feed

Within our feed element, we'll generate a feed of messages. Note that we'll replace the pre tags in the next section.

host: {
  "id": 0,
  "host": true,
  "avatar": 48,
  "name": "Jane",
  "timestamp": "Yesterday @ 2:30pm",
  "message": "Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.",
  "color": "variant-soft-primary"
}
guest: {
  "id": 1,
  "host": false,
  "avatar": 14,
  "name": "Michael",
  "timestamp": "Yesterday @ 2:45pm",
  "message": "Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.",
  "color": "variant-soft-primary"
}

Message Bubbles

By mixing Skeleton features with Tailwind styling, we can provided message bubble interfaces for each type of feed post.

Jane

Yesterday @ 2:30pm

Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.

Michael

Yesterday @ 2:45pm

Provident quidem voluptatum quis. Veniam commodi architecto iure nisi cumque labore perferendis repellat debitis. Quibusdam cumque autem explicabo officia unde. Deleniti nostrum impedit facere at voluptatum totam itaque laborum laboriosam. Maiores ratione voluptas cumque ex accusamus. Voluptas placeat voluptates inventore nemo magnam vitae aliquam doloremque maxime.

Prompt

We can utilize a Skeleton Input Group to create a custom text prompt.


Scroll to Bottom

Chat windows typically remain fixed at the bottom of the scrollable pane. This can be triggered on page load and when a new message is added.

Use bind:this to bind your scrollable feed element.

typescript
let elemChat: HTMLElement;
html
<div bind:this={elemChat} class="overflow-y-auto">(chat)</div>

Then use Javascript's scrollTo method to scroll the binded element to the bottom on demand. You may also set smooth scrolling via behavior: 'smooth'.

typescript
function scrollChatBottom(behavior?: ScrollBehavior): void {
	elemChat.scrollTo({ top: elemChat.scrollHeight, behavior });
}

Add a Message

Below we'll cover how to append the message feed with a new message from the host user.

Per our above examples, we'll use the same messageFeed data structure.

typescript
let messageFeed = [ /* ...*/ ];

Then bind to the textarea for your prompt in order to capture any message typed by the user.

typescript
let currentMessage = '';
html
<textarea
	bind:value={currentMessage} name="prompt" id="prompt"
	placeholder="Write a message..."
/>

Here's an example of how we might append a new message to the messageFeed array.

typescript
function addMessage(): void {
	const newMessage = {
		id: messageFeed.length,
		host: true,
		avatar: 48,
		name: 'Jane',
		timestamp: new date(),
		message: currentMessage,
		color: 'variant-soft-primary'
	};
	// Append the new message to the message feed
	messageFeed = [...messageFeed, newMessage];
	// Clear the textarea message
	currentMessage = '';
	// Smoothly scroll to the bottom of the feed
	setTimeout(() => { scrollChatBottom('smooth'); }, 0);
}

This can be triggered when the prompt's SEND button is clicked.

html
<button ... on:click={addMessage}>Send</button>