diff --git a/src/app/chat/components/__tests__/tailwind-components.test.tsx b/src/app/chat/components/__tests__/tailwind-components.test.tsx index 57f662c1..54cb2521 100644 --- a/src/app/chat/components/__tests__/tailwind-components.test.tsx +++ b/src/app/chat/components/__tests__/tailwind-components.test.tsx @@ -6,7 +6,9 @@ import { ChatHeader } from "../chat-header"; import { ChatInsufficientCreditsBanner } from "../chat-insufficient-credits-banner"; import { ChatInputTextField } from "../chat-input-text-field"; import { ChatSendButton } from "../chat-send-button"; +import { HistoryUnlockDialog } from "../history-unlock-dialog"; import { ImageBubble } from "../image-bubble"; +import { InsufficientCreditsDialog } from "../insufficient-credits-dialog"; import { MessageAvatar } from "../message-avatar"; import { PrivateMessageCard } from "../private-message-card"; import { PwaInstallDialog } from "../pwa-install-dialog"; @@ -223,4 +225,73 @@ describe("chat Tailwind components", () => { expect(html).toContain("Cancel"); expect(html).toContain("OK"); }); + + it("renders HistoryUnlockDialog open and loading states", () => { + expect( + renderToStaticMarkup( + undefined} + onConfirm={() => undefined} + />, + ), + ).toBe(""); + + const html = renderToStaticMarkup( + undefined} + onConfirm={() => undefined} + />, + ); + + expect(html).toContain('aria-labelledby="history-unlock-title"'); + expect(html).toContain("z-[200]"); + expect(html).toContain("Unlock previous messages?"); + expect(html).toContain("We found 3 locked messages"); + expect(html).toContain("Could not unlock history."); + expect(html).toContain("Unlocking..."); + expect(html).toContain("text-[var(--color-pwa-button-text,#ffffff)]"); + expect(html).toContain("disabled"); + }); + + it("renders InsufficientCreditsDialog with credit details", () => { + expect( + renderToStaticMarkup( + undefined} + onConfirm={() => undefined} + />, + ), + ).toBe(""); + + const html = renderToStaticMarkup( + undefined} + onConfirm={() => undefined} + />, + ); + + expect(html).toContain('aria-labelledby="insufficient-credits-title"'); + expect(html).toContain("z-[220]"); + expect(html).toContain("Not enough credits"); + expect(html).toContain("Balance"); + expect(html).toContain("Required"); + expect(html).toContain("Still needed"); + expect(html).toContain("text-[var(--color-pwa-button-text,#ffffff)]"); + expect(html).toContain("bg-[linear-gradient(90deg,#ff67e0_0%,#ff52a2_100%)]"); + expect(html).toContain("Top up now"); + }); }); diff --git a/src/app/chat/components/history-unlock-dialog.module.css b/src/app/chat/components/history-unlock-dialog.module.css deleted file mode 100644 index 587565b0..00000000 --- a/src/app/chat/components/history-unlock-dialog.module.css +++ /dev/null @@ -1,94 +0,0 @@ -.overlay { - position: fixed; - inset: 0; - z-index: 200; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0, 0, 0, 0.5); - padding: - calc(var(--dialog-safe-margin, 16px) + var(--app-safe-top, 0px)) - calc(var(--dialog-safe-margin, 16px) + var(--app-safe-right, 0px)) - calc(var(--dialog-safe-margin, 16px) + var(--app-safe-bottom, 0px)) - calc(var(--dialog-safe-margin, 16px) + var(--app-safe-left, 0px)); -} - -.dialog { - width: 100%; - max-width: var(--pwa-install-dialog-max-width, 360px); - padding: - var(--responsive-card-padding-lg, 24px) - var(--responsive-card-padding, 16px) - var(--responsive-card-padding, 16px); - text-align: center; - background: var(--color-page-background, #ffffff); - border-radius: var(--responsive-card-radius, 40px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); -} - -.title { - margin: 0 0 10px; - font-size: var(--responsive-page-title, var(--font-size-22, 22px)); - font-weight: 700; - line-height: 1.2; - color: var(--color-text-foreground, #171717); -} - -.content { - margin: - 0 - var(--responsive-card-padding-lg, 24px) - var(--spacing-lg, 16px); - font-size: var(--responsive-body, var(--font-size-lg, 16px)); - line-height: 1.5; - text-align: left; - color: #393939; -} - -.error { - margin: - 0 - var(--responsive-card-padding-lg, 24px) - var(--spacing-lg, 16px); - font-size: var(--responsive-caption, var(--font-size-md, 14px)); - line-height: 1.4; - text-align: left; - color: #c0364c; -} - -.actions { - display: flex; - gap: var(--spacing-md, 12px); - width: 100%; -} - -.button { - flex: 1 1 auto; - min-height: var(--pwa-button-height, 44px); - border: 0; - border-radius: var(--radius-bottom-sheet, 28px); - font-size: var(--responsive-body, var(--font-size-lg, 16px)); - font-weight: 600; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; -} - -.button:disabled { - cursor: not-allowed; - opacity: 0.72; -} - -.secondary { - color: var(--color-page-background, #ffffff); - background: var(--color-text-secondary, #9e9e9e); -} - -.primary { - color: var(--color-page-background, #ffffff); - background: linear-gradient( - var(--color-button-gradient-start, #ff67e0), - var(--color-button-gradient-end, #ff52a2) - ); -} diff --git a/src/app/chat/components/history-unlock-dialog.tsx b/src/app/chat/components/history-unlock-dialog.tsx index c1aa2df7..10417a2c 100644 --- a/src/app/chat/components/history-unlock-dialog.tsx +++ b/src/app/chat/components/history-unlock-dialog.tsx @@ -1,7 +1,5 @@ "use client"; -import styles from "./history-unlock-dialog.module.css"; - export interface HistoryUnlockDialogProps { open: boolean; lockedCount: number; @@ -23,26 +21,31 @@ export function HistoryUnlockDialog({ return (
-
-

+
+

Unlock previous messages?

-

+

We found {lockedCount} locked messages in your chat history. You can unlock them now to continue the conversation with full context.

{errorMessage ? ( -

{errorMessage}

+

+ {errorMessage} +

) : null} -
+