ai-design-system 0.1.109 → 0.1.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/composites/AccountDialog/AccountDialog.stories.tsx +42 -0
- package/components/composites/AccountDialog/AccountDialog.tsx +188 -0
- package/components/composites/AccountDialog/index.ts +6 -0
- package/components/composites/SessionHeader/SessionHeader.tsx +9 -5
- package/components/composites/index.ts +5 -0
- package/components/features/ChatPanel/ChatPanel.tsx +14 -0
- package/components/index.ts +5 -0
- package/dist/index.cjs +148 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +40 -0
- package/dist/index.d.ts +76 -34
- package/dist/index.js +147 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { fn } from "@storybook/test";
|
|
3
|
+
import { AccountDialog } from "./AccountDialog";
|
|
4
|
+
|
|
5
|
+
const meta = {
|
|
6
|
+
title: "Composites/AccountDialog",
|
|
7
|
+
component: AccountDialog,
|
|
8
|
+
tags: ["autodocs"],
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: "centered",
|
|
11
|
+
},
|
|
12
|
+
args: {
|
|
13
|
+
onUpgrade: fn(),
|
|
14
|
+
onSignOut: fn(),
|
|
15
|
+
},
|
|
16
|
+
} satisfies Meta<typeof AccountDialog>;
|
|
17
|
+
|
|
18
|
+
export default meta;
|
|
19
|
+
type Story = StoryObj<typeof meta>;
|
|
20
|
+
|
|
21
|
+
export const Default: Story = {
|
|
22
|
+
args: {
|
|
23
|
+
user: {
|
|
24
|
+
name: "Rajalakshmi",
|
|
25
|
+
email: "rajalakshmi2655@gmail.com",
|
|
26
|
+
plan: "Google AI Pro",
|
|
27
|
+
planDescription: "You can upgrade to a Google AI Ultra plan to receive higher rate limits.",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const OpenModal: Story = {
|
|
33
|
+
args: {
|
|
34
|
+
open: true,
|
|
35
|
+
user: {
|
|
36
|
+
name: "Rajalakshmi",
|
|
37
|
+
email: "rajalakshmi2655@gmail.com",
|
|
38
|
+
plan: "Google AI Pro",
|
|
39
|
+
planDescription: "You can upgrade to a Google AI Ultra plan to receive higher rate limits.",
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
};
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { Button } from "@/components/primitives/Button";
|
|
5
|
+
import { Icon } from "@/components/primitives/Icon";
|
|
6
|
+
import {
|
|
7
|
+
Dialog,
|
|
8
|
+
DialogContent,
|
|
9
|
+
DialogDescription,
|
|
10
|
+
DialogHeader,
|
|
11
|
+
DialogTitle,
|
|
12
|
+
DialogTrigger,
|
|
13
|
+
} from "@/components/primitives/Dialog";
|
|
14
|
+
import { cn } from "@/lib/utils";
|
|
15
|
+
|
|
16
|
+
export interface AccountUser {
|
|
17
|
+
name?: string;
|
|
18
|
+
email?: string;
|
|
19
|
+
initial?: string;
|
|
20
|
+
avatarColor?: string;
|
|
21
|
+
plan?: string;
|
|
22
|
+
planDescription?: string;
|
|
23
|
+
[key: string]: unknown;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export interface AccountDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {
|
|
27
|
+
user?: AccountUser;
|
|
28
|
+
trigger?: React.ReactNode;
|
|
29
|
+
showTrigger?: boolean;
|
|
30
|
+
onUpgrade?: () => void;
|
|
31
|
+
onSignOut?: () => void;
|
|
32
|
+
termsUrl?: string;
|
|
33
|
+
onTermsClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
34
|
+
className?: string;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export interface AccountButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
38
|
+
initial?: string;
|
|
39
|
+
avatarColor?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export const AccountButton = React.forwardRef<HTMLButtonElement, AccountButtonProps>(
|
|
43
|
+
({ initial = "R", avatarColor, className, ...props }, ref) => {
|
|
44
|
+
return (
|
|
45
|
+
<button
|
|
46
|
+
ref={ref}
|
|
47
|
+
type="button"
|
|
48
|
+
aria-label="Account details"
|
|
49
|
+
className={cn(
|
|
50
|
+
"flex items-center gap-1.5 p-1 rounded-full hover:bg-muted/50 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
51
|
+
className
|
|
52
|
+
)}
|
|
53
|
+
{...props}
|
|
54
|
+
>
|
|
55
|
+
<div
|
|
56
|
+
className={cn(
|
|
57
|
+
"w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold select-none text-white",
|
|
58
|
+
avatarColor ? "" : "bg-emerald-700"
|
|
59
|
+
)}
|
|
60
|
+
style={avatarColor ? { backgroundColor: avatarColor } : undefined}
|
|
61
|
+
>
|
|
62
|
+
{initial}
|
|
63
|
+
</div>
|
|
64
|
+
<Icon name="chevron-down" className="w-3.5 h-3.5 text-muted-foreground" />
|
|
65
|
+
</button>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
AccountButton.displayName = "AccountButton";
|
|
71
|
+
|
|
72
|
+
export const AccountDialog = React.forwardRef<HTMLDivElement, AccountDialogProps>(
|
|
73
|
+
(
|
|
74
|
+
{
|
|
75
|
+
user,
|
|
76
|
+
trigger,
|
|
77
|
+
showTrigger = true,
|
|
78
|
+
onUpgrade,
|
|
79
|
+
onSignOut,
|
|
80
|
+
termsUrl = "/terms",
|
|
81
|
+
onTermsClick,
|
|
82
|
+
className,
|
|
83
|
+
children,
|
|
84
|
+
...dialogProps
|
|
85
|
+
},
|
|
86
|
+
_ref
|
|
87
|
+
) => {
|
|
88
|
+
const email = user?.email || "rajalakshmi2655@gmail.com";
|
|
89
|
+
const initial =
|
|
90
|
+
user?.initial ||
|
|
91
|
+
(user?.name ? user.name[0].toUpperCase() : email[0].toUpperCase());
|
|
92
|
+
const plan = user?.plan || "Google AI Pro";
|
|
93
|
+
const planDescription =
|
|
94
|
+
user?.planDescription ||
|
|
95
|
+
"You can upgrade to a Google AI Ultra plan to receive higher rate limits.";
|
|
96
|
+
|
|
97
|
+
const defaultTrigger = (
|
|
98
|
+
<AccountButton initial={initial} avatarColor={user?.avatarColor} />
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<Dialog {...dialogProps}>
|
|
103
|
+
{showTrigger && (
|
|
104
|
+
<DialogTrigger asChild>
|
|
105
|
+
{trigger ?? defaultTrigger}
|
|
106
|
+
</DialogTrigger>
|
|
107
|
+
)}
|
|
108
|
+
<DialogContent
|
|
109
|
+
className={cn(
|
|
110
|
+
"sm:max-w-md p-6 bg-card text-card-foreground border-border rounded-2xl shadow-2xl",
|
|
111
|
+
className
|
|
112
|
+
)}
|
|
113
|
+
>
|
|
114
|
+
<DialogHeader className="gap-1 text-left">
|
|
115
|
+
<DialogTitle className="text-xl font-bold tracking-tight text-foreground">
|
|
116
|
+
Account
|
|
117
|
+
</DialogTitle>
|
|
118
|
+
<DialogDescription className="text-xs text-muted-foreground">
|
|
119
|
+
Manage your plan, credentials, and general preferences.
|
|
120
|
+
</DialogDescription>
|
|
121
|
+
</DialogHeader>
|
|
122
|
+
|
|
123
|
+
<div className="mt-4">
|
|
124
|
+
<div className="text-xs font-semibold text-foreground/90 mb-2.5">
|
|
125
|
+
Account
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div className="rounded-xl border border-border bg-muted/30 divide-y divide-border overflow-hidden">
|
|
129
|
+
{/* Row 1: Plan Details */}
|
|
130
|
+
<div className="flex items-center justify-between p-4 gap-3">
|
|
131
|
+
<div className="min-w-0 pr-1">
|
|
132
|
+
<div className="text-sm font-semibold text-foreground">
|
|
133
|
+
Your Plan: {plan}
|
|
134
|
+
</div>
|
|
135
|
+
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
|
|
136
|
+
{planDescription}
|
|
137
|
+
</p>
|
|
138
|
+
</div>
|
|
139
|
+
<Button
|
|
140
|
+
size="sm"
|
|
141
|
+
onClick={onUpgrade}
|
|
142
|
+
className="shrink-0 bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs px-4 py-2 rounded-lg cursor-pointer"
|
|
143
|
+
>
|
|
144
|
+
Upgrade
|
|
145
|
+
</Button>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
{/* Row 2: Email & Sign Out */}
|
|
149
|
+
<div className="flex items-center justify-between p-4 gap-3">
|
|
150
|
+
<div className="min-w-0 pr-1">
|
|
151
|
+
<div className="text-sm font-semibold text-foreground">
|
|
152
|
+
Email
|
|
153
|
+
</div>
|
|
154
|
+
<div className="text-xs text-muted-foreground mt-0.5 font-normal truncate">
|
|
155
|
+
{email}
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
<Button
|
|
159
|
+
variant="outline"
|
|
160
|
+
size="sm"
|
|
161
|
+
onClick={onSignOut}
|
|
162
|
+
className="shrink-0 text-xs font-medium px-3.5 py-2 rounded-lg cursor-pointer"
|
|
163
|
+
>
|
|
164
|
+
Sign Out
|
|
165
|
+
</Button>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
{/* Footer Note */}
|
|
170
|
+
<div className="text-xs text-muted-foreground mt-6 text-left">
|
|
171
|
+
By using this app, you agree to its{" "}
|
|
172
|
+
<a
|
|
173
|
+
href={termsUrl}
|
|
174
|
+
onClick={onTermsClick ?? ((e) => e.preventDefault())}
|
|
175
|
+
className="text-blue-500 hover:underline cursor-pointer"
|
|
176
|
+
>
|
|
177
|
+
Terms of Service
|
|
178
|
+
</a>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
{children}
|
|
182
|
+
</DialogContent>
|
|
183
|
+
</Dialog>
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
|
|
188
|
+
AccountDialog.displayName = "AccountDialog";
|
|
@@ -28,6 +28,8 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
28
28
|
onSelectSession?: (id: string) => void;
|
|
29
29
|
onDownloadSession?: () => Promise<FileDownloadResult | undefined>;
|
|
30
30
|
showActions?: boolean;
|
|
31
|
+
showNewSession?: boolean;
|
|
32
|
+
showDownloadSession?: boolean;
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
/**
|
|
@@ -37,7 +39,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
37
39
|
* and a dropdown history of past sessions.
|
|
38
40
|
*/
|
|
39
41
|
export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
|
|
40
|
-
({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, className, ...props }, ref) => {
|
|
42
|
+
({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, className, ...props }, ref) => {
|
|
41
43
|
const activeSession = sessions?.find(s => s.id === activeSessionId);
|
|
42
44
|
const downloadRef = React.useRef<HTMLAnchorElement>(null);
|
|
43
45
|
|
|
@@ -72,14 +74,16 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
|
|
|
72
74
|
</div>
|
|
73
75
|
{showActions && (
|
|
74
76
|
<div className="flex items-center space-x-1 flex-none">
|
|
75
|
-
{onDownloadSession && (
|
|
77
|
+
{Boolean(onDownloadSession && showDownloadSession) && (
|
|
76
78
|
<Button variant="ghost" size="icon" onClick={handleDownloadClick} className="h-8 w-8" title="Download Chat History">
|
|
77
79
|
<Icon name="download" className="h-4 w-4" />
|
|
78
80
|
</Button>
|
|
79
81
|
)}
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
|
|
82
|
+
{Boolean(onNewSession && showNewSession) && (
|
|
83
|
+
<Button variant="ghost" size="icon" onClick={onNewSession} className="h-8 w-8" title="New Session">
|
|
84
|
+
<Icon name="plus" className="h-4 w-4" />
|
|
85
|
+
</Button>
|
|
86
|
+
)}
|
|
83
87
|
|
|
84
88
|
<DropdownMenu>
|
|
85
89
|
<DropdownMenuTrigger asChild>
|
|
@@ -290,3 +290,8 @@ export type { StoriesBarProps, StoryItem } from './StoriesBar'
|
|
|
290
290
|
export { StoryPlayer, ScenePlayer } from './StoryPlayer'
|
|
291
291
|
export type { StoryPlayerProps, ScenePlayerProps, StorySegment, SceneItem } from './StoryPlayer'
|
|
292
292
|
|
|
293
|
+
// AccountDialog Composite
|
|
294
|
+
export { AccountDialog, AccountButton } from './AccountDialog'
|
|
295
|
+
export type { AccountDialogProps, AccountButtonProps, AccountUser } from './AccountDialog'
|
|
296
|
+
|
|
297
|
+
|
|
@@ -225,6 +225,16 @@ export interface ChatPanelProps {
|
|
|
225
225
|
* @default true
|
|
226
226
|
*/
|
|
227
227
|
showSessionActions?: boolean;
|
|
228
|
+
/**
|
|
229
|
+
* Whether to show the new session (+) action in the session header
|
|
230
|
+
* @default true
|
|
231
|
+
*/
|
|
232
|
+
showNewSession?: boolean;
|
|
233
|
+
/**
|
|
234
|
+
* Whether to show the download session action in the session header
|
|
235
|
+
* @default true
|
|
236
|
+
*/
|
|
237
|
+
showDownloadSession?: boolean;
|
|
228
238
|
/**
|
|
229
239
|
* Presentation variant for ChatPanel:
|
|
230
240
|
* - "default": standard full flex-1 panel (default)
|
|
@@ -286,6 +296,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
|
|
|
286
296
|
showHeader = true,
|
|
287
297
|
sessionTitle,
|
|
288
298
|
showSessionActions = true,
|
|
299
|
+
showNewSession = true,
|
|
300
|
+
showDownloadSession = true,
|
|
289
301
|
variant = "default",
|
|
290
302
|
onClose,
|
|
291
303
|
}) => {
|
|
@@ -446,6 +458,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
|
|
|
446
458
|
<SessionHeader
|
|
447
459
|
title={sessionTitle}
|
|
448
460
|
showActions={showSessionActions}
|
|
461
|
+
showNewSession={showNewSession}
|
|
462
|
+
showDownloadSession={showDownloadSession}
|
|
449
463
|
sessions={sessions}
|
|
450
464
|
activeSessionId={activeSessionId}
|
|
451
465
|
onNewSession={onNewSession}
|
package/components/index.ts
CHANGED
|
@@ -36,8 +36,13 @@ export {
|
|
|
36
36
|
StoriesBar,
|
|
37
37
|
StoryPlayer,
|
|
38
38
|
ScenePlayer,
|
|
39
|
+
AccountDialog,
|
|
40
|
+
AccountButton,
|
|
39
41
|
} from './composites';
|
|
40
42
|
export type {
|
|
43
|
+
AccountDialogProps,
|
|
44
|
+
AccountButtonProps,
|
|
45
|
+
AccountUser,
|
|
41
46
|
StoriesBarProps,
|
|
42
47
|
StoryItem,
|
|
43
48
|
StoryPlayerProps,
|
package/dist/index.cjs
CHANGED
|
@@ -2469,6 +2469,10 @@ function Dialog(_a) {
|
|
|
2469
2469
|
var props = __objRest(_a, []);
|
|
2470
2470
|
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, __spreadValues({ "data-slot": "dialog" }, props));
|
|
2471
2471
|
}
|
|
2472
|
+
function DialogTrigger(_a) {
|
|
2473
|
+
var props = __objRest(_a, []);
|
|
2474
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, __spreadValues({ "data-slot": "dialog-trigger" }, props));
|
|
2475
|
+
}
|
|
2472
2476
|
function DialogPortal(_a) {
|
|
2473
2477
|
var props = __objRest(_a, []);
|
|
2474
2478
|
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
|
|
@@ -7917,7 +7921,7 @@ var ApprovalCard = React3__namespace.memo(
|
|
|
7917
7921
|
ApprovalCard.displayName = "ApprovalCard";
|
|
7918
7922
|
var SessionHeader = React3__namespace.forwardRef(
|
|
7919
7923
|
(_a, ref) => {
|
|
7920
|
-
var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "className"]);
|
|
7924
|
+
var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "showNewSession", "showDownloadSession", "className"]);
|
|
7921
7925
|
const activeSession = sessions == null ? void 0 : sessions.find((s) => s.id === activeSessionId);
|
|
7922
7926
|
const downloadRef = React3__namespace.useRef(null);
|
|
7923
7927
|
const handleDownloadClick = React3__namespace.useCallback(async () => {
|
|
@@ -7943,8 +7947,8 @@ var SessionHeader = React3__namespace.forwardRef(
|
|
|
7943
7947
|
children: [
|
|
7944
7948
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: displayTitle }) }),
|
|
7945
7949
|
showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1 flex-none", children: [
|
|
7946
|
-
onDownloadSession && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: handleDownloadClick, className: "h-8 w-8", title: "Download Chat History", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "h-4 w-4" }) }),
|
|
7947
|
-
/* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: onNewSession, className: "h-8 w-8", title: "New Session", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", className: "h-4 w-4" }) }),
|
|
7950
|
+
Boolean(onDownloadSession && showDownloadSession) && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: handleDownloadClick, className: "h-8 w-8", title: "Download Chat History", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "h-4 w-4" }) }),
|
|
7951
|
+
Boolean(onNewSession && showNewSession) && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: onNewSession, className: "h-8 w-8", title: "New Session", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", className: "h-4 w-4" }) }),
|
|
7948
7952
|
/* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
|
|
7949
7953
|
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "clock", className: "h-4 w-4" }) }) }),
|
|
7950
7954
|
/* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64 max-h-80 overflow-y-auto", children: [
|
|
@@ -8176,6 +8180,8 @@ var ChatPanel = React3__namespace.memo(
|
|
|
8176
8180
|
showHeader = true,
|
|
8177
8181
|
sessionTitle,
|
|
8178
8182
|
showSessionActions = true,
|
|
8183
|
+
showNewSession = true,
|
|
8184
|
+
showDownloadSession = true,
|
|
8179
8185
|
variant = "default",
|
|
8180
8186
|
onClose
|
|
8181
8187
|
}) => {
|
|
@@ -8301,6 +8307,8 @@ var ChatPanel = React3__namespace.memo(
|
|
|
8301
8307
|
{
|
|
8302
8308
|
title: sessionTitle,
|
|
8303
8309
|
showActions: showSessionActions,
|
|
8310
|
+
showNewSession,
|
|
8311
|
+
showDownloadSession,
|
|
8304
8312
|
sessions,
|
|
8305
8313
|
activeSessionId,
|
|
8306
8314
|
onNewSession,
|
|
@@ -15181,6 +15189,141 @@ var StoryPlayer = React3__namespace.forwardRef(
|
|
|
15181
15189
|
);
|
|
15182
15190
|
StoryPlayer.displayName = "StoryPlayer";
|
|
15183
15191
|
var ScenePlayer = StoryPlayer;
|
|
15192
|
+
var AccountButton = React3__namespace.forwardRef(
|
|
15193
|
+
(_a, ref) => {
|
|
15194
|
+
var _b = _a, { initial = "R", avatarColor, className } = _b, props = __objRest(_b, ["initial", "avatarColor", "className"]);
|
|
15195
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
15196
|
+
"button",
|
|
15197
|
+
__spreadProps(__spreadValues({
|
|
15198
|
+
ref,
|
|
15199
|
+
type: "button",
|
|
15200
|
+
"aria-label": "Account details",
|
|
15201
|
+
className: cn(
|
|
15202
|
+
"flex items-center gap-1.5 p-1 rounded-full hover:bg-muted/50 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
15203
|
+
className
|
|
15204
|
+
)
|
|
15205
|
+
}, props), {
|
|
15206
|
+
children: [
|
|
15207
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
15208
|
+
"div",
|
|
15209
|
+
{
|
|
15210
|
+
className: cn(
|
|
15211
|
+
"w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold select-none text-white",
|
|
15212
|
+
avatarColor ? "" : "bg-emerald-700"
|
|
15213
|
+
),
|
|
15214
|
+
style: avatarColor ? { backgroundColor: avatarColor } : void 0,
|
|
15215
|
+
children: initial
|
|
15216
|
+
}
|
|
15217
|
+
),
|
|
15218
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-down", className: "w-3.5 h-3.5 text-muted-foreground" })
|
|
15219
|
+
]
|
|
15220
|
+
})
|
|
15221
|
+
);
|
|
15222
|
+
}
|
|
15223
|
+
);
|
|
15224
|
+
AccountButton.displayName = "AccountButton";
|
|
15225
|
+
var AccountDialog = React3__namespace.forwardRef(
|
|
15226
|
+
(_a, _ref) => {
|
|
15227
|
+
var _b = _a, {
|
|
15228
|
+
user,
|
|
15229
|
+
trigger,
|
|
15230
|
+
showTrigger = true,
|
|
15231
|
+
onUpgrade,
|
|
15232
|
+
onSignOut,
|
|
15233
|
+
termsUrl = "/terms",
|
|
15234
|
+
onTermsClick,
|
|
15235
|
+
className,
|
|
15236
|
+
children
|
|
15237
|
+
} = _b, dialogProps = __objRest(_b, [
|
|
15238
|
+
"user",
|
|
15239
|
+
"trigger",
|
|
15240
|
+
"showTrigger",
|
|
15241
|
+
"onUpgrade",
|
|
15242
|
+
"onSignOut",
|
|
15243
|
+
"termsUrl",
|
|
15244
|
+
"onTermsClick",
|
|
15245
|
+
"className",
|
|
15246
|
+
"children"
|
|
15247
|
+
]);
|
|
15248
|
+
const email = (user == null ? void 0 : user.email) || "rajalakshmi2655@gmail.com";
|
|
15249
|
+
const initial = (user == null ? void 0 : user.initial) || ((user == null ? void 0 : user.name) ? user.name[0].toUpperCase() : email[0].toUpperCase());
|
|
15250
|
+
const plan = (user == null ? void 0 : user.plan) || "Google AI Pro";
|
|
15251
|
+
const planDescription = (user == null ? void 0 : user.planDescription) || "You can upgrade to a Google AI Ultra plan to receive higher rate limits.";
|
|
15252
|
+
const defaultTrigger = /* @__PURE__ */ jsxRuntime.jsx(AccountButton, { initial, avatarColor: user == null ? void 0 : user.avatarColor });
|
|
15253
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Dialog2, __spreadProps(__spreadValues({}, dialogProps), { children: [
|
|
15254
|
+
showTrigger && /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { asChild: true, children: trigger != null ? trigger : defaultTrigger }),
|
|
15255
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
15256
|
+
DialogContent,
|
|
15257
|
+
{
|
|
15258
|
+
className: cn(
|
|
15259
|
+
"sm:max-w-md p-6 bg-card text-card-foreground border-border rounded-2xl shadow-2xl",
|
|
15260
|
+
className
|
|
15261
|
+
),
|
|
15262
|
+
children: [
|
|
15263
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "gap-1 text-left", children: [
|
|
15264
|
+
/* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-xl font-bold tracking-tight text-foreground", children: "Account" }),
|
|
15265
|
+
/* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-xs text-muted-foreground", children: "Manage your plan, credentials, and general preferences." })
|
|
15266
|
+
] }),
|
|
15267
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
|
|
15268
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-foreground/90 mb-2.5", children: "Account" }),
|
|
15269
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border bg-muted/30 divide-y divide-border overflow-hidden", children: [
|
|
15270
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 gap-3", children: [
|
|
15271
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pr-1", children: [
|
|
15272
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-foreground", children: [
|
|
15273
|
+
"Your Plan: ",
|
|
15274
|
+
plan
|
|
15275
|
+
] }),
|
|
15276
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-0.5 leading-snug", children: planDescription })
|
|
15277
|
+
] }),
|
|
15278
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
15279
|
+
Button2,
|
|
15280
|
+
{
|
|
15281
|
+
size: "sm",
|
|
15282
|
+
onClick: onUpgrade,
|
|
15283
|
+
className: "shrink-0 bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs px-4 py-2 rounded-lg cursor-pointer",
|
|
15284
|
+
children: "Upgrade"
|
|
15285
|
+
}
|
|
15286
|
+
)
|
|
15287
|
+
] }),
|
|
15288
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 gap-3", children: [
|
|
15289
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pr-1", children: [
|
|
15290
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Email" }),
|
|
15291
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 font-normal truncate", children: email })
|
|
15292
|
+
] }),
|
|
15293
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
15294
|
+
Button2,
|
|
15295
|
+
{
|
|
15296
|
+
variant: "outline",
|
|
15297
|
+
size: "sm",
|
|
15298
|
+
onClick: onSignOut,
|
|
15299
|
+
className: "shrink-0 text-xs font-medium px-3.5 py-2 rounded-lg cursor-pointer",
|
|
15300
|
+
children: "Sign Out"
|
|
15301
|
+
}
|
|
15302
|
+
)
|
|
15303
|
+
] })
|
|
15304
|
+
] }),
|
|
15305
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mt-6 text-left", children: [
|
|
15306
|
+
"By using this app, you agree to its",
|
|
15307
|
+
" ",
|
|
15308
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
15309
|
+
"a",
|
|
15310
|
+
{
|
|
15311
|
+
href: termsUrl,
|
|
15312
|
+
onClick: onTermsClick != null ? onTermsClick : ((e) => e.preventDefault()),
|
|
15313
|
+
className: "text-blue-500 hover:underline cursor-pointer",
|
|
15314
|
+
children: "Terms of Service"
|
|
15315
|
+
}
|
|
15316
|
+
)
|
|
15317
|
+
] })
|
|
15318
|
+
] }),
|
|
15319
|
+
children
|
|
15320
|
+
]
|
|
15321
|
+
}
|
|
15322
|
+
)
|
|
15323
|
+
] }));
|
|
15324
|
+
}
|
|
15325
|
+
);
|
|
15326
|
+
AccountDialog.displayName = "AccountDialog";
|
|
15184
15327
|
var SpecNavigator = React3__namespace.memo(
|
|
15185
15328
|
({ groups, selectedFileId, onFileSelect, className }) => {
|
|
15186
15329
|
var _a, _b;
|
|
@@ -17874,6 +18017,8 @@ Object.defineProperty(exports, "toast", {
|
|
|
17874
18017
|
enumerable: true,
|
|
17875
18018
|
get: function () { return sonner.toast; }
|
|
17876
18019
|
});
|
|
18020
|
+
exports.AccountButton = AccountButton;
|
|
18021
|
+
exports.AccountDialog = AccountDialog;
|
|
17877
18022
|
exports.AgentAnnotation = AgentAnnotation;
|
|
17878
18023
|
exports.AppBreadcrumb = AppBreadcrumb;
|
|
17879
18024
|
exports.ApprovalCard = ApprovalCard;
|