68 lines
1.6 KiB
Vue
68 lines
1.6 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">
|
|
{{ chatSession.subject }}
|
|
</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> |