save

app/src/components/main-panel/chat/index.vue

@@ -1,11 +1,6 @@
 <template>
-	<div class="chat-container">
+    <div class="chat-container" ref="chatContainerRef">
-		<el-container class="full-height">
+        <el-scrollbar :height="scrollHeight">
-			<el-header class="chat-header">
-				<h2>AI 对话</h2>
-			</el-header>
-
-			<el-main class="chat-main">
             <div class="message-list">
                 <div v-for="(message, index) in messages" :key="index" :class="['message-item', message.role]">
                     <div class="message-avatar">
@@ -27,9 +22,9 @@
                     </div>
                 </div>
             </div>
-			</el-main>
+        </el-scrollbar>
 
-			<el-footer class="chat-footer">
+        <el-footer class="chat-footer" ref="footerRef">
             <div class="input-area">
                 <el-input v-model="userInput" type="textarea" :rows="3" placeholder="输入消息..." :disabled="isLoading"
                     @keydown.enter.prevent="handleSend" />
@@ -38,14 +33,15 @@
                 </el-button>
             </div>
         </el-footer>
-		</el-container>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineComponent, defineProps } from 'vue';
+import { ref, onMounted, defineComponent, defineProps, onUnmounted } from 'vue';
 import { User, Comment } from '@element-plus/icons-vue';
 import { useMessageBridge } from "@/api/message-bridge";
+import { ElMessage } from 'element-plus';
+
 defineComponent({ name: 'chat' });
 
 const props = defineProps({
@@ -65,6 +61,17 @@ const userInput = ref('');
 const messages = ref<ChatMessage[]>([]);
 const isLoading = ref(false);
 const streamingContent = ref('');
+const chatContainerRef = ref<HTMLElement>();
+const footerRef = ref<HTMLElement>();
+const scrollHeight = ref('500px');
+
+const updateScrollHeight = () => {
+    if (chatContainerRef.value && footerRef.value) {
+        const containerHeight = chatContainerRef.value.clientHeight;
+        const footerHeight = footerRef.value.clientHeight;
+        scrollHeight.value = `${containerHeight - footerHeight}px`;
+    }
+};
 
 const handleSend = () => {
     if (!userInput.value.trim() || isLoading.value) return;
@@ -93,15 +100,36 @@ const handleSend = () => {
     userInput.value = '';
 };
 
+const handleError = (errorMsg: string) => {
+    ElMessage.error(errorMsg);
+    messages.value.push({
+        role: 'assistant',
+        content: `错误: ${errorMsg}`
+    });
+    streamingContent.value = '';
+    isLoading.value = false;
+};
+
 onMounted(() => {
+    updateScrollHeight();
+    window.addEventListener('resize', updateScrollHeight);
+
     bridge.addCommandListener('llm/chat/completions/chunk', data => {
+        if (data.code !== 200) {
+            handleError(data.msg || '请求模型服务时发生错误');
+            return;
+        }
         const { content } = data.msg;
         if (content) {
             streamingContent.value += content;
         }
     }, { once: false });
 
-	bridge.addCommandListener('llm/chat/completions/done', () => {
+    bridge.addCommandListener('llm/chat/completions/done', data => {
+        if (data.code !== 200) {
+            handleError(data.msg || '模型服务处理完成但返回错误');
+            return;
+        }
         if (streamingContent.value) {
             messages.value.push({
                 role: 'assistant',
@@ -112,34 +140,23 @@ onMounted(() => {
         isLoading.value = false;
     }, { once: false });
 });
+
+onUnmounted(() => {
+    window.removeEventListener('resize', updateScrollHeight);
+});
 </script>
 
 <style scoped>
 .chat-container {
-	height: fit-content;
+    height: 100%;
     display: flex;
     flex-direction: column;
 }
 
-.full-height {
-	height: 100%;
-}
-
-.chat-header {
-	border-bottom: 1px solid var(--el-border-color);
-	display: flex;
-	align-items: center;
-}
-
-.chat-main {
-	flex: 1;
-	overflow-y: auto;
-	padding: 16px;
-}
-
 .message-list {
     max-width: 800px;
     margin: 0 auto;
+    padding: 16px;
 }
 
 .message-item {
@@ -187,6 +204,7 @@ onMounted(() => {
 .chat-footer {
     padding: 16px;
     border-top: 1px solid var(--el-border-color);
+    flex-shrink: 0;
 }
 
 .input-area {
@@ -206,14 +224,7 @@ onMounted(() => {
 }
 
 @keyframes blink {
-
+    0%, 100% { opacity: 1; }
-	0%,
+    50% { opacity: 0; }
-	100% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-	}
 }
 </style>

test/src/controller/llm.ts

@@ -58,7 +58,7 @@ export async function chatCompletionHandler(client: MCPClient | undefined, data:
 
     } catch (error) {
         webview.postMessage({
-            command: 'llm/chat/completions/error',
+            command: 'llm/chat/completions/chunk',
             data: {
                 code: 500,
                 msg: `OpenAI API error: ${(error as Error).message}`

test/tabs.json

@@ -7,6 +7,15 @@
       "type": "blank",
       "componentIndex": 3,
       "storage": {}
+    },
+    {
+      "name": "资源",
+      "icon": "icon-file",
+      "type": "blank",
+      "componentIndex": 0,
+      "storage": {
+        "currentResourceName": "greeting"
+      }
     }
   ]
 }