refactor(deps): migrate to nuxt v4
This commit is contained in:
81
app/components/aigc/chat/ChatItem.vue
Normal file
81
app/components/aigc/chat/ChatItem.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<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">
|
||||
<Icon
|
||||
v-if="!!chatSession.assistant"
|
||||
name="i-tabler-masks-theater"
|
||||
class="text-lg mr-1"
|
||||
/>
|
||||
<span class="flex-1 text-ellipsis overflow-x-hidden">
|
||||
{{
|
||||
!!chatSession.assistant
|
||||
? chatSession.assistant.tpl_name
|
||||
: chatSession.subject
|
||||
}}
|
||||
</span>
|
||||
</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"
|
||||
>
|
||||
<Icon 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)] inline-flex items-center 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>
|
||||
129
app/components/aigc/chat/Message.vue
Normal file
129
app/components/aigc/chat/Message.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from 'vue'
|
||||
import type { ChatMessage } from '~/typings/llm'
|
||||
import MessageResponding from '~/components/Icon/MessageResponding.vue'
|
||||
|
||||
const props = defineProps({
|
||||
message: {
|
||||
type: Object as PropType<ChatMessage>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const dayjs = useDayjs()
|
||||
|
||||
const message_place_end = computed(() => props.message?.role !== 'assistant')
|
||||
const message_avatar = computed(() => {
|
||||
switch (props.message?.role) {
|
||||
case 'user':
|
||||
return 'i-fluent-emoji-slightly-smiling-face'
|
||||
case 'assistant':
|
||||
return 'i-fluent-emoji-robot'
|
||||
case 'system':
|
||||
return 'i-fluent-emoji-receipt'
|
||||
}
|
||||
})
|
||||
const message_background = computed(() => {
|
||||
if (props.message?.interrupted) {
|
||||
return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:!border-red-500/50'
|
||||
}
|
||||
switch (props.message?.role) {
|
||||
case 'user':
|
||||
return 'bg-primary-100 dark:bg-primary-800'
|
||||
case 'assistant':
|
||||
case 'system':
|
||||
return 'bg-neutral-100 dark:bg-neutral-800'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="chat"
|
||||
:class="{ 'justify-end': message_place_end }"
|
||||
>
|
||||
<div
|
||||
class="chat-inside"
|
||||
:class="{ 'items-end': message_place_end }"
|
||||
>
|
||||
<div class="chat-inside-avatar">
|
||||
<Icon
|
||||
:name="message_avatar"
|
||||
class="text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col"
|
||||
:class="{ 'items-end': message_place_end }"
|
||||
>
|
||||
<Transition
|
||||
mode="out-in"
|
||||
name="message-content-change"
|
||||
>
|
||||
<div
|
||||
class="chat-inside-content relative"
|
||||
:class="message_background"
|
||||
:key="message.content"
|
||||
>
|
||||
<div v-if="message.content">
|
||||
<!-- TODO: 生成结果的代码添加复制按钮 -->
|
||||
<Markdown :source="message.content" />
|
||||
</div>
|
||||
<span v-else>
|
||||
<MessageResponding
|
||||
class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<div
|
||||
v-if="message.preset"
|
||||
class="chat-inside-extra"
|
||||
>
|
||||
预设消息
|
||||
</div>
|
||||
<div
|
||||
v-else-if="message.create_at"
|
||||
class="chat-inside-extra"
|
||||
>
|
||||
{{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat {
|
||||
@apply w-full flex;
|
||||
|
||||
&-inside {
|
||||
@apply w-fit flex flex-col gap-2;
|
||||
@apply md:max-w-[80%];
|
||||
|
||||
&-avatar {
|
||||
@apply w-8 h-8 flex justify-center items-center rounded-xl;
|
||||
@apply bg-white border shadow-card;
|
||||
@apply dark:bg-neutral-800 dark:border-neutral-700;
|
||||
}
|
||||
|
||||
&-content {
|
||||
@apply px-2 py-2.5 rounded-xl text-sm w-fit;
|
||||
@apply border dark:border-neutral-700;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
@apply px-1 text-xs text-neutral-300 dark:text-neutral-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content-change-enter-active,
|
||||
.message-content-change-leave-active {
|
||||
@apply transition-all duration-300 overflow-hidden;
|
||||
}
|
||||
|
||||
.message-content-change-enter-from {
|
||||
@apply opacity-0 translate-y-4;
|
||||
}
|
||||
</style>
|
||||
208
app/components/aigc/chat/NewSessionScreen.vue
Normal file
208
app/components/aigc/chat/NewSessionScreen.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<script setup lang="ts">
|
||||
import type { Assistant } from '~/typings/llm'
|
||||
import { useLazyAsyncData } from '#app'
|
||||
|
||||
const loginState = useLoginState()
|
||||
|
||||
const props = defineProps({
|
||||
nonBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
// noinspection JSUnusedLocalSymbols
|
||||
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
|
||||
v-if="!nonBack"
|
||||
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>
|
||||
|
||||
<!--suppress CssUnusedSymbol -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user