98 lines
3.5 KiB
Vue
98 lines
3.5 KiB
Vue
<script setup >
|
|
import {storeToRefs} from "pinia";
|
|
import {computed, ref} from 'vue'
|
|
import dayjs from "dayjs";
|
|
import { NInput, NPopconfirm, NScrollbar } from 'naive-ui'
|
|
import { SvgIcon } from '@/components/common'
|
|
import { useAppStore, useChatStore } from '@/store'
|
|
import { useBasicLayout } from '@/hooks/useBasicLayout'
|
|
import { sessionDetailForSetup } from '@/store'
|
|
const sessionDetailData=sessionDetailForSetup()
|
|
const { dataList,gptMode,currentListUuid,sessionDetail,isStop } = storeToRefs(sessionDetailData)
|
|
const chatStore = useChatStore()
|
|
async function handleSelect({ listUuid }) {
|
|
if (isActive(listUuid)){
|
|
return
|
|
}
|
|
isStop.value=true
|
|
sessionDetail.value=[]
|
|
currentListUuid.value=listUuid
|
|
sessionDetailData.getSessionDetail()
|
|
}
|
|
sessionDetailData.getDataList()
|
|
function handleEdit({ listUuid }) {
|
|
const item= dataList.value?.find((x)=>{
|
|
return x.listUuid===listUuid
|
|
})
|
|
item.isEdit=true
|
|
}
|
|
const handleDeleteDebounce = ()=>{
|
|
sessionDetailData.deleteSession()
|
|
}
|
|
function handleEnter({ listUuid }, isEdit, event) {
|
|
event?.stopPropagation()
|
|
if (event.key === 'Enter')
|
|
chatStore.updateHistory(listUuid, { isEdit })
|
|
}
|
|
|
|
function isActive(listUuid) {
|
|
return currentListUuid.value === listUuid
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<NScrollbar class="px-4">
|
|
<div class="flex flex-col gap-2 text-sm">
|
|
<template v-if="!dataList.length">
|
|
<div class="flex flex-col items-center mt-4 text-center text-neutral-300">
|
|
<SvgIcon icon="ri:inbox-line" class="mb-2 text-3xl" />
|
|
<span>{{ $t('common.noData') }}</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div v-for="(item, index) of dataList.filter(item => item.gptModel===gptMode)" :key="item.listUuid">
|
|
<a
|
|
class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group dark:border-neutral-800 dark:hover:bg-[#24272e]"
|
|
:class="isActive(item.listUuid) && ['border-[#764CF6]', 'bg-neutral-100', 'text-[#764CF6]', 'dark:bg-[#24272e]', 'dark:border-[#764CF6]', 'pr-14']"
|
|
@click="handleSelect(item)"
|
|
>
|
|
<span>
|
|
<SvgIcon icon="ri:message-3-line" />
|
|
</span>
|
|
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
|
|
<NInput
|
|
v-if="item.isEdit"
|
|
v-model:value="item.title" size="tiny"
|
|
@keypress="handleEnter(item, false, $event)"
|
|
/>
|
|
<span v-else>{{ item.title }}</span>
|
|
</div>
|
|
<div v-if="isActive(item.listUuid)" class="absolute z-10 flex visible right-1">
|
|
<template v-if="item.isEdit">
|
|
<button class="p-1" @click="handleEdit(item, false, $event)">
|
|
<SvgIcon icon="ri:save-line" />
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<!-- <button class="p-1">
|
|
<SvgIcon icon="ri:edit-line" @click.stop="handleEdit(item, true, $event)" />
|
|
</button>-->
|
|
|
|
<NPopconfirm placement="bottom" @positive-click.stop="handleDeleteDebounce(index, $event)">
|
|
<template #trigger>
|
|
<button class="p-1">
|
|
<SvgIcon icon="ri:delete-bin-line" />
|
|
</button>
|
|
</template>
|
|
{{ $t('chat.deleteHistoryConfirm') }}
|
|
</NPopconfirm>
|
|
</template>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</NScrollbar>
|
|
</template>
|