@windward/integrations 0.16.0 → 0.17.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/i18n/en-US/components/ai_agent/chat.ts

@@ -0,0 +1,20 @@
+export default {
+    new_chat: 'New Chat',
+    recent_chats: 'Recent chats',
+    untitled_chat: 'Untitled chat',
+    no_history: 'No recent chats',
+    system_tip:
+        "Hi! I'm here to help with your course. Try asking about learning objectives, content structure, or best practices.",
+    placeholder: 'Ask about your course content...',
+    hint: 'Press Enter to send, Shift+Enter for new line',
+    error_generic: 'Something went wrong. Please try again.',
+    error_with_status:
+        'Something went wrong. Please try again. (Error {status})',
+    action_try_again: 'Try again',
+    action_dismiss: 'Dismiss',
+    sender_you: 'You',
+    sender_agent: 'Assistant',
+    limit_reached:
+        'You have reached the maximum number of messages allowed in this chat. Please start a new chat to continue.',
+    aria_open_history: 'Open chat history',
+}

package/i18n/en-US/components/ai_agent/index.ts

@@ -0,0 +1,5 @@
+import chat from './chat'
+
+export default {
+    chat,
+}

package/i18n/en-US/components/index.ts

@@ -4,12 +4,16 @@ import navigation from './navigation'
 import integration from './integration'
 import externalIntegration from './external_integration'
 import fileImport from './file_import'
+import aiAgent from './ai_agent'
+import llm from './llm'
 
 export default {
     content,
     settings,
     navigation,
     integration,
+    llm,
     external_integration: externalIntegration,
     file_import: fileImport,
+    ai_agent: aiAgent,
 }

package/i18n/en-US/components/llm/blooms.ts

@@ -0,0 +1,15 @@
+export default {
+    blooms_taxonomy: "Bloom's Taxonomy Level",
+    none: 'None selected',
+    remember: 'Remember',
+    understand: 'Understand',
+    apply: 'Apply',
+    analyze: 'Analyze',
+    evaluate: 'Evaluate',
+    errors: {
+        insufficient_content_blooms:
+            'Insufficient content to generate quality questions at the {bloomsLevel} level.',
+        insufficient_content_blooms_support:
+            'Please add more detailed text, examples, or explanations to this section. We recommend at least {minimumRequired} words of relevant content to generate appropriate questions at this level.',
+    },
+}

package/i18n/en-US/components/llm/content_selector.ts

@@ -0,0 +1,3 @@
+export default {
+    selected_pages: 'Selected Page',
+}