75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type {PropType} from 'vue'
|
|
import type {ChatSession} from '~/typings/llm'
|
|
|
|
const props = defineProps({
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
chatSession: {
|
|
type: Object as PropType<ChatSession>,
|
|
required: true,
|
|
},
|
|
})
|
|
const emit = defineEmits<{
|
|
(e: 'remove', session: ChatSession): void
|
|
}>()
|
|
|
|
const dayjs = useDayjs()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="chat-card group"
|
|
:class="{'active': active}"
|
|
:title="chatSession.subject"
|
|
>
|
|
<div class="chat-card-title">
|
|
<Icon
|
|
v-if="!!chatSession.assistant"
|
|
name="i-tabler-masks-theater"
|
|
class="text-lg -mt-1 mr-1"
|
|
/>
|
|
<span>
|
|
{{ !!chatSession.assistant ? chatSession.assistant.tpl_name : chatSession.subject }}
|
|
</span>
|
|
</div>
|
|
<div class="chat-card-meta">
|
|
<div>{{ chatSession.messages.length }}条对话</div>
|
|
<div>{{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
|
</div>
|
|
<div
|
|
@click.stop="emit('remove', chatSession)"
|
|
class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
|
|
>
|
|
<UIcon name="i-tabler-trash"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat-card {
|
|
@apply flex flex-col gap-2 bg-white dark:bg-neutral-800 px-4 py-3 rounded-lg relative border-2 border-transparent shadow-card;
|
|
@apply transition-none duration-150 hover:bg-cyan-300/5;
|
|
@apply select-none;
|
|
|
|
&.active {
|
|
@apply border-cyan-500;
|
|
}
|
|
|
|
&-title {
|
|
@apply w-[calc(100%-16px)] text-sm font-medium text-ellipsis text-nowrap overflow-x-hidden;
|
|
}
|
|
|
|
&-meta {
|
|
@apply flex justify-between items-center text-xs text-neutral-400;
|
|
}
|
|
|
|
&-remove-btn {
|
|
@apply absolute top-0.5 right-0 md:opacity-0;
|
|
@apply transition duration-300 hover:text-red-400;
|
|
@apply cursor-pointer;
|
|
}
|
|
}
|
|
</style> |