前端react如何引入ChatUI实现类似chatgpt智能客服-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端react如何引入ChatUI实现类似chatgpt智能客服。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

可以看官网：ChatUI

chatui/core 使用教程,前端第一步：

"@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文章来源地址https://www.toymoban.com/news/detail-858566.html

到了这里，关于前端react如何引入ChatUI实现类似chatgpt智能客服的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！