element-ui + vue开发一个openai的聊天框

原创 于 2025-07-09 18:27:57 发布 · 327 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #vue.js #前端 #chat

element-ui + vue开发一个openai的聊天框

效果演示

  • 支持流式响应渲染
  • 支持渲染思考内容
  • 支持渲染工具调用
  • 支持markdown内容解析
    在这里插入图片描述
    在这里插入图片描述

代码

<template>
    <div class="chat-wrapper">
        <el-container>
            <el-header>
                <strong>调试和预览</strong>
                <el-tooltip class="item" effect="dark" content="清空对话记录" placement="bottom">
                    <i class="el-icon-refresh-right"
                       :class="{ 'rotate-animation': control.clearChatRecord }"
                        @click="clearChatRecordEvent"/>
                </el-tooltip>
            </el-header>

            <el-main ref="messagesContainer">
                <template v-for="(message, index) in messages">
                    <div v-if="message.role == 'user'" class="user-message">
                        <el-avatar>
                            <div class="message-avatar">
                                <svg-icon icon-class="chat-user"/>
                            </div>
                        </el-avatar>
                        <div class="message-content">
                            <div class="content">
                                {{message.content}}
                            </div>
                        </div>
                    </div>
                    <div v-if="message.role == 'assistant'" class="ai-message">
                        <el-avatar style="background: white !important;">
                            <div class="message-avatar">
                                <svg-icon icon-class="chat-ai"/>
                            </div>
                        </el-avatar>
                        <dot-flashing v-if="!message.content && !message.error && !(message.aiMsgs && message.aiMsgs.length > 0)"
                                      class="chat-load"/>
                        <div v-if="message.content || (message.aiMsgs && message.aiMsgs.length > 0)" class="message-content">
                            <div>
                                <template
                                        v-if="message.aiMsgs && message.aiMsgs.length > 0"
                                        v-for="(aiMsg, index) in message.aiMsgs">
                                    <template v-if="aiMsg.type == 'think'">
                                        <div class="message-title">
                                            <el-button v-if="aiMsg.endTime" @click="clickThinkEvent(aiMsg)">
                                                深度思考(用时
                                                {{ (aiMsg.endTime - aiMsg.startTime) / 1000 }}
                                                秒)
                                                <i class="el-icon-arrow-down arrow-icon" :class="{'up': aiMsg.showThink}"/>
                                            </el-button>
                                        </div>
                                        <div v-if="aiMsg.showThink" class="think-content">
                                            {{aiMsg.think}}
                                        </div>
                                    </template>
                                    <template v-if="aiMsg.type == 'function'">
                                        <div class="message-title">
                                            <el-button @click="clickToolCallEvent(aiMsg)">
                                                工具调用(find_user)
                                            </el-button>
                                        </div>
                                    </template>
                                </template>
                                <template v-if="message.content">
                                    <div
                                       class="content markdown-body"
                                       v-html="message.htmlContent">
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div v-if="message.error" class="message-content error-message-content">
                            <div class="content">
                                {{message.error}}
                            </div>
                        </div>
                    </div>
                </template>

            </el-main>

            <el-footer>
                <el-input
                    :rows="1"
                    v-model="inputMessage"
                    :disabled="control.waitAiResponseFinish"
                    @keydown.enter.native.prevent="sendMessage"
                    type="textarea"
                    resize="none"/>
                <el-button type="primary" size="small" :disabled="control.waitAiResponseFinish" @click="sendMessage">发送</el-button>
            </el-footer>

            <div v-if="control.waitAiResponseFinish" class="stop-response-container">
                <el-button
                        type="danger"
                        round
                        size="small"
                        class="stop-response-btn"
                >
                    <i class="el-icon-warning-outline"></i> 停止响应
                </el-button>
            </div>

        </el-container>
    </div>
</template>

<script>
    import MarkdownIt from 'markdown-it'
    import hljs from 'highlight.js'
    import 'highlight.js/styles/github.css'

    import dotFlashing from "./dot_flashing"
    import setter from "@/setting/setter";

    let that;

    export default {
        name: "OpenAiChat",
        components: {
            dotFlashing
        },
        props: {
            agentId: {
                type: String,
                require: true,
            },
        },
        data() {
            return {
                /* 对话消息 */
                messages: [
                    // {
                    //     role: "assistant",
                    //     aiMsgs: [
                    //         {
                    //             type: "think",
                    //             think: "dsa",
                    //             showThink: true
                    //         },
                    //         {
                    //             type: "function",
                    //             function: "{\"arguments\":{\"type\":\"PRODUCT\",\"keywords\":\"\"},\"name\":\"test_platform_data_query\"}",
                    //         }
                    //     ],
                    //     content: "当前查询产品数据时遇到连接异常（错误码500：连接被拒绝）。可能原因如下：\n" +
                    //         "\n" +
                    //         "1. **平台服务未启动**：请确认性能压测平台服务是否正常运行\n" +
                    //         "2. **网络隔离**：请检查当前网络环境是否具备访问平台API的权限\n" +
                    //         "3. **地址配置错误**：若为自建平台，请确认服务地址配置是否正确（当前请求地址：http://127.0.0.1:18090）\n" +
                    //         "\n" +
                    //         "建议您：\n" +
                    //         "- 等待30秒后重试\n" +
                    //         "- 联系平台管理员确认服务状态\n" +
                    //         "- 检查本地hosts文件是否配置正确\n" +
                    //         "\n" +
                    //         "需要进一步协助请提供：\n" +
                    //         "1. 当前使用的访问入口（如：测试管理门户/命令行工具）\n" +
                    //         "2. 是否为首次使用该平台",
                    // }
                ],
                /* 聊天框输入消息 */
                inputMessage: "",
                /*
                 * 控制页面元素状态
                 */
                control: {
                    // 点击清理按钮，设置 true。清理结束设置false
                    clearChatRecord: false,
                    // 等待AI响应完成
                    waitAiResponseFinish: false,
                },
                // markdown
                md: null,
            }
        },
        methods: {
            // Markdown 渲染
            renderMarkdown(text) {
                let content = text;
                return this.md.render(content || '')
            },

            sendMessage() {
                if (checkSendMessage()) {
                    let input = this.inputMessage;
                    // 添加到消息列表
                    this.messages.push({role: "user", content: input});
                    this.control.waitAiResponseFinish = true;
                    this.messages.push({role: "assistant", content: "", htmlContent: "", aiMsgs: []});
                    this.inputMessage = "";

                    // 发起对话
                    chat(setter.server.request.baseURL + "/chat/completions", input, (data, down) => {
                        if (down) {
                            if (this.control.waitAiResponseFinish) {
                                this.control.waitAiResponseFinish = false;

                            }
                            return;
                        }

                        // 获取 ai message
                        let aiMessage = this.messages[this.messages.length - 1];

                        // AI响应内容
                        if (data.content) {
                            if (aiMessage.aiMsgs.length > 0
                                && aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].type == "think"
                                && !aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].endTime) {
                                aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].endTime = new Date().getTime();
                                aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].showThink = false;
                            }
                            aiMessage.content += data.content;
                            aiMessage.htmlContent = this.renderMarkdown(aiMessage.content);
                            //console.log("aiMessage", aiMessage)
                        }

                        // 思考内容
                        if (data.think) {
                            let aiMsgs = aiMessage.aiMsgs;
                            if (aiMsgs.length == 0 || aiMsgs[aiMsgs.length - 1].type != "think") {
                                aiMsgs.push(
                                    {
                                        type: "think",
                                        think: data.think,
                                        startTime: new Date().getTime(),
                                        endTime: 0,
                                        showThink: true
                                    }
                                );
                            } else {
                                // 获取最后一条数据填入
                                let aiMsg = aiMsgs[aiMsgs.length - 1];
                                aiMsg.think += data.think;
                            }
                        }

                        // 工具调用
                        if (data.function) {
                            if (aiMessage.aiMsgs.length > 0
                                && aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].type == "think"
                                && !aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].endTime) {
                                aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].endTime = new Date().getTime();
                                aiMessage.aiMsgs[aiMessage.aiMsgs.length - 1].showThink = false;
                            }
                            aiMessage.aiMsgs.push(
                                {
                                    type: "function",
                                    function: data.function,
                                }
                            );
                        }

                        // 设置滚动到底部
                        this.messagesContainerScrollToBottom();
                    }, error => {
                        let aiMessage = this.messages[this.messages.length - 1];
                        this.$set(aiMessage, "error", "系统服务异常, 请稍后再试");
                        if (this.control.waitAiResponseFinish) {
                            this.control.waitAiResponseFinish = false;
                        }
                    });
                }
            },

            /**
             * 点击深度思考事件
             */
            clickThinkEvent(aiMsg) {
                this.$set(aiMsg, "showThink", aiMsg.showThink ? false : true);
            },

            /**
             * 点击工具调用事件
             */
             clickToolCallEvent(aiMsg) {
                this.$alert(JSON.stringify(JSON.stringify(aiMsg.function), null, 2), "工具调用详情", {
                    showConfirmButton: false,
                    closeOnPressEscape: true,
                    callback: action => {}
                });
            },

            /**
             * 点击清空聊天记录事件
             */
            clearChatRecordEvent() {
                if (this.control.waitAiResponseFinish) {
                    that.$message.error("当前有未完成的对话, 请稍后再试");
                    return;
                }
                this.control.clearChatRecord = true;
                this.messages = [];

                setTimeout(() => {
                    this.control.clearChatRecord = false;
                }, 3000);
            },

            /**
             * message聊天框滚动到最低部
             */
            messagesContainerScrollToBottom() {
                this.$nextTick(() => {
                    const container = this.$refs.messagesContainer.$el;
                    container.scrollTop = container.scrollHeight;
                })
            },
        },
        created() {
            // 初始化Markdown渲染器
            this.md = new MarkdownIt({
                html: true,
                linkify: true,
                typographer: true,
                highlight: function (str, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return hljs.highlight(str, { language: lang }).value
                        } catch (__) {}
                    }
                    return '' // 使用额外的默认转义
                }
            })
        },
        mounted() {
            that = this;
            this.messagesContainerScrollToBottom();
        },
    }

    /**
     * 检查是否可以发送消息
     */
    function checkSendMessage() {
        if (!that.inputMessage) {
            that.$message.error("输入消息为空");
            return false;
        } else if (that.control.waitAiResponseFinish) {
            that.$message.error("当前有未完成的对话");
            return false;
        }
        return true;
    }

    /**
     * 发起聊天, 服务端是SSE协议的响应内容
     *
     * @param url
     */
    function chat(url, input, callback, errorCallback) {
        fetch(url, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "cookie": "grafana_session=9026800badf33e22d50e868892ff97b0; _bl_uid=aama4bqet6X1nIkRe6jjhI8a213n; locale=zh-Hans; X-XSHELTER-ACCESS-TOKEN=957c62ee-e319-4615-a67b-5234e1aa2a58; sys_token=ea5367a3df814e5899618e5da79706bc; sys_env_id=1022400244723744768; sys_env_code=Init",
            },
            body: JSON.stringify({
                agentId: that.agentId,
                username: "admin",
                variables: {
                    "cookie": "sys_token=ea5367a3df814e5899618e5da79706bc; sys_env_id=1022400244723744768; sys_env_code=Init"
                },
                content: input
            })
        })
            .then(response => {
                if (response.ok && response.body) {
                    return response.body;
                } else {
                    throw new Error('SSE connection failed');
                }
            })
            .then(body => {
                const reader = body.getReader();
                const decoder = new TextDecoder();

                // 读取流数据粘包后存储起来的缓冲区
                let chunkBuffer = "";

                // 读取流数据
                function readStream() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            //console.log('SSE stream closed');
                            return;
                        }
                        // 接收流数据
                        let chunk = decoder.decode(value, { stream: true });

                        // 数据块需要加上未处理完的缓冲区数据
                        let tmpBuf = chunkBuffer + chunk;

                        // 解析data数据
                        let data = "";
                        for (let i = 0; i < tmpBuf.length; i++) {
                            if (tmpBuf[i] == "\n" && tmpBuf[i + 1] == "\n") {
                                //console.log("data=[" + data + "]");
                                if (callback) {
                                    let chunkData = data.replace("data: ", "");
                                    if (chunkData == "[DONE]") {
                                        callback(null, true);
                                    } else {
                                        callback(JSON.parse(chunkData));
                                    }
                                }
                                data = "";
                                i = i + 1;
                            } else {
                                data += tmpBuf[i];
                            }
                        }

                        // 如果data数据是不完整的，加载到缓冲区
                        chunkBuffer = data;

                        // // 继续读取下一段
                        readStream();
                    }).catch(err => {
                        console.error('Error reading stream:', err);
                    });
                }

                // 读取流数据
                readStream();
            })
            .catch(error => {
                if (errorCallback) {
                    errorCallback(error);
                }
                console.error('Fetch error:', error);
            });
    }

</script>

<style scoped>
    .chat-wrapper {
        display: flex;
        height: 100%;
        width: 100%;
    }

    .el-container .el-header {
        height: 40px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ece6e6;
        padding: 10px !important;
    }

    .el-container {
        position: relative;
    }

    .el-container .el-header i {
        font-size: 20px;
    }
    .el-container .el-header i:hover {
        color: #ee9090;
        cursor: pointer;
    }

    .el-container .el-main {
        background: rgba(231, 230, 230, 0.50);
        overflow: auto !important;
        overflow-x: hidden !important;
    }
    .el-container .el-main::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari/Opera */
    }
    .el-container .el-footer {
        height: 50px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        background-color: #f1eeee;
        padding: 0 10px 0 10px !important;
    }

    .stop-response-container {
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    .chat-load {
        display: flex;
        align-items: center;
    }

    .user-message {
        display: flex;
        flex-direction: row-reverse;
        margin: 20px 10px 20px 10px;
    }

    .ai-message {
        display: flex;
        margin: 20px 10px 20px 10px;
    }

    .message-content {
        padding: 0 10px 0 10px;
        display: flex;
        align-items: center;
        line-height: 1.6;
        word-break: break-word;
        max-width: 70%;
        margin: 0 10px 0 10px;
        border-radius: 8px;
        font-size: 16px;
    }

    .message-avatar {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .message-avatar svg {
        width: 80%;
        height: 80%;
    }

    .user-message .message-content {
        background-color: #c4d8f5;
    }

    .ai-message .message-content {
        background-color: white;
    }

    .error-message-content {
        background-color: #bd6079 !important;
        color: white;
    }

    .message-title {
        margin-top: 6px;
    }
    .message-title .el-button {
        background: rgba(230, 230, 230, 0.7) !important;
        color: rgb(38 38 38) !important;
        border: 0px !important;
        padding: 8px 6px 8px 6px !important;
        font-size: 14px !important;
    }
    .message-title .el-button:hover {
        background: rgba(230, 230, 230, 1) !important;
    }

    .think-content {
        color: #767474;
        margin: 10px 0px 10px 0px;
        padding: 0 8px 0 8px;
        border-left: 1px solid #767474; /* 宽度 样式 颜色 */
        font-size: 14px;
    }

    .content {
        margin: 6px 0 6px 0;
    }

    .arrow-icon {
        transition: transform 0.3s ease;
    }
    .arrow-icon.up {
        transform: rotate(180deg);
    }
    .collapse-content {
        max-height: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .rotate-animation {
        animation: rotate 1.5s linear infinite;
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Markdown内容样式 */
    .markdown-body {
        font-size: 16px;
        line-height: 1.5;
        word-wrap: break-word;
    }

    .markdown-body >>> h1,
    .markdown-body >>> h2,
    .markdown-body >>> h3,
    .markdown-body >>> h4,
    .markdown-body >>> h5,
    .markdown-body >>> h6 {
        margin-top: 24px;
        margin-bottom: 16px;
        font-weight: 600;
        line-height: 1.25;
    }

    .markdown-body >>> h1 {
        padding-bottom: 0.3em;
        font-size: 2em;
        border-bottom: 1px solid #eaecef;
    }

    .markdown-body >>> h2 {
        padding-bottom: 0.3em;
        font-size: 1.5em;
        border-bottom: 1px solid #eaecef;
    }

    .markdown-body >>> h3 {
        font-size: 1.25em;
    }

    .markdown-body >>> p {
        margin-top: 0;
        margin-bottom: 16px;
    }

    .markdown-body >>> ul,
    .markdown-body >>> ol {
        padding-left: 2em;
        margin-top: 0;
        margin-bottom: 16px;
    }

    .markdown-body >>> li {
        margin-bottom: 0.25em;
    }

    .markdown-body >>> blockquote {
        padding: 0 1em;
        color: #6a737d;
        border-left: 0.25em solid #dfe2e5;
        margin: 0 0 16px 0;
    }

    .markdown-body >>> pre {
        padding: 16px;
        overflow: auto;
        font-size: 85%;
        line-height: 1.45;
        background-color: #f6f8fa;
        border-radius: 6px;
        margin-bottom: 16px;
    }

    .markdown-body >>> code {
        font-size: 85%;
        background-color: rgba(175, 184, 193, 0.2);
        border-radius: 3px;
        padding: 0.2em 0.4em;
    }

    .markdown-body >>> pre code {
        background-color: transparent;
        padding: 0;
    }

    .markdown-body >>> a {
        color: #0366d6;
        text-decoration: none;
    }

    .markdown-body >>> a:hover {
        text-decoration: underline;
    }

    .markdown-body >>> strong {
        font-weight: 600;
    }

    .markdown-body >>> em {
        font-style: italic;
    }

    .markdown-body >>> img {
        max-width: 100%;
        box-sizing: content-box;
        background-color: #fff;
    }

    .markdown-body >>> table {
        border-spacing: 0;
        border-collapse: collapse;
        display: block;
        width: 100%;
        overflow: auto;
        margin-bottom: 16px;
    }

    .markdown-body >>> th {
        font-weight: 600;
        padding: 6px 13px;
        border: 1px solid #dfe2e5;
    }

    .markdown-body >>> td {
        padding: 6px 13px;
        border: 1px solid #dfe2e5;
    }

    .markdown-body >>> tr {
        background-color: #fff;
        border-top: 1px solid #c6cbd1;
    }

    .markdown-body >>> tr:nth-child(2n) {
        background-color: #f6f8fa;
    }
</style>

loading 代码

<template>
    <div class="dot-flashing">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</template>

<script>
    export default {
        name: "dot_flashing"
    }
</script>

<style>
    .dot-flashing {
        display: inline-flex;
        margin: 0px 10px 0px 10px;
        gap: 5px;
    }
    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3dd91b;
        opacity: 0.3;
        animation: dot-flash 1s infinite alternate;
    }
    .dot:nth-child(1) { animation-delay: 0s; }
    .dot:nth-child(2) { animation-delay: 0.3s; }
    .dot:nth-child(3) { animation-delay: 0.6s; }
    @keyframes dot-flash {
        to { opacity: 1; }
    }
</style>

使用

import openAiChat from "../chat/openai_chat";

<open-ai-cha/>
【前端】Vue3与Element Plus结合使用的超详细教程：从入门到精通
m0_67403143的博客
12-19 1381
本教程适用于具备基本Vue3知识的前端开发者，特别是那些希望通过Element Plus提升项目UI质量和开发效率的开发者。可以通过覆盖CSS变量或使用深度选择器自定义单个组件的样式。示例：自定义按钮颜色自定义按钮
基于Vue、MarkMap、OpenAi开发的思维导图生成器
PsatYiKing的博客
06-05 550
本项目完全开源如果觉得不错麻烦帮忙点一次Star⭐️本项目是一个结合了Vue、Markmap和OpenAI ChatGPT的思维导图生成工具。用户可以输入标题和内容，通过调用ChatGPT生成思维导图，并支持放大、缩小、适应屏幕和下载功能。
基于Vue3+ElementPlus，结合AI和前沿技术的聊天应用，内置OpenAI，Ollama，DeepSeek等大语言模型，支持Markdown渲染，聊天记录生成截图，主题切换
04-21
PureChat 是一款PureChat 是一款基于 Vue3 + ElementPlus，结合 AI 和前沿技术的聊天应用，内置OpenAI，Ollama，DeepSeek等大语言模型，支持 Markdown 渲染，聊天记录生成截图，主题切换，助力开发者快速掌握现代技术。
前端AI对话框项目设计与实现
警警的博客
02-13 8652
实现一个前端AI对话框项目需要综合运用前端技术（如HTML、CSS、JavaScript）和AI技术（如自然语言处理、机器学习模型）。以下是一个简化的示例，展示了如何使用SSE在前端和后端之间建立连接，并发送和接收消息。注意，这只是一个基础框架，你需要根据你的具体需求来填充和完善代码。这个指南提供了一个全面的框架，帮助你从头开始构建一个前端AI对话框应用。根据你的具体需求和资源，你可以调整这个框架来适应你的项目。实现一个前端AI对话框项目涉及多个步骤和技术栈的组合。
vue实现element-ui对话框可拖拽功能
12-03
element-ui对话框可拖拽及边界处理 应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。 在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。 还是上代码吧 功能实现代码directives.js代码如下： import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag
vue 实现简单AI聊天程序(一) elementui 聊天框编写
麦麦大数据
08-26 5935
实现一个纯前端的AI问答程序界面
vue+element-ui聊天界面框（1）
Q_Qshine的博客
04-11 2198
【代码】vue+element-ui（1）
Vue初体验（七）使用Vue实现一个简单的聊天框
mapbar_front的博客
06-06 1万+
1、实践是检验真理的唯一标准，现在我们做一个简易的聊天窗口，有一个input框，用于用户输入，一个按钮button，用于把用户的输入提交上去，然后又一个列表ul，用于展示我们每次提交的消息。2、通过简单的分析，我们要思考这么几个问题：第一、数据是怎么展示到界面上去的？ 我们知道，界面展示的数据我们只能在data中实现。第二、怎么样才能让界面数据动态变化？ 界面的动态变化在本质上是数据的变化，只有
VUE2实现聊天室输入框
Life_Effort的博客
09-13 2786
1-该段代码是输入框的编辑部分，@input="onInput"实时获取输入框内的数据，@paste="handlePaste"当用户粘帖内容到输入框的时候会被触发，@dragover.prevent可以控制拖拽操作行为，当用户在textarea上放下拖拽的内容时会调用@drop="handleDrop"方法。2-该段代码是输入框展示文件和图片的预览模态框，showPreviewModal的值（true或者false）控制预览模态框的显示和隐藏。3-拖拽图片和文件的方式，上传文件和图片。
使用vue高仿了chatgpt的前端，后端使用python flask openai实现
07-02
使用vue高仿了chatgpt的前端，后端使用python flask openai实现。 开放了最新的gpt-3.5-turbo模型，后端使用了最新模型在分支toGpt3.5上，加上了流式响应。 新的模型更加强大，更加智能
python+Vue实现建议chatgptAPI调用
05-06
前端使用Vue+elementui，后端使用python，结合Flask实现简易ChatGpt聊天页面，后台调用openai的API，项目轻量，可作为简单项目用来入门
vue对话框组件
08-10
vue 对话框组件
基于Vue.js和Element UI框架的自定义对话框组件
wangweiruning的博客
03-26 2026
基于Vue.js和Element UI框架的自定义对话框组件
vue:聊天对话框的实现
m0_49623851的博客
10-12 1万+
vue:聊天对话框的实现，保持滚动条在位于底部的最新消息。长单词换行，以及数字，英文，符号不会换行，还有浏览器默认压缩空格的问题。处理聊天信息里的链接
vue实现dialog对话框
热门推荐
mannix_lei的博客
05-03 2万+
一、为实现该dialog的复用，我这里把它写成一个组件（Vue中定义的组件）&lt;template&gt; &lt;div id="dialog"&gt; &lt;div class="border"&gt; &lt;div @click="closeDialog" class="closeImg"&gt;&lt;/div&
vue3实现ai聊天对话框
everfoot的博客
12-15 6995
input输入message对话框settings设置面板w-full答：虽然设置存储在了 localStorage 中，但是在页面刷新后没有正确地初始化深色模式的样式。我们需要在应用启动时立即应用存储的主题设置。解决办法：给 App.vue 加上挂载时就进行一次设置。传输数据以下是和。
vue实现可拖动智能聊天对话框
ssssummer的博客
12-01 3164
项目中的一个需求，可以智能咨询问题（数据库写好的问题和答案） 如图所示： 把鼠标放在红色头部区域可以拖动，不会超出当前可是区域。点击方块可以放大占满全屏，再次点击变回正常大小。点击x隐藏对话框。 把鼠标放在对话框的边上可以上下左右拖拽放大。我是参考的这个网址里的，写的很好，有需要的话可以去看看（https://www.jb51.net/article/73157.htm）。 废话不多说，上代码。 <template> <div> <img src="../../a
vue实现聊天框，模拟对话附上html
m0_47415644的博客
09-02 4602
vue实现聊天框，模拟对话 demo。
vue3 Element-Plus-X ai聊天
最新发布
05-13
### Vue3 中使用 Element-Plus-X 实现 AI 聊天功能 为了在 Vue3 项目中集成 Element-Plus-X 并实现 AI 聊天功能，可以按照以下方法构建应用。以下是详细的说明以及示例代码。 #### 安装依赖项 首先，在项目中安装必要的依赖包 `element-plus` 和 `vue-element-plus-x`： ```bash pnpm install element-plus vue-element-plus-x ``` 如果未初始化 Vue3 项目，则可以通过 Vue CLI 创建一个新的 Vue3 项目[^1]。 --- #### 配置 Element-Plus 在项目的入口文件（通常是 `main.js` 或 `main.ts`），引入并注册 Element-Plus 组件库： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 这一步确保了整个应用程序能够正常使用 Element-Plus 的 UI 组件[^2]。 --- #### 构建聊天界面 创建一个简单的聊天窗口布局，利用 Element-Plus 提供的组件来增强用户体验。例如，使用 `<el-scrollbar>` 来处理滚动条，<el-input> 处理用户输入等。 ```html <template> <div class="chat-container"> <!-- 对话历史 --> <el-scrollbar max-height="400px" class="message-list"> <div v-for="(msg, index) in messages" :key="index" class="message-item"> {{ msg }} </div> </el-scrollbar> <!-- 用户输入框 --> <div class="input-area"> <el-input v-model="newMessage" placeholder="请输入消息..." @keyup.enter="sendMessage"></el-input> <el-button type="primary" @click="sendMessage">发送</el-button> </div> </div> </template> <script> export default { data() { return { newMessage: '', messages: [], }; }, methods: { sendMessage() { if (this.newMessage.trim()) { this.messages.push(`用户: ${this.newMessage}`); this.simulateAIAPIResponse(); // 模拟调用 API 获取回复 this.newMessage = ''; } }, simulateAIAPIResponse() { setTimeout(() => { const aiReply = '这是来自AI的模拟回复'; // 替换为实际接口返回的数据 this.messages.push(`AI: ${aiReply}`); }, 1000); // 延迟一秒模拟网络请求时间 }, }, }; </script> <style scoped> .chat-container { display: flex; flex-direction: column; height: 500px; } .message-list { margin-bottom: 10px; border: 1px solid #ccc; padding: 10px; } .input-area { display: flex; } </style> ``` 此模板定义了一个基本的聊天室结构，其中包含了对话列表和输入区域[^1]。 --- #### 整合 WebSocket 进行实时通信 对于即时通讯场景，WebSocket 是一种高效的解决方案。可以在 Vue3 应用中通过 Composition API 设置 WebSocket 连接逻辑。 ```javascript import { ref, onMounted, onUnmounted } from 'vue'; export function useWebSocket(url) { const socketRef = ref(null); onMounted(() => { socketRef.value = new WebSocket(url); socketRef.value.onopen = () => console.log('连接已建立...'); socketRef.value.onmessage = (event) => handleIncomingMessage(event.data); socketRef.value.onerror = (error) => handleError(error); socketRef.value.onclose = () => console.log('连接关闭...'); }); onUnmounted(() => { if (socketRef.value && socketRef.value.readyState === WebSocket.OPEN) { socketRef.value.close(); } }); function send(message) { if (socketRef.value?.readyState === WebSocket.OPEN) { socketRef.value.send(JSON.stringify({ message })); } } function handleIncomingMessage(data) { console.log('收到服务器消息:', JSON.parse(data)); } function handleError(error) { console.error('WebSocket 错误:', error); } return { send }; } ``` 将上述函数导入到聊天组件中，并替换掉 `simulateAIAPIResponse()` 方法中的静态数据获取部分，改为动态接收 WebSocket 数据。 --- #### 使用 Axios 请求远程服务 当需要向后端发起 HTTP 请求时，可借助 Axios 发送异步请求并与 Spring Boot 后台交互。例如： ```javascript import axios from 'axios'; async function fetchAIMessage(userInput) { try { const response = await axios.post('/api/chat', { userInput }); return response.data.aiResponse; // 返回 AI 接口响应的内容 } catch (err) { console.error(err); throw err; } } ``` 将其嵌入至聊天组件的方法中即可完成前后端联动[^1]。 --- ### 总结 以上展示了如何基于 Vue3 和 Element-Plus-X 构造具备基础功能的 AI 聊天页面，同时介绍了 WebSockets 及 Axios 的具体运用方式。开发者可以根据需求进一步扩展样式设计和服务对接细节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Me_Liu_Q

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值