@windward/core 0.26.0 → 0.28.0

package/components/Content/Blocks/OpenResponse.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="blockDirectionClasses" :dir="blockTextDirection">
         <v-container
             v-if="
                 block.metadata.config.title ||
@@ -64,7 +64,11 @@
                         class="alert-text"
                     ></TextViewer>
                 </v-alert>
-                <div v-if="block.metadata.config.sample_response">
+                <div
+                    v-if="
+                        block.metadata.config.sample_response && !aiModeEnabled
+                    "
+                >
                     <p>
                         {{
                             $t(
@@ -80,11 +84,145 @@
                         ></TextViewer>
                     </v-alert>
                 </div>
+                <div v-if="aiModeEnabled" class="pt-6">
+                    <p>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.open_response.ai_feedback'
+                            )
+                        }}
+                    </p>
+                    <v-alert v-if="aiFeedbackError" type="error">
+                        {{ aiFeedbackError }}
+                        <div class="pt-2">
+                            <v-btn
+                                small
+                                color="primary"
+                                elevation="0"
+                                :disabled="isGeneratingFeedback"
+                                @click="onGenerateFeedback"
+                            >
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.open_response.ai_feedback_retry'
+                                    )
+                                }}
+                            </v-btn>
+                        </div>
+                    </v-alert>
+                    <v-alert
+                        v-else-if="aiFeedbackResult && aiFeedbackResult.feedback_html"
+                        color="light-green lighten-5"
+                    >
+                        <div
+                            v-if="
+                                aiFeedbackResult &&
+                                aiFeedbackResult.understanding_level
+                            "
+                            class="alert-text mb-2"
+                        >
+                            <strong>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.open_response.understanding_level'
+                                    )
+                                }}:
+                            </strong>
+                            {{
+                                getUnderstandingLevelLabel(
+                                    aiFeedbackResult.understanding_level
+                                )
+                            }}
+                        </div>
+                        <TextViewer
+                            v-model="aiFeedbackResult.feedback_html"
+                            :height="200"
+                            class="alert-text"
+                        ></TextViewer>
+                    </v-alert>
+                    <v-alert
+                        v-else-if="isGeneratingFeedback"
+                        color="grey lighten-4"
+                    >
+                        <div class="d-flex align-center">
+                            <v-progress-circular
+                                indeterminate
+                                :size="18"
+                                :width="2"
+                                color="primary"
+                                class="mr-2"
+                            ></v-progress-circular>
+                            <span>
+                                {{
+                                    $t(
+                                        'windward.core.components.content.blocks.open_response.ai_feedback_generating'
+                                    )
+                                }}
+                            </span>
+                            <span v-if="aiFeedbackJob && aiFeedbackJob.progress">
+                                &nbsp;({{ aiFeedbackJob.progress }}%)
+                            </span>
+                        </div>
+                    </v-alert>
+                    <v-alert v-else color="grey lighten-4">
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.open_response.ai_feedback_not_available'
+                            )
+                        }}
+                    </v-alert>
+
+                    <div
+                        v-if="
+                            aiFeedbackResult &&
+                            aiFeedbackResult.citations &&
+                            aiFeedbackResult.citations.length
+                        "
+                        class="pt-4"
+                    >
+                        <p>
+                            {{
+                                $t(
+                                    'windward.core.components.content.blocks.open_response.ai_feedback_sources'
+                                )
+                            }}
+                        </p>
+                        <v-list dense class="pt-0 pb-0">
+                            <v-list-item
+                                v-for="citation in aiFeedbackResult.citations"
+                                :key="citation.id"
+                                class="pl-0 pr-0"
+                            >
+                                <v-list-item-content class="pl-0 pr-0">
+                                    <nuxt-link
+                                        v-if="getCitationLink(citation.id)"
+                                        :to="getCitationLink(citation.id)"
+                                    >
+                                        {{
+                                            citation.title ||
+                                            $t(
+                                                'windward.core.components.content.blocks.open_response.untitled_page'
+                                            )
+                                        }}
+                                    </nuxt-link>
+                                    <span v-else>
+                                        {{
+                                            citation.title ||
+                                            $t(
+                                                'windward.core.components.content.blocks.open_response.untitled_page'
+                                            )
+                                        }}
+                                    </span>
+                                </v-list-item-content>
+                            </v-list-item>
+                        </v-list>
+                    </div>
+                </div>
                 <p class="pa-3 text-center">
                     <v-btn
                         elevation="0"
                         color="primary"
-                        @click="submitted = false"
+                        @click="onClickEdit"
                         >{{ $t('shared.forms.edit') }}</v-btn
                     >
                 </p>
@@ -115,6 +253,8 @@ import _ from 'lodash'
 import { mapGetters } from 'vuex'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import UserContentBlockState from '~/models/UserContentBlockState'
+import Enrollment from '~/models/Enrollment'
+import ContentBlock from '~/models/ContentBlock'
 import Crypto from '~/helpers/Crypto'
 import TextViewer from '~/components/Text/TextViewer'
 import TextEditor from '~/components/Text/TextEditor'
@@ -128,17 +268,32 @@ export default {
     extends: BaseContentBlock,
     data() {
         return {
+            isComponentActive: true,
             stateLoaded: false,
             response: '',
             submitted: false,
             updateKey: Crypto.id(),
+            aiFeedbackJobId: null,
+            aiFeedbackJob: null,
+            aiFeedbackResult: null,
+            aiFeedbackError: null,
+            isGeneratingFeedback: false,
+            feedbackPollingCancelled: false,
         }
     },
     computed: {
         ...mapGetters({
             enrollment: 'enrollment/get',
+            organization: 'organization/get',
         }),
+        aiModeEnabled() {
+            return !!_.get(this.block, 'metadata.config.ai_mode_for_student', false)
+        },
         canSubmit() {
+            if (this.aiModeEnabled) {
+                return true
+            }
+
             // Make sure the response is not empty and not equal to the starting text
             return (
                 this.response &&
@@ -175,10 +330,24 @@ export default {
         if (_.isEmpty(this.block.metadata.config.starting_text)) {
             this.block.metadata.config.starting_text = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.ai_mode_for_student)) {
+            this.$set(this.block.metadata.config, 'ai_mode_for_student', false)
+        }
+    },
+    beforeDestroy() {
+        this.isComponentActive = false
+        this.feedbackPollingCancelled = true
     },
     mounted() {},
     methods: {
         async onAfterSetContentBlockState() {
+            // This component's state is persisted via UserContentBlockState, so ensure
+            // transient lifecycle flags are reset when restoring state.
+            this.isComponentActive = true
+            this.feedbackPollingCancelled = true
+            this.isGeneratingFeedback = false
+            this.aiFeedbackError = null
+
             // Check to see if we have a state already for this block with the same block_id
             // States are loaded via the ContentBlock.id but in this particular case we want to
             // maintain the state ACROSS different ContentBlock.ids but with the same linked Block.id
@@ -198,6 +367,22 @@ export default {
                         'metadata.submitted',
                         false
                     )
+
+                    this.aiFeedbackJobId = _.get(
+                        userState,
+                        'metadata.aiFeedbackJobId',
+                        null
+                    )
+                    this.aiFeedbackJob = _.get(
+                        userState,
+                        'metadata.aiFeedbackJob',
+                        null
+                    )
+                    this.aiFeedbackResult = _.get(
+                        userState,
+                        'metadata.aiFeedbackResult',
+                        null
+                    )
                 }
 
                 // If after the state is applied the response is still empty then apply the default response
@@ -208,14 +393,243 @@ export default {
                 // If we don't have a block_id then we are in the initial setup state
                 this.response = this.block.metadata.config.starting_text
             }
+
+            if (!this.aiModeEnabled) {
+                this.aiFeedbackJobId = null
+                this.aiFeedbackJob = null
+                this.aiFeedbackResult = null
+            }
+
             this.updateKey = Crypto.id()
             this.stateLoaded = true
+
+            if (
+                this.aiModeEnabled &&
+                this.submitted &&
+                this.aiFeedbackJobId &&
+                !this.isGeneratingFeedback
+            ) {
+                await this.resumeFeedbackJob()
+            }
         },
-        onSubmit() {
+        async onSubmit() {
             this.submitted = true
+            this.aiFeedbackError = null
+
+            if (this.aiModeEnabled) {
+                this.aiFeedbackJobId = null
+                this.aiFeedbackJob = null
+                this.aiFeedbackResult = null
+            }
 
             // Force the state to save on submit and not wait
-            this.$Tracking.flushState()
+            await this.$Tracking.flushState()
+
+            if (this.aiModeEnabled) {
+                await this.onGenerateFeedback()
+            }
+        },
+        onClickEdit() {
+            this.feedbackPollingCancelled = true
+            this.isGeneratingFeedback = false
+            this.submitted = false
+        },
+        async fetchAiFeedbackStatus(jobId) {
+            const enrollment = new Enrollment({ id: this.enrollment.id })
+            const contentBlock = new ContentBlock({ id: this.block.id })
+
+            const statusResponse = await Enrollment.params({ job_id: jobId })
+                .custom(
+                    enrollment,
+                    contentBlock,
+                    'open-response/ai-feedback/status'
+                )
+                .first()
+
+            this.aiFeedbackJob = _.get(statusResponse, 'job', null)
+            this.aiFeedbackResult = _.get(statusResponse, 'result', null)
+
+            return _.get(this.aiFeedbackJob, 'status', null)
+        },
+        async onGenerateFeedback() {
+            if (this.isGeneratingFeedback) {
+                return
+            }
+
+            if (!this.aiModeEnabled) {
+                return
+            }
+
+            if (!this.organization?.id) {
+                this.aiFeedbackError = this.$t(
+                    'windward.core.components.content.blocks.open_response.ai_feedback_error'
+                )
+                return
+            }
+
+            this.aiFeedbackError = null
+            this.feedbackPollingCancelled = false
+            this.isGeneratingFeedback = true
+
+            try {
+                const enrollment = new Enrollment({ id: this.enrollment.id })
+                const contentBlock = new ContentBlock({ id: this.block.id })
+
+                const startResponse = await Enrollment.config({
+                    method: 'POST',
+                    data: { response: this.response || '' },
+                })
+                    .custom(enrollment, contentBlock, 'open-response/ai-feedback')
+                    .first()
+
+                const job = _.get(startResponse, 'job', null)
+                const jobId = _.get(job, 'id', null)
+                if (!jobId) {
+                    throw new Error('AI_FEEDBACK_MISSING_JOB_ID')
+                }
+
+                this.aiFeedbackJobId = jobId
+                this.aiFeedbackJob = job
+                this.aiFeedbackResult = _.get(startResponse, 'result', null)
+
+                // Persist the job id + any immediate result
+                await this.$Tracking.flushState()
+
+                if (this.aiFeedbackResult) {
+                    return
+                }
+
+                await this.pollFeedbackJob(jobId)
+            } catch (error) {
+                if (!this.isComponentActive) {
+                    return
+                }
+                if (error?.cancelled) {
+                    return
+                }
+
+                this.aiFeedbackError = this.$t(
+                    'windward.core.components.content.blocks.open_response.ai_feedback_error'
+                )
+            } finally {
+                if (this.isComponentActive) {
+                    this.isGeneratingFeedback = false
+                }
+            }
+        },
+        async resumeFeedbackJob() {
+            if (this.isGeneratingFeedback) {
+                return
+            }
+
+            const jobId = this.aiFeedbackJobId
+            if (!jobId || !this.organization?.id) {
+                return
+            }
+
+            this.feedbackPollingCancelled = false
+            this.aiFeedbackError = null
+            this.isGeneratingFeedback = true
+
+            try {
+                const status = await this.fetchAiFeedbackStatus(jobId)
+                if (status === 'queued' || status === 'running') {
+                    await this.pollFeedbackJob(jobId)
+                }
+            } catch (error) {
+                if (!this.isComponentActive) {
+                    return
+                }
+                if (error?.cancelled) {
+                    return
+                }
+
+                this.aiFeedbackError = this.$t(
+                    'windward.core.components.content.blocks.open_response.ai_feedback_error'
+                )
+            } finally {
+                if (this.isComponentActive) {
+                    this.isGeneratingFeedback = false
+                }
+            }
+        },
+        async pollFeedbackJob(jobId) {
+            // 30 minutes at 2s intervals
+            const maxAttempts = 900
+            const delayMs = 2000
+
+            let attempt = 0
+
+            while (attempt < maxAttempts) {
+                if (
+                    this.feedbackPollingCancelled ||
+                    !this.isComponentActive
+                ) {
+                    const cancelled = new Error('AI_FEEDBACK_POLLING_CANCELLED')
+                    cancelled.cancelled = true
+                    throw cancelled
+                }
+
+                // eslint-disable-next-line no-await-in-loop
+                const status = await this.fetchAiFeedbackStatus(jobId)
+                if (status === 'succeeded' && this.aiFeedbackResult) {
+                    // Persist the final result so it loads instantly later
+                    this.isGeneratingFeedback = false
+                    // eslint-disable-next-line no-await-in-loop
+                    await this.$Tracking.flushState()
+                    return
+                }
+
+                if (status === 'failed') {
+                    this.aiFeedbackError = this.$t(
+                        'windward.core.components.content.blocks.open_response.ai_feedback_error'
+                    )
+                    this.isGeneratingFeedback = false
+                    // eslint-disable-next-line no-await-in-loop
+                    await this.$Tracking.flushState()
+                    return
+                }
+
+                attempt += 1
+                // eslint-disable-next-line no-await-in-loop
+                await new Promise((resolve) => setTimeout(resolve, delayMs))
+            }
+
+            this.aiFeedbackError = this.$t(
+                'windward.core.components.content.blocks.open_response.ai_feedback_timeout'
+            )
+            this.isGeneratingFeedback = false
+            await this.$Tracking.flushState()
+        },
+        getCitationLink(pageId) {
+            const courseId =
+                _.get(this.enrollment, 'course.id', null) ||
+                _.get(this.enrollment, 'course_id', null)
+            const sectionId =
+                _.get(this.enrollment, 'course_section_id', null) ||
+                _.get(this.enrollment, 'courseSection.id', null)
+
+            if (!courseId || !sectionId || !pageId) {
+                return null
+            }
+
+            return `/course/${courseId}/section/${sectionId}/content/${pageId}`
+        },
+        getUnderstandingLevelLabel(level) {
+            const normalized = String(level || '')
+                .trim()
+                .toLowerCase()
+            if (!normalized) {
+                return ''
+            }
+
+            const key = `windward.core.components.content.blocks.open_response.understanding_levels.${normalized}`
+            const translated = this.$t(key)
+            if (translated === key) {
+                return _.startCase(normalized)
+            }
+
+            return translated
         },
     },
 }

package/components/Content/Blocks/ScenarioChoice.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="blockDirectionClasses" :dir="blockTextDirection">
         <v-container class="pa-0">
             <h2
                 v-if="
@@ -35,7 +35,16 @@
                 </v-btn>
             </div>
         </v-container>
-        <v-container class="pa-0">
+        <v-alert
+            v-if="block.metadata.config.items.length === 0"
+            type="warning"
+            >{{
+                $t(
+                    'windward.core.components.content.blocks.scenario_choice.no_scenario'
+                )
+            }}</v-alert
+        >
+        <v-container v-else class="pa-0">
             <v-row
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"

package/components/Content/Blocks/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="blockDirectionClasses" :dir="blockTextDirection">
         <v-container
             v-if="
                 block.metadata.config.title ||
@@ -25,8 +25,13 @@
                 {{ block.metadata.config.instructions }}
             </p>
         </v-container>
-        <v-container class="pa-0">
-            <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>
+        <v-alert
+            v-if="block.metadata.config.items.length === 0"
+            type="warning"
+            >{{ $t('windward.core.components.settings.tab.no_tabs') }}</v-alert
+        >
+        <v-container v-else class="pa-0">
+            <v-tabs v-model="block.metadata.config.currentTab" dark show-arrows>
                 <v-tabs-slider></v-tabs-slider>
                 <v-tab
                     v-for="(tab, tabIndex) in block.metadata.config.items"
@@ -96,31 +101,10 @@ export default {
         this.block.body = this.$t(
             'windward.core.shared.content_blocks.title.tab'
         )
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            const defaultObject = {
-                tabHeader: '',
-                expand: false,
-                content: '',
-                imageAsset: {
-                    display: {
-                        width: 100,
-                        margin: '',
-                        padding: '',
-                    },
-                    hideBackground: true,
-                },
-            }
-            this.block.metadata.config.items = []
-            this.block.metadata.config.items.push(defaultObject)
-        } else {
-            this.block.metadata.config.items.forEach((element) => {
-                if (element.content == null) {
-                    element.content = ''
-                }
-                if (element.tabHeader == null) {
-                    element.tabHeader = ''
-                }
-            })
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = this.$t(
+                'windward.core.shared.content_blocks.title.tab'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -128,9 +112,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
     },
     methods: {
-        async onBeforeSave() {
+        onBeforeSave() {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false
             })