@howone/sdk 0.5.3 → 0.6.0
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/dist/index.d.mts +8 -4
- package/dist/index.d.ts +8 -4
- package/dist/index.js +175 -463
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +147 -435
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -4
package/dist/index.js
CHANGED
|
@@ -284,13 +284,13 @@ var index_exports = {};
|
|
|
284
284
|
__export(index_exports, {
|
|
285
285
|
AUTH_TOKEN_KEY: () => AUTH_TOKEN_KEY,
|
|
286
286
|
ClayxButton: () => ClayxButton,
|
|
287
|
-
ClayxToast: () => ClayxToast,
|
|
288
287
|
DefaultErrorFallback: () => DefaultErrorFallback,
|
|
289
288
|
ElementSelector: () => ElementSelector,
|
|
290
289
|
ElementSelectorProvider: () => ElementSelectorProvider,
|
|
291
290
|
ErrorBoundary: () => ErrorBoundary,
|
|
292
291
|
FloatingButton: () => FloatingButton,
|
|
293
292
|
GlobalToastContainer: () => GlobalToastContainer,
|
|
293
|
+
GoeyToast: () => GoeyToast,
|
|
294
294
|
HowOneProvider: () => HowOneProvider,
|
|
295
295
|
Loading: () => Loading,
|
|
296
296
|
LoadingSpinner: () => LoadingSpinner,
|
|
@@ -1031,7 +1031,7 @@ var LoginForm = ({
|
|
|
1031
1031
|
};
|
|
1032
1032
|
|
|
1033
1033
|
// src/components/auth/HowoneProvider.tsx
|
|
1034
|
-
var
|
|
1034
|
+
var import_react9 = require("react");
|
|
1035
1035
|
init_auth();
|
|
1036
1036
|
|
|
1037
1037
|
// src/components/theme/ThemeProvider.tsx
|
|
@@ -1088,33 +1088,68 @@ var useTheme = () => {
|
|
|
1088
1088
|
};
|
|
1089
1089
|
|
|
1090
1090
|
// src/components/ui/Toast/GlobalToastContainer.tsx
|
|
1091
|
-
var
|
|
1091
|
+
var import_goey_toast = require("goey-toast");
|
|
1092
|
+
var import_styles = require("goey-toast/styles.css");
|
|
1093
|
+
|
|
1094
|
+
// src/components/theme/ThemeToggle.tsx
|
|
1095
|
+
var React2 = __toESM(require("react"));
|
|
1096
|
+
var import_react5 = require("@iconify/react");
|
|
1092
1097
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1093
|
-
function
|
|
1098
|
+
function ThemeToggle({ className }) {
|
|
1099
|
+
const { setTheme, theme } = useTheme();
|
|
1100
|
+
const [mounted, setMounted] = React2.useState(false);
|
|
1101
|
+
React2.useEffect(() => {
|
|
1102
|
+
setMounted(true);
|
|
1103
|
+
}, []);
|
|
1104
|
+
const handleToggle = () => {
|
|
1105
|
+
if (theme === "dark") {
|
|
1106
|
+
setTheme("light");
|
|
1107
|
+
} else {
|
|
1108
|
+
setTheme("dark");
|
|
1109
|
+
}
|
|
1110
|
+
};
|
|
1111
|
+
if (!mounted) {
|
|
1112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Icon, { icon: "solar:sun-bold", width: 20, height: 20 });
|
|
1113
|
+
}
|
|
1094
1114
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1095
|
-
|
|
1115
|
+
"div",
|
|
1096
1116
|
{
|
|
1097
|
-
|
|
1098
|
-
|
|
1117
|
+
className: `cursor-pointer ${className || ""}`,
|
|
1118
|
+
onClick: handleToggle,
|
|
1119
|
+
children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Icon, { icon: "solar:sun-bold", width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Icon, { icon: "solar:moon-linear", width: 20, height: 20 })
|
|
1120
|
+
}
|
|
1121
|
+
);
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
// src/components/ui/Toast/GlobalToastContainer.tsx
|
|
1125
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1126
|
+
function GlobalToastContainer() {
|
|
1127
|
+
const { theme } = useTheme();
|
|
1128
|
+
const resolvedTheme = theme === "dark" ? "dark" : "light";
|
|
1129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1130
|
+
import_goey_toast.GoeyToaster,
|
|
1131
|
+
{
|
|
1132
|
+
position: "bottom-right",
|
|
1133
|
+
theme: resolvedTheme
|
|
1099
1134
|
}
|
|
1100
1135
|
);
|
|
1101
1136
|
}
|
|
1102
1137
|
|
|
1103
1138
|
// src/components/ElementSelectorProvider.tsx
|
|
1104
|
-
var
|
|
1139
|
+
var import_react8 = require("react");
|
|
1105
1140
|
|
|
1106
1141
|
// src/components/ElementSelector.tsx
|
|
1107
|
-
var
|
|
1108
|
-
var
|
|
1142
|
+
var import_react6 = require("react");
|
|
1143
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1109
1144
|
var ElementSelector = ({
|
|
1110
1145
|
active,
|
|
1111
1146
|
onSelect,
|
|
1112
1147
|
onCancel
|
|
1113
1148
|
}) => {
|
|
1114
|
-
const [hoveredElement, setHoveredElement] = (0,
|
|
1115
|
-
const [highlightRect, setHighlightRect] = (0,
|
|
1116
|
-
const overlayRef = (0,
|
|
1117
|
-
const getSourceLocation = (0,
|
|
1149
|
+
const [hoveredElement, setHoveredElement] = (0, import_react6.useState)(null);
|
|
1150
|
+
const [highlightRect, setHighlightRect] = (0, import_react6.useState)(null);
|
|
1151
|
+
const overlayRef = (0, import_react6.useRef)(null);
|
|
1152
|
+
const getSourceLocation = (0, import_react6.useCallback)((element) => {
|
|
1118
1153
|
let current = element;
|
|
1119
1154
|
while (current && current !== document.body) {
|
|
1120
1155
|
const sourceLocationAttr = current.getAttribute("data-source-location");
|
|
@@ -1129,7 +1164,7 @@ var ElementSelector = ({
|
|
|
1129
1164
|
}
|
|
1130
1165
|
return null;
|
|
1131
1166
|
}, []);
|
|
1132
|
-
const handleMouseMove = (0,
|
|
1167
|
+
const handleMouseMove = (0, import_react6.useCallback)((e) => {
|
|
1133
1168
|
if (!active) return;
|
|
1134
1169
|
const elements = document.elementsFromPoint(e.clientX, e.clientY);
|
|
1135
1170
|
const targetElement = elements.find(
|
|
@@ -1141,7 +1176,7 @@ var ElementSelector = ({
|
|
|
1141
1176
|
setHighlightRect(rect);
|
|
1142
1177
|
}
|
|
1143
1178
|
}, [active, hoveredElement]);
|
|
1144
|
-
const handleClick = (0,
|
|
1179
|
+
const handleClick = (0, import_react6.useCallback)((e) => {
|
|
1145
1180
|
if (!active || !hoveredElement) return;
|
|
1146
1181
|
e.preventDefault();
|
|
1147
1182
|
e.stopPropagation();
|
|
@@ -1169,7 +1204,7 @@ var ElementSelector = ({
|
|
|
1169
1204
|
}
|
|
1170
1205
|
}
|
|
1171
1206
|
}, [active, hoveredElement, getSourceLocation, onSelect, onCancel]);
|
|
1172
|
-
(0,
|
|
1207
|
+
(0, import_react6.useEffect)(() => {
|
|
1173
1208
|
if (active) {
|
|
1174
1209
|
document.addEventListener("mousemove", handleMouseMove);
|
|
1175
1210
|
document.addEventListener("click", handleClick, true);
|
|
@@ -1185,8 +1220,8 @@ var ElementSelector = ({
|
|
|
1185
1220
|
}
|
|
1186
1221
|
}, [active, handleMouseMove, handleClick]);
|
|
1187
1222
|
if (!active) return null;
|
|
1188
|
-
return /* @__PURE__ */ (0,
|
|
1189
|
-
/* @__PURE__ */ (0,
|
|
1223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
1224
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1190
1225
|
"div",
|
|
1191
1226
|
{
|
|
1192
1227
|
ref: overlayRef,
|
|
@@ -1203,7 +1238,7 @@ var ElementSelector = ({
|
|
|
1203
1238
|
}
|
|
1204
1239
|
}
|
|
1205
1240
|
),
|
|
1206
|
-
highlightRect && /* @__PURE__ */ (0,
|
|
1241
|
+
highlightRect && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1207
1242
|
"div",
|
|
1208
1243
|
{
|
|
1209
1244
|
style: {
|
|
@@ -1221,7 +1256,7 @@ var ElementSelector = ({
|
|
|
1221
1256
|
}
|
|
1222
1257
|
}
|
|
1223
1258
|
),
|
|
1224
|
-
hoveredElement && highlightRect && /* @__PURE__ */ (0,
|
|
1259
|
+
hoveredElement && highlightRect && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1225
1260
|
"div",
|
|
1226
1261
|
{
|
|
1227
1262
|
style: {
|
|
@@ -1247,17 +1282,17 @@ var ElementSelector = ({
|
|
|
1247
1282
|
};
|
|
1248
1283
|
|
|
1249
1284
|
// src/hooks/use-element-selector.ts
|
|
1250
|
-
var
|
|
1285
|
+
var import_react7 = require("react");
|
|
1251
1286
|
function useElementSelector() {
|
|
1252
|
-
const [isSelecting, setIsSelecting] = (0,
|
|
1253
|
-
const [selectedElement, setSelectedElement] = (0,
|
|
1254
|
-
const startSelecting = (0,
|
|
1287
|
+
const [isSelecting, setIsSelecting] = (0, import_react7.useState)(false);
|
|
1288
|
+
const [selectedElement, setSelectedElement] = (0, import_react7.useState)(null);
|
|
1289
|
+
const startSelecting = (0, import_react7.useCallback)(() => {
|
|
1255
1290
|
setIsSelecting(true);
|
|
1256
1291
|
}, []);
|
|
1257
|
-
const stopSelecting = (0,
|
|
1292
|
+
const stopSelecting = (0, import_react7.useCallback)(() => {
|
|
1258
1293
|
setIsSelecting(false);
|
|
1259
1294
|
}, []);
|
|
1260
|
-
const clearSelection = (0,
|
|
1295
|
+
const clearSelection = (0, import_react7.useCallback)(() => {
|
|
1261
1296
|
setSelectedElement(null);
|
|
1262
1297
|
}, []);
|
|
1263
1298
|
return {
|
|
@@ -1278,10 +1313,10 @@ function sendElementSelectionToParent(data) {
|
|
|
1278
1313
|
}
|
|
1279
1314
|
|
|
1280
1315
|
// src/components/ElementSelectorProvider.tsx
|
|
1281
|
-
var
|
|
1316
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1282
1317
|
var ElementSelectorProvider = ({ children }) => {
|
|
1283
|
-
const [isSelecting, setIsSelecting] = (0,
|
|
1284
|
-
const handleCancel = (0,
|
|
1318
|
+
const [isSelecting, setIsSelecting] = (0, import_react8.useState)(false);
|
|
1319
|
+
const handleCancel = (0, import_react8.useCallback)(() => {
|
|
1285
1320
|
setIsSelecting(false);
|
|
1286
1321
|
if (window.parent && window.parent !== window) {
|
|
1287
1322
|
window.parent.postMessage({
|
|
@@ -1289,10 +1324,10 @@ var ElementSelectorProvider = ({ children }) => {
|
|
|
1289
1324
|
}, "*");
|
|
1290
1325
|
}
|
|
1291
1326
|
}, []);
|
|
1292
|
-
const handleSelect = (0,
|
|
1327
|
+
const handleSelect = (0, import_react8.useCallback)((data) => {
|
|
1293
1328
|
sendElementSelectionToParent(data);
|
|
1294
1329
|
}, []);
|
|
1295
|
-
(0,
|
|
1330
|
+
(0, import_react8.useEffect)(() => {
|
|
1296
1331
|
const handleStartSelection = () => {
|
|
1297
1332
|
setIsSelecting(true);
|
|
1298
1333
|
};
|
|
@@ -1315,9 +1350,9 @@ var ElementSelectorProvider = ({ children }) => {
|
|
|
1315
1350
|
window.removeEventListener("message", handleMessage);
|
|
1316
1351
|
};
|
|
1317
1352
|
}, [handleCancel]);
|
|
1318
|
-
return /* @__PURE__ */ (0,
|
|
1353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
1319
1354
|
children,
|
|
1320
|
-
/* @__PURE__ */ (0,
|
|
1355
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1321
1356
|
ElementSelector,
|
|
1322
1357
|
{
|
|
1323
1358
|
active: isSelecting,
|
|
@@ -1330,8 +1365,8 @@ var ElementSelectorProvider = ({ children }) => {
|
|
|
1330
1365
|
|
|
1331
1366
|
// src/components/auth/HowoneProvider.tsx
|
|
1332
1367
|
init_config();
|
|
1333
|
-
var
|
|
1334
|
-
var HowoneContext = (0,
|
|
1368
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1369
|
+
var HowoneContext = (0, import_react9.createContext)(null);
|
|
1335
1370
|
var consumedTokenCache = /* @__PURE__ */ new Set();
|
|
1336
1371
|
var redirectOverlayStylesInjected = false;
|
|
1337
1372
|
var injectRedirectOverlayStyles = () => {
|
|
@@ -1392,15 +1427,15 @@ var HowOneProvider = ({
|
|
|
1392
1427
|
forceDefaultTheme = false,
|
|
1393
1428
|
redirectOnUnauthenticated = true
|
|
1394
1429
|
}) => {
|
|
1395
|
-
const [user, setUser] = (0,
|
|
1396
|
-
const [token, setTokenState] = (0,
|
|
1397
|
-
const [hasCheckedUrlToken, setHasCheckedUrlToken] = (0,
|
|
1398
|
-
const [pendingRedirect, setPendingRedirect] = (0,
|
|
1399
|
-
const authCookieRoot = (0,
|
|
1430
|
+
const [user, setUser] = (0, import_react9.useState)(() => parseUserFromToken(getToken()));
|
|
1431
|
+
const [token, setTokenState] = (0, import_react9.useState)(() => getToken());
|
|
1432
|
+
const [hasCheckedUrlToken, setHasCheckedUrlToken] = (0, import_react9.useState)(false);
|
|
1433
|
+
const [pendingRedirect, setPendingRedirect] = (0, import_react9.useState)(false);
|
|
1434
|
+
const authCookieRoot = (0, import_react9.useMemo)(() => {
|
|
1400
1435
|
const env3 = getGlobalEnvironment() ?? "dev";
|
|
1401
1436
|
return setEnvironment(env3).AUTH_COOKIE_ROOT_VALUE;
|
|
1402
1437
|
}, []);
|
|
1403
|
-
const consumeTokenToCookie = (0,
|
|
1438
|
+
const consumeTokenToCookie = (0, import_react9.useCallback)(async (value2) => {
|
|
1404
1439
|
if (!value2) return;
|
|
1405
1440
|
if (consumedTokenCache.has(value2)) return;
|
|
1406
1441
|
consumedTokenCache.add(value2);
|
|
@@ -1427,7 +1462,7 @@ var HowOneProvider = ({
|
|
|
1427
1462
|
console.warn("[HowOneProvider] Failed to consume token:", error);
|
|
1428
1463
|
}
|
|
1429
1464
|
}, [authCookieRoot]);
|
|
1430
|
-
const logoutFromCookie = (0,
|
|
1465
|
+
const logoutFromCookie = (0, import_react9.useCallback)(async () => {
|
|
1431
1466
|
try {
|
|
1432
1467
|
await fetch(`${authCookieRoot}/logout`, {
|
|
1433
1468
|
method: "POST",
|
|
@@ -1437,7 +1472,7 @@ var HowOneProvider = ({
|
|
|
1437
1472
|
console.warn("[HowOneProvider] Failed to logout from cookie:", error);
|
|
1438
1473
|
}
|
|
1439
1474
|
}, [authCookieRoot]);
|
|
1440
|
-
const readAccessTokenCookie = (0,
|
|
1475
|
+
const readAccessTokenCookie = (0, import_react9.useCallback)(() => {
|
|
1441
1476
|
if (typeof document === "undefined") return null;
|
|
1442
1477
|
try {
|
|
1443
1478
|
const parts = document.cookie.split("; ");
|
|
@@ -1453,7 +1488,7 @@ var HowOneProvider = ({
|
|
|
1453
1488
|
}
|
|
1454
1489
|
return null;
|
|
1455
1490
|
}, []);
|
|
1456
|
-
(0,
|
|
1491
|
+
(0, import_react9.useEffect)(() => {
|
|
1457
1492
|
try {
|
|
1458
1493
|
const params = new URLSearchParams(window.location.search);
|
|
1459
1494
|
let urlToken = params.get("access_token") || params.get("token");
|
|
@@ -1487,7 +1522,7 @@ var HowOneProvider = ({
|
|
|
1487
1522
|
setHasCheckedUrlToken(true);
|
|
1488
1523
|
}
|
|
1489
1524
|
}, [consumeTokenToCookie, readAccessTokenCookie]);
|
|
1490
|
-
const resolvedAuthUrl = (0,
|
|
1525
|
+
const resolvedAuthUrl = (0, import_react9.useMemo)(() => {
|
|
1491
1526
|
const env3 = getGlobalEnvironment() ?? "dev";
|
|
1492
1527
|
switch (env3) {
|
|
1493
1528
|
case "local":
|
|
@@ -1499,12 +1534,12 @@ var HowOneProvider = ({
|
|
|
1499
1534
|
return "https://howone.dev/auth";
|
|
1500
1535
|
}
|
|
1501
1536
|
}, []);
|
|
1502
|
-
(0,
|
|
1537
|
+
(0, import_react9.useEffect)(() => {
|
|
1503
1538
|
if (pendingRedirect) {
|
|
1504
1539
|
injectRedirectOverlayStyles();
|
|
1505
1540
|
}
|
|
1506
1541
|
}, [pendingRedirect]);
|
|
1507
|
-
const redirectToAuth = (0,
|
|
1542
|
+
const redirectToAuth = (0, import_react9.useCallback)(() => {
|
|
1508
1543
|
if (!redirectOnUnauthenticated || typeof window === "undefined") return;
|
|
1509
1544
|
const activeProjectId = projectId ?? getDefaultProjectId();
|
|
1510
1545
|
const navigateToResolvedAuth = () => {
|
|
@@ -1546,7 +1581,7 @@ var HowOneProvider = ({
|
|
|
1546
1581
|
navigateToResolvedAuth();
|
|
1547
1582
|
}
|
|
1548
1583
|
}, [redirectOnUnauthenticated, resolvedAuthUrl, projectId]);
|
|
1549
|
-
(0,
|
|
1584
|
+
(0, import_react9.useEffect)(() => {
|
|
1550
1585
|
if (!hasCheckedUrlToken) return;
|
|
1551
1586
|
if (!token && !user) {
|
|
1552
1587
|
redirectToAuth();
|
|
@@ -1569,31 +1604,31 @@ var HowOneProvider = ({
|
|
|
1569
1604
|
logout
|
|
1570
1605
|
};
|
|
1571
1606
|
if (!hasCheckedUrlToken) return null;
|
|
1572
|
-
return /* @__PURE__ */ (0,
|
|
1607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1573
1608
|
ThemeProvider,
|
|
1574
1609
|
{
|
|
1575
1610
|
defaultTheme,
|
|
1576
1611
|
storageKey: themeStorageKey,
|
|
1577
1612
|
forceDefault: forceDefaultTheme,
|
|
1578
1613
|
children: [
|
|
1579
|
-
/* @__PURE__ */ (0,
|
|
1614
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ElementSelectorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(HowoneContext.Provider, { value, children: [
|
|
1580
1615
|
children,
|
|
1581
|
-
showHowOneFlag && /* @__PURE__ */ (0,
|
|
1582
|
-
pendingRedirect && /* @__PURE__ */ (0,
|
|
1616
|
+
showHowOneFlag && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloatingButton, { onClick: () => window.open("https://howone.ai", "_blank") }),
|
|
1617
|
+
pendingRedirect && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1583
1618
|
"div",
|
|
1584
1619
|
{
|
|
1585
1620
|
"data-howone-auth-overlay-root": true,
|
|
1586
1621
|
className: "fixed inset-0 z-[100000] h-full w-full flex flex-col items-center justify-center bg-black/65 backdrop-blur-sm text-white",
|
|
1587
|
-
children: /* @__PURE__ */ (0,
|
|
1588
|
-
/* @__PURE__ */ (0,
|
|
1622
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative mt-6 flex h-[220px] w-[220px] items-center justify-center", children: [
|
|
1623
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1589
1624
|
"div",
|
|
1590
1625
|
{
|
|
1591
1626
|
className: "absolute inset-0 rounded-full bg-white/20",
|
|
1592
1627
|
style: { animation: "howone-glow-ring 2.4s ease-in-out infinite" }
|
|
1593
1628
|
}
|
|
1594
1629
|
),
|
|
1595
|
-
/* @__PURE__ */ (0,
|
|
1596
|
-
/* @__PURE__ */ (0,
|
|
1630
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 rounded-full bg-gradient-to-br from-white/10 via-white/25 to-white/10 blur-2xl" }),
|
|
1631
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1597
1632
|
"img",
|
|
1598
1633
|
{
|
|
1599
1634
|
style: { width: 250, animation: "howone-logo-pulse 2s ease-in-out infinite" },
|
|
@@ -1605,13 +1640,13 @@ var HowOneProvider = ({
|
|
|
1605
1640
|
}
|
|
1606
1641
|
)
|
|
1607
1642
|
] }) }),
|
|
1608
|
-
/* @__PURE__ */ (0,
|
|
1643
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GlobalToastContainer, {})
|
|
1609
1644
|
]
|
|
1610
1645
|
}
|
|
1611
1646
|
);
|
|
1612
1647
|
};
|
|
1613
1648
|
function useHowoneContext() {
|
|
1614
|
-
const ctx = (0,
|
|
1649
|
+
const ctx = (0, import_react9.useContext)(HowoneContext);
|
|
1615
1650
|
if (!ctx) {
|
|
1616
1651
|
const t = getToken();
|
|
1617
1652
|
return {
|
|
@@ -1715,7 +1750,7 @@ var howone = {
|
|
|
1715
1750
|
var client_default = howone;
|
|
1716
1751
|
|
|
1717
1752
|
// src/components/ui/Loading.tsx
|
|
1718
|
-
var
|
|
1753
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1719
1754
|
var Loading = ({
|
|
1720
1755
|
size = "md",
|
|
1721
1756
|
text = "Loading...",
|
|
@@ -1728,14 +1763,14 @@ var Loading = ({
|
|
|
1728
1763
|
lg: "h-12 w-12"
|
|
1729
1764
|
};
|
|
1730
1765
|
const containerClasses = fullScreen ? "fixed inset-0 flex items-center justify-center bg-white/80 backdrop-blur-sm z-50" : "flex items-center justify-center p-4";
|
|
1731
|
-
return /* @__PURE__ */ (0,
|
|
1732
|
-
/* @__PURE__ */ (0,
|
|
1766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${containerClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center", children: [
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1733
1768
|
"div",
|
|
1734
1769
|
{
|
|
1735
1770
|
className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 mx-auto ${sizeClasses[size]}`
|
|
1736
1771
|
}
|
|
1737
1772
|
),
|
|
1738
|
-
text && /* @__PURE__ */ (0,
|
|
1773
|
+
text && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-2 text-sm text-gray-600", children: text })
|
|
1739
1774
|
] }) });
|
|
1740
1775
|
};
|
|
1741
1776
|
var LoadingSpinner = ({
|
|
@@ -1747,7 +1782,7 @@ var LoadingSpinner = ({
|
|
|
1747
1782
|
md: "h-8 w-8",
|
|
1748
1783
|
lg: "h-12 w-12"
|
|
1749
1784
|
};
|
|
1750
|
-
return /* @__PURE__ */ (0,
|
|
1785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1751
1786
|
"div",
|
|
1752
1787
|
{
|
|
1753
1788
|
className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className}`
|
|
@@ -1756,9 +1791,9 @@ var LoadingSpinner = ({
|
|
|
1756
1791
|
};
|
|
1757
1792
|
|
|
1758
1793
|
// src/components/ui/ErrorBoundary.tsx
|
|
1759
|
-
var
|
|
1760
|
-
var
|
|
1761
|
-
var ErrorBoundary = class extends
|
|
1794
|
+
var import_react10 = require("react");
|
|
1795
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1796
|
+
var ErrorBoundary = class extends import_react10.Component {
|
|
1762
1797
|
constructor(props) {
|
|
1763
1798
|
super(props);
|
|
1764
1799
|
this.handleRetry = () => {
|
|
@@ -1780,13 +1815,13 @@ var ErrorBoundary = class extends import_react9.Component {
|
|
|
1780
1815
|
if (this.state.hasError) {
|
|
1781
1816
|
if (this.props.fallback) {
|
|
1782
1817
|
const FallbackComponent = this.props.fallback;
|
|
1783
|
-
return /* @__PURE__ */ (0,
|
|
1818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FallbackComponent, { error: this.state.error, retry: this.handleRetry });
|
|
1784
1819
|
}
|
|
1785
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
-
/* @__PURE__ */ (0,
|
|
1787
|
-
/* @__PURE__ */ (0,
|
|
1788
|
-
/* @__PURE__ */ (0,
|
|
1789
|
-
/* @__PURE__ */ (0,
|
|
1820
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-[400px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center max-w-md", children: [
|
|
1821
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-red-500 text-6xl mb-4", children: "\u26A0\uFE0F" }),
|
|
1822
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Something went wrong" }),
|
|
1823
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600 mb-4", children: "An unexpected error occurred. Please try refreshing the page." }),
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1790
1825
|
"button",
|
|
1791
1826
|
{
|
|
1792
1827
|
onClick: this.handleRetry,
|
|
@@ -1800,10 +1835,10 @@ var ErrorBoundary = class extends import_react9.Component {
|
|
|
1800
1835
|
return this.props.children;
|
|
1801
1836
|
}
|
|
1802
1837
|
};
|
|
1803
|
-
var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0,
|
|
1804
|
-
/* @__PURE__ */ (0,
|
|
1805
|
-
/* @__PURE__ */ (0,
|
|
1806
|
-
retry && /* @__PURE__ */ (0,
|
|
1838
|
+
var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-[200px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
|
|
1839
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-red-500 text-4xl mb-2", children: "\u26A0\uFE0F" }),
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600 mb-2", children: "Something went wrong" }),
|
|
1841
|
+
retry && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1807
1842
|
"button",
|
|
1808
1843
|
{
|
|
1809
1844
|
onClick: retry,
|
|
@@ -1814,7 +1849,7 @@ var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0, import_jsx_runtime
|
|
|
1814
1849
|
] }) });
|
|
1815
1850
|
|
|
1816
1851
|
// src/components/ui/ClayxButton.tsx
|
|
1817
|
-
var
|
|
1852
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1818
1853
|
var getSizeClasses = (size, isIconOnly) => {
|
|
1819
1854
|
if (isIconOnly) {
|
|
1820
1855
|
switch (size) {
|
|
@@ -1870,7 +1905,7 @@ var ClayxButton = ({
|
|
|
1870
1905
|
disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none
|
|
1871
1906
|
`.replace(/\s+/g, " ").trim();
|
|
1872
1907
|
const combinedClasses = `${baseClasses} ${sizeClasses} ${variantClasses} ${className}`.trim();
|
|
1873
|
-
return /* @__PURE__ */ (0,
|
|
1908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1874
1909
|
"button",
|
|
1875
1910
|
{
|
|
1876
1911
|
className: combinedClasses,
|
|
@@ -1882,349 +1917,38 @@ var ClayxButton = ({
|
|
|
1882
1917
|
};
|
|
1883
1918
|
|
|
1884
1919
|
// src/components/ui/LimitUpgradeToast.tsx
|
|
1885
|
-
var import_react13 = __toESM(require("react"));
|
|
1886
|
-
var import_react14 = require("@iconify/react");
|
|
1887
|
-
|
|
1888
|
-
// src/components/ui/Toast/ClayxToast.tsx
|
|
1889
1920
|
var import_react11 = __toESM(require("react"));
|
|
1890
|
-
var import_react_toastify2 = require("react-toastify");
|
|
1891
1921
|
var import_react12 = require("@iconify/react");
|
|
1892
1922
|
|
|
1893
|
-
// src/components/
|
|
1894
|
-
var
|
|
1895
|
-
var
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
const [mounted, setMounted] = React6.useState(false);
|
|
1900
|
-
React6.useEffect(() => {
|
|
1901
|
-
setMounted(true);
|
|
1902
|
-
}, []);
|
|
1903
|
-
const handleToggle = () => {
|
|
1904
|
-
if (theme === "dark") {
|
|
1905
|
-
setTheme("light");
|
|
1906
|
-
} else {
|
|
1907
|
-
setTheme("dark");
|
|
1908
|
-
}
|
|
1909
|
-
};
|
|
1910
|
-
if (!mounted) {
|
|
1911
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Icon, { icon: "solar:sun-bold", width: 20, height: 20 });
|
|
1912
|
-
}
|
|
1913
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1914
|
-
"div",
|
|
1915
|
-
{
|
|
1916
|
-
className: `cursor-pointer ${className || ""}`,
|
|
1917
|
-
onClick: handleToggle,
|
|
1918
|
-
children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Icon, { icon: "solar:sun-bold", width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Icon, { icon: "solar:moon-linear", width: 20, height: 20 })
|
|
1919
|
-
}
|
|
1920
|
-
);
|
|
1921
|
-
}
|
|
1922
|
-
|
|
1923
|
-
// src/components/ui/Toast/ClayxToast.tsx
|
|
1924
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1925
|
-
var TOAST_ICONS = {
|
|
1926
|
-
success: {
|
|
1927
|
-
icon: "mdi:success",
|
|
1928
|
-
color: "text-green-400",
|
|
1929
|
-
className: "text-green-400",
|
|
1930
|
-
// 深色主题配置
|
|
1931
|
-
dark: {
|
|
1932
|
-
bgGradient: "bg-[#14181d]",
|
|
1933
|
-
// 移除透明度 f2
|
|
1934
|
-
gradientColor: "#389726",
|
|
1935
|
-
borderGradient: "border-[#389726]",
|
|
1936
|
-
borderGradientColor: "#389726"
|
|
1937
|
-
},
|
|
1938
|
-
// 浅色主题配置
|
|
1939
|
-
light: {
|
|
1940
|
-
bgGradient: "bg-[#fafafa]",
|
|
1941
|
-
// 移除透明度 ff
|
|
1942
|
-
gradientColor: "#22c55e",
|
|
1943
|
-
borderGradient: "border-[#22c55e]",
|
|
1944
|
-
borderGradientColor: "#22c55e"
|
|
1945
|
-
}
|
|
1946
|
-
},
|
|
1947
|
-
error: {
|
|
1948
|
-
icon: "ic:outline-close",
|
|
1949
|
-
color: "text-red-400",
|
|
1950
|
-
className: "text-red-400",
|
|
1951
|
-
dark: {
|
|
1952
|
-
bgGradient: "bg-[#14181d]",
|
|
1953
|
-
// 移除透明度 f2
|
|
1954
|
-
gradientColor: "#ef4444",
|
|
1955
|
-
borderGradient: "border-[#ef4444]",
|
|
1956
|
-
borderGradientColor: "#ef4444"
|
|
1957
|
-
},
|
|
1958
|
-
light: {
|
|
1959
|
-
bgGradient: "bg-[#fafafa]",
|
|
1960
|
-
// 移除透明度 ff
|
|
1961
|
-
gradientColor: "#f87171",
|
|
1962
|
-
borderGradient: "border-[#f87171]",
|
|
1963
|
-
borderGradientColor: "#f87171"
|
|
1964
|
-
}
|
|
1965
|
-
},
|
|
1966
|
-
warning: {
|
|
1967
|
-
icon: "mi:warning",
|
|
1968
|
-
color: "text-yellow-400",
|
|
1969
|
-
className: "text-yellow-400",
|
|
1970
|
-
dark: {
|
|
1971
|
-
bgGradient: "bg-[#14181d]",
|
|
1972
|
-
// 移除透明度 f2
|
|
1973
|
-
gradientColor: "#facc15",
|
|
1974
|
-
borderGradient: "border-[#facc15]",
|
|
1975
|
-
borderGradientColor: "#facc15"
|
|
1976
|
-
},
|
|
1977
|
-
light: {
|
|
1978
|
-
bgGradient: "bg-[#fafafa]",
|
|
1979
|
-
// 移除透明度 ff
|
|
1980
|
-
gradientColor: "#f59e0b",
|
|
1981
|
-
borderGradient: "border-[#f59e0b]",
|
|
1982
|
-
borderGradientColor: "#f59e0b"
|
|
1983
|
-
}
|
|
1984
|
-
},
|
|
1985
|
-
info: {
|
|
1986
|
-
icon: "ic:outline-info",
|
|
1987
|
-
color: "text-blue-400",
|
|
1988
|
-
className: "text-blue-400",
|
|
1989
|
-
dark: {
|
|
1990
|
-
bgGradient: "bg-[#14181d]",
|
|
1991
|
-
// 移除透明度 f2
|
|
1992
|
-
gradientColor: "#60a5fa",
|
|
1993
|
-
borderGradient: "border-[#60a5fa]",
|
|
1994
|
-
borderGradientColor: "#f0f0f0"
|
|
1995
|
-
},
|
|
1996
|
-
light: {
|
|
1997
|
-
bgGradient: "bg-[#fafafa]",
|
|
1998
|
-
// 移除透明度 ff
|
|
1999
|
-
gradientColor: "#3b82f6",
|
|
2000
|
-
borderGradient: "border-[#3b82f6]",
|
|
2001
|
-
borderGradientColor: "#3b82f6"
|
|
2002
|
-
}
|
|
2003
|
-
},
|
|
2004
|
-
default: {
|
|
2005
|
-
icon: "ic:round-notifications",
|
|
2006
|
-
color: "text-gray-400",
|
|
2007
|
-
className: "text-gray-400",
|
|
2008
|
-
dark: {
|
|
2009
|
-
bgGradient: "bg-[#14181d]",
|
|
2010
|
-
// 移除透明度 f2
|
|
2011
|
-
gradientColor: "#9ca3af",
|
|
2012
|
-
borderGradient: "border-[#9ca3af]",
|
|
2013
|
-
borderGradientColor: "#9ca3af"
|
|
2014
|
-
},
|
|
2015
|
-
light: {
|
|
2016
|
-
bgGradient: "bg-[#fafafa]",
|
|
2017
|
-
// 移除透明度 ff
|
|
2018
|
-
gradientColor: "#6b7280",
|
|
2019
|
-
borderGradient: "border-[#6b7280]",
|
|
2020
|
-
borderGradientColor: "#6b7280"
|
|
2021
|
-
}
|
|
2022
|
-
}
|
|
2023
|
-
};
|
|
2024
|
-
var CloseButton = import_react11.default.memo(({ closeToast }) => {
|
|
2025
|
-
const { theme } = useTheme();
|
|
2026
|
-
const handleClick = (0, import_react11.useCallback)((e) => {
|
|
2027
|
-
e.preventDefault();
|
|
2028
|
-
e.stopPropagation();
|
|
2029
|
-
closeToast?.();
|
|
2030
|
-
}, [closeToast]);
|
|
2031
|
-
const getCloseButtonColor = () => {
|
|
2032
|
-
const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
|
|
2033
|
-
return actualTheme === "dark" ? "#b4b4b4" : "#6b7280";
|
|
2034
|
-
};
|
|
2035
|
-
const getCloseButtonHoverColor = () => {
|
|
2036
|
-
const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
|
|
2037
|
-
return actualTheme === "dark" ? "white" : "#374151";
|
|
2038
|
-
};
|
|
2039
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2040
|
-
import_react12.Icon,
|
|
2041
|
-
{
|
|
2042
|
-
icon: "vaadin:close",
|
|
2043
|
-
className: "flex items-center justify-center rounded-full relative z-10 flex-shrink-0 cursor-pointer \n transition-colors duration-200 drop-shadow-sm",
|
|
2044
|
-
onClick: handleClick,
|
|
2045
|
-
width: 14,
|
|
2046
|
-
height: 14,
|
|
2047
|
-
style: {
|
|
2048
|
-
color: getCloseButtonColor()
|
|
2049
|
-
},
|
|
2050
|
-
onMouseEnter: (e) => {
|
|
2051
|
-
e.currentTarget.style.color = getCloseButtonHoverColor();
|
|
2052
|
-
},
|
|
2053
|
-
onMouseLeave: (e) => {
|
|
2054
|
-
e.currentTarget.style.color = getCloseButtonColor();
|
|
2055
|
-
}
|
|
2056
|
-
}
|
|
2057
|
-
);
|
|
2058
|
-
});
|
|
2059
|
-
CloseButton.displayName = "CloseButton";
|
|
2060
|
-
var ToastContent = ({ type, title, message, component, closeToast }) => {
|
|
2061
|
-
const iconConfig = TOAST_ICONS[type];
|
|
2062
|
-
const { theme } = useTheme();
|
|
2063
|
-
const handleClose = (0, import_react11.useCallback)(() => {
|
|
2064
|
-
closeToast?.();
|
|
2065
|
-
}, [closeToast]);
|
|
2066
|
-
const getTextColor = () => {
|
|
2067
|
-
const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
|
|
2068
|
-
return actualTheme === "dark" ? "white" : "#1f2937";
|
|
2069
|
-
};
|
|
2070
|
-
const getThemeConfig = () => {
|
|
2071
|
-
const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
|
|
2072
|
-
return actualTheme === "dark" ? iconConfig.dark : iconConfig.light;
|
|
2073
|
-
};
|
|
2074
|
-
const themeConfig = getThemeConfig();
|
|
2075
|
-
const lightBaseBackgroundByType = {
|
|
2076
|
-
success: "#f0fdf4",
|
|
2077
|
-
// green-50
|
|
2078
|
-
error: "#fef2f2",
|
|
2079
|
-
// red-50
|
|
2080
|
-
warning: "#fffbeb",
|
|
2081
|
-
// amber-50
|
|
2082
|
-
info: "#eff6ff",
|
|
2083
|
-
// blue-50
|
|
2084
|
-
default: "#f9fafb"
|
|
2085
|
-
// gray-50
|
|
2086
|
-
};
|
|
2087
|
-
if (component) {
|
|
2088
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-start gap-3 !min-h-[90px] w-full backdrop-blur-md p-4 shadow-2xl overflow-hidden ${themeConfig.bgGradient}`, children: [
|
|
2089
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1 relative z-10", children: component }),
|
|
2090
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseButton, { closeToast: handleClose }) })
|
|
2091
|
-
] });
|
|
2092
|
-
}
|
|
2093
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-start gap-3 !min-h-[90px] w-full backdrop-blur-md p-4 shadow-2xl relative overflow-hidden ${themeConfig.bgGradient}`, children: [
|
|
2094
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2095
|
-
"div",
|
|
2096
|
-
{
|
|
2097
|
-
className: "absolute left-0 top-0 w-full h-full rounded-xl",
|
|
2098
|
-
style: {
|
|
2099
|
-
background: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "#0f1419" : lightBaseBackgroundByType[type],
|
|
2100
|
-
zIndex: -2
|
|
2101
|
-
}
|
|
2102
|
-
}
|
|
2103
|
-
),
|
|
2104
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2105
|
-
"div",
|
|
2106
|
-
{
|
|
2107
|
-
className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-xl",
|
|
2108
|
-
style: {
|
|
2109
|
-
background: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? `linear-gradient(135deg, ${themeConfig.gradientColor}30 0%, ${themeConfig.gradientColor}20 15%, #14181df2 30%)` : `linear-gradient(135deg, ${themeConfig.gradientColor}20 0%, ${themeConfig.gradientColor}12 15%, #ffffff 30%)`,
|
|
2110
|
-
zIndex: -1
|
|
2111
|
-
}
|
|
2112
|
-
}
|
|
2113
|
-
),
|
|
2114
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2115
|
-
"div",
|
|
2116
|
-
{
|
|
2117
|
-
className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-xl",
|
|
2118
|
-
style: {
|
|
2119
|
-
border: "2px solid transparent",
|
|
2120
|
-
backgroundImage: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? `linear-gradient(135deg, ${themeConfig.borderGradientColor}60 0%, ${themeConfig.borderGradientColor}40 5%, transparent 22%)` : `linear-gradient(135deg, ${themeConfig.borderGradientColor}99 0%, ${themeConfig.borderGradientColor}66 5%, transparent 22%)`,
|
|
2121
|
-
backgroundOrigin: "border-box",
|
|
2122
|
-
backgroundClip: "border-box",
|
|
2123
|
-
WebkitMask: "linear-gradient(#ffffff 0 0) padding-box, linear-gradient(#ffffff 0 0)",
|
|
2124
|
-
WebkitMaskComposite: "xor",
|
|
2125
|
-
zIndex: 0
|
|
2126
|
-
}
|
|
2127
|
-
}
|
|
2128
|
-
),
|
|
2129
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-shrink-0 flex-grow-0 mt-0.5 relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2130
|
-
"div",
|
|
2131
|
-
{
|
|
2132
|
-
className: "backdrop-blur-sm rounded-full flex items-center justify-center overflow-hidden flex-shrink-0 flex-grow-0",
|
|
2133
|
-
style: {
|
|
2134
|
-
backgroundColor: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)",
|
|
2135
|
-
width: "28px",
|
|
2136
|
-
height: "28px"
|
|
2137
|
-
},
|
|
2138
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2139
|
-
import_react12.Icon,
|
|
2140
|
-
{
|
|
2141
|
-
icon: iconConfig.icon,
|
|
2142
|
-
width: 16,
|
|
2143
|
-
height: 16,
|
|
2144
|
-
className: `flex-shrink-0`,
|
|
2145
|
-
style: {
|
|
2146
|
-
color: themeConfig.gradientColor,
|
|
2147
|
-
display: "block"
|
|
2148
|
-
}
|
|
2149
|
-
}
|
|
2150
|
-
) })
|
|
2151
|
-
}
|
|
2152
|
-
) }),
|
|
2153
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1 flex-1 relative z-10", children: [
|
|
2154
|
-
title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2155
|
-
"div",
|
|
2156
|
-
{
|
|
2157
|
-
className: "text-[16px] font-semibold leading-tight drop-shadow-sm",
|
|
2158
|
-
style: {
|
|
2159
|
-
color: getTextColor(),
|
|
2160
|
-
backgroundClip: "text"
|
|
2161
|
-
},
|
|
2162
|
-
children: title
|
|
2163
|
-
}
|
|
2164
|
-
),
|
|
2165
|
-
message && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2166
|
-
"div",
|
|
2167
|
-
{
|
|
2168
|
-
className: "text-[13px] font-normal leading-relaxed drop-shadow-sm",
|
|
2169
|
-
style: {
|
|
2170
|
-
color: getTextColor(),
|
|
2171
|
-
backgroundClip: "text"
|
|
2172
|
-
},
|
|
2173
|
-
children: message
|
|
2174
|
-
}
|
|
2175
|
-
)
|
|
2176
|
-
] }),
|
|
2177
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseButton, { closeToast: handleClose }) })
|
|
2178
|
-
] });
|
|
2179
|
-
};
|
|
2180
|
-
var defaultToastOptions = {
|
|
2181
|
-
position: "bottom-right",
|
|
2182
|
-
autoClose: 1500,
|
|
2183
|
-
hideProgressBar: true,
|
|
2184
|
-
closeOnClick: false,
|
|
2185
|
-
pauseOnHover: true,
|
|
2186
|
-
draggable: true,
|
|
2187
|
-
pauseOnFocusLoss: false,
|
|
2188
|
-
transition: import_react_toastify2.Bounce
|
|
2189
|
-
};
|
|
2190
|
-
var getToastifyTheme = () => {
|
|
2191
|
-
if (typeof window !== "undefined") {
|
|
2192
|
-
const root = document.documentElement;
|
|
2193
|
-
if (root.classList.contains("dark")) return "dark";
|
|
2194
|
-
if (root.classList.contains("light")) return "light";
|
|
2195
|
-
return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
2196
|
-
}
|
|
2197
|
-
return "light";
|
|
1923
|
+
// src/components/ui/Toast/GoeyToast.tsx
|
|
1924
|
+
var import_goey_toast2 = require("goey-toast");
|
|
1925
|
+
var resolveDuration = (autoClose) => {
|
|
1926
|
+
if (typeof autoClose === "number") return autoClose;
|
|
1927
|
+
if (autoClose === false) return 24 * 60 * 60 * 1e3;
|
|
1928
|
+
return void 0;
|
|
2198
1929
|
};
|
|
2199
1930
|
var createToast = (type) => {
|
|
2200
1931
|
return (params) => {
|
|
2201
|
-
const {
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
...options,
|
|
2219
|
-
theme: getToastifyTheme(),
|
|
2220
|
-
// 确保圆角样式不被覆盖,添加 rounded-xl 类
|
|
2221
|
-
className: "!p-0 !shadow-none !rounded-xl",
|
|
2222
|
-
style: { padding: 0, borderRadius: "0.75rem", backgroundColor: "transparent" }
|
|
2223
|
-
}
|
|
2224
|
-
);
|
|
1932
|
+
const { autoClose, ...rawOptions } = params.options ?? {};
|
|
1933
|
+
const id = params.options?.id ?? `goey-${Date.now()}-${Math.random()}`;
|
|
1934
|
+
const closeToast = () => import_goey_toast2.goeyToast.dismiss(id);
|
|
1935
|
+
const description = params.component ?? (params.render ? params.render(closeToast) : params.message);
|
|
1936
|
+
const duration = resolveDuration(autoClose);
|
|
1937
|
+
const goeyOptions = {
|
|
1938
|
+
...rawOptions,
|
|
1939
|
+
id,
|
|
1940
|
+
description,
|
|
1941
|
+
...duration !== void 0 ? { duration } : {}
|
|
1942
|
+
};
|
|
1943
|
+
const title = params.title ?? "";
|
|
1944
|
+
if (type === "default") {
|
|
1945
|
+
(0, import_goey_toast2.goeyToast)(title, goeyOptions);
|
|
1946
|
+
return;
|
|
1947
|
+
}
|
|
1948
|
+
import_goey_toast2.goeyToast[type](title, goeyOptions);
|
|
2225
1949
|
};
|
|
2226
1950
|
};
|
|
2227
|
-
var
|
|
1951
|
+
var GoeyToast = {
|
|
2228
1952
|
success: createToast("success"),
|
|
2229
1953
|
error: createToast("error"),
|
|
2230
1954
|
warning: createToast("warning"),
|
|
@@ -2233,12 +1957,12 @@ var ClayxToast = {
|
|
|
2233
1957
|
};
|
|
2234
1958
|
|
|
2235
1959
|
// src/components/ui/LimitUpgradeToast.tsx
|
|
2236
|
-
var
|
|
1960
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2237
1961
|
var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
2238
|
-
const [hover, setHover] =
|
|
2239
|
-
const [closeHover, setCloseHover] =
|
|
2240
|
-
return /* @__PURE__ */ (0,
|
|
2241
|
-
/* @__PURE__ */ (0,
|
|
1962
|
+
const [hover, setHover] = import_react11.default.useState(false);
|
|
1963
|
+
const [closeHover, setCloseHover] = import_react11.default.useState(false);
|
|
1964
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-full max-w-[420px] overflow-hidden rounded-md bg-gradient-to-br from-[#1A1A1A] via-[#151515] to-[#1A1A1A] shadow-[0_20px_60px_rgba(168,85,247,0.2)] backdrop-blur-sm", children: [
|
|
1965
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2242
1966
|
"div",
|
|
2243
1967
|
{
|
|
2244
1968
|
className: "absolute left-0 top-0 w-full h-full rounded-md",
|
|
@@ -2248,7 +1972,7 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
|
2248
1972
|
}
|
|
2249
1973
|
}
|
|
2250
1974
|
),
|
|
2251
|
-
/* @__PURE__ */ (0,
|
|
1975
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2252
1976
|
"div",
|
|
2253
1977
|
{
|
|
2254
1978
|
className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-md",
|
|
@@ -2258,7 +1982,7 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
|
2258
1982
|
}
|
|
2259
1983
|
}
|
|
2260
1984
|
),
|
|
2261
|
-
/* @__PURE__ */ (0,
|
|
1985
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2262
1986
|
"div",
|
|
2263
1987
|
{
|
|
2264
1988
|
className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-md",
|
|
@@ -2274,15 +1998,15 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
|
2274
1998
|
}
|
|
2275
1999
|
}
|
|
2276
2000
|
),
|
|
2277
|
-
/* @__PURE__ */ (0,
|
|
2278
|
-
/* @__PURE__ */ (0,
|
|
2279
|
-
/* @__PURE__ */ (0,
|
|
2280
|
-
/* @__PURE__ */ (0,
|
|
2281
|
-
/* @__PURE__ */ (0,
|
|
2282
|
-
/* @__PURE__ */ (0,
|
|
2283
|
-
/* @__PURE__ */ (0,
|
|
2001
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-16 -right-16 h-32 w-32 rounded-full bg-gradient-to-br from-purple-500/20 via-pink-500/10 to-transparent blur-3xl animate-pulse" }),
|
|
2002
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -bottom-16 -left-16 h-32 w-32 rounded-full bg-gradient-to-tr from-blue-500/10 to-transparent blur-2xl animate-pulse", style: { animationDelay: "1s" } }),
|
|
2003
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative z-10 flex items-start gap-4 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 flex-col gap-3", children: [
|
|
2004
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
2005
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2006
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-lg font-bold text-white", children: "Upgrade Required" }),
|
|
2007
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-2 py-0.5 text-xs font-bold bg-purple-500/20 text-purple-400 rounded-md border border-purple-500/30", children: "Premium" })
|
|
2284
2008
|
] }),
|
|
2285
|
-
/* @__PURE__ */ (0,
|
|
2009
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2286
2010
|
ClayxButton,
|
|
2287
2011
|
{
|
|
2288
2012
|
onClick: closeToast,
|
|
@@ -2299,12 +2023,12 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
|
2299
2023
|
transition: "background-color 150ms ease",
|
|
2300
2024
|
cursor: "pointer"
|
|
2301
2025
|
},
|
|
2302
|
-
children: /* @__PURE__ */ (0,
|
|
2026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Icon, { icon: "iconamoon:close", className: "w-4 h-4 text-gray-400" })
|
|
2303
2027
|
}
|
|
2304
2028
|
)
|
|
2305
2029
|
] }),
|
|
2306
|
-
/* @__PURE__ */ (0,
|
|
2307
|
-
/* @__PURE__ */ (0,
|
|
2030
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-gray-300 leading-relaxed", children: message }),
|
|
2031
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2308
2032
|
ClayxButton,
|
|
2309
2033
|
{
|
|
2310
2034
|
onClick: () => {
|
|
@@ -2322,8 +2046,8 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
|
2322
2046
|
backgroundImage: hover ? "linear-gradient(to right, #9333ea, #db2777)" : "linear-gradient(to right, #a855f7, #ec4899)",
|
|
2323
2047
|
boxShadow: hover ? "0 10px 15px -3px rgba(168,85,247,0.3), 0 4px 6px -2px rgba(168,85,247,0.3)" : "none"
|
|
2324
2048
|
},
|
|
2325
|
-
children: /* @__PURE__ */ (0,
|
|
2326
|
-
/* @__PURE__ */ (0,
|
|
2049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
2050
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Icon, { icon: "solar:rocket-2-bold", className: "w-4 h-4" }),
|
|
2327
2051
|
"Upgrade Now"
|
|
2328
2052
|
] })
|
|
2329
2053
|
}
|
|
@@ -2332,22 +2056,10 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
|
|
|
2332
2056
|
] });
|
|
2333
2057
|
};
|
|
2334
2058
|
function showLimitUpgradeToast(message, onUpgrade) {
|
|
2335
|
-
|
|
2336
|
-
render: (closeToast) => /* @__PURE__ */ (0,
|
|
2059
|
+
GoeyToast.default({
|
|
2060
|
+
render: (closeToast) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LimitToastContainer, { message, onUpgrade, closeToast }),
|
|
2337
2061
|
options: {
|
|
2338
|
-
|
|
2339
|
-
closeOnClick: false,
|
|
2340
|
-
autoClose: false,
|
|
2341
|
-
hideProgressBar: true,
|
|
2342
|
-
draggable: false,
|
|
2343
|
-
pauseOnHover: true,
|
|
2344
|
-
className: "!bg-transparent !shadow-none",
|
|
2345
|
-
style: {
|
|
2346
|
-
background: "transparent",
|
|
2347
|
-
padding: 0,
|
|
2348
|
-
width: "auto",
|
|
2349
|
-
maxWidth: "420px"
|
|
2350
|
-
}
|
|
2062
|
+
autoClose: false
|
|
2351
2063
|
}
|
|
2352
2064
|
});
|
|
2353
2065
|
}
|
|
@@ -2800,7 +2512,7 @@ async function executeSSEWorkflow(request, options = {}) {
|
|
|
2800
2512
|
if (errorData.log_type === "execution_display_error") {
|
|
2801
2513
|
const errorContent = errorData.content;
|
|
2802
2514
|
const displayMessage = errorContent || "Workflow execution failed";
|
|
2803
|
-
|
|
2515
|
+
GoeyToast.error({
|
|
2804
2516
|
title: "Execution Error",
|
|
2805
2517
|
message: displayMessage
|
|
2806
2518
|
});
|
|
@@ -3906,11 +3618,11 @@ function createClient(opts) {
|
|
|
3906
3618
|
}
|
|
3907
3619
|
|
|
3908
3620
|
// src/hooks/use-mobile.ts
|
|
3909
|
-
var
|
|
3621
|
+
var React8 = __toESM(require("react"));
|
|
3910
3622
|
var MOBILE_BREAKPOINT = 768;
|
|
3911
3623
|
function useIsMobile() {
|
|
3912
|
-
const [isMobile, setIsMobile] =
|
|
3913
|
-
|
|
3624
|
+
const [isMobile, setIsMobile] = React8.useState(void 0);
|
|
3625
|
+
React8.useEffect(() => {
|
|
3914
3626
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
3915
3627
|
const onChange = () => {
|
|
3916
3628
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
@@ -3923,10 +3635,10 @@ function useIsMobile() {
|
|
|
3923
3635
|
}
|
|
3924
3636
|
|
|
3925
3637
|
// src/hooks/use-debounce.ts
|
|
3926
|
-
var
|
|
3638
|
+
var import_react13 = require("react");
|
|
3927
3639
|
function useDebounce(value, delay) {
|
|
3928
|
-
const [debouncedValue, setDebouncedValue] = (0,
|
|
3929
|
-
(0,
|
|
3640
|
+
const [debouncedValue, setDebouncedValue] = (0, import_react13.useState)(value);
|
|
3641
|
+
(0, import_react13.useEffect)(() => {
|
|
3930
3642
|
const handler = setTimeout(() => {
|
|
3931
3643
|
setDebouncedValue(value);
|
|
3932
3644
|
}, delay);
|
|
@@ -3938,9 +3650,9 @@ function useDebounce(value, delay) {
|
|
|
3938
3650
|
}
|
|
3939
3651
|
|
|
3940
3652
|
// src/hooks/use-workflow-stream.ts
|
|
3941
|
-
var
|
|
3653
|
+
var import_react14 = require("react");
|
|
3942
3654
|
function useWorkflowStream() {
|
|
3943
|
-
const [state, setState] = (0,
|
|
3655
|
+
const [state, setState] = (0, import_react14.useState)({
|
|
3944
3656
|
loading: false,
|
|
3945
3657
|
progress: 0,
|
|
3946
3658
|
streamContent: "",
|
|
@@ -3948,8 +3660,8 @@ function useWorkflowStream() {
|
|
|
3948
3660
|
result: null,
|
|
3949
3661
|
error: null
|
|
3950
3662
|
});
|
|
3951
|
-
const abortControllerRef = (0,
|
|
3952
|
-
const execute = (0,
|
|
3663
|
+
const abortControllerRef = (0, import_react14.useRef)(null);
|
|
3664
|
+
const execute = (0, import_react14.useCallback)(async (executeWorkflowStream, workflowId, inputs) => {
|
|
3953
3665
|
setState({
|
|
3954
3666
|
loading: true,
|
|
3955
3667
|
progress: 0,
|
|
@@ -4002,7 +3714,7 @@ function useWorkflowStream() {
|
|
|
4002
3714
|
throw error;
|
|
4003
3715
|
}
|
|
4004
3716
|
}, []);
|
|
4005
|
-
const cancel = (0,
|
|
3717
|
+
const cancel = (0, import_react14.useCallback)(() => {
|
|
4006
3718
|
if (abortControllerRef.current) {
|
|
4007
3719
|
abortControllerRef.current.abort();
|
|
4008
3720
|
setState((prev) => ({
|
|
@@ -4012,7 +3724,7 @@ function useWorkflowStream() {
|
|
|
4012
3724
|
}));
|
|
4013
3725
|
}
|
|
4014
3726
|
}, []);
|
|
4015
|
-
const reset = (0,
|
|
3727
|
+
const reset = (0, import_react14.useCallback)(() => {
|
|
4016
3728
|
setState({
|
|
4017
3729
|
loading: false,
|
|
4018
3730
|
progress: 0,
|
|
@@ -4318,13 +4030,13 @@ var elementSelector = {
|
|
|
4318
4030
|
0 && (module.exports = {
|
|
4319
4031
|
AUTH_TOKEN_KEY,
|
|
4320
4032
|
ClayxButton,
|
|
4321
|
-
ClayxToast,
|
|
4322
4033
|
DefaultErrorFallback,
|
|
4323
4034
|
ElementSelector,
|
|
4324
4035
|
ElementSelectorProvider,
|
|
4325
4036
|
ErrorBoundary,
|
|
4326
4037
|
FloatingButton,
|
|
4327
4038
|
GlobalToastContainer,
|
|
4039
|
+
GoeyToast,
|
|
4328
4040
|
HowOneProvider,
|
|
4329
4041
|
Loading,
|
|
4330
4042
|
LoadingSpinner,
|