From 11f98b4bc67107a5f5556d8df1ae39dd612acbaf Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Sun, 6 Apr 2025 14:23:20 +0800
Subject: [PATCH] save

---
 app/src/components/main-panel/chat/index.vue | 281 ++++++++++---------
 test/src/controller/llm.ts                   |   2 +-
 test/tabs.json                               |   9 +
 3 files changed, 156 insertions(+), 136 deletions(-)

diff --git a/app/src/components/main-panel/chat/index.vue b/app/src/components/main-panel/chat/index.vue
index ea0ec9f..c82100b 100644
--- a/app/src/components/main-panel/chat/index.vue
+++ b/app/src/components/main-panel/chat/index.vue
@@ -1,63 +1,59 @@
 <template>
-	<div class="chat-container">
-		<el-container class="full-height">
-			<el-header class="chat-header">
-				<h2>AI 对话</h2>
-			</el-header>
+    <div class="chat-container" ref="chatContainerRef">
+        <el-scrollbar :height="scrollHeight">
+            <div class="message-list">
+                <div v-for="(message, index) in messages" :key="index" :class="['message-item', message.role]">
+                    <div class="message-avatar">
+                        <el-avatar :icon="message.role === 'user' ? User : Comment" />
+                    </div>
+                    <div class="message-content">
+                        <div class="message-role">{{ message.role === 'user' ? '你' : 'AI' }}</div>
+                        <div class="message-text">{{ message.content }}</div>
+                    </div>
+                </div>
 
-			<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">
-							<el-avatar :icon="message.role === 'user' ? User : Comment" />
-						</div>
-						<div class="message-content">
-							<div class="message-role">{{ message.role === 'user' ? '你' : 'AI' }}</div>
-							<div class="message-text">{{ message.content }}</div>
-						</div>
-					</div>
+                <div v-if="isLoading" class="message-item assistant">
+                    <div class="message-avatar">
+                        <el-avatar :icon="Comment" />
+                    </div>
+                    <div class="message-content">
+                        <div class="message-role">AI</div>
+                        <div class="message-text">{{ streamingContent }}<span class="typing-cursor">|</span></div>
+                    </div>
+                </div>
+            </div>
+        </el-scrollbar>
 
-					<div v-if="isLoading" class="message-item assistant">
-						<div class="message-avatar">
-							<el-avatar :icon="Comment" />
-						</div>
-						<div class="message-content">
-							<div class="message-role">AI</div>
-							<div class="message-text">{{ streamingContent }}<span class="typing-cursor">|</span></div>
-						</div>
-					</div>
-				</div>
-			</el-main>
-
-			<el-footer class="chat-footer">
-				<div class="input-area">
-					<el-input v-model="userInput" type="textarea" :rows="3" placeholder="输入消息..." :disabled="isLoading"
-						@keydown.enter.prevent="handleSend" />
-					<el-button type="primary" :loading="isLoading" @click="handleSend" class="send-button">
-						发送
-					</el-button>
-				</div>
-			</el-footer>
-		</el-container>
-	</div>
+        <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" />
+                <el-button type="primary" :loading="isLoading" @click="handleSend" class="send-button">
+                    发送
+                </el-button>
+            </div>
+        </el-footer>
+    </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({
-	tabId: {
-		type: Number,
-		required: true
-	}
+    tabId: {
+        type: Number,
+        required: true
+    }
 });
 
 interface ChatMessage {
-	role: 'user' | 'assistant';
-	content: string;
+    role: 'user' | 'assistant';
+    content: string;
 }
 
 const bridge = useMessageBridge();
@@ -65,155 +61,170 @@ 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;
+    if (!userInput.value.trim() || isLoading.value) return;
 
-	const userMessage = userInput.value.trim();
-	messages.value.push({ role: 'user', content: userMessage });
+    const userMessage = userInput.value.trim();
+    messages.value.push({ role: 'user', content: userMessage });
 
-	const chatData = {
-		messages: [
-			...messages.value.filter(msg => msg.role === 'user').map(msg => ({
-				role: msg.role,
-				content: msg.content
-			})),
-			{ role: 'assistant', content: streamingContent.value }
-		]
-	};
+    const chatData = {
+        messages: [
+            ...messages.value.filter(msg => msg.role === 'user').map(msg => ({
+                role: msg.role,
+                content: msg.content
+            })),
+            { role: 'assistant', content: streamingContent.value }
+        ]
+    };
 
-	isLoading.value = true;
-	streamingContent.value = '';
+    isLoading.value = true;
+    streamingContent.value = '';
 
-	bridge.postMessage({
-		command: 'llm/chat/completions',
-		data: chatData
-	});
+    bridge.postMessage({
+        command: 'llm/chat/completions',
+        data: chatData
+    });
 
-	userInput.value = '';
+    userInput.value = '';
+};
+
+const handleError = (errorMsg: string) => {
+    ElMessage.error(errorMsg);
+    messages.value.push({
+        role: 'assistant',
+        content: `错误: ${errorMsg}`
+    });
+    streamingContent.value = '';
+    isLoading.value = false;
 };
 
 onMounted(() => {
-	bridge.addCommandListener('llm/chat/completions/chunk', data => {
-		const { content } = data.msg;
-		if (content) {
-			streamingContent.value += content;
-		}
-	}, { once: false });
+    updateScrollHeight();
+    window.addEventListener('resize', updateScrollHeight);
 
-	bridge.addCommandListener('llm/chat/completions/done', () => {
-		if (streamingContent.value) {
-			messages.value.push({
-				role: 'assistant',
-				content: streamingContent.value
-			});
-			streamingContent.value = '';
-		}
-		isLoading.value = false;
-	}, { once: false });
+    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', data => {
+        if (data.code !== 200) {
+            handleError(data.msg || '模型服务处理完成但返回错误');
+            return;
+        }
+        if (streamingContent.value) {
+            messages.value.push({
+                role: 'assistant',
+                content: streamingContent.value
+            });
+            streamingContent.value = '';
+        }
+        isLoading.value = false;
+    }, { once: false });
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', updateScrollHeight);
 });
 </script>
 
 <style scoped>
 .chat-container {
-	height: fit-content;
-	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;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .message-list {
-	max-width: 800px;
-	margin: 0 auto;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 16px;
 }
 
 .message-item {
-	display: flex;
-	margin-bottom: 16px;
+    display: flex;
+    margin-bottom: 16px;
 }
 
 .message-avatar {
-	margin-right: 12px;
+    margin-right: 12px;
 }
 
 .message-content {
-	flex: 1;
+    flex: 1;
 }
 
 .message-role {
-	font-weight: bold;
-	margin-bottom: 4px;
-	color: var(--el-text-color-regular);
+    font-weight: bold;
+    margin-bottom: 4px;
+    color: var(--el-text-color-regular);
 }
 
 .message-text {
-	line-height: 1.6;
-	white-space: pre-wrap;
+    line-height: 1.6;
+    white-space: pre-wrap;
 }
 
 .user {
-	flex-direction: row-reverse;
-	text-align: right;
+    flex-direction: row-reverse;
+    text-align: right;
 }
 
 .user .message-avatar {
-	margin-right: 0;
-	margin-left: 12px;
+    margin-right: 0;
+    margin-left: 12px;
 }
 
 .user .message-content {
-	align-items: flex-end;
+    align-items: flex-end;
 }
 
 .assistant {
-	text-align: left;
+    text-align: left;
 }
 
 .chat-footer {
-	padding: 16px;
-	border-top: 1px solid var(--el-border-color);
+    padding: 16px;
+    border-top: 1px solid var(--el-border-color);
+    flex-shrink: 0;
 }
 
 .input-area {
-	max-width: 800px;
-	margin: 0 auto;
-	display: flex;
-	gap: 12px;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    gap: 12px;
 }
 
 .send-button {
-	align-self: flex-end;
-	height: 72px;
+    align-self: flex-end;
+    height: 72px;
 }
 
 .typing-cursor {
-	animation: blink 1s infinite;
+    animation: blink 1s infinite;
 }
 
 @keyframes blink {
-
-	0%,
-	100% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-	}
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
 }
 </style>
\ No newline at end of file
diff --git a/test/src/controller/llm.ts b/test/src/controller/llm.ts
index d7b17c6..a8ebb1b 100644
--- a/test/src/controller/llm.ts
+++ b/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}`
diff --git a/test/tabs.json b/test/tabs.json
index 2a00242..3294cfb 100644
--- a/test/tabs.json
+++ b/test/tabs.json
@@ -7,6 +7,15 @@
       "type": "blank",
       "componentIndex": 3,
       "storage": {}
+    },
+    {
+      "name": "资源",
+      "icon": "icon-file",
+      "type": "blank",
+      "componentIndex": 0,
+      "storage": {
+        "currentResourceName": "greeting"
+      }
     }
   ]
 }
\ No newline at end of file