@meistrari/tela-build 1.0.0

package/components/tela/chat/chat.mdx

@@ -0,0 +1,268 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as ChatStories from './chat.stories.ts';
+
+<Meta of={ChatStories} />
+
+# TelaChat
+
+A chat component that displays threaded messages with replies, avatars, timestamps, and user information. Supports nested replies, mentions, message threading, and user identification. Useful for chat interfaces, comment systems, and collaborative communication features.
+
+## Examples
+
+### Empty State
+
+<Canvas of={ChatStories.Empty} />
+
+### Nested Replies
+
+<Canvas of={ChatStories.NestedReplies} />
+
+### With Mentions
+
+<Canvas of={ChatStories.NestedRepliesWithMentions} />
+
+### Long Thread
+
+<Canvas of={ChatStories.LongThread} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const messages = ref([
+  {
+    id: '1',
+    content: 'Hello! How can I help you?',
+    timestamp: new Date(),
+    author: 'Support',
+    authorEmail: 'support@example.com'
+  }
+])
+
+const currentUser = {
+  id: '1',
+  name: 'John Doe',
+  email: 'john@example.com'
+}
+</script>
+
+<template>
+  <TelaChat
+    :messages="messages"
+    :current-user="currentUser"
+  />
+</template>
+```
+
+### Empty State Code
+
+```vue
+<TelaChat
+  :messages="[]"
+  :current-user="currentUser"
+/>
+```
+
+### With Replies
+
+```vue
+<script setup>
+const messages = [{
+  id: '1',
+  content: 'Main message',
+  timestamp: new Date(),
+  author: 'User',
+  authorEmail: 'user@example.com',
+  replies: [
+    {
+      id: '2',
+      content: 'Reply to main message',
+      timestamp: new Date(),
+      author: 'Other User',
+      authorEmail: 'other@example.com'
+    }
+  ]
+}]
+</script>
+
+<template>
+  <TelaChat :messages="messages" />
+</template>
+```
+
+### Nested Replies Code
+
+```vue
+<script setup>
+const messages = [{
+  id: '1',
+  content: 'Main message',
+  timestamp: new Date(),
+  author: 'User 1',
+  authorEmail: 'user1@example.com',
+  replies: [
+    {
+      id: '2',
+      content: 'First reply',
+      timestamp: new Date(),
+      author: 'User 2',
+      authorEmail: 'user2@example.com',
+      replies: [
+        {
+          id: '3',
+          content: 'Nested reply',
+          timestamp: new Date(),
+          author: 'User 3',
+          authorEmail: 'user3@example.com'
+        }
+      ]
+    }
+  ]
+}]
+</script>
+
+<template>
+  <TelaChat :messages="messages" />
+</template>
+```
+
+### With Mentions Code
+
+```vue
+<script setup>
+const messages = [{
+  id: '1',
+  content: '@jane@example.com Check this out!',
+  timestamp: new Date(),
+  author: 'John',
+  authorEmail: 'john@example.com'
+}]
+
+const otherUsers = [{
+  id: '2',
+  name: 'Jane',
+  email: 'jane@example.com'
+}]
+</script>
+
+<template>
+  <TelaChat
+    :messages="messages"
+    :other-users="otherUsers"
+  />
+</template>
+```
+
+### With Avatars
+
+```vue
+<script setup>
+const messages = [{
+  id: '1',
+  content: 'Hello!',
+  timestamp: new Date(),
+  author: 'John Doe',
+  authorEmail: 'john@example.com',
+  avatarUrl: 'https://example.com/avatar.jpg'
+}]
+</script>
+
+<template>
+  <TelaChat :messages="messages" />
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type Message = {
+  id: string
+  content: string
+  timestamp: Date
+  author: string
+  authorEmail: string
+  avatarUrl?: string
+  version?: string
+  replies?: Message[]
+}
+
+type User = {
+  id: string
+  name: string
+  email: string
+  avatarUrl?: string
+}
+
+type ChatProps = {
+  messages: Message[]
+  currentUser?: User
+  otherUsers?: User[]
+}
+```
+
+## Features
+
+- **Threaded Messages**: Support for nested replies
+- **User Identification**: Show author names and emails
+- **Avatars**: Display user avatars
+- **Timestamps**: Show when messages were sent
+- **Mentions**: Highlight mentioned users
+- **Version Info**: Show message version (for AI/bot messages)
+- **Empty State**: Graceful handling of no messages
+- **Scrollable**: Scroll through long conversations
+- **Responsive**: Adapts to container size
+
+## Message Structure
+
+Messages can be nested infinitely:
+
+```typescript
+{
+  id: '1',
+  content: 'Parent message',
+  timestamp: new Date(),
+  author: 'User',
+  authorEmail: 'user@example.com',
+  avatarUrl: 'https://...',
+  version: 'v1.0',
+  replies: [
+    {
+      id: '2',
+      content: 'Child message',
+      // ... same structure, can have more replies
+      replies: []
+    }
+  ]
+}
+```
+
+## Use Cases
+
+- **Chat Applications**: Real-time messaging
+- **Comment Systems**: Threaded discussions
+- **Support Tickets**: Customer support conversations
+- **Collaborative Tools**: Team communication
+- **Review Systems**: Product reviews with replies
+- **Q&A Forums**: Question and answer threads
+
+## Best Practices
+
+1. **Load Messages Lazily**: Paginate long conversations
+2. **Show Timestamps**: Help users track conversation flow
+3. **Highlight Mentions**: Make @mentions stand out
+4. **Limit Nesting Depth**: Avoid deep nesting (max 3-4 levels)
+5. **Provide Reply UI**: Add buttons to reply to messages
+6. **Real-time Updates**: Use WebSockets for live updates
+
+## Accessibility
+
+- Semantic HTML structure
+- Proper heading hierarchy
+- ARIA labels for avatars
+- Keyboard navigation
+- Screen reader friendly timestamps
+- Focus management for replies

package/components/tela/chat/chat.stories.ts

@@ -0,0 +1,253 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaChat from './index.vue'
+import type { Message } from './types'
+
+const mockMessages: Message[] = [
+    {
+        id: '1',
+        content: 'Hello! How can I help you today?',
+        timestamp: new Date('2024-03-20T10:00:00'),
+        authorEmail: 'ai.assistant@example.com',
+        author: 'AI Assistant',
+        avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        version: 'v1.0',
+    },
+    {
+        id: '2',
+        content: 'I have a question about the API integration.',
+        timestamp: new Date('2024-03-20T10:01:00'),
+        authorEmail: 'john.doe@example.com',
+        author: 'John Doe',
+    },
+    {
+        id: '3',
+        content: 'Sure, I can help with that. What specific aspect of the API integration would you like to know about?',
+        timestamp: new Date('2024-03-20T10:02:00'),
+        authorEmail: 'ai.assistant@example.com',
+        author: 'AI Assistant',
+        avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        version: 'v1.0',
+        replies: [
+            {
+                id: '4',
+                content: 'I\'m wondering about authentication methods.',
+                timestamp: new Date('2024-03-20T10:03:00'),
+                authorEmail: 'john.doe@example.com',
+                author: 'John Doe',
+            },
+        ],
+    },
+]
+
+const meta = {
+    title: 'Tela/Chat',
+    component: TelaChat,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A chat component that displays threaded messages with replies, avatars, timestamps, and user information. Supports nested replies, mentions, message threading, and user identification. Useful for chat interfaces, comment systems, and collaborative communication features.',
+            },
+        },
+    },
+    argTypes: {
+        messages: {
+            control: 'object',
+            description: 'Array of message objects. Each message should have `id`, `content`, `timestamp`, `author`, `authorEmail`, and optionally `avatarUrl`, `version`, and `replies` (nested messages) properties.',
+        },
+        currentUser: {
+            control: 'object',
+            description: 'Current user object with `id`, `name`, `email`, and optionally `avatarUrl` properties.',
+        },
+        otherUsers: {
+            control: 'object',
+            description: 'Array of other user objects for mentions and user identification.',
+        },
+    },
+    args: {
+        messages: mockMessages,
+    },
+} satisfies Meta<typeof TelaChat>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        messages: mockMessages,
+        currentUser: {
+            id: '1',
+            name: 'John Doe',
+            email: 'john.doe@example.com',
+            avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        },
+        otherUsers: [
+            {
+                id: '2',
+                name: 'Jane Doe',
+                email: 'jane.doe@example.com',
+                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=2',
+            },
+        ],
+    },
+}
+
+export const Empty: Story = {
+    args: {
+        messages: [],
+        currentUser: {
+            id: '1',
+            name: 'John Doe',
+            email: 'john.doe@example.com',
+            avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        },
+        otherUsers: [],
+    },
+}
+
+export const LongThread: Story = {
+    args: {
+        messages: [
+            ...mockMessages,
+            {
+                id: '5',
+                content: 'Here\'s a detailed explanation of our authentication methods...',
+                timestamp: new Date('2024-03-20T10:04:00'),
+                author: 'AI Assistant',
+                authorEmail: 'ai.assistant@example.com',
+                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+                version: 'v1.0',
+            },
+            {
+                id: '6',
+                content: 'Thanks! That\'s very helpful.',
+                timestamp: new Date('2024-03-20T10:05:00'),
+                authorEmail: 'john.doe@example.com',
+                author: 'John Doe',
+            },
+        ],
+        currentUser: {
+            id: '1',
+            name: 'John Doe',
+            email: 'john.doe@example.com',
+            avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        },
+        otherUsers: [],
+    },
+}
+
+export const NestedReplies: Story = {
+    args: {
+        messages: [
+            {
+                id: '1',
+                content: 'Main message',
+                timestamp: new Date('2024-03-20T10:00:00'),
+                author: 'AI Assistant',
+                authorEmail: 'ai.assistant@example.com',
+                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+                version: 'v1.0',
+                replies: [
+                    {
+                        id: '2',
+                        content: 'First reply',
+                        timestamp: new Date('2024-03-20T10:01:00'),
+                        authorEmail: 'john.doe@example.com',
+                        author: 'John Doe',
+                        replies: [
+                            {
+                                id: '3',
+                                content: 'Nested reply',
+                                timestamp: new Date('2024-03-20T10:02:00'),
+                                author: 'AI Assistant',
+                                authorEmail: 'ai.assistant@example.com',
+                                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+                                version: 'v1.0',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        currentUser: {
+            id: '1',
+            name: 'John Doe',
+            email: 'john.doe@example.com',
+            avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        },
+        otherUsers: [],
+    },
+}
+
+export const NestedRepliesWithButton: Story = {
+    args: {
+        messages: [
+            {
+                id: '1',
+                content: 'Main message',
+                timestamp: new Date('2024-03-20T10:00:00'),
+                author: 'AI Assistant',
+                authorEmail: 'ai.assistant@example.com',
+                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+                version: 'v1.0',
+                replies: [
+                    {
+                        id: '2',
+                        content: 'First reply',
+                        timestamp: new Date('2024-03-20T10:01:00'),
+                        authorEmail: 'john.doe@example.com',
+                        author: 'John Doe',
+                        replies: [],
+                    },
+                ],
+            },
+        ],
+        currentUser: {
+            id: '1',
+            name: 'John Doe',
+            email: 'john.doe@example.com',
+            avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        },
+        otherUsers: [],
+    },
+}
+
+export const NestedRepliesWithMentions: Story = {
+    args: {
+        messages: [
+            {
+                id: '1',
+                content: 'Main message',
+                timestamp: new Date('2024-03-20T10:00:00'),
+                author: 'AI Assistant',
+                authorEmail: 'ai.assistant@example.com',
+                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+                version: 'v1.0',
+                replies: [
+                    {
+                        id: '2',
+                        content: '@jane.doe@example.com... This is a reply to the main message.',
+                        timestamp: new Date('2024-03-20T10:01:00'),
+                        authorEmail: 'jane.doe@example.com',
+                        author: 'You',
+                        replies: [],
+                    },
+                ],
+            },
+        ],
+        currentUser: {
+            id: '1',
+            name: 'John Doe',
+            email: 'john.doe@example.com',
+            avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=1',
+        },
+        otherUsers: [
+            {
+                id: '2',
+                name: 'Jane Doe',
+                email: 'jane.doe@example.com',
+                avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=2',
+            },
+        ],
+    },
+}

package/components/tela/chat/command/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { User } from '../types'
+
+type CommandType = '@'
+
+interface BaseCommandProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+interface MentionProps extends BaseCommandProps {
+    chatMessage: string
+    members: User[]
+    onSelect: (user: User) => void
+    searchTerm: string
+}
+
+type CommandProps = {
+    commands: CommandType[]
+    mentionProps?: MentionProps
+}
+
+const props = withDefaults(defineProps<CommandProps>(), {
+    mentionProps: undefined,
+})
+
+const hasMention = computed(() => props.commands.includes('@'))
+</script>
+
+<template>
+    <div>
+        <TelaChatCommandMention
+            v-if="hasMention"
+            v-bind="mentionProps"
+        >
+            <template #trigger>
+                <slot name="mention" />
+            </template>
+        </TelaChatCommandMention>
+    </div>
+</template>

package/components/tela/chat/command/mention/index.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { User } from '../../types'
+import { onClickOutside } from '@vueuse/core'
+
+const props = defineProps<{
+    members: User[]
+    chatMessage: string
+    isOpen: boolean
+    searchTerm: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'close'): void
+    (e: 'select', user: User): void
+}>()
+
+const filteredUsers = computed(() => {
+    const isValidArray = Array.isArray(props.members) && props.members.length > 0
+    const hasInsufficientLength = props.searchTerm.length < 3
+    if (!isValidArray || hasInsufficientLength)
+        return props.members
+
+    const searchTerm = props.searchTerm.replace('@', '').toLowerCase()
+    return props.members?.filter((user) => {
+        const name = user.name.toLowerCase()
+        const email = user.email.toLowerCase()
+        return name.includes(searchTerm) || email.includes(searchTerm)
+    })
+})
+const isVisible = computed(() => props.isOpen && filteredUsers.value.length > 0)
+
+const dropdownRef = ref<HTMLElement | null>(null)
+onClickOutside(dropdownRef, () => {
+    if (props.isOpen) {
+        emit('close')
+    }
+})
+const selectedIndex = ref(0)
+
+// Handle keyboard navigation
+function handleKeydown(e: KeyboardEvent) {
+    if (!isVisible.value)
+        return
+
+    switch (e.key) {
+        case 'ArrowDown':
+            e.preventDefault()
+            selectedIndex.value = (selectedIndex.value + 1) % filteredUsers.value.length
+            break
+        case 'ArrowUp':
+            e.preventDefault()
+            selectedIndex.value = selectedIndex.value - 1 < 0
+                ? filteredUsers.value.length - 1
+                : selectedIndex.value - 1
+            break
+        case 'Enter':
+            e.preventDefault()
+            if (filteredUsers.value[selectedIndex.value]) {
+                emit('select', filteredUsers.value[selectedIndex.value])
+            }
+            break
+        case 'Escape':
+            e.preventDefault()
+            emit('close')
+            break
+    }
+}
+
+// Add keyboard event listener
+onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+    <slot name="trigger" />
+    <Transition name="fade">
+        <div
+            v-if="isVisible"
+            ref="dropdownRef"
+            bg-white
+            shadow-flying
+            rounded-10px
+            p-4px
+            text-gray-800
+            flex="~ col"
+            w-244px
+            absolute
+            top-full
+            left-0
+            z-10000
+        >
+            <div
+                v-for="(member, index) in filteredUsers"
+                :key="member.id"
+                py-9px
+                px-12px
+                transition
+                ease
+                text-left
+                flex
+                items-center
+                gap-12px
+                rounded-8px
+                hover="bg-gray-200"
+                :class="{ 'bg-gray-200': index === selectedIndex }"
+                cursor-pointer
+                @click="$emit('select', member)"
+            >
+                <TelaAvatar :src="member.avatarUrl" size="sm" />
+                <div flex="~ col" gap-3px text-14px>
+                    <div body-12-semibold>
+                        {{ member.name }}
+                    </div>
+                    <div text-xs text-gray-500>
+                        {{ member.email }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>