@8wave/ai-elements 0.90.0 → 0.91.0

package/dist-vue/_chunks/{PkChatbotMessageFeedback-Cp0zzCP8.js.map → PkChatbotMessageFeedback-DAqlgPrz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotMessageFeedback-Cp0zzCP8.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbotMessageFeedback.vue","../../../../packages/components/src/chat/PkChatbotMessageFeedback.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import type { MessageFeedback } from 'models'\n    import { computed } from 'vue'\n\n    const props = defineProps<{\n        feedback: MessageFeedback\n    }>()\n\n    // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n    // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n    // actual emoji.\n    const emoji = computed(() => {\n        if (props.feedback.vote) {\n            return undefined\n        }\n        const raw = props.feedback.metadata?.reactionEmoji\n        return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n            ? raw\n            : undefined\n    })\n\n    // Accent matches the vote; neutral for a real emoji (it carries its own\n    // colour) or a comment-only feedback.\n    const toneClass = computed(() => {\n        if (emoji.value) {\n            return 'pk-message-feedback--neutral'\n        }\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'pk-message-feedback--positive'\n            case 'downvote':\n                return 'pk-message-feedback--negative'\n            default:\n                return 'pk-message-feedback--neutral'\n        }\n    })\n\n    // Fallback icon when there is no real emoji glyph to show.\n    const icon = computed(() => {\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'ri:thumb-up-fill'\n            case 'downvote':\n                return 'ri:thumb-down-fill'\n            default:\n                return 'ri:chat-quote-line'\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-message-feedback\" :class=\"toneClass\">\n        <span class=\"pk-message-feedback__badge\">\n            <span v-if=\"emoji\" class=\"pk-message-feedback__emoji\">\n                {{ emoji }}\n            </span>\n            <VvIcon v-else :name=\"icon\" />\n        </span>\n        <p v-if=\"feedback.comment\" class=\"pk-message-feedback__comment\">\n            {{ feedback.comment }}\n        </p>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    /*\n     * The user's reaction + comment, shown as an annotation hanging off the\n     * assistant message: echoes the bubble radius (same speech-bubble tail) and\n     * a coloured left rail + badge match the vote. Sits flush under the bubble.\n     */\n    .pk-message-feedback {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-8);\n        padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)\n            var(--spacing-6);\n        border-radius: var(--rounded-lg);\n        background: var(--pk-feedback-surface);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &--positive {\n            --pk-feedback-accent: var(--color-success);\n        }\n\n        &--negative {\n            --pk-feedback-accent: var(--color-danger);\n        }\n\n        &--neutral {\n            --pk-feedback-accent: var(--color-surface-4);\n        }\n\n        --pk-feedback-surface: color-mix(\n            in srgb,\n            var(--pk-feedback-accent) 8%,\n            var(--color-surface)\n        );\n\n        &__badge {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            justify-content: center;\n            width: var(--spacing-22, 1.375rem);\n            height: var(--spacing-22, 1.375rem);\n            border-radius: var(--rounded-full, 9999px);\n            background: var(--color-surface);\n            color: var(--pk-feedback-accent);\n            box-shadow: var(--shadow-sm);\n        }\n\n        &__emoji {\n            /* Smaller than the badge so the glyph doesn't touch the ring. */\n            font-size: var(--text-12);\n            line-height: 1;\n        }\n\n        &__comment {\n            margin: 0;\n            /* Preserve the user's line breaks; avoid orphans on wrap. */\n            white-space: pre-wrap;\n            text-wrap: pretty;\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import type { MessageFeedback } from 'models'\n    import { computed } from 'vue'\n\n    const props = defineProps<{\n        feedback: MessageFeedback\n    }>()\n\n    // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n    // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n    // actual emoji.\n    const emoji = computed(() => {\n        if (props.feedback.vote) {\n            return undefined\n        }\n        const raw = props.feedback.metadata?.reactionEmoji\n        return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n            ? raw\n            : undefined\n    })\n\n    // Accent matches the vote; neutral for a real emoji (it carries its own\n    // colour) or a comment-only feedback.\n    const toneClass = computed(() => {\n        if (emoji.value) {\n            return 'pk-message-feedback--neutral'\n        }\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'pk-message-feedback--positive'\n            case 'downvote':\n                return 'pk-message-feedback--negative'\n            default:\n                return 'pk-message-feedback--neutral'\n        }\n    })\n\n    // Fallback icon when there is no real emoji glyph to show.\n    const icon = computed(() => {\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'ri:thumb-up-fill'\n            case 'downvote':\n                return 'ri:thumb-down-fill'\n            default:\n                return 'ri:chat-quote-line'\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-message-feedback\" :class=\"toneClass\">\n        <span class=\"pk-message-feedback__badge\">\n            <span v-if=\"emoji\" class=\"pk-message-feedback__emoji\">\n                {{ emoji }}\n            </span>\n            <VvIcon v-else :name=\"icon\" />\n        </span>\n        <p v-if=\"feedback.comment\" class=\"pk-message-feedback__comment\">\n            {{ feedback.comment }}\n        </p>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    /*\n     * The user's reaction + comment, shown as an annotation hanging off the\n     * assistant message: echoes the bubble radius (same speech-bubble tail) and\n     * a coloured left rail + badge match the vote. Sits flush under the bubble.\n     */\n    .pk-message-feedback {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-8);\n        padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)\n            var(--spacing-6);\n        border-radius: var(--rounded-lg);\n        background: var(--pk-feedback-surface);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &--positive {\n            --pk-feedback-accent: var(--color-success);\n        }\n\n        &--negative {\n            --pk-feedback-accent: var(--color-danger);\n        }\n\n        &--neutral {\n            --pk-feedback-accent: var(--color-surface-4);\n        }\n\n        --pk-feedback-surface: color-mix(\n            in srgb,\n            var(--pk-feedback-accent) 8%,\n            var(--color-surface)\n        );\n\n        &__badge {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            justify-content: center;\n            width: var(--spacing-22, 1.375rem);\n            height: var(--spacing-22, 1.375rem);\n            border-radius: var(--rounded-full, 9999px);\n            background: var(--color-surface);\n            color: var(--pk-feedback-accent);\n            box-shadow: var(--shadow-sm);\n        }\n\n        &__emoji {\n            /* Smaller than the badge so the glyph doesn't touch the ring. */\n            font-size: var(--text-12);\n            line-height: 1;\n        }\n\n        &__comment {\n            margin: 0;\n            /* Preserve the user's line breaks; avoid orphans on wrap. */\n            white-space: pre-wrap;\n            text-wrap: pretty;\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;EAII,IAAM,IAAQ,GAOR,IAAQ,QAAe;GACzB,IAAI,EAAM,SAAS,MACf;GAEJ,IAAM,IAAM,EAAM,SAAS,UAAU;GACrC,OAAO,OAAO,KAAQ,YAAY,6BAA6B,KAAK,CAAG,IACjE,IACA,KAAA;EACV,CAAC,GAIK,IAAY,QAAe;GAC7B,IAAI,EAAM,OACN,OAAO;GAEX,QAAQ,EAAM,SAAS,MAAvB;IACI,KAAK,UACD,OAAO;IACX,KAAK,YACD,OAAO;IACX,SACI,OAAO;GACf;EACJ,CAAC,GAGK,IAAO,QAAe;GACxB,QAAQ,EAAM,SAAS,MAAvB;IACI,KAAK,UACD,OAAO;IACX,KAAK,YACD,OAAO;IACX,SACI,OAAO;GACf;EACJ,CAAC;;;eAID,EAUM,OAAA,EAVD,OAAK,EAAA,CAAC,uBAA8B,EAAA,KAAS,CAAA,EAAA,GAAA,CAC9C,EAKO,QALP,GAKO,CAJS,EAAA,SAAA,EAAA,GAAZ,EAEO,QAFP,GAEO,EADA,EAAA,KAAK,GAAA,CAAA,MAAA,EAAA,GAEZ,EAA8B,GAAA;;IAAd,MAAM,EAAA;6BAEjB,EAAA,SAAS,WAAA,EAAA,GAAlB,EAEI,KAFJ,GAEI,EADG,EAAA,SAAS,OAAO,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"PkChatbotMessageFeedback-DAqlgPrz.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbotMessageFeedback.vue","../../../../packages/components/src/chat/PkChatbotMessageFeedback.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import type { MessageFeedback } from 'models'\n    import { computed } from 'vue'\n\n    const props = defineProps<{\n        feedback: MessageFeedback\n    }>()\n\n    // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n    // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n    // actual emoji.\n    const emoji = computed(() => {\n        if (props.feedback.vote) {\n            return undefined\n        }\n        const raw = props.feedback.metadata?.reactionEmoji\n        return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n            ? raw\n            : undefined\n    })\n\n    // Accent matches the vote; neutral for a real emoji (it carries its own\n    // colour) or a comment-only feedback.\n    const toneClass = computed(() => {\n        if (emoji.value) {\n            return 'pk-message-feedback--neutral'\n        }\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'pk-message-feedback--positive'\n            case 'downvote':\n                return 'pk-message-feedback--negative'\n            default:\n                return 'pk-message-feedback--neutral'\n        }\n    })\n\n    // Fallback icon when there is no real emoji glyph to show.\n    const icon = computed(() => {\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'ri:thumb-up-fill'\n            case 'downvote':\n                return 'ri:thumb-down-fill'\n            default:\n                return 'ri:chat-quote-line'\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-message-feedback\" :class=\"toneClass\">\n        <span class=\"pk-message-feedback__badge\">\n            <span v-if=\"emoji\" class=\"pk-message-feedback__emoji\">\n                {{ emoji }}\n            </span>\n            <VvIcon v-else :name=\"icon\" />\n        </span>\n        <p v-if=\"feedback.comment\" class=\"pk-message-feedback__comment\">\n            {{ feedback.comment }}\n        </p>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    /*\n     * The user's reaction + comment, shown as an annotation hanging off the\n     * assistant message: echoes the bubble radius (same speech-bubble tail) and\n     * a coloured left rail + badge match the vote. Sits flush under the bubble.\n     */\n    .pk-message-feedback {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-8);\n        padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)\n            var(--spacing-6);\n        border-radius: var(--rounded-lg);\n        background: var(--pk-feedback-surface);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &--positive {\n            --pk-feedback-accent: var(--color-success);\n        }\n\n        &--negative {\n            --pk-feedback-accent: var(--color-danger);\n        }\n\n        &--neutral {\n            --pk-feedback-accent: var(--color-surface-4);\n        }\n\n        --pk-feedback-surface: color-mix(\n            in srgb,\n            var(--pk-feedback-accent) 8%,\n            var(--color-surface)\n        );\n\n        &__badge {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            justify-content: center;\n            width: var(--spacing-22, 1.375rem);\n            height: var(--spacing-22, 1.375rem);\n            border-radius: var(--rounded-full, 9999px);\n            background: var(--color-surface);\n            color: var(--pk-feedback-accent);\n            box-shadow: var(--shadow-sm);\n        }\n\n        &__emoji {\n            /* Smaller than the badge so the glyph doesn't touch the ring. */\n            font-size: var(--text-12);\n            line-height: 1;\n        }\n\n        &__comment {\n            margin: 0;\n            /* Preserve the user's line breaks; avoid orphans on wrap. */\n            white-space: pre-wrap;\n            text-wrap: pretty;\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import type { MessageFeedback } from 'models'\n    import { computed } from 'vue'\n\n    const props = defineProps<{\n        feedback: MessageFeedback\n    }>()\n\n    // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n    // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n    // actual emoji.\n    const emoji = computed(() => {\n        if (props.feedback.vote) {\n            return undefined\n        }\n        const raw = props.feedback.metadata?.reactionEmoji\n        return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n            ? raw\n            : undefined\n    })\n\n    // Accent matches the vote; neutral for a real emoji (it carries its own\n    // colour) or a comment-only feedback.\n    const toneClass = computed(() => {\n        if (emoji.value) {\n            return 'pk-message-feedback--neutral'\n        }\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'pk-message-feedback--positive'\n            case 'downvote':\n                return 'pk-message-feedback--negative'\n            default:\n                return 'pk-message-feedback--neutral'\n        }\n    })\n\n    // Fallback icon when there is no real emoji glyph to show.\n    const icon = computed(() => {\n        switch (props.feedback.vote) {\n            case 'upvote':\n                return 'ri:thumb-up-fill'\n            case 'downvote':\n                return 'ri:thumb-down-fill'\n            default:\n                return 'ri:chat-quote-line'\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-message-feedback\" :class=\"toneClass\">\n        <span class=\"pk-message-feedback__badge\">\n            <span v-if=\"emoji\" class=\"pk-message-feedback__emoji\">\n                {{ emoji }}\n            </span>\n            <VvIcon v-else :name=\"icon\" />\n        </span>\n        <p v-if=\"feedback.comment\" class=\"pk-message-feedback__comment\">\n            {{ feedback.comment }}\n        </p>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    /*\n     * The user's reaction + comment, shown as an annotation hanging off the\n     * assistant message: echoes the bubble radius (same speech-bubble tail) and\n     * a coloured left rail + badge match the vote. Sits flush under the bubble.\n     */\n    .pk-message-feedback {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-8);\n        padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)\n            var(--spacing-6);\n        border-radius: var(--rounded-lg);\n        background: var(--pk-feedback-surface);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &--positive {\n            --pk-feedback-accent: var(--color-success);\n        }\n\n        &--negative {\n            --pk-feedback-accent: var(--color-danger);\n        }\n\n        &--neutral {\n            --pk-feedback-accent: var(--color-surface-4);\n        }\n\n        --pk-feedback-surface: color-mix(\n            in srgb,\n            var(--pk-feedback-accent) 8%,\n            var(--color-surface)\n        );\n\n        &__badge {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            justify-content: center;\n            width: var(--spacing-22, 1.375rem);\n            height: var(--spacing-22, 1.375rem);\n            border-radius: var(--rounded-full, 9999px);\n            background: var(--color-surface);\n            color: var(--pk-feedback-accent);\n            box-shadow: var(--shadow-sm);\n        }\n\n        &__emoji {\n            /* Smaller than the badge so the glyph doesn't touch the ring. */\n            font-size: var(--text-12);\n            line-height: 1;\n        }\n\n        &__comment {\n            margin: 0;\n            /* Preserve the user's line breaks; avoid orphans on wrap. */\n            white-space: pre-wrap;\n            text-wrap: pretty;\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;EAII,IAAM,IAAQ,GAOR,IAAQ,QAAe;GACzB,IAAI,EAAM,SAAS,MACf;GAEJ,IAAM,IAAM,EAAM,SAAS,UAAU;GACrC,OAAO,OAAO,KAAQ,YAAY,6BAA6B,KAAK,CAAG,IACjE,IACA,KAAA;EACV,CAAC,GAIK,IAAY,QAAe;GAC7B,IAAI,EAAM,OACN,OAAO;GAEX,QAAQ,EAAM,SAAS,MAAvB;IACI,KAAK,UACD,OAAO;IACX,KAAK,YACD,OAAO;IACX,SACI,OAAO;GACf;EACJ,CAAC,GAGK,IAAO,QAAe;GACxB,QAAQ,EAAM,SAAS,MAAvB;IACI,KAAK,UACD,OAAO;IACX,KAAK,YACD,OAAO;IACX,SACI,OAAO;GACf;EACJ,CAAC;;;eAID,EAUM,OAAA,EAVD,OAAK,EAAA,CAAC,uBAA8B,EAAA,KAAS,CAAA,EAAA,GAAA,CAC9C,EAKO,QALP,GAKO,CAJS,EAAA,SAAA,EAAA,GAAZ,EAEO,QAFP,GAEO,EADA,EAAA,KAAK,GAAA,CAAA,MAAA,EAAA,GAEZ,EAA8B,GAAA;;IAAd,MAAM,EAAA;6BAEjB,EAAA,SAAS,WAAA,EAAA,GAAlB,EAEI,KAFJ,GAEI,EADG,EAAA,SAAS,OAAO,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}