pixelon 0.1.0

package/dist/components/molecules/chat/MessageStatus/MessageStatus.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../atoms/Text/Text';
+const statusText = {
+    sending: 'Enviando...',
+    sent: 'Enviado',
+};
+export const MessageStatus = ({ status, className = '', onRetry }) => {
+    const statusClassName = `message-status ${status === 'failed' ? 'message-status--failed' : ''} ${className}`;
+    if (status === 'failed') {
+        return (_jsxs(Text, { variant: "caption", className: statusClassName, children: ["No enviado.", ' ', _jsx("span", { className: "message-status__retry", onClick: onRetry, role: "button", tabIndex: 0, children: "Reintentar" })] }));
+    }
+    return (_jsx(Text, { variant: "caption", color: "secondary", className: statusClassName, children: statusText[status] }));
+};
+export default MessageStatus;

package/dist/components/molecules/chat/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: string;
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+}
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/molecules/chat/Modal/Modal.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Button } from '../../../atoms/Button/Button';
+export const Modal = ({ isOpen, onClose, children, title, showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, }) => {
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && closeOnEscape) {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose, closeOnEscape]);
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget && closeOnOverlayClick) {
+            onClose();
+        }
+    };
+    return (_jsx("div", { className: "modal-overlay", onClick: handleOverlayClick, children: _jsxs("div", { className: "modal", children: [(title || showCloseButton) && (_jsxs("div", { className: "modal__header", children: [title && _jsx("h2", { className: "modal__title", children: title }), showCloseButton && (_jsx(Button, { type: "button", className: "modal__close-btn", onClick: onClose, "aria-label": "Cerrar", icon: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] })), _jsx("div", { className: "modal__content", children: children })] }) }));
+};
+export default Modal;

package/dist/components/molecules/chat/UserAttachments/UserAttachments.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface UserAttachmentsProps {
+    files: File[];
+}
+export declare const UserAttachments: React.FC<UserAttachmentsProps>;
+export default UserAttachments;

package/dist/components/molecules/chat/UserAttachments/UserAttachments.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileViewer } from '../FileViewer/FileViewer';
+export const UserAttachments = ({ files }) => {
+    if (!files || files.length === 0)
+        return null;
+    return (_jsx("div", { className: "user-attachments", children: _jsx(FileViewer, { files: files }) }));
+};
+export default UserAttachments;

package/dist/components/molecules/chat/UserMessage/UserMessage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MessageStatusType } from '../MessageStatus/MessageStatus';
+export interface UserMessageProps {
+    content: string;
+    timestamp: string;
+    status?: MessageStatusType;
+    onRetry?: () => void;
+    files?: File[];
+}
+export declare const UserMessage: React.FC<UserMessageProps>;
+export default UserMessage;

package/dist/components/molecules/chat/UserMessage/UserMessage.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../atoms/Text/Text';
+import { MessageStatus } from '../MessageStatus/MessageStatus';
+import { UserAttachments } from '../UserAttachments/UserAttachments';
+export const UserMessage = ({ content, timestamp, status, onRetry, files = [], }) => {
+    return (_jsx("div", { className: "user-message", children: _jsxs("div", { className: "user-message__content", children: [_jsxs("div", { className: "user-message__bubble", children: [_jsx(Text, { variant: "caption", color: "secondary", className: "user-message__role", children: "User" }), files.length > 0 && _jsx(UserAttachments, { files: files }), _jsx(Text, { variant: "body", children: content })] }), _jsxs("div", { className: "user-message__meta", children: [status && _jsx(MessageStatus, { status: status, onRetry: onRetry }), (status !== 'sending' && status !== 'failed') && (_jsx(Text, { variant: "caption", color: "secondary", className: "user-message__timestamp", children: timestamp }))] })] }) }));
+};
+export default UserMessage;

package/dist/components/organisms/chat/Chat.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { MessageStatusType } from '../../molecules/chat/MessageStatus/MessageStatus';
+export interface ChatMessage {
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: string;
+    date: Date;
+    status?: MessageStatusType;
+    files?: File[];
+}
+export interface ChatProps {
+    messages: ChatMessage[];
+    onSend: (message: string) => void;
+    onSendWithFiles?: (content: string, files: File[]) => void;
+    isAssistantThinking: boolean;
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    onRetry: (message: ChatMessage) => void;
+}
+export declare const Chat: React.FC<ChatProps>;
+export default Chat;

package/dist/components/organisms/chat/Chat.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect, useState } from 'react';
+import { UserMessage } from '../../molecules/chat/UserMessage/UserMessage';
+import { AssistantMessage } from '../../molecules/chat/AssistantMessage/AssistantMessage';
+import { AssistantThinkingIndicator } from '../../molecules/chat/AssistantThinkingIndicator/AssistantThinkingIndicator';
+import { Button } from '../../atoms/Button/Button';
+import { DateDivider } from '../../atoms/DateDivider/DateDivider';
+import { ChatInput } from '../../molecules/chat/ChatInput/ChatInput';
+import { ChatHeader } from '../../molecules/chat/ChatHeader/ChatHeader';
+const groupMessagesByDate = (messages) => {
+    const groups = [];
+    messages.forEach(message => {
+        const messageDate = new Date(message.date.getFullYear(), message.date.getMonth(), message.date.getDate());
+        const existingGroup = groups.find(group => {
+            const groupDate = new Date(group.date.getFullYear(), group.date.getMonth(), group.date.getDate());
+            return groupDate.getTime() === messageDate.getTime();
+        });
+        if (existingGroup) {
+            existingGroup.messages.push(message);
+        }
+        else {
+            groups.push({ date: messageDate, messages: [message] });
+        }
+    });
+    return groups.sort((a, b) => a.date.getTime() - b.date.getTime());
+};
+export const Chat = ({ messages, onSend, onSendWithFiles, isAssistantThinking, inputValue, onInputChange, onRetry, }) => {
+    const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+    const [attachments, setAttachments] = useState([]);
+    const messagesEndRef = useRef(null);
+    const messagesContainerRef = useRef(null);
+    const layoutRef = useRef(null);
+    const initialHeightRef = useRef(null);
+    const isKeyboardOpenRef = useRef(false);
+    const textareaRef = useRef(null);
+    // Configurar altura de la aplicación
+    useEffect(() => {
+        const setAppHeight = () => {
+            const height = window.visualViewport
+                ? window.visualViewport.height
+                : window.innerHeight;
+            document.documentElement.style.setProperty('--app-height', `${height}px`);
+        };
+        setAppHeight();
+        window.addEventListener('resize', setAppHeight);
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', setAppHeight);
+            window.visualViewport.addEventListener('scroll', setAppHeight);
+        }
+        return () => {
+            window.removeEventListener('resize', setAppHeight);
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', setAppHeight);
+                window.visualViewport.removeEventListener('scroll', setAppHeight);
+            }
+        };
+    }, []);
+    // Manejar el teclado virtual
+    useEffect(() => {
+        const layout = layoutRef.current;
+        if (!layout)
+            return;
+        let originalPosition = '';
+        let originalTop = '';
+        const threshold = 100; // px, para detectar si el teclado salió
+        const setInitialHeight = () => {
+            initialHeightRef.current = window.visualViewport
+                ? window.visualViewport.height
+                : window.innerHeight;
+        };
+        setInitialHeight();
+        const onViewportResize = () => {
+            const currentHeight = window.visualViewport
+                ? window.visualViewport.height
+                : window.innerHeight;
+            const initialHeight = initialHeightRef.current;
+            if (initialHeight && !isKeyboardOpenRef.current && initialHeight - currentHeight > threshold) {
+                // El teclado salió
+                isKeyboardOpenRef.current = true;
+                originalPosition = layout.style.position;
+                originalTop = layout.style.top;
+                layout.style.position = 'absolute';
+                layout.style.top = '0';
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+            else if (initialHeight && isKeyboardOpenRef.current && initialHeight - currentHeight <= threshold) {
+                // El teclado se ocultó
+                isKeyboardOpenRef.current = false;
+                layout.style.position = originalPosition;
+                layout.style.top = originalTop;
+            }
+        };
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', onViewportResize);
+        }
+        else {
+            window.addEventListener('resize', onViewportResize);
+        }
+        return () => {
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', onViewportResize);
+            }
+            else {
+                window.removeEventListener('resize', onViewportResize);
+            }
+        };
+    }, []);
+    // Restaurar foco cuando el teclado virtual se oculta
+    useEffect(() => {
+        const handleViewportChange = () => {
+            if (!isKeyboardOpenRef.current && textareaRef.current) {
+                // El teclado se ocultó, restaurar foco
+                setTimeout(() => {
+                    textareaRef.current?.focus();
+                }, 100);
+            }
+        };
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', handleViewportChange);
+        }
+        return () => {
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', handleViewportChange);
+            }
+        };
+    }, []);
+    // Mantener scroll en la parte superior cuando el teclado está abierto
+    useEffect(() => {
+        const handleScroll = () => {
+            if (isKeyboardOpenRef.current) {
+                window.scrollTo(0, 0);
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    // Scroll automático siempre al fondo cuando cambian los mensajes o el estado de "pensando"
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            messagesEndRef.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end'
+            });
+        });
+    }, [messages, isAssistantThinking]);
+    // Mostrar botón de scroll manual solo si el usuario no está al fondo
+    useEffect(() => {
+        let timeout = null;
+        const handleScroll = () => {
+            if (!messagesContainerRef.current)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            const isAtBottom = distanceFromBottom < 30;
+            if (isAtBottom) {
+                setShowScrollToBottom(false);
+                if (timeout)
+                    clearTimeout(timeout);
+            }
+            else {
+                setShowScrollToBottom(false);
+                if (timeout)
+                    clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    if (messagesContainerRef.current) {
+                        const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+                        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+                        if (distanceFromBottom >= 30) {
+                            setShowScrollToBottom(true);
+                        }
+                    }
+                }, 500);
+            }
+        };
+        const container = messagesContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', handleScroll, { passive: true });
+            handleScroll();
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener('scroll', handleScroll);
+            }
+            if (timeout)
+                clearTimeout(timeout);
+        };
+    }, [messages, isAssistantThinking]);
+    // Mantener foco en el input automáticamente
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (textareaRef.current) {
+                textareaRef.current.focus();
+            }
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    // Mantener foco después de que cambien los mensajes
+    useEffect(() => {
+        if (!isAssistantThinking && textareaRef.current) {
+            const timer = setTimeout(() => {
+                textareaRef.current?.focus();
+            }, 50);
+            return () => clearTimeout(timer);
+        }
+    }, [messages, isAssistantThinking]);
+    const handleAttachmentsChange = (files) => {
+        setAttachments(files);
+    };
+    const handleInputKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSendWithFiles(inputValue, attachments);
+        }
+    };
+    const handleSendWithFiles = (content, files) => {
+        if (!content.trim() && files.length === 0)
+            return;
+        if (files.length > 0 && onSendWithFiles) {
+            onSendWithFiles(content, files);
+        }
+        else {
+            onSend(content);
+        }
+        onInputChange && onInputChange('');
+        setAttachments([]);
+        // Mantener el foco en el input para que el teclado no se oculte
+        requestAnimationFrame(() => {
+            if (textareaRef.current) {
+                textareaRef.current.focus();
+            }
+        });
+    };
+    const handleSubmit = () => {
+        handleSendWithFiles(inputValue, attachments);
+    };
+    const handleScrollToBottom = () => {
+        requestAnimationFrame(() => {
+            messagesEndRef.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end'
+            });
+        });
+    };
+    // Mantener foco en el input siempre que sea posible
+    const handleMainClick = (e) => {
+        // Solo quitar el foco si se hace clic en el área principal (no en botones o elementos interactivos)
+        if (e.target === e.currentTarget) {
+            if (textareaRef.current) {
+                textareaRef.current.blur();
+            }
+        }
+    };
+    // Restaurar foco cuando se hace clic en el input
+    const handleInputFocus = () => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    };
+    // Restaurar foco cuando se hace clic en cualquier parte del footer
+    const handleFooterClick = (e) => {
+        // Si se hace clic en el botón de scroll, mantener el foco actual
+        if (e.target instanceof Element && e.target.closest('.chat__scroll-to-bottom')) {
+            // Si el teclado está abierto, mantener el foco para que no se cierre
+            if (isKeyboardOpenRef.current && textareaRef.current) {
+                textareaRef.current.focus();
+            }
+            return;
+        }
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    };
+    const messageGroups = groupMessagesByDate(messages);
+    return (_jsxs("div", { className: "chat-layout", ref: layoutRef, children: [_jsx("header", { className: "chat-header", children: _jsx(ChatHeader, {}) }), _jsxs("main", { className: "chat-main", ref: messagesContainerRef, onClick: handleMainClick, children: [messageGroups.map((group, groupIndex) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { date: group.date }), group.messages.map((msg, msgIndex) => (msg.role === 'user' ? (_jsx(UserMessage, { content: msg.content, timestamp: msg.timestamp, status: msg.status, onRetry: msg.status === 'failed' ? () => onRetry(msg) : undefined, files: msg.files }, `${groupIndex}-${msgIndex}`)) : (_jsx(AssistantMessage, { content: msg.content, timestamp: msg.timestamp }, `${groupIndex}-${msgIndex}`))))] }, `${group.date.getTime()}-${groupIndex}`))), isAssistantThinking && _jsx(AssistantThinkingIndicator, {}), _jsx("div", { ref: messagesEndRef })] }), _jsxs("footer", { className: "chat-footer", onClick: handleFooterClick, children: [_jsx(ChatInput, { value: inputValue, onChange: e => onInputChange(e.target.value), onSend: handleSubmit, onSendWithFiles: onSendWithFiles, onInputKeyDown: handleInputKeyDown, attachments: attachments, onAttachmentsChange: handleAttachmentsChange, textareaRef: textareaRef, onInputFocus: handleInputFocus }), showScrollToBottom && (_jsx(Button, { className: "chat__scroll-to-bottom", variant: "circle", onClick: handleScrollToBottom, "aria-label": "Ir al final", icon: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 8v8", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M8 12l4-4 4 4", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] })] }));
+};
+export default Chat;

package/dist/components/organisms/chat/index.d.ts

@@ -0,0 +1 @@
+export { Chat } from './Chat';

package/dist/components/organisms/chat/index.js

@@ -0,0 +1 @@
+export { Chat } from './Chat';

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import React__default from 'react';
+
+declare const Button: any;
+
+interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    icon?: React__default.ReactNode;
+    fullWidth?: boolean;
+    variant?: 'default' | 'chat';
+}
+declare const Input: React__default.FC<InputProps>;
+
+interface TextProps {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'small' | 'caption';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: 'primary' | 'secondary' | 'inherit';
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+    children: React__default.ReactNode;
+}
+declare const Text: React__default.FC<TextProps>;
+
+declare const Textarea: any;
+
+interface LinkProps {
+    href: string;
+    children: React__default.ReactNode;
+    variant?: 'primary' | 'secondary' | 'accent';
+    size?: 'small' | 'medium' | 'large';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    underline?: boolean;
+    external?: boolean;
+    className?: string;
+    onClick?: (e: React__default.MouseEvent<HTMLAnchorElement>) => void;
+}
+declare const Link: React__default.FC<LinkProps>;
+
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'user' | 'assistant';
+    className?: string;
+}
+declare const Avatar: React__default.FC<AvatarProps>;
+
+interface AttachmentPreviewProps {
+    file: File;
+    onRemove?: () => void;
+    onClick?: () => void;
+}
+declare const AttachmentPreview: React__default.FC<AttachmentPreviewProps>;
+
+interface SelectMenuProps {
+    open: boolean;
+    anchorRef: React__default.RefObject<HTMLElement>;
+    onSelect: (option: string) => void;
+    onClose: () => void;
+}
+declare const SelectMenu: React__default.FC<SelectMenuProps>;
+
+interface DateDividerProps {
+    date: Date;
+    className?: string;
+}
+declare const DateDivider: React__default.FC<DateDividerProps>;
+
+interface LogoProps {
+    className?: string;
+}
+declare const Logo: React__default.FC<LogoProps>;
+
+interface AssistantMessageProps {
+    content: string;
+    timestamp: string;
+}
+declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
+
+declare const AssistantThinkingIndicator: React__default.FC;
+
+interface ChatHeaderProps {
+    title?: string;
+}
+declare const ChatHeader: React__default.FC<ChatHeaderProps>;
+
+interface ChatInputProps {
+    value: string;
+    onChange: (e: React__default.ChangeEvent<HTMLTextAreaElement>) => void;
+    onSend: () => void;
+    onSendWithFiles?: (content: string, files: File[]) => void;
+    onInputKeyDown?: (e: React__default.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onInputFocus?: () => void;
+    disabled?: boolean;
+    maxFiles?: number;
+    accept?: string;
+    attachments?: File[];
+    onAttachmentsChange?: (files: File[]) => void;
+    textareaRef?: React__default.RefObject<HTMLTextAreaElement>;
+}
+declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLFormElement>>;
+
+interface FileViewerProps {
+    files: File[];
+    onClose?: () => void;
+}
+declare const FileViewer: React__default.FC<FileViewerProps>;
+
+interface FullscreenViewerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    files: File[];
+    currentIndex: number;
+    onChangeIndex: (newIndex: number) => void;
+}
+declare const FullscreenViewer: React__default.FC<FullscreenViewerProps>;
+
+type MessageStatusType = 'sending' | 'sent' | 'failed';
+interface MessageStatusProps {
+    status: MessageStatusType;
+    className?: string;
+    onRetry?: () => void;
+}
+declare const MessageStatus: React__default.FC<MessageStatusProps>;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React__default.ReactNode;
+    title?: string;
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+}
+declare const Modal: React__default.FC<ModalProps>;
+
+interface UserAttachmentsProps {
+    files: File[];
+}
+declare const UserAttachments: React__default.FC<UserAttachmentsProps>;
+
+interface UserMessageProps {
+    content: string;
+    timestamp: string;
+    status?: MessageStatusType;
+    onRetry?: () => void;
+    files?: File[];
+}
+declare const UserMessage: React__default.FC<UserMessageProps>;
+
+interface ChatMessage {
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: string;
+    date: Date;
+    status?: MessageStatusType;
+    files?: File[];
+}
+interface ChatProps {
+    messages: ChatMessage[];
+    onSend: (message: string) => void;
+    onSendWithFiles?: (content: string, files: File[]) => void;
+    isAssistantThinking: boolean;
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    onRetry: (message: ChatMessage) => void;
+}
+declare const Chat: React__default.FC<ChatProps>;
+
+export { AssistantMessage, AssistantThinkingIndicator, AttachmentPreview, Avatar, Button, Chat, ChatHeader, ChatInput, DateDivider, FileViewer, FullscreenViewer, Input, Link, Logo, MessageStatus, Modal, SelectMenu, Text, Textarea, UserAttachments, UserMessage };