@meistrari/tela-build 1.57.4 → 1.59.0

package/components/tela/chat/chat-body.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+    /** Spacing scale: `widget` for floating/sidepanel shells, `page` for full-page chats. */
+    variant?: 'widget' | 'page'
+}>(), {
+    variant: 'widget',
+})
+
+const rootRef = ref<HTMLElement | null>(null)
+let inputObserver: ResizeObserver | null = null
+let slotObserver: MutationObserver | null = null
+let observedInput: HTMLElement | null = null
+
+function bindInputObserver() {
+    const input = rootRef.value?.querySelector<HTMLElement>('[data-chat-prompt-input]') ?? null
+
+    if (input === observedInput)
+        return
+
+    if (observedInput)
+        inputObserver?.unobserve(observedInput)
+
+    observedInput = input
+
+    if (!input) {
+        rootRef.value?.style.removeProperty('--chat-input-height')
+        return
+    }
+
+    inputObserver ??= new ResizeObserver(() => {
+        if (observedInput)
+            rootRef.value?.style.setProperty('--chat-input-height', `${observedInput.offsetHeight}px`)
+    })
+    inputObserver.observe(input)
+}
+
+onMounted(() => {
+    if (!rootRef.value || typeof ResizeObserver === 'undefined')
+        return
+
+    bindInputObserver()
+
+    slotObserver = new MutationObserver(bindInputObserver)
+    slotObserver.observe(rootRef.value, { childList: true, subtree: true })
+})
+
+onBeforeUnmount(() => {
+    inputObserver?.disconnect()
+    inputObserver = null
+    slotObserver?.disconnect()
+    slotObserver = null
+    observedInput = null
+})
+</script>
+
+<template>
+    <div ref="rootRef" data-chat-body :data-variant="variant" class="relative flex-1 min-h-0 flex flex-col">
+        <slot />
+    </div>
+</template>
+
+<style>
+[data-chat-body] [data-chat-conversation] {
+    --at-apply: 'pl-18px pr-12px py-16px';
+}
+
+[data-chat-body]:has([data-chat-prompt-input]) [data-chat-conversation] {
+    padding-bottom: calc(var(--chat-input-height, 64px) + 24px);
+}
+
+[data-chat-body] [data-chat-prompt-input] {
+    --at-apply: 'absolute bottom-0 left-0 right-0 z-2 mx-12px mb-12px';
+}
+
+[data-chat-body]:has([data-chat-prompt-input]) .chat-conversation-scrollbar {
+    top: 8px !important;
+    bottom: calc(var(--chat-input-height, 64px) + 16px) !important;
+    height: auto !important;
+}
+
+[data-chat-body][data-variant='page'] [data-chat-conversation] {
+    --at-apply: 'pl-24px pr-16px py-16px';
+}
+
+[data-chat-body][data-variant='page']:has([data-chat-prompt-input]) [data-chat-conversation] {
+    padding-bottom: calc(var(--chat-input-height, 64px) + 32px);
+}
+
+[data-chat-body][data-variant='page'] [data-chat-prompt-input] {
+    --at-apply: 'mx-24px mb-16px';
+}
+</style>

package/components/tela/chat/chat-empty-state.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+    /** Tighter spacing/typography for widget shells (floating/sidepanel). */
+    compact?: boolean
+    /** Greeting headline, e.g. "Hey, user". */
+    title?: string
+    /** Supporting line under the title. */
+    description?: string
+}>()
+</script>
+
+<template>
+    <div
+        flex-1 flex="~ col" items-center justify-center
+        :class="compact ? 'gap-24px px-12px pt-16px' : 'gap-40px px-24px'"
+    >
+        <div flex="~ col" gap-32px :class="compact ? 'mt-auto' : ''">
+            <div v-if="title || description" flex="~ col" items-center gap-2px text-center>
+                <component
+                    :is="compact ? 'h5' : 'h1'"
+                    v-if="title"
+                    text-primary
+                    :class="compact ? 'heading-h4-semibold' : 'text-24px font-semibold leading-28px tracking-[-.8px]'"
+                >
+                    {{ title }}
+                </component>
+                <p v-if="description" text-secondary :class="compact ? 'body-14-regular' : 'text-16px leading-20px tracking-[-.2px]'">
+                    {{ description }}
+                </p>
+            </div>
+
+            <!-- Suggestions, hints, or any other content under the greeting. -->
+            <slot />
+        </div>
+
+        <div w-full max-w-700px mx-auto :class="compact ? 'mt-auto pb-12px' : ''">
+            <slot name="input" />
+        </div>
+    </div>
+</template>

package/components/tela/chat/chat-model-selector.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+interface ModelOption {
+    value: string
+    label: string
+    description?: string
+    group?: string
+    icon?: string | Component
+    cost?: number
+    maxInputTokens?: number
+    maxOutputTokens?: number
+    isMultiModal?: boolean
+    tabs?: string[]
+}
+
+const props = withDefaults(defineProps<{
+    /** Model options, already resolved by the host (labels, provider icons, tabs...). */
+    options: ModelOption[]
+    disabled?: boolean
+    placeholder?: string
+    inputPlaceholder?: string
+    /** Maps tab keys (e.g. `advanced`) to display labels. */
+    tabLabels?: Record<string, string>
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+}>(), {
+    placeholder: 'Auto',
+    inputPlaceholder: 'Search models...',
+    side: 'top',
+    align: 'end',
+    tabLabels: () => ({
+        all: 'All',
+        advanced: 'Advanced',
+        cheap: 'Economical',
+        multimodal: 'Multimodal',
+    }),
+})
+
+const model = defineModel<string | null>({ default: null })
+
+function getTabLabel(tab: string) {
+    return props.tabLabels[tab] ?? tab
+}
+</script>
+
+<template>
+    <TelaCombobox
+        :model-value="model ?? undefined"
+        :options="options"
+        :read-only="disabled"
+        :class="disabled && 'opacity-50 pointer-events-none'"
+        :placeholder="placeholder"
+        :side="side"
+        :align="align"
+        :label-icon-visible="false"
+        :input-placeholder="inputPlaceholder"
+        :get-tab-label="getTabLabel"
+        icon-class="scale-90"
+        content-class="w-[min(440px,calc(100vw-32px))]"
+        trigger-class="rounded-8px! gap-6px! bg-transparent! border-none! hover:bg-muted! shadow-none! duration-80 pl-10px! pr-8px! data-[state=open]:bg-muted!"
+        @update:model-value="model = $event ?? null"
+    />
+</template>

package/components/tela/chat/chat-powered-by-tela.vue

@@ -0,0 +1,8 @@
+<template>
+    <div flex="~ col" gap-8px items-start>
+        <div body-9-medium text="#9DA2AA">
+            Powered by
+        </div>
+        <TelaChatIconsTelaWordmark h-12px text="#030C16" />
+    </div>
+</template>

package/components/tela/chat/chat-prompt-submit-button.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    status?: 'ready' | 'uploading' | 'streaming'
+    disabled?: boolean
+    sendLabel?: string
+    uploadingLabel?: string
+    stopLabel?: string
+}>(), {
+    status: 'ready',
+    sendLabel: 'Send message',
+    uploadingLabel: 'Uploading attachments',
+    stopLabel: 'Stop generating',
+})
+
+const emit = defineEmits<{
+    (e: 'send'): void
+    (e: 'stop'): void
+}>()
+
+const isDisabled = computed(() => props.disabled || props.status === 'uploading')
+</script>
+
+<template>
+    <TelaIconButton
+        v-if="status === 'streaming'"
+        size="sm"
+        icon="i-ph-stop-fill"
+        :aria-label="stopLabel"
+        @click="emit('stop')"
+    />
+    <TelaIconButton
+        v-else
+        :icon="status === 'uploading' ? 'i-ph-circle-notch' : 'i-ph-arrow-up-bold'"
+        size="sm"
+        :color="!isDisabled ? 'primary' : 'secondary'"
+        class="disabled:bg-muted!"
+        :class="cn(
+            isDisabled && 'bg-subtle! hover:bg-muted!',
+        )"
+        :icon-class="cn(
+            !isDisabled ? 'text-icon-reverse' : 'text-icon-tertiary',
+            status === 'uploading' && 'animate-spin',
+        )"
+        :disabled="isDisabled"
+        :aria-label="status === 'uploading' ? uploadingLabel : sendLabel"
+        @click="emit('send')"
+    />
+</template>

package/components/tela/chat/chat-reasoning-step.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+interface Props {
+    title: string
+    icon?: string
+    isLast?: boolean
+    isFirst?: boolean
+    defaultExpanded?: boolean
+    hasResult?: boolean
+    isError?: boolean
+    isTextStep?: boolean
+    hideExpand?: boolean
+    isActive?: boolean
+    completed?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    icon: 'i-ph-info',
+    isLast: false,
+    isFirst: false,
+    defaultExpanded: false,
+    hasResult: false,
+    isError: false,
+    isTextStep: false,
+    hideExpand: false,
+    isActive: false,
+    completed: false,
+})
+
+// Check if waiting for next step (last step with result but reasoning not completed)
+const isWaitingForNext = computed(() => {
+    return props.isLast && props.hasResult && !props.completed
+})
+
+const isExpanded = ref(props.defaultExpanded)
+
+watch(() => props.defaultExpanded, (newVal) => {
+    isExpanded.value = newVal
+})
+
+const statusIconClass = computed(() => {
+    if (props.completed)
+        return props.isError ? 'i-ph-x-circle' : props.icon
+
+    if (props.isActive || isWaitingForNext.value || (!props.isTextStep && !props.hasResult))
+        return 'i-ph-circle-notch animate-spin'
+
+    if (props.isTextStep)
+        return 'i-ph-check-circle'
+
+    return props.isError ? 'i-ph-x-circle' : 'i-ph-check-circle'
+})
+</script>
+
+<template>
+    <!-- Non-expandable row (when content is same as title) -->
+    <div
+        v-if="hideExpand"
+        relative flex items-center gap-10px h-28px
+        class="group/step"
+    >
+        <div class="flex items-center justify-center flex-shrink-0">
+            <div class="text-14px text-tertiary" :class="statusIconClass" />
+        </div>
+        <div class="flex-1 min-w-0 h-24px flex items-center">
+            <span class="text-14px font-medium text-tertiary leading-18px">
+                {{ title }}
+            </span>
+        </div>
+    </div>
+
+    <TelaCollapsible
+        v-else
+        :open="isExpanded"
+        @update:open="isExpanded = $event"
+    >
+        <TelaCollapsibleTrigger
+            as="button"
+            type="button"
+            relative flex items-center gap-10px h-32px w-full
+            class="group/step"
+        >
+            <div class="relative flex items-center justify-center flex-shrink-0">
+                <TelaIcon
+                    size="16px"
+                    color="icon-tertiary"
+                    class="transition-opacity duration-80 group-hover/step:opacity-0"
+                    :name="statusIconClass"
+                    :class="[{ 'opacity-0': isExpanded }]"
+                />
+                <TelaIcon
+                    name="i-ph-caret-right"
+                    size="16px"
+                    color="icon-tertiary"
+                    class="absolute inset-0 m-auto opacity-0 group-hover/step:opacity-100 duration-80 [transition-property:transform,opacity]"
+                    :class="{ 'rotate-90 opacity-100': isExpanded }"
+                />
+            </div>
+            <span body-14-medium :class="cn(isExpanded ? 'text-primary' : 'text-secondary group-hover/step:text-primary')">
+                {{ title }}
+            </span>
+        </TelaCollapsibleTrigger>
+
+        <TelaCollapsibleContent>
+            <div pl-26px pb-4px>
+                <slot />
+            </div>
+        </TelaCollapsibleContent>
+    </TelaCollapsible>
+</template>

package/components/tela/chat/chat-suggestion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+    suggestion: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'click', suggestion: string): void
+}>()
+</script>
+
+<template>
+    <TelaButton type="button" variant="secondary" @click="emit('click', suggestion)">
+        <slot>{{ suggestion }}</slot>
+    </TelaButton>
+</template>

package/components/tela/chat/chat-suggestions.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex flex-wrap items-center justify-center gap-8px mx-auto px-6px>
+        <slot />
+    </div>
+</template>

package/components/tela/chat/chat-text-shimmer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    duration?: number
+}>(), {
+    duration: 2.8,
+})
+
+const baseColor = DT.colors.text.secondary
+const shineColor = DT.colors.text.subtle
+const spread = 20
+</script>
+
+<template>
+    <span
+        data-shimmer
+        :class="cn(
+            'relative inline-block bg-[length:200%,auto] bg-clip-text text-transparent',
+            props.class,
+        )"
+        :style="{
+            '--base-color': baseColor,
+            '--base-gradient-color': shineColor,
+            'backgroundImage': `linear-gradient(to right, var(--base-color) ${50 - spread}%, var(--base-gradient-color) 50%, var(--base-color) ${50 + spread}%)`,
+            'animationDuration': `${props.duration}s`,
+        }"
+    >
+        <slot />
+    </span>
+</template>
+
+<style scoped>
+[data-shimmer] {
+    animation: shimmer 4s infinite linear;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 200%;
+    }
+
+    100% {
+        background-position: -200%;
+    }
+}
+</style>

package/components/tela/chat/chat-widget-card.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { TelaStatusVariant } from '@meistrari/tela-build/types'
+import { Comment, Fragment, Text, useSlots } from 'vue'
+
+defineProps<{
+    title: string
+    statusVariant: TelaStatusVariant
+    statusLabel: string
+    icon?: string
+    isIconAnimated?: boolean
+}>()
+
+const slots = useSlots()
+
+function isRenderedNode(node: VNode): boolean {
+    if (node.type === Comment)
+        return false
+
+    if (node.type === Text)
+        return typeof node.children === 'string' && node.children.trim().length > 0
+
+    if (node.type === Fragment)
+        return Array.isArray(node.children) && (node.children as VNode[]).some(isRenderedNode)
+
+    return true
+}
+
+function hasContent(): boolean {
+    return (slots.default?.() ?? []).some(isRenderedNode)
+}
+</script>
+
+<template>
+    <div border-0.5px border p-12px rounded-12px>
+        <!-- Header -->
+        <div flex items-center justify-between>
+            <div flex items-center gap-8px flex-1 min-w-0>
+                <div v-if="icon" size-24px rounded-7px flex items-center justify-center bg-lowered>
+                    <TelaIcon :name="icon" size="16px" color="icon-secondary" />
+                </div>
+                <div v-if="$slots.subtitle" class="min-w-0">
+                    <p body-14-medium text-primary>
+                        {{ title }}
+                    </p>
+                    <p body-12-regular text-secondary>
+                        <slot name="subtitle" />
+                    </p>
+                </div>
+                <h3 v-else body-14-medium text-primary truncate>
+                    {{ title }}
+                </h3>
+            </div>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" :is-icon-animated="isIconAnimated" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="hasContent()" flex="~ col" gap-16px mt-12px>
+            <slot />
+        </div>
+    </div>
+</template>

package/components/tela/chat/chat-widget-header.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+    title?: string
+    newConversationLabel?: string
+    historyLabel?: string
+}>(), {
+    newConversationLabel: 'New conversation',
+    historyLabel: 'Conversation history',
+})
+
+const emit = defineEmits<{
+    (e: 'newConversation'): void
+    (e: 'selectConversation', id: string): void
+}>()
+
+const historyOpen = ref(false)
+const historySelection = ref('')
+
+function selectConversation(id: unknown) {
+    if (typeof id !== 'string' || !id)
+        return
+
+    historyOpen.value = false
+    emit('selectConversation', id)
+
+    nextTick(() => {
+        historySelection.value = ''
+    })
+}
+</script>
+
+<template>
+    <div
+        data-widget-header
+        flex items-center justify-between gap-8px
+        h-48px pl-18px pr-10px flex-shrink-0
+        bg border-b-0.5px border
+    >
+        <h5 v-if="title" heading-h5-semibold text-primary truncate>
+            {{ title }}
+        </h5>
+
+        <div flex items-center gap-4px ml-auto>
+            <TelaIconButton
+                icon="i-ph-plus"
+                size="sm"
+                color="secondary"
+                :aria-label="newConversationLabel"
+                @click.stop.prevent="emit('newConversation')"
+            />
+            <TelaComboboxRoot
+                v-if="$slots.history"
+                v-model="historySelection"
+                v-model:open="historyOpen"
+                reset-search-term-on-select
+                @update:model-value="selectConversation"
+            >
+                <TelaComboboxAnchor>
+                    <TelaComboboxTrigger as-child class="group">
+                        <TelaIconButton
+                            icon="i-ph-clock"
+                            size="sm"
+                            color="secondary"
+                            icon-class="group-data-[state=open]:text-icon"
+                            :aria-label="historyLabel"
+                            :class="historyOpen && 'bg-muted!'"
+                        />
+                    </TelaComboboxTrigger>
+                </TelaComboboxAnchor>
+                <TelaComboboxList
+                    side="bottom"
+                    align="end"
+                    :side-offset="4"
+                    class="w-300px no-scrollbar"
+                >
+                    <!-- Host supplies the history content (e.g. ChatWidgetHistoryList). -->
+                    <slot v-if="historyOpen" name="history" />
+                </TelaComboboxList>
+            </TelaComboboxRoot>
+        </div>
+    </div>
+</template>

package/components/tela/chat/chat-widget-history-list.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    /** Conversations to list. Selection is emitted by the surrounding `TelaComboboxRoot`. */
+    items: { id: string, title: string }[]
+    loading?: boolean
+    searchPlaceholder?: string
+    emptyMessage?: string
+    emptySearchMessage?: string
+}>(), {
+    searchPlaceholder: 'Search conversations',
+    emptyMessage: 'No conversations yet',
+    emptySearchMessage: 'No conversations found',
+})
+
+const skeletonRows = [
+    { id: 'row-1', width: '72%' },
+    { id: 'row-2', width: '54%' },
+    { id: 'row-3', width: '64%' },
+    { id: 'row-4', width: '46%' },
+    { id: 'row-5', width: '78%' },
+]
+
+const searchQuery = ref('')
+
+const showSkeleton = computed(() => props.loading && props.items.length === 0)
+const resolvedEmptyMessage = computed(() =>
+    searchQuery.value.trim() ? props.emptySearchMessage : props.emptyMessage,
+)
+</script>
+
+<template>
+    <TelaComboboxInput
+        v-model="searchQuery"
+        auto-focus
+        :placeholder="searchPlaceholder"
+    />
+
+    <div flex flex-col gap-2px p-4px max-h-280px overflow-y-auto no-scrollbar>
+        <template v-if="showSkeleton">
+            <div
+                v-for="row in skeletonRows"
+                :key="row.id"
+                flex items-center h-32px px-8px
+            >
+                <TelaSkeleton h-14px rounded-4px :style="{ width: row.width }" />
+            </div>
+        </template>
+
+        <template v-else>
+            <TelaComboboxEmpty class="body-14-regular! text-center text-tertiary py-8px">
+                {{ resolvedEmptyMessage }}
+            </TelaComboboxEmpty>
+            <TelaComboboxItem
+                v-for="item in items"
+                :key="item.id"
+                :value="item.id"
+                :text-value="item.title"
+            >
+                <span truncate>{{ item.title }}</span>
+            </TelaComboboxItem>
+        </template>
+    </div>
+</template>