前端react如何引入ChatUI实现类似chatgpt智能客服

小超^_^

已于 2024-01-04 10:10:37 修改

阅读量1.1k

点赞数 10

文章标签：前端

于 2024-01-03 15:45:45 首次发布

本文链接：https://blog.csdn.net/m0_66288747/article/details/135365556

版权

可以看官网：ChatUI

第一步：

"@chatui/core": "^2.4.2",

第二步：

import React from "react";
import Chat, { Bubble, useMessages } from "@chatui/core";
import { Button, } from 'antd';
import "@chatui/core/dist/index.css";

export default function App() {
    const { messages, appendMsg, setTyping } = useMessages([]);

    const die =
        <div>
            <p>
                俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问俄请问请问请问俄请问请
                问请问俄请问请问请问俄请问
                请问请问俄请问请问请问俄请
                问请问请问
            </p>
            <Button style={{ margin: "5px 40%" }}>
                停止输出
            </Button>
        </div>;

    function handleSend(type, val) {
        if (type === "text" && val.trim()) {
            appendMsg({
                type: "text",
                content: { text: val },
                user: { avatar: 'https://img0.baidu.com/it/u=3097844124,3594311210&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' },
                position: "right"
            });

            setTyping(true);

            setTimeout(() => {
                appendMsg({
                    type: "text",
                    content: {
                        text: die
                    },
                    position: "left",
                    user: { avatar: 'https://img2.baidu.com/it/u=740800004,2820304439&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' },
                });
            }, 1000);
        }
    }

    function renderMessageContent(msg) {
        const { content } = msg;
        return <Bubble
            content={content.text}
            user="https://img2.baidu.com/it/u=740800004,2820304439&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
        />;
    }

    return (
        <Chat
            messages={messages}
            placeholder="请输入提示内容"
            renderMessageContent={renderMessageContent}
            onSend={handleSend}
        />
    );
}

可以参考这几种方法：

前端react如何引入chatgpt实现智能客服_react chatgpt-CSDN博客

React AntDesign 聊天机器人阿里ChatUI使用-CSDN博客

封装一个丝滑的聊天框组件_react.js_jacoby_fire-华为云开发者联盟

搭建一个AI对话机器人——前端ChatUI使用纪录-CSDN博客

chatui-demo - CodeSandbox