提交版本

Html/static/css/desktop.css

@@ -211,3 +211,88 @@
     max-width: 200px;
 }
 
+.button {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.button:hover {
+    background-color: #f0f0f0;
+}
+.close-button {
+    width: auto;
+    height: auto;
+    text-align: center;
+    padding: 5px;
+    padding-bottom: 2px;
+    padding-top: 2px;
+    border-radius: 5px;
+}
+/* 新增的侧边工具栏样式 */
+.sidebar-tools {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    right: -250px; /* 初始隐藏 */
+    width: 250px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px 0 0 10px;
+    transition: right 0.3s ease-in-out;
+    z-index: 1000;
+}
+.sidebar-tools.open {
+    right: 0;
+}
+.sidebar-tools .tool-button {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.sidebar-tools .tool-button:hover {
+    background-color: #f0f0f0;
+}
+.sidebar-tools .tool-button .icon {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+    background-color: #007bff;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+.sidebar-tools .tool-button .description {
+    flex-grow: 1;
+}
+.toggle-button {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    right: -10px; /* 初始隐藏 */
+    width: 50px;
+    height: 50px;
+    background-color: #007bff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: right 0.3s ease-in-out;
+    z-index: 1001;
+}
+.toggle-button.open {
+    right: 250px;
+}
+.toggle-button .icon {
+    font-size: 20px;
+}

Html/static/js/chatbox.js

@@ -1,5 +1,6 @@
 
 var socket;
+let system_message_idx=0
 document.addEventListener('DOMContentLoaded', function() {
     data = window.appData;
     console.log(data);
@@ -12,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
     socket.on('message', function(data) {
         // 显示服务器的回复消息
         const serverMessage = document.createElement('div');
-        serverMessage.innerHTML = `<div class="chat-message server-message"><b>服务器:</b> ${marked.parse(data)}</div>`;
+        serverMessage.innerHTML = `<div class="chat-message server-message"><b>华实君:</b> ${marked.parse(data)}</div>`;
         document.getElementById('chatbox').appendChild(serverMessage);
 
         // 滚动到最新消息
@@ -32,7 +33,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 approveButton.innerText = '批准';
                 approveButton.data = element;
                 approveButton.style.width = '100%';
-                approveButton.style.maxHeight = '30px';
+                approveButton.style.borderRadius = '4px';
                 approveButton.onclick = function(event) {
                     console.log(element)
                     socket.emit('message', JSON.stringify({type:'function', data:element}));
@@ -65,7 +66,33 @@ document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('chatbox').appendChild(scoreMessage);
         document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
     })
-
+    socket.on('system_message',function(data){
+        console.log(data)
+        let systemMessage = document.createElement('div');
+        systemMessage.className = 'chat-message server-message';
+        let closeButton = document.createElement('button');
+        closeButton.className = 'close-button'; // 可以根据需要添加样式类
+        closeButton.innerHTML = '×'; // 关闭按钮的文本内容
+        closeButton.style.marginRight = '10px'; // 可选：设置关闭按钮的右边距
+        
+        systemMessage.appendChild(closeButton);
+        systemMessage.innerHTML += `<b>系统提示: </b> ${data}`;
+        systemMessage.id = 'system_message_'+system_message_idx;
+        system_message_idx+=1
+        document.getElementById('chatbox').appendChild(systemMessage);
+        document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
+        $('.close-button').on('click', function(event) {
+            $(this).css({
+                'background-color': 'gray',
+                'color': 'white', // 可选：设置文字颜色为白色，以便更清晰地显示
+                'border': 'none'  // 可选：去掉边框
+            });
+            $(this).parent().remove();
+        });
+        setTimeout(function() {
+            $(systemMessage.id).remove();
+        }, 5000); // 5000 毫秒 = 5 秒
+    })
 });
 
 
@@ -106,7 +133,9 @@ chineseRadio.addEventListener('change', function() {
 });
 
 
-
+function sendInitiativeFunctionCall(function_name){
+    socket.emit('initiative', {'name': function_name});
+}
 // 发送消息
 function sendMessage() {
     const input = document.getElementById('messageInput').value;