tr]:last:border-b-0",
48 | className
49 | )}
50 | {...props}
51 | />
52 | )
53 | }
54 |
55 | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
56 | return (
57 | |
65 | )
66 | }
67 |
68 | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
69 | return (
70 | [role=checkbox]]:translate-y-[2px]",
74 | className
75 | )}
76 | {...props}
77 | />
78 | )
79 | }
80 |
81 | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
82 | return (
83 | | [role=checkbox]]:translate-y-[2px]",
87 | className
88 | )}
89 | {...props}
90 | />
91 | )
92 | }
93 |
94 | function TableCaption({
95 | className,
96 | ...props
97 | }: React.ComponentProps<"caption">) {
98 | return (
99 |
104 | )
105 | }
106 |
107 | export {
108 | Table,
109 | TableHeader,
110 | TableBody,
111 | TableFooter,
112 | TableHead,
113 | TableRow,
114 | TableCell,
115 | TableCaption,
116 | }
117 |
--------------------------------------------------------------------------------
/src/components/TooltipUsage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useState, useEffect } from "react";
2 | import {
3 | Tooltip,
4 | TooltipTrigger,
5 | TooltipContent,
6 | } from "@/components/ui/tooltip";
7 | import { intervalToDuration, differenceInSeconds } from "date-fns";
8 | import { useUserLimits } from "@/hooks/UserLimitsContext";
9 |
10 | function formatTimeRemaining(resetTimestamp: number) {
11 | const now = new Date();
12 | const reset =
13 | typeof resetTimestamp === "string"
14 | ? new Date(parseInt(resetTimestamp, 10))
15 | : new Date(resetTimestamp);
16 | if (isNaN(reset.getTime())) return "--:--:--";
17 | // Only show if in the future
18 | if (reset.getTime() <= now.getTime()) return "00:00:00";
19 | // Use date-fns to get the duration breakdown
20 | const duration = intervalToDuration({ start: now, end: reset });
21 | // Calculate total hours (including days, months, years)
22 | const totalSeconds = differenceInSeconds(reset, now);
23 | const hours = Math.floor(totalSeconds / 3600)
24 | .toString()
25 | .padStart(2, "0");
26 | const minutes = (duration.minutes ?? 0).toString().padStart(2, "0");
27 | const seconds = (duration.seconds ?? 0).toString().padStart(2, "0");
28 | return `${hours}:${minutes}:${seconds}`;
29 | }
30 |
31 | export default function TooltipUsage() {
32 | const { remainingMessages, resetTimestamp, loading } = useUserLimits();
33 |
34 | const [open, setOpen] = useState(false);
35 | const [tick, setTick] = useState(0);
36 |
37 | useEffect(() => {
38 | if (!open) return;
39 | const interval = setInterval(() => setTick((t) => t + 1), 1000);
40 | return () => clearInterval(interval);
41 | }, [open]);
42 |
43 | const formattedTime = useMemo(() => {
44 | if (!resetTimestamp) return undefined;
45 | return formatTimeRemaining(resetTimestamp);
46 | // Include tick so it recalculates every second when open
47 | }, [resetTimestamp, tick]);
48 |
49 | return (
50 |
51 |
52 |
53 |
54 |
55 | 
56 |
57 | {remainingMessages}
58 |
59 |
60 | credits
61 |
62 |
67 |
68 | Time remaining until refill:
69 |
70 | {formattedTime}
71 |
9 |
10 |
11 |
12 | {/* User bubble 1 (right) */}
13 |
21 | {/* Assistant bubble 1 (left) */}
22 |
30 | {/* User bubble 2 (right) */}
31 |
39 | {/* Assistant bubble 2 (left) */}
40 |
48 | {/* Assistant bubble 3 */}
49 |
57 | {/* Assistant bubble 4 */}
58 |
66 |
67 |
68 |
52 | | 
7 | {/* Title */}
8 | 
10 |
11 | {thought || "Thinking"} ...
12 |
13 | 
3 |
4 |
5 | 
51 | 
56 |