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

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

個人的に非常に好みです。
参照記事: [https://reposhub.com/react/ui-frameworks/chatscope-chat-ui-kit-react.html](https://reposhub.com/react/ui-frameworks/chatscope-chat-ui-kit-react.html)
###【雛形】###

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

```jsx
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が表示される。
![50120F91-9558-4EC6-9C35-A917E43509CD.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/e03f99af-c8d4-3398-38fe-b5ffc5a909b8.jpeg)
一つ一つ解説していく。

###【Formについて】###

・画像の下側の「ファイル参照ボタン・入力フォーム・送信ボタン」これらは
 `<MessageInput placeholder="Type message here" />`というComponentにまとめられている。
![D17D63EC-AEB7-4655-8E23-5A655E20B8E1_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/373c28a4-bb5c-c242-2941-6a269097bad4.jpeg)

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

```jsx
<MessageInput placeholder="Type message here" attachButton={false} sendButton={false}/>
```
![744551E9-6495-4B4A-9A00-C20B8949939F_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/50528ea0-4ac4-3bd9-4fdd-396a1eb92ad1.jpeg)
###【Messageについて】###
・Hello my frendと表示されているMessageは、以下の部分で構成されている。

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

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

```jsx
<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>
```
![EE37A38D-3641-4347-8550-9558368D131A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/46816301-721a-cd3a-0302-fa81aa595da3.jpeg)
「positionオプション」は[ first, normal, last ]などがある。
firstとnormalはmessageの型枠は同じだがfirstのみひとつ上のmessageと少し間を開けてくれる。
lastは他２つと少し形を変えてlast Messageであることを視覚化してくれる。
以下の画像は、上から順に`normal, first, last`のpositionを設定したものである。
![70EA24B2-78C4-4C98-86C4-759F26355E7B_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/a4dbba00-ae80-9259-1f5f-3960e8b8d01e.jpeg)

・「directionオプション」はMessageの表示位置を相手か自分かに設定できるものだ。
`direction: "incoming"`で左に表示。
`direction: "outgoing"`で右に表示。
![8B1868E9-17A9-4EDD-9177-0BA515B5FCB9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/f7dd849e-c742-a068-6583-dc57550574c8.jpeg)

###【Avatarについて】###
このライブラリではAvatar、つまりユーザーアイコンを表示するのもサポートしてくれる。
例えば以下のようなUiをつくることができる。
![5A276F7A-929F-4809-81C2-178A27BBD00D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/8cde7dcd-1e77-61e3-ca18-6f4a7ed69b12.jpeg)

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

```jsx
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もあります。

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

`avatarSpacer={true}` とすると以下のようなAvatarスペースの空いたMessageが追加されます。
![501B505D-C824-40AE-BE8A-AC63A3BAA87E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530710/7c2721bb-d9bc-66ba-3817-d208b230b8bd.jpeg)

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