@apteva/apteva-kit 0.1.93 → 0.1.95
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.js +160 -135
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +160 -135
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1230,15 +1230,15 @@ function Image({ widget }) {
|
|
|
1230
1230
|
|
|
1231
1231
|
function StepIcon({ type, status }) {
|
|
1232
1232
|
if (status === "completed") {
|
|
1233
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-
|
|
1233
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) });
|
|
1234
1234
|
}
|
|
1235
1235
|
if (status === "error") {
|
|
1236
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-
|
|
1236
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M6 18L18 6M6 6l12 12" }) });
|
|
1237
1237
|
}
|
|
1238
1238
|
if (status === "active") {
|
|
1239
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-3 h-3 rounded-full bg-
|
|
1239
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-3.5 h-3.5 rounded-full bg-current animate-pulse" });
|
|
1240
1240
|
}
|
|
1241
|
-
const iconClass = "w-
|
|
1241
|
+
const iconClass = "w-4 h-4";
|
|
1242
1242
|
if (type === "time" || type === "schedule" || type === "clock") {
|
|
1243
1243
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) });
|
|
1244
1244
|
}
|
|
@@ -1296,81 +1296,82 @@ function StepIcon({ type, status }) {
|
|
|
1296
1296
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-current opacity-50" });
|
|
1297
1297
|
}
|
|
1298
1298
|
function HeaderIcon({ icon }) {
|
|
1299
|
-
const baseClass = "w-
|
|
1299
|
+
const baseClass = "w-6 h-6";
|
|
1300
1300
|
if (icon === "research" || icon === "multi-agent" || icon === "agents") {
|
|
1301
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1301
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-purple-600 dark:text-purple-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) });
|
|
1302
1302
|
}
|
|
1303
1303
|
if (icon === "schedule" || icon === "report" || icon === "calendar") {
|
|
1304
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1304
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-amber-600 dark:text-amber-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) });
|
|
1305
1305
|
}
|
|
1306
1306
|
if (icon === "recurring" || icon === "repeat" || icon === "sync") {
|
|
1307
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1307
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-cyan-100 dark:bg-cyan-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-cyan-600 dark:text-cyan-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) });
|
|
1308
1308
|
}
|
|
1309
1309
|
if (icon === "analyze" || icon === "analysis" || icon === "chart") {
|
|
1310
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1310
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-cyan-100 dark:bg-cyan-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-cyan-600 dark:text-cyan-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }) });
|
|
1311
1311
|
}
|
|
1312
1312
|
if (icon === "deploy" || icon === "rocket" || icon === "launch") {
|
|
1313
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1313
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-blue-600 dark:text-blue-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) });
|
|
1314
1314
|
}
|
|
1315
1315
|
if (icon === "automation" || icon === "workflow" || icon === "process") {
|
|
1316
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1316
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-indigo-600 dark:text-indigo-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" }) }) });
|
|
1317
1317
|
}
|
|
1318
1318
|
if (icon === "data" || icon === "pipeline" || icon === "etl") {
|
|
1319
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1319
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-emerald-600 dark:text-emerald-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" }) }) });
|
|
1320
1320
|
}
|
|
1321
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-
|
|
1321
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `${baseClass} text-neutral-600 dark:text-neutral-300`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) }) });
|
|
1322
1322
|
}
|
|
1323
1323
|
function Chevron() {
|
|
1324
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-
|
|
1324
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-neutral-400 dark:text-neutral-500 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) });
|
|
1325
1325
|
}
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1326
|
+
var STEP_COLOR_CLASSES = {
|
|
1327
|
+
blue: "bg-blue-100 dark:bg-blue-900/40 !text-blue-700 dark:!text-blue-300 border-blue-300 dark:border-blue-500",
|
|
1328
|
+
purple: "bg-purple-100 dark:bg-purple-900/40 !text-purple-700 dark:!text-purple-300 border-purple-300 dark:border-purple-500",
|
|
1329
|
+
cyan: "bg-cyan-100 dark:bg-cyan-900/40 !text-cyan-700 dark:!text-cyan-300 border-cyan-300 dark:border-cyan-500",
|
|
1330
|
+
amber: "bg-amber-100 dark:bg-amber-900/40 !text-amber-700 dark:!text-amber-300 border-amber-300 dark:border-amber-500",
|
|
1331
|
+
emerald: "bg-emerald-100 dark:bg-emerald-900/40 !text-emerald-700 dark:!text-emerald-300 border-emerald-300 dark:border-emerald-500",
|
|
1332
|
+
rose: "bg-rose-100 dark:bg-rose-900/40 !text-rose-700 dark:!text-rose-300 border-rose-300 dark:border-rose-500",
|
|
1333
|
+
indigo: "bg-indigo-100 dark:bg-indigo-900/40 !text-indigo-700 dark:!text-indigo-300 border-indigo-300 dark:border-indigo-500",
|
|
1334
|
+
orange: "bg-orange-100 dark:bg-orange-900/40 !text-orange-700 dark:!text-orange-300 border-orange-300 dark:border-orange-500",
|
|
1335
|
+
neutral: "bg-neutral-100 dark:bg-neutral-800 !text-neutral-600 dark:!text-neutral-300 border-neutral-300 dark:border-neutral-600"
|
|
1336
|
+
};
|
|
1337
|
+
function getStepColorClass(step, stepType) {
|
|
1338
|
+
if (step.color && STEP_COLOR_CLASSES[step.color]) {
|
|
1339
|
+
return STEP_COLOR_CLASSES[step.color];
|
|
1339
1340
|
}
|
|
1340
1341
|
if (stepType === "time" || stepType === "schedule" || stepType === "clock") {
|
|
1341
|
-
return
|
|
1342
|
+
return STEP_COLOR_CLASSES.blue;
|
|
1342
1343
|
}
|
|
1343
1344
|
if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _30 => _30.startsWith, 'call', _31 => _31("@")])) {
|
|
1344
|
-
return
|
|
1345
|
+
return STEP_COLOR_CLASSES.purple;
|
|
1345
1346
|
}
|
|
1346
1347
|
if (stepType === "email" || stepType === "slack" || stepType === "message" || stepType === "notification") {
|
|
1347
|
-
return
|
|
1348
|
+
return STEP_COLOR_CLASSES.cyan;
|
|
1348
1349
|
}
|
|
1349
1350
|
if (stepType === "generate" || stepType === "document" || stepType === "create") {
|
|
1350
|
-
return
|
|
1351
|
+
return STEP_COLOR_CLASSES.amber;
|
|
1351
1352
|
}
|
|
1352
1353
|
if (stepType === "deploy" || stepType === "rocket" || stepType === "launch") {
|
|
1353
|
-
return
|
|
1354
|
+
return STEP_COLOR_CLASSES.rose;
|
|
1354
1355
|
}
|
|
1355
1356
|
if (stepType === "build" || stepType === "compile" || stepType === "package") {
|
|
1356
|
-
return
|
|
1357
|
+
return STEP_COLOR_CLASSES.indigo;
|
|
1357
1358
|
}
|
|
1358
1359
|
if (stepType === "test" || stepType === "check" || stepType === "verify") {
|
|
1359
|
-
return
|
|
1360
|
+
return STEP_COLOR_CLASSES.emerald;
|
|
1360
1361
|
}
|
|
1361
1362
|
if (stepType === "data" || stepType === "database" || stepType === "storage") {
|
|
1362
|
-
return
|
|
1363
|
+
return STEP_COLOR_CLASSES.orange;
|
|
1363
1364
|
}
|
|
1364
|
-
return
|
|
1365
|
+
return STEP_COLOR_CLASSES.blue;
|
|
1365
1366
|
}
|
|
1366
1367
|
function Flow({ widget }) {
|
|
1367
1368
|
const { title, subtitle, icon, steps } = widget.props;
|
|
1368
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-
|
|
1369
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-
|
|
1369
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 overflow-hidden", children: [
|
|
1370
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-4 flex items-center gap-4", children: [
|
|
1370
1371
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderIcon, { icon }),
|
|
1371
1372
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
|
|
1372
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "font-semibold text-
|
|
1373
|
-
subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-
|
|
1373
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "font-semibold text-base text-neutral-900 dark:text-white truncate", children: title }),
|
|
1374
|
+
subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-neutral-500 dark:text-neutral-400 truncate mt-0.5", children: subtitle })
|
|
1374
1375
|
] })
|
|
1375
1376
|
] }),
|
|
1376
1377
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 pb-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: steps.map((step, index) => {
|
|
@@ -1409,20 +1410,21 @@ function Flow({ widget }) {
|
|
|
1409
1410
|
}
|
|
1410
1411
|
}
|
|
1411
1412
|
let pillClasses;
|
|
1413
|
+
let extraClasses = "";
|
|
1412
1414
|
if (isActive) {
|
|
1413
|
-
pillClasses = "bg-blue-100 dark:bg-blue-
|
|
1415
|
+
pillClasses = "bg-blue-100 dark:bg-blue-900/40 !text-blue-700 dark:!text-blue-300 border-blue-400 dark:border-blue-400 ring-2 ring-blue-400";
|
|
1414
1416
|
} else if (isCompleted) {
|
|
1415
|
-
pillClasses = "bg-emerald-
|
|
1417
|
+
pillClasses = "bg-emerald-100 dark:bg-emerald-900/40 !text-emerald-700 dark:!text-emerald-300 border-emerald-400 dark:border-emerald-400";
|
|
1416
1418
|
} else if (isError) {
|
|
1417
|
-
pillClasses = "bg-red-
|
|
1419
|
+
pillClasses = "bg-red-100 dark:bg-red-900/40 !text-red-700 dark:!text-red-300 border-red-400 dark:border-red-400";
|
|
1418
1420
|
} else if (isSkipped) {
|
|
1419
|
-
pillClasses = "bg-neutral-100 dark:bg-neutral-
|
|
1421
|
+
pillClasses = "bg-neutral-100 dark:bg-neutral-800 !text-neutral-400 dark:!text-neutral-500 border-neutral-300 dark:border-neutral-600";
|
|
1422
|
+
extraClasses = "line-through";
|
|
1420
1423
|
} else {
|
|
1421
|
-
|
|
1422
|
-
pillClasses = `${colors.bg} ${colors.text} ${colors.border}`;
|
|
1424
|
+
pillClasses = getStepColorClass(step, stepType);
|
|
1423
1425
|
}
|
|
1424
1426
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
|
|
1425
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: `inline-flex items-center gap-
|
|
1427
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: `inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${pillClasses} ${extraClasses}`, children: [
|
|
1426
1428
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, StepIcon, { type: stepType, status: step.status }),
|
|
1427
1429
|
label
|
|
1428
1430
|
] }),
|
|
@@ -2241,6 +2243,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
2241
2243
|
const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
|
|
2242
2244
|
const [pendingFiles, setPendingFiles] = _react.useState.call(void 0, []);
|
|
2243
2245
|
const [fileError, setFileError] = _react.useState.call(void 0, null);
|
|
2246
|
+
const [isMultiLine, setIsMultiLine] = _react.useState.call(void 0, false);
|
|
2244
2247
|
const textareaRef = _react.useRef.call(void 0, null);
|
|
2245
2248
|
const fileInputRef = _react.useRef.call(void 0, null);
|
|
2246
2249
|
const menuButtonRef = _react.useRef.call(void 0, null);
|
|
@@ -2259,6 +2262,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
2259
2262
|
setText("");
|
|
2260
2263
|
setPendingFiles([]);
|
|
2261
2264
|
setFileError(null);
|
|
2265
|
+
setIsMultiLine(false);
|
|
2262
2266
|
if (textareaRef.current) {
|
|
2263
2267
|
textareaRef.current.style.height = "auto";
|
|
2264
2268
|
}
|
|
@@ -2267,7 +2271,16 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
2267
2271
|
const handleChange = (e) => {
|
|
2268
2272
|
setText(e.target.value);
|
|
2269
2273
|
e.target.style.height = "auto";
|
|
2270
|
-
|
|
2274
|
+
const scrollHeight = e.target.scrollHeight;
|
|
2275
|
+
e.target.style.height = `${scrollHeight}px`;
|
|
2276
|
+
const hasNewline = e.target.value.includes("\n");
|
|
2277
|
+
const singleLineHeight = 36;
|
|
2278
|
+
const isOverflowing = scrollHeight > singleLineHeight;
|
|
2279
|
+
if (!isMultiLine && (hasNewline || isOverflowing)) {
|
|
2280
|
+
setIsMultiLine(true);
|
|
2281
|
+
} else if (isMultiLine && !hasNewline && !isOverflowing && e.target.value.length < 20) {
|
|
2282
|
+
setIsMultiLine(false);
|
|
2283
|
+
}
|
|
2271
2284
|
};
|
|
2272
2285
|
const handleFileSelect = (e) => {
|
|
2273
2286
|
if (e.target.files && e.target.files.length > 0) {
|
|
@@ -2344,94 +2357,106 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
2344
2357
|
},
|
|
2345
2358
|
index
|
|
2346
2359
|
)) }),
|
|
2347
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
}
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2360
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
2361
|
+
"div",
|
|
2362
|
+
{
|
|
2363
|
+
className: "apteva-composer",
|
|
2364
|
+
style: {
|
|
2365
|
+
gridTemplateColumns: "auto 1fr auto",
|
|
2366
|
+
gridTemplateAreas: isMultiLine ? '"textarea textarea textarea" "plus . send"' : '"plus textarea send"',
|
|
2367
|
+
alignItems: "end"
|
|
2368
|
+
},
|
|
2369
|
+
children: [
|
|
2370
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
|
|
2371
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2372
|
+
"button",
|
|
2373
|
+
{
|
|
2374
|
+
ref: menuButtonRef,
|
|
2375
|
+
onClick: () => setShowMenu(!showMenu),
|
|
2376
|
+
className: "apteva-composer-menu-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
2377
|
+
title: "More options",
|
|
2378
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
2379
|
+
}
|
|
2380
|
+
),
|
|
2381
|
+
showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
2382
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
|
|
2383
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
2384
|
+
"div",
|
|
2385
|
+
{
|
|
2386
|
+
className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
|
|
2387
|
+
style: {
|
|
2388
|
+
left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.getBoundingClientRect, 'call', _42 => _42(), 'access', _43 => _43.left]), () => ( 0)),
|
|
2389
|
+
bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.getBoundingClientRect, 'call', _46 => _46(), 'access', _47 => _47.top]), () => ( 0))) + 8
|
|
2390
|
+
},
|
|
2391
|
+
children: [
|
|
2392
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
2393
|
+
"button",
|
|
2394
|
+
{
|
|
2395
|
+
onClick: () => {
|
|
2396
|
+
_optionalChain([fileInputRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.click, 'call', _50 => _50()]);
|
|
2397
|
+
setShowMenu(false);
|
|
2398
|
+
},
|
|
2399
|
+
className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
|
|
2400
|
+
children: [
|
|
2401
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
|
|
2402
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
|
|
2403
|
+
]
|
|
2404
|
+
}
|
|
2405
|
+
),
|
|
2406
|
+
onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
2407
|
+
"button",
|
|
2408
|
+
{
|
|
2409
|
+
onClick: () => {
|
|
2410
|
+
onSwitchMode();
|
|
2411
|
+
setShowMenu(false);
|
|
2412
|
+
},
|
|
2413
|
+
className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700",
|
|
2414
|
+
children: [
|
|
2415
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
|
|
2416
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
|
|
2417
|
+
]
|
|
2418
|
+
}
|
|
2419
|
+
)
|
|
2420
|
+
]
|
|
2421
|
+
}
|
|
2422
|
+
)
|
|
2423
|
+
] })
|
|
2424
|
+
] }),
|
|
2425
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2426
|
+
"textarea",
|
|
2363
2427
|
{
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
onClick: () => {
|
|
2374
|
-
_optionalChain([fileInputRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.click, 'call', _50 => _50()]);
|
|
2375
|
-
setShowMenu(false);
|
|
2376
|
-
},
|
|
2377
|
-
className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
|
|
2378
|
-
children: [
|
|
2379
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
|
|
2380
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
|
|
2381
|
-
]
|
|
2382
|
-
}
|
|
2383
|
-
),
|
|
2384
|
-
onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
2385
|
-
"button",
|
|
2386
|
-
{
|
|
2387
|
-
onClick: () => {
|
|
2388
|
-
onSwitchMode();
|
|
2389
|
-
setShowMenu(false);
|
|
2390
|
-
},
|
|
2391
|
-
className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700",
|
|
2392
|
-
children: [
|
|
2393
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
|
|
2394
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
|
|
2395
|
-
]
|
|
2396
|
-
}
|
|
2397
|
-
)
|
|
2398
|
-
]
|
|
2428
|
+
ref: textareaRef,
|
|
2429
|
+
value: text,
|
|
2430
|
+
onChange: handleChange,
|
|
2431
|
+
onKeyDown: handleKeyDown,
|
|
2432
|
+
placeholder,
|
|
2433
|
+
disabled,
|
|
2434
|
+
className: "apteva-composer-textarea resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed overflow-y-auto max-h-[200px]",
|
|
2435
|
+
style: { gridArea: "textarea" },
|
|
2436
|
+
rows: 1
|
|
2399
2437
|
}
|
|
2400
|
-
)
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
|
|
2423
|
-
}
|
|
2424
|
-
) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2425
|
-
"button",
|
|
2426
|
-
{
|
|
2427
|
-
onClick: handleSend,
|
|
2428
|
-
disabled: !text.trim() && pendingFiles.length === 0 || disabled,
|
|
2429
|
-
className: "apteva-composer-send-btn w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
|
|
2430
|
-
title: "Send message",
|
|
2431
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
2432
|
-
}
|
|
2433
|
-
)
|
|
2434
|
-
] }),
|
|
2438
|
+
),
|
|
2439
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2440
|
+
"button",
|
|
2441
|
+
{
|
|
2442
|
+
onClick: onStop,
|
|
2443
|
+
className: "apteva-composer-stop-btn",
|
|
2444
|
+
title: "Stop generation",
|
|
2445
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
|
|
2446
|
+
}
|
|
2447
|
+
) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2448
|
+
"button",
|
|
2449
|
+
{
|
|
2450
|
+
onClick: handleSend,
|
|
2451
|
+
disabled: !text.trim() && pendingFiles.length === 0 || disabled,
|
|
2452
|
+
className: "apteva-composer-send-btn w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
|
|
2453
|
+
title: "Send message",
|
|
2454
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
2455
|
+
}
|
|
2456
|
+
) })
|
|
2457
|
+
]
|
|
2458
|
+
}
|
|
2459
|
+
),
|
|
2435
2460
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2436
2461
|
"input",
|
|
2437
2462
|
{
|
|
@@ -2721,7 +2746,7 @@ function CommandComposer({
|
|
|
2721
2746
|
"button",
|
|
2722
2747
|
{
|
|
2723
2748
|
onClick: onStop,
|
|
2724
|
-
className: "apteva-composer-stop-btn
|
|
2749
|
+
className: "apteva-composer-stop-btn",
|
|
2725
2750
|
title: "Stop generation",
|
|
2726
2751
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
|
|
2727
2752
|
}
|