@windward/integrations 0.16.0 → 0.17.0

package/components/LLM/BloomTaxonomySelector.vue

@@ -0,0 +1,120 @@
+<template>
+    <v-select
+        v-model="selectedDifficulty"
+        :items="taxonomyLevels"
+        item-text="text"
+        outlined
+        :hide-details="hideDetails"
+        dense
+        :disabled="disabled"
+        :label="
+            $t('windward.integrations.components.llm.blooms.blooms_taxonomy')
+        "
+        @input="$emit('input', selectedDifficulty)"
+    ></v-select>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+    name: 'LLMBloomTaxonomySelector',
+    props: {
+        // The assessment question
+        value: {
+            type: [String, null],
+            required: false,
+            default: 'None',
+        },
+        levels: {
+            type: Array,
+            required: false,
+            default: () => {
+                return []
+            },
+        },
+        advancedLevels: { type: Boolean, required: false, default: false },
+        hideDetails: { type: Boolean, required: false, default: true },
+        disabled: { type: Boolean, required: false, default: false },
+    },
+    data() {
+        return {
+            selectedDifficulty: 'None',
+        }
+    },
+    computed: {
+        taxonomyLevels() {
+            let levels = []
+
+            // Basic Bloom's taxonomy levels available to all question types
+            const basicBloomTaxonomy = [
+                {
+                    value: 'None',
+                    text: this.$t(
+                        'windward.integrations.components.llm.blooms.none'
+                    ),
+                },
+                {
+                    value: 'Remember',
+                    text: this.$t(
+                        'windward.integrations.components.llm.blooms.remember'
+                    ),
+                },
+                {
+                    value: 'Understand',
+                    text: this.$t(
+                        'windward.integrations.components.llm.blooms.understand'
+                    ),
+                },
+                {
+                    value: 'Apply',
+                    text: this.$t(
+                        'windward.integrations.components.llm.blooms.apply'
+                    ),
+                },
+            ]
+
+            const advancedBlooms = [
+                {
+                    value: 'Analyze',
+                    text: this.$t(
+                        'windward.integrations.components.llm.blooms.analyze'
+                    ),
+                },
+                {
+                    value: 'Evaluate',
+                    text: this.$t(
+                        'windward.integrations.components.llm.blooms.evaluate'
+                    ),
+                },
+            ]
+
+            // Manually defined levels
+            if (this.levels.length > 0) {
+                // All blooms for filtering
+                levels = levels.concat(basicBloomTaxonomy, advancedBlooms)
+
+                levels = levels.filter((v) => {
+                    return this.levels.includes(v.value)
+                })
+            } else {
+                // Show all levels and omit advanced if not enabled
+                levels = levels.concat(basicBloomTaxonomy)
+
+                if (this.advancedLevels) {
+                    levels = levels.concat(advancedBlooms)
+                }
+            }
+            return levels
+        },
+    },
+    mounted() {
+        if (_.isEmpty(this.value)) {
+            // Emit the default of 'None' as the initial value if none is set
+            this.$emit('input', this.selectedDifficulty)
+        } else {
+            this.selectedDifficulty = _.cloneDeep(this.value)
+        }
+    },
+}
+</script>

package/components/LLM/ContentSelector.vue

@@ -0,0 +1,66 @@
+<template>
+    <v-select
+        v-model="selectedContent"
+        :items="flattenedContent"
+        outlined
+        hide-details
+        dense
+        :disabled="disabled"
+        :label="
+            $t(
+                'windward.integrations.components.llm.content_selector.selected_pages'
+            )
+        "
+        item-text="content.name"
+        return-object
+        @input="$emit('input', selectedContent)"
+    ></v-select>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'LLMContentSelector',
+    props: {
+        value: {
+            type: [Object, null],
+            required: false,
+            default: null,
+        },
+        disabled: { type: Boolean, required: false, default: false },
+    },
+    data() {
+        return {
+            selectedContent: null,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            content: 'content/get',
+            contentTree: 'content/getTree',
+        }),
+        flattenedContent() {
+            const flatTree = this.$ContentService.getFlatTree()
+
+            const homepage = this.$ContentService.getHomepage()
+            if (!_.isEmpty(homepage)) {
+                flatTree.unshift(homepage)
+            }
+
+            return flatTree
+        },
+    },
+    mounted() {
+        if (_.isEmpty(this.value)) {
+            this.selectedContent = _.cloneDeep(this.content)
+
+            // Emit the current page as selected if none was set
+            this.$emit('input', this.selectedContent)
+        } else {
+            this.selectedContent = _.cloneDeep(this.value)
+        }
+    },
+}
+</script>

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>