alanhc-til

title: "chat聊天界面初探" date: "2023-08-27" tag: ["chat"]

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

render:

<MainContainer>
	<ChatContainer>
		<MessageList>
			<Message model={{
			message: "Hello my friend",
			sentTime: "just now",
			sender: "Joe"
			}} />
		</MessageList>
	<MessageInput placeholder="Type message here" />
	</ChatContainer>
</MainContainer>

另外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