@meistrari/tela-build 1.0.0

package/components/tela/chat/index.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { TreeRoot } from 'radix-vue'
+import ChatTextMessage from './text-message/index.vue'
+import ChatTextInput from './text-input/index.vue'
+import type { Message, User } from './types'
+
+const props = defineProps<{
+    messages: Message[]
+    currentUser: User
+    otherUsers: User[]
+    loading?: boolean
+    allowReply?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'delete', id: string): void
+    (e: 'update', message: Message): void
+    (e: 'add', message: Message): void
+    (e: 'reply', message: Message): void
+}>()
+
+const expandedValues = ref<string[]>([])
+const replyingTo = ref<Message | null>(null)
+
+function handleSendMessage(content: string) {
+    const newMessage: Message = {
+        id: crypto.randomUUID(),
+        content,
+        timestamp: new Date(),
+        author: props.currentUser.name,
+        authorEmail: props.currentUser.email,
+        isReply: replyingTo.value !== null,
+        parentId: replyingTo.value?.id ?? undefined,
+        avatarUrl: props.currentUser.avatarUrl,
+    }
+    emit('add', newMessage)
+    replyingTo.value = null
+}
+
+const chatTextInputRef = useTemplateRef('chat-text-input')
+
+function handleReply(message: Message) {
+    expandedValues.value.push(message.id)
+    replyingTo.value = message
+    chatTextInputRef.value?.$el.querySelector('textarea')?.focus()
+}
+
+onMounted(() => {
+    // Initialize all top-level messages as expanded
+    expandedValues.value = props.messages.map(msg => msg.id)
+})
+</script>
+
+<template>
+    <div flex="~ col" bg-white rounded-lg shadow-lg>
+        <div v-if="messages.length > 0 && !loading" flex-1 flex-col overflow-y-auto p-24px gap-6>
+            <TreeRoot
+                v-model:expanded="expandedValues"
+                orientation="vertical"
+                :value="expandedValues"
+                :get-key="(value: Record<string, any>) => value.id"
+                class="w-full"
+            >
+                <ChatTextMessage
+                    v-for="message in messages"
+                    :id="message.id"
+                    :key="message.id"
+                    :content="message.content"
+                    :timestamp="message.timestamp"
+                    :author="message.author"
+                    :author-email="message.authorEmail"
+                    :avatar-url="message.avatarUrl"
+                    :depth="1"
+                    :replies="message.replies"
+                    :allow-reply="props.allowReply"
+                    :current-user="props.currentUser"
+                    :other-users="props.otherUsers"
+                    :is-chat="true"
+                    :is-expanded="expandedValues.some(value => value === message.id)"
+                    @reply="() => handleReply(message)"
+                    @delete="emit('delete', $event)"
+                />
+            </TreeRoot>
+        </div>
+        <div v-else flex justify-center items-center flex-1 flex-col>
+            <slot v-if="loading" name="loading">
+                <div h-500px flex justify-center items-center>
+                    <TelaIconSpinner class="h-24px w-24px" animate-spin />
+                </div>
+            </slot>
+            <slot v-else-if="!messages.length" name="empty">
+                <div flex flex-col justify-center items-center h-full h-500px>
+                    <span body-16-semibold text-gray-700 text-center>No messages yet</span>
+                    <span body-14-regular text-gray-600 text-center>Start a conversation by sending a message.</span>
+                </div>
+            </slot>
+        </div>
+
+        <div p-16px b-t="0.5px gray-200">
+            <ChatTextInput
+                ref="chat-text-input"
+                :message-count="messages.length"
+                :current-user="props.currentUser"
+                :other-users="props.otherUsers"
+                :replying-to="replyingTo ? { content: replyingTo.content, author: replyingTo.author } : undefined"
+                @send-message="handleSendMessage"
+                @cancel-reply="() => replyingTo = null"
+            />
+        </div>
+    </div>
+</template>

package/components/tela/chat/pure-text-input/chat-text-input.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref, watch, withDefaults } from 'vue'
+import type { User } from '../types'
+
+interface ChatInputProps {
+    replyingTo?: {
+        content: string
+        author: string
+    }
+    currentUser: User
+    otherUsers: User[]
+    placeholder?: string
+    messageCount?: number
+}
+
+const props = withDefaults(defineProps<ChatInputProps>(), {
+    placeholder: 'Leave a note',
+})
+
+const emit = defineEmits<{
+    sendMessage: [message: string]
+    cancelReply: []
+}>()
+
+const localPlaceholder = ref(props.placeholder)
+const message = ref('')
+const displayMessage = ref('')
+const isSending = ref(false)
+const shouldShowCheckIcon = ref(false)
+const showMentionModal = ref(false)
+const cursorPosition = ref(0)
+const mentions = ref<Array<{ start: number; email: string; name: string }>>([])
+
+function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement
+    cursorPosition.value = target.selectionStart || 0
+    displayMessage.value = target.value
+
+    // Reconstruct message with emails
+    let finalMessage = displayMessage.value
+    mentions.value.sort((a, b) => b.start - a.start).forEach((mention) => {
+        finalMessage = finalMessage.slice(0, mention.start) + mention.email + finalMessage.slice(mention.start + (mention.name?.length ?? 0))
+    })
+    message.value = finalMessage
+
+    // Check if @ was just typed
+    if (target.value[cursorPosition.value - 1] === '@') {
+        showMentionModal.value = true
+    }
+}
+
+function insertMention(user: User) {
+    const beforeCursor = displayMessage.value.slice(0, cursorPosition.value)
+    const afterCursor = displayMessage.value.slice(cursorPosition.value)
+
+    // Store mention data
+    mentions.value.push({
+        start: cursorPosition.value,
+        email: user.email,
+        name: user.name,
+    })
+
+    // Update display message with name
+    displayMessage.value = `${beforeCursor}${user.name} ${afterCursor}`
+
+    // Reconstruct message with email
+    let finalMessage = displayMessage.value
+    mentions.value.sort((a, b) => b.start - a.start).forEach((mention) => {
+        finalMessage = finalMessage.slice(0, mention.start) + mention.email + finalMessage.slice(mention.start + (mention.name?.length ?? 0))
+    })
+    message.value = finalMessage
+
+    showMentionModal.value = false
+}
+
+async function handleSubmit(e: Event) {
+    e.preventDefault()
+    if (message.value.trim()) {
+        isSending.value = true
+        emit('sendMessage', message.value)
+        await new Promise(resolve => setTimeout(resolve, 500))
+        shouldShowCheckIcon.value = true
+        isSending.value = false
+        message.value = ''
+        displayMessage.value = ''
+        mentions.value = []
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        shouldShowCheckIcon.value = false
+    }
+}
+
+function resolveContent(content: string) {
+    if (props.currentUser && props.otherUsers) {
+        return content.replace(/@([\w.-]+@[\w.-]+\.\w+)/g, (match, email) => {
+            const user = props.otherUsers?.find(user => user.email === email)
+            return user ? `@${user.name}` : match
+        })
+    }
+    return content
+}
+
+const { 'Meta+Enter': metaEnterKey } = useMagicKeys({
+    passive: false,
+})
+
+watch(() => props.messageCount, (count) => {
+    localPlaceholder.value = (count ?? 0) > 0 ? 'Leave another note' : 'Leave a note'
+}, { immediate: true })
+
+watch(metaEnterKey, (press) => {
+    if (press && message.value.trim())
+        handleSubmit(new Event('submit'))
+})
+
+watch(displayMessage, (value) => {
+    if (value === '') {
+        showMentionModal.value = false
+    }
+})
+</script>
+
+<template>
+    <div
+        flex="~ col"
+        h-full
+        focus-within="b-1px b-gray-400 ring-2px ring-gray-200"
+        transition
+        rounded-8px
+        relative
+        @submit.prevent="handleSubmit"
+    >
+        <div v-if="replyingTo" mb-4px p-8px bg-gray-50 rounded-8px b="~ gray-200" body-12-regular relative>
+            <TelaButton
+                variant="ghost"
+                size="sm"
+                icon="i-ph-x-circle"
+                color="secondary"
+                absolute top-8px right-8px
+                @click="$emit('cancelReply')"
+            />
+            <div text-gray-600 mb-4px>
+                Replying to {{ replyingTo.author }}
+            </div>
+            <div text-gray-700 line-clamp-1>
+                {{ resolveContent(replyingTo.content) }}
+            </div>
+        </div>
+        <TelaChatMention
+            :members="otherUsers"
+            :is-open="showMentionModal && otherUsers.length > 0"
+            @close="showMentionModal = false"
+            @select="insertMention"
+        >
+            <template #trigger>
+                <TelaInput
+                    v-model="displayMessage"
+                    type="textarea"
+                    w-full
+                    :placeholder="localPlaceholder"
+                    :disabled="isSending"
+                    @input="handleInput"
+                >
+                    <template v-if="message?.trim() || isSending" #trailing>
+                        <TelaIconButton
+                            v-if="isSending"
+                            color="primary"
+                            icon="i-ph-circle-notch-light"
+                            animate-spin
+                            :disabled="true"
+                        />
+                        <TelaIconButton
+                            v-else
+                            color="primary"
+                            icon="i-ph-paper-plane-tilt"
+                            :disabled="!message.trim()"
+                            @click="handleSubmit"
+                        />
+                    </template>
+                    <template v-else-if="shouldShowCheckIcon" #trailing>
+                        <TelaIconButton
+                            color="primary"
+                            icon="i-ph-check"
+                            :disabled="true"
+                        />
+                    </template>
+                </TelaInput>
+            </template>
+        </TelaChatMention>
+    </div>
+</template>

package/components/tela/chat/text-input/chat-text-input.stories.ts

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import ChatInput from './index.vue'
+import type { User } from '../types'
+
+const meta: Meta<typeof ChatInput> = {
+    title: 'Components/Chat/TextInput',
+    component: ChatInput,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A chat text input component for sending messages in chat interfaces. Supports reply functionality, mentions, user autocomplete, and message sending. Integrates with chat systems to provide a complete messaging input experience.',
+            },
+        },
+    },
+    argTypes: {
+        replyingTo: {
+            control: 'object',
+            description: 'Message object being replied to. When provided, shows reply preview above input.',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text displayed in the input field.',
+        },
+        currentUser: {
+            control: 'object',
+            description: 'Current user object with `id`, `name`, `email`, and optionally `avatarUrl` properties.',
+        },
+        otherUsers: {
+            control: 'object',
+            description: 'Array of other users for mention autocomplete functionality.',
+        },
+        onSendMessage: {
+            action: 'send-message',
+            description: 'Event handler called when a message is sent.',
+        },
+        onCancelReply: {
+            action: 'cancel-reply',
+            description: 'Event handler called when reply is cancelled.',
+        },
+    },
+    args: {
+        onSendMessage: fn(),
+        onCancelReply: fn(),
+    },
+} satisfies Meta<typeof ChatInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockMembers: User[] = [
+    {
+        id: '1',
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        avatarUrl: 'https://example.com/avatar1.png',
+    },
+    {
+        id: '2',
+        name: 'John Doe',
+        email: 'john@example.com',
+        avatarUrl: 'https://example.com/avatar2.png',
+    },
+]
+
+export const Default: Story = {
+    args: {
+        otherUsers: mockMembers,
+        currentUser: mockMembers[0],
+    },
+}
+
+export const WithReply: Story = {
+    args: {
+        replyingTo: {
+            content: 'Yep, this is still happening. @thierry can we review the parser?',
+            author: 'Guilherme Oliveira',
+        },
+        otherUsers: mockMembers,
+        currentUser: mockMembers[0],
+    },
+}
+
+export const WithCustomPlaceholder: Story = {
+    args: {
+        placeholder: 'Write a message...',
+        otherUsers: mockMembers,
+        currentUser: mockMembers[0],
+    },
+}
+
+export const WithLongReply: Story = {
+    args: {
+        replyingTo: {
+            content: 'I was expecting that the CPF field would come as expected, and not empty. The original file has it already so it\'s really odd that it didn\'t appear. We should investigate this further to understand why the parser is not picking up this field correctly.',
+            author: 'Lucas Siqueira',
+        },
+        otherUsers: mockMembers,
+        currentUser: mockMembers[0],
+    },
+}
+
+export const Focused: Story = {
+    args: {
+        otherUsers: mockMembers,
+        currentUser: mockMembers[0],
+    },
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('textarea')
+        input?.focus()
+    },
+}
+
+export const WithContent: Story = {
+    args: {
+        otherUsers: mockMembers,
+        currentUser: mockMembers[0],
+    },
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('textarea')
+        if (input) {
+            input.value = 'This is a sample message that I\'m typing...'
+            input.dispatchEvent(new Event('input'))
+        }
+    },
+}

package/components/tela/chat/text-input/index.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { ref, watch, withDefaults } from 'vue'
+import type { User } from '../types'
+
+interface ChatInputProps {
+    replyingTo?: {
+        content: string
+        author: string
+    }
+    currentUser: User
+    otherUsers: User[]
+    placeholder?: string
+    messageCount?: number
+}
+
+const props = withDefaults(defineProps<ChatInputProps>(), {
+    placeholder: 'Leave a note',
+})
+
+const emit = defineEmits<{
+    sendMessage: [message: string]
+    cancelReply: []
+}>()
+
+const localPlaceholder = ref(props.placeholder)
+const message = ref('')
+const displayMessage = ref('')
+const searchTerm = ref<string | null>(null)
+const cursorPosition = ref(0)
+const mentions = ref<Array<{ start: number; email: string; name: string }>>([])
+
+const isSending = ref(false)
+const shouldShowCheckIcon = ref(false)
+const showMentionModal = ref(false)
+
+function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement
+    cursorPosition.value = target.selectionStart || 0
+    displayMessage.value = target.value
+
+    // Check if cursor is right after @ or if there's an @ with text being typed after it
+    const textBeforeCursor = target.value.slice(0, cursorPosition.value)
+    const match = textBeforeCursor.match(/@(\S*)$/)
+    searchTerm.value = match?.[0] ?? null
+
+    // Clean up mentions that are no longer in the display message
+    mentions.value = mentions.value.filter(mention =>
+        displayMessage.value.includes(`@${mention.name}`),
+    )
+
+    // Reconstruct message with emails
+    let finalMessage = displayMessage.value
+    mentions.value.sort((a, b) => b.start - a.start).forEach((mention) => {
+        finalMessage = `${finalMessage.slice(0, mention.start)}@${mention.email}${finalMessage.slice(mention.start + mention.name.length + 1)}` // +1 for @
+    })
+    message.value = finalMessage
+
+    showMentionModal.value = !!match
+}
+
+function insertMention(user: User) {
+    const beforeCursor = displayMessage.value.slice(0, cursorPosition.value)
+    const afterCursor = displayMessage.value.slice(cursorPosition.value)
+
+    // Find the @ position we're replacing
+    const lastAtIndex = beforeCursor.lastIndexOf('@')
+    if (lastAtIndex === -1)
+        return
+
+    // Store mention data with @ position
+    mentions.value.push({
+        start: lastAtIndex,
+        email: user.email,
+        name: user.name,
+    })
+
+    // Update display message with @name
+    displayMessage.value = `${beforeCursor.slice(0, lastAtIndex)}@${user.name} ${afterCursor}`
+
+    // Update cursor position after insertion
+    cursorPosition.value = lastAtIndex + user.name.length + 2 // +2 for @ and space
+
+    // Reconstruct message with email
+    let finalMessage = displayMessage.value
+    mentions.value.sort((a, b) => b.start - a.start).forEach((mention) => {
+        finalMessage = `${finalMessage.slice(0, mention.start)}@${mention.email}${finalMessage.slice(mention.start + mention.name.length + 1)}` // +1 for @
+    })
+    message.value = finalMessage
+
+    showMentionModal.value = false
+}
+
+async function handleSubmit(e: Event) {
+    e.preventDefault()
+    if (message.value.trim()) {
+        isSending.value = true
+        emit('sendMessage', message.value)
+        await new Promise(resolve => setTimeout(resolve, 500))
+        shouldShowCheckIcon.value = true
+        isSending.value = false
+        message.value = ''
+        displayMessage.value = ''
+        mentions.value = []
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        shouldShowCheckIcon.value = false
+    }
+}
+
+function resolveContent(content: string) {
+    if (props.currentUser && props.otherUsers) {
+        return content.replace(/@([\w.-]+@[\w.-]+\.\w+)/g, (match, email) => {
+            const user = props.otherUsers?.find(user => user.email === email)
+            return user ? `@${user.name}` : match
+        })
+    }
+    return content
+}
+
+const { 'Meta+Enter': metaEnterKey } = useMagicKeys({
+    passive: false,
+})
+
+watch(() => props.messageCount, (count) => {
+    localPlaceholder.value = (count ?? 0) > 0 ? 'Leave another note' : 'Leave a note'
+}, { immediate: true })
+
+watch(metaEnterKey, (press) => {
+    if (press && message.value.trim())
+        handleSubmit(new Event('submit'))
+})
+
+watch(displayMessage, (value) => {
+    if (value === '') {
+        showMentionModal.value = false
+    }
+})
+</script>
+
+<template>
+    <div
+        flex="~ col"
+        h-full
+        transition
+        rounded-8px
+        relative
+    >
+        <div
+            v-if="replyingTo" p="8px b-16px" bg-gray-200
+            mb--8px
+            b="t-0.5px x-0.5px gray-200"
+            rounded-t-8px body-12-regular relative
+        >
+            <TelaIconButton
+                variant="ghost"
+                size="xs"
+                icon="i-ph-x-circle"
+                color="secondary"
+                absolute top-6px right-6px
+                @click="$emit('cancelReply')"
+            />
+            <div text-gray-600 mb-4px>
+                Replying to {{ replyingTo.author }}
+            </div>
+            <div text-gray-700 line-clamp-1>
+                {{ resolveContent(replyingTo.content) }}
+            </div>
+        </div>
+        <TelaChatCommand
+            :commands="['@']"
+            :mention-props="{
+                members: props.otherUsers,
+                isOpen: showMentionModal,
+                onClose: () => showMentionModal = false,
+                onSelect: insertMention,
+                chatMessage: displayMessage,
+                searchTerm: searchTerm ?? '',
+            }"
+        >
+            <template #mention>
+                <TelaInput
+                    v-model="displayMessage"
+                    type="textarea"
+                    w-full
+                    input-font-class="body-14-medium text-gray-800 leading-20px"
+                    :placeholder="localPlaceholder"
+                    :disabled="isSending"
+                    @input="handleInput"
+                    @keydown.enter.prevent="handleSubmit"
+                >
+                    <template v-if="message?.trim() || isSending" #trailing>
+                        <TelaIconButton
+                            v-if="isSending"
+                            color="primary"
+                            icon="i-ph-circle-notch-light"
+                            animate-spin
+                            :disabled="true"
+                        />
+                        <TelaIconButton
+                            v-else
+                            color="primary"
+                            icon="i-ph-paper-plane-tilt"
+                            :disabled="!message.trim()"
+                            @click="handleSubmit"
+                        />
+                    </template>
+                    <template v-else-if="shouldShowCheckIcon" #trailing>
+                        <TelaIconButton
+                            color="primary"
+                            icon="i-ph-check"
+                            :disabled="true"
+                        />
+                    </template>
+                </TelaInput>
+            </template>
+        </TelaChatCommand>
+    </div>
+</template>