76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import ChatItem from "~/components/aigc/chat/ChatItem.vue";
|
|
import type {ChatSession, ChatSessionId} from "~/components/aigc/chat";
|
|
|
|
useHead({
|
|
title: '聊天 | XSH AI'
|
|
})
|
|
|
|
const dayjs = useDayjs()
|
|
|
|
const sessions = ref<ChatSession[]>([
|
|
{
|
|
id: Math.random().toString(36).slice(2),
|
|
subject: '测试聊天',
|
|
messages: [
|
|
{
|
|
id: Math.random().toString(36).slice(2),
|
|
role: 'user',
|
|
content: '你好',
|
|
create_at: dayjs().unix(),
|
|
}
|
|
],
|
|
create_at: dayjs().unix(),
|
|
},
|
|
{
|
|
id: Math.random().toString(36).slice(2),
|
|
subject: '测试聊天2',
|
|
messages: [],
|
|
create_at: dayjs().unix(),
|
|
},
|
|
])
|
|
const currentSessionId = ref<ChatSessionId | null>(null)
|
|
|
|
onMounted(() => {
|
|
if (sessions.value.length > 0) {
|
|
currentSessionId.value = sessions.value[0].id
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex relative">
|
|
<div class="h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col w-[300px] shadow-sidebar">
|
|
<div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
|
|
<!-- list -->
|
|
<div class="flex flex-col gap-3">
|
|
<!-- ClientOnly avoids hydrate exception -->
|
|
<ClientOnly>
|
|
<ChatItem
|
|
v-for="(session, i) in sessions"
|
|
:chat-session="session" :key="i"
|
|
:active="session.id === currentSessionId"
|
|
@click="currentSessionId = session.id"
|
|
@remove="sessions.splice(sessions.findIndex(s => s.id === session.id), 1)"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div></div>
|
|
<div>
|
|
<UButton color="white" variant="solid" icon="i-tabler-message-circle-plus">
|
|
新建聊天
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
content
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |