@meistrari/tela-build 1.0.0

package/components/tela/combobox/combobox-module-selector.vue

@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+import { ComboboxRoot as Combobox, ComboboxTrigger } from 'reka-ui'
+import type { AllActionsInfo } from 'tela-workflow/src/actions'
+
+import ComboboxAnchor from './combobox-anchor.vue'
+import ComboboxEmpty from './combobox-empty.vue'
+import ComboboxGroup from './combobox-group.vue'
+import ComboboxInput from './combobox-input.vue'
+import ComboboxItem from './combobox-item.vue'
+import ComboboxList from './combobox-list.vue'
+import ComboboxLabel from './combobox-label.vue'
+
+import Tabs from '../tabs/tabs-root.vue'
+import TabsContent from '../tabs/tabs-content.vue'
+import TabsList from '../tabs/tabs-list.vue'
+import TabsIndicator from '../tabs/tabs-indicator.vue'
+import TabsTrigger from '../tabs/tabs-trigger.vue'
+
+export interface CombinedOption {
+    label: string
+    description?: string
+    value: AllActionsInfo['actionName']
+    icon: string
+    enabled?: () => boolean | undefined
+    tabs?: string[]
+}
+
+const props = withDefaults(defineProps<{
+    options: CombinedOption[]
+    comboSide?: 'top' | 'bottom'
+    listClass?: string
+    closeOnOutsideClick?: boolean
+    closeOnEscape?: boolean
+    priority?: 'low' | 'normal' | 'high'
+    inline?: boolean
+    to?: string | HTMLElement
+}>(), {
+    closeOnOutsideClick: true,
+    closeOnEscape: true,
+    comboSide: 'top',
+    priority: 'normal',
+    inline: false,
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string]
+    'select': [value: string]
+    'selectWorkflowModule': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const open = defineModel<boolean>('open')
+
+const selectedTab = ref('everything')
+const search = ref('')
+const innerValue = ref<string>('')
+const zIndexValue = computed(() => {
+    switch (props.priority) {
+        case 'low':
+            return 1
+        case 'high':
+            return 9999
+        case 'normal':
+        default:
+            return 999
+    }
+})
+
+const effectiveOptions = computed((): CombinedOption[] => {
+    return (props.options).map(option => ({
+        value: option.value,
+        label: option.label,
+        description: option.description,
+        icon: option.icon,
+        enabled: option.enabled,
+        tabs: option.tabs,
+    }))
+})
+
+const tabs = computed(() => {
+    const allTabs = effectiveOptions.value.reduce((acc, option) => {
+        if (option.tabs) {
+            option.tabs.forEach((tab) => {
+                if (!acc.find(t => t.tab === tab)) {
+                    acc.push({ tab, label: tab.charAt(0).toUpperCase() + tab.slice(1) })
+                }
+            })
+        }
+        return acc
+    }, [] as Array<{ tab: string, label: string }>)
+
+    const hasAll = allTabs.find(t => t.tab === 'everything')
+
+    if (!hasAll) {
+        allTabs.unshift({ tab: 'everything', label: t('workflow.modules.everything') })
+    }
+
+    return allTabs
+})
+
+const groupedOptions = computed(() => {
+    let filteredOptions = effectiveOptions.value
+
+    if (selectedTab.value !== 'everything') {
+        filteredOptions = effectiveOptions.value.filter(option =>
+            option.tabs?.includes(selectedTab.value),
+        )
+    }
+
+    if (search.value.trim()) {
+        filteredOptions = filteredOptions.filter(option =>
+            option.label.toLowerCase().includes(search.value.toLowerCase())
+            || option.description?.toLowerCase().includes(search.value.toLowerCase()),
+        )
+
+        filteredOptions = filteredOptions.filter((item, idx, arr) =>
+            arr.findIndex(i => i.value === item.value) === idx,
+        )
+    }
+
+    if (selectedTab.value === 'everything') {
+        const categoryGroups: Record<string, typeof filteredOptions> = {}
+
+        filteredOptions.forEach((option) => {
+            if (option.tabs?.includes('modules')) {
+                const modulesLabel = t('workflow.modules.modules')
+                if (!categoryGroups[modulesLabel])
+                    categoryGroups[modulesLabel] = []
+                categoryGroups[modulesLabel].push(option)
+            }
+            if (option.tabs?.includes('resources')) {
+                const resourcesLabel = t('workflow.modules.resources')
+                if (!categoryGroups[resourcesLabel])
+                    categoryGroups[resourcesLabel] = []
+                categoryGroups[resourcesLabel].push(option)
+            }
+            if (option.tabs?.includes('actions')) {
+                const actionsLabel = t('workflow.modules.actions')
+                if (!categoryGroups[actionsLabel])
+                    categoryGroups[actionsLabel] = []
+                categoryGroups[actionsLabel].push(option)
+            }
+        })
+
+        return Object.entries(categoryGroups).map(([heading, children]) => ({
+            heading,
+            children: children.filter((item, idx, arr) =>
+                arr.findIndex(i => i.value === item.value) === idx,
+            ),
+        })).filter(group => group.children.length > 0)
+    }
+
+    return [{
+        heading: selectedTab.value.charAt(0).toUpperCase() + selectedTab.value.slice(1),
+        children: filteredOptions,
+    }].filter(group => group.children.length > 0)
+})
+
+const handleDeleteSearchValue = () => search.value = ''
+
+const keys = useMagicKeys()
+const CmdBackspace = keys['Cmd+Backspace']
+
+watch(CmdBackspace as Ref<boolean>, (v) => {
+    if (v)
+        handleDeleteSearchValue()
+})
+
+function handleSelect(option: any) {
+    emit('select', option.value)
+    emit('selectWorkflowModule', option.value)
+    emit('update:modelValue', option.value)
+}
+
+function getBackgroundColor(heading: string) {
+    switch (heading) {
+        case 'Modules':
+            return 'bg-[#E6ECFF] text-[#315FFF]'
+        case 'Resources':
+            return 'bg-[#EEE2FF] text-[#7114FF]'
+        case 'Stop':
+            return 'bg-[#FDE6EA] text-red'
+        default:
+            return 'bg-[#F1F1F4] text-[#315FFF]'
+    }
+}
+
+watch(innerValue, (value) => {
+    if (!value)
+        return
+
+    const option = effectiveOptions.value.find(option => option.value === value)
+
+    if (!option)
+        return
+
+    innerValue.value = ''
+
+    emit('select', value)
+    emit('selectWorkflowModule', value)
+    emit('update:modelValue', value)
+})
+</script>
+
+<template>
+    <Combobox
+        v-model="innerValue" v-model:open="open" by="value"
+        @update:model-value="handleSelect"
+    >
+        <ComboboxAnchor>
+            <ComboboxTrigger
+                as="button"
+                class="group select-none flex items-center justify-center gap-3 rounded-full size-3.5 hover:size-6 bg-white border-[1.5px] border-gray-200 transition-[width,height] outline-none data-[state=open]:bg-gray-50 data-[state=open]:size-6"
+            >
+                <TelaIcon name="i-ph-plus-bold" size="14px" class="text-gray-400 group-hover:text-gray-400 opacity-0 duration-200 group-hover:opacity-100 group-data-[state=open]:rotate-45 group-data-[state=open]:text-gray-400 group-data-[state=open]:opacity-100" />
+            </ComboboxTrigger>
+        </ComboboxAnchor>
+        <ComboboxList
+            class="min-w-400px w-400px"
+            :style="{ zIndex: zIndexValue }"
+            align="center"
+            :side="comboSide"
+            :side-offset="8"
+            as-child
+            has-animate
+            :position="inline ? 'inline' : 'popper'"
+            :position-strategy="inline ? 'absolute' : 'fixed'"
+            :to="to"
+            @interact-outside="closeOnOutsideClick ? undefined : $event.preventDefault()"
+            @pointer-down-outside="closeOnOutsideClick ? undefined : $event.preventDefault()"
+            @escape-key-down="closeOnEscape ? undefined : $event.preventDefault()"
+        >
+            <div class="relative">
+                <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
+                    <TelaIcon name="i-ph-magnifying-glass" size="12px" class="text-gray-400" />
+                </span>
+                <ComboboxInput
+                    v-model="search" class="pl-7 rounded-b-none"
+                    :placeholder="t('models.labels.search')"
+                />
+                <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
+                    <button class="flex items-center justify-center" @click="handleDeleteSearchValue">
+                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-gray-400" />
+                    </button>
+                </div>
+            </div>
+            <Tabs v-model="selectedTab" :default-value="selectedTab">
+                <TabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
+                    <TabsIndicator />
+                    <TabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab">
+                        {{ tab.label }}
+                    </TabsTrigger>
+                </TabsList>
+                <TabsContent :value="selectedTab" class="max-h-262px overflow-y-auto no-scrollbar" :class="listClass">
+                    <ComboboxEmpty
+                        v-if="groupedOptions.length === 0 || groupedOptions.every(g => g.children.length === 0)"
+                        class="flex flex-col items-center justify-center gap-5 px-7"
+                    >
+                        <div class="flex flex-col items-center justify-center gap-3">
+                            <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                            <span class="text-xl font-medium leading-none">
+                                {{ $t('common.noItemsFound') }}{{ search.trim() ? ` with '${search}'` : '' }}
+                            </span>
+                            <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-gray-500">
+                                {{ $t('common.press') }}
+                                <div class="flex items-center gap-1">
+                                    <div class="p-2px bg-gray-200 rounded">
+                                        <TelaIcon name="i-ph-command" size="16px" />
+                                    </div>
+                                    <div class="p-2px bg-gray-200 rounded">
+                                        <TelaIcon name="i-ph-backspace" size="16px" />
+                                    </div>
+                                </div>
+                                {{ $t('common.toClear') }}
+                            </span>
+                        </div>
+                        <TelaButton
+                            v-if="search.trim()" variant="secondary" size="sm" class="rounded-lg"
+                            @click="handleDeleteSearchValue"
+                        >
+                            {{ $t('common.clear') }}
+                        </TelaButton>
+                    </ComboboxEmpty>
+                    <template v-for="group in groupedOptions" :key="group.heading">
+                        <ComboboxGroup :heading="group.heading" class="py-2">
+                            <ComboboxLabel v-if="!search.trim()" class="py-0 tracking-normal">
+                                {{ group.heading }}
+                            </ComboboxLabel>
+                            <ComboboxItem
+                                v-for="item in group.children"
+                                :key="item.value"
+                                :value="item"
+                                :disabled="!item.enabled?.()"
+                                class="group py-2"
+                            >
+                                <div class="flex items-center">
+                                    <div class="flex items-center gap-2">
+                                        <div :class="cn('w-6 h-6 shrink-0 flex items-center justify-center rounded-md', getBackgroundColor(item.label === 'Stop' ? item.label : group.heading))">
+                                            <TelaIcon
+                                                :name="item.icon"
+                                                size="15px"
+                                            />
+                                        </div>
+                                        <div class="flex flex-col w-full">
+                                            <div class="flex flex-col">
+                                                <div v-if="!item.enabled?.()" class="flex items-center gap-1">
+                                                    <span class="font-medium truncate max-w-140px">{{ item.label }}</span>
+                                                    <span
+                                                        class="font-semibold uppercase text-9px tracking-wider text-gray-700 bg-gray-100 rounded leading-none py-2px px-1"
+                                                    >{{ $t('common.comingSoon') }}</span>
+                                                </div>
+                                                <span v-else class="font-medium truncate max-w-140px">{{ item.label }}</span>
+                                                <span v-if="item.description" class="font-normal text-sm leading-none text-gray-500">
+                                                    {{ item.description }}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </ComboboxItem>
+                        </ComboboxGroup>
+                    </template>
+                </TabsContent>
+            </Tabs>
+        </ComboboxList>
+    </Combobox>
+</template>
+
+<style scoped>
+/* Force UnoCSS to include dynamic icons used in moduleOptions */
+.dynamic-icons-safelist {
+  @apply i-ph-pencil-simple-bold;
+  @apply i-ph-arrow-square-in-bold;
+  @apply i-ph-code-bold;
+  @apply i-ph-arrows-split-bold;
+  @apply i-ph-arrows-out-line-horizontal-bold;
+  @apply i-ph-crop-bold;
+  @apply i-ph-map-trifold-bold;
+  @apply i-ph-arrow-bend-up-right;
+  @apply i-ph-arrow-bend-down-right;
+  @apply i-ph-checks;
+  @apply i-ph-record;
+  @apply i-ph-square-bold;
+  @apply i-ph-lightbulb-bold;
+
+  display: none;
+}
+
+.nuxt-icon {
+  margin-bottom: 0;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

package/components/tela/combobox/combobox-root.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import type { ComboboxRootProps, ComboboxRootEmits } from 'reka-ui'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <ComboboxRoot v-bind="forwarded">
+        <slot />
+    </ComboboxRoot>
+</template>

package/components/tela/combobox/combobox-trigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ComboboxTrigger } from 'reka-ui'
+import type { ComboboxTriggerProps } from 'reka-ui'
+
+const props = defineProps<ComboboxTriggerProps>()
+</script>
+
+<template>
+    <ComboboxTrigger v-bind="props">
+        <slot />
+    </ComboboxTrigger>
+</template>

package/components/tela/combobox/combobox.mdx

@@ -0,0 +1,285 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as ComboboxStories from './combobox.stories.ts';
+
+<Meta of={ComboboxStories} />
+
+# TelaCombobox
+
+A searchable combobox component built on reka-ui. Allows users to search and select from a list of options. Supports filtering, icons, descriptions, grouping, tabs, token limits display, and custom styling. The component provides a searchable dropdown interface with keyboard navigation (Cmd+Backspace to clear search).
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('')
+const options = [
+  { value: 'bug', label: 'Bug' },
+  { value: 'feature', label: 'Feature Request' },
+  { value: 'improvement', label: 'Improvement' }
+]
+</script>
+
+<template>
+  <TelaCombobox
+    v-model="selected"
+    :options="options"
+    placeholder="Select an option"
+    input-placeholder="Search..."
+  />
+</template>
+```
+
+### With Icons and Descriptions
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="[
+    {
+      value: 'gpt4',
+      label: 'GPT-4',
+      icon: 'i-ph-brain',
+      description: 'Most capable model',
+      maxInputTokens: 8000,
+      maxOutputTokens: 4000
+    },
+    {
+      value: 'gpt3',
+      label: 'GPT-3.5',
+      icon: 'i-ph-lightning',
+      description: 'Fast and efficient',
+      maxInputTokens: 4000,
+      maxOutputTokens: 2000
+    }
+  ]"
+/>
+```
+
+### With Grouping
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('')
+const options = [
+  { value: 'gpt4', label: 'GPT-4', group: 'OpenAI' },
+  { value: 'gpt3', label: 'GPT-3.5', group: 'OpenAI' },
+  { value: 'claude', label: 'Claude', group: 'Anthropic' },
+  { value: 'gemini', label: 'Gemini', group: 'Google' }
+]
+</script>
+
+<template>
+  <TelaCombobox
+    v-model="selected"
+    :options="options"
+    :has-grouping-labels="true"
+  />
+</template>
+```
+
+### With Tabs
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="[
+    {
+      value: 'gpt4',
+      label: 'GPT-4',
+      tabs: ['all', 'text']
+    },
+    {
+      value: 'gpt4v',
+      label: 'GPT-4 Vision',
+      tabs: ['all', 'multimodal'],
+      isMultiModal: true
+    },
+    {
+      value: 'claude',
+      label: 'Claude',
+      tabs: ['all', 'text']
+    }
+  ]"
+/>
+```
+
+### Compact vs Non-Compact
+
+```vue
+<!-- Compact (default) -->
+<TelaCombobox
+  v-model="selected"
+  :options="options"
+  :compact="true"
+/>
+
+<!-- Non-compact with more spacing -->
+<TelaCombobox
+  v-model="selected"
+  :options="options"
+  :compact="false"
+/>
+```
+
+### Custom Styling
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="options"
+  trigger-class="w-400px"
+  content-class="max-h-500px"
+  label-class="text-blue-600"
+  description-class="text-gray-600"
+/>
+```
+
+### With Cost Indicator
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="[
+    { value: 'gpt4', label: 'GPT-4', cost: 5 },
+    { value: 'claude', label: 'Claude', cost: 3 },
+    { value: 'gpt3', label: 'GPT-3.5', cost: 1 }
+  ]"
+/>
+```
+
+### Read-Only State
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="options"
+  read-only
+/>
+```
+
+### Without Search Bar
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="options"
+  :has-searchbar="false"
+/>
+```
+
+### Disable Portal
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="options"
+  disable-portal
+/>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+interface ComboboxOption {
+  value: string
+  label: string
+  description?: string
+  icon?: string | Component
+  externalIconSrc?: string
+  maxInputTokens?: number
+  maxOutputTokens?: number
+  group?: string
+  badge?: string
+  tabs?: string[]
+  to?: string
+  isMultiModal?: boolean
+  features?: Array<{ text: string }>
+  cost?: number
+}
+
+type ComboboxProps = {
+  modelValue?: string
+  placeholder?: string
+  inputPlaceholder?: string
+  options: ComboboxOption[]
+  readOnly?: boolean
+  size?: 'xs' | 'sm' | 'md'
+  iconWithBackground?: {
+    size: 'xs' | 'sm' | 'md'
+    backgroundClass: string
+  }
+  compact?: boolean
+  hasGroupingLabels?: boolean
+  colorIcon?: string
+  disablePortal?: boolean
+  labelClass?: string
+  triggerClass?: string
+  iconClass?: string
+  contentClass?: string
+  labelItemClass?: string
+  labelIconVisible?: boolean
+  descriptionClass?: string
+  hasSearchbar?: boolean
+}
+```
+
+## Slots
+
+- `tags` - Custom tags/badges for each option (receives `option` as slot prop)
+
+## Components
+
+The Combobox system consists of these sub-components:
+- `TelaComboboxRoot` - Root container
+- `TelaComboboxAnchor` - Anchor for positioning
+- `TelaComboboxTrigger` - Trigger button
+- `TelaComboboxInput` - Search input field
+- `TelaComboboxList` - Dropdown list container
+- `TelaComboboxEmpty` - Empty state when no results
+- `TelaComboboxGroup` - Group container
+- `TelaComboboxItem` - Individual item
+- `TelaComboboxLabel` - Group label
+- `TelaComboboxItemIndicator` - Selected indicator
+
+## Features
+
+- **Searchable**: Filter options by typing
+- **Keyboard Shortcuts**: Cmd+Backspace to clear search
+- **Rich Options**: Icons, descriptions, badges, token limits
+- **Grouping**: Organize options with labels
+- **Tabs**: Filter options by category
+- **Multi-modal Support**: Badge for multi-modal models
+- **Cost Indicator**: Show relative cost with $ symbols
+- **Empty State**: Custom message when no results
+- **Compact Mode**: Dense or spacious layouts
+- **Portal Rendering**: Control dropdown positioning
+- **Icon Customization**: With or without backgrounds
+- **Accessible**: Full keyboard navigation
+
+## Events
+
+- `update:modelValue` - Emitted when selection changes with new value
+- `select` - Emitted when an option is selected with the value
+
+## Keyboard Shortcuts
+
+- `Cmd/Ctrl + Backspace` - Clear search input
+- `Escape` - Close dropdown
+- `Arrow Up/Down` - Navigate options
+- `Enter` - Select highlighted option
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes
+- Keyboard navigation
+- Focus management
+- Screen reader support