fix bug

Author: jihe520

frontend/src/components/Bubble.vue

@@ -27,8 +27,8 @@ const renderedContent = computed(() => {
     props.type === 'agent' && props.agentType === 'CoderAgent' ? 'bubble-coder' : '',
     props.type === 'agent' && props.agentType === 'WriterAgent' ? 'bubble-writer' : '',
     props.class
-  ]" style="display: flex;">
-    <div class="flex flex-col items-center gap-1">
+  ]">
+    <div class="flex flex-col gap-1">
       <!-- 头像在上方 -->
       <span v-if="props.type === 'user'" class="text-2xl select-none mb-1">🧑</span>
       <span v-else-if="props.type === 'agent' && props.agentType === 'CoderAgent'"
@@ -149,15 +149,17 @@ const renderedContent = computed(() => {
   @apply opacity-100;
 }
 
+.bubble {
+  display: flex;
+}
+
 .bubble-user {
   justify-content: flex-end;
-  /* 用户气泡整体靠右 */
 }
 
 .bubble-coder,
 .bubble-writer {
   justify-content: flex-start;
-  /* Agent 气泡整体靠左 */
 }
 
 /* 用户气泡颜色 */

frontend/src/components/CoderEditor.vue

@@ -11,6 +11,11 @@ import {
 } from '@/components/ui/sidebar'
 import Files from '@/components/Files.vue'
 import NotebookArea from '@/components/NotebookArea.vue'
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '@/components/ui/resizable'
 
 
 const isCollapsed = ref(false)
@@ -24,21 +29,24 @@ const handleCollapse = () => {
 </script>
 <template>
   <SidebarProvider :collapsed="isCollapsed">
-    <div class="flex h-full min-h-0 w-full min-w-0">
-      <div :class="[
-        'transition-all duration-300 overflow-hidden',
-        isCollapsed ? 'w-0' : 'w-44'
-      ]">
-        <Files class="w-44 border-r h-full" />
-      </div>
-      <SidebarInset class="flex-1 flex flex-col min-h-0 min-w-0">
-        <header class="flex h-10 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger class="-ml-1" @click="handleCollapse" />
-        </header>
-        <div class="flex-1 min-h-0 min-w-0 overflow-auto">
-          <NotebookArea class="h-full min-w-0" />
-        </div>
-      </SidebarInset>
-    </div>
+    <ResizablePanelGroup direction="horizontal" class="h-full w-full min-w-0 min-h-0">
+      <!-- 左侧 Files 面板 -->
+      <ResizablePanel :default-size="20" :min-size="10" :max-size="40" class="h-full">
+        <Files class="h-full border-r" />
+      </ResizablePanel>
+      <!-- 拖拽手柄 -->
+      <ResizableHandle />
+      <!-- 右侧 Notebook 面板 -->
+      <ResizablePanel :default-size="80" :min-size="60" class="h-full">
+        <SidebarInset class="flex-1 flex flex-col min-h-0 min-w-0 h-full">
+          <header class="flex h-10 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger class="-ml-1" @click="handleCollapse" />
+          </header>
+          <div class="flex-1 min-h-0 min-w-0 overflow-auto">
+            <NotebookArea class="h-full min-w-0" />
+          </div>
+        </SidebarInset>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   </SidebarProvider>
 </template>

frontend/src/pages/task/index.vue

@@ -20,6 +20,7 @@ import ChatArea from '@/components/ChatArea.vue'
 import { onMounted, ref, onBeforeUnmount, computed } from 'vue'
 import { TaskWebSocket } from '@/utils/websocket'
 import type { Message, CoderMessage, WriterMessage } from '@/utils/response'
+import messageData from '@/pages/test/message.json'
 
 const props = defineProps<{ task_id: string }>()
 const messages = ref<Message[]>([])
@@ -38,6 +39,10 @@ onMounted(() => {
     messages.value.push(data)
   })
   ws.connect()
+
+  // TODO: 测试模式下加载
+  // 本地加载 message.json
+  messages.value = messageData as Message[]
 })
 
 onBeforeUnmount(() => {
@@ -52,12 +57,12 @@ onBeforeUnmount(() => {
 const chatMessages = computed(() =>
   messages.value.filter(
     (msg) => {
-      if (msg.msg_type === 'agent' && msg.agent_type === 'CoderAgent' && msg.code_result) {
+      if (msg.msg_type === 'agent' && msg.agent_type === 'CoderAgent' && msg.content == null) {
         // 有 code_result 的 CoderAgent 消息不显示
         return false
       }
       // 其他 agent 或 system 消息正常显示
-      return msg.msg_type === 'agent' || msg.msg_type === 'system'
+      return msg.msg_type === 'agent' && msg.content || msg.msg_type === 'system'
     }
   )
 )
@@ -82,6 +87,16 @@ const writerMessages = computed(() =>
   )
 )
 
+function downloadMessages() {
+  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(messages.value, null, 2))
+  const downloadAnchorNode = document.createElement('a')
+  downloadAnchorNode.setAttribute("href", dataStr)
+  downloadAnchorNode.setAttribute("download", "message.json")
+  document.body.appendChild(downloadAnchorNode)
+  downloadAnchorNode.click()
+  downloadAnchorNode.remove()
+}
+
 </script>
 
 <template>
@@ -123,4 +138,7 @@ const writerMessages = computed(() =>
       </div>
     </ResizablePanel>
   </ResizablePanelGroup>
+  <button @click="downloadMessages" class="absolute top-2 right-2 z-10 bg-blue-500 text-white px-3 py-1 rounded">
+    下载消息
+  </button>
 </template>