ChatUI简单用法

官网：ChatUI官网
安装：npm i @chatui/core -S

Demo

import React from 'react';
import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/es/styles/index.less';
import '@chatui/core/dist/index.css';


const initialMessages = [
    {
        type: 'text',
        content: { text: '主人好，我是智能助理，你的贴心小助手~' },
        user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' },
    },
    // {
    //     type: 'image',
    //     content: {
    //         picUrl: '//img.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png',
    //     },
    // },
];

// 默认快捷短语，可选
const defaultQuickReplies = [
    {
        icon: 'message',
        name: '联系人工服务',
        isNew: true,
        isHighlight: true,
    },
    {
        name: '短语1',
        isNew: true,
    },
    {
        name: '短语2',
        isHighlight: true,
    },
    {
        name: '短语3',
    },
];

export default function () {
    // 消息列表
    const { messages, appendMsg, setTyping } = useMessages(initialMessages);

    // 发送回调
    function handleSend(type, val) {
        if (type === 'text' && val.trim()) {
            // TODO: 发送请求
            appendMsg({
                type: 'text',
                content: { text: val },
                position: 'right',
                user: {
                    avatar: 'https://himg.bdimg.com/sys/portraitn/item/public.1.4c18cf68.HQdaRZEoQc5sAz68VhfZWw'
                }
            });

            setTyping(true);

            // 调用接口 -----------------
            // 模拟回复消息
            setTimeout(() => {
                appendMsg({
                    type: 'text',
                    content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
                    position: 'left',
                    // user: {
                    //     avatar: 'https://profile-avatar.csdnimg.cn/67e3f0edbca74106942d6219b263d9db_rcx0113.jpg!1'
                    // }
                });
            }, 1000);
        }
    }

    // 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
    function handleQuickReplyClick(item) {
        handleSend('text', item.name);
    }

    // 消息内容渲染函数
    function renderMessageContent(msg) {
        const { type, content } = msg;

        // Bubble 区分对话 根据消息类型来渲染
        switch (type) {
            case 'text':
                return <Bubble content={content.text} />;
            case 'image':
                return (
                    <Bubble type="image">
                        <img src={content.picUrl} alt="" />
                    </Bubble>
                );
            default:
                return null;
        }
    }

    return (
        <Chat
            loadMoreText='loading' //加载更多文案
            navbar={{ title: '智能助理' }}
            wideBreakpoint='600px' //同时支持移动端和PC 通过断点实现响应式设计
            messages={messages}
            renderMessageContent={renderMessageContent}
            quickReplies={defaultQuickReplies} //快捷短语列表
            onQuickReplyClick={handleQuickReplyClick}
            onSend={handleSend}
        // Composer={footer} //覆盖本来的底部
        />
    );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

效果图

基础参数

自定义底部输入框 仅个人可见