<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contents</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

## chat
`npx create-next-app chat`
`pnpm add @chatscope/chat-ui-kit-react`
`pnpm add @chatscope/chat-ui-kit-styles`
```js
import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react';
```
render:
```js
<div>
  <div>
    <div>
      <div></div>
    </div>
    <div></div>
  </div>
</div>```
![](https://i.imgur.com/kKmfEPC.png)
另外azure也有自己的UI庫：https://azure.github.io/communication-ui-library/?path=/docs/overview--page
看功能怎麼使用: https://chatscope.io/storybook/react/?path=/story/documentation-introduction--page
## Ref
- https://github.com/chatscope/chat-ui-kit-react

</body>
</html>


## chat 
`npx create-next-app chat`
`pnpm  add @chatscope/chat-ui-kit-react`
`pnpm add @chatscope/chat-ui-kit-styles`
```js
import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react';
```
render:
```js
<MainContainer>
	<ChatContainer>
		<MessageList>
			<Message model={{
			message: "Hello my friend",
			sentTime: "just now",
			sender: "Joe"
			}} />
		</MessageList>
	<MessageInput placeholder="Type message here" />
	</ChatContainer>
</MainContainer>
```

![](https://i.imgur.com/kKmfEPC.png)
另外azure也有自己的UI庫：https://azure.github.io/communication-ui-library/?path=/docs/overview--page
看功能怎麼使用: https://chatscope.io/storybook/react/?path=/story/documentation-introduction--page

## Ref
- https://github.com/chatscope/chat-ui-kit-react

chat聊天界面初探

`npx create-next-app chat`
`pnpm  add @chatscope/chat-ui-kit-react`
`pnpm add @chatscope/chat-ui-kit-styles`

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


另外azure也有自己的UI庫：https://azure.github.io/communication-ui-library/?path=/docs/overview--page

看功能怎麼使用: https://chatscope.io/storybook/react/?path=/story/documentation-introduction--page

![](https://i.imgur.com/kKmfEPC.png)
另外azure也有自己的UI庫：https://azure.github.io/communication-ui-library/?path=/docs/overview--page
看功能怎麼使用: https://chatscope.io/storybook/react/?path=/story/documentation-introduction--page

https://github.com/chatscope/chat-ui-kit-react