'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { ComposerPrimitive, ThreadPrimitive } from '@assistant-ui/react';
import { SendHorizontal, CircleStop, Paperclip } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
import { AttachmentChip } from '../../common/attachment-chip/index.js';
export function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, disabled, }) {
    const { t } = useTranslation('web');
    const [isFocused, setIsFocused] = useState(false);
    const containerRef = useRef(null);
    return (_jsx(ComposerPrimitive.Root, { className: cn('shrink-0 border-t p-3', disabled && 'pointer-events-none opacity-50'), children: _jsx("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, className: cn('flex flex-col gap-1.5 rounded-md border-2 border-transparent p-1 transition-colors', isDragOver && 'border-primary/50 bg-primary/5'), children: _jsxs("div", { ref: containerRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn('border-input flex flex-col overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow]', isFocused && 'ring-ring/50 border-ring ring-[3px]'), children: [_jsx(ComposerPrimitive.Input, { rows: 1, autoFocus: true, placeholder: t('chat.writeMessage'), onPaste: onPaste, className: "max-h-[4.5rem] min-h-0 resize-none rounded-none border-0 px-3 py-2.5 text-sm shadow-none focus:outline-none focus-visible:ring-0" }), attachments.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-3 py-2", children: attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => onRemoveAttachment(file.id), loading: file.loading, notes: file.notes, onNotesChange: (notes) => onNotesChange(file.id, notes) }, file.id))) })) : null, uploadError ? _jsx("p", { className: "text-destructive px-3 pb-2 text-xs", children: uploadError }) : null, _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [agentPicker, _jsx("div", { className: "flex-1" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onPickFiles, "aria-label": t('chat.attachFiles'), className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors", children: _jsx(Paperclip, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: t('chat.attachFiles') })] }), _jsx(ChatComposerAction, {})] })] }) }) }));
}
function ChatComposerAction() {
    return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { className: cn('bg-primary text-primary-foreground inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', 'hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-30', 'transition-colors'), children: _jsx(SendHorizontal, { className: "size-3.5" }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { className: cn('bg-destructive/10 text-destructive inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', 'hover:bg-destructive/20', 'transition-colors'), children: _jsx(CircleStop, { className: "size-3.5" }) }) })] }));
}
