127 lines
3.3 KiB
Vue
127 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-chapter-gen')
|
||
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({
|
||
target: z.string({ required_error: '请输入授课对象' }).describe('授课对象'),
|
||
topic: z.string({ required_error: '请输入课程主题' }).describe('课程主题'),
|
||
goal: z.string({ required_error: '请输入课程目标' }).describe('课程目标'),
|
||
requirement: z.string().describe('其他要求').optional(),
|
||
})
|
||
|
||
const form = useForm({
|
||
validationSchema: toTypedSchema(schema),
|
||
})
|
||
|
||
const onSubmit = (values: z.infer<typeof schema>) => {
|
||
http_stream<z.infer<typeof schema>>('/ai/course-chapter/stream', values, {
|
||
onStart(id, created_at) {
|
||
activeConversationId.value = id
|
||
updateConversation(id, {
|
||
id,
|
||
created_at,
|
||
title: values.target,
|
||
messages: [
|
||
{
|
||
role: 'user',
|
||
content: `生成课程章节大纲\n授课对象：${values.target}\n课程主题：${values.topic}\n课程目标：${values.goal}\n其他要求：${values.requirement ?? '无'}`,
|
||
},
|
||
{
|
||
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="{
|
||
target: {
|
||
inputProps: {
|
||
placeholder: '请输入授课对象，如：本科生、研究生',
|
||
},
|
||
},
|
||
topic: {
|
||
inputProps: {
|
||
placeholder: '请输入课程主题，如：数据结构与算法',
|
||
},
|
||
},
|
||
goal: {
|
||
inputProps: {
|
||
placeholder: '请输入课程目标，如：掌握数据结构与算法的基本概念',
|
||
},
|
||
},
|
||
requirement: {
|
||
component: 'textarea',
|
||
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>
|