@windward/integrations 0.19.1 → 0.21.0

package/components/Content/Blocks/ActionPanel/TransformBlock.vue

@@ -0,0 +1,776 @@
+<template>
+    <v-list-item-group v-if="canTransformBlock" :disabled="isTransforming">
+        <v-list-group v-model="showMenu" @click="onClickShowTransforms">
+            <template #activator>
+                <v-list-item-icon>
+                    <v-progress-circular
+                        v-if="isTransforming"
+                        indeterminate
+                    ></v-progress-circular>
+                    <v-icon v-if="!isTransforming">mdi-shape</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>
+                    {{
+                        $t(
+                            'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type'
+                        )
+                    }}
+                </v-list-item-title>
+            </template>
+
+            <v-list-item
+                v-for="action in availableActions"
+                :key="action.tag"
+                :disabled="isTransforming"
+                @click="performBlockTransform($event, action.tag)"
+            >
+                <v-list-item-title>
+                    <v-icon>mdi-arrow-right</v-icon> {{ action.label }}
+                </v-list-item-title>
+            </v-list-item>
+        </v-list-group>
+    </v-list-item-group>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+
+export default {
+    props: {
+        // The block associated with this action panel
+        value: { type: Object, required: false, default: null },
+
+        // The blocks position relative to other blocks (Potentially not the same as value.order)
+        index: { type: Number, required: false, default: 0 },
+        // The total number of blocks on the content page
+        length: { type: Number, required: false, default: 0 },
+
+        // The content block html element
+        bindElement: { type: null, required: false, default: null },
+
+        // Button enable / disable props
+        draggable: { type: Boolean, required: false, default: true },
+        savable: { type: Boolean, required: false, default: true },
+        editable: { type: Boolean, required: false, default: true },
+        deletable: { type: Boolean, required: false, default: true },
+        editMode: { type: Boolean, required: false, default: null },
+        saving: { type: Boolean, required: false, default: null },
+        btnGroupId: { type: String, required: false, default: '' },
+    },
+
+    data() {
+        return {
+            showMenu: false,
+            isTransforming: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+        vModel: {
+            get() {
+                return this.value
+            },
+            set(value) {
+                this.$emit('input', value)
+            },
+        },
+        sourceKind() {
+            return this.getBlockKindFromTag(_.get(this.value, 'tag', ''))
+        },
+        textParagraphCount() {
+            if (this.sourceKind !== 'text') {
+                return 0
+            }
+            return this.countTextParagraphs(_.get(this.value, 'body', ''))
+        },
+        structuredItemCount() {
+            if (!['accordion', 'tab', 'clickable_icons'].includes(this.sourceKind)) {
+                return 0
+            }
+            return this.countStructuredItems(this.value)
+        },
+        availableActions() {
+            if (!this.value) {
+                return []
+            }
+
+            if (this.sourceKind === 'text') {
+                if (this.textParagraphCount < 2) {
+                    return []
+                }
+                return [
+                    {
+                        tag: 'plugin-core-accordion',
+                        label: this.$t(
+                            'windward.core.shared.content_blocks.title.accordion'
+                        ),
+                    },
+                    {
+                        tag: 'plugin-core-tab',
+                        label: this.$t(
+                            'windward.core.shared.content_blocks.title.tab'
+                        ),
+                    },
+                    {
+                        tag: 'plugin-core-clickable-icons',
+                        label: this.$t(
+                            'windward.core.shared.content_blocks.title.clickable_icons'
+                        ),
+                    },
+                ]
+            }
+
+            if (this.sourceKind === 'accordion') {
+                if (this.structuredItemCount < 2) {
+                    return []
+                }
+                const actions = [
+                    {
+                        tag: 'content-blocks-text',
+                        label: this.$t(
+                            'components.content.blocks.text.block_title'
+                        ),
+                    },
+                ]
+                if (this.structuredItemCount >= 2) {
+                    actions.push(
+                        {
+                            tag: 'plugin-core-tab',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.tab'
+                            ),
+                        },
+                        {
+                            tag: 'plugin-core-clickable-icons',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.clickable_icons'
+                            ),
+                        }
+                    )
+                }
+                return actions
+            }
+
+            if (this.sourceKind === 'tab') {
+                if (this.structuredItemCount < 2) {
+                    return []
+                }
+                const actions = [
+                    {
+                        tag: 'content-blocks-text',
+                        label: this.$t(
+                            'components.content.blocks.text.block_title'
+                        ),
+                    },
+                ]
+                if (this.structuredItemCount >= 2) {
+                    actions.push(
+                        {
+                            tag: 'plugin-core-accordion',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.accordion'
+                            ),
+                        },
+                        {
+                            tag: 'plugin-core-clickable-icons',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.clickable_icons'
+                            ),
+                        }
+                    )
+                }
+                return actions
+            }
+
+            if (this.sourceKind === 'clickable_icons') {
+                if (this.structuredItemCount < 2) {
+                    return []
+                }
+                const actions = [
+                    {
+                        tag: 'content-blocks-text',
+                        label: this.$t(
+                            'components.content.blocks.text.block_title'
+                        ),
+                    },
+                ]
+                if (this.structuredItemCount >= 2) {
+                    actions.push(
+                        {
+                            tag: 'plugin-core-accordion',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.accordion'
+                            ),
+                        },
+                        {
+                            tag: 'plugin-core-tab',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.tab'
+                            ),
+                        }
+                    )
+                }
+                return actions
+            }
+
+            return []
+        },
+        canTransformBlock() {
+            return this.availableActions.length > 0
+        },
+    },
+    methods: {
+        onClickShowTransforms(e) {
+            e.stopPropagation()
+        },
+        getBlockKindFromTag(tag) {
+            if (!tag || typeof tag !== 'string') {
+                return 'unknown'
+            }
+
+            if (tag === 'content-blocks-text') {
+                return 'text'
+            }
+
+            const normalized = tag.replace(/^plugin-/, '')
+            if (normalized === 'core-accordion') {
+                return 'accordion'
+            }
+            if (normalized === 'core-tab') {
+                return 'tab'
+            }
+            if (normalized === 'core-clickable-icons') {
+                return 'clickable_icons'
+            }
+
+            return 'unknown'
+        },
+        countTextParagraphs(html) {
+            if (!html || typeof html !== 'string') {
+                return 0
+            }
+
+            try {
+                const doc = new DOMParser().parseFromString(html, 'text/html')
+                const paragraphs = Array.from(doc.querySelectorAll('p, li'))
+                return paragraphs.filter((el) => (el.textContent || '').trim())
+                    .length
+            } catch (_e) {
+                // Fallback: simple split on line breaks after stripping tags
+                const normalized = html
+                    .replace(/<[^>]+>/g, '\n')
+                    .split(/\n+/)
+                    .map((p) => p.trim())
+                    .filter((p) => p.length > 0)
+                return normalized.length
+            }
+        },
+        countStructuredItems(block) {
+            const items = _.get(block, 'metadata.config.items', [])
+            return Array.isArray(items) ? items.length : 0
+        },
+        escapeHtml(text) {
+            return String(text == null ? '' : text)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;')
+        },
+        normalizeAssetReference(asset) {
+            if (!asset) {
+                return null
+            }
+
+            if (typeof asset === 'string') {
+                return { file_asset_id: asset }
+            }
+
+            if (typeof asset === 'object') {
+                return asset
+            }
+
+            return null
+        },
+        normalizeImageConfig(rawConfig) {
+            if (!rawConfig || typeof rawConfig !== 'object') {
+                return null
+            }
+
+            const config = _.cloneDeep(rawConfig)
+            if (typeof config.asset === 'string') {
+                config.asset = this.normalizeAssetReference(config.asset)
+            } else if (config.asset && typeof config.asset === 'object') {
+                config.asset = this.normalizeAssetReference(config.asset)
+            }
+
+            return config
+        },
+        hasAssetInImageConfig(imageConfig) {
+            return !!_.get(imageConfig, 'asset.file_asset_id', null)
+        },
+        buildNewBlockBase(sourceBlock) {
+            const baseOrderRaw = _.get(sourceBlock, 'order', 0)
+            const baseOrder = Number(baseOrderRaw)
+            const normalizedOrder = Number.isFinite(baseOrder)
+                ? Math.trunc(baseOrder)
+                : 0
+            const newBlock = {
+                id: _.uniqueId('create_content_block_'),
+                content_id: null,
+                tag: '',
+                body: '',
+                status: 'draft',
+                order: normalizedOrder,
+                type: {
+                    save_state: false,
+                    trackable: false,
+                    completable: false,
+                },
+                assets: _.cloneDeep(_.get(sourceBlock, 'assets', [])),
+                metadata: {
+                    config: {},
+                },
+            }
+
+            const display = _.cloneDeep(
+                _.get(sourceBlock, 'metadata.display', null)
+            )
+            if (display) {
+                newBlock.metadata.display = display
+            }
+
+            return newBlock
+        },
+        extractStructuredBlockData(sourceBlock) {
+            const kind = this.getBlockKindFromTag(_.get(sourceBlock, 'tag', ''))
+            const config = _.get(sourceBlock, 'metadata.config', {}) || {}
+
+            const title = typeof config.title === 'string' ? config.title : ''
+            const instructions =
+                typeof config.instructions === 'string' ? config.instructions : ''
+            const displayTitle = _.isBoolean(config.display_title)
+                ? config.display_title
+                : true
+
+            const rawItems = Array.isArray(config.items) ? config.items : []
+            const items = rawItems.map((rawItem) => {
+                if (!rawItem || typeof rawItem !== 'object') {
+                    return { title: '', bodyHtml: '', imageConfig: null }
+                }
+
+                if (kind === 'accordion') {
+                    return {
+                        title:
+                            typeof rawItem.header === 'string'
+                                ? rawItem.header
+                                : '',
+                        bodyHtml:
+                            typeof rawItem.content === 'string'
+                                ? rawItem.content
+                                : '',
+                        imageConfig: this.normalizeImageConfig(rawItem.fileConfig),
+                    }
+                }
+
+                if (kind === 'tab') {
+                    return {
+                        title:
+                            typeof rawItem.tabHeader === 'string'
+                                ? rawItem.tabHeader
+                                : '',
+                        bodyHtml:
+                            typeof rawItem.content === 'string'
+                                ? rawItem.content
+                                : '',
+                        imageConfig: this.normalizeImageConfig(rawItem.imageAsset),
+                    }
+                }
+
+                if (kind === 'clickable_icons') {
+                    const fileConfig = this.normalizeImageConfig(rawItem.fileConfig)
+                    const iconImage = rawItem.iconImage === true
+
+                    return {
+                        title:
+                            typeof rawItem.title === 'string' ? rawItem.title : '',
+                        bodyHtml:
+                            typeof rawItem.body === 'string' ? rawItem.body : '',
+                        imageConfig:
+                            iconImage || this.hasAssetInImageConfig(fileConfig)
+                                ? fileConfig
+                                : null,
+                    }
+                }
+
+                return { title: '', bodyHtml: '', imageConfig: null }
+            })
+
+            return {
+                kind,
+                title,
+                instructions,
+                displayTitle,
+                items,
+            }
+        },
+        buildTextBlockFromStructured(sourceBlock) {
+            const structured = this.extractStructuredBlockData(sourceBlock)
+            const parts = []
+
+            if (structured.displayTitle && structured.title) {
+                parts.push(`<h2>${this.escapeHtml(structured.title)}</h2>`)
+            }
+            if (structured.instructions) {
+                parts.push(`<p>${this.escapeHtml(structured.instructions)}</p>`)
+            }
+
+            structured.items.forEach((item) => {
+                const itemTitle = typeof item.title === 'string' ? item.title : ''
+                const bodyHtml =
+                    typeof item.bodyHtml === 'string' ? item.bodyHtml : ''
+
+                if (itemTitle) {
+                    parts.push(`<h3>${this.escapeHtml(itemTitle)}</h3>`)
+                }
+                if (bodyHtml) {
+                    parts.push(bodyHtml)
+                }
+            })
+
+            const newBlock = this.buildNewBlockBase(sourceBlock)
+            newBlock.tag = 'content-blocks-text'
+            newBlock.body = parts.join('')
+            newBlock.metadata.config = { expand: false }
+            return newBlock
+        },
+        buildStructuredBlockFromStructured(sourceBlock, targetType) {
+            const structured = this.extractStructuredBlockData(sourceBlock)
+            const newBlock = this.buildNewBlockBase(sourceBlock)
+
+            if (targetType === 'plugin-core-accordion') {
+                newBlock.tag = 'plugin-core-accordion'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.accordion'
+                )
+                newBlock.metadata.config = {
+                    title: structured.title,
+                    display_title: structured.displayTitle,
+                    instructions: structured.instructions,
+                    items: structured.items.map((item) => ({
+                        header: item.title || '',
+                        expand: false,
+                        content: item.bodyHtml || '',
+                        fileConfig: item.imageConfig || {
+                            display: {
+                                width: 100,
+                                margin: '',
+                                padding: '',
+                            },
+                            hideBackground: true,
+                        },
+                    })),
+                }
+                return newBlock
+            }
+
+            if (targetType === 'plugin-core-tab') {
+                newBlock.tag = 'plugin-core-tab'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.tab'
+                )
+                newBlock.metadata.config = {
+                    title: structured.title,
+                    display_title: structured.displayTitle,
+                    instructions: structured.instructions,
+                    currentTab: 0,
+                    items: structured.items.map((item) => ({
+                        tabHeader: item.title || '',
+                        expand: false,
+                        content: item.bodyHtml || '',
+                        imageAsset: item.imageConfig || {
+                            display: {
+                                width: 100,
+                                margin: '',
+                                padding: '',
+                            },
+                            hideBackground: true,
+                        },
+                    })),
+                }
+                return newBlock
+            }
+
+            if (targetType === 'plugin-core-clickable-icons') {
+                newBlock.tag = 'plugin-core-clickable-icons'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.clickable_icons'
+                )
+                newBlock.metadata.config = {
+                    title: structured.title,
+                    display_title: structured.displayTitle,
+                    instructions: structured.instructions,
+                    description: this.$t(
+                        'windward.core.components.settings.clickable_icon.information'
+                    ),
+                    display: {
+                        show_title: false,
+                        show_background: false,
+                        round_icon: false,
+                        italic_icon: false,
+                        large_icon: false,
+                        autocolor: true,
+                    },
+                    items: structured.items.map((item) => {
+                        const imageConfig = item.imageConfig
+                        const hasAsset = this.hasAssetInImageConfig(imageConfig)
+
+                        return {
+                            icon: '',
+                            fileConfig: hasAsset ? imageConfig : {},
+                            iconImage: hasAsset,
+                            title: item.title || '',
+                            body: item.bodyHtml || '',
+                            color: {
+                                class: '',
+                            },
+                            active: false,
+                        }
+                    }),
+                }
+                return newBlock
+            }
+
+            throw new Error(`Unsupported targetType: ${targetType}`)
+        },
+        buildTransformedBlock(sourceBlock, data, targetType) {
+            const newBlock = this.buildNewBlockBase(sourceBlock)
+
+            const blockTitle = data.block_title || ''
+            const items = Array.isArray(data.items) ? data.items : []
+
+            if (targetType === 'plugin-core-accordion') {
+                newBlock.tag = 'plugin-core-accordion'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.accordion'
+                )
+                newBlock.metadata.config = {
+                    title: blockTitle,
+                    display_title: true,
+                    instructions: this.$t(
+                        'windward.core.components.settings.accordion.instructions'
+                    ),
+                    items: items.map((item) => ({
+                        header: item.title || '',
+                        expand: false,
+                        content: item.body_html || '',
+                        fileConfig: {
+                            display: {
+                                width: 100,
+                                margin: '',
+                                padding: '',
+                            },
+                            hideBackground: true,
+                        },
+                    })),
+                }
+            } else if (targetType === 'plugin-core-tab') {
+                newBlock.tag = 'plugin-core-tab'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.tab'
+                )
+                newBlock.metadata.config = {
+                    title: blockTitle,
+                    display_title: true,
+                    instructions: this.$t(
+                        'windward.core.components.settings.tab.instructions'
+                    ),
+                    currentTab: 0,
+                    items: items.map((item) => ({
+                        tabHeader: item.title || '',
+                        expand: false,
+                        content: item.body_html || '',
+                        imageAsset: {
+                            display: {
+                                width: 100,
+                                margin: '',
+                                padding: '',
+                            },
+                            hideBackground: true,
+                        },
+                    })),
+                }
+            } else if (targetType === 'plugin-core-clickable-icons') {
+                newBlock.tag = 'plugin-core-clickable-icons'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.clickable_icons'
+                )
+                newBlock.metadata.config = {
+                    title: blockTitle,
+                    display_title: true,
+                    description: this.$t(
+                        'windward.core.components.settings.clickable_icon.information'
+                    ),
+                    display: {
+                        show_title: false,
+                        show_background: false,
+                        round_icon: false,
+                        italic_icon: false,
+                        large_icon: false,
+                        autocolor: true,
+                    },
+                    items: items.map((item) => ({
+                        icon: '',
+                        fileConfig: {},
+                        iconImage: false,
+                        title: item.title || '',
+                        body: item.body_html || '',
+                        color: {
+                            class: '',
+                        },
+                        active: false,
+                    })),
+                }
+            }
+
+            return newBlock
+        },
+        async generateMultiItemBlockFromText(targetType) {
+            const html = _.get(this.value, 'body', '')
+            if (!html || typeof html !== 'string') {
+                throw new Error('invalid_html')
+            }
+
+            if (this.countTextParagraphs(html) < 2) {
+                throw new Error('insufficient_paragraphs')
+            }
+
+            const organizationId = _.get(this.organization, 'id', null)
+            const courseId = _.get(this.course, 'id', null)
+
+            if (!organizationId || !courseId) {
+                throw new Error('missing_context')
+            }
+
+            const request = new Course()
+            request.custom(
+                new Organization({ id: organizationId }),
+                new Course({ id: courseId }),
+                'llm-block-transform'
+            )
+
+            const resourcePath = request._customResource
+            if (!resourcePath) {
+                throw new Error('missing_resource')
+            }
+
+            const payload = {
+                html,
+                target_tag: targetType,
+                language: this.$i18n.locale,
+            }
+
+            const requestConfig = request._reqConfig(
+                {
+                    method: 'POST',
+                    url: `${request.baseURL()}/${resourcePath}`,
+                    data: payload,
+                },
+                { forceMethod: true }
+            )
+
+            const response = await request.request(requestConfig)
+            const data = response?.data || response
+
+            if (!data || !Array.isArray(data.items) || data.items.length < 2) {
+                throw new Error('invalid_response')
+            }
+
+            return this.buildTransformedBlock(this.value, data, targetType)
+        },
+        async performBlockTransform(e, targetType) {
+            e.stopPropagation()
+
+            if (this.isTransforming) {
+                return
+            }
+
+            if (!this.value || !this.value.tag) {
+                return
+            }
+
+            this.isTransforming = true
+
+            try {
+                let newBlock = null
+
+                if (this.sourceKind === 'text') {
+                    if (targetType === 'content-blocks-text') {
+                        return
+                    }
+                    newBlock = await this.generateMultiItemBlockFromText(
+                        targetType
+                    )
+                } else {
+                    if (this.countStructuredItems(this.value) < 2) {
+                        throw new Error('insufficient_items')
+                    }
+
+                    if (targetType === 'content-blocks-text') {
+                        newBlock = this.buildTextBlockFromStructured(this.value)
+                    } else {
+                        newBlock = this.buildStructuredBlockFromStructured(
+                            this.value,
+                            targetType
+                        )
+                    }
+                }
+
+                if (!newBlock) {
+                    throw new Error('invalid_new_block')
+                }
+
+                this.$eb.$emit('create:content-block', newBlock)
+
+                const activeBlock = _.cloneDeep(newBlock)
+                this.$ContentService.setContentBlock(activeBlock)
+                this.$eb.$emit('block:focus', activeBlock)
+            } catch (e) {
+                // Surface errors instead of failing silently
+                // eslint-disable-next-line no-console
+                console.error('Block transform failed', e)
+
+                if (this.$toast) {
+                    if (String(e?.message) === 'insufficient_paragraphs') {
+                        this.$toast.error(
+                            this.$t(
+                                'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_insufficient_paragraphs'
+                            )
+                        )
+                    } else if (String(e?.message) === 'insufficient_items') {
+                        this.$toast.error(
+                            this.$t(
+                                'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_insufficient_items'
+                            )
+                        )
+                    } else {
+                        this.$toast.error(
+                            this.$t(
+                                'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_error'
+                            )
+                        )
+                    }
+                }
+            } finally {
+                this.isTransforming = false
+            }
+        },
+    },
+}
+</script>