完成基本的对话

src/App.vue

@@ -51,10 +51,10 @@
       />
     </div>
     <McLayoutSender>
-      <McInput 
-        :value="inputValue" 
-        :maxLength="2000" 
-        @change="(e: Event) => (inputValue = (e.target as HTMLInputElement).value)" 
+      <McInput
+        :value="inputValue"
+        :maxLength="2000"
+        @change="(value: string) => inputValue = value"
         @submit="onSubmit"
       >
         <template #extra>
@@ -78,9 +78,37 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, reactive, computed } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+import OpenAI from 'openai';
 import Header from './components/Header.vue';
 
+interface Message {
+  from: 'user' | 'model';
+  content: string;
+  loading?: boolean;
+  id?: string;
+  avatarConfig?: {
+    imgSrc: string;
+  };
+}
+
+const client = reactive({
+  instance: null as OpenAI | null,
+});
+
+const settingsStore = useLocalStorage('ai-settings', {
+  apiBase: 'https://aiapi.magong.site/v1',
+  openaiApiKey: 'sk-jTzZGIAMZux11AA6666d54D5A27541C28c92Ca54F8D33c83',
+  model: 'deepseek-chat',
+});
+
+client.instance = new OpenAI({
+  apiKey: computed(() => settingsStore.value.openaiApiKey).value,
+  baseURL: computed(() => settingsStore.value.apiBase).value,
+  dangerouslyAllowBrowser: true,
+});
+
 const description = [
   '我正在开发一些常用的AI工具，你可以点击下方按钮访问相关工具，或者在对话栏输入工具名',
   '如果你更多需求想实现，欢迎在下方社交账号联系我',
@@ -128,20 +156,53 @@ const messages = ref<any[]>([
   },
 ]);
 
-const onSubmit = (evt: string) => {
+const onSubmit = async (evt: string) => {
   startPage.value = false;
+  inputValue.value = '';
+  
   // 用户发送消息
   messages.value.push({
     from: 'user',
     content: evt,
+    avatarConfig: { imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg' }
   });
-  setTimeout(() => {
-    // 模型返回消息
-    messages.value.push({
-      from: 'model',
-      content: evt,
+
+  // 模型的回复消息
+  messages.value.push({
+    from: 'model',
+    content: '',
+    avatarConfig: { imgSrc: 'https://matechat.gitcode.com/logo.svg' },
+    loading: true,
+  });
+
+  try {
+    const completion = await client.instance!.chat.completions.create({
+      model: settingsStore.value.model,
+      messages: [{ role: 'user', content: evt }],
+      stream: true,
     });
-  }, 200);
+
+    messages.value[messages.value.length - 1].loading = false;
+    
+    for await (const chunk of completion) {
+      const content = chunk.choices[0]?.delta?.content || '';
+      const chatId = chunk.id;
+      if (messages.value[messages.value.length - 1].id === chatId) {
+        messages.value[messages.value.length - 1].content += content;
+      } else {
+        messages.value.push({
+          from: 'model',
+          content: content,
+          id: chatId,
+          avatarConfig: { imgSrc: 'https://matechat.gitcode.com/logo.svg' }
+        });
+      }
+    }
+  } catch (error) {
+    console.error('API请求失败:', error);
+    messages.value[messages.value.length - 1].content = '请求失败，请检查 API 设置';
+    messages.value[messages.value.length - 1].loading = false;
+  }
 };
 </script>