@meistrari/chat-nuxt 4.13.0-rc.4 → 4.13.0-rc.5

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.13.0-rc.4",
+  "version": "4.13.0-rc.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/conversations/components/chat-export-code-block.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    props: {
+        code: string;
+        language?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-export-code-block.vue

@@ -0,0 +1,12 @@
+<script setup>
+defineProps({
+  props: { type: Object, required: true }
+});
+</script>
+
+<template>
+    <div data-openui="code-block" border rounded-8px p-12px flex="~ col" gap-4px>
+        <span v-if="props.language" body-12-regular>{{ props.language }}</span>
+        <pre m-0 whitespace-pre-wrap font-mono text-13px><code>{{ props.code }}</code></pre>
+    </div>
+</template>

package/dist/runtime/conversations/components/chat-export-code-block.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    props: {
+        code: string;
+        language?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-export-openui.vue

@@ -4,13 +4,15 @@ import OpenuiImage from "../../rendering/components/openui/image.vue";
 import OpenuiCitation from "../../rendering/components/openui/citation.vue";
 import ChatExportQuestions from "./chat-export-questions.vue";
 import ChatExportFile from "./chat-export-file.vue";
+import ChatExportCodeBlock from "./chat-export-code-block.vue";
+import ChatExportSteps from "./chat-export-steps.vue";
 const props = defineProps({
   node: { type: Object, required: true }
 });
 const code = computed(() => props.node.code ?? props.node.content ?? "");
 const host = {
   prose: OpenuiMarkdownProse,
-  components: { Questions: ChatExportQuestions, FileCard: ChatExportFile, Image: OpenuiImage, Citation: OpenuiCitation }
+  components: { Questions: ChatExportQuestions, FileCard: ChatExportFile, Image: OpenuiImage, Citation: OpenuiCitation, CodeBlock: ChatExportCodeBlock, Steps: ChatExportSteps }
 };
 </script>
 

package/dist/runtime/conversations/components/chat-export-steps.d.vue.ts

@@ -0,0 +1,15 @@
+type Step = {
+    props?: {
+        title?: string;
+        description?: string;
+        status?: string;
+    };
+};
+type __VLS_Props = {
+    props: {
+        steps?: Step[];
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-export-steps.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  props: { type: Object, required: true }
+});
+const STATUS_LABELS = { done: "conclu\xEDda", current: "em andamento", pending: "pendente" };
+function line(step) {
+  const status = STATUS_LABELS[step.props?.status ?? ""];
+  return `${step.props?.title ?? ""}${status ? ` (${status})` : ""}${step.props?.description ? ` \u2014 ${step.props.description}` : ""}`;
+}
+</script>
+
+<template>
+    <ol data-openui="steps" pl-20px>
+        <li v-for="(step, index) in props.steps ?? []" :key="index" body-14-regular>
+            {{ line(step) }}
+        </li>
+    </ol>
+</template>

package/dist/runtime/conversations/components/chat-export-steps.vue.d.ts

@@ -0,0 +1,15 @@
+type Step = {
+    props?: {
+        title?: string;
+        description?: string;
+        status?: string;
+    };
+};
+type __VLS_Props = {
+    props: {
+        steps?: Step[];
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-new-conversation-modal.d.vue.ts

@@ -6,8 +6,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
 } & {
     create: (canvasTools: CanvasTool[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
     onCreate?: ((canvasTools: CanvasTool[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/conversations/components/chat-new-conversation-modal.vue.d.ts

@@ -6,8 +6,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
 } & {
     create: (canvasTools: CanvasTool[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
     onCreate?: ((canvasTools: CanvasTool[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/conversations/export.js

@@ -38,13 +38,14 @@ export function conversationExportFilename(title, format) {
   return `${title.trim().replace(/[<>:"/\\|?*\p{Cc}]/gu, "_").slice(0, 150) || "Conversa"}.${format}`;
 }
 export function renderedConversationToText(html) {
-  const blocks = /* @__PURE__ */ new Set(["h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "section", "article", "header", "footer", "table", "ul", "ol", "pre", "blockquote", "figure"]);
+  const blocks = /* @__PURE__ */ new Set(["h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "section", "article", "header", "footer", "table", "ul", "ol", "dl", "pre", "blockquote", "figure"]);
   const ignored = /* @__PURE__ */ new Set(["script", "style", "svg"]);
   const links = [];
   let text = "";
   let ignoredDepth = 0;
   const whitespace = [];
   let cells = 0;
+  let trimNextText = false;
   const parser = new Parser({
     onopentag(name, attributes) {
       if (ignoredDepth || ignored.has(name)) {
@@ -65,6 +66,14 @@ export function renderedConversationToText(html) {
       }
       if (name === "li")
         text += "\n- ";
+      if (name === "dt") {
+        text += "\n";
+        trimNextText = true;
+      }
+      if (name === "dd") {
+        text = `${text.replace(/[ \t]+$/, "")}: `;
+        trimNextText = true;
+      }
       if (name === "br" || name === "hr")
         text += "\n";
       if (name === "img" && attributes.alt)
@@ -75,7 +84,11 @@ export function renderedConversationToText(html) {
     ontext(value) {
       if (!ignoredDepth) {
         const mode = whitespace.at(-1);
-        text += mode === "pre" || mode === "pre-wrap" || mode === "break-spaces" ? value : mode === "pre-line" ? value.replace(/[^\S\r\n]+/g, " ") : value.replace(/\s+/g, " ");
+        const written = mode === "pre" || mode === "pre-wrap" || mode === "break-spaces" ? value : mode === "pre-line" ? value.replace(/[^\S\r\n]+/g, " ") : value.replace(/\s+/g, " ");
+        const shown = trimNextText ? written.trimStart() : written;
+        if (shown)
+          trimNextText = false;
+        text += shown;
       }
     },
     onclosetag(name) {

package/dist/runtime/embed/components/mobile/chat-mobile-header.d.vue.ts

@@ -15,23 +15,23 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
+    openDrawer: () => any;
+    copyLink: () => any;
+    openOutdatedSettings: () => any;
     rename: () => any;
     duplicate: () => any;
     export: () => any;
-    copyLink: () => any;
     debug: () => any;
-    openDrawer: () => any;
-    openOutdatedSettings: () => any;
     tabChange: (tab: TopbarTab) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: (() => any) | undefined;
+    onOpenDrawer?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onOpenOutdatedSettings?: (() => any) | undefined;
     onRename?: (() => any) | undefined;
     onDuplicate?: (() => any) | undefined;
     onExport?: (() => any) | undefined;
-    onCopyLink?: (() => any) | undefined;
     onDebug?: (() => any) | undefined;
-    onOpenDrawer?: (() => any) | undefined;
-    onOpenOutdatedSettings?: (() => any) | undefined;
     onTabChange?: ((tab: TopbarTab) => any) | undefined;
 }>, {
     showDrawerButton: boolean;

package/dist/runtime/embed/components/mobile/chat-mobile-header.vue.d.ts

@@ -15,23 +15,23 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
+    openDrawer: () => any;
+    copyLink: () => any;
+    openOutdatedSettings: () => any;
     rename: () => any;
     duplicate: () => any;
     export: () => any;
-    copyLink: () => any;
     debug: () => any;
-    openDrawer: () => any;
-    openOutdatedSettings: () => any;
     tabChange: (tab: TopbarTab) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: (() => any) | undefined;
+    onOpenDrawer?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onOpenOutdatedSettings?: (() => any) | undefined;
     onRename?: (() => any) | undefined;
     onDuplicate?: (() => any) | undefined;
     onExport?: (() => any) | undefined;
-    onCopyLink?: (() => any) | undefined;
     onDebug?: (() => any) | undefined;
-    onOpenDrawer?: (() => any) | undefined;
-    onOpenOutdatedSettings?: (() => any) | undefined;
     onTabChange?: ((tab: TopbarTab) => any) | undefined;
 }>, {
     showDrawerButton: boolean;

package/dist/runtime/embed/components/mobile/chat-mobile-shell.d.vue.ts

@@ -66,46 +66,46 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 } & {
     delete: () => any;
     cancel: () => any;
+    settings: () => any;
+    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
+    newConversation: (groupId?: string | null | undefined) => any;
+    selectExecutionProfile: (profile: ChatExecutionProfile) => any;
+    copyLink: () => any;
     rename: () => any;
     duplicate: () => any;
     export: () => any;
-    copyLink: () => any;
     debug: () => any;
-    selectConversation: (id: string) => any;
-    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
-    settings: () => any;
-    newConversation: (groupId?: string | null | undefined) => any;
-    selectExecutionProfile: (profile: ChatExecutionProfile) => any;
     tabChange: (tab: TopbarTab) => any;
     switchWorkspace: () => any;
     signout: () => any;
     cancelEditing: () => any;
     dismissOutdatedBanner: () => any;
     saveTitle: () => any;
+    selectConversation: (id: string) => any;
     "update:drawerOpen": (value: boolean) => any;
     "update:editTitle": (value: string) => any;
     "update:workspaceSheetOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onRename?: (() => any) | undefined;
-    onDuplicate?: (() => any) | undefined;
-    onExport?: (() => any) | undefined;
-    onCopyLink?: (() => any) | undefined;
-    onDebug?: (() => any) | undefined;
-    onSelectConversation?: ((id: string) => any) | undefined;
-    onSend?: ((content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any) | undefined;
     onSettings?: (() => any) | undefined;
+    onSend?: ((content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any) | undefined;
     onNewConversation?: ((groupId?: string | null | undefined) => any) | undefined;
     onSelectExecutionProfile?: ((profile: ChatExecutionProfile) => any) | undefined;
     "onUpdate:selectedModel"?: ((value: string | null) => any) | undefined;
     "onUpdate:selectedReasoningEffort"?: ((value: any) => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
     onTabChange?: ((tab: TopbarTab) => any) | undefined;
     onSwitchWorkspace?: (() => any) | undefined;
     onSignout?: (() => any) | undefined;
     onCancelEditing?: (() => any) | undefined;
     onDismissOutdatedBanner?: (() => any) | undefined;
     onSaveTitle?: (() => any) | undefined;
+    onSelectConversation?: ((id: string) => any) | undefined;
     "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
     "onUpdate:editTitle"?: ((value: string) => any) | undefined;
     "onUpdate:workspaceSheetOpen"?: ((value: boolean) => any) | undefined;

package/dist/runtime/embed/components/mobile/chat-mobile-shell.vue.d.ts

@@ -66,46 +66,46 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 } & {
     delete: () => any;
     cancel: () => any;
+    settings: () => any;
+    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
+    newConversation: (groupId?: string | null | undefined) => any;
+    selectExecutionProfile: (profile: ChatExecutionProfile) => any;
+    copyLink: () => any;
     rename: () => any;
     duplicate: () => any;
     export: () => any;
-    copyLink: () => any;
     debug: () => any;
-    selectConversation: (id: string) => any;
-    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
-    settings: () => any;
-    newConversation: (groupId?: string | null | undefined) => any;
-    selectExecutionProfile: (profile: ChatExecutionProfile) => any;
     tabChange: (tab: TopbarTab) => any;
     switchWorkspace: () => any;
     signout: () => any;
     cancelEditing: () => any;
     dismissOutdatedBanner: () => any;
     saveTitle: () => any;
+    selectConversation: (id: string) => any;
     "update:drawerOpen": (value: boolean) => any;
     "update:editTitle": (value: string) => any;
     "update:workspaceSheetOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onRename?: (() => any) | undefined;
-    onDuplicate?: (() => any) | undefined;
-    onExport?: (() => any) | undefined;
-    onCopyLink?: (() => any) | undefined;
-    onDebug?: (() => any) | undefined;
-    onSelectConversation?: ((id: string) => any) | undefined;
-    onSend?: ((content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any) | undefined;
     onSettings?: (() => any) | undefined;
+    onSend?: ((content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any) | undefined;
     onNewConversation?: ((groupId?: string | null | undefined) => any) | undefined;
     onSelectExecutionProfile?: ((profile: ChatExecutionProfile) => any) | undefined;
     "onUpdate:selectedModel"?: ((value: string | null) => any) | undefined;
     "onUpdate:selectedReasoningEffort"?: ((value: any) => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
     onTabChange?: ((tab: TopbarTab) => any) | undefined;
     onSwitchWorkspace?: (() => any) | undefined;
     onSignout?: (() => any) | undefined;
     onCancelEditing?: (() => any) | undefined;
     onDismissOutdatedBanner?: (() => any) | undefined;
     onSaveTitle?: (() => any) | undefined;
+    onSelectConversation?: ((id: string) => any) | undefined;
     "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
     "onUpdate:editTitle"?: ((value: string) => any) | undefined;
     "onUpdate:workspaceSheetOpen"?: ((value: boolean) => any) | undefined;

package/dist/runtime/messages/components/chat-debug-widget-gallery.d.vue.ts

@@ -0,0 +1,7 @@
+import type { WidgetGalleryStory } from '../../rendering/debug/widget-gallery.js';
+type __VLS_Props = {
+    stories: readonly WidgetGalleryStory[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/messages/components/chat-debug-widget-gallery.vue

@@ -0,0 +1,218 @@
+<script setup>
+import { provideEmbedConfig } from "../../embed/composables/embed-config";
+import ChatVaultLink from "../../files/components/chat-vault-link.vue";
+import OpenuiBlock from "../../rendering/components/openui-block.vue";
+import { buildSlackPreview, groupWidgetStories } from "../../rendering/debug/widget-gallery";
+import { OPENUI_ERROR_REPORTER_KEY, OPENUI_MARKDOWN_COMPONENTS_KEY } from "../../rendering/openui/context";
+import { CHAT_MESSAGE_CONTEXT_KEY, CHAT_MESSAGE_SEND_KEY } from "../../types/messages";
+import { createChatDebugCitationsConfig } from "../debug/chat-debug-citations";
+const props = defineProps({
+  stories: { type: Array, required: true }
+});
+const STREAM_TICK_MS = 40;
+const STREAM_CHARACTERS_PER_TICK = 6;
+const groups = computed(() => groupWidgetStories(props.stories));
+const selectedId = ref(props.stories[0]?.id ?? "");
+const selectedStory = computed(() => props.stories.find((story) => story.id === selectedId.value) ?? props.stories[0]);
+const code = ref(selectedStory.value?.code ?? "");
+const viewportWidth = ref("default");
+const viewportOptions = [
+  { id: "narrow", label: "Narrow" },
+  { id: "default", label: "Default" },
+  { id: "wide", label: "Wide" }
+];
+const streamedCharacters = ref(null);
+const streaming = computed(() => streamedCharacters.value !== null);
+const visibleCode = computed(() => streamedCharacters.value === null ? code.value : code.value.slice(0, streamedCharacters.value));
+let streamTimer = null;
+const mountRevision = ref(0);
+const sentMessages = ref([]);
+const widgetErrors = ref([]);
+const slack = computed(() => buildSlackPreview(code.value));
+const slackJson = computed(() => JSON.stringify(slack.value.blocks, null, 2));
+provideEmbedConfig({
+  workspaceId: "chat-debug-widget-gallery",
+  hideSidebar: true,
+  citations: createChatDebugCitationsConfig()
+}, { syncGlobal: false });
+provide(CHAT_MESSAGE_CONTEXT_KEY, {
+  messageId: "chat-debug-widget-gallery",
+  role: "assistant",
+  isLatestMessage: ref(true),
+  streaming
+});
+provide(CHAT_MESSAGE_SEND_KEY, async (content) => {
+  sentMessages.value = [...sentMessages.value, content];
+  return true;
+});
+provide(OPENUI_ERROR_REPORTER_KEY, (errors) => {
+  widgetErrors.value = errors.map((error) => `${error.code}: ${error.message}`);
+});
+provide(OPENUI_MARKDOWN_COMPONENTS_KEY, ref({ link: ChatVaultLink }));
+function stopStream() {
+  if (streamTimer)
+    clearInterval(streamTimer);
+  streamTimer = null;
+  streamedCharacters.value = null;
+}
+function remount() {
+  stopStream();
+  sentMessages.value = [];
+  widgetErrors.value = [];
+  mountRevision.value += 1;
+}
+function selectStory(story) {
+  selectedId.value = story.id;
+  code.value = story.code;
+  remount();
+}
+function playStream() {
+  remount();
+  streamedCharacters.value = 0;
+  streamTimer = setInterval(() => {
+    const next = (streamedCharacters.value ?? 0) + STREAM_CHARACTERS_PER_TICK;
+    if (next >= code.value.length)
+      stopStream();
+    else
+      streamedCharacters.value = next;
+  }, STREAM_TICK_MS);
+}
+async function copySlackJson() {
+  await navigator.clipboard.writeText(slackJson.value);
+}
+watch(code, () => {
+  widgetErrors.value = [];
+});
+onBeforeUnmount(stopStream);
+</script>
+
+<template>
+    <section class="chat-debug-widget-gallery" w-full h-full bg text-primary>
+        <aside px-20px py-22px overflow-y-auto>
+            <div v-for="group in groups" :key="group.name" mb-20px>
+                <div body-caption-9-medium text-tertiary mb-10px>
+                    {{ group.name }}
+                </div>
+                <div flex="~ col" gap-4px>
+                    <button
+                        v-for="story in group.stories"
+                        :key="story.id"
+                        type="button"
+                        py-5px
+                        text-left
+                        group
+                        :data-story="story.id"
+                        @click="selectStory(story)"
+                    >
+                        <div flex items-center gap-7px>
+                            <span
+                                w-4px h-4px rounded-full shrink-0
+                                :class="story.id === selectedId ? 'bg-gray-900' : 'bg-gray-300 group-hover:bg-gray-500'"
+                                transition-colors
+                            />
+                            <span
+                                body-12-medium
+                                truncate
+                                :class="story.id === selectedId ? 'text-primary' : 'text-secondary group-hover:text-primary'"
+                                transition-colors
+                            >
+                                {{ story.title }}
+                            </span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </aside>
+
+        <main min-w-0 min-h-0 flex="~ col">
+            <div h-48px px-24px flex items-center justify-between shrink-0>
+                <div flex items-center gap-8px body-11-regular text-tertiary>
+                    <span>{{ selectedStory?.title }}</span>
+                    <TelaDotSeparator />
+                    <span>{{ streaming ? "streaming" : "complete" }}</span>
+                </div>
+                <div flex items-center gap-12px>
+                    <div flex items-center gap-10px>
+                        <button
+                            v-for="option in viewportOptions"
+                            :key="option.id"
+                            type="button"
+                            body-11-regular
+                            :class="viewportWidth === option.id ? 'text-primary' : 'text-tertiary hover:text-secondary'"
+                            transition-colors
+                            @click="viewportWidth = option.id"
+                        >
+                            {{ option.label }}
+                        </button>
+                    </div>
+                    <button type="button" body-11-regular text-tertiary hover:text-secondary transition-colors data-action="stream" @click="playStream">
+                        Stream
+                    </button>
+                    <button type="button" body-11-regular text-tertiary hover:text-secondary transition-colors data-action="reset" @click="remount">
+                        Reset
+                    </button>
+                </div>
+            </div>
+
+            <div min-h-0 grow overflow-y-auto px-24px pb-24px>
+                <div class="widget-under-test" :class="`widget-under-test--${viewportWidth}`" data-gallery="web">
+                    <OpenuiBlock :key="mountRevision" :node="{ type: 'code_block', raw: visibleCode, code: visibleCode }" :loading="streaming" />
+                </div>
+
+                <div class="widget-under-test" :class="`widget-under-test--${viewportWidth}`" mt-24px>
+                    <div body-caption-9-medium text-tertiary mb-8px>
+                        Sent messages
+                    </div>
+                    <p v-if="!sentMessages.length" body-11-regular text-tertiary>
+                        Buttons, forms and questions list here the user message they send.
+                    </p>
+                    <pre v-for="(message, index) in sentMessages" :key="index" class="gallery-code" body-12-regular mb-8px data-gallery="sent">{{ message }}</pre>
+
+                    <template v-if="widgetErrors.length">
+                        <div body-caption-9-medium text-tertiary mt-16px mb-8px>
+                            Widget errors
+                        </div>
+                        <pre class="gallery-code" body-12-regular text-red-600 data-gallery="errors">{{ widgetErrors.join("\n") }}</pre>
+                    </template>
+                </div>
+            </div>
+        </main>
+
+        <aside min-h-0 px-24px py-22px flex="~ col" gap-20px overflow-y-auto>
+            <div>
+                <div body-caption-9-medium text-tertiary mb-8px>
+                    OpenUI Lang
+                </div>
+                <textarea
+                    v-model="code"
+                    class="gallery-code gallery-editor"
+                    body-12-regular
+                    spellcheck="false"
+                    data-gallery="code"
+                />
+            </div>
+
+            <div min-h-0>
+                <div flex items-center justify-between mb-8px>
+                    <span body-caption-9-medium text-tertiary>Slack Block Kit · {{ slack.blocks.length }} blocks</span>
+                    <span flex items-center gap-10px body-11-regular>
+                        <button type="button" text-tertiary hover:text-secondary transition-colors @click="copySlackJson">
+                            Copy
+                        </button>
+                        <a :href="slack.builderUrl" target="_blank" rel="noopener" text-tertiary hover:text-secondary transition-colors data-gallery="builder-link">
+                            Block Kit Builder
+                        </a>
+                    </span>
+                </div>
+                <p body-11-regular text-tertiary mb-8px data-gallery="slack-note">
+                    Renderer output, before the connector applies its own limits: it sends a long answer as a file instead of blocks.
+                </p>
+                <pre class="gallery-code" body-12-regular data-gallery="slack">{{ slackJson }}</pre>
+            </div>
+        </aside>
+    </section>
+</template>
+
+<style scoped>
+.chat-debug-widget-gallery{display:grid;grid-template-columns:220px minmax(420px,1fr) minmax(360px,480px);overflow:hidden}.widget-under-test{margin-inline:auto;width:100%}.widget-under-test--narrow{max-width:520px}.widget-under-test--default{max-width:760px}.widget-under-test--wide{max-width:1040px}.gallery-code{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;overflow-x:auto;padding:12px;white-space:pre-wrap;word-break:break-word}.gallery-editor{display:block;min-height:220px;outline:none;resize:vertical;width:100%}
+</style>

package/dist/runtime/messages/components/chat-debug-widget-gallery.vue.d.ts

@@ -0,0 +1,7 @@
+import type { WidgetGalleryStory } from '../../rendering/debug/widget-gallery.js';
+type __VLS_Props = {
+    stories: readonly WidgetGalleryStory[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/rendering/debug/widget-gallery.d.ts

@@ -0,0 +1,24 @@
+import type { SlackBlock } from '@meistrari/chat-ui-lang';
+export type WidgetGalleryStory = {
+    id: string;
+    group: string;
+    title: string;
+    /** One OpenUI Lang program, without its fence. */
+    code: string;
+};
+export type WidgetGalleryGroup = {
+    name: string;
+    stories: WidgetGalleryStory[];
+};
+export declare function groupWidgetStories(stories: readonly WidgetGalleryStory[]): WidgetGalleryGroup[];
+export type SlackPreview = {
+    blocks: SlackBlock[];
+    /** The answer written out, which Slack uses for notifications. */
+    text: string;
+    builderUrl: string;
+};
+/**
+ * What the Slack renderer produces for one program, published in a thread so send buttons stay clickable. The connector
+ * applies its own limits after it, such as sending a long answer as a file.
+ */
+export declare function buildSlackPreview(code: string): SlackPreview;

package/dist/runtime/rendering/debug/widget-gallery.js

@@ -0,0 +1,25 @@
+import { renderSlackAnswer, UI_LANG_FENCE } from "@meistrari/chat-ui-lang";
+export function groupWidgetStories(stories) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const story of stories)
+    groups.set(story.group, [...groups.get(story.group) ?? [], story]);
+  return [...groups].map(([name, grouped]) => ({ name, stories: grouped }));
+}
+const BLOCK_KIT_BUILDER_URL = "https://app.slack.com/block-kit-builder/";
+const PREVIEW_THREAD_TS = "1700000000.000100";
+const PREVIEW_MAX_BLOCKS = 40;
+export function buildSlackPreview(code) {
+  const answer = code.trim() ? renderSlackAnswer(`\`\`\`${UI_LANG_FENCE}
+${code}
+\`\`\``, {
+    prose: (text) => [{ type: "markdown", text }],
+    threadTs: PREVIEW_THREAD_TS,
+    maxBlocks: PREVIEW_MAX_BLOCKS
+  }) : null;
+  const blocks = answer?.blocks ?? [];
+  return {
+    blocks,
+    text: answer?.text ?? "",
+    builderUrl: `${BLOCK_KIT_BUILDER_URL}#${encodeURIComponent(JSON.stringify({ blocks }))}`
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "4.13.0-rc.4",
+  "version": "4.13.0-rc.5",
   "type": "module",
   "exports": {
     ".": {
@@ -52,7 +52,7 @@
     "@iconify-json/ph": "^1.2.2",
     "@iconify/vue": "^5.0.0",
     "@meistrari/auth-nuxt": "3.31.0",
-    "@meistrari/chat-ui-lang": "0.7.0",
+    "@meistrari/chat-ui-lang": "0.8.0-rc.1",
     "@meistrari/logger": "^2.1.3",
     "@meistrari/tela-build": "^1.79.0",
     "@openuidev/lang-core": "1.0.0",