Chat

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

A component for displaying content in a chat conversation style.

↓

Preview

Taro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Resize

<Chat name="Taro" avatar="https://cdn.lism-css.com/img/avatar/a-01.jpg">
  <p>Lorem ipsum dolor sit amet...</p>
</Chat>

<div class="c--chat c--chat--speak l--grid -ji:start" style="--keycolor: var(--gray)" data-chat-dir="start">
  <div class="c--chat_avatar l--frame -bgc:base -ar:1/1 -bdrs:99" src="https://cdn.lism-css.com/img/avatar/a-01.jpg" aria-hidden="true">
    <img src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="" width="60" height="60" decoding="async" />
  </div>
  <div class="c--chat_name -c:text-2 -fs:italic -fz:2xs -lh:1 -py:5 -px:10 -aslf:end">Taro</div>
  <div class="c--chat_body -pos:relative">
    <div class="c--chat_deco a--decorator is--skipFlow u--cbox -pos:absolute" aria-hidden="true"></div>
    <div class="c--chat_content l--flow u--cbox -flow:s -bdrs:30 -p:20 -lh:s -jslf:start">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>

Usage

Provided as Chat (c--chat) from the @lism-css/ui package.

Import

import { Chat } from '@lism-css/ui/react';

Props

Property	Description
`avatar`	Specifies the `src` of the chat avatar image.
`name`	Specifies the name displayed in the chat.
`variant`	Specifies the chat type. Available options: `speak` or `think`.
`direction`	Specifies the display position of the chat. Use `start` or `end`.
`keycolor`	Specifies the key color of the chat bubble.
`flow`	Passed to the element wrapping the content (`c--chat_content`).

Source Code

The source code is available on GitHub.

Examples

↓

Usage examples of <Chat>

Taro

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Hanako

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Resize

<Chat name="Taro" avatar="https://cdn.lism-css.com/img/avatar/a-01.jpg">
  <DummyText lang="en" />
</Chat>
<Chat direction="end" name="Hanako" avatar="https://cdn.lism-css.com/img/avatar/a-02.jpg" keycolor="green">
  <DummyText lang="en" length="codes" />
</Chat>

Opt-in styles

variant=“think”

A style for representing thoughts — speech the character thinks but doesn’t say aloud.

↓

variant='think'

Name B

Lorem ipsum dolor sit amet.

Name B

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Resize

<Chat variant="think" name="Name B" avatar="https://cdn.lism-css.com/img/avatar/a-01.jpg" keycolor="blue">
  <DummyText length="xs" />
</Chat>
<Chat variant="think" direction="end" name="Name B" avatar="https://cdn.lism-css.com/img/avatar/a-02.jpg" keycolor="purple">
  <DummyText length="codes" />
</Chat>

@layer lism-component {
  .c--chat--think {
    --_deco-t: min(calc(var(--_avator-size) / 3), 1.5rem);
    --_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="1.5" cy="1.7" r="1.5"/><circle cx="4.5" cy="5.2" r="2.5"/></svg>');
  }
}