chatgpt-web/src/views/chat/layout/sider/List.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>