132 lines
3.3 KiB
Vue
132 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
||
import { toTypedSchema } from '@vee-validate/zod'
|
||
import { useForm } from 'vee-validate'
|
||
import { toast } from 'vue-sonner'
|
||
import { z } from 'zod'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const historyStore = useLlmHistories('course-teaching-plan')
|
||
const { conversations } = storeToRefs(historyStore)
|
||
const { updateConversation, appendChunkToLast, isConversationExist } =
|
||
historyStore
|
||
|
||
const activeConversationId = ref<string | null>(null)
|
||
|
||
watch(activeConversationId, (val) => {
|
||
if (val) {
|
||
router.replace({
|
||
query: {
|
||
fn: route.query.fn,
|
||
conversationId: val,
|
||
},
|
||
})
|
||
} else {
|
||
router.replace({
|
||
query: {
|
||
fn: route.query.fn,
|
||
},
|
||
})
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
if (route.query.conversationId) {
|
||
if (isConversationExist(route.query.conversationId as string)) {
|
||
activeConversationId.value = route.query.conversationId as string
|
||
} else {
|
||
activeConversationId.value = null
|
||
toast.error('会话不存在')
|
||
}
|
||
}
|
||
})
|
||
|
||
const schema = z.object({
|
||
identity: z.string({ required_error: '请输入你的身份' }).describe('身份'),
|
||
mainPlan: z.string({ required_error: '请输入主要计划' }).describe('主要计划'),
|
||
planTemplate: z
|
||
.string({ required_error: '请输入教学计划模板' })
|
||
.describe('教学计划模板'),
|
||
otherRequirement: z.string().describe('其他要求').optional(),
|
||
})
|
||
|
||
const form = useForm({
|
||
validationSchema: toTypedSchema(schema),
|
||
})
|
||
|
||
const onSubmit = (values: z.infer<typeof schema>) => {
|
||
http_stream<z.infer<typeof schema>>('/ai/teaching-plan/stream', values, {
|
||
onStart(id, created_at) {
|
||
activeConversationId.value = id
|
||
updateConversation(id, {
|
||
id,
|
||
created_at,
|
||
title: values.mainPlan,
|
||
messages: [
|
||
{
|
||
role: 'user',
|
||
content: `*生成一份教学计划*`,
|
||
},
|
||
{
|
||
role: 'assistant',
|
||
content: '',
|
||
},
|
||
],
|
||
})
|
||
},
|
||
onTextChunk: (chunk) => {
|
||
appendChunkToLast(activeConversationId.value!, chunk)
|
||
},
|
||
onComplete: (id, finished_at) => {
|
||
updateConversation(id!, {
|
||
finished_at,
|
||
})
|
||
},
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<AiConversation
|
||
:form
|
||
:form-schema="schema"
|
||
:form-field-config="{
|
||
identity: {
|
||
inputProps: {
|
||
placeholder: '请输入你的身份，如：高中数学教师、大学物理教师',
|
||
},
|
||
},
|
||
mainPlan: {
|
||
component: 'textarea',
|
||
inputProps: {
|
||
placeholder:
|
||
'请输入主要计划，如：课程目标、教学内容安排、教学方法设计',
|
||
},
|
||
},
|
||
planTemplate: {
|
||
component: 'textarea',
|
||
inputProps: {
|
||
placeholder:
|
||
'请输入教学计划模板，如：教学目标、教学进度、考核评估方式',
|
||
},
|
||
},
|
||
otherRequirement: {
|
||
inputProps: {
|
||
placeholder: '请输入其他要求',
|
||
},
|
||
},
|
||
}"
|
||
:conversations
|
||
:active-conversation-id="activeConversationId"
|
||
disable-user-input
|
||
@submit="onSubmit"
|
||
@update:conversation-id="activeConversationId = $event"
|
||
@delete-conversation="historyStore.removeConversation($event)"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|