znkf-vue/src/views/chat.vue

<script setup>
import { ref, nextTick, watch, onMounted } from 'vue'
import { useUserInfo } from '../store/userPermissionCode'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import { Loading, Position } from '@element-plus/icons-vue'; // 引入图标组件
import { marked } from 'marked'; // 引入marked库
import katex from 'katex'; // 引入 KaTeX 库
import 'katex/dist/katex.min.css'; // 引入 KaTeX 样式

const { getQueryVariable } = useUserInfo()
// 假设 getSessionId 已经正确定义
const { getSessionId } = useUserInfo()

const isTokenValid = ref(false)
const fnGetToken = () => {
    localStorage.setItem('localToken', decodeURIComponent(String(getQueryVariable('token'))))
    console.log(localStorage.getItem('localToken'));
}
setTimeout(() => {
    fnGetToken()
}, 800)

// 验证 token
const validateToken = async () => {
    const token = localStorage.getItem('localToken')
    console.log('token',token);
    if (!token) {
        console.error('未找到 token，请重新登录')
        return false
    }
    return true
}
// 创建新对话
const sessionId = ref(localStorage.getItem('sessionId') || {});

const add = async () => {
    try {
        const result = await axios.post(
            "http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
            {},
            {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ragflow-hkNjEwYjcwZjBlMDExZWZiYjYzMDI0Mm'
                }
            }
        );
        const data = result.data;
        console.log(data);
        console.log(data, 'data11111111');
        // 判断 data 是否为空
        if (Object.keys(data).length === 0) {
            return;
        }
        // 假设 getSessionId 函数已经正确定义
        const sss = String(getSessionId("session_id", data));
        sessionId.value = sss;
        localStorage.setItem('sessionId', sss);
        console.log('sss', sss);
    } catch (error) {
        console.log("请求失败", error);
        ElMessage.error("添加失败，请检查输入内容是否正确");
    }
};
// 页面加载时验证 token
validateToken().then((isValid) => {
    isTokenValid.value = isValid
    if (isValid) {
        console.log('Token 验证成功')
        if (!localStorage.getItem('sessionId')) {
            console.log('没有sessionId，创建新对话')
            add()
        }
    }
})
// 定义Props（可配置参数）
const props = defineProps({
    apiUrl: {
        type: String,
        default: 'http://localhost:5000/ask'
    },
    initialGreeting: {
        type: String,
        default: '您好！我是夺宝奇兵ai智能客服，有什么可以帮助您的？'
    }
})
// 响应式数据
const messages = ref([
    {
        content: props.initialGreeting,
        sender: 'bot',
        timestamp: new Date()
    }
])
const inputMessage = ref('')
const messageContainer = ref(null)
const isLoading = ref(false) // 新增：加载状态
// 自动滚动到底部
const scrollToBottom = () => {
    nextTick(() => {
        if (messageContainer.value) {
            messageContainer.value.scrollTop = messageContainer.value.scrollHeight
        }
    })
}
// 发送消息
const sendMessage = async () => {
    if (!isTokenValid.value) {
        console.error('Token 验证失败，无法发送消息');
        return;
    }
    if (isLoading.value) return;
    const content = inputMessage.value.trim();
    if (!content) return;
    // 添加用户消息
    messages.value.push({
        content,
        sender: 'user',
        timestamp: new Date()
    });
    // 清空输入框
    inputMessage.value = '';
    scrollToBottom();

    // 显示加载动画
    isLoading.value = true;
    messages.value.push({
        content: '我正在思考...',
        sender: 'bot',
        timestamp: new Date(),
        isLoading: true
    });
    scrollToBottom();

    try {
        // 调用API获取回复
        const response = await fetch("http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ragflow-hkNjEwYjcwZjBlMDExZWZiYjYzMDI0Mm' },
            body: JSON.stringify({ question: content, stream: false, session_id: sessionId.value   })
        });
        const data = await response.json();
        console.log(data, 'data211111');

        // 移除加载消息
        messages.value = messages.value.filter(msg => !msg.isLoading);

        // 检查 data 对象的结构，确保正确提取所需属性
        if (data && data.data && typeof data.data.answer === 'string') {
            // 提取推理思考部分和结果部分
            const regex = /<think>(.*?)<\/think>(.*)/s;
            const match = data.data.answer.match(regex);
            let thinking = '';
            let result = data.data.answer;

            if (match) {
                thinking = match[1].trim();
                result = match[2].trim();
            }

            // 组合推理思考内容和结果内容，并添加 HTML 标签
            let combinedContent = '';
            // if (thinking) {
            //     combinedContent += `<span class="thinking-content">推理思考：${thinking}</span><br>`;
            // }
            combinedContent += `<span class="result-content">${result}</span>`;

            // 使用marked库将Markdown转换为HTML
            let markdownContent = marked(combinedContent);

            // 使用 KaTeX 渲染数学公式
            const katexRegex = /\$\$(.*?)\$\$/g;
            markdownContent = markdownContent.replace(katexRegex, (match, formula) => {
                try {
                    return katex.renderToString(formula, { throwOnError: false });
                } catch (error) {
                    console.error('KaTeX 渲染错误:', error);
                    return match;
                }
            });

            // 添加初始空消息
            const botMessageIndex = messages.value.length;
            messages.value.push({
                content: '',
                sender: 'bot',
                timestamp: new Date()
            });

            // 使用定时器逐个字符更新消息内容
            let currentIndex = 0;
            const intervalId = setInterval(() => {
                if (currentIndex < markdownContent.length) {
                    messages.value[botMessageIndex].content += markdownContent[currentIndex];
                    scrollToBottom();
                    currentIndex++;
                } else {
                    clearInterval(intervalId);
                }
            }, 100); // 每100毫秒添加一个字符，可以根据需要调整
        } else {
            console.error('API 返回的数据格式不正确:', data);
            messages.value.push({
                content: '服务返回数据格式错误，请稍后再试',
                sender: 'bot',
                timestamp: new Date()
            });
            scrollToBottom();
        }
    } catch (error) {
        console.error('API请求失败:', error);
        // 移除加载消息
        messages.value = messages.value.filter(msg => !msg.isLoading);

        messages.value.push({
            content: '服务暂时不可用，请稍后再试',
            sender: 'bot',
            timestamp: new Date()
        });
        scrollToBottom();
    } finally {
        // 隐藏加载动画
        isLoading.value = false;
    }
};
// 格式化时间显示
const formatTime = (date) => {
    return new Date(date).toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit'
    })
}
// 自适应输入框高度
const adjustInputHeight = () => {
    const textarea = document.querySelector('.message-input')
    textarea.style.height = 'auto'
    textarea.style.height = `${textarea.scrollHeight}px`
}
// 监听输入内容变化
watch(inputMessage, adjustInputHeight)
// 在组件挂载后按顺序执行操作
onMounted(async () => {
    // 先获取 token
    fnGetToken()
    // 再验证 token
    const isValid = await validateToken()
    isTokenValid.value = isValid
    if (!isValid) {
        console.error('Token 验证失败，请重新登录')
    }
})
</script>
<template>
    <!-- 聊天容器 -->
    <div class="chat-container">
        <!-- 聊天框头部 -->
        <div class="chat-header">夺宝奇兵智能客服</div>
        <!-- 消息展示区域 -->
        <div class="message-list" ref="messageContainer">
            <div v-for="(message, index) in messages" :key="index" class="message-item" :class="[message.sender]">
                <!-- 机器人头像 -->
                <div v-if="message.sender === 'bot'" class="bot-avatar">
                    <img src="/src/assets/img/avatar/超级云脑按钮.png" alt="Bot Avatar">
                </div>
                <div class="message-bubble">
                    <div class="message-content" v-html="message.content">
                        
                    </div>
                    <div class="message-time">{{ formatTime(message.timestamp) }}</div>
                </div>
                <!-- 用户头像 -->
                <div v-if="message.sender === 'user'" class="user-avatar">
                    <img src="/src/assets/img/avatar/小柒.png" alt="User Avatar">
                </div>
            </div>
        </div>
        <!-- 输入区域 -->
        <div class="input-area">
            <textarea v-model="inputMessage" @keydown.enter.exact.prevent="isLoading ? null : sendMessage()"
                placeholder="输入您的问题..." rows="1" class="message-input"></textarea>
            <el-tooltip content="机器人正在思考" :disabled="!isLoading">
                <template #content>
                    机器人正在思考
                </template>
                <button @click="sendMessage" :disabled="!isTokenValid || isLoading" class="send-button">
                    <!-- 使用ElementPlus的发送图标 -->
                    <span v-if="isLoading">
                        <el-icon class="is-loading">
                            <Loading />
                        </el-icon>
                    </span>
                    <span v-else class="send-button-content">
                        <el-icon>
                            <Position />
                        </el-icon>
                        <span> 发送</span>
                    </span>
                </button>
            </el-tooltip>
        </div>
        <!-- 未登录覆盖层 -->
        <div v-if="!isTokenValid" class="overlay">
            <div class="overlay-content">用户未登录</div>
        </div>
    </div>
</template>


<style scoped>
table{
    border-color: black
}
/* 使用更具体的选择器 */
.message-bubble .message-content .thinking-content {
    color: #c8c4c4;
    font-style: italic;
}
/* 新增表格样式 */
.message-bubble .message-content table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 表格宽度为 100% */
}

.message-bubble .message-content th,
.message-bubble .message-content td {
    border: 1px solid #e0e0e0; /* 单元格边框 */
    padding: 8px; /* 单元格内边距 */
    text-align: left; /* 文本左对齐 */
}

.message-bubble .message-content th {
    background-color: #f1f3f5; /* 表头背景颜色 */
}
/* 其他样式保持不变 */
.message-item.bot {
    justify-content: flex-start; /* 让机器人消息靠左对齐 */
    text-align: left; /* 新增：设置文本左对齐 */
}
.chat-container {
    display: flex;
    flex-direction: column;
    height: 90vh;
    width: 90vw;
    max-width: 800px;
    margin: 0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f8f9fa;
    overflow: hidden;
    /* 新增样式，实现水平和垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 聊天框头部样式 */
.chat-header {
    background-color: #007bff;
    color: white;
    padding: 16px;
    font-size: 1.2rem;
    text-align: center;
}

.message-list {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: white;
}

.message-item {
    display: flex;
    margin-bottom: 16px;
}

.message-item.user {
    justify-content: flex-end;
}

.bot-avatar {
    margin-right: 10px;
}

.bot-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar {
    margin-left: 10px;
}

.user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.message-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 15px;
    position: relative;
}

.message-content span {
    display: block;
    /* 确保元素显示 */
}

.message-item.user .message-bubble {
    background: #007bff;
    color: white;
    border-bottom-right-radius: 4px;
}

.message-item.bot .message-bubble {
    background: #f1f3f5;
    color: #212529;
    border-bottom-left-radius: 4px;
}

.message-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
    text-align: right;
}

.message-item.bot .message-time {
    color: rgba(0, 0, 0, 0.6);
}

.input-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid #e0e0e0;
    background: white;
}

.message-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    resize: none;
    max-height: 120px;
    font-family: inherit;
}

.send-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    /* 调整宽度以适应文字 */
    height: 40px;
    border: none;
    border-radius: 20px;
    /* 调整圆角 */
    background: #007bff;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    /* 添加过渡效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* 添加阴影 */
    font-size: 16px;
    /* 调整字体大小 */
    font-weight: 600;
    /* 调整字体粗细 */

}

.send-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
    /* 悬停时向上移动 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 悬停时增加阴影 */
}

/* 新增加载状态样式 */
.loading-state {
    background: #ccc;
    cursor: not-allowed;
}

.send-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 调整文字和图标间距 */
}

/* .send-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #007bff;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.send-button:hover {
    background: #0056b3;
} */

.send-button svg {
    width: 20px;
    height: 20px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    /* 透明度 50% 的白色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    /* 确保覆盖层在聊天框上方 */
}

.overlay-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}



</style>