【Reactでchat機能を実装するためのUIライブラリchat-ui-kit-reactが好みのUI過ぎるので使い方を解説する】

まずはinstallして、雛形をコピペで貼り付けて、実際にどのようなUIなのか試してみるといい。

個人的に非常に好みです。
参照記事: https://reposhub.com/react/ui-frameworks/chatscope-chat-ui-kit-react.html

【雛形】

npm install @chatscope/chat-ui-kit-react
npm install @chatscope/chat-ui-kit-styles

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
    Avatar
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
            position: "normal",
            direction: "incoming"
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;

以下のようなUIが表示される。

一つ一つ解説していく。

【Formについて】

・画像の下側の「ファイル参照ボタン・入力フォーム・送信ボタン」これらは
<MessageInput placeholder="Type message here" />というComponentにまとめられている。

・このFormをカスタマイズするには以下のようにすればいい。
attachButton={false}で左下のファイル参照ボタンが消える。
sendButton={false}で送信ボタンを消すことができる。

<MessageInput placeholder="Type message here" attachButton={false} sendButton={false}/>

【Messageについて】

・Hello my frendと表示されているMessageは、以下の部分で構成されている。

<Message
     model={{
       message: "Hello my friend",
       sentTime: "just now",
       sender: "Joe",
　　　　position: "normal",
　　　　direction: "incoming"
     }}
 />

つまり、以下のように単純に３つ置くだけでMessageは３つ表示される。

<div style={{ position: "relative", height: "500px" }}>
                <MainContainer>
                    <ChatContainer>
                    <MessageList>
                        <Message
                        model={{
                            message: "Hello my friend",
                            sentTime: "just now",
                            sender: "Joe",
                            position: "normal",
                            direction: "incoming"
                        }}
                        />
                        <Message
                        model={{
                            message: "Hello my friend",
                            sentTime: "just now",
                            sender: "Joe",
                            position: "normal",      
                            direction: "incoming"
                        }}
                        />
                        <Message
                        model={{
                            message: "Hello my friend",
                            sentTime: "just now",
                            sender: "Joe",
                            position: "normal",
                            direction: "incoming"
                        }}
                        />
                    </MessageList>
                    <MessageInput placeholder="Type message here"/>
                    </ChatContainer>
                </MainContainer>
            </div>

「positionオプション」は[ first, normal, last ]などがある。
firstとnormalはmessageの型枠は同じだがfirstのみひとつ上のmessageと少し間を開けてくれる。
lastは他２つと少し形を変えてlast Messageであることを視覚化してくれる。
以下の画像は、上から順にnormal, first, lastのpositionを設定したものである。

・「directionオプション」はMessageの表示位置を相手か自分かに設定できるものだ。
direction: "incoming"で左に表示。
direction: "outgoing"で右に表示。

【Avatarについて】

このライブラリではAvatar、つまりユーザーアイコンを表示するのもサポートしてくれる。
例えば以下のようなUiをつくることができる。

上記の左側はいかのようなCodeになっている。（import時にAvatarComponentを使えるようにしておかないとAvatarがないというエラーが出る）

import logo from './logo192.png';
<Message
      model={{
           message: "Hello my friend",
           sentTime: "just now",
           sender: "Joe",
           position: "first"                       
           direction: "incoming"  
       }}>
      <Avatar src={logo} name="React-logo"/>
</Message>
 <Message
      model={
           message: "Hello my friend",
           sentTime: "just now",
           sender: "Joe",
           position: "first",
           direction: "incoming"
      }}>
      <Avatar src={logo} name="React-logo"/>
</Message>
<Message
      model={{
           message: "Hello my friend",
           sentTime: "just now",
           sender: "Joe",
           position: "first",
           direction: "incoming"
      }}>
      <Avatar src={logo} name="React-logo"/>
</Message>

また、Avatar用のspaceを空けてくれるoptionもあります。

<Message model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Akane",
            direction: "incoming",
            position: "last"
 }} avatarSpacer={true} />

avatarSpacer={true} とすると以下のようなAvatarスペースの空いたMessageが追加されます。

以上。
さらに詳しくはDocumentを参照してください。ほかにもいろいろできそうなので。
https://chatscope.io/storybook/react/?path=/docs/documentation-introduction--page