@meistrari/tela-build 1.74.0 → 1.74.2

package/CHANGELOG.md

@@ -4,6 +4,10 @@ Latest updates and announcements.
 
 ## September 18, 2026
 
+- [Floating chat](/templates/chat#floating) docs now show `TelaChatAnswer` docked above the prompt input inside the window.
+
+- [Chat Answer](/templates/chat#answer) centers the card horizontally in its container and keeps it within the available width on narrow screens.
+
 - [Floating chat](/templates/chat) adds `closeOnOutsideClick` (default `true`); set it to `false` to keep the window open while using the surrounding page.
 
 ## September 17, 2026

package/components/tela/chat/answer/answer.vue

@@ -174,7 +174,7 @@ function onKeydown(event: KeyboardEvent) {
 
 <template>
     <div ref="root" tabindex="-1" outline-none>
-        <TelaCard size="sm" class="!p-0 w-400px" overflow-hidden>
+        <TelaCard size="sm" class="!p-0 w-450px" mx-auto max-w-full overflow-hidden>
             <TelaCollapsible :open="expanded" @update:open="emit('update:expanded', $event)">
                 <div
                     flex items-center justify-between gap-8px min-h-56px py-8px pl-16px pr-12px

package/components/tela/chat/chat.mdx

@@ -149,8 +149,11 @@ The window opens over its own launcher: the surface springs out of the launcher'
 
 The widget header inside the window gets two extra actions automatically: **expand** grows the window until 8px from the top of the viewport (and back), and **minimize** closes it. See [Widget Header & History](#widget-header--history).
 
+When the assistant needs a decision, dock a [`TelaChatAnswer`](#answer) above the prompt input: wrap both in one `[data-chat-composer]` element with a 12px gap so `TelaChatBody` pins and measures them together.
+
 ```vue
 <script setup lang="ts">
+import type { TelaChatAnswerQuestion } from '@meistrari/tela-build/types'
 import { getMimeTypeIcon } from '@meistrari/tela-build/utils/files'
 
 const isOpen = ref(false)
@@ -164,20 +167,75 @@ const skills = [
     { id: 's1', label: 'Summarize document' },
     { id: 's2', label: 'Draft release announcement' },
 ]
-const messages = [
+const messages = ref([
     { id: '1', role: 'user' as const, text: 'What changed in the latest release?' },
-    { id: '2', role: 'assistant' as const, text: 'The chat primitives landed: a conversation viewport, a prompt input, and three shells you can compose freely.' },
-]
+    { id: '2', role: 'assistant' as const, text: 'The chat primitives landed: a conversation viewport, a prompt input, and three shells you can compose freely. Want me to draft the announcement?' },
+])
 const conversations = [
     { id: 'c1', title: 'Release notes review' },
     { id: 'c2', title: 'Sidepanel layout questions' },
     { id: 'c3', title: 'Model selector options' },
 ]
+
+// The assistant needs a decision before it continues. The host owns the
+// question sequence and the selection; the card only emits intent.
+const questions: TelaChatAnswerQuestion[] = [
+    {
+        id: 'tone',
+        title: 'Which tone should the announcement use?',
+        type: 'single',
+        recommendFirst: true,
+        options: [
+            { id: 'concise', label: 'Concise', description: 'Short and factual, for the changelog.' },
+            { id: 'friendly', label: 'Friendly', description: 'Warmer copy, for the newsletter.' },
+            { id: 'formal', label: 'Formal', description: 'For enterprise customers.' },
+        ],
+    },
+    {
+        id: 'sections',
+        title: 'Which sections should it include?',
+        type: 'multiple',
+        options: [
+            { id: 'highlights', label: 'Highlights' },
+            { id: 'breaking', label: 'Breaking changes' },
+            { id: 'upgrade', label: 'Upgrade guide' },
+        ],
+    },
+]
+const index = ref(0)
+const expanded = ref(true)
+const answering = ref(true)
+const answers = ref<Record<string, string[]>>({})
+const question = computed(() => questions[index.value]!)
+const selected = computed(() => answers.value[question.value.id] ?? [])
+
+function select(id: string) {
+    answers.value[question.value.id] = [id]
+}
+
+function toggle(id: string, checked: boolean) {
+    answers.value[question.value.id] = checked
+        ? [...selected.value, id]
+        : selected.value.filter(value => value !== id)
+}
+
+function advance() {
+    if (index.value < questions.length - 1) {
+        index.value++
+        return
+    }
+
+    const summary = questions
+        .map(item => `${item.title} ${(answers.value[item.id] ?? []).join(', ') || 'skipped'}`)
+        .join(' ')
+    messages.value.push({ id: `${Date.now()}`, role: 'user', text: summary })
+    answering.value = false
+}
 </script>
 
 <template>
     <!-- `contained` anchors the launcher to this box instead of the viewport. -->
-    <div class="relative w-full h-560px">
+    <div class="relative w-full h-640px">
     <TelaChatFloatingWindow contained :open="isOpen" @update:open="isOpen = $event">
         <!-- The default launcher is TelaChatFloatingWindowTrigger; override it via the #launcher slot. -->
         <TelaChatWidgetHeader title="Release notes review">
@@ -197,53 +255,76 @@ const conversations = [
                 </TelaChatConversationContent>
             </TelaChatConversation>
 
-            <TelaChatPromptInput>
-                <TelaChatPromptInputTextarea placeholder="Ask anything" :empty="!draft" />
-                <TelaChatPromptInputToolbar>
-                    <TelaChatPromptInputTools>
-                        <TelaChatPromptInputActionMenu>
-                            <TelaChatPromptInputActionMenuTrigger />
-                            <TelaChatPromptInputActionMenuContent>
-                                <TelaChatPromptInputActionMenuItem icon="i-ph-paperclip">
-                                    Add files or photos
-                                </TelaChatPromptInputActionMenuItem>
-                                <TelaChatPromptInputActionMenuSub>
-                                    <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-clock-counter-clockwise">
-                                        Recent files
-                                    </TelaChatPromptInputActionMenuSubTrigger>
-                                    <TelaChatPromptInputActionMenuSubContent>
-                                        <TelaChatPromptInputActionMenuItem
-                                            v-for="file in recentFiles"
-                                            :key="file.id"
-                                        >
-                                            <img :src="getMimeTypeIcon(file.type)" class="w-16px h-16px mr-8px shrink-0" alt="">
-                                            <span class="min-w-0 max-w-200px truncate">{{ file.label }}</span>
-                                        </TelaChatPromptInputActionMenuItem>
-                                    </TelaChatPromptInputActionMenuSubContent>
-                                </TelaChatPromptInputActionMenuSub>
-                                <TelaMenubarSeparator />
-                                <TelaChatPromptInputActionMenuSub>
-                                    <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-notepad" icon-size="16px">
-                                        Skills
-                                    </TelaChatPromptInputActionMenuSubTrigger>
-                                    <TelaChatPromptInputActionMenuSubContent>
-                                        <TelaChatPromptInputActionMenuItem
-                                            v-for="skill in skills"
-                                            :key="skill.id"
-                                            @click="draft = skill.label"
-                                        >
-                                            <span class="min-w-0 max-w-200px truncate">{{ skill.label }}</span>
-                                        </TelaChatPromptInputActionMenuItem>
-                                    </TelaChatPromptInputActionMenuSubContent>
-                                </TelaChatPromptInputActionMenuSub>
-                            </TelaChatPromptInputActionMenuContent>
-                        </TelaChatPromptInputActionMenu>
-                    </TelaChatPromptInputTools>
-                    <TelaChatPromptInputActions>
-                        <TelaChatPromptSubmitButton status="ready" :disabled="!draft.trim()" />
-                    </TelaChatPromptInputActions>
-                </TelaChatPromptInputToolbar>
-            </TelaChatPromptInput>
+            <!-- One composer wrapper: the answer card docks above the prompt input. -->
+            <div data-chat-composer class="flex flex-col gap-12px">
+                <TelaChatAnswer
+                    v-if="answering"
+                    v-model:expanded="expanded"
+                    :question="question"
+                    :selected="selected"
+                    :current="index + 1"
+                    :total="questions.length"
+                    :can-continue="selected.length > 0"
+                    show-navigation
+                    :can-previous="index > 0"
+                    :can-next="index < questions.length - 1"
+                    @select="select"
+                    @toggle="toggle"
+                    @previous="index--"
+                    @next="index++"
+                    @skip="advance"
+                    @continue="advance"
+                    @dismiss="answering = false"
+                />
+
+                <TelaChatPromptInput>
+                    <TelaChatPromptInputTextarea placeholder="Ask anything" :empty="!draft" />
+                    <TelaChatPromptInputToolbar>
+                        <TelaChatPromptInputTools>
+                            <TelaChatPromptInputActionMenu>
+                                <TelaChatPromptInputActionMenuTrigger />
+                                <TelaChatPromptInputActionMenuContent>
+                                    <TelaChatPromptInputActionMenuItem icon="i-ph-paperclip">
+                                        Add files or photos
+                                    </TelaChatPromptInputActionMenuItem>
+                                    <TelaChatPromptInputActionMenuSub>
+                                        <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-clock-counter-clockwise">
+                                            Recent files
+                                        </TelaChatPromptInputActionMenuSubTrigger>
+                                        <TelaChatPromptInputActionMenuSubContent>
+                                            <TelaChatPromptInputActionMenuItem
+                                                v-for="file in recentFiles"
+                                                :key="file.id"
+                                            >
+                                                <img :src="getMimeTypeIcon(file.type)" class="w-16px h-16px mr-8px shrink-0" alt="">
+                                                <span class="min-w-0 max-w-200px truncate">{{ file.label }}</span>
+                                            </TelaChatPromptInputActionMenuItem>
+                                        </TelaChatPromptInputActionMenuSubContent>
+                                    </TelaChatPromptInputActionMenuSub>
+                                    <TelaMenubarSeparator />
+                                    <TelaChatPromptInputActionMenuSub>
+                                        <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-notepad" icon-size="16px">
+                                            Skills
+                                        </TelaChatPromptInputActionMenuSubTrigger>
+                                        <TelaChatPromptInputActionMenuSubContent>
+                                            <TelaChatPromptInputActionMenuItem
+                                                v-for="skill in skills"
+                                                :key="skill.id"
+                                                @click="draft = skill.label"
+                                            >
+                                                <span class="min-w-0 max-w-200px truncate">{{ skill.label }}</span>
+                                            </TelaChatPromptInputActionMenuItem>
+                                        </TelaChatPromptInputActionMenuSubContent>
+                                    </TelaChatPromptInputActionMenuSub>
+                                </TelaChatPromptInputActionMenuContent>
+                            </TelaChatPromptInputActionMenu>
+                        </TelaChatPromptInputTools>
+                        <TelaChatPromptInputActions>
+                            <TelaChatPromptSubmitButton status="ready" :disabled="!draft.trim()" />
+                        </TelaChatPromptInputActions>
+                    </TelaChatPromptInputToolbar>
+                </TelaChatPromptInput>
+            </div>
         </TelaChatBody>
     </TelaChatFloatingWindow>
     </div>
@@ -1016,6 +1097,7 @@ const questions: TelaChatAnswerQuestion[] = [
 const index = ref(0)
 const expanded = ref(true)
 const done = ref(false)
+const dismissed = ref(false)
 const answers = ref<Record<string, string[]>>({})
 
 const question = computed(() => questions[index.value]!)
@@ -1045,6 +1127,7 @@ function restart() {
     index.value = 0
     answers.value = {}
     done.value = false
+    dismissed.value = false
     expanded.value = true
 }
 </script>
@@ -1052,6 +1135,7 @@ function restart() {
 <template>
     <div class="flex flex-col items-start gap-12px w-full max-w-400px">
         <TelaChatAnswer
+            v-if="!dismissed"
             v-model:expanded="expanded"
             class="w-full"
             :question="question"
@@ -1069,9 +1153,9 @@ function restart() {
             @next="index++"
             @skip="advance"
             @continue="advance"
-            @dismiss="expanded = false"
+            @dismiss="dismissed = true"
         />
-        <TelaButton v-if="done" variant="secondary" size="sm" @click="restart">
+        <TelaButton v-if="done || dismissed" variant="secondary" size="sm" @click="restart">
             Ask again
         </TelaButton>
     </div>

package/components/tela/dropdown-menu/DropdownMenu.vue

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<{
     iconSide: 'left',
 })
 
-defineEmits(['click'])
+const emit = defineEmits(['click', 'update:open'])
 
 const search = ref('')
 const searchInputEl = ref<HTMLInputElement>()
@@ -58,6 +58,7 @@ const groups = computed(() => filteredItems.value.reduce((acc, item) => {
 }, {} as Record<string, typeof props.items[number][]>))
 
 function onToggle(open: boolean) {
+    emit('update:open', open)
     if (!open)
         return
 

package/components/tela/dropdown-menu/dropdown-menu.mdx

@@ -24,6 +24,16 @@ Use `TelaDropdownMenu` when clicking triggers a side effect. Use `TelaSelectMenu
 
 **The test:** If clicking triggers a side effect → `TelaDropdownMenu`. If it updates a bound value → `TelaSelectMenu`.
 
+## Loading menu data on open
+
+`update:open` emits a boolean whenever the menu opens or closes, including keyboard activation. Use it to fetch menu data only when needed:
+
+```vue
+<TelaDropdownMenu :items="items" @update:open="open => open && loadItems()">
+  <TelaButton>Open menu</TelaButton>
+</TelaDropdownMenu>
+```
+
 ## Examples
 
 ### Basic Usage

package/composables/use-pdf.ts

@@ -1,10 +1,12 @@
-import * as pdfjsLib from 'pdfjs-dist'
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist'
 import type { Ref } from 'vue'
 import { markRaw, onUnmounted, reactive, watch } from 'vue'
 
-if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`
+async function loadPdfLibrary() {
+    const pdfjsLib = await import('pdfjs-dist')
+    if (!pdfjsLib.GlobalWorkerOptions.workerSrc)
+        pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`
+    return pdfjsLib
 }
 
 function normalizeForMatch(text: string): string {
@@ -70,7 +72,11 @@ export function usePdf(url: Ref<string>) {
         state.loadError = null
 
         try {
-            const loadingTask = pdfjsLib.getDocument(url.value)
+            const requestedUrl = url.value
+            const pdfjsLib = await loadPdfLibrary()
+            if (isUnmounted)
+                return null
+            const loadingTask = pdfjsLib.getDocument(requestedUrl)
             const doc = await loadingTask.promise
 
             if (isUnmounted) {
@@ -304,6 +310,7 @@ export function usePdf(url: Ref<string>) {
             }
         }
 
+        const pdfjsLib = await loadPdfLibrary()
         for (let itemIndex = 0; itemIndex < textItems.length; itemIndex++) {
             if (isUnmounted)
                 return

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.74.0",
+    "version": "1.74.2",
     "type": "module",
     "files": [
         "app.config.ts",