feat: assistant templates startup

components/aigc/chat/NewSessionScreen.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type {Assistant} from '~/typings/llm'
+import {useLazyAsyncData} from '#app'
+
+const loginState = useLoginState()
+
+const props = defineProps()
+const emit = defineEmits({
+  select: (assistant: Assistant | null) => true,
+  cancel: () => true,
+})
+
+const {
+  data: assistantTemplates,
+  pending: assistantTemplatesPending,
+} = await useLazyAsyncData(
+    'App.Assistant_Template.GetList',
+    () => useFetchWrapped<
+        req.AssistantTemplateList & AuthedRequest, BaseResponse<PagedData<Assistant>>
+    >('App.Assistant_Template.GetList', {
+      user_id: loginState.user.id,
+      token: loginState.token as string,
+      page: 1,
+      perpage: 20,
+    }), {
+      server: false,
+    },
+)
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col items-center gap-4 relative">
+    <Transition name="loading-screen">
+      <div v-if="assistantTemplatesPending"
+           class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-[1] text-primary">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
+          <defs>
+            <filter id="svgSpinnersGooeyBalls20">
+              <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/>
+              <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/>
+              <feBlend in="SourceGraphic" in2="z"/>
+            </filter>
+          </defs>
+          <g filter="url(#svgSpinnersGooeyBalls20)">
+            <circle cx="5" cy="12" r="4" fill="currentColor">
+              <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                       repeatCount="indefinite" values="5;8;5"/>
+            </circle>
+            <circle cx="19" cy="12" r="4" fill="currentColor">
+              <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                       repeatCount="indefinite" values="19;16;19"/>
+            </circle>
+            <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+                              values="0 12 12;360 12 12"/>
+          </g>
+        </svg>
+      </div>
+    </Transition>
+    <div class="w-full p-2">
+      <UButton
+          variant="ghost"
+          size="xs"
+          @click="emit('cancel')"
+      >
+        <template #leading>
+          <UIcon name="i-tabler-chevron-left"/>
+        </template>
+        <span>返回</span>
+      </UButton>
+    </div>
+    <div class="flex flex-col items-center gap-8">
+      <h1 class="text-lg font-medium flex flex-col items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path
+                d="M13.192 9h6.616a2 2 0 0 1 1.992 2.183l-.567 6.182A4 4 0 0 1 17.25 21h-1.5a4 4 0 0 1-3.983-3.635l-.567-6.182A2 2 0 0 1 13.192 9M15 13h.01M18 13h.01"/>
+            <path
+                d="M15 16.5c1 .667 2 .667 3 0m-9.368-.518A4.037 4.037 0 0 1 8.25 16h-1.5a4 4 0 0 1-3.983-3.635L2.2 6.183A2 2 0 0 1 4.192 4h6.616a2 2 0 0 1 2 2M6 8h.01M9 8h.01"/>
+            <path d="M6 12c.764-.51 1.528-.63 2.291-.36"/>
+          </g>
+        </svg>
+        <span>选择智能助手</span>
+      </h1>
+      <UButton
+          class="group ring-primary hover:ring-2 transition duration-300"
+          variant="soft"
+          size="lg"
+          :ui="{ rounded: 'rounded-full' }"
+          @click="emit('select', null)"
+      >
+        <span class="-mt-0.5">直接开始</span>
+        <template #trailing>
+          <span class="group-hover:translate-x-1 transition duration-300 ease-out relative w-3 h-full -mt-0.5">
+            <UIcon
+                name="i-tabler-arrow-right"
+                class="w-5 h-5 absolute top-auto bottom-auto right-0 opacity-0 group-hover:opacity-100 transition duration-300"
+            />
+            <UIcon
+                name="i-tabler-chevron-right"
+                class="w-5 h-5 absolute top-auto bottom-auto right-0 -mr-[3.5px] group-hover:opacity-0 transition duration-300"
+            />
+          </span>
+        </template>
+      </UButton>
+    </div>
+    <div
+        class="w-full md:w-3/4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto p-4 md:p-8"
+    >
+
+      <div
+          v-for="assistant in assistantTemplates?.data.items || []"
+          :key="assistant.id"
+          class="assistant-item select-none"
+          @click="emit('select', assistant)"
+      >
+        <div class="flex flex-col gap-1">
+          <div class="text-base font-medium">{{ assistant.tpl_name }}</div>
+          <div class="text-sm text-neutral-500 dark:text-neutral-400">{{ assistant.des }}</div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-screen-leave-active {
+  @apply transition duration-300;
+}
+
+.loading-screen-leave-to {
+  @apply opacity-0;
+}
+
+.assistant-item {
+  @apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-sm ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
+  @apply flex items-center gap-4 px-4 py-2 cursor-pointer border dark:border-neutral-700 hover:border-transparent;
+}
+</style>