rowboat/apps/rowboat/components/common/compose-box-copilot.tsx

'use client';

import { Button, Spinner, Tooltip } from "@heroui/react";
import { useRef, useState, useEffect } from "react";
import { Textarea } from "@/components/ui/textarea";

// Add a type to support both message formats
type FlexibleMessage = {
    role: 'user' | 'assistant' | 'system' | 'tool';
    content: string | any;
    version?: string;
    chatId?: string;
    createdAt?: string;
    // Add any other optional fields that might be needed
};

interface ComposeBoxCopilotProps {
    handleUserMessage: (message: string) => void;
    messages: any[];
    loading: boolean;
    initialFocus?: boolean;
    shouldAutoFocus?: boolean;
    onFocus?: () => void;
    onCancel?: () => void;
    statusBar?: any;
}

export function ComposeBoxCopilot({
    handleUserMessage,
    messages,
    loading,
    initialFocus = false,
    shouldAutoFocus = false,
    onFocus,
    onCancel,
    statusBar,
}: ComposeBoxCopilotProps) {
    const [input, setInput] = useState('');
    const [isFocused, setIsFocused] = useState(false);
    const textareaRef = useRef<HTMLTextAreaElement>(null);
    const previousMessagesLength = useRef(messages.length);

    // Handle initial focus
    useEffect(() => {
        if (initialFocus && textareaRef.current) {
            textareaRef.current.focus();
        }
    }, [initialFocus]);

    // Handle auto-focus when new messages arrive
    useEffect(() => {
        if (shouldAutoFocus && messages.length > previousMessagesLength.current && textareaRef.current) {
            textareaRef.current.focus();
        }
        previousMessagesLength.current = messages.length;
    }, [messages.length, shouldAutoFocus]);

    function handleInput() {
        const prompt = input.trim();
        if (!prompt) {
            return;
        }
        setInput('');
        handleUserMessage(prompt);
    }

    function handleInputKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            handleInput();
        }
    }

    const handleFocus = () => {
        setIsFocused(true);
        onFocus?.();
    };

    return (
        <div className="relative group z-10">
            {/* Status bar above the input */}
            {statusBar && <CopilotStatusBar {...statusBar} />}
            {/* Keyboard shortcut hint */}
            <div className="absolute -top-6 right-0 text-xs text-gray-500 dark:text-gray-400 opacity-0 
                          group-hover:opacity-100 transition-opacity">
                Press ⌘ + Enter to send
            </div>
            {/* Outer container without external padding; textarea grows to fill */}
            <div className="rounded-2xl border-[1.5px] border-gray-200 dark:border-[#2a2d31] relative 
                          bg-white dark:bg-[#1e2023] flex items-end gap-2">
                {/* Textarea */}
                <div className="flex-1 p-3">
                    <Textarea
                        ref={textareaRef}
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                        onKeyDown={handleInputKeyDown}
                        onFocus={handleFocus}
                        onBlur={() => setIsFocused(false)}
                        disabled={loading}
                        placeholder="Ask Skipper to build or update your assistant..."
                        autoResize={true}
                        maxHeight={200}
                        className={`
                            min-h-6
                            border-0! shadow-none! ring-0!
                            bg-transparent
                            resize-none
                            [&::-webkit-scrollbar]:w-1
                            [&::-webkit-scrollbar-track]:bg-transparent
                            [&::-webkit-scrollbar-thumb]:bg-gray-300
                            [&::-webkit-scrollbar-thumb]:dark:bg-[#2a2d31]
                            [&::-webkit-scrollbar-thumb]:rounded-full
                            placeholder:text-gray-500 dark:placeholder:text-gray-400
                        `}
                    />
                </div>
                {/* Send button */}
                <Button
                    size="sm"
                    isIconOnly
                    disabled={!loading && !input.trim()}
                    onPress={loading ? onCancel : handleInput}
                    className={`
                        transition-all duration-200
                        ${loading 
                            ? 'bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-900/50 dark:hover:bg-red-800/60 dark:text-red-300'
                            : input.trim() 
                                ? 'bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:hover:bg-indigo-800/60 dark:text-indigo-300' 
                                : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
                        }
                        scale-100 hover:scale-105 active:scale-95
                        disabled:opacity-50 disabled:scale-95
                        hover:shadow-md dark:hover:shadow-indigo-950/10
                        mb-1.5 mr-2
                    `}
                >
                    {loading ? (
                        <StopIcon size={16} />
                    ) : (
                        <SendIcon 
                            size={16} 
                            className={`transform transition-transform ${isFocused ? 'translate-x-0.5' : ''}`}
                        />
                    )}
                </Button>
            </div>
        </div>
    );
}

// Custom SendIcon component for better visual alignment
function SendIcon({ size, className }: { size: number, className?: string }) {
    return (
        <svg 
            width={size} 
            height={size} 
            viewBox="0 0 24 24" 
            fill="none" 
            stroke="currentColor" 
            strokeWidth="2" 
            strokeLinecap="round" 
            strokeLinejoin="round"
            className={className}
        >
            <path d="M22 2L11 13" />
            <path d="M22 2L15 22L11 13L2 9L22 2Z" />
        </svg>
    );
}

// Custom StopIcon component for better visual alignment
function StopIcon({ size, className }: { size: number, className?: string }) {
    return (
        <svg 
            width={size} 
            height={size} 
            viewBox="0 0 24 24" 
            fill="currentColor" 
            stroke="none"
            className={className}
        >
            <rect x="6" y="6" width="12" height="12" rx="1" />
        </svg>
    );
}

function CopilotStatusBar({
    allCardsLoaded,
    allApplied,
    appliedCount,
    pendingCount,
    streamingLine,
    completedSummary,
    hasPanelWarning,
    handleApplyAll,
    context,
    onCloseContext
}: {
    allCardsLoaded?: boolean;
    allApplied?: boolean;
    appliedCount?: number;
    pendingCount?: number;
    streamingLine?: string;
    completedSummary?: string;
    hasPanelWarning?: boolean;
    handleApplyAll?: () => void;
    context?: any;
    onCloseContext?: () => void;
}) {
    // Context label rendering
    const renderContext = () => {
        if (!context) return null;
        let icon = null;
        if (context.type === 'chat') icon = <svg className="w-3.5 h-3.5 text-blue-500 dark:text-blue-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M18 10c0 3.866-3.582 7-8 7a8.96 8.96 0 01-4.39-1.11L2 17l1.11-2.61A8.96 8.96 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7z" /></svg>;
        if (context.type === 'agent') icon = <svg className="w-3.5 h-3.5 text-green-500 dark:text-green-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6c0 2.21-1.343 4.09-3.25 5.25A4.992 4.992 0 0110 18a4.992 4.992 0 01-2.75-4.75C5.343 12.09 4 10.21 4 8a6 6 0 016-6z" /></svg>;
        if (context.type === 'tool') icon = <svg className="w-3.5 h-3.5 text-yellow-500 dark:text-yellow-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13.293 2.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-8.5 8.5a1 1 0 01-.293.207l-4 2a1 1 0 01-1.316-1.316l2-4a1 1 0 01.207-.293l8.5-8.5z" /></svg>;
        if (context.type === 'prompt') icon = <svg className="w-3.5 h-3.5 text-purple-500 dark:text-purple-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" /></svg>;
        let label = '';
        if (context.type === 'chat') label = 'Chat';
        if (context.type === 'agent') label = `Agent: ${context.name}`;
        if (context.type === 'tool') label = `Tool: ${context.name}`;
        if (context.type === 'prompt') label = `Prompt: ${context.name}`;
        return (
            <div className="flex items-center gap-1 px-2 py-1 rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50/70 dark:bg-zinc-800/40 shadow-sm text-xs font-medium text-zinc-700 dark:text-zinc-200 max-w-[180px] truncate">
                {icon}
                <span className="truncate max-w-[110px]">{label}</span>
            </div>
        );
    };
    // Status/ticker rendering
    const renderStatus = () => {
        if (!allCardsLoaded && !streamingLine && !hasPanelWarning && !completedSummary) return null;
        return (
            <div className="flex flex-col min-w-0">
                {hasPanelWarning && (
                    <span className="text-xs text-yellow-600 dark:text-yellow-400 font-semibold flex items-center">
                        <span className="mr-1">⚠️</span> Some changes could not be applied
                    </span>
                )}
                {allCardsLoaded && completedSummary ? (
                    <span className="font-semibold text-xs text-gray-900 dark:text-gray-100 truncate">{completedSummary}</span>
                ) : streamingLine && (
                    <span className="font-semibold text-xs text-gray-900 dark:text-gray-100 truncate">{streamingLine}</span>
                )}
                <span className="text-xs text-gray-500 dark:text-gray-400">{appliedCount ?? 0} applied, {pendingCount ?? 0} pending</span>
            </div>
        );
    };
    // Apply All button
    const renderApplyAll = () => {
        // Show disabled button with tooltip while streaming
        if (!allCardsLoaded) {
            return (
                <Tooltip content="Apply all will be available when all changes are ready" placement="top">
                    <div className="inline-block">
                        <button
                            disabled
                            className="flex items-center gap-2 px-3 py-1 rounded-full font-medium text-xs transition-colors duration-200 bg-zinc-100 dark:bg-zinc-800 text-zinc-400 cursor-not-allowed border border-zinc-200 dark:border-zinc-700 shadow-none"
                        >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M9 12l2 2l4 -4" strokeLinecap="round" strokeLinejoin="round" /></svg>
                            Apply all
                        </button>
                    </div>
                </Tooltip>
            );
        }
        // Show real button when ready
        return (
            <button
                onClick={() => { void handleApplyAll?.(); }}
                disabled={allApplied}
                className={`flex items-center gap-2 px-3 py-1 rounded-full font-medium text-xs transition-colors duration-200
                    ${
                        allApplied
                            ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-400 cursor-not-allowed border border-zinc-200 dark:border-zinc-700 shadow-none'
                            : 'bg-blue-100 dark:bg-zinc-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-zinc-800 border border-blue-200 dark:border-zinc-800 shadow-sm'
                    }
                `}
            >
                {allApplied ? (
                    <>
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M9 12l2 2l4 -4" strokeLinecap="round" strokeLinejoin="round" /></svg>
                        All applied!
                    </>
                ) : (
                    <>
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M9 12l2 2l4 -4" strokeLinecap="round" strokeLinejoin="round" /></svg>
                        Apply all
                    </>
                )}
            </button>
        );
    };
    return (
        <div className="w-auto max-w-[calc(100%-16px)] mx-auto flex items-center px-3 py-1 pt-2.5 pb-5 mt-2 -mb-3 rounded-xl bg-white/90 dark:bg-zinc-800/90 border border-zinc-300 dark:border-zinc-700 shadow-md dark:shadow-zinc-950/10 backdrop-blur-sm transition-all z-0 relative mx-2 overflow-visible">
            {/* Left: context + status/ticker, flex-1, truncate as needed */}
            <div className="flex items-center gap-2 flex-1 min-w-0 overflow-visible">
                {renderContext()}
                {renderStatus() && (
                    <div className="ml-2 min-w-0 overflow-visible">{renderStatus()}</div>
                )}
            </div>
            {/* Divider and rightmost Apply All button */}
            {renderApplyAll() && (
                <>
                    <div className="mx-2 h-5 border-l border-gray-200 dark:border-gray-700 flex-shrink-0" />
                    <div className="flex-shrink-0 flex items-center overflow-visible">{renderApplyAll()}</div>
                </>
            )}
            {/* Optional: subtle shadow at the bottom for extra depth */}
            <div className="absolute left-0 right-0 bottom-0 h-2 pointer-events-none rounded-b-xl shadow-[0_6px_12px_-6px_rgba(0,0,0,0.10)]" />
        </div>
    );
}