69 lines
3.3 KiB
TypeScript
69 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
export interface HistoryUnlockDialogProps {
|
|
open: boolean;
|
|
lockedCount: number;
|
|
isLoading?: boolean;
|
|
errorMessage?: string | null;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export function HistoryUnlockDialog({
|
|
open,
|
|
lockedCount,
|
|
isLoading = false,
|
|
errorMessage,
|
|
onClose,
|
|
onConfirm,
|
|
}: HistoryUnlockDialogProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-200 flex items-center justify-center bg-[rgba(0,0,0,0.5)] pb-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-top,0))]"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="history-unlock-title"
|
|
>
|
|
<div className="w-full max-w-(--pwa-install-dialog-max-width,360px) rounded-(--responsive-card-radius,40px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,16px) pb-(--responsive-card-padding,16px) pt-(--responsive-card-padding-lg,24px) text-center shadow-[0_10px_20px_rgba(0,0,0,0.1)]">
|
|
<h2
|
|
id="history-unlock-title"
|
|
className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground"
|
|
>
|
|
Unlock previous messages?
|
|
</h2>
|
|
<p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]">
|
|
We found {lockedCount} locked messages in your chat history. You can
|
|
unlock them now to continue the conversation with full context.
|
|
</p>
|
|
{errorMessage ? (
|
|
<p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.4] text-[#c0364c]">
|
|
{errorMessage}
|
|
</p>
|
|
) : null}
|
|
<div className="flex w-full gap-(--spacing-md,12px)">
|
|
<button
|
|
type="button"
|
|
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-(--color-text-secondary,#9e9e9e) text-(length:--responsive-body,var(--font-size-lg,16px)) font-semibold text-(--color-pwa-button-text,#ffffff) disabled:cursor-not-allowed disabled:opacity-72"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
>
|
|
Later
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-analytics-key="chat.unlock_history"
|
|
data-analytics-label="Unlock chat history"
|
|
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-(length:--responsive-body,var(--font-size-lg,16px)) font-semibold text-(--color-pwa-button-text,#ffffff) disabled:cursor-not-allowed disabled:opacity-72"
|
|
onClick={onConfirm}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? "Unlocking..." : "Unlock now"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|