cn/com allow all

Html/apps/sockets/namespaces.py

@@ -113,8 +113,14 @@ class AgentNamespace(Namespace):
                                             callback=self.receive_ase_chapter_score,
                                             entry=(get_or_load_current_user(),chatmanager),
                                             init_data={'room': user_uuid}
-                                        )                 
+                                        )            
-        user_uuid2ase_client[user_uuid].connect()           
+        user_uuid2ase_client[user_uuid].register_route_with_entry(
+                                            route='process',
+                                            callback=self.receive_ase_process,
+                                            entry=self,
+                                            init_data={'room': user_uuid}
+                                        )
+        user_uuid2ase_client[user_uuid].connect()
         
         
 
@@ -185,6 +191,9 @@ class AgentNamespace(Namespace):
         user.set_course_progress(chatmanager.chat_historys, chatmanager.scores, chatmanager.material_id, chatmanager.chapter_name, chatmanager.lesson_name)
         chatmanager.load_next_chapter()
 
+    def receive_ase_process(client_entry: HSAEngineClient, namespace_entry: Namespace, data, init_data):
+        # namespace_entry.emit('process', data['data'], room=init_data['room'], namespace='/agent')
+        pass
 
     def on_initiative(self,data): # 主动call
         print("User active function call")

Html/apps/static/css/process_show_floating_window.css

@@ -0,0 +1,70 @@
+.floating-window {
+    position: fixed;
+    top: 10%; /* 距离页面顶部 10% */
+    right: 5%; /* 距离页面右边 5%，固定在右侧 */
+    width: 10vw; /* 根据视窗宽度动态调整 */
+    height: 7vh; /* 根据视窗高度动态调整 */
+    max-width: 300px; /* 最大宽度 */
+    max-height: 200px; /* 最大高度 */
+    min-width: 100px; /* 最小宽度 */
+    min-height: 50px; /* 最小高度 */
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    z-index: 999;
+}
+
+.header {
+    background-color: #f0f0f0;
+    cursor: move;
+    height: 10%; /* 让头部高度为浮动窗口高度的10% */
+    text-align: center;
+    line-height: 20px;
+}
+
+.draggable {
+    display: inline-block;
+    width: 30px;
+    height: 100%; /* 占满头部的高度 */
+    text-align: center;
+    font-size: 1.2vw; /* 字体大小根据窗口宽度变化 */
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.content {
+    padding-top: 10%; /* 留出顶部空间，防止内容与头部重叠 */
+    height: 90%; /* 占剩余空间 */
+    overflow-y: auto;
+}
+
+.entry {
+    display: flex;
+    align-items: center;
+    height: 15%; /* 每个条目的高度占浮动窗口高度的15% */
+    border-bottom: 1px solid #e0e0e0;
+    padding: 2px 5px;
+}
+
+.status-dot {
+    width: 2vw; /* 根据视窗宽度动态调整 */
+    height: 2vw; /* 根据视窗宽度动态调整 */
+    border-radius: 50%;
+    margin-right: 5px;
+    background-color: blue; /* 默认蓝色 */
+}
+
+.node-name {
+    flex: 3;
+    font-size: 2vw; /* 根据浮动窗口宽度调整字体大小 */
+    color: #333;
+}
+
+.status-data {
+    flex: 6;
+    font-size: 1.8vw; /* 根据浮动窗口宽度调整字体大小 */
+    color: #666;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

Html/apps/static/js/chatbox.js

@@ -136,6 +136,17 @@ document.addEventListener('DOMContentLoaded', function() {
             $(systemMessage.id).remove();
         }, 5000); // 5000 毫秒 = 5 秒
     })
+    socket.on('process',function(data){
+        if (typeof data === 'string'){
+            data = JSON.parse(data);
+        }
+
+        // 遍历每个节点，并更新相应的条目
+        for (const nodeName in data) {
+            const statusData = data[nodeName];
+            updateEntry(nodeName, statusData);  // 更新每个节点的条目
+        }
+    });
 });
 
 

Html/apps/static/js/process_show_floating_window.js

@@ -0,0 +1,81 @@
+// 拖动浮动窗口功能
+const floatingWindow = document.getElementById('floatingWindow');
+const header = document.querySelector('.header');
+const draggable = document.querySelector('.draggable');
+
+let isDragging = false;
+let offsetX, offsetY;
+
+// 开始拖动
+draggable.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    offsetX = e.clientX - floatingWindow.getBoundingClientRect().left;
+    offsetY = e.clientY - floatingWindow.getBoundingClientRect().top;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', () => {
+        isDragging = false;
+        document.removeEventListener('mousemove', onMouseMove);
+    });
+});
+
+// 拖动中
+function onMouseMove(e) {
+    if (isDragging) {
+        floatingWindow.style.left = e.clientX - offsetX + 'px';
+        floatingWindow.style.top = e.clientY - offsetY + 'px';
+    }
+}
+
+// 动态生成新条目
+function createEntry(nodeName) {
+    const entry = document.createElement('div');
+    entry.classList.add('entry');
+
+    const statusDot = document.createElement('div');
+    statusDot.classList.add('status-dot');
+
+    const nodeNameElement = document.createElement('div');
+    nodeNameElement.classList.add('node-name');
+    nodeNameElement.textContent = nodeName;
+
+    const statusData = document.createElement('div');
+    statusData.classList.add('status-data');
+    statusData.textContent = '流式数据...';
+
+    entry.appendChild(statusDot);
+    entry.appendChild(nodeNameElement);
+    entry.appendChild(statusData);
+
+    return entry;
+}
+
+// 更新条目内容
+function updateEntry(nodeName, statusData) {
+    const contentDiv = document.getElementById('content');
+    const entries = contentDiv.children;
+
+    // 查找对应的条目
+    for (let entry of entries) {
+        const nodeNameElement = entry.querySelector('.node-name');
+        if (nodeNameElement.textContent === nodeName) {
+            const statusDot = entry.querySelector('.status-dot');
+            const statusDataElement = entry.querySelector('.status-data');
+
+            // 更新状态圆点颜色（根据状态来决定颜色，可以根据后端发送的状态修改）
+            statusDot.style.backgroundColor = 'green';  // 假设状态是正常的，暂时设置为绿色
+
+            // 更新流式数据
+            statusDataElement.textContent = statusData;
+            return;  // 找到对应的条目后退出
+        }
+    }
+
+    // 如果没有找到对应条目，创建一个新的条目并添加到页面
+    contentDiv.appendChild(createEntry(nodeName));
+    updateEntry(nodeName, statusData); // 立即更新新条目
+}
+
+// 模拟后端数据流
+// const socket = new WebSocket('ws://localhost:8080');  // 连接后端 WebSocket
+
+

Html/apps/templates/code-like-desktop.html

@@ -101,7 +101,20 @@
     <div class="toggle-button" id="toggleButton">
         <div class="icon" id="toggleButton_icon">❮</div>
     </div>
-    
+
+    <link rel="stylesheet" href="/static/css/process_show_floating_window.css">
+    <div class="floating-window" id="floatingWindow">
+        <div class="header">
+            <span class="draggable">•••</span>
+        </div>
+        <div class="content">
+
+        </div>
+    </div>
+    <script src="/static/js/process_show_floating_window.js"></script>
+
+
+
     <script src="/static/js/chatbox.js"></script>
     
     <script>
@@ -168,14 +181,18 @@
         .catch(error => {
             console.error('Error fetching session:', error);
         });
-
+        let lastiframe = null;
         function OpenIframe(){
             // 等待1s再加载
             setTimeout(() => {
                 // 在成功获取 session 后创建并插入 iframe
+                if (lastiframe) {
+                    lastiframe.remove();
+                }
                 const iframe = document.createElement('iframe');
                 const sessionInfo = data
-                iframe.src = '{{vscode_web_url}}/{{user_uuid}}/{{user_id}}/{{course_id}}/{{chapter_name}}/{{lesson_name}}/22';
+                lastiframe = iframe;
+                iframe.src = '/vsc-like/{{user_uuid}}/{{user_id}}/{{course_id}}/{{chapter_name}}/{{lesson_name}}/22';
                 iframe.style.width = '100%';
                 iframe.style.height = '99%';
 
@@ -184,11 +201,6 @@
             },1500);
         }
 
-
-
-
-
-
         
     // 动态加载 Markdown 文件
     function loadMarkdown(course_id, chapter_name, lesson_name) {