| | |
| | | |
| | | <div class="flex-auto text-[#ccc] flex flex-col items-center mt-6 overflow-y-auto" ref="chatRoomRef"> |
| | | <div |
| | | :class="{ 'bg-[#41424a]': index === activeIndex }" |
| | | :class="{ 'bg-[#41424a]': item.id === activeRoomId }" |
| | | class="group flex items-center w-full h-10 rounded-md cursor-pointer px-2 py-2 flex-0" |
| | | v-for="(item, index) in chatRoomList" |
| | | :key="index" |
| | | @click="roomClick(item, index)" |
| | | @click="roomClick(item)" |
| | | > |
| | | <div class="ywicon icon-xiaoxi flex-0 mr-2.5"></div> |
| | | <div class="flex-auto text-ellipsis text-nowrap text-sm group-hover:text-[#0084ff]">chat room</div> |
| | | <div class="flex-auto text-ellipsis text-nowrap text-sm group-hover:text-[#0084ff]">{{ item.title }}</div> |
| | | <div class="text-gray-100 flex items-center space-x-2 ml-1"> |
| | | <div class="ywicon invisible icon-bianji visible group-hover:visible !text-sm"></div> |
| | | |
| | | <el-popconfirm title="确定删除这个聊天室?" @confirm.stop="confirmDeleteChatRoom(item, index)"> |
| | | <el-popconfirm title="确定删除这个聊天室?" @confirm.stop="confirmDeleteChatRoom(item)"> |
| | | <template #reference> |
| | | <div class="ywicon invisible icon-shanchu3 visible group-hover:visible"></div> |
| | | </template> |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import { nextTick, reactive, ref, watch } from 'vue'; |
| | | import { nextTick, onMounted, reactive, ref } from 'vue'; |
| | | import type { ChatRoomItem } from './types'; |
| | | import router from '/@/router'; |
| | | import { chatRoomList } from '/@/stores/chatRoom'; |
| | | import { Local } from '/@/utils/storage'; |
| | | import { CreateHistoryGroup, DeleteHistoryGroups, GetHistoryGroups } from '/@/api/ai/chat'; |
| | | import { chatRoomList, activeRoomId } from '/@/stores/chatRoom'; |
| | | let state = reactive({ |
| | | searchInput: '', |
| | | selectDateOption: [ |
| | |
| | | state.isShowDate = !state.isShowDate; |
| | | }; |
| | | |
| | | const activeIndex = ref(null); |
| | | const newChatRoomClick = () => { |
| | | const gotoAnswerPage = (room: ChatRoomItem) => { |
| | | if (room.isInitial) { |
| | | router.push({ |
| | | name: 'Home', |
| | | }); |
| | | } else { |
| | | router.push({ |
| | | name: 'AskAnswer', |
| | | query: { |
| | | id: room.id, |
| | | }, |
| | | }); |
| | | } |
| | | setTimeout(() => { |
| | | activeRoomId.value = room.id; |
| | | |
| | | }, 0); |
| | | |
| | | |
| | | |
| | | }; |
| | | |
| | | const newChatRoomClick = async () => { |
| | | const res = await CreateHistoryGroup({ |
| | | group_title: 'chat room', |
| | | }); |
| | | |
| | | const newRoom = { |
| | | id: res.history_group_id, |
| | | isInitial: true, |
| | | title: 'chat room', |
| | | }; |
| | | console.log("🚀 ~ chatRoomList.value:", chatRoomList.value) |
| | | |
| | | if (!chatRoomList.value) { |
| | | chatRoomList.value = [newRoom]; |
| | | } else { |
| | | chatRoomList.value.unshift(newRoom); |
| | | } |
| | | activeIndex.value = 0; |
| | | nextTick(() => { |
| | | router.push({ |
| | | name: 'Home', |
| | | }); |
| | | }); |
| | | gotoAnswerPage(newRoom); |
| | | }; |
| | | |
| | | const roomClick = (room: ChatRoomItem, index: number) => { |
| | | activeIndex.value = index; |
| | | router.push({ |
| | | name: 'Home', |
| | | }); |
| | | const roomClick = (room: ChatRoomItem) => { |
| | | gotoAnswerPage(room); |
| | | }; |
| | | |
| | | const confirmDeleteChatRoom = (room: ChatRoomItem, index: number) => { |
| | | const confirmDeleteChatRoom =async (room: ChatRoomItem) => { |
| | | |
| | | |
| | | const res = await DeleteHistoryGroups({ |
| | | history_group_id:room.id |
| | | }); |
| | | |
| | | const foundIndex = chatRoomList.value.findIndex((item) => item === room); |
| | | chatRoomList.value.splice(foundIndex, 1); |
| | | if (chatRoomList.value.length === 0) { |
| | | newChatRoomClick(); |
| | | return; |
| | | } |
| | | roomClick(chatRoomList.value[0]); |
| | | chatRoomRef.value.firstElementChild?.scrollIntoView(); |
| | | activeIndex.value = 0; |
| | | }; |
| | | |
| | | watch( |
| | | () => chatRoomList.value, |
| | | (val) => { |
| | | Local.set('chatRoomList', val); |
| | | onMounted(async () => { |
| | | const res = await GetHistoryGroups(); |
| | | |
| | | const resData = (res?.groups || []) as any[]; |
| | | chatRoomList.value = resData?.map((item) => { |
| | | return { |
| | | id: item.group_id, |
| | | title: item.group_title, |
| | | createTime: item.create_time, |
| | | isInitial: false, |
| | | }; |
| | | }); |
| | | if (!chatRoomList.value || chatRoomList.value.length === 0) { |
| | | newChatRoomClick(); |
| | | } else { |
| | | roomClick(chatRoomList.value[0]); |
| | | } |
| | | ); |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .set-input { |