115 lines
2.6 KiB
Vue
115 lines
2.6 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-std-design')
|
||
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({
|
||
query: z.string({ required_error: '请输入课程名称' }).describe('课程名称'),
|
||
})
|
||
|
||
const form = useForm({
|
||
validationSchema: toTypedSchema(schema),
|
||
})
|
||
|
||
const onSubmit = (values: z.infer<typeof schema>) => {
|
||
http_stream<z.infer<typeof schema>>(
|
||
'/ai/course-standard/stream',
|
||
values,
|
||
{
|
||
onStart(id, created_at) {
|
||
activeConversationId.value = id
|
||
updateConversation(id, {
|
||
id,
|
||
created_at,
|
||
title: values.query,
|
||
messages: [
|
||
{
|
||
role: 'user',
|
||
content: `*生成一份 ${values.query} 的课程标准*`,
|
||
},
|
||
{
|
||
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="{
|
||
query: {
|
||
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>
|