diff --git a/Html/apps/static/css/chatbox_approve_icon.css b/Html/apps/static/css/chatbox_approve_icon.css
new file mode 100644
index 0000000..a3c4fc8
--- /dev/null
+++ b/Html/apps/static/css/chatbox_approve_icon.css
@@ -0,0 +1,43 @@
+/* 外层消息气泡 */
+.chat-message.server-message {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ }
+
+ /* 左边描述部分 */
+ .chat-message.server-message > div {
+ flex-grow: 1;
+ }
+
+ /* 右边批准按钮 */
+ .approve-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: #4CAF50;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ border: none;
+ flex-shrink: 0; /* 保证按钮不被压缩 */
+ transition: background-color 0.3s ease, transform 0.2s ease;
+ }
+
+ /* 鼠标悬停时改变按钮颜色 */
+ .approve-button:hover {
+ background-color: #45a049;
+ transform: scale(1.1); /* 略微放大 */
+ }
+
+ /* 按钮禁用后的样式 */
+ .approve-button.disabled {
+ background-color: gray;
+ color: white;
+ cursor: not-allowed;
+ }
+
\ No newline at end of file
diff --git a/Html/apps/static/js/chatbox.js b/Html/apps/static/js/chatbox.js
index 3c1112c..65f4ac1 100644
--- a/Html/apps/static/js/chatbox.js
+++ b/Html/apps/static/js/chatbox.js
@@ -34,28 +34,37 @@ document.addEventListener('DOMContentLoaded', function() {
data = [data];
}
for (let i = 0; i < data.length; i++) {
- const element = data[i]
+ const element = data[i];
+
+ // 外层消息气泡
const requestMessage = document.createElement('div');
requestMessage.className = 'chat-message server-message';
+
+ // 左边描述部分
+ const description = document.createElement('div');
+ description.innerHTML = `Function: ${element.name}(${JSON.stringify(element.arguments)})`;
+
+ // 右边批准按钮
const approveButton = document.createElement('button');
- approveButton.innerText = '批准';
+ approveButton.innerHTML = '√'; // 使用勾选符号
approveButton.data = element;
- approveButton.style.width = '100%';
- approveButton.style.borderRadius = '4px';
+ approveButton.className = 'approve-button';
+
approveButton.onclick = function(event) {
- console.log(element)
- socket.emit('message', JSON.stringify({type:'function', data:element}));
- event.currentTarget.disabled = true;
- event.currentTarget.style.backgroundColor = 'gray';
- event.currentTarget.style.color = 'white'; // 可选:设置文字颜色为白色,以便更清晰地显示
- event.currentTarget.style.border = 'none'; // 可选:去掉边框
+ console.log(element);
+ socket.emit('message', JSON.stringify({ type: 'function', data: element }));
+ event.currentTarget.disabled = true;
+ event.currentTarget.classList.add('disabled');
};
- // 将按钮添加到消息气泡中
- requestMessage.innerHTML = `Function: ${element.name}(${JSON.stringify(element.arguments)})
`;
+
+ // 把描述和按钮加到 requestMessage
+ requestMessage.appendChild(description);
requestMessage.appendChild(approveButton);
+
document.getElementById('chatbox').appendChild(requestMessage);
document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
- }
+ }
+
} catch (error) {
console.log(error)
}
diff --git a/Html/apps/templates/desktop.html b/Html/apps/templates/desktop.html
index eafc1d0..e51b07d 100644
--- a/Html/apps/templates/desktop.html
+++ b/Html/apps/templates/desktop.html
@@ -7,6 +7,7 @@
+
@@ -102,6 +103,7 @@
+