@windward/integrations 0.16.0 → 0.18.0

package/components/LLM/GenerateContent/BlockQuestionGenerateButton.vue

@@ -0,0 +1,514 @@
+<template>
+    <div>
+        <v-row class="container-generate-ai mt-2">
+            <v-col>{{
+                $t('windward.integrations.components.llm.ai_assistance')
+            }}</v-col>
+            <v-col>
+                <ContentSelector
+                    v-model="selectedContent"
+                    :disabled="isLoading || disabled"
+                ></ContentSelector>
+            </v-col>
+            <v-col>
+                <BloomTaxonomySelector
+                    v-model="selectedDifficulty"
+                    :levels="taxonomyLevels"
+                    :advanced-levels="isMultipleChoiceType ? false : hasAdvancedBlooms"
+                    :disabled="isLoading || disabled"
+                    :hide-details="!isBucketGameType"
+                ></BloomTaxonomySelector>
+
+                <div v-if="true || isBucketGameType" class="text-caption mt-1">
+                    {{
+                        $t(
+                            'windward.integrations.components.llm.generate_content.generate_questions.replaces_content'
+                        )
+                    }}
+                </div>
+            </v-col>
+            <v-col
+                v-if="showReplaceExistingToggle"
+                cols="auto"
+                class="d-flex align-center"
+            >
+                <v-switch
+                    v-model="replaceExisting"
+                    hide-details
+                    dense
+                    color="secondary"
+                    class="mt-0 pt-0"
+                    :label="replaceExistingLabel"
+                    :disabled="isLoading"
+                ></v-switch>
+            </v-col>
+            <v-col>
+                <v-btn
+                    elevation="0"
+                    color="secondary"
+                    class="mb-1 btn-selector"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                    @click="generateAIQuestion"
+                >
+                    <v-icon v-if="!isLoading" class="pr-1">
+                        mdi-magic-staff
+                    </v-icon>
+                    <span v-if="!isLoading">{{ buttonLabel }}</span>
+
+                    <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 { mapGetters } from 'vuex'
+import ContentSelector from '../ContentSelector.vue'
+import BloomTaxonomySelector from '../BloomTaxonomySelector.vue'
+import FakeTextStream from './FakeTextStream'
+import Course from '~/models/Course'
+import Content from '~/models/Content'
+import ContentBlock from '~/models/ContentBlock'
+
+export default {
+    name: 'BlockQuestionGenerateButton',
+    components: { ContentSelector, BloomTaxonomySelector, FakeTextStream },
+    props: {
+        // The assessment question
+        value: { type: [ContentBlock, Object], required: true },
+        course: { type: [Course, Object], required: true },
+        content: { type: [Content, Object], required: true },
+        disabled: { type: Boolean, required: false, default: false },
+        showText: { type: Boolean, required: false, default: true },
+    },
+    data() {
+        return {
+            loadingTimeout: null,
+            isLoading: false,
+            showLoadingText: false,
+            selectedContent: null,
+            selectedDifficulty: null,
+            replaceExisting:
+                this.value.tag === 'plugin-games-bucket' ||
+                this.value.tag === 'plugin-games-wordjumble-game' ||
+                this.value.tag === 'plugin-games-multiple-choice' ||
+                this.value.tag === 'plugin-games-seven-strikes-game',
+        }
+    },
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+        }),
+        showReplaceExistingToggle() {
+            return (
+                this.isFlashcardType ||
+                this.isMatchingGameType ||
+                this.isSortingGameType ||
+                this.isWordJumbleType ||
+                this.isMultipleChoiceType ||
+                this.isSevenStrikesType
+            )
+        },
+        isFlashcardType() {
+            return this.value.tag === 'plugin-games-flash-card'
+        },
+        isBucketGameType() {
+            return this.value.tag === 'plugin-games-bucket'
+        },
+        isMatchingGameType() {
+            return this.value.tag === 'plugin-games-matching-game'
+        },
+        isSortingGameType() {
+            return this.value.tag === 'plugin-games-sorting'
+        },
+        isScenarioGameType() {
+            return this.value.tag === 'plugin-core-scenario-choice'
+        },
+        isSevenStrikesType() {
+            return (
+                this.value.tag === 'plugin-games-seven-strikes-game'
+            )
+        },
+        isWordJumbleType() {
+            return this.value.tag === 'plugin-games-wordjumble-game'
+        },
+        isMultipleChoiceType() {
+            return this.value.tag === 'plugin-games-multiple-choice'
+        },
+        replaceExistingLabel() {
+            if (this.isBucketGameType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_bucket_game'
+                )
+            }
+            if (this.isMatchingGameType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_matching_game'
+                )
+            }
+            if (this.isSortingGameType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_sorting_game'
+                )
+            }
+            if (this.isWordJumbleType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_word_jumble'
+                )
+            }
+            if (this.isMultipleChoiceType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_multiple_choice'
+                )
+            }
+            if (this.isFlashcardType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_flashcard'
+                )
+            }
+            return this.$t(
+                'windward.integrations.components.llm.generate_content.generate_questions.replace_existing'
+            )
+        },
+        hasAdvancedBlooms() {
+            const supportsAdvancedTaxonomy =
+                this.isSortingGameType ||
+                this.isScenarioGameType ||
+                (!this.isFlashcardType &&
+                    !this.isBucketGameType &&
+                    !this.isMatchingGameType &&
+                    !this.isSevenStrikesType)
+
+            return supportsAdvancedTaxonomy
+        },
+        taxonomyLevels() {
+            // For word jumble games, only show None, Remember, Understand, Apply
+            if (this.isWordJumbleType) {
+                return ['None', 'Remember', 'Understand', 'Apply']
+            }
+
+            // For multiple choice games, only show None, Remember, Understand, Apply
+            if (this.isMultipleChoiceType) {
+                return ['None', 'Remember', 'Understand', 'Apply']
+            }
+
+            // For sorting games, only show None, Remember, Understand, Apply
+            if (this.isSortingGameType) {
+                return ['None', 'Remember', 'Understand', 'Apply']
+            }
+
+            // For seven strikes games, only show None, Remember, Understand, Apply
+            if (this.isSevenStrikesType) {
+                return ['None', 'Remember', 'Understand', 'Apply']
+            }
+
+            // For scenario games, only show None, Apply, Analyze, Evaluate
+            if (this.isScenarioGameType) {
+                return ['None', 'Apply', 'Analyze', 'Evaluate']
+            }
+            return []
+        },
+        buttonLabel() {
+            if (this.value.tag === 'plugin-games-flash-card') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_flashcard'
+                )
+            } else if (this.value.tag === 'plugin-games-bucket') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_bucket_game'
+                )
+            } else if (this.value.tag === 'plugin-games-matching-game') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_matching_game'
+                )
+            } else if (this.value.tag === 'plugin-games-sorting') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_sorting_game'
+                )
+            } else if (this.value.tag === 'plugin-core-scenario-choice') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_scenario_game'
+                )
+            } else if (this.value.tag === 'plugin-games-wordjumble-game') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_word_jumble'
+                )
+            } else if (this.value.tag === 'plugin-games-seven-strikes-game') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_seven_strikes'
+                )
+            } else if (this.value.tag === 'plugin-games-multiple-choice') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_multiple_choice'
+                )
+            } else {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label'
+                )
+            }
+        },
+    },
+    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
+                )
+
+                const responseBuilder = ContentBlock.custom(
+                    course,
+                    content,
+                    `suggest-activities`
+                ).where('block_tag', this.value.tag)
+
+                // Apply blooms level filter if it's not 'None'
+                if (this.selectedDifficulty !== 'None') {
+                    responseBuilder.where(
+                        'blooms_level',
+                        this.selectedDifficulty
+                    )
+                }
+
+                const response = await responseBuilder.get()
+
+                let blockData = null
+
+                if (
+                    response &&
+                    response.tag &&
+                    response.tag === this.value.tag
+                ) {
+                    blockData = response
+                } else if (
+                    Array.isArray(response) &&
+                    response.length > 0 &&
+                    response[0] &&
+                    response[0].tag &&
+                    response[0].tag === this.value.tag
+                ) {
+                    blockData = response[0]
+                }
+                if (blockData !== null) {
+                    if (this.replaceExisting) {
+                        this.$emit('input', _.cloneDeep(blockData))
+                    } else {
+                        this.$emit('append', blockData)
+                    }
+                } else {
+                    throw new Error('Invalid response from 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 (
+                    // Check for content mismatch error specifically for bucket games
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.value.tag === 'plugin-games-bucket'
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_bucket_game`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_bucket_game_support`
+                        )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.value.tag === 'plugin-games-multiple-choice'
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_multiple_choice`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_multiple_choice_support`
+                        )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.value.tag === 'plugin-games-matching-game'
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_matching_game`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_matching_game_support`
+                        )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.value.tag === 'plugin-games-sorting'
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_sorting_game`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_sorting_game_support`
+                        )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.value.tag === 'plugin-core-scenario-choice'
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_scenario_game`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_scenario_game_support`
+                        )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.value.tag === 'plugin-games-wordjumble-game'
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_word_jumble`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_word_jumble_support`
+                        )
+                } 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>
+.btn-selector {
+    width: 100%;
+}
+.container-generate-ai {
+    outline: 1px solid var(--v-secondary-base);
+    border-radius: $border-radius-root;
+}
+</style>

package/components/LLM/GenerateContent/FakeTextStream.vue

@@ -0,0 +1,67 @@
+<template>
+    <v-scroll-y-transition>
+        <div v-if="showText" class="quote">{{ activeQuote }}</div>
+    </v-scroll-y-transition>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+    name: 'FakeTextStream',
+    data() {
+        return {
+            interval: null,
+            timeout: null,
+            intervalDelay: 2500,
+            transitionDelay: 500,
+            activeQuote: '',
+            showText: false,
+        }
+    },
+    computed: {
+        quotes() {
+            const localizedQuotes = this.$t(
+                'windward.integrations.components.llm.generate_content.fake_text_stream.options'
+            )
+            const quotes = []
+
+            for (const [_key, quote] of Object.entries(localizedQuotes)) {
+                quotes.push(quote)
+            }
+            return quotes
+        },
+    },
+    mounted() {
+        this.setQuote()
+        this.interval = setInterval(() => {
+            this.setQuote()
+        }, this.intervalDelay)
+    },
+    beforeDestroy() {
+        clearInterval(this.interval)
+        clearTimeout(this.timeout)
+    },
+    methods: {
+        setQuote() {
+            // Hide the old quote
+            this.showText = false
+
+            // Wait
+            this.timeout = setTimeout(() => {
+                this.showText = true
+                const index = Math.floor(Math.random() * this.quotes.length)
+                this.activeQuote = this.quotes[index]
+            }, this.transitionDelay)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.quote {
+    max-width: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>

package/components/SecretField.vue

@@ -1,11 +1,19 @@
 <template>
-    <v-text-field
-        id="secret-field"
+    <component
+        :is="activeComponent"
+        :id="'secret-field-' + key"
+        :name="'secret-field-' + key"
         :value="value"
-        readonly
+        :readonly="readonly"
+        :autocomplete="autocomplete"
         :type="fieldType"
         :placeholder="placeholder"
         :label="label"
+        :hint="hint"
+        :append-icon="appendIcon"
+        :rules="rules"
+        :rows="rows"
+        @input="$emit('input', $event)"
     >
         <template #append>
             <v-btn icon elevation="0" @click="toggleClear">
@@ -16,13 +24,18 @@
                 <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
             </v-btn>
         </template>
-    </v-text-field>
+    </component>
 </template>
 
 <script>
+import Crypto from '~/helpers/Crypto'
+import { VTextarea, VTextField } from 'vuetify/lib'
+
 export default {
     name: 'SecretField',
+    components: { VTextarea, VTextField },
     props: {
+        tag: { type: String, required: false, default: 'v-text-field' },
         value: { type: String, required: false, default: '' },
         hidden: { type: Boolean, required: false, default: true },
         copy: { type: Boolean, required: false, default: true },
@@ -34,14 +47,57 @@ export default {
             type: String,
             required: false,
         },
+        hint: {
+            type: String,
+            required: false,
+        },
+        autocomplete: {
+            type: String,
+            required: false,
+        },
+        appendIcon: {
+            type: String,
+            required: false,
+        },
+        rules: {
+            type: Array,
+            required: false,
+            default: () => [],
+        },
+        rows: {
+            type: [String, Number],
+            required: false,
+            default: 5,
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
     },
     data() {
         return {
             showClear: false,
         }
     },
-
     computed: {
+        activeComponent() {
+            let tag = this.tag
+
+            // If the field type is password we need to hard-change to textfield since other components don't support password text
+            if (this.fieldType === 'password') {
+                tag = 'v-text-field'
+            }
+
+            if (tag === 'v-textarea') {
+                return VTextarea
+            } else {
+                return VTextField
+            }
+        },
+        key() {
+            return Crypto.id()
+        },
         fieldType() {
             if (this.showClear) {
                 return 'text'
@@ -56,6 +112,7 @@ export default {
     methods: {
         toggleClear() {
             this.showClear = !this.showClear
+            this.$emit('click:append', this.showClear)
         },
         copyText(text) {
             navigator.clipboard.writeText(text || '')