@windward/integrations 0.16.0 → 0.18.0

package/components/LLM/GenerateContent/AssessmentQuestionGenerateButton.vue

@@ -0,0 +1,285 @@
+<template>
+    <div>
+        <v-row class="container-generate-ai mt-2">
+            <v-col cols="12">{{
+                $t('windward.integrations.components.llm.ai_assistance')
+            }}</v-col>
+            <v-col cols="12">
+                <ContentSelector
+                    v-model="selectedContent"
+                    :disabled="isLoading || disabled"
+                ></ContentSelector>
+            </v-col>
+            <v-col cols="12">
+                <BloomTaxonomySelector
+                    v-model="selectedDifficulty"
+                    :advanced-levels="hasAdvancedBlooms"
+                    :disabled="isLoading || disabled"
+                ></BloomTaxonomySelector>
+            </v-col>
+            <v-col cols="12">
+                <v-btn
+                    elevation="0"
+                    color="secondary"
+                    class="mb-1 w-100"
+                    :loading="isLoading"
+                    :disabled="isLoading || disabled"
+                    @click="generateAIQuestion"
+                >
+                    <v-icon v-if="!isLoading" class="pr-1">
+                        mdi-magic-staff
+                    </v-icon>
+                    {{
+                        $t(
+                            'windward.integrations.components.llm.generate_content.generate_questions.button_label'
+                        )
+                    }}
+                    <template #loader>
+                        <v-progress-circular
+                            v-if="!showText || !showLoadingText"
+                            indeterminate
+                            size="23"
+                        ></v-progress-circular>
+                        <FakeTextStream
+                            v-if="showText && showLoadingText"
+                        ></FakeTextStream>
+                    </template>
+                </v-btn>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import ContentSelector from '../ContentSelector.vue'
+import BloomTaxonomySelector from '../BloomTaxonomySelector.vue'
+import FakeTextStream from './FakeTextStream'
+import AssessmentQuestion from '~/models/AssessmentQuestion'
+import Course from '~/models/Course'
+import Assessment from '~/models/Assessment'
+import Content from '~/models/Content'
+import ContentBlock from '~/models/ContentBlock'
+
+export default {
+    name: 'AssessmentQuestionGenerateButton',
+    components: {
+        ContentSelector,
+        BloomTaxonomySelector,
+        FakeTextStream,
+    },
+    props: {
+        // The assessment question
+        value: { type: [AssessmentQuestion, Object], required: true },
+        course: { type: [Course, Object], required: true },
+        content: { type: [Content, Object], required: true },
+        block: { type: [ContentBlock, Object], required: true },
+        disabled: { type: Boolean, required: false, default: false },
+        showText: { type: Boolean, required: false, default: true },
+    },
+    data() {
+        return {
+            isLoading: false,
+            loadingTimeout: null,
+            showLoadingText: false,
+            selectedContent: null,
+            selectedDifficulty: null,
+        }
+    },
+    computed: {
+        questionType() {
+            let type = _.get(this.value, 'question_type', '')
+
+            // Type wasn't readily available on the this.value. Determine based off the question type id
+            if (
+                type === '' &&
+                _.get(this.value, 'assessment_question_type_id', null) !== null
+            ) {
+                type = _.get(
+                    this.$Assessment.getQuestionType(
+                        _.get(this.value, 'assessment_question_type_id')
+                    ),
+                    'name',
+                    ''
+                )
+            }
+            return type
+        },
+
+        hasAdvancedBlooms() {
+            // Only add higher-level Bloom's taxonomy for supported question types
+            return [
+                'multi_choice_single_answer',
+                'multi_choice_multi_answer',
+                'ordering',
+            ].includes(this.questionType)
+        },
+    },
+    methods: {
+        async generateAIQuestion() {
+            this.isLoading = true
+
+            // Wait 5 seconds before kicking on the text
+            this.loadingTimeout = setTimeout(() => {
+                this.showLoadingText = true
+            }, 5000)
+
+            try {
+                const course = new Course(this.course)
+                const content = new Content(
+                    this.selectedContent || this.content
+                )
+
+                // ASSESSMENT QUESTION GENERATION
+                const assessment = new Assessment({ id: this.block.id })
+
+                const responseBuilder = AssessmentQuestion.custom(
+                    course,
+                    content,
+                    assessment,
+                    `suggest-questions`
+                ).where('question_type', this.questionType)
+
+                // Apply blooms level filter if it's not 'None'
+                if (this.selectedDifficulty !== 'None') {
+                    responseBuilder.where(
+                        'blooms_level',
+                        this.selectedDifficulty
+                    )
+                }
+
+                const response = await responseBuilder.get()
+
+                if (response && response.length > 0) {
+                    const generatedQuestion = response[0]
+
+                    this.$emit('input', generatedQuestion)
+                } else {
+                    throw new Error('Invalid response from question generation')
+                }
+            } catch (error) {
+                const errorMessage =
+                    error.response?.data?.error?.message ||
+                    error.message ||
+                    'assessment.error.technical'
+                const errorType = errorMessage.split('.').pop()
+                const basePath =
+                    'windward.integrations.components.llm.generate_content.generate_questions.errors'
+
+                let errorText = ''
+
+                // Check for character limit error by structured data first
+                const errorSubtype =
+                    error.response?.data?.error?.details?.error_subtype
+                const errorDetails = error.response?.data?.error?.details
+
+                if (errorSubtype === 'CHARACTER_LIMIT_EXCEEDED') {
+                    // Use structured data if available
+                    const field = errorDetails?.field || 'content'
+                    const limit = errorDetails?.limit
+                    const actual = errorDetails?.actual
+
+                    // Use parameterized message if we have the data
+                    if (limit && actual) {
+                        errorText = this.$t(
+                            `${basePath}.character_limit_detailed`,
+                            { field, limit, actual }
+                        )
+                    } else {
+                        // Fallback to generic message
+                        errorText = this.$t(`${basePath}.character_limit`)
+                    }
+                }
+                // Keep backward compatibility - check for old message pattern
+                else if (
+                    errorDetails?.message ===
+                    'An error occurred while generating content. Try generating again.'
+                ) {
+                    errorText = this.$t(`${basePath}.character_limit`)
+                } else if (
+                    errorType === 'insufficient_content' &&
+                    error.response?.data?.error?.details
+                ) {
+                    // Handle dynamic Bloom's taxonomy insufficient content errors
+                    const details = error.response.data.error.details
+                    const bloomsLevel = details.blooms_level
+                    const minimumRequired = details.minimum_required
+
+                    if (bloomsLevel && bloomsLevel !== 'None') {
+                        // Message with Bloom's level
+                        errorText =
+                            this.$t(`${basePath}.insufficient_content_blooms`, {
+                                bloomsLevel,
+                            }) +
+                            '\n\n' +
+                            this.$t(
+                                `${basePath}.insufficient_content_blooms_support`,
+                                { minimumRequired }
+                            )
+                    } else if (minimumRequired) {
+                        // Message without Bloom's level but with word count
+                        errorText =
+                            this.$t(
+                                `${basePath}.insufficient_content_dynamic`
+                            ) +
+                            '\n\n' +
+                            this.$t(
+                                `${basePath}.insufficient_content_dynamic_support`,
+                                { minimumRequired }
+                            )
+                    } else {
+                        // Fallback to static translation
+                        errorText =
+                            this.$t(`${basePath}.${errorType}`) +
+                            '\n\n' +
+                            this.$t(`${basePath}.${errorType}_support`)
+                    }
+                } else {
+                    // Check if the error type is a valid i18n key
+                    const errorKey = `${basePath}.${errorType}`
+                    const supportKey = `${basePath}.${errorType}_support`
+
+                    // Try to get the translation, fall back to default error if not found
+                    const hasTranslation = this.$te(errorKey)
+
+                    if (hasTranslation) {
+                        errorText =
+                            this.$t(errorKey) + '\n\n' + this.$t(supportKey)
+                    } else {
+                        // Fall back to default error message
+                        errorText =
+                            this.$t(`${basePath}.default`) +
+                            '\n\n' +
+                            this.$t(`${basePath}.default_support`)
+                    }
+
+                    if (errorType === 'technical') {
+                        const errorCode =
+                            error.response?.data?.error?.details?.error_type ||
+                            'UNKNOWN'
+                        errorText = errorText.replace('[ERROR_CODE]', errorCode)
+                    }
+                }
+
+                this.$dialog.error(errorText, {
+                    duration: 5000,
+                    keepOnHover: true,
+                    singleton: true,
+                    type: 'error',
+                })
+            } finally {
+                this.isLoading = false
+                this.showLoadingText = false
+                clearTimeout(this.loadingTimeout)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container-generate-ai {
+    outline: 1px solid var(--v-secondary-base);
+    border-radius: $border-radius-root;
+}
+</style>