File size: 2,683 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import * as Popover from '@radix-ui/react-popover';
import { Spinner } from '@librechat/client';
import { ChevronDown, ChevronUp } from 'lucide-react';
import CancelledIcon from './CancelledIcon';
import FinishedIcon from './FinishedIcon';
import { cn } from '~/utils';
const wrapperClass =
'progress-text-wrapper text-token-text-secondary relative -mt-[0.75px] h-5 w-full leading-5';
const Wrapper = ({ popover, children }: { popover: boolean; children: React.ReactNode }) => {
if (popover) {
return (
<div className={wrapperClass}>
<Popover.Trigger asChild>
<div
className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
style={{ opacity: 1, transform: 'none' }}
data-projection-id="78"
>
{children}
</div>
</Popover.Trigger>
</div>
);
}
return (
<div className={wrapperClass}>
<div
className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
style={{ opacity: 1, transform: 'none' }}
data-projection-id="78"
>
{children}
</div>
</div>
);
};
export default function ProgressText({
progress,
onClick,
inProgressText,
finishedText,
authText,
hasInput = true,
popover = false,
isExpanded = false,
error = false,
}: {
progress: number;
onClick?: () => void;
inProgressText: string;
finishedText: string;
authText?: string;
hasInput?: boolean;
popover?: boolean;
isExpanded?: boolean;
error?: boolean;
}) {
const getText = () => {
if (error) {
return finishedText;
}
if (progress < 1) {
return authText ?? inProgressText;
}
return finishedText;
};
const getIcon = () => {
if (error) {
return <CancelledIcon />;
}
if (progress < 1) {
return <Spinner />;
}
return <FinishedIcon />;
};
const text = getText();
const icon = getIcon();
const showShimmer = progress < 1 && !error;
return (
<Wrapper popover={popover}>
<button
type="button"
className={cn(
'inline-flex w-full items-center gap-2',
hasInput ? '' : 'pointer-events-none',
)}
disabled={!hasInput}
onClick={hasInput ? onClick : undefined}
>
{icon}
<span className={showShimmer ? 'shimmer' : ''}>{text}</span>
{hasInput &&
(isExpanded ? (
<ChevronUp className="size-4 shrink-0 translate-y-[1px]" />
) : (
<ChevronDown className="size-4 shrink-0 translate-y-[1px]" />
))}
</button>
</Wrapper>
);
}
|