<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>