前后端实现 openai 通信

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

@@ -1,13 +1,51 @@
 <template>
-    <div class="interaction-module">
+	<div class="chat-container">
-        <h2>交互测试模块</h2>
+		<el-container class="full-height">
-        <!-- 交互测试模块内容将在这里实现 -->
+			<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">
+							<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-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>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, defineProps } from 'vue';
+import { ref, onMounted, defineComponent, defineProps } from 'vue';
-
+import { User, Comment } from '@element-plus/icons-vue';
+import { useMessageBridge } from "@/api/message-bridge";
 defineComponent({ name: 'chat' });
 
 const props = defineProps({
@@ -17,11 +55,165 @@ const props = defineProps({
 	}
 });
 
+interface ChatMessage {
+	role: 'user' | 'assistant';
+	content: string;
+}
+
+const bridge = useMessageBridge();
+const userInput = ref('');
+const messages = ref<ChatMessage[]>([]);
+const isLoading = ref(false);
+const streamingContent = ref('');
+
+const handleSend = () => {
+	if (!userInput.value.trim() || isLoading.value) return;
+
+	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 }
+		]
+	};
+
+	isLoading.value = true;
+	streamingContent.value = '';
+
+	bridge.postMessage({
+		command: 'llm/chat/completions',
+		data: chatData
+	});
+
+	userInput.value = '';
+};
+
+onMounted(() => {
+	bridge.addCommandListener('llm/chat/completions/chunk', data => {
+		const { content } = data.msg;
+		if (content) {
+			streamingContent.value += content;
+		}
+	}, { once: false });
+
+	bridge.addCommandListener('llm/chat/completions/done', () => {
+		if (streamingContent.value) {
+			messages.value.push({
+				role: 'assistant',
+				content: streamingContent.value
+			});
+			streamingContent.value = '';
+		}
+		isLoading.value = false;
+	}, { once: false });
+});
 </script>
 
 <style scoped>
-.interaction-module {
+.chat-container {
-    padding: 20px;
+	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;
+}
+
+.message-list {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.message-item {
+	display: flex;
+	margin-bottom: 16px;
+}
+
+.message-avatar {
+	margin-right: 12px;
+}
+
+.message-content {
+	flex: 1;
+}
+
+.message-role {
+	font-weight: bold;
+	margin-bottom: 4px;
+	color: var(--el-text-color-regular);
+}
+
+.message-text {
+	line-height: 1.6;
+	white-space: pre-wrap;
+}
+
+.user {
+	flex-direction: row-reverse;
+	text-align: right;
+}
+
+.user .message-avatar {
+	margin-right: 0;
+	margin-left: 12px;
+}
+
+.user .message-content {
+	align-items: flex-end;
+}
+
+.assistant {
+	text-align: left;
+}
+
+.chat-footer {
+	padding: 16px;
+	border-top: 1px solid var(--el-border-color);
+}
+
+.input-area {
+	max-width: 800px;
+	margin: 0 auto;
+	display: flex;
+	gap: 12px;
+}
+
+.send-button {
+	align-self: flex-end;
+	height: 72px;
+}
+
+.typing-cursor {
+	animation: blink 1s infinite;
+}
+
+@keyframes blink {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+	}
+}
 </style>

test/src/controller/llm.ts

@@ -30,13 +30,17 @@ export async function chatCompletionHandler(client: MCPClient | undefined, data:
         for await (const chunk of stream) {
             const content = chunk.choices[0]?.delta?.content || '';
             if (content) {
-                webview.postMessage({
+				const chunkResult = {
-                    command: 'llm/chat/completions/chunk',
-                    data: {
 					code: 200,
+					msg: {
 						content,
                         finish_reason: chunk.choices[0]?.finish_reason || null
 					}
+				};
+
+                webview.postMessage({
+                    command: 'llm/chat/completions/chunk',
+                    data: chunkResult
 				});
             }
         }
@@ -46,8 +50,10 @@ export async function chatCompletionHandler(client: MCPClient | undefined, data:
             command: 'llm/chat/completions/done',
             data: {
                 code: 200,
+                msg: {
 					success: true
 				}
+            }
         });
 
     } catch (error) {

test/tabs.json

@@ -1,24 +1,6 @@
 {
-  "currentIndex": 2,
+  "currentIndex": 0,
   "tabs": [
-    {
-      "name": "资源",
-      "icon": "icon-file",
-      "type": "blank",
-      "componentIndex": 0,
-      "storage": {
-        "currentResourceName": "greeting"
-      }
-    },
-    {
-      "name": "提词",
-      "icon": "icon-chat",
-      "type": "blank",
-      "componentIndex": 1,
-      "storage": {
-        "currentPromptName": "translate"
-      }
-    },
     {
       "name": "交互测试",
       "icon": "icon-robot",