SnowLuma/packages/webui/src/components/debug/file-source.tsx

// FileSource — the control behind a file/image/record/video param. The bot runs
// on the SERVER, so a browser-local path is meaningless to it; this offers three
// honest sources: a URL the bot fetches, a path that already exists on the
// server, or a browser upload that we stream to a server temp path (and then
// feed that path to the action). Upload progress flows through the app-level
// task registry so it survives tab switches.
import { useId, useState } from 'react';
import { FileUp, Link2, Loader2, ServerCog, X } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { useApi } from '@/lib/api';
import { useDebugTasks } from '@/contexts/DebugTaskContext';
import { cn } from '@/lib/utils';
import type { FieldRole } from '@/types';

type Mode = 'url' | 'server' | 'upload';

const ACCEPT: Partial<Record<FieldRole, string>> = {
    image: 'image/*,.png,.jpg,.jpeg,.gif,.webp,.bmp,.heic,.heif',
    record: 'audio/*,.silk,.amr,.mp3,.wav,.m4a,.ogg',
    video: 'video/*,.mp4,.mov,.mkv,.webm',
};

function Seg({
    active,
    onClick,
    icon,
    label,
}: {
    active: boolean;
    onClick: () => void;
    icon: React.ReactNode;
    label: string;
}) {
    return (
        <button
            type="button"
            onClick={onClick}
            className={cn(
                'inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-medium transition-colors',
                active
                    ? 'bg-card text-foreground shadow-sm ring-1 ring-border/60'
                    : 'text-muted-foreground hover:text-foreground',
            )}
        >
            {icon}
            {label}
        </button>
    );
}

export function FileSource({
    value,
    onChange,
    role,
    placeholder,
}: {
    value: string;
    onChange: (v: string) => void;
    role?: FieldRole;
    placeholder?: string;
}) {
    const api = useApi();
    const { start, update, finish } = useDebugTasks();
    const [mode, setMode] = useState<Mode>('url');
    const [uploading, setUploading] = useState(false);
    const [uploadName, setUploadName] = useState<string | null>(null);
    const [uploadErr, setUploadErr] = useState<string | null>(null);
    const inputId = useId();
    const accept = role ? ACCEPT[role] : undefined;

    const doUpload = async (file: File) => {
        setUploadErr(null);
        setUploadName(file.name);
        setUploading(true);
        const ac = new AbortController();
        const taskId = start({
            kind: 'upload',
            label: `上传 ${file.name}`,
            progress: 0,
            cancel: () => ac.abort(),
        });

        try {
            const res = await api.debug.upload(file, {
                signal: ac.signal,
                onProgress: (f) => update(taskId, { progress: f }),
            });

            if (!res.path) {
                throw new Error(res.message || '上传失败');
            }

            onChange(res.path);
            finish(taskId, 'done', res.path);
        } catch (e) {
            const msg = e instanceof Error ? e.message : '上传失败';
            setUploadErr(msg);
            finish(taskId, ac.signal.aborted ? 'canceled' : 'failed', msg);
        } finally {
            setUploading(false);
        }
    };

    return (
        <div className="flex flex-col gap-2">
            <div className="inline-flex w-fit gap-0.5 rounded-xl bg-muted/70 p-0.5">
                <Seg
                    active={mode === 'url'}
                    onClick={() => setMode('url')}
                    icon={<Link2 className="h-3.5 w-3.5" />}
                    label="URL"
                />
                <Seg
                    active={mode === 'server'}
                    onClick={() => setMode('server')}
                    icon={<ServerCog className="h-3.5 w-3.5" />}
                    label="服务器路径"
                />
                <Seg
                    active={mode === 'upload'}
                    onClick={() => setMode('upload')}
                    icon={<FileUp className="h-3.5 w-3.5" />}
                    label="上传"
                />
            </div>

            {mode === 'url' && (
                <Input
                    value={value}
                    onChange={(e) => onChange(e.target.value)}
                    placeholder={placeholder || 'https://…'}
                />
            )}

            {mode === 'server' && (
                <div className="flex flex-col gap-1">
                    <Input
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        placeholder="/path/on/server/file.jpg"
                    />
                    <span className="text-xs text-muted-foreground">使用服务器上的文件路径</span>
                </div>
            )}

            {mode === 'upload' && (
                <div className="flex flex-col gap-1.5">
                    <input
                        id={inputId}
                        type="file"
                        accept={accept}
                        className="sr-only"
                        onChange={(e) => {
                            const f = e.target.files?.[0];

                            if (f) {
                                void doUpload(f);
                            }

                            e.target.value = '';
                        }}
                    />
                    <label
                        htmlFor={inputId}
                        onDragOver={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                        }}
                        onDrop={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            const file = e.dataTransfer.files[0];

                            if (file && !uploading) {
                                void doUpload(file);
                            }
                        }}
                        className={cn(
                            'flex items-center justify-center gap-2 rounded-xl border border-dashed border-border/70 px-3 py-3 text-sm text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground',
                            uploading && 'pointer-events-none opacity-60',
                        )}
                    >
                        {uploading ? (
                            <>
                                <Loader2 className="h-4 w-4 animate-spin" /> 上传中…
                            </>
                        ) : (
                            <>
                                <FileUp className="h-4 w-4" /> 选择或拖入文件
                            </>
                        )}
                    </label>
                    {value && uploadName && !uploading && (
                        <div className="flex items-center gap-2 rounded-lg bg-muted/40 px-2.5 py-1.5 text-meta">
                            <span className="truncate text-muted-foreground">
                                已上传:{uploadName}
                            </span>
                            <code
                                className="ml-auto max-w-[55%] truncate font-mono text-muted-foreground/80"
                                title={value}
                            >
                                {value}
                            </code>
                            <button
                                type="button"
                                onClick={() => {
                                    onChange('');
                                    setUploadName(null);
                                }}
                                className="shrink-0 text-muted-foreground hover:text-destructive"
                            >
                                <X className="h-3.5 w-3.5" />
                            </button>
                        </div>
                    )}
                    {uploadErr && <span className="text-xs text-destructive">{uploadErr}</span>}
                </div>
            )}
        </div>
    );
}