pixelon 0.1.0

package/dist/components/atoms/Input/Input.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const inputStyles = {
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-xs)',
+    },
+    wrapperFullWidth: {
+        width: '100%',
+    },
+    wrapperError: {
+    // Los estilos de error se aplican al input interno
+    },
+    wrapperChat: {
+    // Los estilos de chat se aplican al input interno
+    },
+    label: {
+        fontSize: 'var(--font-size-sm)',
+        fontWeight: 'var(--font-weight-medium)',
+        color: 'var(--color-text)',
+    },
+    container: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    icon: {
+        position: 'absolute',
+        left: 'var(--spacing-md)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--color-text-secondary)',
+    },
+    error: {
+        fontSize: 'var(--font-size-sm)',
+        color: 'var(--color-error)',
+    },
+    input: {
+        width: '100%',
+        padding: 'var(--spacing-sm) var(--spacing-md)',
+        fontFamily: 'var(--font-family-base)',
+        fontSize: 'var(--font-size-base)',
+        lineHeight: 'var(--line-height-normal)',
+        color: 'var(--color-text)',
+        backgroundColor: 'var(--color-background)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--border-radius-md)',
+        transition: 'all 0.2s ease-in-out',
+        '&::placeholder': {
+            color: 'var(--color-text-secondary)',
+        },
+        '&:focus': {
+            outline: 'none',
+            borderColor: 'var(--color-primary)',
+            boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.1)',
+        },
+        '&:disabled': {
+            backgroundColor: 'var(--color-background-alt)',
+            cursor: 'not-allowed',
+        },
+    },
+    inputWithIcon: {
+        paddingLeft: 'calc(var(--spacing-md) * 2 + 16px)',
+    },
+    inputChat: {
+        backgroundColor: 'var(--color-chat-input-bg)',
+        border: '1px solid var(--color-chat-input-border)',
+        borderRadius: 'var(--border-radius-lg)',
+        padding: '0 var(--spacing-lg)',
+        fontSize: 'var(--font-size-base)',
+        lineHeight: 'var(--line-height-relaxed)',
+        height: '40px',
+        minHeight: '40px',
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        '&:focus': {
+            borderColor: 'var(--color-chat-input-focus)',
+            boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.1)',
+        },
+    },
+    inputError: {
+        borderColor: 'var(--color-error)',
+        '&:focus': {
+            borderColor: 'var(--color-error)',
+            boxShadow: '0 0 0 2px rgba(239, 68, 68, 0.1)',
+        },
+    },
+};
+const getInputStyles = (props) => {
+    const { fullWidth = false, error, variant = 'default', icon } = props;
+    const wrapperStyle = {
+        ...inputStyles.wrapper,
+        ...(fullWidth && inputStyles.wrapperFullWidth),
+        ...(error && inputStyles.wrapperError),
+        ...(variant === 'chat' && inputStyles.wrapperChat),
+    };
+    const inputStyle = {
+        ...inputStyles.input,
+        ...(variant === 'chat' && inputStyles.inputChat),
+        ...(error && inputStyles.inputError),
+        ...(icon && inputStyles.inputWithIcon),
+    };
+    return { wrapperStyle, inputStyle };
+};
+export const Input = ({ label, error, icon, fullWidth = false, variant = 'default', className = '', ...props }) => {
+    const { wrapperStyle, inputStyle } = getInputStyles({ fullWidth, error, variant, icon });
+    return (_jsxs("div", { style: wrapperStyle, children: [label && (_jsx("label", { style: inputStyles.label, children: label })), _jsxs("div", { style: inputStyles.container, children: [icon && (_jsx("span", { style: inputStyles.icon, children: icon })), _jsx("input", { style: inputStyle, className: className, ...props })] }), error && (_jsx("span", { style: inputStyles.error, children: error }))] }));
+};
+export default Input;

package/dist/components/atoms/Link/Link.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface LinkProps {
+    href: string;
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'accent';
+    size?: 'small' | 'medium' | 'large';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    underline?: boolean;
+    external?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+export declare const Link: React.FC<LinkProps>;
+export default Link;

package/dist/components/atoms/Link/Link.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Link = ({ href, children, variant = 'primary', size = 'medium', weight = 'normal', underline = true, external = false, className = '', onClick, }) => {
+    const handleClick = (e) => {
+        onClick?.(e);
+    };
+    return (_jsxs("a", { href: href, className: `
+        link
+        link--${variant}
+        link--${size}
+        link--${weight}
+        ${underline ? 'link--underline' : ''}
+        ${external ? 'link--external' : ''}
+        ${className}
+      `, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, children: [children, external && (_jsxs("svg", { className: "link__external-icon", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15,3 21,3 21,9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] }))] }));
+};
+export default Link;

package/dist/components/atoms/SelectMenu/SelectMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface SelectMenuProps {
+    open: boolean;
+    anchorRef: React.RefObject<HTMLElement>;
+    onSelect: (option: string) => void;
+    onClose: () => void;
+}
+export declare const SelectMenu: React.FC<SelectMenuProps>;
+export default SelectMenu;

package/dist/components/atoms/SelectMenu/SelectMenu.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+export const SelectMenu = ({ open, anchorRef, onSelect, onClose }) => {
+    const menuRef = useRef(null);
+    const [menuStyle, setMenuStyle] = useState({});
+    useEffect(() => {
+        if (open && anchorRef.current && menuRef.current) {
+            const rect = anchorRef.current.getBoundingClientRect();
+            const menuHeight = menuRef.current.offsetHeight;
+            setMenuStyle({
+                position: 'absolute',
+                top: rect.top + window.scrollY - menuHeight - 8, // 8px de separación
+                left: rect.left + window.scrollX,
+                zIndex: 1000,
+                minWidth: 180,
+            });
+        }
+    }, [open, anchorRef]);
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "select-menu__backdrop", onClick: onClose, children: _jsx("div", { className: "select-menu", ref: menuRef, style: menuStyle, onClick: e => e.stopPropagation(), children: _jsx("button", { className: "select-menu__item", onClick: () => { onSelect('attachment'); onClose(); }, children: "Agregar fotos y archivos" }) }) }));
+};
+export default SelectMenu;

package/dist/components/atoms/Text/Text.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export 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.ReactNode;
+}
+export declare const Text: React.FC<TextProps>;
+export default Text;

package/dist/components/atoms/Text/Text.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const textStyles = {
+    base: {
+        margin: 0,
+        fontFamily: 'var(--font-family-base)',
+    },
+    variants: {
+        h1: {
+            fontSize: 'var(--font-size-2xl)',
+            lineHeight: 'var(--line-height-tight)',
+            fontWeight: 'var(--font-weight-bold)',
+        },
+        h2: {
+            fontSize: 'var(--font-size-xl)',
+            lineHeight: 'var(--line-height-tight)',
+            fontWeight: 'var(--font-weight-semibold)',
+        },
+        h3: {
+            fontSize: 'var(--font-size-lg)',
+            lineHeight: 'var(--line-height-tight)',
+            fontWeight: 'var(--font-weight-semibold)',
+        },
+        h4: {
+            fontSize: 'var(--font-size-base)',
+            lineHeight: 'var(--line-height-normal)',
+            fontWeight: 'var(--font-weight-semibold)',
+        },
+        body: {
+            fontSize: 'var(--font-size-base)',
+            lineHeight: 'var(--line-height-normal)',
+        },
+        small: {
+            fontSize: 'var(--font-size-sm)',
+            lineHeight: 'var(--line-height-normal)',
+        },
+        caption: {
+            fontSize: 'var(--font-size-xs)',
+            lineHeight: 'var(--line-height-normal)',
+        },
+    },
+    weights: {
+        normal: {
+            fontWeight: 'var(--font-weight-normal)',
+        },
+        medium: {
+            fontWeight: 'var(--font-weight-medium)',
+        },
+        semibold: {
+            fontWeight: 'var(--font-weight-semibold)',
+        },
+        bold: {
+            fontWeight: 'var(--font-weight-bold)',
+        },
+    },
+    colors: {
+        primary: {
+            color: 'var(--color-text)',
+        },
+        secondary: {
+            color: 'var(--color-text-secondary)',
+        },
+        inherit: {
+            color: 'inherit',
+        },
+    },
+    alignment: {
+        left: {
+            textAlign: 'left',
+        },
+        center: {
+            textAlign: 'center',
+        },
+        right: {
+            textAlign: 'right',
+        },
+    },
+};
+const getTextStyles = (props) => {
+    const { variant = 'body', weight = 'normal', color = 'primary', align = 'left' } = props;
+    return {
+        ...textStyles.base,
+        ...textStyles.variants[variant],
+        ...textStyles.weights[weight],
+        ...textStyles.colors[color],
+        ...textStyles.alignment[align],
+    };
+};
+export const Text = ({ variant = 'body', weight = 'normal', color = 'primary', align = 'left', className = '', children, }) => {
+    const Component = variant.startsWith('h') ? variant : 'p';
+    const textStyle = getTextStyles({ variant, weight, color, align });
+    return (_jsx(Component, { style: textStyle, className: className, children: children }));
+};
+export default Text;

package/dist/components/atoms/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/components/atoms/Textarea/Textarea.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const Textarea = React.forwardRef(({ className = '', ...props }, ref) => (_jsx("textarea", { ref: ref, className: `textarea ${className}`, ...props })));
+Textarea.displayName = 'Textarea';
+export default Textarea;

package/dist/components/atoms/logo/Logo.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface LogoProps {
+    className?: string;
+}
+export declare const Logo: React.FC<LogoProps>;
+export default Logo;

package/dist/components/atoms/logo/Logo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Logo = ({ className = '' }) => {
+    return (_jsx("div", { className: `logo ${className}`, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("circle", { cx: "12", cy: "12", r: "8", fill: "black" }) }) }));
+};
+export default Logo;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface AssistantMessageProps {
+    content: string;
+    timestamp: string;
+}
+export declare const AssistantMessage: React.FC<AssistantMessageProps>;
+export default AssistantMessage;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import { Text } from '../../../atoms/Text/Text';
+import { Link } from '../../../atoms/Link/Link';
+export const AssistantMessage = ({ content, timestamp, }) => {
+    return (_jsx("div", { className: "assistant-message", children: _jsxs("div", { className: "assistant-message__content", children: [_jsxs("div", { className: "assistant-message__bubble", children: [_jsx(Text, { variant: "caption", color: "secondary", className: "assistant-message__role", children: "Assistant" }), _jsx("div", { className: "assistant-message__markdown", children: _jsx(ReactMarkdown, { components: {
+                                    a: ({ href, children }) => (_jsx(Link, { href: href || '#', variant: "primary", size: "medium", weight: "bold", underline: false, children: children })),
+                                }, children: content }) })] }), _jsx(Text, { variant: "caption", color: "secondary", className: "assistant-message__timestamp", children: timestamp })] }) }));
+};
+export default AssistantMessage;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AssistantThinkingIndicator: React.FC;
+export default AssistantThinkingIndicator;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Text } from '../../../atoms/Text/Text';
+const messages = {
+    short: ["Revisando...", "Procesando...", "Analizando..."],
+    medium: ["Analizando tu consulta...", "Estoy viendo cómo resolverlo...", "Buscando la mejor manera de ayudarte..."],
+    long: ["Sigo con esto. Un momento más.", "Estoy en eso, ya te respondo.", "Ya casi lo tengo."],
+    veryLong: ["Esto está tardando mas de lo habitual.", "Esto lleva un poco más de tiempo.", "Lleva un poco más de lo normal."],
+};
+const getRandomMessage = (category) => {
+    const categoryMessages = messages[category];
+    return categoryMessages[Math.floor(Math.random() * categoryMessages.length)];
+};
+export const AssistantThinkingIndicator = () => {
+    const [displayedMessage, setDisplayedMessage] = useState(getRandomMessage('short'));
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setElapsedSeconds(prev => prev + 1);
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    useEffect(() => {
+        if (elapsedSeconds === 6) {
+            setDisplayedMessage(getRandomMessage('medium'));
+        }
+        else if (elapsedSeconds === 13) {
+            setDisplayedMessage(getRandomMessage('long'));
+        }
+        else if (elapsedSeconds === 21) {
+            setDisplayedMessage(getRandomMessage('veryLong'));
+        }
+    }, [elapsedSeconds]);
+    return (_jsx("div", { className: "assistant-thinking-indicator", children: _jsx("div", { className: "assistant-thinking-indicator__content", children: _jsxs("div", { className: "assistant-thinking-indicator__bubble", children: [_jsx(Text, { variant: "caption", color: "secondary", className: "assistant-thinking-indicator__role", children: "Assistant" }), _jsx("div", { className: "assistant-thinking-indicator__text-container", children: _jsx(Text, { variant: "body", color: "primary", className: "assistant-thinking-indicator__wave-text", children: displayedMessage.split('').map((char, index) => (_jsx("span", { style: { animationDelay: `${index * 0.05}s` }, children: char === ' ' ? '\u00A0' : char }, index))) }) })] }) }) }));
+};
+export default AssistantThinkingIndicator;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ChatHeaderProps {
+    title?: string;
+}
+export declare const ChatHeader: React.FC<ChatHeaderProps>;
+export default ChatHeader;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Logo } from '../../../atoms/logo/Logo';
+export const ChatHeader = ({ title = 'Asistente' }) => {
+    return (_jsx("header", { className: "chat-header", children: _jsxs("div", { className: "chat-header__content", children: [_jsx(Logo, { className: "chat-header__logo" }), _jsx("span", { className: "chat-header__title", children: title })] }) }));
+};
+export default ChatHeader;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ChatInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onSend: () => void;
+    onSendWithFiles?: (content: string, files: File[]) => void;
+    onInputKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onInputFocus?: () => void;
+    disabled?: boolean;
+    maxFiles?: number;
+    accept?: string;
+    attachments?: File[];
+    onAttachmentsChange?: (files: File[]) => void;
+    textareaRef?: React.RefObject<HTMLTextAreaElement>;
+}
+export declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLFormElement>>;
+export default ChatInput;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, forwardRef } from 'react';
+import { Button } from '../../../atoms/Button/Button';
+import { Textarea } from '../../../atoms/Textarea/Textarea';
+import { SelectMenu } from '../../../atoms/SelectMenu/SelectMenu';
+import { AttachmentPreview } from '../../../atoms/AttachmentPreview/AttachmentPreview';
+import { FullscreenViewer } from '../FullscreenViewer/FullscreenViewer';
+export const ChatInput = forwardRef(({ value, onChange, onSend, onSendWithFiles, onInputKeyDown, onInputFocus, disabled = false, maxFiles = 5, accept = 'image/*,video/*,application/pdf', attachments = [], onAttachmentsChange, textareaRef, }, ref) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [isViewerOpen, setIsViewerOpen] = useState(false);
+    const [viewerIndex, setViewerIndex] = useState(null);
+    const moreBtnRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const handleMenuSelect = (option) => {
+        if (option === 'attachment') {
+            fileInputRef.current?.click();
+        }
+    };
+    const handleFileChange = (e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const newFiles = Array.from(files).slice(0, maxFiles - attachments.length);
+            const updated = [...attachments, ...newFiles].slice(0, maxFiles);
+            onAttachmentsChange?.(updated);
+            e.target.value = '';
+        }
+    };
+    const handleRemoveAttachment = (index) => {
+        const updated = attachments.filter((_, i) => i !== index);
+        onAttachmentsChange?.(updated);
+    };
+    const handleAttachmentClick = (file) => {
+        const idx = attachments.findIndex(f => f === file);
+        setViewerIndex(idx);
+        setIsViewerOpen(true);
+    };
+    const handleCloseViewer = () => {
+        setIsViewerOpen(false);
+        setViewerIndex(null);
+    };
+    const handleChangeIndex = (newIndex) => {
+        setViewerIndex(newIndex);
+    };
+    const handleSend = () => {
+        if (attachments.length > 0 && onSendWithFiles) {
+            onSendWithFiles(value, attachments);
+            onAttachmentsChange?.([]);
+        }
+        else {
+            onSend();
+        }
+    };
+    return (_jsxs("form", { ref: ref, className: "chat__input", onSubmit: e => { e.preventDefault(); handleSend(); }, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, multiple: maxFiles > 1, accept: accept, onChange: handleFileChange }), _jsxs("div", { className: "chat__input-stack", children: [attachments.length > 0 && (_jsxs("div", { className: "chat__attachments-wrapper", style: { position: 'relative' }, children: [_jsx("div", { className: "chat__attachments", children: attachments.map((file, idx) => (_jsx(AttachmentPreview, { file: file, onRemove: () => handleRemoveAttachment(idx), onClick: () => handleAttachmentClick(file) }, file.name + file.size + idx))) }), _jsxs("div", { className: "chat__attachments-count", children: [attachments.length, " archivo", attachments.length > 1 ? 's' : ''] })] })), _jsx(Textarea, { className: "chat__textarea", placeholder: "Type a message...", value: value, onChange: onChange, onKeyDown: onInputKeyDown, onFocus: onInputFocus, rows: 1, disabled: disabled, ref: textareaRef }), _jsxs("div", { className: "chat__actions", children: [_jsxs("div", { className: "chat__actions-left", children: [_jsx(Button, { type: "button", className: "chat__icon-btn", "aria-label": "Add file", tabIndex: -1, 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: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), ref: moreBtnRef, onClick: () => setMenuOpen(true) }), _jsx(SelectMenu, { open: menuOpen, anchorRef: moreBtnRef, onSelect: handleMenuSelect, onClose: () => setMenuOpen(false) })] }), _jsxs("div", { className: "chat__actions-right", children: [_jsx(Button, { type: "button", className: "chat__icon-btn", "aria-label": "Microphone", tabIndex: -1, icon: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }), _jsx("path", { d: "M5 10v2a7 7 0 0 0 14 0v-2" }), _jsx("line", { x1: "12", y1: "22", x2: "12", y2: "18" }), _jsx("line", { x1: "8", y1: "22", x2: "16", y2: "22" })] }) }), _jsx(Button, { variant: "circle", type: "submit", 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" })] }), "aria-label": "Send", disabled: disabled })] })] })] }), isViewerOpen && viewerIndex !== null && attachments.length > 0 && (_jsx(FullscreenViewer, { isOpen: isViewerOpen, onClose: handleCloseViewer, files: attachments, currentIndex: viewerIndex, onChangeIndex: handleChangeIndex }))] }));
+});
+ChatInput.displayName = 'ChatInput';
+export default ChatInput;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface FileViewerProps {
+    files: File[];
+    onClose?: () => void;
+}
+export declare const FileViewer: React.FC<FileViewerProps>;
+export default FileViewer;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FullscreenViewer } from '../FullscreenViewer/FullscreenViewer';
+export const FileViewer = ({ files, onClose, }) => {
+    const [currentFileIndex, setCurrentFileIndex] = useState(0);
+    const [isViewerOpen, setIsViewerOpen] = useState(false);
+    const currentFile = files[currentFileIndex];
+    const handleOpenViewer = (index) => {
+        setCurrentFileIndex(index);
+        setIsViewerOpen(true);
+    };
+    const handleCloseViewer = () => {
+        setIsViewerOpen(false);
+        onClose?.();
+    };
+    const handleChangeIndex = (newIndex) => {
+        setCurrentFileIndex(newIndex);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'ArrowLeft') {
+            handleChangeIndex((currentFileIndex - 1 + files.length) % files.length);
+        }
+        else if (e.key === 'ArrowRight') {
+            handleChangeIndex((currentFileIndex + 1) % files.length);
+        }
+    };
+    if (!files || files.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "file-viewer", children: _jsx("div", { className: "file-viewer__grid", children: files.map((file, index) => {
+                        const isImage = file.type.startsWith('image/');
+                        const isVideo = file.type.startsWith('video/');
+                        const isPdf = file.type === 'application/pdf';
+                        return (_jsx("div", { className: "file-viewer__item", onClick: () => handleOpenViewer(index), onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleOpenViewer(index);
+                                }
+                            }, tabIndex: 0, role: "button", "aria-label": `Ver ${file.name} en pantalla completa`, children: isImage ? (_jsxs("div", { className: "file-viewer__image-container", children: [_jsx("img", { src: URL.createObjectURL(file), alt: file.name, className: "file-viewer__image" }), _jsx("div", { className: "file-viewer__overlay", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.35-4.35" }), _jsx("path", { d: "M11 8v6" }), _jsx("path", { d: "M8 11h6" })] }) })] })) : (_jsxs("div", { className: "file-viewer__file-container", children: [_jsxs("div", { className: "file-viewer__file-icon", children: [isVideo && (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }), _jsx("polygon", { points: "10 9 15 12 10 15 10 9" })] })), isPdf && (_jsxs("div", { className: "file-viewer__pdf-icon", children: [_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10,9 9,9 8,9" })] }), _jsx("span", { children: "PDF" })] })), !isVideo && !isPdf && (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10,9 9,9 8,9" })] }))] }), _jsxs("div", { className: "file-viewer__file-info", children: [_jsx("div", { className: "file-viewer__file-name", children: file.name }), _jsx("div", { className: "file-viewer__file-type", children: file.type || 'Archivo' })] })] })) }, `${file.name}-${file.size}-${index}`));
+                    }) }) }), isViewerOpen && currentFile && (_jsx("div", { onKeyDown: handleKeyDown, tabIndex: -1, children: _jsx(FullscreenViewer, { isOpen: isViewerOpen, onClose: handleCloseViewer, files: files, currentIndex: currentFileIndex, onChangeIndex: handleChangeIndex }) }))] }));
+};
+export default FileViewer;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface FullscreenViewerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    files: File[];
+    currentIndex: number;
+    onChangeIndex: (newIndex: number) => void;
+}
+export declare const FullscreenViewer: React.FC<FullscreenViewerProps>;
+export default FullscreenViewer;

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Modal } from '../Modal/Modal';
+import { Button } from '../../../atoms/Button/Button';
+export const FullscreenViewer = ({ isOpen, onClose, files, currentIndex, onChangeIndex, }) => {
+    const file = files[currentIndex];
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    useEffect(() => {
+        setImageLoaded(false);
+        setImageError(false);
+    }, [file]);
+    const isImage = file.type.startsWith('image/');
+    const isVideo = file.type.startsWith('video/');
+    const isPdf = file.type === 'application/pdf';
+    const formatSize = (size) => {
+        if (size < 1024)
+            return `${size} B`;
+        if (size < 1024 * 1024)
+            return `${(size / 1024).toFixed(1)} KB`;
+        return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+    };
+    const getFileIcon = () => {
+        if (isVideo) {
+            return (_jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }), _jsx("polygon", { points: "10 9 15 12 10 15 10 9" })] }));
+        }
+        if (isPdf) {
+            return (_jsxs("div", { className: "fullscreen-viewer__pdf-icon", children: [_jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10,9 9,9 8,9" })] }), _jsx("span", { children: "PDF" })] }));
+        }
+        return (_jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10,9 9,9 8,9" })] }));
+    };
+    const handleDownload = () => {
+        const url = URL.createObjectURL(file);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+    const handlePrevious = () => {
+        onChangeIndex((currentIndex - 1 + files.length) % files.length);
+    };
+    const handleNext = () => {
+        onChangeIndex((currentIndex + 1) % files.length);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'ArrowLeft')
+            handlePrevious();
+        if (e.key === 'ArrowRight')
+            handleNext();
+    };
+    const renderContent = () => {
+        if (isImage) {
+            return (_jsxs("div", { className: "fullscreen-viewer__image-container", children: [!imageLoaded && !imageError && (_jsxs("div", { className: "fullscreen-viewer__loading", children: [_jsx("div", { className: "fullscreen-viewer__spinner" }), _jsx("p", { children: "Cargando imagen..." })] })), imageError && (_jsxs("div", { className: "fullscreen-viewer__error", children: [_jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }), _jsx("p", { children: "Error al cargar la imagen" })] })), _jsx("img", { src: URL.createObjectURL(file), alt: file.name, className: `fullscreen-viewer__image ${imageLoaded ? 'fullscreen-viewer__image--loaded' : ''}`, onLoad: () => setImageLoaded(true), onError: () => setImageError(true), style: { display: imageError ? 'none' : 'block' } })] }));
+        }
+        if (isVideo) {
+            return (_jsx("div", { className: "fullscreen-viewer__video-container", children: _jsx("video", { controls: true, className: "fullscreen-viewer__video", src: URL.createObjectURL(file), children: "Tu navegador no soporta el elemento de video." }) }));
+        }
+        return (_jsxs("div", { className: "fullscreen-viewer__file-container", children: [_jsx("div", { className: "fullscreen-viewer__file-icon", children: getFileIcon() }), _jsxs("div", { className: "fullscreen-viewer__file-info", children: [_jsx("h3", { className: "fullscreen-viewer__file-name", children: file.name }), _jsxs("p", { className: "fullscreen-viewer__file-details", children: [file.type || 'Archivo', " \u00B7 ", formatSize(file.size)] }), _jsx(Button, { onClick: handleDownload, className: "fullscreen-viewer__download-btn", icon: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7,10 12,15 17,10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), children: "Descargar" })] })] }));
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: undefined, showCloseButton: false, closeOnOverlayClick: true, closeOnEscape: true, children: _jsxs("div", { className: "fullscreen-viewer", onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsxs("div", { className: "fullscreen-viewer__floating-header", children: [_jsx("span", { className: "fullscreen-viewer__floating-title", children: file.name }), _jsx("button", { className: "fullscreen-viewer__floating-close", onClick: onClose, "aria-label": "Cerrar visor", type: "button", children: _jsxs("svg", { width: "28", height: "28", 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" })] }) })] }), files.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { className: "fullscreen-viewer__arrow fullscreen-viewer__arrow--left", variant: "circle", type: "button", onClick: handlePrevious, "aria-label": "Archivo anterior", icon: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), _jsx(Button, { className: "fullscreen-viewer__arrow fullscreen-viewer__arrow--right", variant: "circle", type: "button", onClick: handleNext, "aria-label": "Archivo siguiente", icon: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9,18 15,12 9,6" }) }) })] })), renderContent(), files.length > 1 && (_jsxs("div", { className: "fullscreen-viewer__counter", children: [currentIndex + 1, " de ", files.length] }))] }) }));
+};
+export default FullscreenViewer;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type MessageStatusType = 'sending' | 'sent' | 'failed';
+interface MessageStatusProps {
+    status: MessageStatusType;
+    className?: string;
+    onRetry?: () => void;
+}
+export declare const MessageStatus: React.FC<MessageStatusProps>;
+export default MessageStatus;