<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <title>社区Agent智能助理，基于RAG技术的垂直问答助手</title>

    <link href="/ref/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/ref/highlight/default.min.css">

    <script src="/ref/highlight/highlight.min.js" type="text/javascript"></script>
    <script src="/ref/jquery/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="/ref/layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
    <script src="/js/client/marked.min.js"></script>
    <style>
        #in {
            position: absolute;
            left: 5%;
            bottom: 40px;
            width: 90%;
            height: 50px;
            border: 1px solid #1f77ff;
            border-radius: 100px;
            line-height: 50px;
            font-size: 15px;
            text-indent: 2em;
        }
        #rag-chat-message-container {
            position: absolute;
            top: 10px;
            left: 5%;
            width: 90%;
            height: calc(100% - 140px);
            /*background-color: black;*/
            overflow-y: scroll;
        }
        #rag-chat-message-container::-webkit-scrollbar {/*滚动条整体样式*/
            width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
        }
        #rag-chat-message-container::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 0px;
            background-color: #ffffff;
            background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        }
        #rag-chat-message-container::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 0.2);
            background: #ffffff;
        }
        .chat-message-item {
            position: relative;
            min-width: 50px;
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            text-align: left;
            margin-bottom: 20px;
        }
        .chat-message-photo {
            position: relative;
            float: left;
            width: 40px;
            min-height: 40px;
            margin-right: 10px;
        }
        .user-avatar {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 40px;
            height: 40px;
            border-radius: 100px;
        }
        .chat-message-content {
            position: relative;
            float: left;
            width: max-content;
            max-width: calc(100% - 70px);
            padding: 10px;
            border-radius: 10px;
            background-color: whitesmoke;
            color: black;
        }
        #agentIcon {
            position: absolute;
            right: 45px;
            bottom: 48px;
            height: 35px;
        }
        .chat-message-content img {
            max-width: 90%;
            height: auto;
            margin: 5px;
            border-radius: 7px;
        }
        #agentIcon:hover {
            cursor: pointer;
        }
        .robot-message a {
            color: #f8ddd5;
            text-decoration: underline;
        }
        /* 定义动画 */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }
        @keyframes moveUpDown {
            0% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(-5px);
                transform: rotate(-10deg);
            }
            50% {
                transform: translateY(0);
                transform: rotate(0deg);
            }
            75% {
                transform: translateY(5px);
                transform: rotate(10deg);
            }
            100% {
                transform: translateY(0);
                transform: rotate(0deg);
            }
        }

        /* 应用动画到按钮 */
        .bounce-loading {
            position: relative;
            width: 8px;
            height: 8px;
            margin-top: 8px;
            background-color: white;
            border-radius: 100px;
            border: none;
            animation: bounce 0.5s infinite ease-in-out;
            cursor: progress; /* 显示进度指示器光标 */
        }
        .refDocument {
            position: relative;
            background-color: #031f7c;
            color: white;
            text-align: left;
            padding: 5px 10px;
            border: none;
            border-radius: 8px;
            float: left;
            font-size: 13px;
            max-width: calc(100% - 10px);
            margin-bottom: 10px;
        }
        .refDocument i {
            font-size: 15px;
        }
        .agent-recommend-container {
            position: relative;
            width: 80%;
            min-height: 50px;
            height: auto;
            margin-top: 100px;
            margin-bottom: 30px;
        }
        .agent-recommend-title {
            font-size: 25px;
            margin-bottom: 20px;
        }
        .agent-recommend-question-title {
            line-height: 60px;
            width: 100%;
            color: #a39f9f;
        }
        .agent-recommend-question {
            position: relative;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background-color: transparent;
            border-radius: 5px;
            border: 1px solid #eae7e7;
            margin-bottom: 10px;
            text-align: left;
            text-indent: 2em;
        }
        .agent-recommend-question:hover {
            cursor: pointer;
            color: #0a71f1;
            border: 1px solid #0a71f1;
        }
    </style>
</head>
<body style="overflow-x: hidden; background-color: white;">
    <center>
        <div id="rag-chat-message-container">

            <div class='agent-recommend-container'>
                <div class='agent-recommend-title'>👏 我是WebChat公众号文章内容问答助手，有问题找小C</div>
                <div class='agent-recommend-question-title'>RAG：基于社区内知识检索增强，生成式机器人</div>
            </div>

        </div>
        <input id="in" placeholder="社区内容学习，有问题找“小C”">
        <img id="agentIcon" src="https://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_56498919dec7403c8e6accb60ed637a5.png?x-oss-process=image/resize,m_fill,w_40,h_40">
    </center>
</body>
<script src="/js/common/login.js"></script>
<script>
    var user = "";
    var chatting = false;
    var systemMessage = '';
    var chatChannelApi = "/api/rag/bot/stream?biz=CC_AGENT";
    var agentMessageId = 0;
    loadUser();
    function loadUser() {
        $.ajax({
            url:"/api/user/getCurrentUserInfo",
            type:"get",
            success:function (data) {
                data = eval(data);
                if (data.success){
                    user = data.data;
                    chatChannel();
                } else {
                    location.href = "/auth";
                }
            }, error:function () {
                location.href = "/auth";
            }
        })
    }

    function chatChannel() {
        systemMessage = '';
        chatting = false;
        var eventSource = new EventSource(chatChannelApi);
        eventSource.onopen = function(e){
            console.log("Connection Opened");
        };
        eventSource.onmessage = function(e){
            chatting = true;
            var message = e.data;
            systemMessage += message;
            if (e.data == ' ') {
                systemMessage = systemMessage + ' ';
            }
            if (e.data == 'finished') {
                console.log("本轮对话结束！");
                chatting = false;
                systemMessage = '';
            } else {
                document.querySelectorAll('pre code').forEach(function(block) {
                    hljs.highlightBlock(block);
                });
                $("#agent-message-"+agentMessageId).html(marked.parse(systemMessage).replaceAll("&lt;", "<").replaceAll("&gt;", ">"));
                refreshChatMessRagContainerScrollBar2Bottom();
            }
        };
        eventSource.onerror = function(e){
            console.log("Error");
        };
    }

    // 监听回车事件
    $("#in").keydown(function(event) {
        if (event.keyCode == 13) {
            doChat();
        }
    })

    $("#agentIcon").on('click', function () {
        doChat();
    })

    function doChat() {
        var message = $("#in").val();
        doChatting(message);
    }

    function doChatting(message) {
        if (message == '') {
            layer.msg("请输入内容");
            return;
        }
        if (chatting) {
            layer.msg("对话进行中");
            return;
        }
        agentMessageId += 1;
        createUserChatItem(message);
        createRobotChatItem(agentMessageId);
        $.ajax({
            url: "/api/rag/bot/chat/send",
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                biz: 'CC_AGENT',
                message: message
            }),
            success:function (data) {
                data = eval(data);
                if (data.success){
                    $("#in").val("");
                } else {
                    layer.msg(data.msg);
                }
            }, error:function () {
                layer.msg("网络异常，请稍后重试！");
            }
        })
    }

    function createUserChatItem(inMess) {
        var item = "<div class=\"chat-message-item\">\n" +
            "                <div class=\"chat-message-photo\">\n" +
            "                    <img src=\""+user.photo+"?x-oss-process=image/resize,m_fill,w_50,h_50\" class=\"user-avatar\">\n" +
            "                </div>\n" +
            "                <div class=\"chat-message-content\">"+inMess+"</div>\n" +
            "                <div style=\"clear: both\"></div>\n" +
            "            </div>";
        $("#rag-chat-message-container").append(item);
        refreshChatMessRagContainerScrollBar2Bottom();
    }

    function createRobotChatItem(messageItemId) {
        var item = "<div class=\"chat-message-item\">\n" +
            "                <div class=\"chat-message-photo\">\n" +
            "                    <img src=\"https://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_56498919dec7403c8e6accb60ed637a5.png?x-oss-process=image/resize,m_fill,w_50,h_50\" class=\"user-avatar\">\n" +
            "                </div>\n" +
            "                <div class=\"chat-message-content robot-message\" style='background-color: #144afd; color: white' id='agent-message-"+messageItemId+"'><button class='bounce-loading'></button></div>\n" +
            "                <div style=\"clear: both\"></div>\n" +
            "            </div>";
        $("#rag-chat-message-container").append(item);
        refreshChatMessRagContainerScrollBar2Bottom();
    }

    function refreshChatMessRagContainerScrollBar2Bottom() {
        $("#rag-chat-message-container").scrollTop($("#rag-chat-message-container")[0].scrollHeight);
    }
</script>

</html>