130 lines
3.3 KiB
Vue
130 lines
3.3 KiB
Vue
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
|
|
<script lang="ts" setup>
|
|
import type { FormContext } from 'vee-validate'
|
|
import type { AnyZodObject } from 'zod'
|
|
import type { LLMMessage, LLMMessages } from '.'
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const props = defineProps<{
|
|
formSchema: AnyZodObject
|
|
form: FormContext<any>
|
|
formFieldConfig?: {
|
|
[key: string]: {
|
|
component: string
|
|
props?: Record<string, any>
|
|
[key: string]: any
|
|
}
|
|
}
|
|
messages?: LLMMessage[]
|
|
messagesHistory?: LLMMessages[]
|
|
disableUserInput?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'submit', values: FormContext<any>['values']): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full flex flex-col gap-4">
|
|
<div class="flex justify-between items-start">
|
|
<div></div>
|
|
<div>
|
|
<!-- Histories -->
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
<Icon name="tabler:history" />
|
|
历史记录
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
|
|
<!-- 消息区域调整 -->
|
|
<div
|
|
v-if="messages && messages.length > 0"
|
|
class="flex flex-col flex-1 gap-4 max-h-[calc(100vh-280px)]"
|
|
>
|
|
<div
|
|
class="flex-1 flex flex-col gap-6 overflow-y-auto scroll-smooth px-2 pb-4"
|
|
>
|
|
<div
|
|
v-for="(message, i) in messages"
|
|
:key="i"
|
|
class="w-full flex"
|
|
:class="`${message.role == 'user' ? 'justify-end' : 'justify-start'}`"
|
|
>
|
|
<div
|
|
class="w-fit px-4 py-3 rounded-lg bg-white dark:bg-gray-800 shadow max-w-prose border"
|
|
:class="`${message.role == 'user' ? 'rounded-br-none' : 'rounded-bl-none'}`"
|
|
>
|
|
<MarkdownRenderer
|
|
v-if="!!message.content"
|
|
:source="message.content"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="flex items-center gap-2 text-foreground/60 text-sm font-medium"
|
|
>
|
|
<Icon
|
|
name="svg-spinners:270-ring-with-bg"
|
|
class="text-lg"
|
|
/>
|
|
思考中
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="!disableUserInput"
|
|
class="relative"
|
|
>
|
|
<Textarea
|
|
class="w-full h-12 pr-24 shadow-lg"
|
|
placeholder="请告诉我额外的补充需求，我会尽量满足您的要求"
|
|
/>
|
|
<div class="absolute right-2 bottom-2">
|
|
<Button
|
|
type="submit"
|
|
size="sm"
|
|
>
|
|
<Icon name="tabler:send" />
|
|
发送
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表单区域不变 -->
|
|
<div
|
|
v-else
|
|
class="rounded-lg p-6 bg-primary/5"
|
|
>
|
|
<div class="flex flex-col gap-4">
|
|
<AutoForm
|
|
v-if="formSchema && form"
|
|
:schema="formSchema"
|
|
:form="form"
|
|
:field-config="formFieldConfig"
|
|
class="space-y-2"
|
|
@submit="(values) => $emit('submit', values)"
|
|
>
|
|
<div class="w-full flex justify-center gap-2 pt-4">
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
>
|
|
<Icon name="mage:stars-c-fill" />
|
|
一键生成
|
|
</Button>
|
|
</div>
|
|
</AutoForm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|