IntelliClass_FE/components/fn/teach/KnowledgeDiagram.vue
Timothy Yin 49b9e97ee8
Some checks failed
CI / test (push) Failing after 1m12s
CI / lint (push) Failing after 14m36s
feat: 完成教学设计模块(除了课程图谱),添加了炫酷的思考中动画
2025-04-27 18:51:40 +08:00

122 lines
2.8 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({
file: 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-standard/stream',
values,
{
onStart(id, created_at) {
activeConversationId.value = id
updateConversation(id, {
id,
created_at,
title: `知识图谱`,
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="{
file: {
component: 'file',
inputProps: {
accept: 'application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation',
},
},
requirement: {
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>