npm - @8wave/ai-elements - Versions diffs - 0.119.0-beta.60 → 0.119.0-beta.62 - Mend

@8wave/ai-elements 0.119.0-beta.60 → 0.119.0-beta.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/_chunks/{PkToolShowComparison-DLC22e1W.js.map → PkToolShowComparison-Bsh6iiIQ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkToolShowComparison-DLC22e1W.js","names":["$t","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_withCtx","_unref","_Fragment","_renderList","_normalizeClass","_createTextVNode","_createCommentVNode","_sfc_main","_style_0","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","openBlock","init_runtime_core_esm_bundler","unref","createCommentVNode","createTextVNode","Fragment","createBaseVNode","init_reactivity_esm_bundler","computed","createElementBlock","normalizeClass","createVNode","renderList","useClipboard","Qi","Ae","VvButtonLocalized","_plugin_vue_export_helper_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","PkToolShowComparison_default","props","__props","toolPart","features","items","valueColorClass","value","copyTable","header","i","rows","f","_component_VvIcon","_component_VvButton","_component_VvButtonGroup","_ctx","copied","_cache","item","feature"],"sources":["../../../../packages/components/src/chat/PkToolShowComparison.vue","../../../../packages/components/src/chat/PkToolShowComparison.vue","../../../../packages/components/src/chat/PkToolShowComparison.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useClipboard } from '@vueuse/core'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n title?: string\n items: Array<{\n name: string\n values: Record<string, string>\n highlighted?: boolean\n }>\n }\n }\n return part\n })\n\n const features = computed(() => {\n const items = toolPart.value.input?.items\n if (!items \|\| items.length === 0) {\n return []\n }\n return Object.keys(items[0].values)\n })\n\n // The tool contract asks for \"✓\" and \"✗\" on boolean features: the pair is\n // a verdict, so it wears one and the table reads by eye (DESIGN.md).\n const valueColorClass = (value?: string) => {\n if (value === '✓') {\n return 'text-success'\n }\n if (value === '✗') {\n return 'text-danger'\n }\n return 'text-word-2'\n }\n\n const copyTable = () => {\n const items = toolPart.value.input?.items\n if (!items) {\n return\n }\n const header = ['', ...items.map((i) => i.name)].join('\\t')\n const rows = features.value.map((f) =>\n [f.replace(/_/g, ' '), ...items.map((i) => i.values[f] ?? '')].join(\n '\\t',\n ),\n )\n copy([header, ...rows].join('\\n'))\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.items?.length\"\n class=\"pk-tool-comparison border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon name=\"ri:scales-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{\n toolPart.input.title ?? $t('label.comparison')\n }}</strong>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyTable\" />\n </VvButtonGroup>\n </div>\n <!-- One row per feature, one column per item. In a narrow message\n each feature becomes a block that lists every item beside its\n value (`u-table--stack`), so a comparison still reads across. -->\n <div class=\"u-table-scroll\">\n <table class=\"u-table u-table--stack\" role=\"table\">\n <thead role=\"rowgroup\">\n <tr role=\"row\">\n <td></td>\n <th\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"columnheader\"\n scope=\"col\"\n class=\"pk-tool-comparison__item\"\n :class=\"{\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n }\">\n {{ item.name }}\n <small\n v-if=\"item.highlighted\"\n class=\"pk-tool-comparison__recommended\">\n {{ $t('label.recommended') }}\n </small>\n </th>\n </tr>\n </thead>\n <tbody role=\"rowgroup\">\n <tr v-for=\"feature in features\" :key=\"feature\" role=\"row\">\n <th\n role=\"rowheader\"\n scope=\"row\"\n class=\"pk-tool-comparison__feature\">\n {{ feature.replace(/_/g, ' ') }}\n </th>\n <td\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"cell\"\n :data-label=\"item.name\"\n :class=\"[\n valueColorClass(item.values[feature]),\n {\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n },\n ]\">\n {{ item.values[feature] ?? '-' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n // Written under the block so it outweighs the `.u-table` rules.\n .pk-tool-comparison {\n // Stacked, the labels are the names of the items, longer than the\n // headings of a data table.\n --u-table-label-width: 8rem;\n\n // The items are what the table compares: their names are the titles\n // of the columns, not the small headings of a data table.\n & &__item {\n font-size: var(--text-14);\n color: var(--color-word-1);\n }\n\n & &__feature {\n font-weight: var(--font-medium);\n color: var(--color-word-3);\n }\n\n // The recommended item: a ground down its column and a word under its\n // name, no accent colour (DESIGN.md). Stacked, its name weighs more\n // than the others beside its value.\n & &__cell--highlighted {\n background-color: var(--color-surface-1);\n }\n\n &__recommended {\n display: block;\n font-size: var(--text-12);\n font-weight: var(--font-normal);\n color: var(--color-word-3);\n }\n\n @container (width < 30rem) {\n & &__cell--highlighted {\n background-color: transparent;\n\n &::before {\n font-weight: var(--font-semibold);\n color: var(--color-word-1);\n }\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useClipboard } from '@vueuse/core'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n title?: string\n items: Array<{\n name: string\n values: Record<string, string>\n highlighted?: boolean\n }>\n }\n }\n return part\n })\n\n const features = computed(() => {\n const items = toolPart.value.input?.items\n if (!items \|\| items.length === 0) {\n return []\n }\n return Object.keys(items[0].values)\n })\n\n // The tool contract asks for \"✓\" and \"✗\" on boolean features: the pair is\n // a verdict, so it wears one and the table reads by eye (DESIGN.md).\n const valueColorClass = (value?: string) => {\n if (value === '✓') {\n return 'text-success'\n }\n if (value === '✗') {\n return 'text-danger'\n }\n return 'text-word-2'\n }\n\n const copyTable = () => {\n const items = toolPart.value.input?.items\n if (!items) {\n return\n }\n const header = ['', ...items.map((i) => i.name)].join('\\t')\n const rows = features.value.map((f) =>\n [f.replace(/_/g, ' '), ...items.map((i) => i.values[f] ?? '')].join(\n '\\t',\n ),\n )\n copy([header, ...rows].join('\\n'))\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.items?.length\"\n class=\"pk-tool-comparison border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon name=\"ri:scales-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{\n toolPart.input.title ?? $t('label.comparison')\n }}</strong>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyTable\" />\n </VvButtonGroup>\n </div>\n <!-- One row per feature, one column per item. In a narrow message\n each feature becomes a block that lists every item beside its\n value (`u-table--stack`), so a comparison still reads across. -->\n <div class=\"u-table-scroll\">\n <table class=\"u-table u-table--stack\" role=\"table\">\n <thead role=\"rowgroup\">\n <tr role=\"row\">\n <td></td>\n <th\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"columnheader\"\n scope=\"col\"\n class=\"pk-tool-comparison__item\"\n :class=\"{\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n }\">\n {{ item.name }}\n <small\n v-if=\"item.highlighted\"\n class=\"pk-tool-comparison__recommended\">\n {{ $t('label.recommended') }}\n </small>\n </th>\n </tr>\n </thead>\n <tbody role=\"rowgroup\">\n <tr v-for=\"feature in features\" :key=\"feature\" role=\"row\">\n <th\n role=\"rowheader\"\n scope=\"row\"\n class=\"pk-tool-comparison__feature\">\n {{ feature.replace(/_/g, ' ') }}\n </th>\n <td\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"cell\"\n :data-label=\"item.name\"\n :class=\"[\n valueColorClass(item.values[feature]),\n {\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n },\n ]\">\n {{ item.values[feature] ?? '-' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n // Written under the block so it outweighs the `.u-table` rules.\n .pk-tool-comparison {\n // Stacked, the labels are the names of the items, longer than the\n // headings of a data table.\n --u-table-label-width: 8rem;\n\n // The items are what the table compares: their names are the titles\n // of the columns, not the small headings of a data table.\n & &__item {\n font-size: var(--text-14);\n color: var(--color-word-1);\n }\n\n & &__feature {\n font-weight: var(--font-medium);\n color: var(--color-word-3);\n }\n\n // The recommended item: a ground down its column and a word under its\n // name, no accent colour (DESIGN.md). Stacked, its name weighs more\n // than the others beside its value.\n & &__cell--highlighted {\n background-color: var(--color-surface-1);\n }\n\n &__recommended {\n display: block;\n font-size: var(--text-12);\n font-weight: var(--font-normal);\n color: var(--color-word-3);\n }\n\n @container (width < 30rem) {\n & &__cell--highlighted {\n background-color: transparent;\n\n &::before {\n font-weight: var(--font-semibold);\n color: var(--color-word-1);\n }\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useClipboard } from '@vueuse/core'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n title?: string\n items: Array<{\n name: string\n values: Record<string, string>\n highlighted?: boolean\n }>\n }\n }\n return part\n })\n\n const features = computed(() => {\n const items = toolPart.value.input?.items\n if (!items \|\| items.length === 0) {\n return []\n }\n return Object.keys(items[0].values)\n })\n\n // The tool contract asks for \"✓\" and \"✗\" on boolean features: the pair is\n // a verdict, so it wears one and the table reads by eye (DESIGN.md).\n const valueColorClass = (value?: string) => {\n if (value === '✓') {\n return 'text-success'\n }\n if (value === '✗') {\n return 'text-danger'\n }\n return 'text-word-2'\n }\n\n const copyTable = () => {\n const items = toolPart.value.input?.items\n if (!items) {\n return\n }\n const header = ['', ...items.map((i) => i.name)].join('\\t')\n const rows = features.value.map((f) =>\n [f.replace(/_/g, ' '), ...items.map((i) => i.values[f] ?? '')].join(\n '\\t',\n ),\n )\n copy([header, ...rows].join('\\n'))\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.items?.length\"\n class=\"pk-tool-comparison border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon name=\"ri:scales-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{\n toolPart.input.title ?? $t('label.comparison')\n }}</strong>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyTable\" />\n </VvButtonGroup>\n </div>\n <!-- One row per feature, one column per item. In a narrow message\n each feature becomes a block that lists every item beside its\n value (`u-table--stack`), so a comparison still reads across. -->\n <div class=\"u-table-scroll\">\n <table class=\"u-table u-table--stack\" role=\"table\">\n <thead role=\"rowgroup\">\n <tr role=\"row\">\n <td></td>\n <th\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"columnheader\"\n scope=\"col\"\n class=\"pk-tool-comparison__item\"\n :class=\"{\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n }\">\n {{ item.name }}\n <small\n v-if=\"item.highlighted\"\n class=\"pk-tool-comparison__recommended\">\n {{ $t('label.recommended') }}\n </small>\n </th>\n </tr>\n </thead>\n <tbody role=\"rowgroup\">\n <tr v-for=\"feature in features\" :key=\"feature\" role=\"row\">\n <th\n role=\"rowheader\"\n scope=\"row\"\n class=\"pk-tool-comparison__feature\">\n {{ feature.replace(/_/g, ' ') }}\n </th>\n <td\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"cell\"\n :data-label=\"item.name\"\n :class=\"[\n valueColorClass(item.values[feature]),\n {\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n },\n ]\">\n {{ item.values[feature] ?? '-' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n // Written under the block so it outweighs the `.u-table` rules.\n .pk-tool-comparison {\n // Stacked, the labels are the names of the items, longer than the\n // headings of a data table.\n --u-table-label-width: 8rem;\n\n // The items are what the table compares: their names are the titles\n // of the columns, not the small headings of a data table.\n & &__item {\n font-size: var(--text-14);\n color: var(--color-word-1);\n }\n\n & &__feature {\n font-weight: var(--font-medium);\n color: var(--color-word-3);\n }\n\n // The recommended item: a ground down its column and a word under its\n // name, no accent colour (DESIGN.md). Stacked, its name weighs more\n // than the others beside its value.\n & &__cell--highlighted {\n background-color: var(--color-surface-1);\n }\n\n &__recommended {\n display: block;\n font-size: var(--text-12);\n font-weight: var(--font-normal);\n color: var(--color-word-3);\n }\n\n @container (width < 30rem) {\n & &__cell--highlighted {\n background-color: transparent;\n\n &::before {\n font-weight: var(--font-semibold);\n color: var(--color-word-1);\n }\n }\n }\n }\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PkToolShowComparison-Bsh6iiIQ.js","names":["$t","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_withCtx","_unref","_Fragment","_renderList","_normalizeClass","_createTextVNode","_createCommentVNode","_sfc_main","_style_0","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","openBlock","init_runtime_core_esm_bundler","unref","createCommentVNode","createTextVNode","Fragment","createBaseVNode","init_reactivity_esm_bundler","computed","createElementBlock","normalizeClass","createVNode","renderList","useClipboard","au","Ce","VvButtonLocalized","_plugin_vue_export_helper_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","PkToolShowComparison_default","props","__props","toolPart","features","items","valueColorClass","value","copyTable","header","i","rows","f","_component_VvIcon","_component_VvButton","_component_VvButtonGroup","_ctx","copied","_cache","item","feature"],"sources":["../../../../packages/components/src/chat/PkToolShowComparison.vue","../../../../packages/components/src/chat/PkToolShowComparison.vue","../../../../packages/components/src/chat/PkToolShowComparison.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useClipboard } from '@vueuse/core'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n title?: string\n items: Array<{\n name: string\n values: Record<string, string>\n highlighted?: boolean\n }>\n }\n }\n return part\n })\n\n const features = computed(() => {\n const items = toolPart.value.input?.items\n if (!items \|\| items.length === 0) {\n return []\n }\n return Object.keys(items[0].values)\n })\n\n // The tool contract asks for \"✓\" and \"✗\" on boolean features: the pair is\n // a verdict, so it wears one and the table reads by eye (DESIGN.md).\n const valueColorClass = (value?: string) => {\n if (value === '✓') {\n return 'text-success'\n }\n if (value === '✗') {\n return 'text-danger'\n }\n return 'text-word-2'\n }\n\n const copyTable = () => {\n const items = toolPart.value.input?.items\n if (!items) {\n return\n }\n const header = ['', ...items.map((i) => i.name)].join('\\t')\n const rows = features.value.map((f) =>\n [f.replace(/_/g, ' '), ...items.map((i) => i.values[f] ?? '')].join(\n '\\t',\n ),\n )\n copy([header, ...rows].join('\\n'))\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.items?.length\"\n class=\"pk-tool-comparison border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon name=\"ri:scales-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{\n toolPart.input.title ?? $t('label.comparison')\n }}</strong>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyTable\" />\n </VvButtonGroup>\n </div>\n <!-- One row per feature, one column per item. In a narrow message\n each feature becomes a block that lists every item beside its\n value (`u-table--stack`), so a comparison still reads across. -->\n <div class=\"u-table-scroll\">\n <table class=\"u-table u-table--stack\" role=\"table\">\n <thead role=\"rowgroup\">\n <tr role=\"row\">\n <td></td>\n <th\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"columnheader\"\n scope=\"col\"\n class=\"pk-tool-comparison__item\"\n :class=\"{\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n }\">\n {{ item.name }}\n <small\n v-if=\"item.highlighted\"\n class=\"pk-tool-comparison__recommended\">\n {{ $t('label.recommended') }}\n </small>\n </th>\n </tr>\n </thead>\n <tbody role=\"rowgroup\">\n <tr v-for=\"feature in features\" :key=\"feature\" role=\"row\">\n <th\n role=\"rowheader\"\n scope=\"row\"\n class=\"pk-tool-comparison__feature\">\n {{ feature.replace(/_/g, ' ') }}\n </th>\n <td\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"cell\"\n :data-label=\"item.name\"\n :class=\"[\n valueColorClass(item.values[feature]),\n {\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n },\n ]\">\n {{ item.values[feature] ?? '-' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n // Written under the block so it outweighs the `.u-table` rules.\n .pk-tool-comparison {\n // Stacked, the labels are the names of the items, longer than the\n // headings of a data table.\n --u-table-label-width: 8rem;\n\n // The items are what the table compares: their names are the titles\n // of the columns, not the small headings of a data table.\n & &__item {\n font-size: var(--text-14);\n color: var(--color-word-1);\n }\n\n & &__feature {\n font-weight: var(--font-medium);\n color: var(--color-word-3);\n }\n\n // The recommended item: a ground down its column and a word under its\n // name, no accent colour (DESIGN.md). Stacked, its name weighs more\n // than the others beside its value.\n & &__cell--highlighted {\n background-color: var(--color-surface-1);\n }\n\n &__recommended {\n display: block;\n font-size: var(--text-12);\n font-weight: var(--font-normal);\n color: var(--color-word-3);\n }\n\n @container (width < 30rem) {\n & &__cell--highlighted {\n background-color: transparent;\n\n &::before {\n font-weight: var(--font-semibold);\n color: var(--color-word-1);\n }\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useClipboard } from '@vueuse/core'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n title?: string\n items: Array<{\n name: string\n values: Record<string, string>\n highlighted?: boolean\n }>\n }\n }\n return part\n })\n\n const features = computed(() => {\n const items = toolPart.value.input?.items\n if (!items \|\| items.length === 0) {\n return []\n }\n return Object.keys(items[0].values)\n })\n\n // The tool contract asks for \"✓\" and \"✗\" on boolean features: the pair is\n // a verdict, so it wears one and the table reads by eye (DESIGN.md).\n const valueColorClass = (value?: string) => {\n if (value === '✓') {\n return 'text-success'\n }\n if (value === '✗') {\n return 'text-danger'\n }\n return 'text-word-2'\n }\n\n const copyTable = () => {\n const items = toolPart.value.input?.items\n if (!items) {\n return\n }\n const header = ['', ...items.map((i) => i.name)].join('\\t')\n const rows = features.value.map((f) =>\n [f.replace(/_/g, ' '), ...items.map((i) => i.values[f] ?? '')].join(\n '\\t',\n ),\n )\n copy([header, ...rows].join('\\n'))\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.items?.length\"\n class=\"pk-tool-comparison border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon name=\"ri:scales-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{\n toolPart.input.title ?? $t('label.comparison')\n }}</strong>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyTable\" />\n </VvButtonGroup>\n </div>\n <!-- One row per feature, one column per item. In a narrow message\n each feature becomes a block that lists every item beside its\n value (`u-table--stack`), so a comparison still reads across. -->\n <div class=\"u-table-scroll\">\n <table class=\"u-table u-table--stack\" role=\"table\">\n <thead role=\"rowgroup\">\n <tr role=\"row\">\n <td></td>\n <th\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"columnheader\"\n scope=\"col\"\n class=\"pk-tool-comparison__item\"\n :class=\"{\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n }\">\n {{ item.name }}\n <small\n v-if=\"item.highlighted\"\n class=\"pk-tool-comparison__recommended\">\n {{ $t('label.recommended') }}\n </small>\n </th>\n </tr>\n </thead>\n <tbody role=\"rowgroup\">\n <tr v-for=\"feature in features\" :key=\"feature\" role=\"row\">\n <th\n role=\"rowheader\"\n scope=\"row\"\n class=\"pk-tool-comparison__feature\">\n {{ feature.replace(/_/g, ' ') }}\n </th>\n <td\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"cell\"\n :data-label=\"item.name\"\n :class=\"[\n valueColorClass(item.values[feature]),\n {\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n },\n ]\">\n {{ item.values[feature] ?? '-' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n // Written under the block so it outweighs the `.u-table` rules.\n .pk-tool-comparison {\n // Stacked, the labels are the names of the items, longer than the\n // headings of a data table.\n --u-table-label-width: 8rem;\n\n // The items are what the table compares: their names are the titles\n // of the columns, not the small headings of a data table.\n & &__item {\n font-size: var(--text-14);\n color: var(--color-word-1);\n }\n\n & &__feature {\n font-weight: var(--font-medium);\n color: var(--color-word-3);\n }\n\n // The recommended item: a ground down its column and a word under its\n // name, no accent colour (DESIGN.md). Stacked, its name weighs more\n // than the others beside its value.\n & &__cell--highlighted {\n background-color: var(--color-surface-1);\n }\n\n &__recommended {\n display: block;\n font-size: var(--text-12);\n font-weight: var(--font-normal);\n color: var(--color-word-3);\n }\n\n @container (width < 30rem) {\n & &__cell--highlighted {\n background-color: transparent;\n\n &::before {\n font-weight: var(--font-semibold);\n color: var(--color-word-1);\n }\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useClipboard } from '@vueuse/core'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n title?: string\n items: Array<{\n name: string\n values: Record<string, string>\n highlighted?: boolean\n }>\n }\n }\n return part\n })\n\n const features = computed(() => {\n const items = toolPart.value.input?.items\n if (!items \|\| items.length === 0) {\n return []\n }\n return Object.keys(items[0].values)\n })\n\n // The tool contract asks for \"✓\" and \"✗\" on boolean features: the pair is\n // a verdict, so it wears one and the table reads by eye (DESIGN.md).\n const valueColorClass = (value?: string) => {\n if (value === '✓') {\n return 'text-success'\n }\n if (value === '✗') {\n return 'text-danger'\n }\n return 'text-word-2'\n }\n\n const copyTable = () => {\n const items = toolPart.value.input?.items\n if (!items) {\n return\n }\n const header = ['', ...items.map((i) => i.name)].join('\\t')\n const rows = features.value.map((f) =>\n [f.replace(/_/g, ' '), ...items.map((i) => i.values[f] ?? '')].join(\n '\\t',\n ),\n )\n copy([header, ...rows].join('\\n'))\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.items?.length\"\n class=\"pk-tool-comparison border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon name=\"ri:scales-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{\n toolPart.input.title ?? $t('label.comparison')\n }}</strong>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyTable\" />\n </VvButtonGroup>\n </div>\n <!-- One row per feature, one column per item. In a narrow message\n each feature becomes a block that lists every item beside its\n value (`u-table--stack`), so a comparison still reads across. -->\n <div class=\"u-table-scroll\">\n <table class=\"u-table u-table--stack\" role=\"table\">\n <thead role=\"rowgroup\">\n <tr role=\"row\">\n <td></td>\n <th\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"columnheader\"\n scope=\"col\"\n class=\"pk-tool-comparison__item\"\n :class=\"{\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n }\">\n {{ item.name }}\n <small\n v-if=\"item.highlighted\"\n class=\"pk-tool-comparison__recommended\">\n {{ $t('label.recommended') }}\n </small>\n </th>\n </tr>\n </thead>\n <tbody role=\"rowgroup\">\n <tr v-for=\"feature in features\" :key=\"feature\" role=\"row\">\n <th\n role=\"rowheader\"\n scope=\"row\"\n class=\"pk-tool-comparison__feature\">\n {{ feature.replace(/_/g, ' ') }}\n </th>\n <td\n v-for=\"item in toolPart.input.items\"\n :key=\"item.name\"\n role=\"cell\"\n :data-label=\"item.name\"\n :class=\"[\n valueColorClass(item.values[feature]),\n {\n 'pk-tool-comparison__cell--highlighted':\n item.highlighted,\n },\n ]\">\n {{ item.values[feature] ?? '-' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n // Written under the block so it outweighs the `.u-table` rules.\n .pk-tool-comparison {\n // Stacked, the labels are the names of the items, longer than the\n // headings of a data table.\n --u-table-label-width: 8rem;\n\n // The items are what the table compares: their names are the titles\n // of the columns, not the small headings of a data table.\n & &__item {\n font-size: var(--text-14);\n color: var(--color-word-1);\n }\n\n & &__feature {\n font-weight: var(--font-medium);\n color: var(--color-word-3);\n }\n\n // The recommended item: a ground down its column and a word under its\n // name, no accent colour (DESIGN.md). Stacked, its name weighs more\n // than the others beside its value.\n & &__cell--highlighted {\n background-color: var(--color-surface-1);\n }\n\n &__recommended {\n display: block;\n font-size: var(--text-12);\n font-weight: var(--font-normal);\n color: var(--color-word-3);\n }\n\n @container (width < 30rem) {\n & &__cell--highlighted {\n background-color: transparent;\n\n &::before {\n font-weight: var(--font-semibold);\n color: var(--color-word-1);\n }\n }\n }\n }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAII,IAAMoD,IAAQC,GAIR,EAAE,SAAM,cAAWlB,EAAa,GAEhCmB,IAAWxB,QACAsB,EAAM,IAWtB,GAEKG,IAAWzB,QAAe;GAC5B,IAAM0B,IAAQF,EAAS,MAAM,OAAO;GAIpC,OAHI,CAACE,KAASA,EAAM,WAAW,IACpB,CAAC,IAEL,OAAO,KAAKA,EAAM,EAAE,CAAC,MAAM;EACtC,CAAC,GAIKC,KAAmB,MACjBC,MAAU,MACH,iBAEPA,MAAU,MACH,gBAEJ,eAGLC,UAAkB;GACpB,IAAMH,IAAQF,EAAS,MAAM,OAAO;GACpC,IAAI,CAACE,GACD;GAEJ,IAAMI,IAAS,CAAC,IAAI,GAAGJ,EAAM,KAAK,MAAMK,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,GAAI,GACpDC,IAAOP,EAAS,MAAM,KAAK,MAC7B,CAACQ,EAAE,QAAQ,MAAM,GAAG,GAAG,GAAGP,EAAM,KAAK,MAAMK,EAAE,OAAOE,MAAM,EAAE,CAAC,CAAC,CAAC,KAC3D,GACJ,CACJ;GACA,EAAK,CAACH,GAAQ,GAAGE,CAAI,CAAC,CAAC,KAAK,IAAI,CAAC;EACrC;;;GAKU,OAAAR,EAAA,OAAU,OAAO,OAAO,UADlClD,EAAA,GAAAC,EAsEM,OAtENmC,GAsEM,CAnEFlC,EAaM,OAbNmC,GAaM;IAXFlC,EAAgDyD,GAAA;KAAxC,MAAK;KAAiB,OAAM;;IACpC1D,EAEW,UAFXoC,GAEWlC,EADP8C,EAAA,MAAS,MAAM,SAAStD,EAAAA,GAAE,kBAAA,CAAA,GAAA,CAAA;IAE9BO,EAMgB2D,GAAA;KAND,WAAU;KAAU,OAAM;;KACrC,SAAAzD,QAIyB,CAJzBF,EAIyB0D,GAAA;MAHrB,WAAU;MACT,MAAMvD,EAAA0D,CAAA,IAAM,kBAAA;MACZ,OAAO1D,EAAA0D,CAAA,IAASpE,EAAAA,GAAE,eAAA,IAAoBA,EAAAA,GAAE,aAAA;MACxC,SAAO2D;;;;GAMpBrD,CAAAA,GAAAA,EAiDM,OAjDNqC,GAiDM,CAhDFrC,EA+CQ,SA/CRsC,GA+CQ,CA9CJtC,EAqBQ,SArBRuC,GAqBQ,CApBJvC,EAmBK,MAnBLwC,GAmBK,CAlBD,AAAAuB,EAAA,OAAA/D,EAAS,MAAA,MAAA,MAAA,EAAA,IACTF,EAAA,EAAA,GAAAC,EAgBKM,GAAA,MAAAC,EAfc0C,EAAA,MAAS,MAAM,QAAvB,OADXlD,EAAA,GAAAC,EAgBK,MAAA;IAdA,KAAKiE,EAAK;IACX,MAAK;IACL,OAAM;IACN,OAAKzD,EAAA,CAAC,4BAA0B,EAAA,yCACuFyD,EAAK,YAAA,CAAA,CAAA;GAIzHxD,GAAAA,CAAAA,EAAAN,EAAA8D,EAAK,IAAI,IAAG,KACf,CAAA,GACUA,EAAK,eADflE,EAAA,GAAAC,EAIQ,SAJR0C,GAIQvC,EADDR,EAAAA,GAAE,mBAAA,CAAA,GAAA,CAAA,KAAAyB,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA,EAKrBnB,GAAAA,GAAAA,EAAAA,CAAAA,CAAAA,CAAAA,GAAAA,EAuBQ,SAvBR0C,GAuBQ,EAtBJ5C,EAAA,EAAA,GAAAC,EAqBKM,GAAA,MAAAC,EArBiB2C,EAAA,QAAX,OAAXnD,EAAA,GAAAC,EAqBK,MAAA;IArB4B,KAAKkE;IAAS,MAAK;GAChDjE,GAAAA,CAAAA,EAKK,MALL2C,GAKKzC,EADE+D,EAAQ,QAAO,MAAA,GAAA,CAAA,GAAA,CAAA,IAEtBnE,EAAA,EAAA,GAAAC,EAaKM,GAAA,MAAAC,EAZc0C,EAAA,MAAS,MAAM,QAAvB,OADXlD,EAAA,GAAAC,EAaK,MAAA;IAXA,KAAKiE,EAAK;IACX,MAAK;IACJ,cAAYA,EAAK;IACjB,OAAKzD,EAAA,CAAoC4C,EAAgBa,EAAK,OAAOC,EAAO,GAAA,EAAA,yCAA2JD,EAAK,YAAA,CAAA,CAAA;GAO1O,GAAA9D,EAAA8D,EAAK,OAAOC,MAAO,GAAA,GAAA,IAAArB,CAAA"}

package/dist/_chunks/{PkToolShowContactForm-CW7gKQ7h.js → PkToolShowContactForm-B2UzmoDw.js} RENAMED Viewed

@@ -3,9 +3,9 @@ import { $ as r, C as i, Ct as a, Dt as o, L as s, O as c, St as l, X as u, _ as
 import { r as C } from "./vue-i18n-CooVjJjT.js";
 import { t as w } from "./PkStreamingMarkdown-pEgm7m-B.js";
 import { t as T } from "./src-CggZ5M7x.js";
-import { m as E, t as D } from "./index.es-dTcgyeM4.js";
-import { t as O } from "./VvButtonLocalized-DV-zbH9b.js";
-import { n as k, r as A, t as j } from "./index.es-DkFMpDsf.js";
+import { s as E, t as D } from "./index.es-D7jsz1j2.js";
+import { t as O } from "./VvButtonLocalized-PfbIEwav.js";
+import { n as k, r as A, t as j } from "./index.es-DmG03ICf.js";
 //#region ../../packages/components/src/chat/PkToolShowContactForm.vue?vue&type=script&setup=true&lang.ts
 c(), _(), a(), y();
 var M = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-surface" }, N = { class: "px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40" }, P = { class: "font-bold" }, F = {
@@ -155,4 +155,4 @@ var M = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 //#endregion
 export { K as default };
-//# sourceMappingURL=PkToolShowContactForm-CW7gKQ7h.js.map
+//# sourceMappingURL=PkToolShowContactForm-B2UzmoDw.js.map

package/dist/_chunks/{PkToolShowContactForm-CW7gKQ7h.js.map → PkToolShowContactForm-B2UzmoDw.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkToolShowContactForm-CW7gKQ7h.js","names":["z.object","z.string","z.email","useForm","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_Transition","_withCtx","_Fragment","_renderList","_createCommentVNode","_isRef","_createBlock","_createTextVNode","PkStreamingMarkdown","_sfc_main","object","string","email","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createTextVNode","isRef","Fragment","createBlock","createBaseVNode","init_reactivity_esm_bundler","computed","init_runtime_dom_esm_bundler","Transition","createElementBlock","createVNode","renderList","useI18n","PkStreamingMarkdown_default","formatPhoneNumber","xr","Ae","VvButtonLocalized","useLocalizedString","useSafeLocalStorage","Se","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","PkToolShowContactForm_default","__emit","$t","props","__props","toolPart","input","prefilled","value","field","localSubmitted","LeadFormSchema","emit","newInput","submitted","isSubmitted","submitLead","data","privacyNotice","_component_VvIcon","_component_VvAlert","_component_VvButton","VvForm","formData","_cache","$event","VvFormField"],"sources":["../../../../packages/components/src/chat/PkToolShowContactForm.vue","../../../../packages/components/src/chat/PkToolShowContactForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { useForm } from '@volverjs/form-vue'\n import * as z from 'zod'\n import { useSafeLocalStorage, useLocalizedString } from 'composables'\n import type { LocalizedString } from 'models'\n import { formatPhoneNumber } from 'utils'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const { t: $t } = useI18n({ useScope: 'global' })\n\n const props = defineProps<{\n part: unknown\n submitted?: boolean\n loading?: boolean\n error?: string\n readonly?: boolean\n privacyPolicyNotice?: LocalizedString\n /*\n A conversation read back (the chat logs): the card is the record\n * of the form the agent showed, its prefilled values as text. Nothing\n * in the part says whether the visitor sent it, only the contacts do.\n /\n record?: boolean\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n type: string\n toolCallId: string\n input?: {\n name: string\n email: string\n phone?: string\n conversationContext?: Record<string, unknown>\n }\n }\n return part\n })\n\n const input = computed(() => toolPart.value.input)\n\n const prefilled = computed(() =>\n (\n [\n { name: 'name', label: $t('label.name') },\n { name: 'email', label: $t('label.email') },\n { name: 'phone', label: $t('label.phone') },\n ] as const\n )\n .map((field) => {\n const value = input.value?.[field.name]?.trim()\n return {\n ...field,\n // Written as the contacts page writes it\n value:\n field.name === 'phone' && value\n ? formatPhoneNumber(value) \|\| value\n : value,\n }\n })\n .filter((field) => field.value),\n )\n\n const localSubmitted = useSafeLocalStorage<boolean>(\n computed(\n () =>\n `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n ),\n false,\n )\n\n const LeadFormSchema = z.object({\n name: z.string().min(1).max(255).default(''),\n email: z.email().max(255).default(''),\n phone: z\n .string()\n .max(50)\n .regex(/^[+0-9\\s\\-.()]$/, $t('validation.invalidPhoneNumber'))\n .optional(),\n })\n\n const emit = defineEmits<{\n submit: [data: Record<string, unknown>]\n }>()\n\n const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n lazyLoad: true,\n })\n\n // Pre-populate form with input values\n watch(\n input,\n (newInput) => {\n formData.value = {\n name: newInput?.name \|\| '',\n email: newInput?.email \|\| '',\n phone: newInput?.phone \|\| '',\n }\n },\n { immediate: true },\n )\n\n watch(\n () => props.submitted,\n (submitted) => {\n if (submitted) {\n localSubmitted.value = true\n }\n },\n { immediate: true },\n )\n\n const isSubmitted = computed(() => {\n return props.submitted \|\| localSubmitted.value\n })\n\n const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n emit('submit', { ...data, metadata: input.value?.conversationContext })\n }\n\n const privacyNotice = useLocalizedString(\n () => props.privacyPolicyNotice,\n 'message.defaultPrivacyPolicyNotice',\n )\n</script>\n\n<template>\n <div\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n </div>\n\n <Transition mode=\"out-in\">\n <div v-if=\"record\" class=\"p-sm flex flex-col gap-sm text-14\">\n <p class=\"text-word-2\">\n {{\n prefilled.length\n ? $t('message.contactFormRecordPrefilled')\n : $t('message.contactFormRecord')\n }}\n </p>\n <dl\n v-if=\"prefilled.length\"\n class=\"flex flex-wrap gap-x-lg gap-y-sm\">\n <div\n v-for=\"field in prefilled\"\n :key=\"field.name\"\n class=\"flex flex-col gap-4 min-w-0\">\n <dt class=\"text-12 text-word-3\">{{ field.label }}</dt>\n <dd class=\"text-word-1 break-words\">\n {{ field.value }}\n </dd>\n </div>\n </dl>\n </div>\n <div v-else-if=\"!isSubmitted\" class=\"p-sm\">\n <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n <VvFormField\n name=\"name\"\n type=\"text\"\n :label=\"$t('label.name')\"\n :placeholder=\"$t('placeholder.name')\"\n icon=\"ri:user-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"email\"\n type=\"email\"\n :label=\"$t('label.email')\"\n :placeholder=\"$t('placeholder.email')\"\n icon=\"ri:mail-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"phone\"\n type=\"tel\"\n :label=\"$t('label.phone')\"\n :placeholder=\"$t('placeholder.phone')\"\n icon=\"ri:phone-line\"\n class=\"mb-md\"\n modifiers=\"compact\" />\n\n <!-- A send that failed says so: the reason reached the\n card and was never drawn -->\n <VvAlert v-if=\"error\" modifiers=\"danger\" class=\"mb-md\">\n {{ error }}\n </VvAlert>\n\n <div class=\"flex justify-between items-center gap-16 mt-xs\">\n <div\n class=\"text-smaller text-word-3 flex items-center gap-8\">\n <VvIcon\n name=\"ri:shield-check-line\"\n class=\"text-16 shrink-0\" />\n <PkStreamingMarkdown\n :markdown=\"privacyNotice\"\n class=\"wysiwyg\" />\n </div>\n <!-- The library's default button is the brand, and in\n the chat the brand is the agent's color, as on the\n rest of the card: `primary` drew it neutral dark -->\n <VvButton\n type=\"submit\"\n :loading\n :disabled=\"loading \|\| readonly\"\n icon-position=\"right\"\n class=\"shrink-0\"\n :label=\"$t('action.submit')\" />\n </div>\n </VvForm>\n </div>\n <div v-else class=\"p-sm\">\n <!-- One confirmation row across every tool card: a green\n check, the title in weight, the body quiet. The check is\n the outcome, so it alone carries the colour (DESIGN.md). -->\n <div class=\"flex items-center gap-sm\">\n <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n <div>\n <strong class=\"font-medium block text-word-1\">\n {{ $t('message.leadSubmittedTitle') }}\n </strong>\n <p class=\"text-word-3\">\n {{ $t('message.leadSubmittedMessage') }}\n </p>\n </div>\n </div>\n </div>\n </Transition>\n </div>\n</template>\n","<script setup lang=\"ts\">\n import { computed, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { useForm } from '@volverjs/form-vue'\n import * as z from 'zod'\n import { useSafeLocalStorage, useLocalizedString } from 'composables'\n import type { LocalizedString } from 'models'\n import { formatPhoneNumber } from 'utils'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const { t: $t } = useI18n({ useScope: 'global' })\n\n const props = defineProps<{\n part: unknown\n submitted?: boolean\n loading?: boolean\n error?: string\n readonly?: boolean\n privacyPolicyNotice?: LocalizedString\n /*\n A conversation read back (the chat logs): the card is the record\n * of the form the agent showed, its prefilled values as text. Nothing\n * in the part says whether the visitor sent it, only the contacts do.\n /\n record?: boolean\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n type: string\n toolCallId: string\n input?: {\n name: string\n email: string\n phone?: string\n conversationContext?: Record<string, unknown>\n }\n }\n return part\n })\n\n const input = computed(() => toolPart.value.input)\n\n const prefilled = computed(() =>\n (\n [\n { name: 'name', label: $t('label.name') },\n { name: 'email', label: $t('label.email') },\n { name: 'phone', label: $t('label.phone') },\n ] as const\n )\n .map((field) => {\n const value = input.value?.[field.name]?.trim()\n return {\n ...field,\n // Written as the contacts page writes it\n value:\n field.name === 'phone' && value\n ? formatPhoneNumber(value) \|\| value\n : value,\n }\n })\n .filter((field) => field.value),\n )\n\n const localSubmitted = useSafeLocalStorage<boolean>(\n computed(\n () =>\n `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n ),\n false,\n )\n\n const LeadFormSchema = z.object({\n name: z.string().min(1).max(255).default(''),\n email: z.email().max(255).default(''),\n phone: z\n .string()\n .max(50)\n .regex(/^[+0-9\\s\\-.()]$/, $t('validation.invalidPhoneNumber'))\n .optional(),\n })\n\n const emit = defineEmits<{\n submit: [data: Record<string, unknown>]\n }>()\n\n const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n lazyLoad: true,\n })\n\n // Pre-populate form with input values\n watch(\n input,\n (newInput) => {\n formData.value = {\n name: newInput?.name \|\| '',\n email: newInput?.email \|\| '',\n phone: newInput?.phone \|\| '',\n }\n },\n { immediate: true },\n )\n\n watch(\n () => props.submitted,\n (submitted) => {\n if (submitted) {\n localSubmitted.value = true\n }\n },\n { immediate: true },\n )\n\n const isSubmitted = computed(() => {\n return props.submitted \|\| localSubmitted.value\n })\n\n const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n emit('submit', { ...data, metadata: input.value?.conversationContext })\n }\n\n const privacyNotice = useLocalizedString(\n () => props.privacyPolicyNotice,\n 'message.defaultPrivacyPolicyNotice',\n )\n</script>\n\n<template>\n <div\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n </div>\n\n <Transition mode=\"out-in\">\n <div v-if=\"record\" class=\"p-sm flex flex-col gap-sm text-14\">\n <p class=\"text-word-2\">\n {{\n prefilled.length\n ? $t('message.contactFormRecordPrefilled')\n : $t('message.contactFormRecord')\n }}\n </p>\n <dl\n v-if=\"prefilled.length\"\n class=\"flex flex-wrap gap-x-lg gap-y-sm\">\n <div\n v-for=\"field in prefilled\"\n :key=\"field.name\"\n class=\"flex flex-col gap-4 min-w-0\">\n <dt class=\"text-12 text-word-3\">{{ field.label }}</dt>\n <dd class=\"text-word-1 break-words\">\n {{ field.value }}\n </dd>\n </div>\n </dl>\n </div>\n <div v-else-if=\"!isSubmitted\" class=\"p-sm\">\n <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n <VvFormField\n name=\"name\"\n type=\"text\"\n :label=\"$t('label.name')\"\n :placeholder=\"$t('placeholder.name')\"\n icon=\"ri:user-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"email\"\n type=\"email\"\n :label=\"$t('label.email')\"\n :placeholder=\"$t('placeholder.email')\"\n icon=\"ri:mail-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"phone\"\n type=\"tel\"\n :label=\"$t('label.phone')\"\n :placeholder=\"$t('placeholder.phone')\"\n icon=\"ri:phone-line\"\n class=\"mb-md\"\n modifiers=\"compact\" />\n\n <!-- A send that failed says so: the reason reached the\n card and was never drawn -->\n <VvAlert v-if=\"error\" modifiers=\"danger\" class=\"mb-md\">\n {{ error }}\n </VvAlert>\n\n <div class=\"flex justify-between items-center gap-16 mt-xs\">\n <div\n class=\"text-smaller text-word-3 flex items-center gap-8\">\n <VvIcon\n name=\"ri:shield-check-line\"\n class=\"text-16 shrink-0\" />\n <PkStreamingMarkdown\n :markdown=\"privacyNotice\"\n class=\"wysiwyg\" />\n </div>\n <!-- The library's default button is the brand, and in\n the chat the brand is the agent's color, as on the\n rest of the card: `primary` drew it neutral dark -->\n <VvButton\n type=\"submit\"\n :loading\n :disabled=\"loading \|\| readonly\"\n icon-position=\"right\"\n class=\"shrink-0\"\n :label=\"$t('action.submit')\" />\n </div>\n </VvForm>\n </div>\n <div v-else class=\"p-sm\">\n <!-- One confirmation row across every tool card: a green\n check, the title in weight, the body quiet. The check is\n the outcome, so it alone carries the colour (DESIGN.md). -->\n <div class=\"flex items-center gap-sm\">\n <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n <div>\n <strong class=\"font-medium block text-word-1\">\n {{ $t('message.leadSubmittedTitle') }}\n </strong>\n <p class=\"text-word-3\">\n {{ $t('message.leadSubmittedMessage') }}\n </p>\n </div>\n </div>\n </div>\n </Transition>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PkToolShowContactForm-B2UzmoDw.js","names":["z.object","z.string","z.email","useForm","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_Transition","_withCtx","_Fragment","_renderList","_createCommentVNode","_isRef","_createBlock","_createTextVNode","PkStreamingMarkdown","_sfc_main","object","string","email","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createTextVNode","isRef","Fragment","createBlock","createBaseVNode","init_reactivity_esm_bundler","computed","init_runtime_dom_esm_bundler","Transition","createElementBlock","createVNode","renderList","useI18n","PkStreamingMarkdown_default","formatPhoneNumber","eo","Ce","VvButtonLocalized","useLocalizedString","useSafeLocalStorage","Se","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","PkToolShowContactForm_default","__emit","$t","props","__props","toolPart","input","prefilled","value","field","localSubmitted","LeadFormSchema","emit","newInput","submitted","isSubmitted","submitLead","data","privacyNotice","_component_VvIcon","_component_VvAlert","_component_VvButton","VvForm","formData","_cache","$event","VvFormField"],"sources":["../../../../packages/components/src/chat/PkToolShowContactForm.vue","../../../../packages/components/src/chat/PkToolShowContactForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { useForm } from '@volverjs/form-vue'\n import * as z from 'zod'\n import { useSafeLocalStorage, useLocalizedString } from 'composables'\n import type { LocalizedString } from 'models'\n import { formatPhoneNumber } from 'utils'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const { t: $t } = useI18n({ useScope: 'global' })\n\n const props = defineProps<{\n part: unknown\n submitted?: boolean\n loading?: boolean\n error?: string\n readonly?: boolean\n privacyPolicyNotice?: LocalizedString\n /*\n A conversation read back (the chat logs): the card is the record\n * of the form the agent showed, its prefilled values as text. Nothing\n * in the part says whether the visitor sent it, only the contacts do.\n /\n record?: boolean\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n type: string\n toolCallId: string\n input?: {\n name: string\n email: string\n phone?: string\n conversationContext?: Record<string, unknown>\n }\n }\n return part\n })\n\n const input = computed(() => toolPart.value.input)\n\n const prefilled = computed(() =>\n (\n [\n { name: 'name', label: $t('label.name') },\n { name: 'email', label: $t('label.email') },\n { name: 'phone', label: $t('label.phone') },\n ] as const\n )\n .map((field) => {\n const value = input.value?.[field.name]?.trim()\n return {\n ...field,\n // Written as the contacts page writes it\n value:\n field.name === 'phone' && value\n ? formatPhoneNumber(value) \|\| value\n : value,\n }\n })\n .filter((field) => field.value),\n )\n\n const localSubmitted = useSafeLocalStorage<boolean>(\n computed(\n () =>\n `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n ),\n false,\n )\n\n const LeadFormSchema = z.object({\n name: z.string().min(1).max(255).default(''),\n email: z.email().max(255).default(''),\n phone: z\n .string()\n .max(50)\n .regex(/^[+0-9\\s\\-.()]$/, $t('validation.invalidPhoneNumber'))\n .optional(),\n })\n\n const emit = defineEmits<{\n submit: [data: Record<string, unknown>]\n }>()\n\n const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n lazyLoad: true,\n })\n\n // Pre-populate form with input values\n watch(\n input,\n (newInput) => {\n formData.value = {\n name: newInput?.name \|\| '',\n email: newInput?.email \|\| '',\n phone: newInput?.phone \|\| '',\n }\n },\n { immediate: true },\n )\n\n watch(\n () => props.submitted,\n (submitted) => {\n if (submitted) {\n localSubmitted.value = true\n }\n },\n { immediate: true },\n )\n\n const isSubmitted = computed(() => {\n return props.submitted \|\| localSubmitted.value\n })\n\n const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n emit('submit', { ...data, metadata: input.value?.conversationContext })\n }\n\n const privacyNotice = useLocalizedString(\n () => props.privacyPolicyNotice,\n 'message.defaultPrivacyPolicyNotice',\n )\n</script>\n\n<template>\n <div\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n </div>\n\n <Transition mode=\"out-in\">\n <div v-if=\"record\" class=\"p-sm flex flex-col gap-sm text-14\">\n <p class=\"text-word-2\">\n {{\n prefilled.length\n ? $t('message.contactFormRecordPrefilled')\n : $t('message.contactFormRecord')\n }}\n </p>\n <dl\n v-if=\"prefilled.length\"\n class=\"flex flex-wrap gap-x-lg gap-y-sm\">\n <div\n v-for=\"field in prefilled\"\n :key=\"field.name\"\n class=\"flex flex-col gap-4 min-w-0\">\n <dt class=\"text-12 text-word-3\">{{ field.label }}</dt>\n <dd class=\"text-word-1 break-words\">\n {{ field.value }}\n </dd>\n </div>\n </dl>\n </div>\n <div v-else-if=\"!isSubmitted\" class=\"p-sm\">\n <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n <VvFormField\n name=\"name\"\n type=\"text\"\n :label=\"$t('label.name')\"\n :placeholder=\"$t('placeholder.name')\"\n icon=\"ri:user-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"email\"\n type=\"email\"\n :label=\"$t('label.email')\"\n :placeholder=\"$t('placeholder.email')\"\n icon=\"ri:mail-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"phone\"\n type=\"tel\"\n :label=\"$t('label.phone')\"\n :placeholder=\"$t('placeholder.phone')\"\n icon=\"ri:phone-line\"\n class=\"mb-md\"\n modifiers=\"compact\" />\n\n <!-- A send that failed says so: the reason reached the\n card and was never drawn -->\n <VvAlert v-if=\"error\" modifiers=\"danger\" class=\"mb-md\">\n {{ error }}\n </VvAlert>\n\n <div class=\"flex justify-between items-center gap-16 mt-xs\">\n <div\n class=\"text-smaller text-word-3 flex items-center gap-8\">\n <VvIcon\n name=\"ri:shield-check-line\"\n class=\"text-16 shrink-0\" />\n <PkStreamingMarkdown\n :markdown=\"privacyNotice\"\n class=\"wysiwyg\" />\n </div>\n <!-- The library's default button is the brand, and in\n the chat the brand is the agent's color, as on the\n rest of the card: `primary` drew it neutral dark -->\n <VvButton\n type=\"submit\"\n :loading\n :disabled=\"loading \|\| readonly\"\n icon-position=\"right\"\n class=\"shrink-0\"\n :label=\"$t('action.submit')\" />\n </div>\n </VvForm>\n </div>\n <div v-else class=\"p-sm\">\n <!-- One confirmation row across every tool card: a green\n check, the title in weight, the body quiet. The check is\n the outcome, so it alone carries the colour (DESIGN.md). -->\n <div class=\"flex items-center gap-sm\">\n <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n <div>\n <strong class=\"font-medium block text-word-1\">\n {{ $t('message.leadSubmittedTitle') }}\n </strong>\n <p class=\"text-word-3\">\n {{ $t('message.leadSubmittedMessage') }}\n </p>\n </div>\n </div>\n </div>\n </Transition>\n </div>\n</template>\n","<script setup lang=\"ts\">\n import { computed, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { useForm } from '@volverjs/form-vue'\n import * as z from 'zod'\n import { useSafeLocalStorage, useLocalizedString } from 'composables'\n import type { LocalizedString } from 'models'\n import { formatPhoneNumber } from 'utils'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const { t: $t } = useI18n({ useScope: 'global' })\n\n const props = defineProps<{\n part: unknown\n submitted?: boolean\n loading?: boolean\n error?: string\n readonly?: boolean\n privacyPolicyNotice?: LocalizedString\n /*\n A conversation read back (the chat logs): the card is the record\n * of the form the agent showed, its prefilled values as text. Nothing\n * in the part says whether the visitor sent it, only the contacts do.\n /\n record?: boolean\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n type: string\n toolCallId: string\n input?: {\n name: string\n email: string\n phone?: string\n conversationContext?: Record<string, unknown>\n }\n }\n return part\n })\n\n const input = computed(() => toolPart.value.input)\n\n const prefilled = computed(() =>\n (\n [\n { name: 'name', label: $t('label.name') },\n { name: 'email', label: $t('label.email') },\n { name: 'phone', label: $t('label.phone') },\n ] as const\n )\n .map((field) => {\n const value = input.value?.[field.name]?.trim()\n return {\n ...field,\n // Written as the contacts page writes it\n value:\n field.name === 'phone' && value\n ? formatPhoneNumber(value) \|\| value\n : value,\n }\n })\n .filter((field) => field.value),\n )\n\n const localSubmitted = useSafeLocalStorage<boolean>(\n computed(\n () =>\n `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n ),\n false,\n )\n\n const LeadFormSchema = z.object({\n name: z.string().min(1).max(255).default(''),\n email: z.email().max(255).default(''),\n phone: z\n .string()\n .max(50)\n .regex(/^[+0-9\\s\\-.()]$/, $t('validation.invalidPhoneNumber'))\n .optional(),\n })\n\n const emit = defineEmits<{\n submit: [data: Record<string, unknown>]\n }>()\n\n const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n lazyLoad: true,\n })\n\n // Pre-populate form with input values\n watch(\n input,\n (newInput) => {\n formData.value = {\n name: newInput?.name \|\| '',\n email: newInput?.email \|\| '',\n phone: newInput?.phone \|\| '',\n }\n },\n { immediate: true },\n )\n\n watch(\n () => props.submitted,\n (submitted) => {\n if (submitted) {\n localSubmitted.value = true\n }\n },\n { immediate: true },\n )\n\n const isSubmitted = computed(() => {\n return props.submitted \|\| localSubmitted.value\n })\n\n const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n emit('submit', { ...data, metadata: input.value?.conversationContext })\n }\n\n const privacyNotice = useLocalizedString(\n () => props.privacyPolicyNotice,\n 'message.defaultPrivacyPolicyNotice',\n )\n</script>\n\n<template>\n <div\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n </div>\n\n <Transition mode=\"out-in\">\n <div v-if=\"record\" class=\"p-sm flex flex-col gap-sm text-14\">\n <p class=\"text-word-2\">\n {{\n prefilled.length\n ? $t('message.contactFormRecordPrefilled')\n : $t('message.contactFormRecord')\n }}\n </p>\n <dl\n v-if=\"prefilled.length\"\n class=\"flex flex-wrap gap-x-lg gap-y-sm\">\n <div\n v-for=\"field in prefilled\"\n :key=\"field.name\"\n class=\"flex flex-col gap-4 min-w-0\">\n <dt class=\"text-12 text-word-3\">{{ field.label }}</dt>\n <dd class=\"text-word-1 break-words\">\n {{ field.value }}\n </dd>\n </div>\n </dl>\n </div>\n <div v-else-if=\"!isSubmitted\" class=\"p-sm\">\n <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n <VvFormField\n name=\"name\"\n type=\"text\"\n :label=\"$t('label.name')\"\n :placeholder=\"$t('placeholder.name')\"\n icon=\"ri:user-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"email\"\n type=\"email\"\n :label=\"$t('label.email')\"\n :placeholder=\"$t('placeholder.email')\"\n icon=\"ri:mail-line\"\n modifiers=\"compact\"\n class=\"mb-md\" />\n <VvFormField\n name=\"phone\"\n type=\"tel\"\n :label=\"$t('label.phone')\"\n :placeholder=\"$t('placeholder.phone')\"\n icon=\"ri:phone-line\"\n class=\"mb-md\"\n modifiers=\"compact\" />\n\n <!-- A send that failed says so: the reason reached the\n card and was never drawn -->\n <VvAlert v-if=\"error\" modifiers=\"danger\" class=\"mb-md\">\n {{ error }}\n </VvAlert>\n\n <div class=\"flex justify-between items-center gap-16 mt-xs\">\n <div\n class=\"text-smaller text-word-3 flex items-center gap-8\">\n <VvIcon\n name=\"ri:shield-check-line\"\n class=\"text-16 shrink-0\" />\n <PkStreamingMarkdown\n :markdown=\"privacyNotice\"\n class=\"wysiwyg\" />\n </div>\n <!-- The library's default button is the brand, and in\n the chat the brand is the agent's color, as on the\n rest of the card: `primary` drew it neutral dark -->\n <VvButton\n type=\"submit\"\n :loading\n :disabled=\"loading \|\| readonly\"\n icon-position=\"right\"\n class=\"shrink-0\"\n :label=\"$t('action.submit')\" />\n </div>\n </VvForm>\n </div>\n <div v-else class=\"p-sm\">\n <!-- One confirmation row across every tool card: a green\n check, the title in weight, the body quiet. The check is\n the outcome, so it alone carries the colour (DESIGN.md). -->\n <div class=\"flex items-center gap-sm\">\n <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n <div>\n <strong class=\"font-medium block text-word-1\">\n {{ $t('message.leadSubmittedTitle') }}\n </strong>\n <p class=\"text-word-3\">\n {{ $t('message.leadSubmittedMessage') }}\n </p>\n </div>\n </div>\n </div>\n </Transition>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/_chunks/{PkToolShowDiagram-WregKAJO.js → PkToolShowDiagram-iQRTxxLw.js} RENAMED Viewed

@@ -3,8 +3,8 @@ import { r as x } from "./vue-i18n-CooVjJjT.js";
 import "./src-CggZ5M7x.js";
 import { r as S } from "./text-BHCGblDQ.js";
 import { i as C } from "./dist-DxtbpUdI.js";
-import { a as w, t as T } from "./index.es-dTcgyeM4.js";
-import { t as E } from "./VvButtonLocalized-DV-zbH9b.js";
+import { a as w, t as T } from "./index.es-D7jsz1j2.js";
+import { t as E } from "./VvButtonLocalized-PfbIEwav.js";
 import { t as D } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { n as O } from "./useLightbox-3HiaRtzY.js";
 //#region ../../packages/components/src/PkSvgViewer.vue?vue&type=script&setup=true&lang.ts
@@ -241,4 +241,4 @@ var M = {
 //#endregion
 export { B as default };
-//# sourceMappingURL=PkToolShowDiagram-WregKAJO.js.map
+//# sourceMappingURL=PkToolShowDiagram-iQRTxxLw.js.map

package/dist/_chunks/{PkToolShowDiagram-WregKAJO.js.map → PkToolShowDiagram-iQRTxxLw.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkToolShowDiagram-WregKAJO.js","names":["_hoisted_1","_hoisted_2","__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle","_createVNode","_withCtx","_Transition","_unref","_createBlock","_sfc_main","_style_0","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_withCtx","_createBlock","_createCommentVNode","PkSvgViewer","_sfc_main","_style_0","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","normalizeStyle","onMounted","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createBlock","createBaseVNode","init_reactivity_esm_bundler","ref","init_runtime_dom_esm_bundler","Transition","normalizeClass","createVNode","useI18n","toSnakeCase","useClipboard","Qi","Ae","VvButtonLocalized","_plugin_vue_export_helper_default","useLightbox","_hoisted_1$1","_hoisted_2$1","PkSvgViewer_default","props","__props","$t","svgRef","galleryRef","scale","translateX","translateY","startX","startY","svgDataUrl","svgWidth","svgHeight","svgStyle","computed","zoomIn","zoomOut","reset","openLightbox","lightbox","isDragging","onMouseDown","onMouseMove","onMouseUp","serializeSvg","svg","updateSvgExport","serialized","viewBox","init","_component_VvButton","_component_VvButtonGroup","createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","DiagramType","\"Sequence\"","\"Class\"","\"State\"","\"ER\"","\"XYChart\"","\"Flowchart\"","\"Graph\"","PkToolShowDiagram_default","$te","toolPart","svgError","svgContent","diagramType","code","diagramTypeLabel","diagramTypeIcon","renderDiagram","theme","THEMES","renderMermaidSVG","downloadSvg","blob","url","anchor","copyCode","copy","_component_VvIcon","copied"],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, onMounted, computed, watch } from 'vue'\n import { useLightbox } from './composables/useLightbox'\n import { useI18n } from 'vue-i18n'\n\n const props = defineProps<{\n svg?: string\n title?: string\n }>()\n\n const { t: $t } = useI18n()\n\n const svgRef = ref<HTMLDivElement \| null>(null)\n const galleryRef = ref<HTMLElement>()\n\n const scale = ref(1)\n const translateX = ref(0)\n const translateY = ref(0)\n const startX = ref(0)\n const startY = ref(0)\n\n // PhotoSwipe integration\n const svgDataUrl = ref('')\n const svgWidth = ref(0)\n const svgHeight = ref(0)\n\n const { lightbox, init } = useLightbox({\n gallery: galleryRef,\n downloadable: true,\n openInNewTab: false,\n })\n\n const svgStyle = computed(() => ({\n transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n }))\n\n const zoomIn = () => {\n scale.value = Math.min(scale.value * 1.2, 10)\n }\n\n const zoomOut = () => {\n scale.value = Math.max(scale.value / 1.2, 0.1)\n }\n\n const reset = () => {\n scale.value = 1\n translateX.value = 0\n translateY.value = 0\n }\n\n const openLightbox = () => {\n if (svgDataUrl.value) {\n lightbox.value?.loadAndOpen(0)\n }\n }\n\n const isDragging = ref(false)\n\n // Pan logic\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n isDragging.value = true\n startX.value = e.clientX - translateX.value\n startY.value = e.clientY - translateY.value\n }\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.value) {\n return\n }\n translateX.value = e.clientX - startX.value\n translateY.value = e.clientY - startY.value\n }\n\n const onMouseUp = () => {\n isDragging.value = false\n }\n\n function serializeSvg(): string \| null {\n const svg = svgRef.value?.querySelector('svg')\n if (!svg) {\n return null\n }\n return new XMLSerializer().serializeToString(svg)\n }\n\n function updateSvgExport() {\n const svg = svgRef.value?.querySelector('svg')\n const serialized = serializeSvg()\n if (!svg \|\| !serialized) {\n return\n }\n\n const viewBox = svg.viewBox?.baseVal\n svgWidth.value =\n viewBox?.width \|\| svg.getBoundingClientRect().width \|\| 1200\n svgHeight.value =\n viewBox?.height \|\| svg.getBoundingClientRect().height \|\| 800\n svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n }\n\n watch(\n () => props.svg,\n () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n },\n )\n\n onMounted(async () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n await init()\n })\n</script>\n\n<template>\n <div\n class=\"pk-svg-viewer\"\n :class=\"{\n 'pk-svg-viewer--dragging': isDragging,\n }\">\n <!-- Hidden Gallery for Lightbox -->\n <div ref=\"galleryRef\" class=\"hidden\">\n <a\n v-if=\"svgDataUrl\"\n :href=\"svgDataUrl\"\n :data-pswp-src=\"svgDataUrl\"\n :data-pswp-width=\"svgWidth\"\n :data-pswp-height=\"svgHeight\"\n :title=\"title\" />\n </div>\n\n <!-- SVG Stage -->\n <div\n class=\"pk-svg-viewer__stage\"\n @mousedown=\"onMouseDown\"\n @mousemove=\"onMouseMove\"\n @mouseup=\"onMouseUp\"\n @mouseleave=\"onMouseUp\">\n <div\n ref=\"svgRef\"\n :style=\"svgStyle\"\n class=\"pk-svg-viewer__content\" />\n </div>\n\n <!-- Floating Toolbar -->\n <div class=\"pk-svg-viewer__toolbar\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"bg-surface-1 shadow-md overflow-hidden\">\n <transition name=\"fade\">\n <VvButton\n key=\"reset\"\n modifiers=\"action-small\"\n :disabled=\"\n scale === 1 && translateX === 0 && translateY === 0\n \"\n icon=\"ri:aspect-ratio-line\"\n :title=\"$t('action.reset')\"\n @click=\"reset\" />\n </transition>\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:zoom-out-line\"\n :title=\"$t('action.zoomOut')\"\n @click=\"zoomOut\" />\n <VvButton\n modifiers=\"action-small\"\n icon=\"ri:zoom-in-line\"\n :title=\"$t('action.zoomIn')\"\n @click=\"zoomIn\" />\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:fullscreen-line\"\n :title=\"$t('action.expand')\"\n @click=\"openLightbox\" />\n </VvButtonGroup>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-svg-viewer {\n position: relative;\n overflow: hidden;\n background-color: var(--color-surface-2);\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: transform 0.3s ease-out;\n transform-origin: center center;\n\n svg {\n max-width: 100%;\n max-height: 100%;\n height: auto;\n width: auto;\n }\n }\n\n &__toolbar {\n position: absolute;\n top: var(--spacing-8);\n right: var(--spacing-8);\n z-index: var(--z-dropdown);\n opacity: 0;\n transition: var(--transition-opacity);\n }\n\n &__stage {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n }\n\n &:hover {\n .pk-svg-viewer__toolbar {\n opacity: 1;\n }\n }\n\n &--dragging {\n .pk-svg-viewer__toolbar {\n opacity: 0.5 !important;\n pointer-events: none;\n\n & * {\n pointer-events: none;\n }\n }\n\n .pk-svg-viewer__content {\n cursor: grabbing !important;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { ref, onMounted, computed, watch } from 'vue'\n import { useLightbox } from './composables/useLightbox'\n import { useI18n } from 'vue-i18n'\n\n const props = defineProps<{\n svg?: string\n title?: string\n }>()\n\n const { t: $t } = useI18n()\n\n const svgRef = ref<HTMLDivElement \| null>(null)\n const galleryRef = ref<HTMLElement>()\n\n const scale = ref(1)\n const translateX = ref(0)\n const translateY = ref(0)\n const startX = ref(0)\n const startY = ref(0)\n\n // PhotoSwipe integration\n const svgDataUrl = ref('')\n const svgWidth = ref(0)\n const svgHeight = ref(0)\n\n const { lightbox, init } = useLightbox({\n gallery: galleryRef,\n downloadable: true,\n openInNewTab: false,\n })\n\n const svgStyle = computed(() => ({\n transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n }))\n\n const zoomIn = () => {\n scale.value = Math.min(scale.value * 1.2, 10)\n }\n\n const zoomOut = () => {\n scale.value = Math.max(scale.value / 1.2, 0.1)\n }\n\n const reset = () => {\n scale.value = 1\n translateX.value = 0\n translateY.value = 0\n }\n\n const openLightbox = () => {\n if (svgDataUrl.value) {\n lightbox.value?.loadAndOpen(0)\n }\n }\n\n const isDragging = ref(false)\n\n // Pan logic\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n isDragging.value = true\n startX.value = e.clientX - translateX.value\n startY.value = e.clientY - translateY.value\n }\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.value) {\n return\n }\n translateX.value = e.clientX - startX.value\n translateY.value = e.clientY - startY.value\n }\n\n const onMouseUp = () => {\n isDragging.value = false\n }\n\n function serializeSvg(): string \| null {\n const svg = svgRef.value?.querySelector('svg')\n if (!svg) {\n return null\n }\n return new XMLSerializer().serializeToString(svg)\n }\n\n function updateSvgExport() {\n const svg = svgRef.value?.querySelector('svg')\n const serialized = serializeSvg()\n if (!svg \|\| !serialized) {\n return\n }\n\n const viewBox = svg.viewBox?.baseVal\n svgWidth.value =\n viewBox?.width \|\| svg.getBoundingClientRect().width \|\| 1200\n svgHeight.value =\n viewBox?.height \|\| svg.getBoundingClientRect().height \|\| 800\n svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n }\n\n watch(\n () => props.svg,\n () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n },\n )\n\n onMounted(async () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n await init()\n })\n</script>\n\n<template>\n <div\n class=\"pk-svg-viewer\"\n :class=\"{\n 'pk-svg-viewer--dragging': isDragging,\n }\">\n <!-- Hidden Gallery for Lightbox -->\n <div ref=\"galleryRef\" class=\"hidden\">\n <a\n v-if=\"svgDataUrl\"\n :href=\"svgDataUrl\"\n :data-pswp-src=\"svgDataUrl\"\n :data-pswp-width=\"svgWidth\"\n :data-pswp-height=\"svgHeight\"\n :title=\"title\" />\n </div>\n\n <!-- SVG Stage -->\n <div\n class=\"pk-svg-viewer__stage\"\n @mousedown=\"onMouseDown\"\n @mousemove=\"onMouseMove\"\n @mouseup=\"onMouseUp\"\n @mouseleave=\"onMouseUp\">\n <div\n ref=\"svgRef\"\n :style=\"svgStyle\"\n class=\"pk-svg-viewer__content\" />\n </div>\n\n <!-- Floating Toolbar -->\n <div class=\"pk-svg-viewer__toolbar\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"bg-surface-1 shadow-md overflow-hidden\">\n <transition name=\"fade\">\n <VvButton\n key=\"reset\"\n modifiers=\"action-small\"\n :disabled=\"\n scale === 1 && translateX === 0 && translateY === 0\n \"\n icon=\"ri:aspect-ratio-line\"\n :title=\"$t('action.reset')\"\n @click=\"reset\" />\n </transition>\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:zoom-out-line\"\n :title=\"$t('action.zoomOut')\"\n @click=\"zoomOut\" />\n <VvButton\n modifiers=\"action-small\"\n icon=\"ri:zoom-in-line\"\n :title=\"$t('action.zoomIn')\"\n @click=\"zoomIn\" />\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:fullscreen-line\"\n :title=\"$t('action.expand')\"\n @click=\"openLightbox\" />\n </VvButtonGroup>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-svg-viewer {\n position: relative;\n overflow: hidden;\n background-color: var(--color-surface-2);\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: transform 0.3s ease-out;\n transform-origin: center center;\n\n svg {\n max-width: 100%;\n max-height: 100%;\n height: auto;\n width: auto;\n }\n }\n\n &__toolbar {\n position: absolute;\n top: var(--spacing-8);\n right: var(--spacing-8);\n z-index: var(--z-dropdown);\n opacity: 0;\n transition: var(--transition-opacity);\n }\n\n &__stage {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n }\n\n &:hover {\n .pk-svg-viewer__toolbar {\n opacity: 1;\n }\n }\n\n &--dragging {\n .pk-svg-viewer__toolbar {\n opacity: 0.5 !important;\n pointer-events: none;\n\n & * {\n pointer-events: none;\n }\n }\n\n .pk-svg-viewer__content {\n cursor: grabbing !important;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { ref, onMounted, computed, watch } from 'vue'\n import { useLightbox } from './composables/useLightbox'\n import { useI18n } from 'vue-i18n'\n\n const props = defineProps<{\n svg?: string\n title?: string\n }>()\n\n const { t: $t } = useI18n()\n\n const svgRef = ref<HTMLDivElement \| null>(null)\n const galleryRef = ref<HTMLElement>()\n\n const scale = ref(1)\n const translateX = ref(0)\n const translateY = ref(0)\n const startX = ref(0)\n const startY = ref(0)\n\n // PhotoSwipe integration\n const svgDataUrl = ref('')\n const svgWidth = ref(0)\n const svgHeight = ref(0)\n\n const { lightbox, init } = useLightbox({\n gallery: galleryRef,\n downloadable: true,\n openInNewTab: false,\n })\n\n const svgStyle = computed(() => ({\n transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n }))\n\n const zoomIn = () => {\n scale.value = Math.min(scale.value * 1.2, 10)\n }\n\n const zoomOut = () => {\n scale.value = Math.max(scale.value / 1.2, 0.1)\n }\n\n const reset = () => {\n scale.value = 1\n translateX.value = 0\n translateY.value = 0\n }\n\n const openLightbox = () => {\n if (svgDataUrl.value) {\n lightbox.value?.loadAndOpen(0)\n }\n }\n\n const isDragging = ref(false)\n\n // Pan logic\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n isDragging.value = true\n startX.value = e.clientX - translateX.value\n startY.value = e.clientY - translateY.value\n }\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.value) {\n return\n }\n translateX.value = e.clientX - startX.value\n translateY.value = e.clientY - startY.value\n }\n\n const onMouseUp = () => {\n isDragging.value = false\n }\n\n function serializeSvg(): string \| null {\n const svg = svgRef.value?.querySelector('svg')\n if (!svg) {\n return null\n }\n return new XMLSerializer().serializeToString(svg)\n }\n\n function updateSvgExport() {\n const svg = svgRef.value?.querySelector('svg')\n const serialized = serializeSvg()\n if (!svg \|\| !serialized) {\n return\n }\n\n const viewBox = svg.viewBox?.baseVal\n svgWidth.value =\n viewBox?.width \|\| svg.getBoundingClientRect().width \|\| 1200\n svgHeight.value =\n viewBox?.height \|\| svg.getBoundingClientRect().height \|\| 800\n svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n }\n\n watch(\n () => props.svg,\n () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n },\n )\n\n onMounted(async () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n await init()\n })\n</script>\n\n<template>\n <div\n class=\"pk-svg-viewer\"\n :class=\"{\n 'pk-svg-viewer--dragging': isDragging,\n }\">\n <!-- Hidden Gallery for Lightbox -->\n <div ref=\"galleryRef\" class=\"hidden\">\n <a\n v-if=\"svgDataUrl\"\n :href=\"svgDataUrl\"\n :data-pswp-src=\"svgDataUrl\"\n :data-pswp-width=\"svgWidth\"\n :data-pswp-height=\"svgHeight\"\n :title=\"title\" />\n </div>\n\n <!-- SVG Stage -->\n <div\n class=\"pk-svg-viewer__stage\"\n @mousedown=\"onMouseDown\"\n @mousemove=\"onMouseMove\"\n @mouseup=\"onMouseUp\"\n @mouseleave=\"onMouseUp\">\n <div\n ref=\"svgRef\"\n :style=\"svgStyle\"\n class=\"pk-svg-viewer__content\" />\n </div>\n\n <!-- Floating Toolbar -->\n <div class=\"pk-svg-viewer__toolbar\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"bg-surface-1 shadow-md overflow-hidden\">\n <transition name=\"fade\">\n <VvButton\n key=\"reset\"\n modifiers=\"action-small\"\n :disabled=\"\n scale === 1 && translateX === 0 && translateY === 0\n \"\n icon=\"ri:aspect-ratio-line\"\n :title=\"$t('action.reset')\"\n @click=\"reset\" />\n </transition>\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:zoom-out-line\"\n :title=\"$t('action.zoomOut')\"\n @click=\"zoomOut\" />\n <VvButton\n modifiers=\"action-small\"\n icon=\"ri:zoom-in-line\"\n :title=\"$t('action.zoomIn')\"\n @click=\"zoomIn\" />\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:fullscreen-line\"\n :title=\"$t('action.expand')\"\n @click=\"openLightbox\" />\n </VvButtonGroup>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-svg-viewer {\n position: relative;\n overflow: hidden;\n background-color: var(--color-surface-2);\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: transform 0.3s ease-out;\n transform-origin: center center;\n\n svg {\n max-width: 100%;\n max-height: 100%;\n height: auto;\n width: auto;\n }\n }\n\n &__toolbar {\n position: absolute;\n top: var(--spacing-8);\n right: var(--spacing-8);\n z-index: var(--z-dropdown);\n opacity: 0;\n transition: var(--transition-opacity);\n }\n\n &__stage {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n }\n\n &:hover {\n .pk-svg-viewer__toolbar {\n opacity: 1;\n }\n }\n\n &--dragging {\n .pk-svg-viewer__toolbar {\n opacity: 0.5 !important;\n pointer-events: none;\n\n & * {\n pointer-events: none;\n }\n }\n\n .pk-svg-viewer__content {\n cursor: grabbing !important;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, onMounted, ref, watch } from 'vue'\n import { useClipboard } from '@vueuse/core'\n import { useI18n } from 'vue-i18n'\n import { toSnakeCase } from 'utils'\n import PkSvgViewer from '../PkSvgViewer.vue'\n\n const props = defineProps<{\n part: unknown\n isDark?: boolean\n }>()\n\n const { t: $t, te: $te } = useI18n({\n useScope: 'global',\n })\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n code: string\n title?: string\n caption?: string\n }\n }\n return part\n })\n\n const svgError = ref(false)\n\n // Serialized SVG content\n const svgContent = ref('')\n\n enum DiagramType {\n Sequence = 'sequenceDiagram',\n Class = 'classDiagram',\n State = 'stateDiagram',\n ER = 'erDiagram',\n XYChart = 'xychart',\n Flowchart = 'flowchart',\n Graph = 'graph',\n }\n\n const diagramType = computed<DiagramType \| undefined>(() => {\n const code = toolPart.value.input?.code?.trimStart()\n if (!code) {\n return undefined\n }\n const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n switch (firstWord) {\n case 'sequenceDiagram':\n return DiagramType.Sequence\n case 'classDiagram':\n return DiagramType.Class\n case 'stateDiagram':\n return DiagramType.State\n case 'erDiagram':\n return DiagramType.ER\n case 'xychart-beta':\n return DiagramType.XYChart\n case 'flowchart':\n return DiagramType.Flowchart\n case 'graph':\n return DiagramType.Graph\n default:\n return undefined\n }\n })\n\n const diagramTypeLabel = computed(() => {\n if (!diagramType.value) {\n return ''\n }\n return $te(`diagram.${diagramType.value}`)\n ? $t(`diagram.${diagramType.value}`)\n : diagramType.value\n })\n\n const diagramTypeIcon = computed(() => {\n switch (diagramType.value) {\n case DiagramType.Sequence:\n return 'ri:timeline-view'\n case DiagramType.Class:\n return 'ri:organization-chart'\n case DiagramType.State:\n return 'ri:organization-chart'\n case DiagramType.ER:\n return 'ri:organization-chart'\n case DiagramType.XYChart:\n return 'ri:line-chart-line'\n case DiagramType.Flowchart:\n return 'ri:flow-chart'\n case DiagramType.Graph:\n return 'ri:flow-chart'\n default:\n return 'ri:flow-chart'\n }\n })\n\n async function renderDiagram() {\n const code = toolPart.value.input?.code\n if (!code) {\n return\n }\n\n svgError.value = false\n try {\n const { renderMermaidSVG, THEMES } =\n await import('beautiful-mermaid')\n const theme = props.isDark\n ? THEMES['github-dark']\n : THEMES['github-light']\n svgContent.value = renderMermaidSVG(code, theme)\n } catch {\n svgError.value = true\n }\n }\n\n watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n onMounted(async () => {\n await renderDiagram()\n })\n\n const downloadSvg = () => {\n if (!svgContent.value) {\n return\n }\n const blob = new Blob([svgContent.value], {\n type: 'image/svg+xml;charset=utf-8',\n })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = `${toSnakeCase(toolPart.value.input?.title \|\| 'diagram')}.svg`\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }\n\n const copyCode = () => {\n const code = toolPart.value.input?.code\n if (code) {\n copy(code)\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.code\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n <div class=\"flex flex-col items-start gap-2\">\n <strong class=\"font-bold\">{{\n diagramTypeLabel ?? $t('label.diagram')\n }}</strong>\n </div>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyCode\" />\n <VvButton\n v-if=\"svgContent\"\n modifiers=\"action-quiet-small\"\n icon=\"ri:download-line\"\n :label=\"$t('action.download')\"\n @click=\"downloadSvg\" />\n </VvButtonGroup>\n </div>\n <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n {{ $t('message.diagramRenderError') }}\n </div>\n <PkSvgViewer\n v-else-if=\"svgContent\"\n class=\"pk-tool-show-diagram__stage\"\n :svg=\"svgContent\"\n :title=\"toolPart.input?.title\" />\n <div\n v-else\n class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n </div>\n <div\n v-if=\"toolPart.input.caption\"\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n {{ toolPart.input.caption }}\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-tool-show-diagram {\n // Fixed stage height: the diagram renders lazily (async chunk +\n // dynamic mermaid import), so the loader and the rendered SVG must\n // occupy the same space or the chat scroll position jumps around.\n // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n &__stage {\n height: 384px;\n\n .pk-svg-viewer__stage,\n .pk-svg-viewer__content {\n height: 100%;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, onMounted, ref, watch } from 'vue'\n import { useClipboard } from '@vueuse/core'\n import { useI18n } from 'vue-i18n'\n import { toSnakeCase } from 'utils'\n import PkSvgViewer from '../PkSvgViewer.vue'\n\n const props = defineProps<{\n part: unknown\n isDark?: boolean\n }>()\n\n const { t: $t, te: $te } = useI18n({\n useScope: 'global',\n })\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n code: string\n title?: string\n caption?: string\n }\n }\n return part\n })\n\n const svgError = ref(false)\n\n // Serialized SVG content\n const svgContent = ref('')\n\n enum DiagramType {\n Sequence = 'sequenceDiagram',\n Class = 'classDiagram',\n State = 'stateDiagram',\n ER = 'erDiagram',\n XYChart = 'xychart',\n Flowchart = 'flowchart',\n Graph = 'graph',\n }\n\n const diagramType = computed<DiagramType \| undefined>(() => {\n const code = toolPart.value.input?.code?.trimStart()\n if (!code) {\n return undefined\n }\n const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n switch (firstWord) {\n case 'sequenceDiagram':\n return DiagramType.Sequence\n case 'classDiagram':\n return DiagramType.Class\n case 'stateDiagram':\n return DiagramType.State\n case 'erDiagram':\n return DiagramType.ER\n case 'xychart-beta':\n return DiagramType.XYChart\n case 'flowchart':\n return DiagramType.Flowchart\n case 'graph':\n return DiagramType.Graph\n default:\n return undefined\n }\n })\n\n const diagramTypeLabel = computed(() => {\n if (!diagramType.value) {\n return ''\n }\n return $te(`diagram.${diagramType.value}`)\n ? $t(`diagram.${diagramType.value}`)\n : diagramType.value\n })\n\n const diagramTypeIcon = computed(() => {\n switch (diagramType.value) {\n case DiagramType.Sequence:\n return 'ri:timeline-view'\n case DiagramType.Class:\n return 'ri:organization-chart'\n case DiagramType.State:\n return 'ri:organization-chart'\n case DiagramType.ER:\n return 'ri:organization-chart'\n case DiagramType.XYChart:\n return 'ri:line-chart-line'\n case DiagramType.Flowchart:\n return 'ri:flow-chart'\n case DiagramType.Graph:\n return 'ri:flow-chart'\n default:\n return 'ri:flow-chart'\n }\n })\n\n async function renderDiagram() {\n const code = toolPart.value.input?.code\n if (!code) {\n return\n }\n\n svgError.value = false\n try {\n const { renderMermaidSVG, THEMES } =\n await import('beautiful-mermaid')\n const theme = props.isDark\n ? THEMES['github-dark']\n : THEMES['github-light']\n svgContent.value = renderMermaidSVG(code, theme)\n } catch {\n svgError.value = true\n }\n }\n\n watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n onMounted(async () => {\n await renderDiagram()\n })\n\n const downloadSvg = () => {\n if (!svgContent.value) {\n return\n }\n const blob = new Blob([svgContent.value], {\n type: 'image/svg+xml;charset=utf-8',\n })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = `${toSnakeCase(toolPart.value.input?.title \|\| 'diagram')}.svg`\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }\n\n const copyCode = () => {\n const code = toolPart.value.input?.code\n if (code) {\n copy(code)\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.code\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n <div class=\"flex flex-col items-start gap-2\">\n <strong class=\"font-bold\">{{\n diagramTypeLabel ?? $t('label.diagram')\n }}</strong>\n </div>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyCode\" />\n <VvButton\n v-if=\"svgContent\"\n modifiers=\"action-quiet-small\"\n icon=\"ri:download-line\"\n :label=\"$t('action.download')\"\n @click=\"downloadSvg\" />\n </VvButtonGroup>\n </div>\n <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n {{ $t('message.diagramRenderError') }}\n </div>\n <PkSvgViewer\n v-else-if=\"svgContent\"\n class=\"pk-tool-show-diagram__stage\"\n :svg=\"svgContent\"\n :title=\"toolPart.input?.title\" />\n <div\n v-else\n class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n </div>\n <div\n v-if=\"toolPart.input.caption\"\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n {{ toolPart.input.caption }}\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-tool-show-diagram {\n // Fixed stage height: the diagram renders lazily (async chunk +\n // dynamic mermaid import), so the loader and the rendered SVG must\n // occupy the same space or the chat scroll position jumps around.\n // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n &__stage {\n height: 384px;\n\n .pk-svg-viewer__stage,\n .pk-svg-viewer__content {\n height: 100%;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, onMounted, ref, watch } from 'vue'\n import { useClipboard } from '@vueuse/core'\n import { useI18n } from 'vue-i18n'\n import { toSnakeCase } from 'utils'\n import PkSvgViewer from '../PkSvgViewer.vue'\n\n const props = defineProps<{\n part: unknown\n isDark?: boolean\n }>()\n\n const { t: $t, te: $te } = useI18n({\n useScope: 'global',\n })\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n code: string\n title?: string\n caption?: string\n }\n }\n return part\n })\n\n const svgError = ref(false)\n\n // Serialized SVG content\n const svgContent = ref('')\n\n enum DiagramType {\n Sequence = 'sequenceDiagram',\n Class = 'classDiagram',\n State = 'stateDiagram',\n ER = 'erDiagram',\n XYChart = 'xychart',\n Flowchart = 'flowchart',\n Graph = 'graph',\n }\n\n const diagramType = computed<DiagramType \| undefined>(() => {\n const code = toolPart.value.input?.code?.trimStart()\n if (!code) {\n return undefined\n }\n const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n switch (firstWord) {\n case 'sequenceDiagram':\n return DiagramType.Sequence\n case 'classDiagram':\n return DiagramType.Class\n case 'stateDiagram':\n return DiagramType.State\n case 'erDiagram':\n return DiagramType.ER\n case 'xychart-beta':\n return DiagramType.XYChart\n case 'flowchart':\n return DiagramType.Flowchart\n case 'graph':\n return DiagramType.Graph\n default:\n return undefined\n }\n })\n\n const diagramTypeLabel = computed(() => {\n if (!diagramType.value) {\n return ''\n }\n return $te(`diagram.${diagramType.value}`)\n ? $t(`diagram.${diagramType.value}`)\n : diagramType.value\n })\n\n const diagramTypeIcon = computed(() => {\n switch (diagramType.value) {\n case DiagramType.Sequence:\n return 'ri:timeline-view'\n case DiagramType.Class:\n return 'ri:organization-chart'\n case DiagramType.State:\n return 'ri:organization-chart'\n case DiagramType.ER:\n return 'ri:organization-chart'\n case DiagramType.XYChart:\n return 'ri:line-chart-line'\n case DiagramType.Flowchart:\n return 'ri:flow-chart'\n case DiagramType.Graph:\n return 'ri:flow-chart'\n default:\n return 'ri:flow-chart'\n }\n })\n\n async function renderDiagram() {\n const code = toolPart.value.input?.code\n if (!code) {\n return\n }\n\n svgError.value = false\n try {\n const { renderMermaidSVG, THEMES } =\n await import('beautiful-mermaid')\n const theme = props.isDark\n ? THEMES['github-dark']\n : THEMES['github-light']\n svgContent.value = renderMermaidSVG(code, theme)\n } catch {\n svgError.value = true\n }\n }\n\n watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n onMounted(async () => {\n await renderDiagram()\n })\n\n const downloadSvg = () => {\n if (!svgContent.value) {\n return\n }\n const blob = new Blob([svgContent.value], {\n type: 'image/svg+xml;charset=utf-8',\n })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = `${toSnakeCase(toolPart.value.input?.title \|\| 'diagram')}.svg`\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }\n\n const copyCode = () => {\n const code = toolPart.value.input?.code\n if (code) {\n copy(code)\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.code\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n <div class=\"flex flex-col items-start gap-2\">\n <strong class=\"font-bold\">{{\n diagramTypeLabel ?? $t('label.diagram')\n }}</strong>\n </div>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyCode\" />\n <VvButton\n v-if=\"svgContent\"\n modifiers=\"action-quiet-small\"\n icon=\"ri:download-line\"\n :label=\"$t('action.download')\"\n @click=\"downloadSvg\" />\n </VvButtonGroup>\n </div>\n <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n {{ $t('message.diagramRenderError') }}\n </div>\n <PkSvgViewer\n v-else-if=\"svgContent\"\n class=\"pk-tool-show-diagram__stage\"\n :svg=\"svgContent\"\n :title=\"toolPart.input?.title\" />\n <div\n v-else\n class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n </div>\n <div\n v-if=\"toolPart.input.caption\"\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n {{ toolPart.input.caption }}\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-tool-show-diagram {\n // Fixed stage height: the diagram renders lazily (async chunk +\n // dynamic mermaid import), so the loader and the rendered SVG must\n // occupy the same space or the chat scroll position jumps around.\n // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n &__stage {\n height: 384px;\n\n .pk-svg-viewer__stage,\n .pk-svg-viewer__content {\n height: 100%;\n }\n }\n }\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PkToolShowDiagram-iQRTxxLw.js","names":["_hoisted_1","_hoisted_2","__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle","_createVNode","_withCtx","_Transition","_unref","_createBlock","_sfc_main","_style_0","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_withCtx","_createBlock","_createCommentVNode","PkSvgViewer","_sfc_main","_style_0","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","normalizeStyle","onMounted","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createBlock","createBaseVNode","init_reactivity_esm_bundler","ref","init_runtime_dom_esm_bundler","Transition","normalizeClass","createVNode","useI18n","toSnakeCase","useClipboard","au","Ce","VvButtonLocalized","_plugin_vue_export_helper_default","useLightbox","_hoisted_1$1","_hoisted_2$1","PkSvgViewer_default","props","__props","$t","svgRef","galleryRef","scale","translateX","translateY","startX","startY","svgDataUrl","svgWidth","svgHeight","svgStyle","computed","zoomIn","zoomOut","reset","openLightbox","lightbox","isDragging","onMouseDown","onMouseMove","onMouseUp","serializeSvg","svg","updateSvgExport","serialized","viewBox","init","_component_VvButton","_component_VvButtonGroup","createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","DiagramType","\"Sequence\"","\"Class\"","\"State\"","\"ER\"","\"XYChart\"","\"Flowchart\"","\"Graph\"","PkToolShowDiagram_default","$te","toolPart","svgError","svgContent","diagramType","code","diagramTypeLabel","diagramTypeIcon","renderDiagram","theme","THEMES","renderMermaidSVG","downloadSvg","blob","url","anchor","copyCode","copy","_component_VvIcon","copied"],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, onMounted, computed, watch } from 'vue'\n import { useLightbox } from './composables/useLightbox'\n import { useI18n } from 'vue-i18n'\n\n const props = defineProps<{\n svg?: string\n title?: string\n }>()\n\n const { t: $t } = useI18n()\n\n const svgRef = ref<HTMLDivElement \| null>(null)\n const galleryRef = ref<HTMLElement>()\n\n const scale = ref(1)\n const translateX = ref(0)\n const translateY = ref(0)\n const startX = ref(0)\n const startY = ref(0)\n\n // PhotoSwipe integration\n const svgDataUrl = ref('')\n const svgWidth = ref(0)\n const svgHeight = ref(0)\n\n const { lightbox, init } = useLightbox({\n gallery: galleryRef,\n downloadable: true,\n openInNewTab: false,\n })\n\n const svgStyle = computed(() => ({\n transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n }))\n\n const zoomIn = () => {\n scale.value = Math.min(scale.value * 1.2, 10)\n }\n\n const zoomOut = () => {\n scale.value = Math.max(scale.value / 1.2, 0.1)\n }\n\n const reset = () => {\n scale.value = 1\n translateX.value = 0\n translateY.value = 0\n }\n\n const openLightbox = () => {\n if (svgDataUrl.value) {\n lightbox.value?.loadAndOpen(0)\n }\n }\n\n const isDragging = ref(false)\n\n // Pan logic\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n isDragging.value = true\n startX.value = e.clientX - translateX.value\n startY.value = e.clientY - translateY.value\n }\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.value) {\n return\n }\n translateX.value = e.clientX - startX.value\n translateY.value = e.clientY - startY.value\n }\n\n const onMouseUp = () => {\n isDragging.value = false\n }\n\n function serializeSvg(): string \| null {\n const svg = svgRef.value?.querySelector('svg')\n if (!svg) {\n return null\n }\n return new XMLSerializer().serializeToString(svg)\n }\n\n function updateSvgExport() {\n const svg = svgRef.value?.querySelector('svg')\n const serialized = serializeSvg()\n if (!svg \|\| !serialized) {\n return\n }\n\n const viewBox = svg.viewBox?.baseVal\n svgWidth.value =\n viewBox?.width \|\| svg.getBoundingClientRect().width \|\| 1200\n svgHeight.value =\n viewBox?.height \|\| svg.getBoundingClientRect().height \|\| 800\n svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n }\n\n watch(\n () => props.svg,\n () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n },\n )\n\n onMounted(async () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n await init()\n })\n</script>\n\n<template>\n <div\n class=\"pk-svg-viewer\"\n :class=\"{\n 'pk-svg-viewer--dragging': isDragging,\n }\">\n <!-- Hidden Gallery for Lightbox -->\n <div ref=\"galleryRef\" class=\"hidden\">\n <a\n v-if=\"svgDataUrl\"\n :href=\"svgDataUrl\"\n :data-pswp-src=\"svgDataUrl\"\n :data-pswp-width=\"svgWidth\"\n :data-pswp-height=\"svgHeight\"\n :title=\"title\" />\n </div>\n\n <!-- SVG Stage -->\n <div\n class=\"pk-svg-viewer__stage\"\n @mousedown=\"onMouseDown\"\n @mousemove=\"onMouseMove\"\n @mouseup=\"onMouseUp\"\n @mouseleave=\"onMouseUp\">\n <div\n ref=\"svgRef\"\n :style=\"svgStyle\"\n class=\"pk-svg-viewer__content\" />\n </div>\n\n <!-- Floating Toolbar -->\n <div class=\"pk-svg-viewer__toolbar\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"bg-surface-1 shadow-md overflow-hidden\">\n <transition name=\"fade\">\n <VvButton\n key=\"reset\"\n modifiers=\"action-small\"\n :disabled=\"\n scale === 1 && translateX === 0 && translateY === 0\n \"\n icon=\"ri:aspect-ratio-line\"\n :title=\"$t('action.reset')\"\n @click=\"reset\" />\n </transition>\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:zoom-out-line\"\n :title=\"$t('action.zoomOut')\"\n @click=\"zoomOut\" />\n <VvButton\n modifiers=\"action-small\"\n icon=\"ri:zoom-in-line\"\n :title=\"$t('action.zoomIn')\"\n @click=\"zoomIn\" />\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:fullscreen-line\"\n :title=\"$t('action.expand')\"\n @click=\"openLightbox\" />\n </VvButtonGroup>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-svg-viewer {\n position: relative;\n overflow: hidden;\n background-color: var(--color-surface-2);\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: transform 0.3s ease-out;\n transform-origin: center center;\n\n svg {\n max-width: 100%;\n max-height: 100%;\n height: auto;\n width: auto;\n }\n }\n\n &__toolbar {\n position: absolute;\n top: var(--spacing-8);\n right: var(--spacing-8);\n z-index: var(--z-dropdown);\n opacity: 0;\n transition: var(--transition-opacity);\n }\n\n &__stage {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n }\n\n &:hover {\n .pk-svg-viewer__toolbar {\n opacity: 1;\n }\n }\n\n &--dragging {\n .pk-svg-viewer__toolbar {\n opacity: 0.5 !important;\n pointer-events: none;\n\n & * {\n pointer-events: none;\n }\n }\n\n .pk-svg-viewer__content {\n cursor: grabbing !important;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { ref, onMounted, computed, watch } from 'vue'\n import { useLightbox } from './composables/useLightbox'\n import { useI18n } from 'vue-i18n'\n\n const props = defineProps<{\n svg?: string\n title?: string\n }>()\n\n const { t: $t } = useI18n()\n\n const svgRef = ref<HTMLDivElement \| null>(null)\n const galleryRef = ref<HTMLElement>()\n\n const scale = ref(1)\n const translateX = ref(0)\n const translateY = ref(0)\n const startX = ref(0)\n const startY = ref(0)\n\n // PhotoSwipe integration\n const svgDataUrl = ref('')\n const svgWidth = ref(0)\n const svgHeight = ref(0)\n\n const { lightbox, init } = useLightbox({\n gallery: galleryRef,\n downloadable: true,\n openInNewTab: false,\n })\n\n const svgStyle = computed(() => ({\n transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n }))\n\n const zoomIn = () => {\n scale.value = Math.min(scale.value * 1.2, 10)\n }\n\n const zoomOut = () => {\n scale.value = Math.max(scale.value / 1.2, 0.1)\n }\n\n const reset = () => {\n scale.value = 1\n translateX.value = 0\n translateY.value = 0\n }\n\n const openLightbox = () => {\n if (svgDataUrl.value) {\n lightbox.value?.loadAndOpen(0)\n }\n }\n\n const isDragging = ref(false)\n\n // Pan logic\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n isDragging.value = true\n startX.value = e.clientX - translateX.value\n startY.value = e.clientY - translateY.value\n }\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.value) {\n return\n }\n translateX.value = e.clientX - startX.value\n translateY.value = e.clientY - startY.value\n }\n\n const onMouseUp = () => {\n isDragging.value = false\n }\n\n function serializeSvg(): string \| null {\n const svg = svgRef.value?.querySelector('svg')\n if (!svg) {\n return null\n }\n return new XMLSerializer().serializeToString(svg)\n }\n\n function updateSvgExport() {\n const svg = svgRef.value?.querySelector('svg')\n const serialized = serializeSvg()\n if (!svg \|\| !serialized) {\n return\n }\n\n const viewBox = svg.viewBox?.baseVal\n svgWidth.value =\n viewBox?.width \|\| svg.getBoundingClientRect().width \|\| 1200\n svgHeight.value =\n viewBox?.height \|\| svg.getBoundingClientRect().height \|\| 800\n svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n }\n\n watch(\n () => props.svg,\n () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n },\n )\n\n onMounted(async () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n await init()\n })\n</script>\n\n<template>\n <div\n class=\"pk-svg-viewer\"\n :class=\"{\n 'pk-svg-viewer--dragging': isDragging,\n }\">\n <!-- Hidden Gallery for Lightbox -->\n <div ref=\"galleryRef\" class=\"hidden\">\n <a\n v-if=\"svgDataUrl\"\n :href=\"svgDataUrl\"\n :data-pswp-src=\"svgDataUrl\"\n :data-pswp-width=\"svgWidth\"\n :data-pswp-height=\"svgHeight\"\n :title=\"title\" />\n </div>\n\n <!-- SVG Stage -->\n <div\n class=\"pk-svg-viewer__stage\"\n @mousedown=\"onMouseDown\"\n @mousemove=\"onMouseMove\"\n @mouseup=\"onMouseUp\"\n @mouseleave=\"onMouseUp\">\n <div\n ref=\"svgRef\"\n :style=\"svgStyle\"\n class=\"pk-svg-viewer__content\" />\n </div>\n\n <!-- Floating Toolbar -->\n <div class=\"pk-svg-viewer__toolbar\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"bg-surface-1 shadow-md overflow-hidden\">\n <transition name=\"fade\">\n <VvButton\n key=\"reset\"\n modifiers=\"action-small\"\n :disabled=\"\n scale === 1 && translateX === 0 && translateY === 0\n \"\n icon=\"ri:aspect-ratio-line\"\n :title=\"$t('action.reset')\"\n @click=\"reset\" />\n </transition>\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:zoom-out-line\"\n :title=\"$t('action.zoomOut')\"\n @click=\"zoomOut\" />\n <VvButton\n modifiers=\"action-small\"\n icon=\"ri:zoom-in-line\"\n :title=\"$t('action.zoomIn')\"\n @click=\"zoomIn\" />\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:fullscreen-line\"\n :title=\"$t('action.expand')\"\n @click=\"openLightbox\" />\n </VvButtonGroup>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-svg-viewer {\n position: relative;\n overflow: hidden;\n background-color: var(--color-surface-2);\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: transform 0.3s ease-out;\n transform-origin: center center;\n\n svg {\n max-width: 100%;\n max-height: 100%;\n height: auto;\n width: auto;\n }\n }\n\n &__toolbar {\n position: absolute;\n top: var(--spacing-8);\n right: var(--spacing-8);\n z-index: var(--z-dropdown);\n opacity: 0;\n transition: var(--transition-opacity);\n }\n\n &__stage {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n }\n\n &:hover {\n .pk-svg-viewer__toolbar {\n opacity: 1;\n }\n }\n\n &--dragging {\n .pk-svg-viewer__toolbar {\n opacity: 0.5 !important;\n pointer-events: none;\n\n & * {\n pointer-events: none;\n }\n }\n\n .pk-svg-viewer__content {\n cursor: grabbing !important;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { ref, onMounted, computed, watch } from 'vue'\n import { useLightbox } from './composables/useLightbox'\n import { useI18n } from 'vue-i18n'\n\n const props = defineProps<{\n svg?: string\n title?: string\n }>()\n\n const { t: $t } = useI18n()\n\n const svgRef = ref<HTMLDivElement \| null>(null)\n const galleryRef = ref<HTMLElement>()\n\n const scale = ref(1)\n const translateX = ref(0)\n const translateY = ref(0)\n const startX = ref(0)\n const startY = ref(0)\n\n // PhotoSwipe integration\n const svgDataUrl = ref('')\n const svgWidth = ref(0)\n const svgHeight = ref(0)\n\n const { lightbox, init } = useLightbox({\n gallery: galleryRef,\n downloadable: true,\n openInNewTab: false,\n })\n\n const svgStyle = computed(() => ({\n transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n }))\n\n const zoomIn = () => {\n scale.value = Math.min(scale.value * 1.2, 10)\n }\n\n const zoomOut = () => {\n scale.value = Math.max(scale.value / 1.2, 0.1)\n }\n\n const reset = () => {\n scale.value = 1\n translateX.value = 0\n translateY.value = 0\n }\n\n const openLightbox = () => {\n if (svgDataUrl.value) {\n lightbox.value?.loadAndOpen(0)\n }\n }\n\n const isDragging = ref(false)\n\n // Pan logic\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n isDragging.value = true\n startX.value = e.clientX - translateX.value\n startY.value = e.clientY - translateY.value\n }\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.value) {\n return\n }\n translateX.value = e.clientX - startX.value\n translateY.value = e.clientY - startY.value\n }\n\n const onMouseUp = () => {\n isDragging.value = false\n }\n\n function serializeSvg(): string \| null {\n const svg = svgRef.value?.querySelector('svg')\n if (!svg) {\n return null\n }\n return new XMLSerializer().serializeToString(svg)\n }\n\n function updateSvgExport() {\n const svg = svgRef.value?.querySelector('svg')\n const serialized = serializeSvg()\n if (!svg \|\| !serialized) {\n return\n }\n\n const viewBox = svg.viewBox?.baseVal\n svgWidth.value =\n viewBox?.width \|\| svg.getBoundingClientRect().width \|\| 1200\n svgHeight.value =\n viewBox?.height \|\| svg.getBoundingClientRect().height \|\| 800\n svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n }\n\n watch(\n () => props.svg,\n () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n },\n )\n\n onMounted(async () => {\n if (props.svg && svgRef.value) {\n svgRef.value.innerHTML = props.svg\n updateSvgExport()\n }\n await init()\n })\n</script>\n\n<template>\n <div\n class=\"pk-svg-viewer\"\n :class=\"{\n 'pk-svg-viewer--dragging': isDragging,\n }\">\n <!-- Hidden Gallery for Lightbox -->\n <div ref=\"galleryRef\" class=\"hidden\">\n <a\n v-if=\"svgDataUrl\"\n :href=\"svgDataUrl\"\n :data-pswp-src=\"svgDataUrl\"\n :data-pswp-width=\"svgWidth\"\n :data-pswp-height=\"svgHeight\"\n :title=\"title\" />\n </div>\n\n <!-- SVG Stage -->\n <div\n class=\"pk-svg-viewer__stage\"\n @mousedown=\"onMouseDown\"\n @mousemove=\"onMouseMove\"\n @mouseup=\"onMouseUp\"\n @mouseleave=\"onMouseUp\">\n <div\n ref=\"svgRef\"\n :style=\"svgStyle\"\n class=\"pk-svg-viewer__content\" />\n </div>\n\n <!-- Floating Toolbar -->\n <div class=\"pk-svg-viewer__toolbar\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"bg-surface-1 shadow-md overflow-hidden\">\n <transition name=\"fade\">\n <VvButton\n key=\"reset\"\n modifiers=\"action-small\"\n :disabled=\"\n scale === 1 && translateX === 0 && translateY === 0\n \"\n icon=\"ri:aspect-ratio-line\"\n :title=\"$t('action.reset')\"\n @click=\"reset\" />\n </transition>\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:zoom-out-line\"\n :title=\"$t('action.zoomOut')\"\n @click=\"zoomOut\" />\n <VvButton\n modifiers=\"action-small\"\n icon=\"ri:zoom-in-line\"\n :title=\"$t('action.zoomIn')\"\n @click=\"zoomIn\" />\n <VvButton\n v-if=\"svgDataUrl\"\n modifiers=\"action-small\"\n icon=\"ri:fullscreen-line\"\n :title=\"$t('action.expand')\"\n @click=\"openLightbox\" />\n </VvButtonGroup>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-svg-viewer {\n position: relative;\n overflow: hidden;\n background-color: var(--color-surface-2);\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: transform 0.3s ease-out;\n transform-origin: center center;\n\n svg {\n max-width: 100%;\n max-height: 100%;\n height: auto;\n width: auto;\n }\n }\n\n &__toolbar {\n position: absolute;\n top: var(--spacing-8);\n right: var(--spacing-8);\n z-index: var(--z-dropdown);\n opacity: 0;\n transition: var(--transition-opacity);\n }\n\n &__stage {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n }\n\n &:hover {\n .pk-svg-viewer__toolbar {\n opacity: 1;\n }\n }\n\n &--dragging {\n .pk-svg-viewer__toolbar {\n opacity: 0.5 !important;\n pointer-events: none;\n\n & * {\n pointer-events: none;\n }\n }\n\n .pk-svg-viewer__content {\n cursor: grabbing !important;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, onMounted, ref, watch } from 'vue'\n import { useClipboard } from '@vueuse/core'\n import { useI18n } from 'vue-i18n'\n import { toSnakeCase } from 'utils'\n import PkSvgViewer from '../PkSvgViewer.vue'\n\n const props = defineProps<{\n part: unknown\n isDark?: boolean\n }>()\n\n const { t: $t, te: $te } = useI18n({\n useScope: 'global',\n })\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n code: string\n title?: string\n caption?: string\n }\n }\n return part\n })\n\n const svgError = ref(false)\n\n // Serialized SVG content\n const svgContent = ref('')\n\n enum DiagramType {\n Sequence = 'sequenceDiagram',\n Class = 'classDiagram',\n State = 'stateDiagram',\n ER = 'erDiagram',\n XYChart = 'xychart',\n Flowchart = 'flowchart',\n Graph = 'graph',\n }\n\n const diagramType = computed<DiagramType \| undefined>(() => {\n const code = toolPart.value.input?.code?.trimStart()\n if (!code) {\n return undefined\n }\n const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n switch (firstWord) {\n case 'sequenceDiagram':\n return DiagramType.Sequence\n case 'classDiagram':\n return DiagramType.Class\n case 'stateDiagram':\n return DiagramType.State\n case 'erDiagram':\n return DiagramType.ER\n case 'xychart-beta':\n return DiagramType.XYChart\n case 'flowchart':\n return DiagramType.Flowchart\n case 'graph':\n return DiagramType.Graph\n default:\n return undefined\n }\n })\n\n const diagramTypeLabel = computed(() => {\n if (!diagramType.value) {\n return ''\n }\n return $te(`diagram.${diagramType.value}`)\n ? $t(`diagram.${diagramType.value}`)\n : diagramType.value\n })\n\n const diagramTypeIcon = computed(() => {\n switch (diagramType.value) {\n case DiagramType.Sequence:\n return 'ri:timeline-view'\n case DiagramType.Class:\n return 'ri:organization-chart'\n case DiagramType.State:\n return 'ri:organization-chart'\n case DiagramType.ER:\n return 'ri:organization-chart'\n case DiagramType.XYChart:\n return 'ri:line-chart-line'\n case DiagramType.Flowchart:\n return 'ri:flow-chart'\n case DiagramType.Graph:\n return 'ri:flow-chart'\n default:\n return 'ri:flow-chart'\n }\n })\n\n async function renderDiagram() {\n const code = toolPart.value.input?.code\n if (!code) {\n return\n }\n\n svgError.value = false\n try {\n const { renderMermaidSVG, THEMES } =\n await import('beautiful-mermaid')\n const theme = props.isDark\n ? THEMES['github-dark']\n : THEMES['github-light']\n svgContent.value = renderMermaidSVG(code, theme)\n } catch {\n svgError.value = true\n }\n }\n\n watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n onMounted(async () => {\n await renderDiagram()\n })\n\n const downloadSvg = () => {\n if (!svgContent.value) {\n return\n }\n const blob = new Blob([svgContent.value], {\n type: 'image/svg+xml;charset=utf-8',\n })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = `${toSnakeCase(toolPart.value.input?.title \|\| 'diagram')}.svg`\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }\n\n const copyCode = () => {\n const code = toolPart.value.input?.code\n if (code) {\n copy(code)\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.code\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n <div class=\"flex flex-col items-start gap-2\">\n <strong class=\"font-bold\">{{\n diagramTypeLabel ?? $t('label.diagram')\n }}</strong>\n </div>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyCode\" />\n <VvButton\n v-if=\"svgContent\"\n modifiers=\"action-quiet-small\"\n icon=\"ri:download-line\"\n :label=\"$t('action.download')\"\n @click=\"downloadSvg\" />\n </VvButtonGroup>\n </div>\n <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n {{ $t('message.diagramRenderError') }}\n </div>\n <PkSvgViewer\n v-else-if=\"svgContent\"\n class=\"pk-tool-show-diagram__stage\"\n :svg=\"svgContent\"\n :title=\"toolPart.input?.title\" />\n <div\n v-else\n class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n </div>\n <div\n v-if=\"toolPart.input.caption\"\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n {{ toolPart.input.caption }}\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-tool-show-diagram {\n // Fixed stage height: the diagram renders lazily (async chunk +\n // dynamic mermaid import), so the loader and the rendered SVG must\n // occupy the same space or the chat scroll position jumps around.\n // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n &__stage {\n height: 384px;\n\n .pk-svg-viewer__stage,\n .pk-svg-viewer__content {\n height: 100%;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, onMounted, ref, watch } from 'vue'\n import { useClipboard } from '@vueuse/core'\n import { useI18n } from 'vue-i18n'\n import { toSnakeCase } from 'utils'\n import PkSvgViewer from '../PkSvgViewer.vue'\n\n const props = defineProps<{\n part: unknown\n isDark?: boolean\n }>()\n\n const { t: $t, te: $te } = useI18n({\n useScope: 'global',\n })\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n code: string\n title?: string\n caption?: string\n }\n }\n return part\n })\n\n const svgError = ref(false)\n\n // Serialized SVG content\n const svgContent = ref('')\n\n enum DiagramType {\n Sequence = 'sequenceDiagram',\n Class = 'classDiagram',\n State = 'stateDiagram',\n ER = 'erDiagram',\n XYChart = 'xychart',\n Flowchart = 'flowchart',\n Graph = 'graph',\n }\n\n const diagramType = computed<DiagramType \| undefined>(() => {\n const code = toolPart.value.input?.code?.trimStart()\n if (!code) {\n return undefined\n }\n const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n switch (firstWord) {\n case 'sequenceDiagram':\n return DiagramType.Sequence\n case 'classDiagram':\n return DiagramType.Class\n case 'stateDiagram':\n return DiagramType.State\n case 'erDiagram':\n return DiagramType.ER\n case 'xychart-beta':\n return DiagramType.XYChart\n case 'flowchart':\n return DiagramType.Flowchart\n case 'graph':\n return DiagramType.Graph\n default:\n return undefined\n }\n })\n\n const diagramTypeLabel = computed(() => {\n if (!diagramType.value) {\n return ''\n }\n return $te(`diagram.${diagramType.value}`)\n ? $t(`diagram.${diagramType.value}`)\n : diagramType.value\n })\n\n const diagramTypeIcon = computed(() => {\n switch (diagramType.value) {\n case DiagramType.Sequence:\n return 'ri:timeline-view'\n case DiagramType.Class:\n return 'ri:organization-chart'\n case DiagramType.State:\n return 'ri:organization-chart'\n case DiagramType.ER:\n return 'ri:organization-chart'\n case DiagramType.XYChart:\n return 'ri:line-chart-line'\n case DiagramType.Flowchart:\n return 'ri:flow-chart'\n case DiagramType.Graph:\n return 'ri:flow-chart'\n default:\n return 'ri:flow-chart'\n }\n })\n\n async function renderDiagram() {\n const code = toolPart.value.input?.code\n if (!code) {\n return\n }\n\n svgError.value = false\n try {\n const { renderMermaidSVG, THEMES } =\n await import('beautiful-mermaid')\n const theme = props.isDark\n ? THEMES['github-dark']\n : THEMES['github-light']\n svgContent.value = renderMermaidSVG(code, theme)\n } catch {\n svgError.value = true\n }\n }\n\n watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n onMounted(async () => {\n await renderDiagram()\n })\n\n const downloadSvg = () => {\n if (!svgContent.value) {\n return\n }\n const blob = new Blob([svgContent.value], {\n type: 'image/svg+xml;charset=utf-8',\n })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = `${toSnakeCase(toolPart.value.input?.title \|\| 'diagram')}.svg`\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }\n\n const copyCode = () => {\n const code = toolPart.value.input?.code\n if (code) {\n copy(code)\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.code\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n <div class=\"flex flex-col items-start gap-2\">\n <strong class=\"font-bold\">{{\n diagramTypeLabel ?? $t('label.diagram')\n }}</strong>\n </div>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyCode\" />\n <VvButton\n v-if=\"svgContent\"\n modifiers=\"action-quiet-small\"\n icon=\"ri:download-line\"\n :label=\"$t('action.download')\"\n @click=\"downloadSvg\" />\n </VvButtonGroup>\n </div>\n <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n {{ $t('message.diagramRenderError') }}\n </div>\n <PkSvgViewer\n v-else-if=\"svgContent\"\n class=\"pk-tool-show-diagram__stage\"\n :svg=\"svgContent\"\n :title=\"toolPart.input?.title\" />\n <div\n v-else\n class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n </div>\n <div\n v-if=\"toolPart.input.caption\"\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n {{ toolPart.input.caption }}\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-tool-show-diagram {\n // Fixed stage height: the diagram renders lazily (async chunk +\n // dynamic mermaid import), so the loader and the rendered SVG must\n // occupy the same space or the chat scroll position jumps around.\n // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n &__stage {\n height: 384px;\n\n .pk-svg-viewer__stage,\n .pk-svg-viewer__content {\n height: 100%;\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, onMounted, ref, watch } from 'vue'\n import { useClipboard } from '@vueuse/core'\n import { useI18n } from 'vue-i18n'\n import { toSnakeCase } from 'utils'\n import PkSvgViewer from '../PkSvgViewer.vue'\n\n const props = defineProps<{\n part: unknown\n isDark?: boolean\n }>()\n\n const { t: $t, te: $te } = useI18n({\n useScope: 'global',\n })\n\n const { copy, copied } = useClipboard()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n code: string\n title?: string\n caption?: string\n }\n }\n return part\n })\n\n const svgError = ref(false)\n\n // Serialized SVG content\n const svgContent = ref('')\n\n enum DiagramType {\n Sequence = 'sequenceDiagram',\n Class = 'classDiagram',\n State = 'stateDiagram',\n ER = 'erDiagram',\n XYChart = 'xychart',\n Flowchart = 'flowchart',\n Graph = 'graph',\n }\n\n const diagramType = computed<DiagramType \| undefined>(() => {\n const code = toolPart.value.input?.code?.trimStart()\n if (!code) {\n return undefined\n }\n const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n switch (firstWord) {\n case 'sequenceDiagram':\n return DiagramType.Sequence\n case 'classDiagram':\n return DiagramType.Class\n case 'stateDiagram':\n return DiagramType.State\n case 'erDiagram':\n return DiagramType.ER\n case 'xychart-beta':\n return DiagramType.XYChart\n case 'flowchart':\n return DiagramType.Flowchart\n case 'graph':\n return DiagramType.Graph\n default:\n return undefined\n }\n })\n\n const diagramTypeLabel = computed(() => {\n if (!diagramType.value) {\n return ''\n }\n return $te(`diagram.${diagramType.value}`)\n ? $t(`diagram.${diagramType.value}`)\n : diagramType.value\n })\n\n const diagramTypeIcon = computed(() => {\n switch (diagramType.value) {\n case DiagramType.Sequence:\n return 'ri:timeline-view'\n case DiagramType.Class:\n return 'ri:organization-chart'\n case DiagramType.State:\n return 'ri:organization-chart'\n case DiagramType.ER:\n return 'ri:organization-chart'\n case DiagramType.XYChart:\n return 'ri:line-chart-line'\n case DiagramType.Flowchart:\n return 'ri:flow-chart'\n case DiagramType.Graph:\n return 'ri:flow-chart'\n default:\n return 'ri:flow-chart'\n }\n })\n\n async function renderDiagram() {\n const code = toolPart.value.input?.code\n if (!code) {\n return\n }\n\n svgError.value = false\n try {\n const { renderMermaidSVG, THEMES } =\n await import('beautiful-mermaid')\n const theme = props.isDark\n ? THEMES['github-dark']\n : THEMES['github-light']\n svgContent.value = renderMermaidSVG(code, theme)\n } catch {\n svgError.value = true\n }\n }\n\n watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n onMounted(async () => {\n await renderDiagram()\n })\n\n const downloadSvg = () => {\n if (!svgContent.value) {\n return\n }\n const blob = new Blob([svgContent.value], {\n type: 'image/svg+xml;charset=utf-8',\n })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = `${toSnakeCase(toolPart.value.input?.title \|\| 'diagram')}.svg`\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }\n\n const copyCode = () => {\n const code = toolPart.value.input?.code\n if (code) {\n copy(code)\n }\n }\n</script>\n\n<template>\n <div\n v-if=\"toolPart?.input?.code\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n <div class=\"flex flex-col items-start gap-2\">\n <strong class=\"font-bold\">{{\n diagramTypeLabel ?? $t('label.diagram')\n }}</strong>\n </div>\n <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n <VvButton\n modifiers=\"action-quiet-small\"\n :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n @click=\"copyCode\" />\n <VvButton\n v-if=\"svgContent\"\n modifiers=\"action-quiet-small\"\n icon=\"ri:download-line\"\n :label=\"$t('action.download')\"\n @click=\"downloadSvg\" />\n </VvButtonGroup>\n </div>\n <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n {{ $t('message.diagramRenderError') }}\n </div>\n <PkSvgViewer\n v-else-if=\"svgContent\"\n class=\"pk-tool-show-diagram__stage\"\n :svg=\"svgContent\"\n :title=\"toolPart.input?.title\" />\n <div\n v-else\n class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n </div>\n <div\n v-if=\"toolPart.input.caption\"\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n {{ toolPart.input.caption }}\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-tool-show-diagram {\n // Fixed stage height: the diagram renders lazily (async chunk +\n // dynamic mermaid import), so the loader and the rendered SVG must\n // occupy the same space or the chat scroll position jumps around.\n // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n &__stage {\n height: 384px;\n\n .pk-svg-viewer__stage,\n .pk-svg-viewer__content {\n height: 100%;\n }\n }\n }\n</style>\n"],"mappings":"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"}

package/dist/_chunks/{PkToolShowEmail-C7mUCqGL.js → PkToolShowEmail-1pyuWnuN.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { $ as e, C as t, Ct as n, Dt as r, L as i, O as a, St as o, T as s, Tt as c, b as l, h as u, it as d, m as f, v as p, x as m } from "./vue.runtime.esm-bundler-DKVd2gci.js";
 import { i as h } from "./dist-DxtbpUdI.js";
-import { a as g, d as _, t as v, u as y } from "./index.es-dTcgyeM4.js";
-import { t as b } from "./VvButtonLocalized-DV-zbH9b.js";
+import { a as g, p as _, t as v, u as y } from "./index.es-D7jsz1j2.js";
+import { t as b } from "./VvButtonLocalized-PfbIEwav.js";
 import { n as x } from "./useShortUrlResolver-qFJHKHwE.js";
 //#region ../../packages/components/src/chat/PkToolShowEmail.vue?vue&type=script&setup=true&lang.ts
 a(), n(), d();
@@ -88,4 +88,4 @@ var S = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 //#endregion
 export { j as default };
-//# sourceMappingURL=PkToolShowEmail-C7mUCqGL.js.map
+//# sourceMappingURL=PkToolShowEmail-1pyuWnuN.js.map