<script lang="ts" setup>
const getPopularInquiriesByRole = () => {
  return [
    {
      label: "新生入学",
      inquiries: [
        {
          question: "新生报到时间",
        },
        {
          question: "新生报到流程",
        },
        {
          question: "如何到达学院",
        },
        {
          question: "如何办理户口迁移",
        },
        {
          question: "学院 VPN 使用方法",
        },
      ],
    },
    {
      label: "学校概况",
    },
    {
      label: "学术学习",
    },
    {
      label: "生活服务",
    },
    {
      label: "就业辅导",
    },
  ];
};

const inquiries = computed(() => getPopularInquiriesByRole());
</script>

<template>
  <div>
    <div class="p-4 h-full flex flex-col gap-4 mb-20">
      <PopularInquiries :inquiries-list="inquiries" />

      <ChatUserMessage message="眩生花是什么？" />
      <ChatBotMessage
        name="AI 辅导员"
        message="眩生花是一家科技公司，全称为重庆眩生花科技有限公司。它专注于新一代人工智能技术的研发与应用，包括AI大模型、AIGC（生成式人工智能）、AI Agent、AI-First以及AGI（通用人工智能）等领域的创新解决方案。公司的目标是通过这些先进技术为高等教育、职业教育和基础教育等行业提供变革性的服务，助力教育生态的重塑。

眩生花秉承“以人为本、抱诚守真、求实创新”的价值观，致力于成为AI教育时代的变革者，推动教育方式的革新与进步。"
      />
      <ChatUserMessage message="这是前端测试示例消息" />
      <ChatBotMessage name="AI 辅导员" />
    </div>
    <div
      class="fixed inset-x-0 bottom-0 p-4 bg-white/90 rounded-t-2xl shadow-2xl dark:bg-neutral-800/90 backdrop-blur-2xl"
    >
      <img
        src="~/assets/image/pattern/ai_glow.png"
        class="absolute top-0 inset-x-0 opacity-50"
      />
      <div class="w-full flex justify-between items-center gap-2">
        <UInput placeholder="请输入问题" class="flex-1" size="xl" />
        <UButton
          color="primary"
          variant="solid"
          size="xl"
          trailing-icon="tabler:send-2"
          >提问</UButton
        >
      </div>
    </div>
  </div>
</template>

<style scoped></style>
