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, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation.
  </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" 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 -hl:0 -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 -hl:s -jslf:start">
      <p>
        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.
      </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

| Prop | 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

↓

<Chat> examples

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>');
  }
}