@apteva/apteva-kit 0.1.92 → 0.1.94

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.
Files changed (5) hide show
  1. package/dist/index.js +164 -132
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +164 -132
  4. package/dist/index.mjs.map +1 -1
  5. 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-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,72 +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
- if (step.color) {
1328
- const colorMap = {
1329
- blue: { bg: "bg-blue-50 dark:bg-blue-500/10", text: "text-blue-700 dark:text-blue-300", border: "border-blue-200 dark:border-blue-500/30" },
1330
- purple: { bg: "bg-purple-50 dark:bg-purple-500/10", text: "text-purple-700 dark:text-purple-300", border: "border-purple-200 dark:border-purple-500/30" },
1331
- cyan: { bg: "bg-cyan-50 dark:bg-cyan-500/10", text: "text-cyan-700 dark:text-cyan-300", border: "border-cyan-200 dark:border-cyan-500/30" },
1332
- amber: { bg: "bg-amber-50 dark:bg-amber-500/10", text: "text-amber-700 dark:text-amber-300", border: "border-amber-200 dark:border-amber-500/30" },
1333
- emerald: { bg: "bg-emerald-50 dark:bg-emerald-500/10", text: "text-emerald-700 dark:text-emerald-300", border: "border-emerald-200 dark:border-emerald-500/30" },
1334
- rose: { bg: "bg-rose-50 dark:bg-rose-500/10", text: "text-rose-700 dark:text-rose-300", border: "border-rose-200 dark:border-rose-500/30" },
1335
- indigo: { bg: "bg-indigo-50 dark:bg-indigo-500/10", text: "text-indigo-700 dark:text-indigo-300", border: "border-indigo-200 dark:border-indigo-500/30" },
1336
- orange: { bg: "bg-orange-50 dark:bg-orange-500/10", text: "text-orange-700 dark:text-orange-300", border: "border-orange-200 dark:border-orange-500/30" }
1337
- };
1338
- return colorMap[step.color] || colorMap.blue;
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 { bg: "bg-blue-50 dark:bg-blue-500/10", text: "text-blue-700 dark:text-blue-300", border: "border-blue-200 dark:border-blue-500/30" };
1342
+ return STEP_COLOR_CLASSES.blue;
1342
1343
  }
1343
1344
  if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _30 => _30.startsWith, 'call', _31 => _31("@")])) {
1344
- return { bg: "bg-purple-50 dark:bg-purple-500/10", text: "text-purple-700 dark:text-purple-300", border: "border-purple-200 dark:border-purple-500/30" };
1345
+ return STEP_COLOR_CLASSES.purple;
1345
1346
  }
1346
1347
  if (stepType === "email" || stepType === "slack" || stepType === "message" || stepType === "notification") {
1347
- return { bg: "bg-cyan-50 dark:bg-cyan-500/10", text: "text-cyan-700 dark:text-cyan-300", border: "border-cyan-200 dark:border-cyan-500/30" };
1348
+ return STEP_COLOR_CLASSES.cyan;
1348
1349
  }
1349
1350
  if (stepType === "generate" || stepType === "document" || stepType === "create") {
1350
- return { bg: "bg-amber-50 dark:bg-amber-500/10", text: "text-amber-700 dark:text-amber-300", border: "border-amber-200 dark:border-amber-500/30" };
1351
+ return STEP_COLOR_CLASSES.amber;
1351
1352
  }
1352
1353
  if (stepType === "deploy" || stepType === "rocket" || stepType === "launch") {
1353
- return { bg: "bg-rose-50 dark:bg-rose-500/10", text: "text-rose-700 dark:text-rose-300", border: "border-rose-200 dark:border-rose-500/30" };
1354
+ return STEP_COLOR_CLASSES.rose;
1355
+ }
1356
+ if (stepType === "build" || stepType === "compile" || stepType === "package") {
1357
+ return STEP_COLOR_CLASSES.indigo;
1354
1358
  }
1355
- return { bg: "bg-neutral-50 dark:bg-neutral-800", text: "text-neutral-700 dark:text-neutral-300", border: "border-neutral-200 dark:border-neutral-700" };
1359
+ if (stepType === "test" || stepType === "check" || stepType === "verify") {
1360
+ return STEP_COLOR_CLASSES.emerald;
1361
+ }
1362
+ if (stepType === "data" || stepType === "database" || stepType === "storage") {
1363
+ return STEP_COLOR_CLASSES.orange;
1364
+ }
1365
+ return STEP_COLOR_CLASSES.blue;
1356
1366
  }
1357
1367
  function Flow({ widget }) {
1358
1368
  const { title, subtitle, icon, steps } = widget.props;
1359
- 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: [
1360
- /* @__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: [
1361
1371
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderIcon, { icon }),
1362
1372
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
1363
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "font-semibold text-sm text-neutral-900 dark:text-white truncate", children: title }),
1364
- 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 })
1365
1375
  ] })
1366
1376
  ] }),
1367
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) => {
@@ -1400,20 +1410,21 @@ function Flow({ widget }) {
1400
1410
  }
1401
1411
  }
1402
1412
  let pillClasses;
1413
+ let extraClasses = "";
1403
1414
  if (isActive) {
1404
- 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";
1405
1416
  } else if (isCompleted) {
1406
- 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";
1407
1418
  } else if (isError) {
1408
- 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";
1409
1420
  } else if (isSkipped) {
1410
- 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";
1411
1423
  } else {
1412
- const colors = getStepColors(step, stepType);
1413
- pillClasses = `${colors.bg} ${colors.text} ${colors.border}`;
1424
+ pillClasses = getStepColorClass(step, stepType);
1414
1425
  }
1415
1426
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
1416
- /* @__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: [
1417
1428
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StepIcon, { type: stepType, status: step.status }),
1418
1429
  label
1419
1430
  ] }),
@@ -2232,6 +2243,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
2232
2243
  const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
2233
2244
  const [pendingFiles, setPendingFiles] = _react.useState.call(void 0, []);
2234
2245
  const [fileError, setFileError] = _react.useState.call(void 0, null);
2246
+ const [isMultiLine, setIsMultiLine] = _react.useState.call(void 0, false);
2235
2247
  const textareaRef = _react.useRef.call(void 0, null);
2236
2248
  const fileInputRef = _react.useRef.call(void 0, null);
2237
2249
  const menuButtonRef = _react.useRef.call(void 0, null);
@@ -2250,6 +2262,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
2250
2262
  setText("");
2251
2263
  setPendingFiles([]);
2252
2264
  setFileError(null);
2265
+ setIsMultiLine(false);
2253
2266
  if (textareaRef.current) {
2254
2267
  textareaRef.current.style.height = "auto";
2255
2268
  }
@@ -2259,6 +2272,13 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
2259
2272
  setText(e.target.value);
2260
2273
  e.target.style.height = "auto";
2261
2274
  e.target.style.height = `${e.target.scrollHeight}px`;
2275
+ const hasNewline = e.target.value.includes("\n");
2276
+ const textLength = e.target.value.length;
2277
+ if (!isMultiLine && (hasNewline || textLength > 50)) {
2278
+ setIsMultiLine(true);
2279
+ } else if (isMultiLine && !hasNewline && textLength < 30) {
2280
+ setIsMultiLine(false);
2281
+ }
2262
2282
  };
2263
2283
  const handleFileSelect = (e) => {
2264
2284
  if (e.target.files && e.target.files.length > 0) {
@@ -2335,94 +2355,106 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
2335
2355
  },
2336
2356
  index
2337
2357
  )) }),
2338
- /* @__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: [
2339
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0", children: [
2340
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2341
- "button",
2342
- {
2343
- ref: menuButtonRef,
2344
- onClick: () => setShowMenu(!showMenu),
2345
- 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",
2346
- title: "More options",
2347
- 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" }) })
2348
- }
2349
- ),
2350
- showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
2351
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
2352
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2353
- "div",
2358
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2359
+ "div",
2360
+ {
2361
+ className: "apteva-composer relative border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 transition-all duration-300 px-3 py-2 grid gap-x-3 gap-y-2",
2362
+ style: {
2363
+ gridTemplateColumns: "auto 1fr auto",
2364
+ gridTemplateAreas: isMultiLine ? '"textarea textarea textarea" "plus . send"' : '"plus textarea send"',
2365
+ alignItems: "end"
2366
+ },
2367
+ children: [
2368
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
2369
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2370
+ "button",
2371
+ {
2372
+ ref: menuButtonRef,
2373
+ onClick: () => setShowMenu(!showMenu),
2374
+ 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",
2375
+ title: "More options",
2376
+ 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" }) })
2377
+ }
2378
+ ),
2379
+ showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
2380
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
2381
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2382
+ "div",
2383
+ {
2384
+ className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
2385
+ style: {
2386
+ left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.getBoundingClientRect, 'call', _42 => _42(), 'access', _43 => _43.left]), () => ( 0)),
2387
+ bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.getBoundingClientRect, 'call', _46 => _46(), 'access', _47 => _47.top]), () => ( 0))) + 8
2388
+ },
2389
+ children: [
2390
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2391
+ "button",
2392
+ {
2393
+ onClick: () => {
2394
+ _optionalChain([fileInputRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.click, 'call', _50 => _50()]);
2395
+ setShowMenu(false);
2396
+ },
2397
+ 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",
2398
+ children: [
2399
+ /* @__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)" }) }),
2400
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
2401
+ ]
2402
+ }
2403
+ ),
2404
+ onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2405
+ "button",
2406
+ {
2407
+ onClick: () => {
2408
+ onSwitchMode();
2409
+ setShowMenu(false);
2410
+ },
2411
+ 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",
2412
+ children: [
2413
+ /* @__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" }) }),
2414
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
2415
+ ]
2416
+ }
2417
+ )
2418
+ ]
2419
+ }
2420
+ )
2421
+ ] })
2422
+ ] }),
2423
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2424
+ "textarea",
2354
2425
  {
2355
- className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
2356
- style: {
2357
- left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.getBoundingClientRect, 'call', _42 => _42(), 'access', _43 => _43.left]), () => ( 0)),
2358
- top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.getBoundingClientRect, 'call', _46 => _46(), 'access', _47 => _47.bottom]), () => ( 0))) + 8
2359
- },
2360
- children: [
2361
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2362
- "button",
2363
- {
2364
- onClick: () => {
2365
- _optionalChain([fileInputRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.click, 'call', _50 => _50()]);
2366
- setShowMenu(false);
2367
- },
2368
- 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",
2369
- children: [
2370
- /* @__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)" }) }),
2371
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
2372
- ]
2373
- }
2374
- ),
2375
- onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2376
- "button",
2377
- {
2378
- onClick: () => {
2379
- onSwitchMode();
2380
- setShowMenu(false);
2381
- },
2382
- 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",
2383
- children: [
2384
- /* @__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" }) }),
2385
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
2386
- ]
2387
- }
2388
- )
2389
- ]
2426
+ ref: textareaRef,
2427
+ value: text,
2428
+ onChange: handleChange,
2429
+ onKeyDown: handleKeyDown,
2430
+ placeholder,
2431
+ disabled,
2432
+ 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]",
2433
+ style: { gridArea: "textarea" },
2434
+ rows: 1
2390
2435
  }
2391
- )
2392
- ] })
2393
- ] }),
2394
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2395
- "textarea",
2396
- {
2397
- ref: textareaRef,
2398
- value: text,
2399
- onChange: handleChange,
2400
- onKeyDown: handleKeyDown,
2401
- placeholder,
2402
- disabled,
2403
- 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",
2404
- rows: 1
2405
- }
2406
- ),
2407
- isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2408
- "button",
2409
- {
2410
- onClick: onStop,
2411
- 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",
2412
- title: "Stop generation",
2413
- 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" }) })
2414
- }
2415
- ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2416
- "button",
2417
- {
2418
- onClick: handleSend,
2419
- disabled: !text.trim() && pendingFiles.length === 0 || disabled,
2420
- 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",
2421
- title: "Send message",
2422
- 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" }) })
2423
- }
2424
- )
2425
- ] }),
2436
+ ),
2437
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2438
+ "button",
2439
+ {
2440
+ onClick: onStop,
2441
+ className: "apteva-composer-stop-btn !w-8 !h-8 !p-0 !m-0 !rounded-lg !flex !items-center !justify-center !font-bold !transition-all !flex-shrink-0 !border !border-solid !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 !outline-none !shadow-none",
2442
+ title: "Stop generation",
2443
+ 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", className: "!text-red-600 dark:!text-red-400", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
2444
+ }
2445
+ ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2446
+ "button",
2447
+ {
2448
+ onClick: handleSend,
2449
+ disabled: !text.trim() && pendingFiles.length === 0 || disabled,
2450
+ 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",
2451
+ title: "Send message",
2452
+ 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" }) })
2453
+ }
2454
+ ) })
2455
+ ]
2456
+ }
2457
+ ),
2426
2458
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2427
2459
  "input",
2428
2460
  {
@@ -2712,9 +2744,9 @@ function CommandComposer({
2712
2744
  "button",
2713
2745
  {
2714
2746
  onClick: onStop,
2715
- 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",
2747
+ className: "apteva-composer-stop-btn !w-8 !h-8 !p-0 !m-0 !rounded-lg !flex !items-center !justify-center !transition-all !border !border-solid !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 !outline-none !shadow-none",
2716
2748
  title: "Stop generation",
2717
- 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" }) })
2749
+ 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", className: "!text-red-600 dark:!text-red-400", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
2718
2750
  }
2719
2751
  ),
2720
2752
  (state === "success" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,