You look at him, amused;
he seems like a different person.
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<div class="ts-conversation is-sent">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Ayame Hoshino</div>
<div class="text">
You look at him, amused;<br>
he seems like a different person.
</div>
<div class="meta">
<div class="item">PM 11:58</div>
</div>
</div>
</div>
</div>Message States
A message has been sent to the server but not yet read by the recipient.
You thought you'd gotten used to it,
but you still can't say the words.
but you still can't say the words.
<div class="ts-conversation is-sent">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Kakeru Kimishima</div>
<div class="text">
You thought you'd gotten used to it,<br>
but you still can't say the words.
</div>
<div class="meta">
<div class="item">PM 10:04</div>
</div>
</div>
</div>
</div>A message is still being sent to the server, possibly due to slow internet speed.
You still argue,
but sometimes you think it's not so bad.
but sometimes you think it's not so bad.
<div class="ts-conversation is-sending">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Fumi Natsuki</div>
<div class="text">
You still argue,<br>
but sometimes you think it's not so bad.
</div>
<div class="meta">
<div class="item">AM 12:04</div>
</div>
</div>
</div>
</div>A message has been received and read by the recipient.
You say what you once hated, and it turns into an argument.
<div class="ts-conversation is-read">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Oritsuru Kawai</div>
<div class="text">
You say what you once hated, and it turns into an argument.
</div>
<div class="meta">
<div class="item">PM 05:26</div>
</div>
</div>
</div>
</div>A message error occurred during sending.
Years later, you've changed; you tell them not to compromise.
<div class="ts-conversation is-error">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Masaaki Kiba</div>
<div class="text">
Years later, you've changed; you tell them not to compromise.
</div>
<div class="meta">
<div class="item">PM 08:14</div>
</div>
</div>
</div>
</div>Structure
A quote is a reference to another message.
Have big dreams,
I always say that, right?
I always say that, right?
I had the chance,
but lacked the courage to choose right.
but lacked the courage to choose right.
<div class="ts-conversation">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Kanade Hachima</div>
<div class="quote">
<div class="author">Tsukino Amakusa</div>
<div class="text">
Have big dreams,<br>
I always say that, right?
</div>
</div>
<div class="text">
I had the chance,<br>
but lacked the courage to choose right.
</div>
<div class="meta">
<div class="item">PM 04:58</div>
</div>
</div>
</div>
</div>A message with a link can have a preview of the link.
In May in Beijing, it's light at 4 a.m.,
and I've been away from home for days, like a nomad.
and I've been away from home for days, like a nomad.
Yami's Blog
Asus calls itself a "Chinese company," and block the Japan Asus-Hololive partnership.
The ROG Weibo account posted that they would do everything possible to stop the collaboration.
<div class="ts-conversation" style="max-width: 400px">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Seiichi Kageyama</div>
<div class="text">
In May in Beijing, it's light at 4 a.m.,<br>
and I've been away from home for days, like a nomad.
</div>
<div class="preview">
<div class="site">Yami's Blog</div>
<div class="title">Asus calls itself a "Chinese company," and block the Japan Asus-Hololive partnership.</div>
<div class="content">The ROG Weibo account posted that they would do everything possible to stop the collaboration.</div>
<div class="embed">
<img src="image.png">
</div>
</div>
<div class="meta">
<div class="item">PM 03:04</div>
</div>
</div>
</div>
</div>
I can't tell them; today's negative reviews increased.
It's 2:55 a.m.,
and today is only half over.
and today is only half over.
<div class="ts-conversation" style="max-width: 400px">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Suzune Shinonome</div>
<div class="object">
<div class="ts-image">
<img src="image.png">
</div>
</div>
<div class="text">
I can't tell them; today's negative reviews increased.
</div>
</div>
</div>
</div>
<div class="ts-conversation" style="max-width: 400px">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Sota Yamazaki</div>
<div class="object">
<div class="ts-imageset is-compact is-3-images">
<div class="item">
<img src="image.png">
</div>
<div class="item">
<img src="image.png">
</div>
<div class="item">
<img src="image.png">
</div>
</div>
</div>
<div class="text">
It's 2:55 a.m.,<br>
and today is only half over.
</div>
</div>
</div>
</div>Variations
A message can be aligned to the right to indicate that it was sent by the user.
Reasons come before results,
but it depends on your view of time.
but it depends on your view of time.
<div class="ts-conversation is-self">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Tsukasa Nitta</div>
<div class="text">
Reasons come before results,<br>
but it depends on your view of time.
</div>
<div class="meta">
<div class="item">PM 05:18</div>
</div>
</div>
</div>
</div>A message can look more compact and remove unnecessary paddings if it only contains an object.
<div class="ts-conversation is-object-only is-sent">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="object">
<div class="ts-image">
<img src="image.png">
</div>
</div>
<div class="meta">
<div class="item">AM 06:37</div>
</div>
</div>
</div>
</div>Compositions
A message can have Chip reactions placed under it.
Everyone needs to live;
not everyone has the courage to risk it all.
not everyone has the courage to risk it all.
<div class="ts-conversation">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Rihito Sato</div>
<div class="text">
Everyone needs to live;<br>
not everyone has the courage to risk it all.
</div>
</div>
<div class="ts-wrap is-compact has-top-spaced-small">
<label class="ts-chip is-toggle is-secondary is-circular is-outlined">
<input type="checkbox" checked="">
<div class="content">👌 21</div>
</label>
<label class="ts-chip is-toggle is-secondary is-circular is-outlined">
<input type="checkbox">
<div class="content">👀 8</div>
</label>
<div class="ts-chip is-outlined is-circular" style="padding: 0.1rem 0.5rem">
<span class="ts-icon is-regular is-face-smile-icon"></span>
</div>
</div>
</div>
</div>A message can have Meta displayed under it.
You wonder when you died.
In the end, you recall a scene.
In the end, you recall a scene.
<div class="ts-conversation">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Mhlia</div>
<div class="text">
You wonder when you died.<br>
In the end, you recall a scene.
</div>
</div>
<div class="ts-meta is-small is-secondary">
<a class="item">Like</a>
<a class="item">Reply</a>
<a class="item">3 mins</a>
</div>
</div>
</div>
You're in: Teyran, Tis City
11 players here.
The town exit is nearby.
11 players here.
The town exit is nearby.
<div class="ts-conversation">
<div class="avatar">
<img src="user.png">
</div>
<div class="content">
<div class="bubble">
<div class="author">Text-based RPG Game Bot</div>
<div class="text">
You're in: <b>Teyran, Tis City</b><br>
11 players here.<br>
The town exit is nearby.
</div>
<div class="meta">
<div class="item">PM 01:02</div>
</div>
</div>
<div class="ts-grid is-compact is-evenly-divided has-top-spaced-small">
<div class="column">
<button class="ts-button is-small is-secondary is-fluid">
⬆️ Forward
</button>
</div>
<div class="column">
<button class="ts-button is-small is-secondary is-fluid">
↩️ Return
</button>
</div>
<div class="column">
<button class="ts-button is-small is-secondary is-fluid">
👁️🗨️ Investigate
</button>
</div>
</div>
</div>
</div>