11.30

Author: Whalekv

src/components/InputSection.vue

@@ -4,7 +4,6 @@ import { useUserSentMessagesStore } from '../stores/userSentMessages'
 const userSentMessagesStore = useUserSentMessagesStore()
 const handleSent = async () => {
   if (!userSentMessagesStore.userMessage.trim()) return
-
   console.log('用户输入的内容', userSentMessagesStore.userMessage)
   await userSentMessagesStore.addUserMessage(userSentMessagesStore.userMessage)
 }

src/components/SideDrawer.vue

@@ -1,14 +1,78 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useUserSentMessagesStore } from '../stores/userSentMessages'
+
+const drawer = ref(false)
+const store = useUserSentMessagesStore()
+
+const handleNewChat = () => {
+  store.createNewChat()
+}
+const handleChatSelect = (chatId) => {
+  store.switchChat(chatId)
+}
+</script>
+
 <template>
   <el-button type="primary" size="large" style="margin-left: 16px" @click="drawer = true">
-    open
+    历史聊天
   </el-button>
-
-  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
-    <span>Hi there!</span>
+  <el-drawer v-model="drawer" title="历史聊天">
+    <div class="drawer-content">
+      <el-button type="primary" @click="handleNewChat" style="width: 100%; margin-bottom: 20px">
+        新建对话
+      </el-button>
+      <el-card
+        v-for="chat in store.chatHistory"
+        :key="chat.id"
+        class="chat-card"
+        :class="{ active: chat.id === store.currentChatId }"
+        @click="handleChatSelect(chat.id)"
+      >
+      </el-card>
+    </div>
   </el-drawer>
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue'
-const drawer = ref(false)
-</script>
+<style scoped>
+.drawer-content {
+  padding: 20px;
+}
+
+.chat-card {
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.chat-card:hover {
+  transform: translateX(5px);
+}
+
+.chat-card.active {
+  border-left: 4px solid #409eff;
+}
+
+.chat-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.chat-title {
+  font-weight: bold;
+}
+
+.chat-last-message {
+  font-size: 0.9em;
+  color: #666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-time {
+  font-size: 0.8em;
+  color: #999;
+}
+</style>

src/services/coze-service.js

@@ -1,7 +1,33 @@
-const COZE_API_URL = 'https://api.coze.cn/v3/chat?conversation_id=7442211537055678499'
+const COZE_API_CREATCONVERSATION_URL = 'https://api.coze.cn/v1/conversation/create'
 const COZE_KEY = 'pat_7fkzMiEFmB0gcEjrFiM6Exa2O317TsmgWDoq0lbjr7dre3zDGCIihARO2Lp64XEJ'
 const BOT_ID = '7442210806965813258'
 
+//创建会话接口
+export async function createConversation() {
+  try {
+    const response = await fetch(COZE_API_CREATCONVERSATION_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${COZE_KEY}`,
+      },
+    })
+    if (!response.ok) {
+      throw new Error(`API1调用失败: ${response.status}`)
+    }
+    const data = await response.json()
+    const id = data.data.id
+    console.log('返回的会话ID:', id)
+    console.log('API1响应状态:', response.status)
+    return id
+  } catch (error) {
+    console.error('Coze API1调用错误:', error)
+    throw error
+  }
+}
+
+const COZE_API_URL = `https://api.coze.cn/v3/chat?conversation_id=7442211537055678499`
+
 export async function chatWithCoze(message, onChunk) {
   try {
     const response = await fetch(COZE_API_URL, {
@@ -26,10 +52,10 @@ export async function chatWithCoze(message, onChunk) {
     })
 
     if (!response.ok) {
-      throw new Error(`API调用失败: ${response.status}`)
+      throw new Error(`API2调用失败: ${response.status}`)
     }
 
-    console.log('API响应状态:', response.status)
+    console.log('API2响应状态:', response.status)
 
     const reader = response.body.getReader()
     const decoder = new TextDecoder()

src/stores/userSentMessages.js

@@ -1,23 +1,59 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { chatWithCoze } from '../services/coze-service'
+import { chatWithCoze, createConversation } from '../services/coze-service'
 
 export const useUserSentMessagesStore = defineStore('userSentMessages', () => {
   const messages = ref([])
   const userMessage = ref('')
+  const chatHistory = ref([
+    {
+      id: 1,
+      title: '对话1',
+      messages: [],
+      lastMessage: '这是最后一条消息',
+      timestamp: '2024-01-21 12:00',
+    },
+  ])
+  const currentChatId = ref(1)
+  var conversation_id = ref('')
+  function createNewChat() {
+    conversation_id.value = createConversation() //??????????????????????????返回值有对于的数据
+    const newChat = {
+      id: Date.now(),
+      title: `对话${chatHistory.value.length + 1}`,
+      messages: [],
+      lastMessage: '',
+      timestamp: new Date().toLocaleString,
+    }
+    chatHistory.value.push(newChat)
+    currentChatId.value = newChat.id
+    messages.value = []
+    console.log('Date.now()', Date.now())
+    console.log('conversation_id', conversation_id.value)
+  }
+
+  console.log('conversation_id', conversation_id)
+
+  function switchChat(chatId) {
+    currentChatId.value = chatId
+    const chat = chatHistory.value.find((c) => c.id === chatId)
+    if (chat) {
+      messages.value = chat.messages
+    }
+  }
 
   async function addUserMessage(message) {
     // 先保存消息内容
     const currentMessage = message
     // 立即清空输入框
     userMessage.value = ''
 
-    // 添加用户消息
-    messages.value.push({
+    const newUserMessage = {
       type: 'user',
       content: currentMessage,
       content_type: 'text',
-    })
+    }
+    messages.value.push(newUserMessage)
 
     try {
       // 准备 AI 消息
@@ -55,5 +91,9 @@ export const useUserSentMessagesStore = defineStore('userSentMessages', () => {
     messages,
     userMessage,
     addUserMessage,
+    chatHistory,
+    currentChatId,
+    createNewChat,
+    switchChat,
   }
 })