@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 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-3.5 h-3.5 text-emerald-500", 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" }) });
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-3.5 h-3.5 text-red-500", 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" }) });
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-blue-500 animate-pulse" });
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-3.5 h-3.5";
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-5 h-5";
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-8 h-8 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" }) }) });
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-3 h-3 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" }) });
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
- function getStepColors(step, stepType) {
1327
- const colorMap = {
1328
- blue: { bg: "bg-blue-100 dark:bg-blue-500/20", text: "text-blue-800 dark:text-blue-200", border: "border-blue-300 dark:border-blue-400/40" },
1329
- purple: { bg: "bg-purple-100 dark:bg-purple-500/20", text: "text-purple-800 dark:text-purple-200", border: "border-purple-300 dark:border-purple-400/40" },
1330
- cyan: { bg: "bg-cyan-100 dark:bg-cyan-500/20", text: "text-cyan-800 dark:text-cyan-200", border: "border-cyan-300 dark:border-cyan-400/40" },
1331
- amber: { bg: "bg-amber-100 dark:bg-amber-500/20", text: "text-amber-800 dark:text-amber-200", border: "border-amber-300 dark:border-amber-400/40" },
1332
- emerald: { bg: "bg-emerald-100 dark:bg-emerald-500/20", text: "text-emerald-800 dark:text-emerald-200", border: "border-emerald-300 dark:border-emerald-400/40" },
1333
- rose: { bg: "bg-rose-100 dark:bg-rose-500/20", text: "text-rose-800 dark:text-rose-200", border: "border-rose-300 dark:border-rose-400/40" },
1334
- indigo: { bg: "bg-indigo-100 dark:bg-indigo-500/20", text: "text-indigo-800 dark:text-indigo-200", border: "border-indigo-300 dark:border-indigo-400/40" },
1335
- orange: { bg: "bg-orange-100 dark:bg-orange-500/20", text: "text-orange-800 dark:text-orange-200", border: "border-orange-300 dark:border-orange-400/40" }
1336
- };
1337
- if (step.color && colorMap[step.color]) {
1338
- return colorMap[step.color];
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 colorMap.blue;
1342
+ return STEP_COLOR_CLASSES.blue;
1342
1343
  }
1343
1344
  if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _30 => _30.startsWith, 'call', _31 => _31("@")])) {
1344
- return colorMap.purple;
1345
+ return STEP_COLOR_CLASSES.purple;
1345
1346
  }
1346
1347
  if (stepType === "email" || stepType === "slack" || stepType === "message" || stepType === "notification") {
1347
- return colorMap.cyan;
1348
+ return STEP_COLOR_CLASSES.cyan;
1348
1349
  }
1349
1350
  if (stepType === "generate" || stepType === "document" || stepType === "create") {
1350
- return colorMap.amber;
1351
+ return STEP_COLOR_CLASSES.amber;
1351
1352
  }
1352
1353
  if (stepType === "deploy" || stepType === "rocket" || stepType === "launch") {
1353
- return colorMap.rose;
1354
+ return STEP_COLOR_CLASSES.rose;
1354
1355
  }
1355
1356
  if (stepType === "build" || stepType === "compile" || stepType === "package") {
1356
- return colorMap.indigo;
1357
+ return STEP_COLOR_CLASSES.indigo;
1357
1358
  }
1358
1359
  if (stepType === "test" || stepType === "check" || stepType === "verify") {
1359
- return colorMap.emerald;
1360
+ return STEP_COLOR_CLASSES.emerald;
1360
1361
  }
1361
1362
  if (stepType === "data" || stepType === "database" || stepType === "storage") {
1362
- return colorMap.orange;
1363
+ return STEP_COLOR_CLASSES.orange;
1363
1364
  }
1364
- return colorMap.blue;
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-800 overflow-hidden shadow-sm", children: [
1369
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 flex items-center gap-3", children: [
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-sm text-neutral-900 dark:text-white truncate", children: title }),
1373
- subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-neutral-500 dark:text-neutral-400 truncate", children: subtitle })
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-500/20 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-500/50 ring-2 ring-blue-300 dark:ring-blue-500/30";
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-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-500/30";
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-50 dark:bg-red-500/15 text-red-700 dark:text-red-300 border-red-200 dark:border-red-500/30";
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-700/50 text-neutral-400 dark:text-neutral-500 border-neutral-200 dark:border-neutral-600 line-through";
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
- const colors = getStepColors(step, stepType);
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-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${pillClasses}`, children: [
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
- e.target.style.height = `${e.target.scrollHeight}px`;
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, "div", { className: "apteva-composer relative border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
2348
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0", children: [
2349
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2350
- "button",
2351
- {
2352
- ref: menuButtonRef,
2353
- onClick: () => setShowMenu(!showMenu),
2354
- 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",
2355
- title: "More options",
2356
- 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" }) })
2357
- }
2358
- ),
2359
- showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
2360
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
2361
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2362
- "div",
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
- className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
2365
- style: {
2366
- left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.getBoundingClientRect, 'call', _42 => _42(), 'access', _43 => _43.left]), () => ( 0)),
2367
- top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.getBoundingClientRect, 'call', _46 => _46(), 'access', _47 => _47.bottom]), () => ( 0))) + 8
2368
- },
2369
- children: [
2370
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2371
- "button",
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
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2404
- "textarea",
2405
- {
2406
- ref: textareaRef,
2407
- value: text,
2408
- onChange: handleChange,
2409
- onKeyDown: handleKeyDown,
2410
- placeholder,
2411
- disabled,
2412
- className: "apteva-composer-textarea flex-1 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-hidden",
2413
- rows: 1
2414
- }
2415
- ),
2416
- isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2417
- "button",
2418
- {
2419
- onClick: onStop,
2420
- className: "apteva-composer-stop-btn !w-8 !h-8 !rounded-lg !flex !items-center !justify-center !font-bold !transition-all !flex-shrink-0 !border !border-red-400 dark:!border-red-500 !bg-red-50 dark:!bg-red-900/30 !text-red-600 dark:!text-red-400 hover:!bg-red-100 dark:hover:!bg-red-900/50",
2421
- title: "Stop generation",
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 !w-8 !h-8 !rounded-lg !flex !items-center !justify-center !transition-all !border !border-red-400 dark:!border-red-500 !bg-red-50 dark:!bg-red-900/30 !text-red-600 dark:!text-red-400 hover:!bg-red-100 dark:hover:!bg-red-900/50",
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
  }