ChatUI简单用法

最新推荐文章于 2024-05-20 10:01:15 发布

～晴天～～

最新推荐文章于 2024-05-20 10:01:15 发布

阅读量536

点赞数 7

分类专栏： chat 文章标签：前端

本文链接：https://blog.csdn.net/rcx0113/article/details/137057770

版权

chat 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在React项目中使用ChatUI库创建一个基本的聊天应用，包括消息列表、文本和图片消息、快捷回复以及用户交互功能的实现。

摘要由CSDN通过智能技术生成

官网：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} //覆盖本来的底部
        />
    );
}