@apteva/apteva-kit 0.1.59 → 0.1.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +195 -79
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +589 -473
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
|
|
|
4
4
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
5
|
|
|
6
6
|
// src/components/Chat/Chat.tsx
|
|
7
|
-
import { useState as
|
|
7
|
+
import { useState as useState4, useEffect as useEffect4, useRef as useRef5, useMemo as useMemo2, forwardRef, useImperativeHandle } from "react";
|
|
8
8
|
|
|
9
9
|
// src/components/Chat/MessageList.tsx
|
|
10
10
|
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
@@ -913,36 +913,152 @@ function Table({ widget, onAction }) {
|
|
|
913
913
|
] }) }) });
|
|
914
914
|
}
|
|
915
915
|
|
|
916
|
-
// src/components/Widgets/
|
|
916
|
+
// src/components/Widgets/widget-library/Form.tsx
|
|
917
|
+
import { useState } from "react";
|
|
917
918
|
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
919
|
+
function Form({ widget, onAction }) {
|
|
920
|
+
const { title, fields } = widget.props;
|
|
921
|
+
const [formData, setFormData] = useState(() => {
|
|
922
|
+
const initial = {};
|
|
923
|
+
fields.forEach((field) => {
|
|
924
|
+
initial[field.name] = field.defaultValue ?? (field.type === "checkbox" ? false : "");
|
|
925
|
+
});
|
|
926
|
+
return initial;
|
|
927
|
+
});
|
|
928
|
+
const handleChange = (name, value) => {
|
|
929
|
+
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
930
|
+
};
|
|
931
|
+
const handleSubmit = (e) => {
|
|
932
|
+
e.preventDefault();
|
|
933
|
+
if (widget.actions?.[0] && onAction) {
|
|
934
|
+
onAction({
|
|
935
|
+
type: widget.actions[0].type,
|
|
936
|
+
payload: { ...widget.actions[0].payload, formData },
|
|
937
|
+
widgetId: widget.id,
|
|
938
|
+
timestamp: /* @__PURE__ */ new Date()
|
|
939
|
+
});
|
|
940
|
+
}
|
|
941
|
+
};
|
|
942
|
+
const renderField = (field) => {
|
|
943
|
+
const baseInputClass = "w-full px-3 py-2 rounded-lg border transition-colors border-neutral-200 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
|
|
944
|
+
switch (field.type) {
|
|
945
|
+
case "text":
|
|
946
|
+
case "password":
|
|
947
|
+
case "number":
|
|
948
|
+
case "date":
|
|
949
|
+
return /* @__PURE__ */ jsx6(
|
|
950
|
+
"input",
|
|
951
|
+
{
|
|
952
|
+
type: field.type,
|
|
953
|
+
name: field.name,
|
|
954
|
+
value: formData[field.name] || "",
|
|
955
|
+
onChange: (e) => handleChange(field.name, field.type === "number" ? Number(e.target.value) : e.target.value),
|
|
956
|
+
placeholder: field.placeholder,
|
|
957
|
+
required: field.required,
|
|
958
|
+
className: baseInputClass
|
|
959
|
+
}
|
|
960
|
+
);
|
|
961
|
+
case "textarea":
|
|
962
|
+
return /* @__PURE__ */ jsx6(
|
|
963
|
+
"textarea",
|
|
964
|
+
{
|
|
965
|
+
name: field.name,
|
|
966
|
+
value: formData[field.name] || "",
|
|
967
|
+
onChange: (e) => handleChange(field.name, e.target.value),
|
|
968
|
+
placeholder: field.placeholder,
|
|
969
|
+
required: field.required,
|
|
970
|
+
rows: 3,
|
|
971
|
+
className: baseInputClass
|
|
972
|
+
}
|
|
973
|
+
);
|
|
974
|
+
case "select":
|
|
975
|
+
return /* @__PURE__ */ jsxs4(
|
|
976
|
+
"select",
|
|
977
|
+
{
|
|
978
|
+
name: field.name,
|
|
979
|
+
value: formData[field.name] || "",
|
|
980
|
+
onChange: (e) => handleChange(field.name, e.target.value),
|
|
981
|
+
required: field.required,
|
|
982
|
+
className: baseInputClass,
|
|
983
|
+
children: [
|
|
984
|
+
/* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
|
|
985
|
+
field.options?.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt.value, children: opt.label }, opt.value))
|
|
986
|
+
]
|
|
987
|
+
}
|
|
988
|
+
);
|
|
989
|
+
case "checkbox":
|
|
990
|
+
return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 cursor-pointer", children: [
|
|
991
|
+
/* @__PURE__ */ jsx6(
|
|
992
|
+
"input",
|
|
993
|
+
{
|
|
994
|
+
type: "checkbox",
|
|
995
|
+
name: field.name,
|
|
996
|
+
checked: formData[field.name] || false,
|
|
997
|
+
onChange: (e) => handleChange(field.name, e.target.checked),
|
|
998
|
+
className: "w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 text-blue-500 focus:ring-blue-500"
|
|
999
|
+
}
|
|
1000
|
+
),
|
|
1001
|
+
/* @__PURE__ */ jsx6("span", { className: "!text-neutral-700 dark:!text-neutral-300", children: field.label })
|
|
1002
|
+
] });
|
|
1003
|
+
default:
|
|
1004
|
+
return null;
|
|
1005
|
+
}
|
|
1006
|
+
};
|
|
1007
|
+
const submitAction = widget.actions?.find((a) => a.type === "submit") || widget.actions?.[0];
|
|
1008
|
+
return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
|
|
1009
|
+
/* @__PURE__ */ jsxs4("div", { className: "p-4", children: [
|
|
1010
|
+
title && /* @__PURE__ */ jsx6("h3", { className: "!text-lg font-semibold !text-neutral-900 dark:!text-white mb-4", children: title }),
|
|
1011
|
+
/* @__PURE__ */ jsx6("div", { className: "space-y-3", children: fields.map((field) => /* @__PURE__ */ jsxs4("div", { className: field.type === "checkbox" ? "" : "space-y-1", children: [
|
|
1012
|
+
field.type !== "checkbox" && /* @__PURE__ */ jsxs4("label", { className: "block !text-sm font-medium !text-neutral-600 dark:!text-neutral-400", children: [
|
|
1013
|
+
field.label,
|
|
1014
|
+
field.required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 ml-1", children: "*" })
|
|
1015
|
+
] }),
|
|
1016
|
+
renderField(field)
|
|
1017
|
+
] }, field.name)) })
|
|
1018
|
+
] }),
|
|
1019
|
+
submitAction && /* @__PURE__ */ jsx6("div", { className: "border-t border-neutral-200 dark:border-neutral-700 p-4", children: /* @__PURE__ */ jsx6(
|
|
1020
|
+
"button",
|
|
1021
|
+
{
|
|
1022
|
+
type: "submit",
|
|
1023
|
+
className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
|
|
1024
|
+
children: submitAction.label || "Submit"
|
|
1025
|
+
}
|
|
1026
|
+
) })
|
|
1027
|
+
] });
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
// src/components/Widgets/WidgetRenderer.tsx
|
|
1031
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
918
1032
|
function WidgetRenderer({ widget, onAction }) {
|
|
919
1033
|
const renderWidget = () => {
|
|
920
1034
|
switch (widget.type) {
|
|
921
1035
|
case "card":
|
|
922
|
-
return /* @__PURE__ */
|
|
1036
|
+
return /* @__PURE__ */ jsx7(Card, { widget, onAction });
|
|
923
1037
|
case "list":
|
|
924
|
-
return /* @__PURE__ */
|
|
1038
|
+
return /* @__PURE__ */ jsx7(List, { widget, onAction });
|
|
925
1039
|
case "button":
|
|
926
|
-
return /* @__PURE__ */
|
|
1040
|
+
return /* @__PURE__ */ jsx7(Button, { widget, onAction });
|
|
927
1041
|
case "button_group":
|
|
928
|
-
return /* @__PURE__ */
|
|
1042
|
+
return /* @__PURE__ */ jsx7(ButtonGroup, { widget, onAction });
|
|
929
1043
|
case "table":
|
|
930
|
-
return /* @__PURE__ */
|
|
1044
|
+
return /* @__PURE__ */ jsx7(Table, { widget, onAction });
|
|
1045
|
+
case "form":
|
|
1046
|
+
return /* @__PURE__ */ jsx7(Form, { widget, onAction });
|
|
931
1047
|
default:
|
|
932
|
-
return /* @__PURE__ */
|
|
933
|
-
/* @__PURE__ */
|
|
1048
|
+
return /* @__PURE__ */ jsxs5("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
|
|
1049
|
+
/* @__PURE__ */ jsxs5("p", { className: "text-sm text-yellow-800", children: [
|
|
934
1050
|
"Unknown widget type: ",
|
|
935
1051
|
widget.type
|
|
936
1052
|
] }),
|
|
937
|
-
/* @__PURE__ */
|
|
1053
|
+
/* @__PURE__ */ jsx7("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
|
|
938
1054
|
] });
|
|
939
1055
|
}
|
|
940
1056
|
};
|
|
941
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ jsx7("div", { className: "apteva-widget", children: renderWidget() });
|
|
942
1058
|
}
|
|
943
1059
|
|
|
944
1060
|
// src/components/Widgets/Widgets.tsx
|
|
945
|
-
import { jsx as
|
|
1061
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
946
1062
|
function Widgets({
|
|
947
1063
|
widgets,
|
|
948
1064
|
onAction,
|
|
@@ -967,85 +1083,85 @@ function Widgets({
|
|
|
967
1083
|
normal: "gap-4",
|
|
968
1084
|
loose: "gap-6"
|
|
969
1085
|
};
|
|
970
|
-
return /* @__PURE__ */
|
|
1086
|
+
return /* @__PURE__ */ jsx8("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx8(WidgetRenderer, { widget, onAction }, widget.id)) });
|
|
971
1087
|
}
|
|
972
1088
|
|
|
973
1089
|
// src/components/Widgets/WidgetSkeleton.tsx
|
|
974
|
-
import { jsx as
|
|
1090
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
975
1091
|
function WidgetSkeleton({ type, className }) {
|
|
976
1092
|
switch (type) {
|
|
977
1093
|
case "card":
|
|
978
|
-
return /* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
981
|
-
/* @__PURE__ */
|
|
1094
|
+
return /* @__PURE__ */ jsx9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: /* @__PURE__ */ jsxs6("div", { className: "p-4 space-y-3", children: [
|
|
1095
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
|
|
1096
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
|
|
1097
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
|
|
982
1098
|
] }) });
|
|
983
1099
|
case "list":
|
|
984
|
-
return /* @__PURE__ */
|
|
985
|
-
/* @__PURE__ */
|
|
986
|
-
/* @__PURE__ */
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
1100
|
+
return /* @__PURE__ */ jsx9("div", { className: cn("apteva-widget-skeleton animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800", children: [
|
|
1101
|
+
/* @__PURE__ */ jsx9("div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
|
|
1102
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex-1 space-y-2", children: [
|
|
1103
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
|
|
1104
|
+
/* @__PURE__ */ jsx9("div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
|
|
989
1105
|
] })
|
|
990
1106
|
] }, i)) });
|
|
991
1107
|
case "button_group":
|
|
992
|
-
return /* @__PURE__ */
|
|
993
|
-
/* @__PURE__ */
|
|
994
|
-
/* @__PURE__ */
|
|
995
|
-
/* @__PURE__ */
|
|
1108
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("apteva-widget-skeleton animate-pulse flex gap-2", className), children: [
|
|
1109
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
|
|
1110
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
|
|
1111
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
|
|
996
1112
|
] });
|
|
997
1113
|
case "form":
|
|
998
|
-
return /* @__PURE__ */
|
|
999
|
-
/* @__PURE__ */
|
|
1000
|
-
/* @__PURE__ */
|
|
1001
|
-
/* @__PURE__ */
|
|
1002
|
-
/* @__PURE__ */
|
|
1114
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4", className), children: [
|
|
1115
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
|
|
1116
|
+
/* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
|
|
1117
|
+
/* @__PURE__ */ jsx9("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
|
|
1118
|
+
/* @__PURE__ */ jsx9("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
|
|
1003
1119
|
] }),
|
|
1004
|
-
/* @__PURE__ */
|
|
1120
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
|
|
1005
1121
|
] });
|
|
1006
1122
|
case "chart":
|
|
1007
|
-
return /* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1009
|
-
/* @__PURE__ */
|
|
1010
|
-
/* @__PURE__ */
|
|
1011
|
-
/* @__PURE__ */
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1123
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
|
|
1124
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
|
|
1125
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-end gap-2 h-32", children: [
|
|
1126
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
|
|
1127
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
|
|
1128
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
|
|
1129
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
|
|
1130
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
|
|
1015
1131
|
] })
|
|
1016
1132
|
] });
|
|
1017
1133
|
case "image":
|
|
1018
|
-
return /* @__PURE__ */
|
|
1134
|
+
return /* @__PURE__ */ jsx9("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx9("div", { className: "aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg" }) });
|
|
1019
1135
|
case "gallery":
|
|
1020
|
-
return /* @__PURE__ */
|
|
1136
|
+
return /* @__PURE__ */ jsx9("div", { className: cn("apteva-widget-skeleton animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx9("div", { className: "aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg" }, i)) });
|
|
1021
1137
|
case "map":
|
|
1022
|
-
return /* @__PURE__ */
|
|
1023
|
-
/* @__PURE__ */
|
|
1024
|
-
/* @__PURE__ */
|
|
1138
|
+
return /* @__PURE__ */ jsx9("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx9("div", { className: "h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs6("svg", { className: "w-8 h-8 text-neutral-400 dark:text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
|
|
1139
|
+
/* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
|
|
1140
|
+
/* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1025
1141
|
] }) }) });
|
|
1026
1142
|
case "table":
|
|
1027
|
-
return /* @__PURE__ */
|
|
1028
|
-
/* @__PURE__ */
|
|
1029
|
-
/* @__PURE__ */
|
|
1030
|
-
/* @__PURE__ */
|
|
1031
|
-
/* @__PURE__ */
|
|
1143
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: [
|
|
1144
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
|
|
1145
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16" }) }),
|
|
1146
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20" }) }),
|
|
1147
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14" }) })
|
|
1032
1148
|
] }),
|
|
1033
|
-
[1, 2, 3].map((i) => /* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1035
|
-
/* @__PURE__ */
|
|
1036
|
-
/* @__PURE__ */
|
|
1149
|
+
[1, 2, 3].map((i) => /* @__PURE__ */ jsxs6("div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
|
|
1150
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24" }) }),
|
|
1151
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16" }) }),
|
|
1152
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20" }) })
|
|
1037
1153
|
] }, i))
|
|
1038
1154
|
] });
|
|
1039
1155
|
default:
|
|
1040
|
-
return /* @__PURE__ */
|
|
1041
|
-
/* @__PURE__ */
|
|
1042
|
-
/* @__PURE__ */
|
|
1156
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
|
|
1157
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
|
|
1158
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
|
|
1043
1159
|
] });
|
|
1044
1160
|
}
|
|
1045
1161
|
}
|
|
1046
1162
|
|
|
1047
1163
|
// src/components/Chat/MarkdownContent.tsx
|
|
1048
|
-
import { jsx as
|
|
1164
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1049
1165
|
function isImageUrl(url) {
|
|
1050
1166
|
const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
|
|
1051
1167
|
return imageExtensions.test(url);
|
|
@@ -1064,7 +1180,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1064
1180
|
const alt = match[1] || "";
|
|
1065
1181
|
const src = match[2];
|
|
1066
1182
|
result.push(
|
|
1067
|
-
/* @__PURE__ */
|
|
1183
|
+
/* @__PURE__ */ jsx10(
|
|
1068
1184
|
"img",
|
|
1069
1185
|
{
|
|
1070
1186
|
src,
|
|
@@ -1079,7 +1195,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1079
1195
|
const href = match[4];
|
|
1080
1196
|
if (isImageUrl(href)) {
|
|
1081
1197
|
result.push(
|
|
1082
|
-
/* @__PURE__ */
|
|
1198
|
+
/* @__PURE__ */ jsx10(
|
|
1083
1199
|
"img",
|
|
1084
1200
|
{
|
|
1085
1201
|
src: href,
|
|
@@ -1091,7 +1207,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1091
1207
|
);
|
|
1092
1208
|
} else {
|
|
1093
1209
|
result.push(
|
|
1094
|
-
/* @__PURE__ */
|
|
1210
|
+
/* @__PURE__ */ jsx10(
|
|
1095
1211
|
"a",
|
|
1096
1212
|
{
|
|
1097
1213
|
href,
|
|
@@ -1105,10 +1221,10 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1105
1221
|
);
|
|
1106
1222
|
}
|
|
1107
1223
|
} else if (match[5] !== void 0) {
|
|
1108
|
-
result.push(/* @__PURE__ */
|
|
1224
|
+
result.push(/* @__PURE__ */ jsx10("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
|
|
1109
1225
|
} else if (match[7] !== void 0) {
|
|
1110
1226
|
result.push(
|
|
1111
|
-
/* @__PURE__ */
|
|
1227
|
+
/* @__PURE__ */ jsx10("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
|
|
1112
1228
|
);
|
|
1113
1229
|
}
|
|
1114
1230
|
lastIndex = match.index + match[0].length;
|
|
@@ -1128,7 +1244,7 @@ function parseMarkdown(content) {
|
|
|
1128
1244
|
const h2Match = line.match(/^##\s+(.*)$/);
|
|
1129
1245
|
if (h2Match) {
|
|
1130
1246
|
result.push(
|
|
1131
|
-
/* @__PURE__ */
|
|
1247
|
+
/* @__PURE__ */ jsx10("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
|
|
1132
1248
|
);
|
|
1133
1249
|
i++;
|
|
1134
1250
|
continue;
|
|
@@ -1136,7 +1252,7 @@ function parseMarkdown(content) {
|
|
|
1136
1252
|
const h3Match = line.match(/^###\s+(.*)$/);
|
|
1137
1253
|
if (h3Match) {
|
|
1138
1254
|
result.push(
|
|
1139
|
-
/* @__PURE__ */
|
|
1255
|
+
/* @__PURE__ */ jsx10("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
|
|
1140
1256
|
);
|
|
1141
1257
|
i++;
|
|
1142
1258
|
continue;
|
|
@@ -1149,7 +1265,7 @@ function parseMarkdown(content) {
|
|
|
1149
1265
|
const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
|
|
1150
1266
|
if (itemMatch && itemMatch[1].length === indent) {
|
|
1151
1267
|
listItems.push(
|
|
1152
|
-
/* @__PURE__ */
|
|
1268
|
+
/* @__PURE__ */ jsx10("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
|
|
1153
1269
|
);
|
|
1154
1270
|
i++;
|
|
1155
1271
|
} else {
|
|
@@ -1157,7 +1273,7 @@ function parseMarkdown(content) {
|
|
|
1157
1273
|
}
|
|
1158
1274
|
}
|
|
1159
1275
|
result.push(
|
|
1160
|
-
/* @__PURE__ */
|
|
1276
|
+
/* @__PURE__ */ jsx10("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
|
|
1161
1277
|
);
|
|
1162
1278
|
continue;
|
|
1163
1279
|
}
|
|
@@ -1169,7 +1285,7 @@ function parseMarkdown(content) {
|
|
|
1169
1285
|
const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
|
|
1170
1286
|
if (itemMatch && itemMatch[1].length === indent) {
|
|
1171
1287
|
listItems.push(
|
|
1172
|
-
/* @__PURE__ */
|
|
1288
|
+
/* @__PURE__ */ jsx10("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
|
|
1173
1289
|
);
|
|
1174
1290
|
i++;
|
|
1175
1291
|
} else {
|
|
@@ -1177,7 +1293,7 @@ function parseMarkdown(content) {
|
|
|
1177
1293
|
}
|
|
1178
1294
|
}
|
|
1179
1295
|
result.push(
|
|
1180
|
-
/* @__PURE__ */
|
|
1296
|
+
/* @__PURE__ */ jsx10("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
|
|
1181
1297
|
);
|
|
1182
1298
|
continue;
|
|
1183
1299
|
}
|
|
@@ -1200,19 +1316,19 @@ function parseMarkdown(content) {
|
|
|
1200
1316
|
}
|
|
1201
1317
|
}
|
|
1202
1318
|
result.push(
|
|
1203
|
-
/* @__PURE__ */
|
|
1204
|
-
/* @__PURE__ */
|
|
1205
|
-
/* @__PURE__ */
|
|
1319
|
+
/* @__PURE__ */ jsx10("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs7("table", { className: "apteva-md-table", children: [
|
|
1320
|
+
/* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsx10("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx10("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
|
|
1321
|
+
/* @__PURE__ */ jsx10("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx10("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx10("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
|
|
1206
1322
|
] }) }, `table-wrapper${key++}`)
|
|
1207
1323
|
);
|
|
1208
1324
|
continue;
|
|
1209
1325
|
}
|
|
1210
1326
|
}
|
|
1211
1327
|
if (line === "") {
|
|
1212
|
-
result.push(/* @__PURE__ */
|
|
1328
|
+
result.push(/* @__PURE__ */ jsx10("br", {}, `br${key++}`));
|
|
1213
1329
|
} else {
|
|
1214
1330
|
result.push(
|
|
1215
|
-
/* @__PURE__ */
|
|
1331
|
+
/* @__PURE__ */ jsxs7("span", { children: [
|
|
1216
1332
|
parseInlineMarkdown(line, `${key}`),
|
|
1217
1333
|
i < lines.length - 1 ? "\n" : ""
|
|
1218
1334
|
] }, `p${key++}`)
|
|
@@ -1223,30 +1339,30 @@ function parseMarkdown(content) {
|
|
|
1223
1339
|
return result;
|
|
1224
1340
|
}
|
|
1225
1341
|
function MarkdownContent({ content, className = "" }) {
|
|
1226
|
-
return /* @__PURE__ */
|
|
1342
|
+
return /* @__PURE__ */ jsx10("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
|
|
1227
1343
|
}
|
|
1228
1344
|
|
|
1229
1345
|
// src/components/Chat/ToolCall.tsx
|
|
1230
|
-
import { jsx as
|
|
1346
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1231
1347
|
function ToolCall({ name, status }) {
|
|
1232
1348
|
if (status === "running") {
|
|
1233
|
-
return /* @__PURE__ */
|
|
1234
|
-
/* @__PURE__ */
|
|
1235
|
-
/* @__PURE__ */
|
|
1236
|
-
/* @__PURE__ */
|
|
1349
|
+
return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
|
|
1350
|
+
/* @__PURE__ */ jsxs8("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
|
|
1351
|
+
/* @__PURE__ */ jsx11("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
1352
|
+
/* @__PURE__ */ jsx11("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
|
|
1237
1353
|
] }),
|
|
1238
|
-
/* @__PURE__ */
|
|
1354
|
+
/* @__PURE__ */ jsx11("span", { className: "apteva-tool-label", children: name })
|
|
1239
1355
|
] });
|
|
1240
1356
|
}
|
|
1241
1357
|
if (status === "completed") {
|
|
1242
|
-
return /* @__PURE__ */
|
|
1243
|
-
/* @__PURE__ */
|
|
1244
|
-
/* @__PURE__ */
|
|
1358
|
+
return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-completed", children: [
|
|
1359
|
+
/* @__PURE__ */ jsx11("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
|
|
1360
|
+
/* @__PURE__ */ jsx11("span", { className: "apteva-tool-label", children: name })
|
|
1245
1361
|
] });
|
|
1246
1362
|
}
|
|
1247
|
-
return /* @__PURE__ */
|
|
1248
|
-
/* @__PURE__ */
|
|
1249
|
-
/* @__PURE__ */
|
|
1363
|
+
return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-error", children: [
|
|
1364
|
+
/* @__PURE__ */ jsx11("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
|
|
1365
|
+
/* @__PURE__ */ jsxs8("span", { className: "apteva-tool-label", children: [
|
|
1250
1366
|
name,
|
|
1251
1367
|
" failed"
|
|
1252
1368
|
] })
|
|
@@ -1254,7 +1370,7 @@ function ToolCall({ name, status }) {
|
|
|
1254
1370
|
}
|
|
1255
1371
|
|
|
1256
1372
|
// src/components/Chat/Message.tsx
|
|
1257
|
-
import { jsx as
|
|
1373
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1258
1374
|
function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
1259
1375
|
const isUser = message.role === "user";
|
|
1260
1376
|
const contentSegments = message.metadata?.content_segments;
|
|
@@ -1290,14 +1406,14 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1290
1406
|
}, [parsedWidgets, onWidgetRender]);
|
|
1291
1407
|
const renderTextContent = (text) => {
|
|
1292
1408
|
if (!enableWidgets || isUser) {
|
|
1293
|
-
return /* @__PURE__ */
|
|
1409
|
+
return /* @__PURE__ */ jsx12(MarkdownContent, { content: text });
|
|
1294
1410
|
}
|
|
1295
1411
|
const parsed = parseWidgetsFromText(text);
|
|
1296
1412
|
const cleanedText = parsed.segments.filter((seg) => seg.type === "text" && seg.content).map((seg) => seg.content).join("");
|
|
1297
1413
|
if (!cleanedText.trim()) {
|
|
1298
1414
|
return null;
|
|
1299
1415
|
}
|
|
1300
|
-
return /* @__PURE__ */
|
|
1416
|
+
return /* @__PURE__ */ jsx12(MarkdownContent, { content: cleanedText });
|
|
1301
1417
|
};
|
|
1302
1418
|
const renderContentWithWidgets = () => {
|
|
1303
1419
|
if (!enableWidgets || isUser || !message.content) {
|
|
@@ -1312,41 +1428,41 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1312
1428
|
} else if (segment.type === "widget" && segment.widget) {
|
|
1313
1429
|
if (textBuffer.trim()) {
|
|
1314
1430
|
elements.push(
|
|
1315
|
-
/* @__PURE__ */
|
|
1431
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
|
|
1316
1432
|
);
|
|
1317
1433
|
textBuffer = "";
|
|
1318
1434
|
}
|
|
1319
1435
|
elements.push(
|
|
1320
|
-
/* @__PURE__ */
|
|
1436
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`)
|
|
1321
1437
|
);
|
|
1322
1438
|
} else if (segment.type === "widget_pending" && segment.pendingType) {
|
|
1323
1439
|
if (textBuffer.trim()) {
|
|
1324
1440
|
elements.push(
|
|
1325
|
-
/* @__PURE__ */
|
|
1441
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
|
|
1326
1442
|
);
|
|
1327
1443
|
textBuffer = "";
|
|
1328
1444
|
}
|
|
1329
1445
|
elements.push(
|
|
1330
|
-
/* @__PURE__ */
|
|
1446
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`)
|
|
1331
1447
|
);
|
|
1332
1448
|
}
|
|
1333
1449
|
});
|
|
1334
1450
|
if (textBuffer.trim()) {
|
|
1335
1451
|
elements.push(
|
|
1336
|
-
/* @__PURE__ */
|
|
1452
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: textBuffer }) }) }, "text-final")
|
|
1337
1453
|
);
|
|
1338
1454
|
}
|
|
1339
1455
|
return elements.length > 0 ? elements : null;
|
|
1340
1456
|
};
|
|
1341
1457
|
const renderContent = () => {
|
|
1342
1458
|
if (isUser) {
|
|
1343
|
-
return /* @__PURE__ */
|
|
1459
|
+
return /* @__PURE__ */ jsx12("div", { className: "apteva-message-text", children: message.content });
|
|
1344
1460
|
}
|
|
1345
1461
|
if (isStreaming && !hasContent) {
|
|
1346
|
-
return /* @__PURE__ */
|
|
1347
|
-
/* @__PURE__ */
|
|
1348
|
-
/* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1462
|
+
return /* @__PURE__ */ jsxs9("div", { className: "apteva-typing-indicator", children: [
|
|
1463
|
+
/* @__PURE__ */ jsx12("span", {}),
|
|
1464
|
+
/* @__PURE__ */ jsx12("span", {}),
|
|
1465
|
+
/* @__PURE__ */ jsx12("span", {})
|
|
1350
1466
|
] });
|
|
1351
1467
|
}
|
|
1352
1468
|
if (contentSegments && contentSegments.length > 0) {
|
|
@@ -1356,7 +1472,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1356
1472
|
};
|
|
1357
1473
|
const renderTextSegmentWithWidgets = (text, keyPrefix) => {
|
|
1358
1474
|
if (!enableWidgets) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1475
|
+
return /* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: text }) }) }, keyPrefix);
|
|
1360
1476
|
}
|
|
1361
1477
|
const parsed = parseWidgetsFromText(text);
|
|
1362
1478
|
const elements = [];
|
|
@@ -1367,28 +1483,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1367
1483
|
} else if (seg.type === "widget" && seg.widget) {
|
|
1368
1484
|
if (textBuffer.trim()) {
|
|
1369
1485
|
elements.push(
|
|
1370
|
-
/* @__PURE__ */
|
|
1486
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
|
|
1371
1487
|
);
|
|
1372
1488
|
textBuffer = "";
|
|
1373
1489
|
}
|
|
1374
1490
|
elements.push(
|
|
1375
|
-
/* @__PURE__ */
|
|
1491
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetRenderer, { widget: seg.widget, onAction }) }, `${keyPrefix}-widget-${idx}`)
|
|
1376
1492
|
);
|
|
1377
1493
|
} else if (seg.type === "widget_pending" && seg.pendingType) {
|
|
1378
1494
|
if (textBuffer.trim()) {
|
|
1379
1495
|
elements.push(
|
|
1380
|
-
/* @__PURE__ */
|
|
1496
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
|
|
1381
1497
|
);
|
|
1382
1498
|
textBuffer = "";
|
|
1383
1499
|
}
|
|
1384
1500
|
elements.push(
|
|
1385
|
-
/* @__PURE__ */
|
|
1501
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetSkeleton, { type: seg.pendingType }) }, `${keyPrefix}-pending-${idx}`)
|
|
1386
1502
|
);
|
|
1387
1503
|
}
|
|
1388
1504
|
});
|
|
1389
1505
|
if (textBuffer.trim()) {
|
|
1390
1506
|
elements.push(
|
|
1391
|
-
/* @__PURE__ */
|
|
1507
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx12("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx12(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-final`)
|
|
1392
1508
|
);
|
|
1393
1509
|
}
|
|
1394
1510
|
return elements;
|
|
@@ -1408,7 +1524,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1408
1524
|
}
|
|
1409
1525
|
} else if (segment.type === "tool") {
|
|
1410
1526
|
elements.push(
|
|
1411
|
-
/* @__PURE__ */
|
|
1527
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx12(
|
|
1412
1528
|
ToolCall,
|
|
1413
1529
|
{
|
|
1414
1530
|
name: segment.name,
|
|
@@ -1421,21 +1537,21 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1421
1537
|
return elements;
|
|
1422
1538
|
};
|
|
1423
1539
|
if (!isUser && (contentSegments && contentSegments.length > 0)) {
|
|
1424
|
-
return /* @__PURE__ */
|
|
1540
|
+
return /* @__PURE__ */ jsxs9("div", { className: "apteva-message-segmented", children: [
|
|
1425
1541
|
renderSegmentedContent(),
|
|
1426
|
-
message.widgets && message.widgets.length > 0 && /* @__PURE__ */
|
|
1427
|
-
/* @__PURE__ */
|
|
1542
|
+
message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
|
|
1543
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
1428
1544
|
] });
|
|
1429
1545
|
}
|
|
1430
1546
|
const widgetContent = renderContentWithWidgets();
|
|
1431
1547
|
if (!isUser && enableWidgets && widgetContent) {
|
|
1432
|
-
return /* @__PURE__ */
|
|
1548
|
+
return /* @__PURE__ */ jsxs9("div", { className: "apteva-message-segmented", children: [
|
|
1433
1549
|
widgetContent,
|
|
1434
|
-
message.widgets && message.widgets.length > 0 && /* @__PURE__ */
|
|
1435
|
-
/* @__PURE__ */
|
|
1550
|
+
message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
|
|
1551
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
1436
1552
|
] });
|
|
1437
1553
|
}
|
|
1438
|
-
return /* @__PURE__ */
|
|
1554
|
+
return /* @__PURE__ */ jsxs9(
|
|
1439
1555
|
"div",
|
|
1440
1556
|
{
|
|
1441
1557
|
className: cn(
|
|
@@ -1443,17 +1559,17 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1443
1559
|
isUser ? "apteva-message-user" : "apteva-message-assistant"
|
|
1444
1560
|
),
|
|
1445
1561
|
children: [
|
|
1446
|
-
/* @__PURE__ */
|
|
1447
|
-
message.widgets && message.widgets.length > 0 && /* @__PURE__ */
|
|
1448
|
-
/* @__PURE__ */
|
|
1562
|
+
/* @__PURE__ */ jsx12("div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
|
|
1563
|
+
message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
|
|
1564
|
+
/* @__PURE__ */ jsx12("div", { className: cn("apteva-message-timestamp", isUser ? "apteva-message-timestamp-user" : "apteva-message-timestamp-assistant"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
1449
1565
|
]
|
|
1450
1566
|
}
|
|
1451
1567
|
);
|
|
1452
1568
|
}
|
|
1453
1569
|
|
|
1454
1570
|
// src/components/Chat/WelcomeScreen.tsx
|
|
1455
|
-
import { jsx as
|
|
1456
|
-
var DefaultIcon = () => /* @__PURE__ */
|
|
1571
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1572
|
+
var DefaultIcon = () => /* @__PURE__ */ jsx13("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13(
|
|
1457
1573
|
"path",
|
|
1458
1574
|
{
|
|
1459
1575
|
strokeLinecap: "round",
|
|
@@ -1462,7 +1578,7 @@ var DefaultIcon = () => /* @__PURE__ */ jsx12("svg", { className: "w-12 h-12 sm:
|
|
|
1462
1578
|
d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
1463
1579
|
}
|
|
1464
1580
|
) });
|
|
1465
|
-
var ArrowIcon = () => /* @__PURE__ */
|
|
1581
|
+
var ArrowIcon = () => /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
|
|
1466
1582
|
function WelcomeScreen({
|
|
1467
1583
|
title,
|
|
1468
1584
|
subtitle,
|
|
@@ -1477,18 +1593,18 @@ function WelcomeScreen({
|
|
|
1477
1593
|
const hasPrompts = normalizedPrompts.length > 0;
|
|
1478
1594
|
const hasHeader = title || subtitle || icon;
|
|
1479
1595
|
if (!hasHeader && !hasPrompts) {
|
|
1480
|
-
return /* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1596
|
+
return /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ jsxs10("div", { className: "text-center space-y-2", children: [
|
|
1597
|
+
/* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(DefaultIcon, {}) }),
|
|
1598
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
|
|
1483
1599
|
] }) });
|
|
1484
1600
|
}
|
|
1485
1601
|
if (variant === "minimal") {
|
|
1486
|
-
return /* @__PURE__ */
|
|
1487
|
-
hasHeader && /* @__PURE__ */
|
|
1488
|
-
title && /* @__PURE__ */
|
|
1489
|
-
subtitle && /* @__PURE__ */
|
|
1602
|
+
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col h-full px-4 py-4", children: [
|
|
1603
|
+
hasHeader && /* @__PURE__ */ jsxs10("div", { className: "mb-4", children: [
|
|
1604
|
+
title && /* @__PURE__ */ jsx13("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
|
|
1605
|
+
subtitle && /* @__PURE__ */ jsx13("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
|
|
1490
1606
|
] }),
|
|
1491
|
-
hasPrompts && /* @__PURE__ */
|
|
1607
|
+
hasPrompts && /* @__PURE__ */ jsx13("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx13(
|
|
1492
1608
|
"button",
|
|
1493
1609
|
{
|
|
1494
1610
|
onClick: () => onPromptClick(prompt.text),
|
|
@@ -1501,11 +1617,11 @@ function WelcomeScreen({
|
|
|
1501
1617
|
"transition-all duration-200",
|
|
1502
1618
|
"group"
|
|
1503
1619
|
),
|
|
1504
|
-
children: /* @__PURE__ */
|
|
1505
|
-
/* @__PURE__ */
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
prompt.description && /* @__PURE__ */
|
|
1620
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
|
|
1621
|
+
/* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx13(ArrowIcon, {}) }),
|
|
1622
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
|
|
1623
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
|
|
1624
|
+
prompt.description && /* @__PURE__ */ jsx13("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
|
|
1509
1625
|
] })
|
|
1510
1626
|
] })
|
|
1511
1627
|
},
|
|
@@ -1513,14 +1629,14 @@ function WelcomeScreen({
|
|
|
1513
1629
|
)) })
|
|
1514
1630
|
] });
|
|
1515
1631
|
}
|
|
1516
|
-
return /* @__PURE__ */
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
/* @__PURE__ */
|
|
1519
|
-
title && /* @__PURE__ */
|
|
1520
|
-
subtitle && /* @__PURE__ */
|
|
1632
|
+
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
|
|
1633
|
+
/* @__PURE__ */ jsxs10("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
|
|
1634
|
+
/* @__PURE__ */ jsx13("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx13(DefaultIcon, {}) }),
|
|
1635
|
+
title && /* @__PURE__ */ jsx13("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
|
|
1636
|
+
subtitle && /* @__PURE__ */ jsx13("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
|
|
1521
1637
|
] }),
|
|
1522
|
-
hasPrompts && /* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */
|
|
1638
|
+
hasPrompts && /* @__PURE__ */ jsxs10("div", { className: "w-full max-w-2xl", children: [
|
|
1639
|
+
/* @__PURE__ */ jsx13("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx13(
|
|
1524
1640
|
"button",
|
|
1525
1641
|
{
|
|
1526
1642
|
onClick: () => onPromptClick(prompt.text),
|
|
@@ -1535,20 +1651,20 @@ function WelcomeScreen({
|
|
|
1535
1651
|
"shadow-sm hover:shadow",
|
|
1536
1652
|
"group"
|
|
1537
1653
|
),
|
|
1538
|
-
children: /* @__PURE__ */
|
|
1539
|
-
/* @__PURE__ */
|
|
1540
|
-
/* @__PURE__ */
|
|
1541
|
-
/* @__PURE__ */
|
|
1542
|
-
prompt.description && /* @__PURE__ */
|
|
1654
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
|
|
1655
|
+
/* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx13(ArrowIcon, {}) }),
|
|
1656
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
|
|
1657
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
|
|
1658
|
+
prompt.description && /* @__PURE__ */ jsx13("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
|
|
1543
1659
|
] }),
|
|
1544
|
-
/* @__PURE__ */
|
|
1660
|
+
/* @__PURE__ */ jsx13(
|
|
1545
1661
|
"svg",
|
|
1546
1662
|
{
|
|
1547
1663
|
className: "w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
|
|
1548
1664
|
fill: "none",
|
|
1549
1665
|
stroke: "currentColor",
|
|
1550
1666
|
viewBox: "0 0 24 24",
|
|
1551
|
-
children: /* @__PURE__ */
|
|
1667
|
+
children: /* @__PURE__ */ jsx13(
|
|
1552
1668
|
"path",
|
|
1553
1669
|
{
|
|
1554
1670
|
strokeLinecap: "round",
|
|
@@ -1563,7 +1679,7 @@ function WelcomeScreen({
|
|
|
1563
1679
|
},
|
|
1564
1680
|
index
|
|
1565
1681
|
)) }),
|
|
1566
|
-
/* @__PURE__ */
|
|
1682
|
+
/* @__PURE__ */ jsx13("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx13(
|
|
1567
1683
|
"button",
|
|
1568
1684
|
{
|
|
1569
1685
|
onClick: () => onPromptClick(prompt.text),
|
|
@@ -1578,11 +1694,11 @@ function WelcomeScreen({
|
|
|
1578
1694
|
"transition-all duration-200",
|
|
1579
1695
|
"group"
|
|
1580
1696
|
),
|
|
1581
|
-
children: /* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
prompt.description && /* @__PURE__ */
|
|
1697
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3", children: [
|
|
1698
|
+
/* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx13(ArrowIcon, {}) }),
|
|
1699
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
|
|
1700
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
|
|
1701
|
+
prompt.description && /* @__PURE__ */ jsx13("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
|
|
1586
1702
|
] })
|
|
1587
1703
|
] })
|
|
1588
1704
|
},
|
|
@@ -1593,7 +1709,7 @@ function WelcomeScreen({
|
|
|
1593
1709
|
}
|
|
1594
1710
|
|
|
1595
1711
|
// src/components/Chat/MessageList.tsx
|
|
1596
|
-
import { jsx as
|
|
1712
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
1597
1713
|
function MessageList({
|
|
1598
1714
|
messages,
|
|
1599
1715
|
onAction,
|
|
@@ -1624,7 +1740,7 @@ function MessageList({
|
|
|
1624
1740
|
}
|
|
1625
1741
|
}
|
|
1626
1742
|
}, [messages]);
|
|
1627
|
-
return /* @__PURE__ */
|
|
1743
|
+
return /* @__PURE__ */ jsx14("div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", onScroll: handleScroll, children: messages.length === 0 ? /* @__PURE__ */ jsx14(
|
|
1628
1744
|
WelcomeScreen,
|
|
1629
1745
|
{
|
|
1630
1746
|
title: welcomeTitle,
|
|
@@ -1635,17 +1751,17 @@ function MessageList({
|
|
|
1635
1751
|
onPromptClick: onPromptClick || (() => {
|
|
1636
1752
|
})
|
|
1637
1753
|
}
|
|
1638
|
-
) : messages.map((message) => /* @__PURE__ */
|
|
1754
|
+
) : messages.map((message) => /* @__PURE__ */ jsx14("div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ jsx14(Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
|
|
1639
1755
|
}
|
|
1640
1756
|
|
|
1641
1757
|
// src/components/Chat/Composer.tsx
|
|
1642
|
-
import { useState, useRef as useRef3 } from "react";
|
|
1643
|
-
import { Fragment, jsx as
|
|
1758
|
+
import { useState as useState2, useRef as useRef3 } from "react";
|
|
1759
|
+
import { Fragment, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1644
1760
|
function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
|
|
1645
|
-
const [text, setText] =
|
|
1646
|
-
const [showMenu, setShowMenu] =
|
|
1647
|
-
const [pendingFiles, setPendingFiles] =
|
|
1648
|
-
const [fileError, setFileError] =
|
|
1761
|
+
const [text, setText] = useState2("");
|
|
1762
|
+
const [showMenu, setShowMenu] = useState2(false);
|
|
1763
|
+
const [pendingFiles, setPendingFiles] = useState2([]);
|
|
1764
|
+
const [fileError, setFileError] = useState2(null);
|
|
1649
1765
|
const textareaRef = useRef3(null);
|
|
1650
1766
|
const fileInputRef = useRef3(null);
|
|
1651
1767
|
const menuButtonRef = useRef3(null);
|
|
@@ -1714,56 +1830,56 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1714
1830
|
};
|
|
1715
1831
|
const getFileIcon = (mimeType) => {
|
|
1716
1832
|
if (mimeType.startsWith("image/")) {
|
|
1717
|
-
return /* @__PURE__ */
|
|
1833
|
+
return /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
|
|
1718
1834
|
}
|
|
1719
1835
|
if (mimeType === "application/pdf") {
|
|
1720
|
-
return /* @__PURE__ */
|
|
1836
|
+
return /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
|
|
1721
1837
|
}
|
|
1722
|
-
return /* @__PURE__ */
|
|
1838
|
+
return /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
|
|
1723
1839
|
};
|
|
1724
|
-
return /* @__PURE__ */
|
|
1725
|
-
fileError && /* @__PURE__ */
|
|
1726
|
-
/* @__PURE__ */
|
|
1727
|
-
/* @__PURE__ */
|
|
1840
|
+
return /* @__PURE__ */ jsxs11("div", { className: "px-4 py-3 relative", children: [
|
|
1841
|
+
fileError && /* @__PURE__ */ jsx15("div", { className: "absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
|
|
1842
|
+
/* @__PURE__ */ jsx15("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
|
|
1843
|
+
/* @__PURE__ */ jsx15("span", { children: fileError })
|
|
1728
1844
|
] }) }),
|
|
1729
|
-
pendingFiles.length > 0 && /* @__PURE__ */
|
|
1845
|
+
pendingFiles.length > 0 && /* @__PURE__ */ jsx15("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs11(
|
|
1730
1846
|
"div",
|
|
1731
1847
|
{
|
|
1732
1848
|
className: "relative group flex items-center gap-2 px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg",
|
|
1733
1849
|
children: [
|
|
1734
|
-
pf.preview ? /* @__PURE__ */
|
|
1735
|
-
/* @__PURE__ */
|
|
1736
|
-
/* @__PURE__ */
|
|
1737
|
-
/* @__PURE__ */
|
|
1850
|
+
pf.preview ? /* @__PURE__ */ jsx15("img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ jsx15("div", { className: "w-8 h-8 flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 rounded !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
|
|
1851
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex flex-col min-w-0", children: [
|
|
1852
|
+
/* @__PURE__ */ jsx15("span", { className: "text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]", children: pf.file.name }),
|
|
1853
|
+
/* @__PURE__ */ jsx15("span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: formatFileSize(pf.file.size) })
|
|
1738
1854
|
] }),
|
|
1739
|
-
/* @__PURE__ */
|
|
1855
|
+
/* @__PURE__ */ jsx15(
|
|
1740
1856
|
"button",
|
|
1741
1857
|
{
|
|
1742
1858
|
onClick: () => removeFile(index),
|
|
1743
1859
|
className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-neutral-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
|
|
1744
1860
|
title: "Remove file",
|
|
1745
|
-
children: /* @__PURE__ */
|
|
1861
|
+
children: /* @__PURE__ */ jsx15("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
1746
1862
|
}
|
|
1747
1863
|
)
|
|
1748
1864
|
]
|
|
1749
1865
|
},
|
|
1750
1866
|
index
|
|
1751
1867
|
)) }),
|
|
1752
|
-
/* @__PURE__ */
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
/* @__PURE__ */
|
|
1868
|
+
/* @__PURE__ */ jsxs11("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: [
|
|
1869
|
+
/* @__PURE__ */ jsxs11("div", { className: "relative flex-shrink-0", children: [
|
|
1870
|
+
/* @__PURE__ */ jsx15(
|
|
1755
1871
|
"button",
|
|
1756
1872
|
{
|
|
1757
1873
|
ref: menuButtonRef,
|
|
1758
1874
|
onClick: () => setShowMenu(!showMenu),
|
|
1759
1875
|
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",
|
|
1760
1876
|
title: "More options",
|
|
1761
|
-
children: /* @__PURE__ */
|
|
1877
|
+
children: /* @__PURE__ */ jsx15("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
1762
1878
|
}
|
|
1763
1879
|
),
|
|
1764
|
-
showMenu && /* @__PURE__ */
|
|
1765
|
-
/* @__PURE__ */
|
|
1766
|
-
/* @__PURE__ */
|
|
1880
|
+
showMenu && /* @__PURE__ */ jsxs11(Fragment, { children: [
|
|
1881
|
+
/* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
|
|
1882
|
+
/* @__PURE__ */ jsxs11(
|
|
1767
1883
|
"div",
|
|
1768
1884
|
{
|
|
1769
1885
|
className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
|
|
@@ -1772,7 +1888,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1772
1888
|
top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
|
|
1773
1889
|
},
|
|
1774
1890
|
children: [
|
|
1775
|
-
/* @__PURE__ */
|
|
1891
|
+
/* @__PURE__ */ jsxs11(
|
|
1776
1892
|
"button",
|
|
1777
1893
|
{
|
|
1778
1894
|
onClick: () => {
|
|
@@ -1781,12 +1897,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1781
1897
|
},
|
|
1782
1898
|
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",
|
|
1783
1899
|
children: [
|
|
1784
|
-
/* @__PURE__ */
|
|
1785
|
-
/* @__PURE__ */
|
|
1900
|
+
/* @__PURE__ */ jsx15("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("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)" }) }),
|
|
1901
|
+
/* @__PURE__ */ jsx15("span", { className: "!text-sm font-medium", children: "Add photos & files" })
|
|
1786
1902
|
]
|
|
1787
1903
|
}
|
|
1788
1904
|
),
|
|
1789
|
-
onSwitchMode && /* @__PURE__ */
|
|
1905
|
+
onSwitchMode && /* @__PURE__ */ jsxs11(
|
|
1790
1906
|
"button",
|
|
1791
1907
|
{
|
|
1792
1908
|
onClick: () => {
|
|
@@ -1795,8 +1911,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1795
1911
|
},
|
|
1796
1912
|
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",
|
|
1797
1913
|
children: [
|
|
1798
|
-
/* @__PURE__ */
|
|
1799
|
-
/* @__PURE__ */
|
|
1914
|
+
/* @__PURE__ */ jsx15("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
|
|
1915
|
+
/* @__PURE__ */ jsx15("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
|
|
1800
1916
|
]
|
|
1801
1917
|
}
|
|
1802
1918
|
)
|
|
@@ -1805,7 +1921,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1805
1921
|
)
|
|
1806
1922
|
] })
|
|
1807
1923
|
] }),
|
|
1808
|
-
/* @__PURE__ */
|
|
1924
|
+
/* @__PURE__ */ jsx15(
|
|
1809
1925
|
"textarea",
|
|
1810
1926
|
{
|
|
1811
1927
|
ref: textareaRef,
|
|
@@ -1819,26 +1935,26 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1819
1935
|
style: { maxHeight: "120px" }
|
|
1820
1936
|
}
|
|
1821
1937
|
),
|
|
1822
|
-
isLoading && onStop ? /* @__PURE__ */
|
|
1938
|
+
isLoading && onStop ? /* @__PURE__ */ jsx15(
|
|
1823
1939
|
"button",
|
|
1824
1940
|
{
|
|
1825
1941
|
onClick: onStop,
|
|
1826
1942
|
className: "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",
|
|
1827
1943
|
title: "Stop generation",
|
|
1828
|
-
children: /* @__PURE__ */
|
|
1944
|
+
children: /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
|
|
1829
1945
|
}
|
|
1830
|
-
) : /* @__PURE__ */
|
|
1946
|
+
) : /* @__PURE__ */ jsx15(
|
|
1831
1947
|
"button",
|
|
1832
1948
|
{
|
|
1833
1949
|
onClick: handleSend,
|
|
1834
1950
|
disabled: !text.trim() && pendingFiles.length === 0 || disabled,
|
|
1835
1951
|
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",
|
|
1836
1952
|
title: "Send message",
|
|
1837
|
-
children: /* @__PURE__ */
|
|
1953
|
+
children: /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
1838
1954
|
}
|
|
1839
1955
|
)
|
|
1840
1956
|
] }),
|
|
1841
|
-
/* @__PURE__ */
|
|
1957
|
+
/* @__PURE__ */ jsx15(
|
|
1842
1958
|
"input",
|
|
1843
1959
|
{
|
|
1844
1960
|
ref: fileInputRef,
|
|
@@ -1853,8 +1969,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1853
1969
|
}
|
|
1854
1970
|
|
|
1855
1971
|
// src/components/Chat/CommandComposer.tsx
|
|
1856
|
-
import { useState as
|
|
1857
|
-
import { Fragment as Fragment2, jsx as
|
|
1972
|
+
import { useState as useState3, useRef as useRef4 } from "react";
|
|
1973
|
+
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1858
1974
|
function CommandComposer({
|
|
1859
1975
|
onExecute,
|
|
1860
1976
|
state,
|
|
@@ -1871,10 +1987,10 @@ function CommandComposer({
|
|
|
1871
1987
|
placeholder = "Enter your command...",
|
|
1872
1988
|
disabled = false
|
|
1873
1989
|
}) {
|
|
1874
|
-
const [input, setInput] =
|
|
1875
|
-
const [pendingFiles, setPendingFiles] =
|
|
1876
|
-
const [fileError, setFileError] =
|
|
1877
|
-
const [showMenu, setShowMenu] =
|
|
1990
|
+
const [input, setInput] = useState3("");
|
|
1991
|
+
const [pendingFiles, setPendingFiles] = useState3([]);
|
|
1992
|
+
const [fileError, setFileError] = useState3(null);
|
|
1993
|
+
const [showMenu, setShowMenu] = useState3(false);
|
|
1878
1994
|
const inputRef = useRef4(null);
|
|
1879
1995
|
const fileInputRef = useRef4(null);
|
|
1880
1996
|
const menuButtonRef = useRef4(null);
|
|
@@ -1944,12 +2060,12 @@ function CommandComposer({
|
|
|
1944
2060
|
};
|
|
1945
2061
|
const getFileIcon = (mimeType) => {
|
|
1946
2062
|
if (mimeType.startsWith("image/")) {
|
|
1947
|
-
return /* @__PURE__ */
|
|
2063
|
+
return /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
|
|
1948
2064
|
}
|
|
1949
2065
|
if (mimeType === "application/pdf") {
|
|
1950
|
-
return /* @__PURE__ */
|
|
2066
|
+
return /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
|
|
1951
2067
|
}
|
|
1952
|
-
return /* @__PURE__ */
|
|
2068
|
+
return /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
|
|
1953
2069
|
};
|
|
1954
2070
|
const getDisplayContent = () => {
|
|
1955
2071
|
if (state === "loading") {
|
|
@@ -1974,12 +2090,12 @@ function CommandComposer({
|
|
|
1974
2090
|
};
|
|
1975
2091
|
const isShowingResult = state !== "idle";
|
|
1976
2092
|
const { text: displayContent, isToolCall } = getDisplayContent();
|
|
1977
|
-
return /* @__PURE__ */
|
|
1978
|
-
fileError && /* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
2093
|
+
return /* @__PURE__ */ jsxs12("div", { className: "w-full relative", children: [
|
|
2094
|
+
fileError && /* @__PURE__ */ jsx16("div", { className: "absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
|
|
2095
|
+
/* @__PURE__ */ jsx16("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
|
|
2096
|
+
/* @__PURE__ */ jsx16("span", { children: fileError })
|
|
1981
2097
|
] }) }),
|
|
1982
|
-
/* @__PURE__ */
|
|
2098
|
+
/* @__PURE__ */ jsxs12(
|
|
1983
2099
|
"div",
|
|
1984
2100
|
{
|
|
1985
2101
|
className: cn(
|
|
@@ -1991,21 +2107,21 @@ function CommandComposer({
|
|
|
1991
2107
|
state === "error" && "border-red-400 dark:border-red-500"
|
|
1992
2108
|
),
|
|
1993
2109
|
children: [
|
|
1994
|
-
/* @__PURE__ */
|
|
1995
|
-
state === "idle" && /* @__PURE__ */
|
|
1996
|
-
/* @__PURE__ */
|
|
2110
|
+
/* @__PURE__ */ jsxs12("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
|
|
2111
|
+
state === "idle" && /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
|
|
2112
|
+
/* @__PURE__ */ jsx16(
|
|
1997
2113
|
"button",
|
|
1998
2114
|
{
|
|
1999
2115
|
ref: menuButtonRef,
|
|
2000
2116
|
onClick: () => setShowMenu(!showMenu),
|
|
2001
2117
|
className: "apteva-composer-menu-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-500 dark:!text-neutral-400 hover:!text-neutral-700 dark:hover:!text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
2002
2118
|
title: "More options",
|
|
2003
|
-
children: /* @__PURE__ */
|
|
2119
|
+
children: /* @__PURE__ */ jsx16("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
2004
2120
|
}
|
|
2005
2121
|
),
|
|
2006
|
-
showMenu && /* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2122
|
+
showMenu && /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
2123
|
+
/* @__PURE__ */ jsx16("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
|
|
2124
|
+
/* @__PURE__ */ jsxs12(
|
|
2009
2125
|
"div",
|
|
2010
2126
|
{
|
|
2011
2127
|
className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
|
|
@@ -2014,7 +2130,7 @@ function CommandComposer({
|
|
|
2014
2130
|
top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
|
|
2015
2131
|
},
|
|
2016
2132
|
children: [
|
|
2017
|
-
/* @__PURE__ */
|
|
2133
|
+
/* @__PURE__ */ jsxs12(
|
|
2018
2134
|
"button",
|
|
2019
2135
|
{
|
|
2020
2136
|
onClick: () => {
|
|
@@ -2023,12 +2139,12 @@ function CommandComposer({
|
|
|
2023
2139
|
},
|
|
2024
2140
|
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",
|
|
2025
2141
|
children: [
|
|
2026
|
-
/* @__PURE__ */
|
|
2027
|
-
/* @__PURE__ */
|
|
2142
|
+
/* @__PURE__ */ jsx16("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("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)" }) }),
|
|
2143
|
+
/* @__PURE__ */ jsx16("span", { className: "!text-sm font-medium", children: "Add photos & files" })
|
|
2028
2144
|
]
|
|
2029
2145
|
}
|
|
2030
2146
|
),
|
|
2031
|
-
onExpand && /* @__PURE__ */
|
|
2147
|
+
onExpand && /* @__PURE__ */ jsxs12(
|
|
2032
2148
|
"button",
|
|
2033
2149
|
{
|
|
2034
2150
|
onClick: () => {
|
|
@@ -2037,8 +2153,8 @@ function CommandComposer({
|
|
|
2037
2153
|
},
|
|
2038
2154
|
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",
|
|
2039
2155
|
children: [
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2156
|
+
/* @__PURE__ */ jsx16("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
|
|
2157
|
+
/* @__PURE__ */ jsx16("span", { className: "!text-sm font-medium", children: "Expand to chat" })
|
|
2042
2158
|
]
|
|
2043
2159
|
}
|
|
2044
2160
|
)
|
|
@@ -2047,30 +2163,30 @@ function CommandComposer({
|
|
|
2047
2163
|
)
|
|
2048
2164
|
] })
|
|
2049
2165
|
] }),
|
|
2050
|
-
state === "loading" && !toolName && /* @__PURE__ */
|
|
2051
|
-
state === "loading" && toolName && /* @__PURE__ */
|
|
2166
|
+
state === "loading" && !toolName && /* @__PURE__ */ jsx16("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
|
|
2167
|
+
state === "loading" && toolName && /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
|
|
2052
2168
|
] }),
|
|
2053
|
-
pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */
|
|
2169
|
+
pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs12(
|
|
2054
2170
|
"div",
|
|
2055
2171
|
{
|
|
2056
2172
|
className: "relative group flex items-center justify-center w-6 h-6 bg-neutral-100 dark:bg-neutral-800 rounded overflow-hidden",
|
|
2057
2173
|
title: pf.file.name,
|
|
2058
2174
|
children: [
|
|
2059
|
-
pf.preview ? /* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2175
|
+
pf.preview ? /* @__PURE__ */ jsx16("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ jsx16("span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
|
|
2176
|
+
/* @__PURE__ */ jsx16(
|
|
2061
2177
|
"button",
|
|
2062
2178
|
{
|
|
2063
2179
|
onClick: () => removeFile(index),
|
|
2064
2180
|
className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity",
|
|
2065
2181
|
title: "Remove",
|
|
2066
|
-
children: /* @__PURE__ */
|
|
2182
|
+
children: /* @__PURE__ */ jsx16("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
2067
2183
|
}
|
|
2068
2184
|
)
|
|
2069
2185
|
]
|
|
2070
2186
|
},
|
|
2071
2187
|
index
|
|
2072
2188
|
)) }),
|
|
2073
|
-
state === "idle" ? /* @__PURE__ */
|
|
2189
|
+
state === "idle" ? /* @__PURE__ */ jsx16(
|
|
2074
2190
|
"textarea",
|
|
2075
2191
|
{
|
|
2076
2192
|
ref: inputRef,
|
|
@@ -2088,7 +2204,7 @@ function CommandComposer({
|
|
|
2088
2204
|
),
|
|
2089
2205
|
style: { minHeight: "24px", maxHeight: "120px" }
|
|
2090
2206
|
}
|
|
2091
|
-
) : /* @__PURE__ */
|
|
2207
|
+
) : /* @__PURE__ */ jsx16(
|
|
2092
2208
|
"div",
|
|
2093
2209
|
{
|
|
2094
2210
|
className: cn(
|
|
@@ -2099,14 +2215,14 @@ function CommandComposer({
|
|
|
2099
2215
|
state === "error" && "!text-red-600 dark:!text-red-400",
|
|
2100
2216
|
state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
|
|
2101
2217
|
),
|
|
2102
|
-
children: isToolCall ? /* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2218
|
+
children: isToolCall ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
2219
|
+
/* @__PURE__ */ jsx16("span", { className: "font-mono", children: displayContent }),
|
|
2220
|
+
/* @__PURE__ */ jsx16("span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
|
|
2105
2221
|
] }) : displayContent
|
|
2106
2222
|
}
|
|
2107
2223
|
),
|
|
2108
|
-
/* @__PURE__ */
|
|
2109
|
-
/* @__PURE__ */
|
|
2224
|
+
/* @__PURE__ */ jsx16("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
|
|
2225
|
+
/* @__PURE__ */ jsx16(
|
|
2110
2226
|
"button",
|
|
2111
2227
|
{
|
|
2112
2228
|
onClick: onApprove,
|
|
@@ -2114,7 +2230,7 @@ function CommandComposer({
|
|
|
2114
2230
|
children: "Approve"
|
|
2115
2231
|
}
|
|
2116
2232
|
),
|
|
2117
|
-
/* @__PURE__ */
|
|
2233
|
+
/* @__PURE__ */ jsx16(
|
|
2118
2234
|
"button",
|
|
2119
2235
|
{
|
|
2120
2236
|
onClick: onReject,
|
|
@@ -2122,26 +2238,26 @@ function CommandComposer({
|
|
|
2122
2238
|
children: "Modify"
|
|
2123
2239
|
}
|
|
2124
2240
|
)
|
|
2125
|
-
] }) : /* @__PURE__ */
|
|
2126
|
-
state === "loading" && onStop && /* @__PURE__ */
|
|
2241
|
+
] }) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
2242
|
+
state === "loading" && onStop && /* @__PURE__ */ jsx16(
|
|
2127
2243
|
"button",
|
|
2128
2244
|
{
|
|
2129
2245
|
onClick: onStop,
|
|
2130
2246
|
className: "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",
|
|
2131
2247
|
title: "Stop generation",
|
|
2132
|
-
children: /* @__PURE__ */
|
|
2248
|
+
children: /* @__PURE__ */ jsx16("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
|
|
2133
2249
|
}
|
|
2134
2250
|
),
|
|
2135
|
-
(state === "success" || state === "error") && /* @__PURE__ */
|
|
2251
|
+
(state === "success" || state === "error") && /* @__PURE__ */ jsx16(
|
|
2136
2252
|
"button",
|
|
2137
2253
|
{
|
|
2138
2254
|
onClick: handleNewCommand,
|
|
2139
2255
|
className: "w-8 h-8 rounded-lg flex items-center justify-center !text-neutral-400 hover:!text-neutral-600 dark:hover:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
|
|
2140
2256
|
title: "New command",
|
|
2141
|
-
children: /* @__PURE__ */
|
|
2257
|
+
children: /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
2142
2258
|
}
|
|
2143
2259
|
),
|
|
2144
|
-
state === "idle" && /* @__PURE__ */
|
|
2260
|
+
state === "idle" && /* @__PURE__ */ jsx16(
|
|
2145
2261
|
"button",
|
|
2146
2262
|
{
|
|
2147
2263
|
onClick: handleSubmit,
|
|
@@ -2153,14 +2269,14 @@ function CommandComposer({
|
|
|
2153
2269
|
input.trim() || pendingFiles.length > 0 ? "bg-neutral-900 dark:bg-white !text-white dark:!text-neutral-900 border-neutral-900 dark:border-white" : "bg-white dark:bg-neutral-800 !text-neutral-400"
|
|
2154
2270
|
),
|
|
2155
2271
|
title: "Execute command",
|
|
2156
|
-
children: /* @__PURE__ */
|
|
2272
|
+
children: /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
|
|
2157
2273
|
}
|
|
2158
2274
|
)
|
|
2159
2275
|
] }) })
|
|
2160
2276
|
]
|
|
2161
2277
|
}
|
|
2162
2278
|
),
|
|
2163
|
-
/* @__PURE__ */
|
|
2279
|
+
/* @__PURE__ */ jsx16(
|
|
2164
2280
|
"input",
|
|
2165
2281
|
{
|
|
2166
2282
|
ref: fileInputRef,
|
|
@@ -2360,7 +2476,7 @@ var AptevaClient = class {
|
|
|
2360
2476
|
var aptevaClient = new AptevaClient();
|
|
2361
2477
|
|
|
2362
2478
|
// src/components/Chat/Chat.tsx
|
|
2363
|
-
import { Fragment as Fragment3, jsx as
|
|
2479
|
+
import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2364
2480
|
var Chat = forwardRef(function Chat2({
|
|
2365
2481
|
agentId,
|
|
2366
2482
|
threadId,
|
|
@@ -2406,23 +2522,23 @@ var Chat = forwardRef(function Chat2({
|
|
|
2406
2522
|
onWidgetRender,
|
|
2407
2523
|
className
|
|
2408
2524
|
}, ref) {
|
|
2409
|
-
const [messages, setMessages] =
|
|
2410
|
-
const [isLoading, setIsLoading] =
|
|
2411
|
-
const [currentThreadId, setCurrentThreadId] =
|
|
2412
|
-
const [mode, setMode] =
|
|
2413
|
-
const [chatToolName, setChatToolName] =
|
|
2414
|
-
const [commandState, setCommandState] =
|
|
2415
|
-
const [commandResult, setCommandResult] =
|
|
2416
|
-
const [commandError, setCommandError] =
|
|
2417
|
-
const [progress, setProgress] =
|
|
2418
|
-
const [commandInput, setCommandInput] =
|
|
2419
|
-
const [streamedContent, setStreamedContent] =
|
|
2420
|
-
const [currentToolName, setCurrentToolName] =
|
|
2421
|
-
const [currentRequestId, setCurrentRequestId] =
|
|
2422
|
-
const [plan, setPlan] =
|
|
2423
|
-
const [pendingCommand, setPendingCommand] =
|
|
2424
|
-
const [internalPlanMode, setInternalPlanMode] =
|
|
2425
|
-
const [showSettingsMenu, setShowSettingsMenu] =
|
|
2525
|
+
const [messages, setMessages] = useState4(initialMessages);
|
|
2526
|
+
const [isLoading, setIsLoading] = useState4(false);
|
|
2527
|
+
const [currentThreadId, setCurrentThreadId] = useState4(threadId || null);
|
|
2528
|
+
const [mode, setMode] = useState4(initialMode);
|
|
2529
|
+
const [chatToolName, setChatToolName] = useState4(null);
|
|
2530
|
+
const [commandState, setCommandState] = useState4("idle");
|
|
2531
|
+
const [commandResult, setCommandResult] = useState4(null);
|
|
2532
|
+
const [commandError, setCommandError] = useState4(null);
|
|
2533
|
+
const [progress, setProgress] = useState4(0);
|
|
2534
|
+
const [commandInput, setCommandInput] = useState4("");
|
|
2535
|
+
const [streamedContent, setStreamedContent] = useState4("");
|
|
2536
|
+
const [currentToolName, setCurrentToolName] = useState4(null);
|
|
2537
|
+
const [currentRequestId, setCurrentRequestId] = useState4(null);
|
|
2538
|
+
const [plan, setPlan] = useState4("");
|
|
2539
|
+
const [pendingCommand, setPendingCommand] = useState4("");
|
|
2540
|
+
const [internalPlanMode, setInternalPlanMode] = useState4(planMode);
|
|
2541
|
+
const [showSettingsMenu, setShowSettingsMenu] = useState4(false);
|
|
2426
2542
|
const fileInputRef = useRef5(null);
|
|
2427
2543
|
const handleSendMessageRef = useRef5(null);
|
|
2428
2544
|
useImperativeHandle(ref, () => ({
|
|
@@ -2911,16 +3027,16 @@ ${planToExecute}`;
|
|
|
2911
3027
|
setCurrentRequestId(null);
|
|
2912
3028
|
};
|
|
2913
3029
|
const isCompact = commandVariant === "compact";
|
|
2914
|
-
return /* @__PURE__ */
|
|
2915
|
-
showHeader && mode === "chat" && /* @__PURE__ */
|
|
2916
|
-
/* @__PURE__ */
|
|
2917
|
-
/* @__PURE__ */
|
|
3030
|
+
return /* @__PURE__ */ jsxs13("div", { className: cn("apteva-chat flex flex-col h-full", className), children: [
|
|
3031
|
+
showHeader && mode === "chat" && /* @__PURE__ */ jsx17("div", { className: "apteva-chat-header px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs13("div", { children: [
|
|
3032
|
+
/* @__PURE__ */ jsx17("div", { className: "apteva-chat-title", children: headerTitle }),
|
|
3033
|
+
/* @__PURE__ */ jsx17("div", { className: cn(
|
|
2918
3034
|
"apteva-chat-status",
|
|
2919
3035
|
isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
|
|
2920
3036
|
), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
|
|
2921
3037
|
] }) }),
|
|
2922
|
-
mode === "chat" && /* @__PURE__ */
|
|
2923
|
-
/* @__PURE__ */
|
|
3038
|
+
mode === "chat" && /* @__PURE__ */ jsxs13(Fragment3, { children: [
|
|
3039
|
+
/* @__PURE__ */ jsx17(
|
|
2924
3040
|
MessageList,
|
|
2925
3041
|
{
|
|
2926
3042
|
messages,
|
|
@@ -2935,7 +3051,7 @@ ${planToExecute}`;
|
|
|
2935
3051
|
onWidgetRender
|
|
2936
3052
|
}
|
|
2937
3053
|
),
|
|
2938
|
-
/* @__PURE__ */
|
|
3054
|
+
/* @__PURE__ */ jsx17(
|
|
2939
3055
|
Composer,
|
|
2940
3056
|
{
|
|
2941
3057
|
onSendMessage: handleSendMessage,
|
|
@@ -2948,7 +3064,7 @@ ${planToExecute}`;
|
|
|
2948
3064
|
}
|
|
2949
3065
|
)
|
|
2950
3066
|
] }),
|
|
2951
|
-
mode === "command" && /* @__PURE__ */
|
|
3067
|
+
mode === "command" && /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(
|
|
2952
3068
|
CommandComposer,
|
|
2953
3069
|
{
|
|
2954
3070
|
onExecute: (text, files) => {
|
|
@@ -2969,7 +3085,7 @@ ${planToExecute}`;
|
|
|
2969
3085
|
placeholder: placeholder || "Enter your command..."
|
|
2970
3086
|
}
|
|
2971
3087
|
) }),
|
|
2972
|
-
/* @__PURE__ */
|
|
3088
|
+
/* @__PURE__ */ jsx17("style", { dangerouslySetInnerHTML: {
|
|
2973
3089
|
__html: `
|
|
2974
3090
|
@keyframes pulse-border {
|
|
2975
3091
|
0%, 100% { border-color: rgb(59, 130, 246); }
|
|
@@ -2987,12 +3103,12 @@ ${planToExecute}`;
|
|
|
2987
3103
|
});
|
|
2988
3104
|
|
|
2989
3105
|
// src/components/Chat/CommandOutput.tsx
|
|
2990
|
-
import { useState as
|
|
2991
|
-
import { jsx as
|
|
3106
|
+
import { useState as useState5 } from "react";
|
|
3107
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2992
3108
|
|
|
2993
3109
|
// src/components/Command/Command.tsx
|
|
2994
|
-
import React, { useState as
|
|
2995
|
-
import { Fragment as Fragment4, jsx as
|
|
3110
|
+
import React, { useState as useState6, useEffect as useEffect5 } from "react";
|
|
3111
|
+
import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2996
3112
|
function Command({
|
|
2997
3113
|
agentId,
|
|
2998
3114
|
command: initialCommand,
|
|
@@ -3019,18 +3135,18 @@ function Command({
|
|
|
3019
3135
|
resultRenderer,
|
|
3020
3136
|
className
|
|
3021
3137
|
}) {
|
|
3022
|
-
const [state, setState] =
|
|
3023
|
-
const [result, setResult] =
|
|
3024
|
-
const [error, setError] =
|
|
3025
|
-
const [progress, setProgress] =
|
|
3026
|
-
const [command, setCommand] =
|
|
3027
|
-
const [streamedContent, setStreamedContent] =
|
|
3028
|
-
const [plan, setPlan] =
|
|
3029
|
-
const [pendingCommand, setPendingCommand] =
|
|
3030
|
-
const [showPlanDetails, setShowPlanDetails] =
|
|
3031
|
-
const [uploadedFiles, setUploadedFiles] =
|
|
3032
|
-
const [showSettingsMenu, setShowSettingsMenu] =
|
|
3033
|
-
const [internalPlanMode, setInternalPlanMode] =
|
|
3138
|
+
const [state, setState] = useState6("idle");
|
|
3139
|
+
const [result, setResult] = useState6(null);
|
|
3140
|
+
const [error, setError] = useState6(null);
|
|
3141
|
+
const [progress, setProgress] = useState6(0);
|
|
3142
|
+
const [command, setCommand] = useState6(initialCommand || "");
|
|
3143
|
+
const [streamedContent, setStreamedContent] = useState6("");
|
|
3144
|
+
const [plan, setPlan] = useState6("");
|
|
3145
|
+
const [pendingCommand, setPendingCommand] = useState6("");
|
|
3146
|
+
const [showPlanDetails, setShowPlanDetails] = useState6(false);
|
|
3147
|
+
const [uploadedFiles, setUploadedFiles] = useState6([]);
|
|
3148
|
+
const [showSettingsMenu, setShowSettingsMenu] = useState6(false);
|
|
3149
|
+
const [internalPlanMode, setInternalPlanMode] = useState6(planMode);
|
|
3034
3150
|
const fileInputRef = React.useRef(null);
|
|
3035
3151
|
useEffect5(() => {
|
|
3036
3152
|
if (autoExecute && state === "idle" && command) {
|
|
@@ -3442,7 +3558,7 @@ ${planToExecute}`;
|
|
|
3442
3558
|
setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
|
|
3443
3559
|
};
|
|
3444
3560
|
const isCompact = variant === "compact";
|
|
3445
|
-
return /* @__PURE__ */
|
|
3561
|
+
return /* @__PURE__ */ jsxs15(
|
|
3446
3562
|
"div",
|
|
3447
3563
|
{
|
|
3448
3564
|
className: cn(
|
|
@@ -3457,9 +3573,9 @@ ${planToExecute}`;
|
|
|
3457
3573
|
),
|
|
3458
3574
|
style: { minHeight: isCompact ? "auto" : "180px" },
|
|
3459
3575
|
children: [
|
|
3460
|
-
/* @__PURE__ */
|
|
3461
|
-
state === "idle" && allowInput && !isCompact && /* @__PURE__ */
|
|
3462
|
-
/* @__PURE__ */
|
|
3576
|
+
/* @__PURE__ */ jsxs15("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
|
|
3577
|
+
state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3578
|
+
/* @__PURE__ */ jsx19(
|
|
3463
3579
|
"textarea",
|
|
3464
3580
|
{
|
|
3465
3581
|
value: command,
|
|
@@ -3475,42 +3591,42 @@ ${planToExecute}`;
|
|
|
3475
3591
|
rows: 6
|
|
3476
3592
|
}
|
|
3477
3593
|
),
|
|
3478
|
-
uploadedFiles.length > 0 && /* @__PURE__ */
|
|
3479
|
-
file.type === "image" ? /* @__PURE__ */
|
|
3594
|
+
uploadedFiles.length > 0 && /* @__PURE__ */ jsx19("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs15("div", { className: "relative group", children: [
|
|
3595
|
+
file.type === "image" ? /* @__PURE__ */ jsx19(
|
|
3480
3596
|
"img",
|
|
3481
3597
|
{
|
|
3482
3598
|
src: file.preview,
|
|
3483
3599
|
alt: file.name,
|
|
3484
3600
|
className: "w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600"
|
|
3485
3601
|
}
|
|
3486
|
-
) : /* @__PURE__ */
|
|
3487
|
-
/* @__PURE__ */
|
|
3488
|
-
/* @__PURE__ */
|
|
3602
|
+
) : /* @__PURE__ */ jsxs15("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
|
|
3603
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
|
|
3604
|
+
/* @__PURE__ */ jsx19("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
|
|
3489
3605
|
] }),
|
|
3490
|
-
/* @__PURE__ */
|
|
3606
|
+
/* @__PURE__ */ jsx19(
|
|
3491
3607
|
"button",
|
|
3492
3608
|
{
|
|
3493
3609
|
onClick: () => removeFile(index),
|
|
3494
3610
|
className: "absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
|
|
3495
3611
|
title: `Remove ${file.type}`,
|
|
3496
|
-
children: /* @__PURE__ */
|
|
3612
|
+
children: /* @__PURE__ */ jsx19("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
3497
3613
|
}
|
|
3498
3614
|
)
|
|
3499
3615
|
] }, index)) })
|
|
3500
3616
|
] }),
|
|
3501
|
-
state === "idle" && allowInput && isCompact && /* @__PURE__ */
|
|
3502
|
-
/* @__PURE__ */
|
|
3503
|
-
enableFileUpload && /* @__PURE__ */
|
|
3617
|
+
state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3618
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
|
|
3619
|
+
enableFileUpload && /* @__PURE__ */ jsx19(
|
|
3504
3620
|
"button",
|
|
3505
3621
|
{
|
|
3506
3622
|
onClick: () => fileInputRef.current?.click(),
|
|
3507
3623
|
className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
3508
3624
|
title: "Attach file",
|
|
3509
|
-
children: /* @__PURE__ */
|
|
3625
|
+
children: /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
|
|
3510
3626
|
}
|
|
3511
3627
|
),
|
|
3512
|
-
planMode && /* @__PURE__ */
|
|
3513
|
-
/* @__PURE__ */
|
|
3628
|
+
planMode && /* @__PURE__ */ jsxs15("div", { className: "relative settings-menu-container", children: [
|
|
3629
|
+
/* @__PURE__ */ jsx19(
|
|
3514
3630
|
"button",
|
|
3515
3631
|
{
|
|
3516
3632
|
onClick: () => setShowSettingsMenu(!showSettingsMenu),
|
|
@@ -3519,28 +3635,28 @@ ${planToExecute}`;
|
|
|
3519
3635
|
internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
|
|
3520
3636
|
),
|
|
3521
3637
|
title: "Settings",
|
|
3522
|
-
children: /* @__PURE__ */
|
|
3523
|
-
/* @__PURE__ */
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
3526
|
-
/* @__PURE__ */
|
|
3527
|
-
/* @__PURE__ */
|
|
3528
|
-
/* @__PURE__ */
|
|
3529
|
-
/* @__PURE__ */
|
|
3530
|
-
/* @__PURE__ */
|
|
3531
|
-
/* @__PURE__ */
|
|
3638
|
+
children: /* @__PURE__ */ jsxs15("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
3639
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
|
|
3640
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
|
|
3641
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
|
|
3642
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
|
|
3643
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
|
|
3644
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
|
|
3645
|
+
/* @__PURE__ */ jsx19("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
|
|
3646
|
+
/* @__PURE__ */ jsx19("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
|
|
3647
|
+
/* @__PURE__ */ jsx19("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
|
|
3532
3648
|
] })
|
|
3533
3649
|
}
|
|
3534
3650
|
),
|
|
3535
|
-
showSettingsMenu && /* @__PURE__ */
|
|
3536
|
-
/* @__PURE__ */
|
|
3537
|
-
/* @__PURE__ */
|
|
3538
|
-
/* @__PURE__ */
|
|
3539
|
-
/* @__PURE__ */
|
|
3540
|
-
/* @__PURE__ */
|
|
3651
|
+
showSettingsMenu && /* @__PURE__ */ jsx19("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs15("label", { className: "flex items-center justify-between cursor-pointer group", children: [
|
|
3652
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
3653
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
|
|
3654
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3655
|
+
/* @__PURE__ */ jsx19("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
|
|
3656
|
+
/* @__PURE__ */ jsx19("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
|
|
3541
3657
|
] })
|
|
3542
3658
|
] }),
|
|
3543
|
-
/* @__PURE__ */
|
|
3659
|
+
/* @__PURE__ */ jsx19(
|
|
3544
3660
|
"button",
|
|
3545
3661
|
{
|
|
3546
3662
|
onClick: (e) => {
|
|
@@ -3552,7 +3668,7 @@ ${planToExecute}`;
|
|
|
3552
3668
|
internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
|
|
3553
3669
|
),
|
|
3554
3670
|
type: "button",
|
|
3555
|
-
children: /* @__PURE__ */
|
|
3671
|
+
children: /* @__PURE__ */ jsx19(
|
|
3556
3672
|
"span",
|
|
3557
3673
|
{
|
|
3558
3674
|
className: cn(
|
|
@@ -3566,26 +3682,26 @@ ${planToExecute}`;
|
|
|
3566
3682
|
] }) })
|
|
3567
3683
|
] })
|
|
3568
3684
|
] }),
|
|
3569
|
-
uploadedFiles.length > 0 && /* @__PURE__ */
|
|
3570
|
-
file.type === "image" ? /* @__PURE__ */
|
|
3685
|
+
uploadedFiles.length > 0 && /* @__PURE__ */ jsx19("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs15("div", { className: "relative group", children: [
|
|
3686
|
+
file.type === "image" ? /* @__PURE__ */ jsx19(
|
|
3571
3687
|
"img",
|
|
3572
3688
|
{
|
|
3573
3689
|
src: file.preview,
|
|
3574
3690
|
alt: file.name,
|
|
3575
3691
|
className: "w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600"
|
|
3576
3692
|
}
|
|
3577
|
-
) : /* @__PURE__ */
|
|
3578
|
-
/* @__PURE__ */
|
|
3693
|
+
) : /* @__PURE__ */ jsx19("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx19("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
|
|
3694
|
+
/* @__PURE__ */ jsx19(
|
|
3579
3695
|
"button",
|
|
3580
3696
|
{
|
|
3581
3697
|
onClick: () => removeFile(index),
|
|
3582
3698
|
className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
|
|
3583
3699
|
title: "Remove",
|
|
3584
|
-
children: /* @__PURE__ */
|
|
3700
|
+
children: /* @__PURE__ */ jsx19("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
|
|
3585
3701
|
}
|
|
3586
3702
|
)
|
|
3587
3703
|
] }, index)) }),
|
|
3588
|
-
/* @__PURE__ */
|
|
3704
|
+
/* @__PURE__ */ jsx19(
|
|
3589
3705
|
"input",
|
|
3590
3706
|
{
|
|
3591
3707
|
type: "text",
|
|
@@ -3601,7 +3717,7 @@ ${planToExecute}`;
|
|
|
3601
3717
|
className: "flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1"
|
|
3602
3718
|
}
|
|
3603
3719
|
),
|
|
3604
|
-
/* @__PURE__ */
|
|
3720
|
+
/* @__PURE__ */ jsx19(
|
|
3605
3721
|
"button",
|
|
3606
3722
|
{
|
|
3607
3723
|
onClick: () => executeCommand(),
|
|
@@ -3617,33 +3733,33 @@ ${planToExecute}`;
|
|
|
3617
3733
|
!command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
|
|
3618
3734
|
),
|
|
3619
3735
|
title: "Execute",
|
|
3620
|
-
children: /* @__PURE__ */
|
|
3736
|
+
children: /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3621
3737
|
}
|
|
3622
3738
|
)
|
|
3623
3739
|
] }),
|
|
3624
|
-
state === "loading" && !isCompact && /* @__PURE__ */
|
|
3625
|
-
/* @__PURE__ */
|
|
3626
|
-
/* @__PURE__ */
|
|
3627
|
-
showProgress && /* @__PURE__ */
|
|
3628
|
-
/* @__PURE__ */
|
|
3740
|
+
state === "loading" && !isCompact && /* @__PURE__ */ jsxs15("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
|
|
3741
|
+
/* @__PURE__ */ jsx19("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
|
|
3742
|
+
/* @__PURE__ */ jsx19("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
|
|
3743
|
+
showProgress && /* @__PURE__ */ jsxs15("div", { className: "w-full max-w-sm", children: [
|
|
3744
|
+
/* @__PURE__ */ jsx19("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx19(
|
|
3629
3745
|
"div",
|
|
3630
3746
|
{
|
|
3631
3747
|
className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
|
|
3632
3748
|
style: { width: `${progress}%` }
|
|
3633
3749
|
}
|
|
3634
3750
|
) }),
|
|
3635
|
-
/* @__PURE__ */
|
|
3751
|
+
/* @__PURE__ */ jsxs15("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
|
|
3636
3752
|
progress,
|
|
3637
3753
|
"%"
|
|
3638
3754
|
] })
|
|
3639
3755
|
] })
|
|
3640
3756
|
] }),
|
|
3641
|
-
state === "loading" && isCompact && /* @__PURE__ */
|
|
3642
|
-
/* @__PURE__ */
|
|
3643
|
-
/* @__PURE__ */
|
|
3644
|
-
/* @__PURE__ */
|
|
3757
|
+
state === "loading" && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3758
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
|
|
3759
|
+
/* @__PURE__ */ jsx19("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
|
|
3760
|
+
/* @__PURE__ */ jsx19("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
|
|
3645
3761
|
] }),
|
|
3646
|
-
/* @__PURE__ */
|
|
3762
|
+
/* @__PURE__ */ jsx19(
|
|
3647
3763
|
"button",
|
|
3648
3764
|
{
|
|
3649
3765
|
disabled: true,
|
|
@@ -3655,20 +3771,20 @@ ${planToExecute}`;
|
|
|
3655
3771
|
"!text-lg",
|
|
3656
3772
|
"opacity-30 cursor-not-allowed"
|
|
3657
3773
|
),
|
|
3658
|
-
children: /* @__PURE__ */
|
|
3774
|
+
children: /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3659
3775
|
}
|
|
3660
3776
|
)
|
|
3661
3777
|
] }),
|
|
3662
|
-
state === "plan-pending" && !isCompact && /* @__PURE__ */
|
|
3663
|
-
/* @__PURE__ */
|
|
3664
|
-
/* @__PURE__ */
|
|
3665
|
-
/* @__PURE__ */
|
|
3666
|
-
/* @__PURE__ */
|
|
3667
|
-
/* @__PURE__ */
|
|
3778
|
+
state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx19("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs15("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
|
|
3779
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2 mb-3", children: [
|
|
3780
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
|
|
3781
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1", children: [
|
|
3782
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
|
|
3783
|
+
/* @__PURE__ */ jsx19("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
|
|
3668
3784
|
] })
|
|
3669
3785
|
] }),
|
|
3670
|
-
/* @__PURE__ */
|
|
3671
|
-
/* @__PURE__ */
|
|
3786
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex gap-2 mt-4", children: [
|
|
3787
|
+
/* @__PURE__ */ jsx19(
|
|
3672
3788
|
"button",
|
|
3673
3789
|
{
|
|
3674
3790
|
onClick: approvePlan,
|
|
@@ -3676,7 +3792,7 @@ ${planToExecute}`;
|
|
|
3676
3792
|
children: "Approve & Execute"
|
|
3677
3793
|
}
|
|
3678
3794
|
),
|
|
3679
|
-
/* @__PURE__ */
|
|
3795
|
+
/* @__PURE__ */ jsx19(
|
|
3680
3796
|
"button",
|
|
3681
3797
|
{
|
|
3682
3798
|
onClick: rejectPlan,
|
|
@@ -3686,20 +3802,20 @@ ${planToExecute}`;
|
|
|
3686
3802
|
)
|
|
3687
3803
|
] })
|
|
3688
3804
|
] }) }),
|
|
3689
|
-
state === "plan-pending" && isCompact && /* @__PURE__ */
|
|
3690
|
-
/* @__PURE__ */
|
|
3805
|
+
state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3806
|
+
/* @__PURE__ */ jsxs15(
|
|
3691
3807
|
"button",
|
|
3692
3808
|
{
|
|
3693
3809
|
onClick: () => setShowPlanDetails(true),
|
|
3694
3810
|
className: "flex-1 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 rounded-lg transition-colors",
|
|
3695
3811
|
children: [
|
|
3696
|
-
/* @__PURE__ */
|
|
3697
|
-
/* @__PURE__ */
|
|
3812
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
|
|
3813
|
+
/* @__PURE__ */ jsx19("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
|
|
3698
3814
|
]
|
|
3699
3815
|
}
|
|
3700
3816
|
),
|
|
3701
|
-
/* @__PURE__ */
|
|
3702
|
-
/* @__PURE__ */
|
|
3817
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex gap-2 flex-shrink-0", children: [
|
|
3818
|
+
/* @__PURE__ */ jsx19(
|
|
3703
3819
|
"button",
|
|
3704
3820
|
{
|
|
3705
3821
|
onClick: approvePlan,
|
|
@@ -3707,7 +3823,7 @@ ${planToExecute}`;
|
|
|
3707
3823
|
children: "Approve"
|
|
3708
3824
|
}
|
|
3709
3825
|
),
|
|
3710
|
-
/* @__PURE__ */
|
|
3826
|
+
/* @__PURE__ */ jsx19(
|
|
3711
3827
|
"button",
|
|
3712
3828
|
{
|
|
3713
3829
|
onClick: rejectPlan,
|
|
@@ -3717,15 +3833,15 @@ ${planToExecute}`;
|
|
|
3717
3833
|
)
|
|
3718
3834
|
] })
|
|
3719
3835
|
] }),
|
|
3720
|
-
state === "error" && /* @__PURE__ */
|
|
3721
|
-
/* @__PURE__ */
|
|
3722
|
-
/* @__PURE__ */
|
|
3723
|
-
/* @__PURE__ */
|
|
3724
|
-
/* @__PURE__ */
|
|
3725
|
-
/* @__PURE__ */
|
|
3836
|
+
state === "error" && /* @__PURE__ */ jsxs15("div", { className: "flex-1 flex flex-col", children: [
|
|
3837
|
+
/* @__PURE__ */ jsx19("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2", children: [
|
|
3838
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
|
|
3839
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3840
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
|
|
3841
|
+
/* @__PURE__ */ jsx19("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
|
|
3726
3842
|
] })
|
|
3727
3843
|
] }) }),
|
|
3728
|
-
allowInput && /* @__PURE__ */
|
|
3844
|
+
allowInput && /* @__PURE__ */ jsx19(
|
|
3729
3845
|
"textarea",
|
|
3730
3846
|
{
|
|
3731
3847
|
value: command,
|
|
@@ -3742,16 +3858,16 @@ ${planToExecute}`;
|
|
|
3742
3858
|
}
|
|
3743
3859
|
)
|
|
3744
3860
|
] }),
|
|
3745
|
-
state === "success" && result && !isCompact && /* @__PURE__ */
|
|
3746
|
-
/* @__PURE__ */
|
|
3747
|
-
/* @__PURE__ */
|
|
3748
|
-
/* @__PURE__ */
|
|
3749
|
-
/* @__PURE__ */
|
|
3750
|
-
/* @__PURE__ */
|
|
3861
|
+
state === "success" && result && !isCompact && /* @__PURE__ */ jsx19("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs15("div", { className: "space-y-4", children: [
|
|
3862
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
|
|
3863
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
|
|
3864
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1", children: [
|
|
3865
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
|
|
3866
|
+
/* @__PURE__ */ jsx19("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
|
|
3751
3867
|
] })
|
|
3752
3868
|
] }),
|
|
3753
|
-
result.data?.summary && /* @__PURE__ */
|
|
3754
|
-
result.widgets && result.widgets.length > 0 && /* @__PURE__ */
|
|
3869
|
+
result.data?.summary && /* @__PURE__ */ jsx19("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
|
|
3870
|
+
result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx19("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx19(
|
|
3755
3871
|
WidgetRenderer,
|
|
3756
3872
|
{
|
|
3757
3873
|
widget,
|
|
@@ -3760,8 +3876,8 @@ ${planToExecute}`;
|
|
|
3760
3876
|
widget.id
|
|
3761
3877
|
)) })
|
|
3762
3878
|
] }) }),
|
|
3763
|
-
state === "success" && result && isCompact && /* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3879
|
+
state === "success" && result && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3880
|
+
/* @__PURE__ */ jsxs15(
|
|
3765
3881
|
"div",
|
|
3766
3882
|
{
|
|
3767
3883
|
className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
|
|
@@ -3770,12 +3886,12 @@ ${planToExecute}`;
|
|
|
3770
3886
|
setResult(null);
|
|
3771
3887
|
},
|
|
3772
3888
|
children: [
|
|
3773
|
-
/* @__PURE__ */
|
|
3774
|
-
/* @__PURE__ */
|
|
3889
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
|
|
3890
|
+
/* @__PURE__ */ jsx19("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
|
|
3775
3891
|
]
|
|
3776
3892
|
}
|
|
3777
3893
|
),
|
|
3778
|
-
/* @__PURE__ */
|
|
3894
|
+
/* @__PURE__ */ jsx19(
|
|
3779
3895
|
"button",
|
|
3780
3896
|
{
|
|
3781
3897
|
onClick: () => {
|
|
@@ -3791,24 +3907,24 @@ ${planToExecute}`;
|
|
|
3791
3907
|
"!text-lg"
|
|
3792
3908
|
),
|
|
3793
3909
|
title: "New command",
|
|
3794
|
-
children: /* @__PURE__ */
|
|
3910
|
+
children: /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3795
3911
|
}
|
|
3796
3912
|
)
|
|
3797
3913
|
] })
|
|
3798
3914
|
] }),
|
|
3799
|
-
!isCompact && /* @__PURE__ */
|
|
3800
|
-
/* @__PURE__ */
|
|
3801
|
-
enableFileUpload && /* @__PURE__ */
|
|
3915
|
+
!isCompact && /* @__PURE__ */ jsxs15("div", { className: "p-3 flex items-center justify-between gap-2", children: [
|
|
3916
|
+
/* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3917
|
+
enableFileUpload && /* @__PURE__ */ jsx19(
|
|
3802
3918
|
"button",
|
|
3803
3919
|
{
|
|
3804
3920
|
onClick: () => fileInputRef.current?.click(),
|
|
3805
3921
|
className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
3806
3922
|
title: "Attach file",
|
|
3807
|
-
children: /* @__PURE__ */
|
|
3923
|
+
children: /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
|
|
3808
3924
|
}
|
|
3809
3925
|
),
|
|
3810
|
-
planMode && /* @__PURE__ */
|
|
3811
|
-
/* @__PURE__ */
|
|
3926
|
+
planMode && /* @__PURE__ */ jsxs15("div", { className: "relative settings-menu-container", children: [
|
|
3927
|
+
/* @__PURE__ */ jsx19(
|
|
3812
3928
|
"button",
|
|
3813
3929
|
{
|
|
3814
3930
|
onClick: () => setShowSettingsMenu(!showSettingsMenu),
|
|
@@ -3817,28 +3933,28 @@ ${planToExecute}`;
|
|
|
3817
3933
|
internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
|
|
3818
3934
|
),
|
|
3819
3935
|
title: "Settings",
|
|
3820
|
-
children: /* @__PURE__ */
|
|
3821
|
-
/* @__PURE__ */
|
|
3822
|
-
/* @__PURE__ */
|
|
3823
|
-
/* @__PURE__ */
|
|
3824
|
-
/* @__PURE__ */
|
|
3825
|
-
/* @__PURE__ */
|
|
3826
|
-
/* @__PURE__ */
|
|
3827
|
-
/* @__PURE__ */
|
|
3828
|
-
/* @__PURE__ */
|
|
3829
|
-
/* @__PURE__ */
|
|
3936
|
+
children: /* @__PURE__ */ jsxs15("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
3937
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
|
|
3938
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
|
|
3939
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
|
|
3940
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
|
|
3941
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
|
|
3942
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
|
|
3943
|
+
/* @__PURE__ */ jsx19("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
|
|
3944
|
+
/* @__PURE__ */ jsx19("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
|
|
3945
|
+
/* @__PURE__ */ jsx19("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
|
|
3830
3946
|
] })
|
|
3831
3947
|
}
|
|
3832
3948
|
),
|
|
3833
|
-
showSettingsMenu && /* @__PURE__ */
|
|
3834
|
-
/* @__PURE__ */
|
|
3835
|
-
/* @__PURE__ */
|
|
3836
|
-
/* @__PURE__ */
|
|
3837
|
-
/* @__PURE__ */
|
|
3838
|
-
/* @__PURE__ */
|
|
3949
|
+
showSettingsMenu && /* @__PURE__ */ jsx19("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs15("label", { className: "flex items-center justify-between cursor-pointer group", children: [
|
|
3950
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
3951
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
|
|
3952
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3953
|
+
/* @__PURE__ */ jsx19("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
|
|
3954
|
+
/* @__PURE__ */ jsx19("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
|
|
3839
3955
|
] })
|
|
3840
3956
|
] }),
|
|
3841
|
-
/* @__PURE__ */
|
|
3957
|
+
/* @__PURE__ */ jsx19(
|
|
3842
3958
|
"button",
|
|
3843
3959
|
{
|
|
3844
3960
|
onClick: (e) => {
|
|
@@ -3850,7 +3966,7 @@ ${planToExecute}`;
|
|
|
3850
3966
|
internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
|
|
3851
3967
|
),
|
|
3852
3968
|
type: "button",
|
|
3853
|
-
children: /* @__PURE__ */
|
|
3969
|
+
children: /* @__PURE__ */ jsx19(
|
|
3854
3970
|
"span",
|
|
3855
3971
|
{
|
|
3856
3972
|
className: cn(
|
|
@@ -3864,9 +3980,9 @@ ${planToExecute}`;
|
|
|
3864
3980
|
] }) })
|
|
3865
3981
|
] })
|
|
3866
3982
|
] }) }),
|
|
3867
|
-
!(state === "idle" && allowInput) && /* @__PURE__ */
|
|
3868
|
-
/* @__PURE__ */
|
|
3869
|
-
(state === "success" || state === "error") && allowInput && /* @__PURE__ */
|
|
3983
|
+
!(state === "idle" && allowInput) && /* @__PURE__ */ jsx19("div", {}),
|
|
3984
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
3985
|
+
(state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx19(
|
|
3870
3986
|
"button",
|
|
3871
3987
|
{
|
|
3872
3988
|
onClick: resetCommand,
|
|
@@ -3874,7 +3990,7 @@ ${planToExecute}`;
|
|
|
3874
3990
|
children: "Reset"
|
|
3875
3991
|
}
|
|
3876
3992
|
),
|
|
3877
|
-
(state === "idle" || state === "error") && /* @__PURE__ */
|
|
3993
|
+
(state === "idle" || state === "error") && /* @__PURE__ */ jsx19(
|
|
3878
3994
|
"button",
|
|
3879
3995
|
{
|
|
3880
3996
|
onClick: () => executeCommand(),
|
|
@@ -3890,29 +4006,29 @@ ${planToExecute}`;
|
|
|
3890
4006
|
!command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
|
|
3891
4007
|
),
|
|
3892
4008
|
title: state === "error" ? "Retry" : "Execute",
|
|
3893
|
-
children: state === "error" ? /* @__PURE__ */
|
|
4009
|
+
children: state === "error" ? /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3894
4010
|
}
|
|
3895
4011
|
)
|
|
3896
4012
|
] })
|
|
3897
4013
|
] }),
|
|
3898
|
-
showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */
|
|
3899
|
-
/* @__PURE__ */
|
|
3900
|
-
/* @__PURE__ */
|
|
3901
|
-
/* @__PURE__ */
|
|
3902
|
-
/* @__PURE__ */
|
|
4014
|
+
showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx19("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs15("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
|
|
4015
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
|
|
4016
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3", children: [
|
|
4017
|
+
/* @__PURE__ */ jsx19("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
|
|
4018
|
+
/* @__PURE__ */ jsx19("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
|
|
3903
4019
|
] }),
|
|
3904
|
-
/* @__PURE__ */
|
|
4020
|
+
/* @__PURE__ */ jsx19(
|
|
3905
4021
|
"button",
|
|
3906
4022
|
{
|
|
3907
4023
|
onClick: () => setShowPlanDetails(false),
|
|
3908
4024
|
className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
|
|
3909
|
-
children: /* @__PURE__ */
|
|
4025
|
+
children: /* @__PURE__ */ jsx19("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
3910
4026
|
}
|
|
3911
4027
|
)
|
|
3912
4028
|
] }),
|
|
3913
|
-
/* @__PURE__ */
|
|
3914
|
-
/* @__PURE__ */
|
|
3915
|
-
/* @__PURE__ */
|
|
4029
|
+
/* @__PURE__ */ jsx19("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx19("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx19("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
|
|
4030
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
|
|
4031
|
+
/* @__PURE__ */ jsx19(
|
|
3916
4032
|
"button",
|
|
3917
4033
|
{
|
|
3918
4034
|
onClick: rejectPlan,
|
|
@@ -3920,7 +4036,7 @@ ${planToExecute}`;
|
|
|
3920
4036
|
children: "Modify Command"
|
|
3921
4037
|
}
|
|
3922
4038
|
),
|
|
3923
|
-
/* @__PURE__ */
|
|
4039
|
+
/* @__PURE__ */ jsx19(
|
|
3924
4040
|
"button",
|
|
3925
4041
|
{
|
|
3926
4042
|
onClick: approvePlan,
|
|
@@ -3930,7 +4046,7 @@ ${planToExecute}`;
|
|
|
3930
4046
|
)
|
|
3931
4047
|
] })
|
|
3932
4048
|
] }) }),
|
|
3933
|
-
/* @__PURE__ */
|
|
4049
|
+
/* @__PURE__ */ jsx19(
|
|
3934
4050
|
"input",
|
|
3935
4051
|
{
|
|
3936
4052
|
ref: fileInputRef,
|
|
@@ -3941,7 +4057,7 @@ ${planToExecute}`;
|
|
|
3941
4057
|
accept: "image/*,application/pdf,.doc,.docx,.txt"
|
|
3942
4058
|
}
|
|
3943
4059
|
),
|
|
3944
|
-
/* @__PURE__ */
|
|
4060
|
+
/* @__PURE__ */ jsx19("style", { dangerouslySetInnerHTML: {
|
|
3945
4061
|
__html: `
|
|
3946
4062
|
@keyframes pulse-border {
|
|
3947
4063
|
0%, 100% {
|
|
@@ -3962,8 +4078,8 @@ ${planToExecute}`;
|
|
|
3962
4078
|
}
|
|
3963
4079
|
|
|
3964
4080
|
// src/components/Prompt/Prompt.tsx
|
|
3965
|
-
import { useState as
|
|
3966
|
-
import { jsx as
|
|
4081
|
+
import { useState as useState7 } from "react";
|
|
4082
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3967
4083
|
function Prompt({
|
|
3968
4084
|
agentId,
|
|
3969
4085
|
placeholder = "Enter your prompt...",
|
|
@@ -3980,9 +4096,9 @@ function Prompt({
|
|
|
3980
4096
|
showSuggestions = false,
|
|
3981
4097
|
className
|
|
3982
4098
|
}) {
|
|
3983
|
-
const [value, setValue] =
|
|
3984
|
-
const [isLoading, setIsLoading] =
|
|
3985
|
-
const [suggestions] =
|
|
4099
|
+
const [value, setValue] = useState7(initialValue);
|
|
4100
|
+
const [isLoading, setIsLoading] = useState7(false);
|
|
4101
|
+
const [suggestions] = useState7(["Plan a trip", "Write a description", "Analyze data"]);
|
|
3986
4102
|
const handleChange = (e) => {
|
|
3987
4103
|
const newValue = e.target.value;
|
|
3988
4104
|
if (!maxLength || newValue.length <= maxLength) {
|
|
@@ -4025,9 +4141,9 @@ function Prompt({
|
|
|
4025
4141
|
handleSubmit();
|
|
4026
4142
|
}
|
|
4027
4143
|
};
|
|
4028
|
-
return /* @__PURE__ */
|
|
4029
|
-
/* @__PURE__ */
|
|
4030
|
-
/* @__PURE__ */
|
|
4144
|
+
return /* @__PURE__ */ jsxs16("div", { className: cn("space-y-2", className), children: [
|
|
4145
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
|
|
4146
|
+
/* @__PURE__ */ jsx20(
|
|
4031
4147
|
"input",
|
|
4032
4148
|
{
|
|
4033
4149
|
type: "text",
|
|
@@ -4040,7 +4156,7 @@ function Prompt({
|
|
|
4040
4156
|
className: "flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
|
|
4041
4157
|
}
|
|
4042
4158
|
),
|
|
4043
|
-
submitOn === "button" && /* @__PURE__ */
|
|
4159
|
+
submitOn === "button" && /* @__PURE__ */ jsx20(
|
|
4044
4160
|
"button",
|
|
4045
4161
|
{
|
|
4046
4162
|
onClick: handleSubmit,
|
|
@@ -4050,13 +4166,13 @@ function Prompt({
|
|
|
4050
4166
|
}
|
|
4051
4167
|
)
|
|
4052
4168
|
] }),
|
|
4053
|
-
maxLength && /* @__PURE__ */
|
|
4169
|
+
maxLength && /* @__PURE__ */ jsxs16("p", { className: "text-xs text-neutral-500", children: [
|
|
4054
4170
|
value.length,
|
|
4055
4171
|
" / ",
|
|
4056
4172
|
maxLength,
|
|
4057
4173
|
" characters"
|
|
4058
4174
|
] }),
|
|
4059
|
-
showSuggestions && !value && /* @__PURE__ */
|
|
4175
|
+
showSuggestions && !value && /* @__PURE__ */ jsx20("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx20(
|
|
4060
4176
|
"button",
|
|
4061
4177
|
{
|
|
4062
4178
|
onClick: () => setValue(suggestion),
|
|
@@ -4065,16 +4181,16 @@ function Prompt({
|
|
|
4065
4181
|
},
|
|
4066
4182
|
idx
|
|
4067
4183
|
)) }),
|
|
4068
|
-
isLoading && /* @__PURE__ */
|
|
4069
|
-
/* @__PURE__ */
|
|
4070
|
-
/* @__PURE__ */
|
|
4184
|
+
isLoading && /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
|
|
4185
|
+
/* @__PURE__ */ jsx20("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
|
|
4186
|
+
/* @__PURE__ */ jsx20("span", { children: "AI is processing your request..." })
|
|
4071
4187
|
] })
|
|
4072
4188
|
] });
|
|
4073
4189
|
}
|
|
4074
4190
|
|
|
4075
4191
|
// src/components/Stream/Stream.tsx
|
|
4076
|
-
import { useState as
|
|
4077
|
-
import { jsx as
|
|
4192
|
+
import { useState as useState8, useEffect as useEffect6 } from "react";
|
|
4193
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4078
4194
|
function Stream({
|
|
4079
4195
|
agentId,
|
|
4080
4196
|
prompt,
|
|
@@ -4090,9 +4206,9 @@ function Stream({
|
|
|
4090
4206
|
typingSpeed = 30,
|
|
4091
4207
|
className
|
|
4092
4208
|
}) {
|
|
4093
|
-
const [text, setText] =
|
|
4094
|
-
const [isStreaming, setIsStreaming] =
|
|
4095
|
-
const [isComplete, setIsComplete] =
|
|
4209
|
+
const [text, setText] = useState8("");
|
|
4210
|
+
const [isStreaming, setIsStreaming] = useState8(false);
|
|
4211
|
+
const [isComplete, setIsComplete] = useState8(false);
|
|
4096
4212
|
useEffect6(() => {
|
|
4097
4213
|
if (autoStart && !isStreaming && !isComplete) {
|
|
4098
4214
|
startStreaming();
|
|
@@ -4154,7 +4270,7 @@ function Stream({
|
|
|
4154
4270
|
plain: "text-neutral-900 dark:text-neutral-100"
|
|
4155
4271
|
};
|
|
4156
4272
|
if (!isStreaming && !isComplete) {
|
|
4157
|
-
return /* @__PURE__ */
|
|
4273
|
+
return /* @__PURE__ */ jsx21("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx21(
|
|
4158
4274
|
"button",
|
|
4159
4275
|
{
|
|
4160
4276
|
onClick: startStreaming,
|
|
@@ -4163,19 +4279,19 @@ function Stream({
|
|
|
4163
4279
|
}
|
|
4164
4280
|
) });
|
|
4165
4281
|
}
|
|
4166
|
-
return /* @__PURE__ */
|
|
4282
|
+
return /* @__PURE__ */ jsxs17("div", { className: cn(variantClasses[variant], className), children: [
|
|
4167
4283
|
text,
|
|
4168
|
-
isStreaming && showCursor && /* @__PURE__ */
|
|
4284
|
+
isStreaming && showCursor && /* @__PURE__ */ jsx21("span", { className: "apteva-stream-cursor" })
|
|
4169
4285
|
] });
|
|
4170
4286
|
}
|
|
4171
4287
|
|
|
4172
4288
|
// src/components/Threads/ThreadList.tsx
|
|
4173
|
-
import { useState as
|
|
4289
|
+
import { useState as useState9 } from "react";
|
|
4174
4290
|
|
|
4175
4291
|
// src/components/Threads/ThreadItem.tsx
|
|
4176
|
-
import { jsx as
|
|
4292
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4177
4293
|
function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
|
|
4178
|
-
return /* @__PURE__ */
|
|
4294
|
+
return /* @__PURE__ */ jsxs18(
|
|
4179
4295
|
"div",
|
|
4180
4296
|
{
|
|
4181
4297
|
className: cn("apteva-thread-item", {
|
|
@@ -4183,19 +4299,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
|
|
|
4183
4299
|
}),
|
|
4184
4300
|
onClick: onSelect,
|
|
4185
4301
|
children: [
|
|
4186
|
-
/* @__PURE__ */
|
|
4187
|
-
/* @__PURE__ */
|
|
4188
|
-
thread.preview && /* @__PURE__ */
|
|
4189
|
-
/* @__PURE__ */
|
|
4190
|
-
/* @__PURE__ */
|
|
4302
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex-1 min-w-0", children: [
|
|
4303
|
+
/* @__PURE__ */ jsx22("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
|
|
4304
|
+
thread.preview && /* @__PURE__ */ jsx22("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
|
|
4305
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
|
|
4306
|
+
/* @__PURE__ */ jsxs18("span", { children: [
|
|
4191
4307
|
thread.messageCount,
|
|
4192
4308
|
" messages"
|
|
4193
4309
|
] }),
|
|
4194
|
-
/* @__PURE__ */
|
|
4195
|
-
/* @__PURE__ */
|
|
4310
|
+
/* @__PURE__ */ jsx22("span", { children: "\u2022" }),
|
|
4311
|
+
/* @__PURE__ */ jsx22("span", { children: formatRelativeTime(thread.updatedAt) })
|
|
4196
4312
|
] })
|
|
4197
4313
|
] }),
|
|
4198
|
-
onDelete && /* @__PURE__ */
|
|
4314
|
+
onDelete && /* @__PURE__ */ jsx22(
|
|
4199
4315
|
"button",
|
|
4200
4316
|
{
|
|
4201
4317
|
onClick: (e) => {
|
|
@@ -4225,7 +4341,7 @@ function formatRelativeTime(date) {
|
|
|
4225
4341
|
}
|
|
4226
4342
|
|
|
4227
4343
|
// src/components/Threads/ThreadList.tsx
|
|
4228
|
-
import { jsx as
|
|
4344
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4229
4345
|
function ThreadList({
|
|
4230
4346
|
threads,
|
|
4231
4347
|
currentThreadId,
|
|
@@ -4234,13 +4350,13 @@ function ThreadList({
|
|
|
4234
4350
|
showSearch = false,
|
|
4235
4351
|
groupBy = "none"
|
|
4236
4352
|
}) {
|
|
4237
|
-
const [searchQuery, setSearchQuery] =
|
|
4353
|
+
const [searchQuery, setSearchQuery] = useState9("");
|
|
4238
4354
|
const filteredThreads = threads.filter(
|
|
4239
4355
|
(thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
|
|
4240
4356
|
);
|
|
4241
4357
|
const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
|
|
4242
|
-
return /* @__PURE__ */
|
|
4243
|
-
showSearch && /* @__PURE__ */
|
|
4358
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col h-full", children: [
|
|
4359
|
+
showSearch && /* @__PURE__ */ jsx23("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx23(
|
|
4244
4360
|
"input",
|
|
4245
4361
|
{
|
|
4246
4362
|
type: "text",
|
|
@@ -4250,10 +4366,10 @@ function ThreadList({
|
|
|
4250
4366
|
className: "w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
|
|
4251
4367
|
}
|
|
4252
4368
|
) }),
|
|
4253
|
-
/* @__PURE__ */
|
|
4254
|
-
Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */
|
|
4255
|
-
groupBy !== "none" && /* @__PURE__ */
|
|
4256
|
-
groupThreads.map((thread) => /* @__PURE__ */
|
|
4369
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-y-auto", children: [
|
|
4370
|
+
Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs19("div", { children: [
|
|
4371
|
+
groupBy !== "none" && /* @__PURE__ */ jsx23("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
|
|
4372
|
+
groupThreads.map((thread) => /* @__PURE__ */ jsx23(
|
|
4257
4373
|
ThreadItem,
|
|
4258
4374
|
{
|
|
4259
4375
|
thread,
|
|
@@ -4264,9 +4380,9 @@ function ThreadList({
|
|
|
4264
4380
|
thread.id
|
|
4265
4381
|
))
|
|
4266
4382
|
] }, group)),
|
|
4267
|
-
filteredThreads.length === 0 && /* @__PURE__ */
|
|
4268
|
-
/* @__PURE__ */
|
|
4269
|
-
/* @__PURE__ */
|
|
4383
|
+
filteredThreads.length === 0 && /* @__PURE__ */ jsxs19("div", { className: "p-8 text-center text-neutral-500", children: [
|
|
4384
|
+
/* @__PURE__ */ jsx23("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
|
|
4385
|
+
/* @__PURE__ */ jsx23("p", { children: "No conversations found" })
|
|
4270
4386
|
] })
|
|
4271
4387
|
] })
|
|
4272
4388
|
] });
|
|
@@ -4298,7 +4414,7 @@ function groupThreadsByDate(threads) {
|
|
|
4298
4414
|
}
|
|
4299
4415
|
|
|
4300
4416
|
// src/components/Threads/Threads.tsx
|
|
4301
|
-
import { jsx as
|
|
4417
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4302
4418
|
function Threads({
|
|
4303
4419
|
threads,
|
|
4304
4420
|
currentThreadId,
|
|
@@ -4317,8 +4433,8 @@ function Threads({
|
|
|
4317
4433
|
tabs: "flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto"
|
|
4318
4434
|
};
|
|
4319
4435
|
if (variant === "tabs") {
|
|
4320
|
-
return /* @__PURE__ */
|
|
4321
|
-
threads.slice(0, 5).map((thread) => /* @__PURE__ */
|
|
4436
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn(variantClasses[variant], className), children: [
|
|
4437
|
+
threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx24(
|
|
4322
4438
|
"button",
|
|
4323
4439
|
{
|
|
4324
4440
|
onClick: () => onThreadSelect?.(thread.id),
|
|
@@ -4330,7 +4446,7 @@ function Threads({
|
|
|
4330
4446
|
},
|
|
4331
4447
|
thread.id
|
|
4332
4448
|
)),
|
|
4333
|
-
showNewButton && onNewThread && /* @__PURE__ */
|
|
4449
|
+
showNewButton && onNewThread && /* @__PURE__ */ jsx24(
|
|
4334
4450
|
"button",
|
|
4335
4451
|
{
|
|
4336
4452
|
onClick: onNewThread,
|
|
@@ -4340,8 +4456,8 @@ function Threads({
|
|
|
4340
4456
|
)
|
|
4341
4457
|
] });
|
|
4342
4458
|
}
|
|
4343
|
-
return /* @__PURE__ */
|
|
4344
|
-
showNewButton && onNewThread && /* @__PURE__ */
|
|
4459
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
|
|
4460
|
+
showNewButton && onNewThread && /* @__PURE__ */ jsx24("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx24(
|
|
4345
4461
|
"button",
|
|
4346
4462
|
{
|
|
4347
4463
|
onClick: onNewThread,
|
|
@@ -4349,7 +4465,7 @@ function Threads({
|
|
|
4349
4465
|
children: "+ New Conversation"
|
|
4350
4466
|
}
|
|
4351
4467
|
) }),
|
|
4352
|
-
/* @__PURE__ */
|
|
4468
|
+
/* @__PURE__ */ jsx24(
|
|
4353
4469
|
ThreadList,
|
|
4354
4470
|
{
|
|
4355
4471
|
threads,
|