@apteva/apteva-kit 0.1.58 → 0.1.60
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 +200 -79
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +594 -473
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +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,157 @@ 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 = cn(
|
|
944
|
+
"w-full px-3 py-2 rounded-lg border transition-colors",
|
|
945
|
+
"border-neutral-300 dark:border-neutral-600",
|
|
946
|
+
"bg-white dark:bg-neutral-800",
|
|
947
|
+
"text-neutral-900 dark:text-neutral-100",
|
|
948
|
+
"placeholder-neutral-400 dark:placeholder-neutral-500",
|
|
949
|
+
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
950
|
+
);
|
|
951
|
+
switch (field.type) {
|
|
952
|
+
case "text":
|
|
953
|
+
case "password":
|
|
954
|
+
case "number":
|
|
955
|
+
case "date":
|
|
956
|
+
return /* @__PURE__ */ jsx6(
|
|
957
|
+
"input",
|
|
958
|
+
{
|
|
959
|
+
type: field.type,
|
|
960
|
+
name: field.name,
|
|
961
|
+
value: formData[field.name] || "",
|
|
962
|
+
onChange: (e) => handleChange(field.name, field.type === "number" ? Number(e.target.value) : e.target.value),
|
|
963
|
+
placeholder: field.placeholder,
|
|
964
|
+
required: field.required,
|
|
965
|
+
className: baseInputClass
|
|
966
|
+
}
|
|
967
|
+
);
|
|
968
|
+
case "textarea":
|
|
969
|
+
return /* @__PURE__ */ jsx6(
|
|
970
|
+
"textarea",
|
|
971
|
+
{
|
|
972
|
+
name: field.name,
|
|
973
|
+
value: formData[field.name] || "",
|
|
974
|
+
onChange: (e) => handleChange(field.name, e.target.value),
|
|
975
|
+
placeholder: field.placeholder,
|
|
976
|
+
required: field.required,
|
|
977
|
+
rows: 3,
|
|
978
|
+
className: baseInputClass
|
|
979
|
+
}
|
|
980
|
+
);
|
|
981
|
+
case "select":
|
|
982
|
+
return /* @__PURE__ */ jsxs4(
|
|
983
|
+
"select",
|
|
984
|
+
{
|
|
985
|
+
name: field.name,
|
|
986
|
+
value: formData[field.name] || "",
|
|
987
|
+
onChange: (e) => handleChange(field.name, e.target.value),
|
|
988
|
+
required: field.required,
|
|
989
|
+
className: baseInputClass,
|
|
990
|
+
children: [
|
|
991
|
+
/* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
|
|
992
|
+
field.options?.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt.value, children: opt.label }, opt.value))
|
|
993
|
+
]
|
|
994
|
+
}
|
|
995
|
+
);
|
|
996
|
+
case "checkbox":
|
|
997
|
+
return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 cursor-pointer", children: [
|
|
998
|
+
/* @__PURE__ */ jsx6(
|
|
999
|
+
"input",
|
|
1000
|
+
{
|
|
1001
|
+
type: "checkbox",
|
|
1002
|
+
name: field.name,
|
|
1003
|
+
checked: formData[field.name] || false,
|
|
1004
|
+
onChange: (e) => handleChange(field.name, e.target.checked),
|
|
1005
|
+
className: "w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 text-blue-500 focus:ring-blue-500"
|
|
1006
|
+
}
|
|
1007
|
+
),
|
|
1008
|
+
/* @__PURE__ */ jsx6("span", { className: "text-neutral-700 dark:text-neutral-300", children: field.label })
|
|
1009
|
+
] });
|
|
1010
|
+
default:
|
|
1011
|
+
return null;
|
|
1012
|
+
}
|
|
1013
|
+
};
|
|
1014
|
+
const submitAction = widget.actions?.find((a) => a.type === "submit") || widget.actions?.[0];
|
|
1015
|
+
return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "apteva-form rounded-lg border border-neutral-200 dark:border-neutral-700 p-4 bg-white dark:bg-neutral-800", children: [
|
|
1016
|
+
title && /* @__PURE__ */ jsx6("h3", { className: "text-base font-semibold text-neutral-900 dark:text-neutral-100 mb-4", children: title }),
|
|
1017
|
+
/* @__PURE__ */ jsx6("div", { className: "space-y-4", children: fields.map((field) => /* @__PURE__ */ jsxs4("div", { className: field.type === "checkbox" ? "" : "space-y-1", children: [
|
|
1018
|
+
field.type !== "checkbox" && /* @__PURE__ */ jsxs4("label", { className: "block text-sm font-medium text-neutral-700 dark:text-neutral-300", children: [
|
|
1019
|
+
field.label,
|
|
1020
|
+
field.required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 ml-1", children: "*" })
|
|
1021
|
+
] }),
|
|
1022
|
+
renderField(field)
|
|
1023
|
+
] }, field.name)) }),
|
|
1024
|
+
submitAction && /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsx6(
|
|
1025
|
+
"button",
|
|
1026
|
+
{
|
|
1027
|
+
type: "submit",
|
|
1028
|
+
className: "px-4 py-2 rounded-lg font-medium transition-colors bg-blue-500 text-white hover:bg-blue-600",
|
|
1029
|
+
children: submitAction.label || "Submit"
|
|
1030
|
+
}
|
|
1031
|
+
) })
|
|
1032
|
+
] });
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
// src/components/Widgets/WidgetRenderer.tsx
|
|
1036
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
918
1037
|
function WidgetRenderer({ widget, onAction }) {
|
|
919
1038
|
const renderWidget = () => {
|
|
920
1039
|
switch (widget.type) {
|
|
921
1040
|
case "card":
|
|
922
|
-
return /* @__PURE__ */
|
|
1041
|
+
return /* @__PURE__ */ jsx7(Card, { widget, onAction });
|
|
923
1042
|
case "list":
|
|
924
|
-
return /* @__PURE__ */
|
|
1043
|
+
return /* @__PURE__ */ jsx7(List, { widget, onAction });
|
|
925
1044
|
case "button":
|
|
926
|
-
return /* @__PURE__ */
|
|
1045
|
+
return /* @__PURE__ */ jsx7(Button, { widget, onAction });
|
|
927
1046
|
case "button_group":
|
|
928
|
-
return /* @__PURE__ */
|
|
1047
|
+
return /* @__PURE__ */ jsx7(ButtonGroup, { widget, onAction });
|
|
929
1048
|
case "table":
|
|
930
|
-
return /* @__PURE__ */
|
|
1049
|
+
return /* @__PURE__ */ jsx7(Table, { widget, onAction });
|
|
1050
|
+
case "form":
|
|
1051
|
+
return /* @__PURE__ */ jsx7(Form, { widget, onAction });
|
|
931
1052
|
default:
|
|
932
|
-
return /* @__PURE__ */
|
|
933
|
-
/* @__PURE__ */
|
|
1053
|
+
return /* @__PURE__ */ jsxs5("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
|
|
1054
|
+
/* @__PURE__ */ jsxs5("p", { className: "text-sm text-yellow-800", children: [
|
|
934
1055
|
"Unknown widget type: ",
|
|
935
1056
|
widget.type
|
|
936
1057
|
] }),
|
|
937
|
-
/* @__PURE__ */
|
|
1058
|
+
/* @__PURE__ */ jsx7("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
|
|
938
1059
|
] });
|
|
939
1060
|
}
|
|
940
1061
|
};
|
|
941
|
-
return /* @__PURE__ */
|
|
1062
|
+
return /* @__PURE__ */ jsx7("div", { className: "apteva-widget", children: renderWidget() });
|
|
942
1063
|
}
|
|
943
1064
|
|
|
944
1065
|
// src/components/Widgets/Widgets.tsx
|
|
945
|
-
import { jsx as
|
|
1066
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
946
1067
|
function Widgets({
|
|
947
1068
|
widgets,
|
|
948
1069
|
onAction,
|
|
@@ -967,85 +1088,85 @@ function Widgets({
|
|
|
967
1088
|
normal: "gap-4",
|
|
968
1089
|
loose: "gap-6"
|
|
969
1090
|
};
|
|
970
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ jsx8("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx8(WidgetRenderer, { widget, onAction }, widget.id)) });
|
|
971
1092
|
}
|
|
972
1093
|
|
|
973
1094
|
// src/components/Widgets/WidgetSkeleton.tsx
|
|
974
|
-
import { jsx as
|
|
1095
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
975
1096
|
function WidgetSkeleton({ type, className }) {
|
|
976
1097
|
switch (type) {
|
|
977
1098
|
case "card":
|
|
978
|
-
return /* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
981
|
-
/* @__PURE__ */
|
|
1099
|
+
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: [
|
|
1100
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
|
|
1101
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
|
|
1102
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
|
|
982
1103
|
] }) });
|
|
983
1104
|
case "list":
|
|
984
|
-
return /* @__PURE__ */
|
|
985
|
-
/* @__PURE__ */
|
|
986
|
-
/* @__PURE__ */
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
1105
|
+
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: [
|
|
1106
|
+
/* @__PURE__ */ jsx9("div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
|
|
1107
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex-1 space-y-2", children: [
|
|
1108
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
|
|
1109
|
+
/* @__PURE__ */ jsx9("div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
|
|
989
1110
|
] })
|
|
990
1111
|
] }, i)) });
|
|
991
1112
|
case "button_group":
|
|
992
|
-
return /* @__PURE__ */
|
|
993
|
-
/* @__PURE__ */
|
|
994
|
-
/* @__PURE__ */
|
|
995
|
-
/* @__PURE__ */
|
|
1113
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("apteva-widget-skeleton animate-pulse flex gap-2", className), children: [
|
|
1114
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
|
|
1115
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
|
|
1116
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
|
|
996
1117
|
] });
|
|
997
1118
|
case "form":
|
|
998
|
-
return /* @__PURE__ */
|
|
999
|
-
/* @__PURE__ */
|
|
1000
|
-
/* @__PURE__ */
|
|
1001
|
-
/* @__PURE__ */
|
|
1002
|
-
/* @__PURE__ */
|
|
1119
|
+
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: [
|
|
1120
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
|
|
1121
|
+
/* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
|
|
1122
|
+
/* @__PURE__ */ jsx9("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
|
|
1123
|
+
/* @__PURE__ */ jsx9("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
|
|
1003
1124
|
] }),
|
|
1004
|
-
/* @__PURE__ */
|
|
1125
|
+
/* @__PURE__ */ jsx9("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
|
|
1005
1126
|
] });
|
|
1006
1127
|
case "chart":
|
|
1007
|
-
return /* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1009
|
-
/* @__PURE__ */
|
|
1010
|
-
/* @__PURE__ */
|
|
1011
|
-
/* @__PURE__ */
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1128
|
+
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: [
|
|
1129
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
|
|
1130
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-end gap-2 h-32", children: [
|
|
1131
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
|
|
1132
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
|
|
1133
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
|
|
1134
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
|
|
1135
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
|
|
1015
1136
|
] })
|
|
1016
1137
|
] });
|
|
1017
1138
|
case "image":
|
|
1018
|
-
return /* @__PURE__ */
|
|
1139
|
+
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
1140
|
case "gallery":
|
|
1020
|
-
return /* @__PURE__ */
|
|
1141
|
+
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
1142
|
case "map":
|
|
1022
|
-
return /* @__PURE__ */
|
|
1023
|
-
/* @__PURE__ */
|
|
1024
|
-
/* @__PURE__ */
|
|
1143
|
+
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: [
|
|
1144
|
+
/* @__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" }),
|
|
1145
|
+
/* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1025
1146
|
] }) }) });
|
|
1026
1147
|
case "table":
|
|
1027
|
-
return /* @__PURE__ */
|
|
1028
|
-
/* @__PURE__ */
|
|
1029
|
-
/* @__PURE__ */
|
|
1030
|
-
/* @__PURE__ */
|
|
1031
|
-
/* @__PURE__ */
|
|
1148
|
+
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: [
|
|
1149
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
|
|
1150
|
+
/* @__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" }) }),
|
|
1151
|
+
/* @__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" }) }),
|
|
1152
|
+
/* @__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
1153
|
] }),
|
|
1033
|
-
[1, 2, 3].map((i) => /* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1035
|
-
/* @__PURE__ */
|
|
1036
|
-
/* @__PURE__ */
|
|
1154
|
+
[1, 2, 3].map((i) => /* @__PURE__ */ jsxs6("div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
|
|
1155
|
+
/* @__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" }) }),
|
|
1156
|
+
/* @__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" }) }),
|
|
1157
|
+
/* @__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
1158
|
] }, i))
|
|
1038
1159
|
] });
|
|
1039
1160
|
default:
|
|
1040
|
-
return /* @__PURE__ */
|
|
1041
|
-
/* @__PURE__ */
|
|
1042
|
-
/* @__PURE__ */
|
|
1161
|
+
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: [
|
|
1162
|
+
/* @__PURE__ */ jsx9("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
|
|
1163
|
+
/* @__PURE__ */ jsx9("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
|
|
1043
1164
|
] });
|
|
1044
1165
|
}
|
|
1045
1166
|
}
|
|
1046
1167
|
|
|
1047
1168
|
// src/components/Chat/MarkdownContent.tsx
|
|
1048
|
-
import { jsx as
|
|
1169
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1049
1170
|
function isImageUrl(url) {
|
|
1050
1171
|
const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
|
|
1051
1172
|
return imageExtensions.test(url);
|
|
@@ -1064,7 +1185,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1064
1185
|
const alt = match[1] || "";
|
|
1065
1186
|
const src = match[2];
|
|
1066
1187
|
result.push(
|
|
1067
|
-
/* @__PURE__ */
|
|
1188
|
+
/* @__PURE__ */ jsx10(
|
|
1068
1189
|
"img",
|
|
1069
1190
|
{
|
|
1070
1191
|
src,
|
|
@@ -1079,7 +1200,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1079
1200
|
const href = match[4];
|
|
1080
1201
|
if (isImageUrl(href)) {
|
|
1081
1202
|
result.push(
|
|
1082
|
-
/* @__PURE__ */
|
|
1203
|
+
/* @__PURE__ */ jsx10(
|
|
1083
1204
|
"img",
|
|
1084
1205
|
{
|
|
1085
1206
|
src: href,
|
|
@@ -1091,7 +1212,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1091
1212
|
);
|
|
1092
1213
|
} else {
|
|
1093
1214
|
result.push(
|
|
1094
|
-
/* @__PURE__ */
|
|
1215
|
+
/* @__PURE__ */ jsx10(
|
|
1095
1216
|
"a",
|
|
1096
1217
|
{
|
|
1097
1218
|
href,
|
|
@@ -1105,10 +1226,10 @@ function parseInlineMarkdown(text, keyPrefix = "") {
|
|
|
1105
1226
|
);
|
|
1106
1227
|
}
|
|
1107
1228
|
} else if (match[5] !== void 0) {
|
|
1108
|
-
result.push(/* @__PURE__ */
|
|
1229
|
+
result.push(/* @__PURE__ */ jsx10("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
|
|
1109
1230
|
} else if (match[7] !== void 0) {
|
|
1110
1231
|
result.push(
|
|
1111
|
-
/* @__PURE__ */
|
|
1232
|
+
/* @__PURE__ */ jsx10("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
|
|
1112
1233
|
);
|
|
1113
1234
|
}
|
|
1114
1235
|
lastIndex = match.index + match[0].length;
|
|
@@ -1128,7 +1249,7 @@ function parseMarkdown(content) {
|
|
|
1128
1249
|
const h2Match = line.match(/^##\s+(.*)$/);
|
|
1129
1250
|
if (h2Match) {
|
|
1130
1251
|
result.push(
|
|
1131
|
-
/* @__PURE__ */
|
|
1252
|
+
/* @__PURE__ */ jsx10("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
|
|
1132
1253
|
);
|
|
1133
1254
|
i++;
|
|
1134
1255
|
continue;
|
|
@@ -1136,7 +1257,7 @@ function parseMarkdown(content) {
|
|
|
1136
1257
|
const h3Match = line.match(/^###\s+(.*)$/);
|
|
1137
1258
|
if (h3Match) {
|
|
1138
1259
|
result.push(
|
|
1139
|
-
/* @__PURE__ */
|
|
1260
|
+
/* @__PURE__ */ jsx10("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
|
|
1140
1261
|
);
|
|
1141
1262
|
i++;
|
|
1142
1263
|
continue;
|
|
@@ -1149,7 +1270,7 @@ function parseMarkdown(content) {
|
|
|
1149
1270
|
const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
|
|
1150
1271
|
if (itemMatch && itemMatch[1].length === indent) {
|
|
1151
1272
|
listItems.push(
|
|
1152
|
-
/* @__PURE__ */
|
|
1273
|
+
/* @__PURE__ */ jsx10("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
|
|
1153
1274
|
);
|
|
1154
1275
|
i++;
|
|
1155
1276
|
} else {
|
|
@@ -1157,7 +1278,7 @@ function parseMarkdown(content) {
|
|
|
1157
1278
|
}
|
|
1158
1279
|
}
|
|
1159
1280
|
result.push(
|
|
1160
|
-
/* @__PURE__ */
|
|
1281
|
+
/* @__PURE__ */ jsx10("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
|
|
1161
1282
|
);
|
|
1162
1283
|
continue;
|
|
1163
1284
|
}
|
|
@@ -1169,7 +1290,7 @@ function parseMarkdown(content) {
|
|
|
1169
1290
|
const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
|
|
1170
1291
|
if (itemMatch && itemMatch[1].length === indent) {
|
|
1171
1292
|
listItems.push(
|
|
1172
|
-
/* @__PURE__ */
|
|
1293
|
+
/* @__PURE__ */ jsx10("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
|
|
1173
1294
|
);
|
|
1174
1295
|
i++;
|
|
1175
1296
|
} else {
|
|
@@ -1177,7 +1298,7 @@ function parseMarkdown(content) {
|
|
|
1177
1298
|
}
|
|
1178
1299
|
}
|
|
1179
1300
|
result.push(
|
|
1180
|
-
/* @__PURE__ */
|
|
1301
|
+
/* @__PURE__ */ jsx10("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
|
|
1181
1302
|
);
|
|
1182
1303
|
continue;
|
|
1183
1304
|
}
|
|
@@ -1200,19 +1321,19 @@ function parseMarkdown(content) {
|
|
|
1200
1321
|
}
|
|
1201
1322
|
}
|
|
1202
1323
|
result.push(
|
|
1203
|
-
/* @__PURE__ */
|
|
1204
|
-
/* @__PURE__ */
|
|
1205
|
-
/* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ jsx10("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs7("table", { className: "apteva-md-table", children: [
|
|
1325
|
+
/* @__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}`)) }) }),
|
|
1326
|
+
/* @__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
1327
|
] }) }, `table-wrapper${key++}`)
|
|
1207
1328
|
);
|
|
1208
1329
|
continue;
|
|
1209
1330
|
}
|
|
1210
1331
|
}
|
|
1211
1332
|
if (line === "") {
|
|
1212
|
-
result.push(/* @__PURE__ */
|
|
1333
|
+
result.push(/* @__PURE__ */ jsx10("br", {}, `br${key++}`));
|
|
1213
1334
|
} else {
|
|
1214
1335
|
result.push(
|
|
1215
|
-
/* @__PURE__ */
|
|
1336
|
+
/* @__PURE__ */ jsxs7("span", { children: [
|
|
1216
1337
|
parseInlineMarkdown(line, `${key}`),
|
|
1217
1338
|
i < lines.length - 1 ? "\n" : ""
|
|
1218
1339
|
] }, `p${key++}`)
|
|
@@ -1223,30 +1344,30 @@ function parseMarkdown(content) {
|
|
|
1223
1344
|
return result;
|
|
1224
1345
|
}
|
|
1225
1346
|
function MarkdownContent({ content, className = "" }) {
|
|
1226
|
-
return /* @__PURE__ */
|
|
1347
|
+
return /* @__PURE__ */ jsx10("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
|
|
1227
1348
|
}
|
|
1228
1349
|
|
|
1229
1350
|
// src/components/Chat/ToolCall.tsx
|
|
1230
|
-
import { jsx as
|
|
1351
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1231
1352
|
function ToolCall({ name, status }) {
|
|
1232
1353
|
if (status === "running") {
|
|
1233
|
-
return /* @__PURE__ */
|
|
1234
|
-
/* @__PURE__ */
|
|
1235
|
-
/* @__PURE__ */
|
|
1236
|
-
/* @__PURE__ */
|
|
1354
|
+
return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
|
|
1355
|
+
/* @__PURE__ */ jsxs8("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
|
|
1356
|
+
/* @__PURE__ */ jsx11("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
1357
|
+
/* @__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
1358
|
] }),
|
|
1238
|
-
/* @__PURE__ */
|
|
1359
|
+
/* @__PURE__ */ jsx11("span", { className: "apteva-tool-label", children: name })
|
|
1239
1360
|
] });
|
|
1240
1361
|
}
|
|
1241
1362
|
if (status === "completed") {
|
|
1242
|
-
return /* @__PURE__ */
|
|
1243
|
-
/* @__PURE__ */
|
|
1244
|
-
/* @__PURE__ */
|
|
1363
|
+
return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-completed", 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: "M5 13l4 4L19 7" }) }),
|
|
1365
|
+
/* @__PURE__ */ jsx11("span", { className: "apteva-tool-label", children: name })
|
|
1245
1366
|
] });
|
|
1246
1367
|
}
|
|
1247
|
-
return /* @__PURE__ */
|
|
1248
|
-
/* @__PURE__ */
|
|
1249
|
-
/* @__PURE__ */
|
|
1368
|
+
return /* @__PURE__ */ jsxs8("div", { className: "apteva-tool-card apteva-tool-card-error", children: [
|
|
1369
|
+
/* @__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" }) }),
|
|
1370
|
+
/* @__PURE__ */ jsxs8("span", { className: "apteva-tool-label", children: [
|
|
1250
1371
|
name,
|
|
1251
1372
|
" failed"
|
|
1252
1373
|
] })
|
|
@@ -1254,7 +1375,7 @@ function ToolCall({ name, status }) {
|
|
|
1254
1375
|
}
|
|
1255
1376
|
|
|
1256
1377
|
// src/components/Chat/Message.tsx
|
|
1257
|
-
import { jsx as
|
|
1378
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1258
1379
|
function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
1259
1380
|
const isUser = message.role === "user";
|
|
1260
1381
|
const contentSegments = message.metadata?.content_segments;
|
|
@@ -1290,14 +1411,14 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1290
1411
|
}, [parsedWidgets, onWidgetRender]);
|
|
1291
1412
|
const renderTextContent = (text) => {
|
|
1292
1413
|
if (!enableWidgets || isUser) {
|
|
1293
|
-
return /* @__PURE__ */
|
|
1414
|
+
return /* @__PURE__ */ jsx12(MarkdownContent, { content: text });
|
|
1294
1415
|
}
|
|
1295
1416
|
const parsed = parseWidgetsFromText(text);
|
|
1296
1417
|
const cleanedText = parsed.segments.filter((seg) => seg.type === "text" && seg.content).map((seg) => seg.content).join("");
|
|
1297
1418
|
if (!cleanedText.trim()) {
|
|
1298
1419
|
return null;
|
|
1299
1420
|
}
|
|
1300
|
-
return /* @__PURE__ */
|
|
1421
|
+
return /* @__PURE__ */ jsx12(MarkdownContent, { content: cleanedText });
|
|
1301
1422
|
};
|
|
1302
1423
|
const renderContentWithWidgets = () => {
|
|
1303
1424
|
if (!enableWidgets || isUser || !message.content) {
|
|
@@ -1312,41 +1433,41 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1312
1433
|
} else if (segment.type === "widget" && segment.widget) {
|
|
1313
1434
|
if (textBuffer.trim()) {
|
|
1314
1435
|
elements.push(
|
|
1315
|
-
/* @__PURE__ */
|
|
1436
|
+
/* @__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
1437
|
);
|
|
1317
1438
|
textBuffer = "";
|
|
1318
1439
|
}
|
|
1319
1440
|
elements.push(
|
|
1320
|
-
/* @__PURE__ */
|
|
1441
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`)
|
|
1321
1442
|
);
|
|
1322
1443
|
} else if (segment.type === "widget_pending" && segment.pendingType) {
|
|
1323
1444
|
if (textBuffer.trim()) {
|
|
1324
1445
|
elements.push(
|
|
1325
|
-
/* @__PURE__ */
|
|
1446
|
+
/* @__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
1447
|
);
|
|
1327
1448
|
textBuffer = "";
|
|
1328
1449
|
}
|
|
1329
1450
|
elements.push(
|
|
1330
|
-
/* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`)
|
|
1331
1452
|
);
|
|
1332
1453
|
}
|
|
1333
1454
|
});
|
|
1334
1455
|
if (textBuffer.trim()) {
|
|
1335
1456
|
elements.push(
|
|
1336
|
-
/* @__PURE__ */
|
|
1457
|
+
/* @__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
1458
|
);
|
|
1338
1459
|
}
|
|
1339
1460
|
return elements.length > 0 ? elements : null;
|
|
1340
1461
|
};
|
|
1341
1462
|
const renderContent = () => {
|
|
1342
1463
|
if (isUser) {
|
|
1343
|
-
return /* @__PURE__ */
|
|
1464
|
+
return /* @__PURE__ */ jsx12("div", { className: "apteva-message-text", children: message.content });
|
|
1344
1465
|
}
|
|
1345
1466
|
if (isStreaming && !hasContent) {
|
|
1346
|
-
return /* @__PURE__ */
|
|
1347
|
-
/* @__PURE__ */
|
|
1348
|
-
/* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1467
|
+
return /* @__PURE__ */ jsxs9("div", { className: "apteva-typing-indicator", children: [
|
|
1468
|
+
/* @__PURE__ */ jsx12("span", {}),
|
|
1469
|
+
/* @__PURE__ */ jsx12("span", {}),
|
|
1470
|
+
/* @__PURE__ */ jsx12("span", {})
|
|
1350
1471
|
] });
|
|
1351
1472
|
}
|
|
1352
1473
|
if (contentSegments && contentSegments.length > 0) {
|
|
@@ -1356,7 +1477,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1356
1477
|
};
|
|
1357
1478
|
const renderTextSegmentWithWidgets = (text, keyPrefix) => {
|
|
1358
1479
|
if (!enableWidgets) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1480
|
+
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
1481
|
}
|
|
1361
1482
|
const parsed = parseWidgetsFromText(text);
|
|
1362
1483
|
const elements = [];
|
|
@@ -1367,28 +1488,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1367
1488
|
} else if (seg.type === "widget" && seg.widget) {
|
|
1368
1489
|
if (textBuffer.trim()) {
|
|
1369
1490
|
elements.push(
|
|
1370
|
-
/* @__PURE__ */
|
|
1491
|
+
/* @__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
1492
|
);
|
|
1372
1493
|
textBuffer = "";
|
|
1373
1494
|
}
|
|
1374
1495
|
elements.push(
|
|
1375
|
-
/* @__PURE__ */
|
|
1496
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetRenderer, { widget: seg.widget, onAction }) }, `${keyPrefix}-widget-${idx}`)
|
|
1376
1497
|
);
|
|
1377
1498
|
} else if (seg.type === "widget_pending" && seg.pendingType) {
|
|
1378
1499
|
if (textBuffer.trim()) {
|
|
1379
1500
|
elements.push(
|
|
1380
|
-
/* @__PURE__ */
|
|
1501
|
+
/* @__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
1502
|
);
|
|
1382
1503
|
textBuffer = "";
|
|
1383
1504
|
}
|
|
1384
1505
|
elements.push(
|
|
1385
|
-
/* @__PURE__ */
|
|
1506
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(WidgetSkeleton, { type: seg.pendingType }) }, `${keyPrefix}-pending-${idx}`)
|
|
1386
1507
|
);
|
|
1387
1508
|
}
|
|
1388
1509
|
});
|
|
1389
1510
|
if (textBuffer.trim()) {
|
|
1390
1511
|
elements.push(
|
|
1391
|
-
/* @__PURE__ */
|
|
1512
|
+
/* @__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
1513
|
);
|
|
1393
1514
|
}
|
|
1394
1515
|
return elements;
|
|
@@ -1408,7 +1529,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1408
1529
|
}
|
|
1409
1530
|
} else if (segment.type === "tool") {
|
|
1410
1531
|
elements.push(
|
|
1411
|
-
/* @__PURE__ */
|
|
1532
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx12(
|
|
1412
1533
|
ToolCall,
|
|
1413
1534
|
{
|
|
1414
1535
|
name: segment.name,
|
|
@@ -1421,21 +1542,21 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1421
1542
|
return elements;
|
|
1422
1543
|
};
|
|
1423
1544
|
if (!isUser && (contentSegments && contentSegments.length > 0)) {
|
|
1424
|
-
return /* @__PURE__ */
|
|
1545
|
+
return /* @__PURE__ */ jsxs9("div", { className: "apteva-message-segmented", children: [
|
|
1425
1546
|
renderSegmentedContent(),
|
|
1426
|
-
message.widgets && message.widgets.length > 0 && /* @__PURE__ */
|
|
1427
|
-
/* @__PURE__ */
|
|
1547
|
+
message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
|
|
1548
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
1428
1549
|
] });
|
|
1429
1550
|
}
|
|
1430
1551
|
const widgetContent = renderContentWithWidgets();
|
|
1431
1552
|
if (!isUser && enableWidgets && widgetContent) {
|
|
1432
|
-
return /* @__PURE__ */
|
|
1553
|
+
return /* @__PURE__ */ jsxs9("div", { className: "apteva-message-segmented", children: [
|
|
1433
1554
|
widgetContent,
|
|
1434
|
-
message.widgets && message.widgets.length > 0 && /* @__PURE__ */
|
|
1435
|
-
/* @__PURE__ */
|
|
1555
|
+
message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
|
|
1556
|
+
/* @__PURE__ */ jsx12("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
|
|
1436
1557
|
] });
|
|
1437
1558
|
}
|
|
1438
|
-
return /* @__PURE__ */
|
|
1559
|
+
return /* @__PURE__ */ jsxs9(
|
|
1439
1560
|
"div",
|
|
1440
1561
|
{
|
|
1441
1562
|
className: cn(
|
|
@@ -1443,17 +1564,17 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
|
|
|
1443
1564
|
isUser ? "apteva-message-user" : "apteva-message-assistant"
|
|
1444
1565
|
),
|
|
1445
1566
|
children: [
|
|
1446
|
-
/* @__PURE__ */
|
|
1447
|
-
message.widgets && message.widgets.length > 0 && /* @__PURE__ */
|
|
1448
|
-
/* @__PURE__ */
|
|
1567
|
+
/* @__PURE__ */ jsx12("div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
|
|
1568
|
+
message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx12(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
|
|
1569
|
+
/* @__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
1570
|
]
|
|
1450
1571
|
}
|
|
1451
1572
|
);
|
|
1452
1573
|
}
|
|
1453
1574
|
|
|
1454
1575
|
// src/components/Chat/WelcomeScreen.tsx
|
|
1455
|
-
import { jsx as
|
|
1456
|
-
var DefaultIcon = () => /* @__PURE__ */
|
|
1576
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1577
|
+
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
1578
|
"path",
|
|
1458
1579
|
{
|
|
1459
1580
|
strokeLinecap: "round",
|
|
@@ -1462,7 +1583,7 @@ var DefaultIcon = () => /* @__PURE__ */ jsx12("svg", { className: "w-12 h-12 sm:
|
|
|
1462
1583
|
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
1584
|
}
|
|
1464
1585
|
) });
|
|
1465
|
-
var ArrowIcon = () => /* @__PURE__ */
|
|
1586
|
+
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
1587
|
function WelcomeScreen({
|
|
1467
1588
|
title,
|
|
1468
1589
|
subtitle,
|
|
@@ -1477,18 +1598,18 @@ function WelcomeScreen({
|
|
|
1477
1598
|
const hasPrompts = normalizedPrompts.length > 0;
|
|
1478
1599
|
const hasHeader = title || subtitle || icon;
|
|
1479
1600
|
if (!hasHeader && !hasPrompts) {
|
|
1480
|
-
return /* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1601
|
+
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: [
|
|
1602
|
+
/* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(DefaultIcon, {}) }),
|
|
1603
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
|
|
1483
1604
|
] }) });
|
|
1484
1605
|
}
|
|
1485
1606
|
if (variant === "minimal") {
|
|
1486
|
-
return /* @__PURE__ */
|
|
1487
|
-
hasHeader && /* @__PURE__ */
|
|
1488
|
-
title && /* @__PURE__ */
|
|
1489
|
-
subtitle && /* @__PURE__ */
|
|
1607
|
+
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col h-full px-4 py-4", children: [
|
|
1608
|
+
hasHeader && /* @__PURE__ */ jsxs10("div", { className: "mb-4", children: [
|
|
1609
|
+
title && /* @__PURE__ */ jsx13("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
|
|
1610
|
+
subtitle && /* @__PURE__ */ jsx13("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
|
|
1490
1611
|
] }),
|
|
1491
|
-
hasPrompts && /* @__PURE__ */
|
|
1612
|
+
hasPrompts && /* @__PURE__ */ jsx13("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx13(
|
|
1492
1613
|
"button",
|
|
1493
1614
|
{
|
|
1494
1615
|
onClick: () => onPromptClick(prompt.text),
|
|
@@ -1501,11 +1622,11 @@ function WelcomeScreen({
|
|
|
1501
1622
|
"transition-all duration-200",
|
|
1502
1623
|
"group"
|
|
1503
1624
|
),
|
|
1504
|
-
children: /* @__PURE__ */
|
|
1505
|
-
/* @__PURE__ */
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
prompt.description && /* @__PURE__ */
|
|
1625
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
|
|
1626
|
+
/* @__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, {}) }),
|
|
1627
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
|
|
1628
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
|
|
1629
|
+
prompt.description && /* @__PURE__ */ jsx13("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
|
|
1509
1630
|
] })
|
|
1510
1631
|
] })
|
|
1511
1632
|
},
|
|
@@ -1513,14 +1634,14 @@ function WelcomeScreen({
|
|
|
1513
1634
|
)) })
|
|
1514
1635
|
] });
|
|
1515
1636
|
}
|
|
1516
|
-
return /* @__PURE__ */
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
/* @__PURE__ */
|
|
1519
|
-
title && /* @__PURE__ */
|
|
1520
|
-
subtitle && /* @__PURE__ */
|
|
1637
|
+
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
|
|
1638
|
+
/* @__PURE__ */ jsxs10("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
|
|
1639
|
+
/* @__PURE__ */ jsx13("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx13(DefaultIcon, {}) }),
|
|
1640
|
+
title && /* @__PURE__ */ jsx13("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
|
|
1641
|
+
subtitle && /* @__PURE__ */ jsx13("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
|
|
1521
1642
|
] }),
|
|
1522
|
-
hasPrompts && /* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */
|
|
1643
|
+
hasPrompts && /* @__PURE__ */ jsxs10("div", { className: "w-full max-w-2xl", children: [
|
|
1644
|
+
/* @__PURE__ */ jsx13("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx13(
|
|
1524
1645
|
"button",
|
|
1525
1646
|
{
|
|
1526
1647
|
onClick: () => onPromptClick(prompt.text),
|
|
@@ -1535,20 +1656,20 @@ function WelcomeScreen({
|
|
|
1535
1656
|
"shadow-sm hover:shadow",
|
|
1536
1657
|
"group"
|
|
1537
1658
|
),
|
|
1538
|
-
children: /* @__PURE__ */
|
|
1539
|
-
/* @__PURE__ */
|
|
1540
|
-
/* @__PURE__ */
|
|
1541
|
-
/* @__PURE__ */
|
|
1542
|
-
prompt.description && /* @__PURE__ */
|
|
1659
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
|
|
1660
|
+
/* @__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, {}) }),
|
|
1661
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
|
|
1662
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
|
|
1663
|
+
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
1664
|
] }),
|
|
1544
|
-
/* @__PURE__ */
|
|
1665
|
+
/* @__PURE__ */ jsx13(
|
|
1545
1666
|
"svg",
|
|
1546
1667
|
{
|
|
1547
1668
|
className: "w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
|
|
1548
1669
|
fill: "none",
|
|
1549
1670
|
stroke: "currentColor",
|
|
1550
1671
|
viewBox: "0 0 24 24",
|
|
1551
|
-
children: /* @__PURE__ */
|
|
1672
|
+
children: /* @__PURE__ */ jsx13(
|
|
1552
1673
|
"path",
|
|
1553
1674
|
{
|
|
1554
1675
|
strokeLinecap: "round",
|
|
@@ -1563,7 +1684,7 @@ function WelcomeScreen({
|
|
|
1563
1684
|
},
|
|
1564
1685
|
index
|
|
1565
1686
|
)) }),
|
|
1566
|
-
/* @__PURE__ */
|
|
1687
|
+
/* @__PURE__ */ jsx13("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx13(
|
|
1567
1688
|
"button",
|
|
1568
1689
|
{
|
|
1569
1690
|
onClick: () => onPromptClick(prompt.text),
|
|
@@ -1578,11 +1699,11 @@ function WelcomeScreen({
|
|
|
1578
1699
|
"transition-all duration-200",
|
|
1579
1700
|
"group"
|
|
1580
1701
|
),
|
|
1581
|
-
children: /* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
prompt.description && /* @__PURE__ */
|
|
1702
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3", children: [
|
|
1703
|
+
/* @__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, {}) }),
|
|
1704
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
|
|
1705
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
|
|
1706
|
+
prompt.description && /* @__PURE__ */ jsx13("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
|
|
1586
1707
|
] })
|
|
1587
1708
|
] })
|
|
1588
1709
|
},
|
|
@@ -1593,7 +1714,7 @@ function WelcomeScreen({
|
|
|
1593
1714
|
}
|
|
1594
1715
|
|
|
1595
1716
|
// src/components/Chat/MessageList.tsx
|
|
1596
|
-
import { jsx as
|
|
1717
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
1597
1718
|
function MessageList({
|
|
1598
1719
|
messages,
|
|
1599
1720
|
onAction,
|
|
@@ -1624,7 +1745,7 @@ function MessageList({
|
|
|
1624
1745
|
}
|
|
1625
1746
|
}
|
|
1626
1747
|
}, [messages]);
|
|
1627
|
-
return /* @__PURE__ */
|
|
1748
|
+
return /* @__PURE__ */ jsx14("div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", onScroll: handleScroll, children: messages.length === 0 ? /* @__PURE__ */ jsx14(
|
|
1628
1749
|
WelcomeScreen,
|
|
1629
1750
|
{
|
|
1630
1751
|
title: welcomeTitle,
|
|
@@ -1635,17 +1756,17 @@ function MessageList({
|
|
|
1635
1756
|
onPromptClick: onPromptClick || (() => {
|
|
1636
1757
|
})
|
|
1637
1758
|
}
|
|
1638
|
-
) : messages.map((message) => /* @__PURE__ */
|
|
1759
|
+
) : 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
1760
|
}
|
|
1640
1761
|
|
|
1641
1762
|
// src/components/Chat/Composer.tsx
|
|
1642
|
-
import { useState, useRef as useRef3 } from "react";
|
|
1643
|
-
import { Fragment, jsx as
|
|
1763
|
+
import { useState as useState2, useRef as useRef3 } from "react";
|
|
1764
|
+
import { Fragment, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1644
1765
|
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] =
|
|
1766
|
+
const [text, setText] = useState2("");
|
|
1767
|
+
const [showMenu, setShowMenu] = useState2(false);
|
|
1768
|
+
const [pendingFiles, setPendingFiles] = useState2([]);
|
|
1769
|
+
const [fileError, setFileError] = useState2(null);
|
|
1649
1770
|
const textareaRef = useRef3(null);
|
|
1650
1771
|
const fileInputRef = useRef3(null);
|
|
1651
1772
|
const menuButtonRef = useRef3(null);
|
|
@@ -1714,56 +1835,56 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1714
1835
|
};
|
|
1715
1836
|
const getFileIcon = (mimeType) => {
|
|
1716
1837
|
if (mimeType.startsWith("image/")) {
|
|
1717
|
-
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: "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
1839
|
}
|
|
1719
1840
|
if (mimeType === "application/pdf") {
|
|
1720
|
-
return /* @__PURE__ */
|
|
1841
|
+
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
1842
|
}
|
|
1722
|
-
return /* @__PURE__ */
|
|
1843
|
+
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
1844
|
};
|
|
1724
|
-
return /* @__PURE__ */
|
|
1725
|
-
fileError && /* @__PURE__ */
|
|
1726
|
-
/* @__PURE__ */
|
|
1727
|
-
/* @__PURE__ */
|
|
1845
|
+
return /* @__PURE__ */ jsxs11("div", { className: "px-4 py-3 relative", children: [
|
|
1846
|
+
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: [
|
|
1847
|
+
/* @__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" }) }),
|
|
1848
|
+
/* @__PURE__ */ jsx15("span", { children: fileError })
|
|
1728
1849
|
] }) }),
|
|
1729
|
-
pendingFiles.length > 0 && /* @__PURE__ */
|
|
1850
|
+
pendingFiles.length > 0 && /* @__PURE__ */ jsx15("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs11(
|
|
1730
1851
|
"div",
|
|
1731
1852
|
{
|
|
1732
1853
|
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
1854
|
children: [
|
|
1734
|
-
pf.preview ? /* @__PURE__ */
|
|
1735
|
-
/* @__PURE__ */
|
|
1736
|
-
/* @__PURE__ */
|
|
1737
|
-
/* @__PURE__ */
|
|
1855
|
+
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) }),
|
|
1856
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex flex-col min-w-0", children: [
|
|
1857
|
+
/* @__PURE__ */ jsx15("span", { className: "text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]", children: pf.file.name }),
|
|
1858
|
+
/* @__PURE__ */ jsx15("span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: formatFileSize(pf.file.size) })
|
|
1738
1859
|
] }),
|
|
1739
|
-
/* @__PURE__ */
|
|
1860
|
+
/* @__PURE__ */ jsx15(
|
|
1740
1861
|
"button",
|
|
1741
1862
|
{
|
|
1742
1863
|
onClick: () => removeFile(index),
|
|
1743
1864
|
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
1865
|
title: "Remove file",
|
|
1745
|
-
children: /* @__PURE__ */
|
|
1866
|
+
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
1867
|
}
|
|
1747
1868
|
)
|
|
1748
1869
|
]
|
|
1749
1870
|
},
|
|
1750
1871
|
index
|
|
1751
1872
|
)) }),
|
|
1752
|
-
/* @__PURE__ */
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
/* @__PURE__ */
|
|
1873
|
+
/* @__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: [
|
|
1874
|
+
/* @__PURE__ */ jsxs11("div", { className: "relative flex-shrink-0", children: [
|
|
1875
|
+
/* @__PURE__ */ jsx15(
|
|
1755
1876
|
"button",
|
|
1756
1877
|
{
|
|
1757
1878
|
ref: menuButtonRef,
|
|
1758
1879
|
onClick: () => setShowMenu(!showMenu),
|
|
1759
1880
|
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
1881
|
title: "More options",
|
|
1761
|
-
children: /* @__PURE__ */
|
|
1882
|
+
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
1883
|
}
|
|
1763
1884
|
),
|
|
1764
|
-
showMenu && /* @__PURE__ */
|
|
1765
|
-
/* @__PURE__ */
|
|
1766
|
-
/* @__PURE__ */
|
|
1885
|
+
showMenu && /* @__PURE__ */ jsxs11(Fragment, { children: [
|
|
1886
|
+
/* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
|
|
1887
|
+
/* @__PURE__ */ jsxs11(
|
|
1767
1888
|
"div",
|
|
1768
1889
|
{
|
|
1769
1890
|
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 +1893,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1772
1893
|
top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
|
|
1773
1894
|
},
|
|
1774
1895
|
children: [
|
|
1775
|
-
/* @__PURE__ */
|
|
1896
|
+
/* @__PURE__ */ jsxs11(
|
|
1776
1897
|
"button",
|
|
1777
1898
|
{
|
|
1778
1899
|
onClick: () => {
|
|
@@ -1781,12 +1902,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1781
1902
|
},
|
|
1782
1903
|
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
1904
|
children: [
|
|
1784
|
-
/* @__PURE__ */
|
|
1785
|
-
/* @__PURE__ */
|
|
1905
|
+
/* @__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)" }) }),
|
|
1906
|
+
/* @__PURE__ */ jsx15("span", { className: "!text-sm font-medium", children: "Add photos & files" })
|
|
1786
1907
|
]
|
|
1787
1908
|
}
|
|
1788
1909
|
),
|
|
1789
|
-
onSwitchMode && /* @__PURE__ */
|
|
1910
|
+
onSwitchMode && /* @__PURE__ */ jsxs11(
|
|
1790
1911
|
"button",
|
|
1791
1912
|
{
|
|
1792
1913
|
onClick: () => {
|
|
@@ -1795,8 +1916,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1795
1916
|
},
|
|
1796
1917
|
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
1918
|
children: [
|
|
1798
|
-
/* @__PURE__ */
|
|
1799
|
-
/* @__PURE__ */
|
|
1919
|
+
/* @__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" }) }),
|
|
1920
|
+
/* @__PURE__ */ jsx15("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
|
|
1800
1921
|
]
|
|
1801
1922
|
}
|
|
1802
1923
|
)
|
|
@@ -1805,7 +1926,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1805
1926
|
)
|
|
1806
1927
|
] })
|
|
1807
1928
|
] }),
|
|
1808
|
-
/* @__PURE__ */
|
|
1929
|
+
/* @__PURE__ */ jsx15(
|
|
1809
1930
|
"textarea",
|
|
1810
1931
|
{
|
|
1811
1932
|
ref: textareaRef,
|
|
@@ -1819,26 +1940,26 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1819
1940
|
style: { maxHeight: "120px" }
|
|
1820
1941
|
}
|
|
1821
1942
|
),
|
|
1822
|
-
isLoading && onStop ? /* @__PURE__ */
|
|
1943
|
+
isLoading && onStop ? /* @__PURE__ */ jsx15(
|
|
1823
1944
|
"button",
|
|
1824
1945
|
{
|
|
1825
1946
|
onClick: onStop,
|
|
1826
1947
|
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
1948
|
title: "Stop generation",
|
|
1828
|
-
children: /* @__PURE__ */
|
|
1949
|
+
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
1950
|
}
|
|
1830
|
-
) : /* @__PURE__ */
|
|
1951
|
+
) : /* @__PURE__ */ jsx15(
|
|
1831
1952
|
"button",
|
|
1832
1953
|
{
|
|
1833
1954
|
onClick: handleSend,
|
|
1834
1955
|
disabled: !text.trim() && pendingFiles.length === 0 || disabled,
|
|
1835
1956
|
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
1957
|
title: "Send message",
|
|
1837
|
-
children: /* @__PURE__ */
|
|
1958
|
+
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
1959
|
}
|
|
1839
1960
|
)
|
|
1840
1961
|
] }),
|
|
1841
|
-
/* @__PURE__ */
|
|
1962
|
+
/* @__PURE__ */ jsx15(
|
|
1842
1963
|
"input",
|
|
1843
1964
|
{
|
|
1844
1965
|
ref: fileInputRef,
|
|
@@ -1853,8 +1974,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
|
|
|
1853
1974
|
}
|
|
1854
1975
|
|
|
1855
1976
|
// src/components/Chat/CommandComposer.tsx
|
|
1856
|
-
import { useState as
|
|
1857
|
-
import { Fragment as Fragment2, jsx as
|
|
1977
|
+
import { useState as useState3, useRef as useRef4 } from "react";
|
|
1978
|
+
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1858
1979
|
function CommandComposer({
|
|
1859
1980
|
onExecute,
|
|
1860
1981
|
state,
|
|
@@ -1871,10 +1992,10 @@ function CommandComposer({
|
|
|
1871
1992
|
placeholder = "Enter your command...",
|
|
1872
1993
|
disabled = false
|
|
1873
1994
|
}) {
|
|
1874
|
-
const [input, setInput] =
|
|
1875
|
-
const [pendingFiles, setPendingFiles] =
|
|
1876
|
-
const [fileError, setFileError] =
|
|
1877
|
-
const [showMenu, setShowMenu] =
|
|
1995
|
+
const [input, setInput] = useState3("");
|
|
1996
|
+
const [pendingFiles, setPendingFiles] = useState3([]);
|
|
1997
|
+
const [fileError, setFileError] = useState3(null);
|
|
1998
|
+
const [showMenu, setShowMenu] = useState3(false);
|
|
1878
1999
|
const inputRef = useRef4(null);
|
|
1879
2000
|
const fileInputRef = useRef4(null);
|
|
1880
2001
|
const menuButtonRef = useRef4(null);
|
|
@@ -1944,12 +2065,12 @@ function CommandComposer({
|
|
|
1944
2065
|
};
|
|
1945
2066
|
const getFileIcon = (mimeType) => {
|
|
1946
2067
|
if (mimeType.startsWith("image/")) {
|
|
1947
|
-
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: "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
2069
|
}
|
|
1949
2070
|
if (mimeType === "application/pdf") {
|
|
1950
|
-
return /* @__PURE__ */
|
|
2071
|
+
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
2072
|
}
|
|
1952
|
-
return /* @__PURE__ */
|
|
2073
|
+
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
2074
|
};
|
|
1954
2075
|
const getDisplayContent = () => {
|
|
1955
2076
|
if (state === "loading") {
|
|
@@ -1974,12 +2095,12 @@ function CommandComposer({
|
|
|
1974
2095
|
};
|
|
1975
2096
|
const isShowingResult = state !== "idle";
|
|
1976
2097
|
const { text: displayContent, isToolCall } = getDisplayContent();
|
|
1977
|
-
return /* @__PURE__ */
|
|
1978
|
-
fileError && /* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
2098
|
+
return /* @__PURE__ */ jsxs12("div", { className: "w-full relative", children: [
|
|
2099
|
+
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: [
|
|
2100
|
+
/* @__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" }) }),
|
|
2101
|
+
/* @__PURE__ */ jsx16("span", { children: fileError })
|
|
1981
2102
|
] }) }),
|
|
1982
|
-
/* @__PURE__ */
|
|
2103
|
+
/* @__PURE__ */ jsxs12(
|
|
1983
2104
|
"div",
|
|
1984
2105
|
{
|
|
1985
2106
|
className: cn(
|
|
@@ -1991,21 +2112,21 @@ function CommandComposer({
|
|
|
1991
2112
|
state === "error" && "border-red-400 dark:border-red-500"
|
|
1992
2113
|
),
|
|
1993
2114
|
children: [
|
|
1994
|
-
/* @__PURE__ */
|
|
1995
|
-
state === "idle" && /* @__PURE__ */
|
|
1996
|
-
/* @__PURE__ */
|
|
2115
|
+
/* @__PURE__ */ jsxs12("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
|
|
2116
|
+
state === "idle" && /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
|
|
2117
|
+
/* @__PURE__ */ jsx16(
|
|
1997
2118
|
"button",
|
|
1998
2119
|
{
|
|
1999
2120
|
ref: menuButtonRef,
|
|
2000
2121
|
onClick: () => setShowMenu(!showMenu),
|
|
2001
2122
|
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
2123
|
title: "More options",
|
|
2003
|
-
children: /* @__PURE__ */
|
|
2124
|
+
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
2125
|
}
|
|
2005
2126
|
),
|
|
2006
|
-
showMenu && /* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2127
|
+
showMenu && /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
2128
|
+
/* @__PURE__ */ jsx16("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
|
|
2129
|
+
/* @__PURE__ */ jsxs12(
|
|
2009
2130
|
"div",
|
|
2010
2131
|
{
|
|
2011
2132
|
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 +2135,7 @@ function CommandComposer({
|
|
|
2014
2135
|
top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
|
|
2015
2136
|
},
|
|
2016
2137
|
children: [
|
|
2017
|
-
/* @__PURE__ */
|
|
2138
|
+
/* @__PURE__ */ jsxs12(
|
|
2018
2139
|
"button",
|
|
2019
2140
|
{
|
|
2020
2141
|
onClick: () => {
|
|
@@ -2023,12 +2144,12 @@ function CommandComposer({
|
|
|
2023
2144
|
},
|
|
2024
2145
|
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
2146
|
children: [
|
|
2026
|
-
/* @__PURE__ */
|
|
2027
|
-
/* @__PURE__ */
|
|
2147
|
+
/* @__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)" }) }),
|
|
2148
|
+
/* @__PURE__ */ jsx16("span", { className: "!text-sm font-medium", children: "Add photos & files" })
|
|
2028
2149
|
]
|
|
2029
2150
|
}
|
|
2030
2151
|
),
|
|
2031
|
-
onExpand && /* @__PURE__ */
|
|
2152
|
+
onExpand && /* @__PURE__ */ jsxs12(
|
|
2032
2153
|
"button",
|
|
2033
2154
|
{
|
|
2034
2155
|
onClick: () => {
|
|
@@ -2037,8 +2158,8 @@ function CommandComposer({
|
|
|
2037
2158
|
},
|
|
2038
2159
|
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
2160
|
children: [
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2161
|
+
/* @__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" }) }),
|
|
2162
|
+
/* @__PURE__ */ jsx16("span", { className: "!text-sm font-medium", children: "Expand to chat" })
|
|
2042
2163
|
]
|
|
2043
2164
|
}
|
|
2044
2165
|
)
|
|
@@ -2047,30 +2168,30 @@ function CommandComposer({
|
|
|
2047
2168
|
)
|
|
2048
2169
|
] })
|
|
2049
2170
|
] }),
|
|
2050
|
-
state === "loading" && !toolName && /* @__PURE__ */
|
|
2051
|
-
state === "loading" && toolName && /* @__PURE__ */
|
|
2171
|
+
state === "loading" && !toolName && /* @__PURE__ */ jsx16("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
|
|
2172
|
+
state === "loading" && toolName && /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
|
|
2052
2173
|
] }),
|
|
2053
|
-
pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */
|
|
2174
|
+
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
2175
|
"div",
|
|
2055
2176
|
{
|
|
2056
2177
|
className: "relative group flex items-center justify-center w-6 h-6 bg-neutral-100 dark:bg-neutral-800 rounded overflow-hidden",
|
|
2057
2178
|
title: pf.file.name,
|
|
2058
2179
|
children: [
|
|
2059
|
-
pf.preview ? /* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2180
|
+
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) }),
|
|
2181
|
+
/* @__PURE__ */ jsx16(
|
|
2061
2182
|
"button",
|
|
2062
2183
|
{
|
|
2063
2184
|
onClick: () => removeFile(index),
|
|
2064
2185
|
className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity",
|
|
2065
2186
|
title: "Remove",
|
|
2066
|
-
children: /* @__PURE__ */
|
|
2187
|
+
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
2188
|
}
|
|
2068
2189
|
)
|
|
2069
2190
|
]
|
|
2070
2191
|
},
|
|
2071
2192
|
index
|
|
2072
2193
|
)) }),
|
|
2073
|
-
state === "idle" ? /* @__PURE__ */
|
|
2194
|
+
state === "idle" ? /* @__PURE__ */ jsx16(
|
|
2074
2195
|
"textarea",
|
|
2075
2196
|
{
|
|
2076
2197
|
ref: inputRef,
|
|
@@ -2088,7 +2209,7 @@ function CommandComposer({
|
|
|
2088
2209
|
),
|
|
2089
2210
|
style: { minHeight: "24px", maxHeight: "120px" }
|
|
2090
2211
|
}
|
|
2091
|
-
) : /* @__PURE__ */
|
|
2212
|
+
) : /* @__PURE__ */ jsx16(
|
|
2092
2213
|
"div",
|
|
2093
2214
|
{
|
|
2094
2215
|
className: cn(
|
|
@@ -2099,14 +2220,14 @@ function CommandComposer({
|
|
|
2099
2220
|
state === "error" && "!text-red-600 dark:!text-red-400",
|
|
2100
2221
|
state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
|
|
2101
2222
|
),
|
|
2102
|
-
children: isToolCall ? /* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2223
|
+
children: isToolCall ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
2224
|
+
/* @__PURE__ */ jsx16("span", { className: "font-mono", children: displayContent }),
|
|
2225
|
+
/* @__PURE__ */ jsx16("span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
|
|
2105
2226
|
] }) : displayContent
|
|
2106
2227
|
}
|
|
2107
2228
|
),
|
|
2108
|
-
/* @__PURE__ */
|
|
2109
|
-
/* @__PURE__ */
|
|
2229
|
+
/* @__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: [
|
|
2230
|
+
/* @__PURE__ */ jsx16(
|
|
2110
2231
|
"button",
|
|
2111
2232
|
{
|
|
2112
2233
|
onClick: onApprove,
|
|
@@ -2114,7 +2235,7 @@ function CommandComposer({
|
|
|
2114
2235
|
children: "Approve"
|
|
2115
2236
|
}
|
|
2116
2237
|
),
|
|
2117
|
-
/* @__PURE__ */
|
|
2238
|
+
/* @__PURE__ */ jsx16(
|
|
2118
2239
|
"button",
|
|
2119
2240
|
{
|
|
2120
2241
|
onClick: onReject,
|
|
@@ -2122,26 +2243,26 @@ function CommandComposer({
|
|
|
2122
2243
|
children: "Modify"
|
|
2123
2244
|
}
|
|
2124
2245
|
)
|
|
2125
|
-
] }) : /* @__PURE__ */
|
|
2126
|
-
state === "loading" && onStop && /* @__PURE__ */
|
|
2246
|
+
] }) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
2247
|
+
state === "loading" && onStop && /* @__PURE__ */ jsx16(
|
|
2127
2248
|
"button",
|
|
2128
2249
|
{
|
|
2129
2250
|
onClick: onStop,
|
|
2130
2251
|
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
2252
|
title: "Stop generation",
|
|
2132
|
-
children: /* @__PURE__ */
|
|
2253
|
+
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
2254
|
}
|
|
2134
2255
|
),
|
|
2135
|
-
(state === "success" || state === "error") && /* @__PURE__ */
|
|
2256
|
+
(state === "success" || state === "error") && /* @__PURE__ */ jsx16(
|
|
2136
2257
|
"button",
|
|
2137
2258
|
{
|
|
2138
2259
|
onClick: handleNewCommand,
|
|
2139
2260
|
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
2261
|
title: "New command",
|
|
2141
|
-
children: /* @__PURE__ */
|
|
2262
|
+
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
2263
|
}
|
|
2143
2264
|
),
|
|
2144
|
-
state === "idle" && /* @__PURE__ */
|
|
2265
|
+
state === "idle" && /* @__PURE__ */ jsx16(
|
|
2145
2266
|
"button",
|
|
2146
2267
|
{
|
|
2147
2268
|
onClick: handleSubmit,
|
|
@@ -2153,14 +2274,14 @@ function CommandComposer({
|
|
|
2153
2274
|
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
2275
|
),
|
|
2155
2276
|
title: "Execute command",
|
|
2156
|
-
children: /* @__PURE__ */
|
|
2277
|
+
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
2278
|
}
|
|
2158
2279
|
)
|
|
2159
2280
|
] }) })
|
|
2160
2281
|
]
|
|
2161
2282
|
}
|
|
2162
2283
|
),
|
|
2163
|
-
/* @__PURE__ */
|
|
2284
|
+
/* @__PURE__ */ jsx16(
|
|
2164
2285
|
"input",
|
|
2165
2286
|
{
|
|
2166
2287
|
ref: fileInputRef,
|
|
@@ -2360,7 +2481,7 @@ var AptevaClient = class {
|
|
|
2360
2481
|
var aptevaClient = new AptevaClient();
|
|
2361
2482
|
|
|
2362
2483
|
// src/components/Chat/Chat.tsx
|
|
2363
|
-
import { Fragment as Fragment3, jsx as
|
|
2484
|
+
import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2364
2485
|
var Chat = forwardRef(function Chat2({
|
|
2365
2486
|
agentId,
|
|
2366
2487
|
threadId,
|
|
@@ -2406,23 +2527,23 @@ var Chat = forwardRef(function Chat2({
|
|
|
2406
2527
|
onWidgetRender,
|
|
2407
2528
|
className
|
|
2408
2529
|
}, 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] =
|
|
2530
|
+
const [messages, setMessages] = useState4(initialMessages);
|
|
2531
|
+
const [isLoading, setIsLoading] = useState4(false);
|
|
2532
|
+
const [currentThreadId, setCurrentThreadId] = useState4(threadId || null);
|
|
2533
|
+
const [mode, setMode] = useState4(initialMode);
|
|
2534
|
+
const [chatToolName, setChatToolName] = useState4(null);
|
|
2535
|
+
const [commandState, setCommandState] = useState4("idle");
|
|
2536
|
+
const [commandResult, setCommandResult] = useState4(null);
|
|
2537
|
+
const [commandError, setCommandError] = useState4(null);
|
|
2538
|
+
const [progress, setProgress] = useState4(0);
|
|
2539
|
+
const [commandInput, setCommandInput] = useState4("");
|
|
2540
|
+
const [streamedContent, setStreamedContent] = useState4("");
|
|
2541
|
+
const [currentToolName, setCurrentToolName] = useState4(null);
|
|
2542
|
+
const [currentRequestId, setCurrentRequestId] = useState4(null);
|
|
2543
|
+
const [plan, setPlan] = useState4("");
|
|
2544
|
+
const [pendingCommand, setPendingCommand] = useState4("");
|
|
2545
|
+
const [internalPlanMode, setInternalPlanMode] = useState4(planMode);
|
|
2546
|
+
const [showSettingsMenu, setShowSettingsMenu] = useState4(false);
|
|
2426
2547
|
const fileInputRef = useRef5(null);
|
|
2427
2548
|
const handleSendMessageRef = useRef5(null);
|
|
2428
2549
|
useImperativeHandle(ref, () => ({
|
|
@@ -2911,16 +3032,16 @@ ${planToExecute}`;
|
|
|
2911
3032
|
setCurrentRequestId(null);
|
|
2912
3033
|
};
|
|
2913
3034
|
const isCompact = commandVariant === "compact";
|
|
2914
|
-
return /* @__PURE__ */
|
|
2915
|
-
showHeader && mode === "chat" && /* @__PURE__ */
|
|
2916
|
-
/* @__PURE__ */
|
|
2917
|
-
/* @__PURE__ */
|
|
3035
|
+
return /* @__PURE__ */ jsxs13("div", { className: cn("apteva-chat flex flex-col h-full", className), children: [
|
|
3036
|
+
showHeader && mode === "chat" && /* @__PURE__ */ jsx17("div", { className: "apteva-chat-header px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs13("div", { children: [
|
|
3037
|
+
/* @__PURE__ */ jsx17("div", { className: "apteva-chat-title", children: headerTitle }),
|
|
3038
|
+
/* @__PURE__ */ jsx17("div", { className: cn(
|
|
2918
3039
|
"apteva-chat-status",
|
|
2919
3040
|
isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
|
|
2920
3041
|
), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
|
|
2921
3042
|
] }) }),
|
|
2922
|
-
mode === "chat" && /* @__PURE__ */
|
|
2923
|
-
/* @__PURE__ */
|
|
3043
|
+
mode === "chat" && /* @__PURE__ */ jsxs13(Fragment3, { children: [
|
|
3044
|
+
/* @__PURE__ */ jsx17(
|
|
2924
3045
|
MessageList,
|
|
2925
3046
|
{
|
|
2926
3047
|
messages,
|
|
@@ -2935,7 +3056,7 @@ ${planToExecute}`;
|
|
|
2935
3056
|
onWidgetRender
|
|
2936
3057
|
}
|
|
2937
3058
|
),
|
|
2938
|
-
/* @__PURE__ */
|
|
3059
|
+
/* @__PURE__ */ jsx17(
|
|
2939
3060
|
Composer,
|
|
2940
3061
|
{
|
|
2941
3062
|
onSendMessage: handleSendMessage,
|
|
@@ -2948,7 +3069,7 @@ ${planToExecute}`;
|
|
|
2948
3069
|
}
|
|
2949
3070
|
)
|
|
2950
3071
|
] }),
|
|
2951
|
-
mode === "command" && /* @__PURE__ */
|
|
3072
|
+
mode === "command" && /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(
|
|
2952
3073
|
CommandComposer,
|
|
2953
3074
|
{
|
|
2954
3075
|
onExecute: (text, files) => {
|
|
@@ -2969,7 +3090,7 @@ ${planToExecute}`;
|
|
|
2969
3090
|
placeholder: placeholder || "Enter your command..."
|
|
2970
3091
|
}
|
|
2971
3092
|
) }),
|
|
2972
|
-
/* @__PURE__ */
|
|
3093
|
+
/* @__PURE__ */ jsx17("style", { dangerouslySetInnerHTML: {
|
|
2973
3094
|
__html: `
|
|
2974
3095
|
@keyframes pulse-border {
|
|
2975
3096
|
0%, 100% { border-color: rgb(59, 130, 246); }
|
|
@@ -2987,12 +3108,12 @@ ${planToExecute}`;
|
|
|
2987
3108
|
});
|
|
2988
3109
|
|
|
2989
3110
|
// src/components/Chat/CommandOutput.tsx
|
|
2990
|
-
import { useState as
|
|
2991
|
-
import { jsx as
|
|
3111
|
+
import { useState as useState5 } from "react";
|
|
3112
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2992
3113
|
|
|
2993
3114
|
// src/components/Command/Command.tsx
|
|
2994
|
-
import React, { useState as
|
|
2995
|
-
import { Fragment as Fragment4, jsx as
|
|
3115
|
+
import React, { useState as useState6, useEffect as useEffect5 } from "react";
|
|
3116
|
+
import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2996
3117
|
function Command({
|
|
2997
3118
|
agentId,
|
|
2998
3119
|
command: initialCommand,
|
|
@@ -3019,18 +3140,18 @@ function Command({
|
|
|
3019
3140
|
resultRenderer,
|
|
3020
3141
|
className
|
|
3021
3142
|
}) {
|
|
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] =
|
|
3143
|
+
const [state, setState] = useState6("idle");
|
|
3144
|
+
const [result, setResult] = useState6(null);
|
|
3145
|
+
const [error, setError] = useState6(null);
|
|
3146
|
+
const [progress, setProgress] = useState6(0);
|
|
3147
|
+
const [command, setCommand] = useState6(initialCommand || "");
|
|
3148
|
+
const [streamedContent, setStreamedContent] = useState6("");
|
|
3149
|
+
const [plan, setPlan] = useState6("");
|
|
3150
|
+
const [pendingCommand, setPendingCommand] = useState6("");
|
|
3151
|
+
const [showPlanDetails, setShowPlanDetails] = useState6(false);
|
|
3152
|
+
const [uploadedFiles, setUploadedFiles] = useState6([]);
|
|
3153
|
+
const [showSettingsMenu, setShowSettingsMenu] = useState6(false);
|
|
3154
|
+
const [internalPlanMode, setInternalPlanMode] = useState6(planMode);
|
|
3034
3155
|
const fileInputRef = React.useRef(null);
|
|
3035
3156
|
useEffect5(() => {
|
|
3036
3157
|
if (autoExecute && state === "idle" && command) {
|
|
@@ -3442,7 +3563,7 @@ ${planToExecute}`;
|
|
|
3442
3563
|
setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
|
|
3443
3564
|
};
|
|
3444
3565
|
const isCompact = variant === "compact";
|
|
3445
|
-
return /* @__PURE__ */
|
|
3566
|
+
return /* @__PURE__ */ jsxs15(
|
|
3446
3567
|
"div",
|
|
3447
3568
|
{
|
|
3448
3569
|
className: cn(
|
|
@@ -3457,9 +3578,9 @@ ${planToExecute}`;
|
|
|
3457
3578
|
),
|
|
3458
3579
|
style: { minHeight: isCompact ? "auto" : "180px" },
|
|
3459
3580
|
children: [
|
|
3460
|
-
/* @__PURE__ */
|
|
3461
|
-
state === "idle" && allowInput && !isCompact && /* @__PURE__ */
|
|
3462
|
-
/* @__PURE__ */
|
|
3581
|
+
/* @__PURE__ */ jsxs15("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
|
|
3582
|
+
state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3583
|
+
/* @__PURE__ */ jsx19(
|
|
3463
3584
|
"textarea",
|
|
3464
3585
|
{
|
|
3465
3586
|
value: command,
|
|
@@ -3475,42 +3596,42 @@ ${planToExecute}`;
|
|
|
3475
3596
|
rows: 6
|
|
3476
3597
|
}
|
|
3477
3598
|
),
|
|
3478
|
-
uploadedFiles.length > 0 && /* @__PURE__ */
|
|
3479
|
-
file.type === "image" ? /* @__PURE__ */
|
|
3599
|
+
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: [
|
|
3600
|
+
file.type === "image" ? /* @__PURE__ */ jsx19(
|
|
3480
3601
|
"img",
|
|
3481
3602
|
{
|
|
3482
3603
|
src: file.preview,
|
|
3483
3604
|
alt: file.name,
|
|
3484
3605
|
className: "w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600"
|
|
3485
3606
|
}
|
|
3486
|
-
) : /* @__PURE__ */
|
|
3487
|
-
/* @__PURE__ */
|
|
3488
|
-
/* @__PURE__ */
|
|
3607
|
+
) : /* @__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: [
|
|
3608
|
+
/* @__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" }) }),
|
|
3609
|
+
/* @__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
3610
|
] }),
|
|
3490
|
-
/* @__PURE__ */
|
|
3611
|
+
/* @__PURE__ */ jsx19(
|
|
3491
3612
|
"button",
|
|
3492
3613
|
{
|
|
3493
3614
|
onClick: () => removeFile(index),
|
|
3494
3615
|
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
3616
|
title: `Remove ${file.type}`,
|
|
3496
|
-
children: /* @__PURE__ */
|
|
3617
|
+
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
3618
|
}
|
|
3498
3619
|
)
|
|
3499
3620
|
] }, index)) })
|
|
3500
3621
|
] }),
|
|
3501
|
-
state === "idle" && allowInput && isCompact && /* @__PURE__ */
|
|
3502
|
-
/* @__PURE__ */
|
|
3503
|
-
enableFileUpload && /* @__PURE__ */
|
|
3622
|
+
state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3623
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
|
|
3624
|
+
enableFileUpload && /* @__PURE__ */ jsx19(
|
|
3504
3625
|
"button",
|
|
3505
3626
|
{
|
|
3506
3627
|
onClick: () => fileInputRef.current?.click(),
|
|
3507
3628
|
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
3629
|
title: "Attach file",
|
|
3509
|
-
children: /* @__PURE__ */
|
|
3630
|
+
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
3631
|
}
|
|
3511
3632
|
),
|
|
3512
|
-
planMode && /* @__PURE__ */
|
|
3513
|
-
/* @__PURE__ */
|
|
3633
|
+
planMode && /* @__PURE__ */ jsxs15("div", { className: "relative settings-menu-container", children: [
|
|
3634
|
+
/* @__PURE__ */ jsx19(
|
|
3514
3635
|
"button",
|
|
3515
3636
|
{
|
|
3516
3637
|
onClick: () => setShowSettingsMenu(!showSettingsMenu),
|
|
@@ -3519,28 +3640,28 @@ ${planToExecute}`;
|
|
|
3519
3640
|
internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
|
|
3520
3641
|
),
|
|
3521
3642
|
title: "Settings",
|
|
3522
|
-
children: /* @__PURE__ */
|
|
3523
|
-
/* @__PURE__ */
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
3526
|
-
/* @__PURE__ */
|
|
3527
|
-
/* @__PURE__ */
|
|
3528
|
-
/* @__PURE__ */
|
|
3529
|
-
/* @__PURE__ */
|
|
3530
|
-
/* @__PURE__ */
|
|
3531
|
-
/* @__PURE__ */
|
|
3643
|
+
children: /* @__PURE__ */ jsxs15("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
3644
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
|
|
3645
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
|
|
3646
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
|
|
3647
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
|
|
3648
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
|
|
3649
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
|
|
3650
|
+
/* @__PURE__ */ jsx19("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
|
|
3651
|
+
/* @__PURE__ */ jsx19("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
|
|
3652
|
+
/* @__PURE__ */ jsx19("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
|
|
3532
3653
|
] })
|
|
3533
3654
|
}
|
|
3534
3655
|
),
|
|
3535
|
-
showSettingsMenu && /* @__PURE__ */
|
|
3536
|
-
/* @__PURE__ */
|
|
3537
|
-
/* @__PURE__ */
|
|
3538
|
-
/* @__PURE__ */
|
|
3539
|
-
/* @__PURE__ */
|
|
3540
|
-
/* @__PURE__ */
|
|
3656
|
+
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: [
|
|
3657
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
3658
|
+
/* @__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" }) }),
|
|
3659
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3660
|
+
/* @__PURE__ */ jsx19("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
|
|
3661
|
+
/* @__PURE__ */ jsx19("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
|
|
3541
3662
|
] })
|
|
3542
3663
|
] }),
|
|
3543
|
-
/* @__PURE__ */
|
|
3664
|
+
/* @__PURE__ */ jsx19(
|
|
3544
3665
|
"button",
|
|
3545
3666
|
{
|
|
3546
3667
|
onClick: (e) => {
|
|
@@ -3552,7 +3673,7 @@ ${planToExecute}`;
|
|
|
3552
3673
|
internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
|
|
3553
3674
|
),
|
|
3554
3675
|
type: "button",
|
|
3555
|
-
children: /* @__PURE__ */
|
|
3676
|
+
children: /* @__PURE__ */ jsx19(
|
|
3556
3677
|
"span",
|
|
3557
3678
|
{
|
|
3558
3679
|
className: cn(
|
|
@@ -3566,26 +3687,26 @@ ${planToExecute}`;
|
|
|
3566
3687
|
] }) })
|
|
3567
3688
|
] })
|
|
3568
3689
|
] }),
|
|
3569
|
-
uploadedFiles.length > 0 && /* @__PURE__ */
|
|
3570
|
-
file.type === "image" ? /* @__PURE__ */
|
|
3690
|
+
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: [
|
|
3691
|
+
file.type === "image" ? /* @__PURE__ */ jsx19(
|
|
3571
3692
|
"img",
|
|
3572
3693
|
{
|
|
3573
3694
|
src: file.preview,
|
|
3574
3695
|
alt: file.name,
|
|
3575
3696
|
className: "w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600"
|
|
3576
3697
|
}
|
|
3577
|
-
) : /* @__PURE__ */
|
|
3578
|
-
/* @__PURE__ */
|
|
3698
|
+
) : /* @__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" }) }) }),
|
|
3699
|
+
/* @__PURE__ */ jsx19(
|
|
3579
3700
|
"button",
|
|
3580
3701
|
{
|
|
3581
3702
|
onClick: () => removeFile(index),
|
|
3582
3703
|
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
3704
|
title: "Remove",
|
|
3584
|
-
children: /* @__PURE__ */
|
|
3705
|
+
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
3706
|
}
|
|
3586
3707
|
)
|
|
3587
3708
|
] }, index)) }),
|
|
3588
|
-
/* @__PURE__ */
|
|
3709
|
+
/* @__PURE__ */ jsx19(
|
|
3589
3710
|
"input",
|
|
3590
3711
|
{
|
|
3591
3712
|
type: "text",
|
|
@@ -3601,7 +3722,7 @@ ${planToExecute}`;
|
|
|
3601
3722
|
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
3723
|
}
|
|
3603
3724
|
),
|
|
3604
|
-
/* @__PURE__ */
|
|
3725
|
+
/* @__PURE__ */ jsx19(
|
|
3605
3726
|
"button",
|
|
3606
3727
|
{
|
|
3607
3728
|
onClick: () => executeCommand(),
|
|
@@ -3617,33 +3738,33 @@ ${planToExecute}`;
|
|
|
3617
3738
|
!command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
|
|
3618
3739
|
),
|
|
3619
3740
|
title: "Execute",
|
|
3620
|
-
children: /* @__PURE__ */
|
|
3741
|
+
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
3742
|
}
|
|
3622
3743
|
)
|
|
3623
3744
|
] }),
|
|
3624
|
-
state === "loading" && !isCompact && /* @__PURE__ */
|
|
3625
|
-
/* @__PURE__ */
|
|
3626
|
-
/* @__PURE__ */
|
|
3627
|
-
showProgress && /* @__PURE__ */
|
|
3628
|
-
/* @__PURE__ */
|
|
3745
|
+
state === "loading" && !isCompact && /* @__PURE__ */ jsxs15("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
|
|
3746
|
+
/* @__PURE__ */ jsx19("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
|
|
3747
|
+
/* @__PURE__ */ jsx19("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
|
|
3748
|
+
showProgress && /* @__PURE__ */ jsxs15("div", { className: "w-full max-w-sm", children: [
|
|
3749
|
+
/* @__PURE__ */ jsx19("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx19(
|
|
3629
3750
|
"div",
|
|
3630
3751
|
{
|
|
3631
3752
|
className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
|
|
3632
3753
|
style: { width: `${progress}%` }
|
|
3633
3754
|
}
|
|
3634
3755
|
) }),
|
|
3635
|
-
/* @__PURE__ */
|
|
3756
|
+
/* @__PURE__ */ jsxs15("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
|
|
3636
3757
|
progress,
|
|
3637
3758
|
"%"
|
|
3638
3759
|
] })
|
|
3639
3760
|
] })
|
|
3640
3761
|
] }),
|
|
3641
|
-
state === "loading" && isCompact && /* @__PURE__ */
|
|
3642
|
-
/* @__PURE__ */
|
|
3643
|
-
/* @__PURE__ */
|
|
3644
|
-
/* @__PURE__ */
|
|
3762
|
+
state === "loading" && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3763
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
|
|
3764
|
+
/* @__PURE__ */ jsx19("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
|
|
3765
|
+
/* @__PURE__ */ jsx19("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
|
|
3645
3766
|
] }),
|
|
3646
|
-
/* @__PURE__ */
|
|
3767
|
+
/* @__PURE__ */ jsx19(
|
|
3647
3768
|
"button",
|
|
3648
3769
|
{
|
|
3649
3770
|
disabled: true,
|
|
@@ -3655,20 +3776,20 @@ ${planToExecute}`;
|
|
|
3655
3776
|
"!text-lg",
|
|
3656
3777
|
"opacity-30 cursor-not-allowed"
|
|
3657
3778
|
),
|
|
3658
|
-
children: /* @__PURE__ */
|
|
3779
|
+
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
3780
|
}
|
|
3660
3781
|
)
|
|
3661
3782
|
] }),
|
|
3662
|
-
state === "plan-pending" && !isCompact && /* @__PURE__ */
|
|
3663
|
-
/* @__PURE__ */
|
|
3664
|
-
/* @__PURE__ */
|
|
3665
|
-
/* @__PURE__ */
|
|
3666
|
-
/* @__PURE__ */
|
|
3667
|
-
/* @__PURE__ */
|
|
3783
|
+
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: [
|
|
3784
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2 mb-3", children: [
|
|
3785
|
+
/* @__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" }) }),
|
|
3786
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1", children: [
|
|
3787
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
|
|
3788
|
+
/* @__PURE__ */ jsx19("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
|
|
3668
3789
|
] })
|
|
3669
3790
|
] }),
|
|
3670
|
-
/* @__PURE__ */
|
|
3671
|
-
/* @__PURE__ */
|
|
3791
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex gap-2 mt-4", children: [
|
|
3792
|
+
/* @__PURE__ */ jsx19(
|
|
3672
3793
|
"button",
|
|
3673
3794
|
{
|
|
3674
3795
|
onClick: approvePlan,
|
|
@@ -3676,7 +3797,7 @@ ${planToExecute}`;
|
|
|
3676
3797
|
children: "Approve & Execute"
|
|
3677
3798
|
}
|
|
3678
3799
|
),
|
|
3679
|
-
/* @__PURE__ */
|
|
3800
|
+
/* @__PURE__ */ jsx19(
|
|
3680
3801
|
"button",
|
|
3681
3802
|
{
|
|
3682
3803
|
onClick: rejectPlan,
|
|
@@ -3686,20 +3807,20 @@ ${planToExecute}`;
|
|
|
3686
3807
|
)
|
|
3687
3808
|
] })
|
|
3688
3809
|
] }) }),
|
|
3689
|
-
state === "plan-pending" && isCompact && /* @__PURE__ */
|
|
3690
|
-
/* @__PURE__ */
|
|
3810
|
+
state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3811
|
+
/* @__PURE__ */ jsxs15(
|
|
3691
3812
|
"button",
|
|
3692
3813
|
{
|
|
3693
3814
|
onClick: () => setShowPlanDetails(true),
|
|
3694
3815
|
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
3816
|
children: [
|
|
3696
|
-
/* @__PURE__ */
|
|
3697
|
-
/* @__PURE__ */
|
|
3817
|
+
/* @__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" }) }),
|
|
3818
|
+
/* @__PURE__ */ jsx19("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
|
|
3698
3819
|
]
|
|
3699
3820
|
}
|
|
3700
3821
|
),
|
|
3701
|
-
/* @__PURE__ */
|
|
3702
|
-
/* @__PURE__ */
|
|
3822
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex gap-2 flex-shrink-0", children: [
|
|
3823
|
+
/* @__PURE__ */ jsx19(
|
|
3703
3824
|
"button",
|
|
3704
3825
|
{
|
|
3705
3826
|
onClick: approvePlan,
|
|
@@ -3707,7 +3828,7 @@ ${planToExecute}`;
|
|
|
3707
3828
|
children: "Approve"
|
|
3708
3829
|
}
|
|
3709
3830
|
),
|
|
3710
|
-
/* @__PURE__ */
|
|
3831
|
+
/* @__PURE__ */ jsx19(
|
|
3711
3832
|
"button",
|
|
3712
3833
|
{
|
|
3713
3834
|
onClick: rejectPlan,
|
|
@@ -3717,15 +3838,15 @@ ${planToExecute}`;
|
|
|
3717
3838
|
)
|
|
3718
3839
|
] })
|
|
3719
3840
|
] }),
|
|
3720
|
-
state === "error" && /* @__PURE__ */
|
|
3721
|
-
/* @__PURE__ */
|
|
3722
|
-
/* @__PURE__ */
|
|
3723
|
-
/* @__PURE__ */
|
|
3724
|
-
/* @__PURE__ */
|
|
3725
|
-
/* @__PURE__ */
|
|
3841
|
+
state === "error" && /* @__PURE__ */ jsxs15("div", { className: "flex-1 flex flex-col", children: [
|
|
3842
|
+
/* @__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: [
|
|
3843
|
+
/* @__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" }) }),
|
|
3844
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3845
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
|
|
3846
|
+
/* @__PURE__ */ jsx19("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
|
|
3726
3847
|
] })
|
|
3727
3848
|
] }) }),
|
|
3728
|
-
allowInput && /* @__PURE__ */
|
|
3849
|
+
allowInput && /* @__PURE__ */ jsx19(
|
|
3729
3850
|
"textarea",
|
|
3730
3851
|
{
|
|
3731
3852
|
value: command,
|
|
@@ -3742,16 +3863,16 @@ ${planToExecute}`;
|
|
|
3742
3863
|
}
|
|
3743
3864
|
)
|
|
3744
3865
|
] }),
|
|
3745
|
-
state === "success" && result && !isCompact && /* @__PURE__ */
|
|
3746
|
-
/* @__PURE__ */
|
|
3747
|
-
/* @__PURE__ */
|
|
3748
|
-
/* @__PURE__ */
|
|
3749
|
-
/* @__PURE__ */
|
|
3750
|
-
/* @__PURE__ */
|
|
3866
|
+
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: [
|
|
3867
|
+
/* @__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: [
|
|
3868
|
+
/* @__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" }) }),
|
|
3869
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1", children: [
|
|
3870
|
+
/* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
|
|
3871
|
+
/* @__PURE__ */ jsx19("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
|
|
3751
3872
|
] })
|
|
3752
3873
|
] }),
|
|
3753
|
-
result.data?.summary && /* @__PURE__ */
|
|
3754
|
-
result.widgets && result.widgets.length > 0 && /* @__PURE__ */
|
|
3874
|
+
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 }),
|
|
3875
|
+
result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx19("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx19(
|
|
3755
3876
|
WidgetRenderer,
|
|
3756
3877
|
{
|
|
3757
3878
|
widget,
|
|
@@ -3760,8 +3881,8 @@ ${planToExecute}`;
|
|
|
3760
3881
|
widget.id
|
|
3761
3882
|
)) })
|
|
3762
3883
|
] }) }),
|
|
3763
|
-
state === "success" && result && isCompact && /* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3884
|
+
state === "success" && result && isCompact && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3885
|
+
/* @__PURE__ */ jsxs15(
|
|
3765
3886
|
"div",
|
|
3766
3887
|
{
|
|
3767
3888
|
className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
|
|
@@ -3770,12 +3891,12 @@ ${planToExecute}`;
|
|
|
3770
3891
|
setResult(null);
|
|
3771
3892
|
},
|
|
3772
3893
|
children: [
|
|
3773
|
-
/* @__PURE__ */
|
|
3774
|
-
/* @__PURE__ */
|
|
3894
|
+
/* @__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" }) }),
|
|
3895
|
+
/* @__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
3896
|
]
|
|
3776
3897
|
}
|
|
3777
3898
|
),
|
|
3778
|
-
/* @__PURE__ */
|
|
3899
|
+
/* @__PURE__ */ jsx19(
|
|
3779
3900
|
"button",
|
|
3780
3901
|
{
|
|
3781
3902
|
onClick: () => {
|
|
@@ -3791,24 +3912,24 @@ ${planToExecute}`;
|
|
|
3791
3912
|
"!text-lg"
|
|
3792
3913
|
),
|
|
3793
3914
|
title: "New command",
|
|
3794
|
-
children: /* @__PURE__ */
|
|
3915
|
+
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
3916
|
}
|
|
3796
3917
|
)
|
|
3797
3918
|
] })
|
|
3798
3919
|
] }),
|
|
3799
|
-
!isCompact && /* @__PURE__ */
|
|
3800
|
-
/* @__PURE__ */
|
|
3801
|
-
enableFileUpload && /* @__PURE__ */
|
|
3920
|
+
!isCompact && /* @__PURE__ */ jsxs15("div", { className: "p-3 flex items-center justify-between gap-2", children: [
|
|
3921
|
+
/* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs15(Fragment4, { children: [
|
|
3922
|
+
enableFileUpload && /* @__PURE__ */ jsx19(
|
|
3802
3923
|
"button",
|
|
3803
3924
|
{
|
|
3804
3925
|
onClick: () => fileInputRef.current?.click(),
|
|
3805
3926
|
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
3927
|
title: "Attach file",
|
|
3807
|
-
children: /* @__PURE__ */
|
|
3928
|
+
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
3929
|
}
|
|
3809
3930
|
),
|
|
3810
|
-
planMode && /* @__PURE__ */
|
|
3811
|
-
/* @__PURE__ */
|
|
3931
|
+
planMode && /* @__PURE__ */ jsxs15("div", { className: "relative settings-menu-container", children: [
|
|
3932
|
+
/* @__PURE__ */ jsx19(
|
|
3812
3933
|
"button",
|
|
3813
3934
|
{
|
|
3814
3935
|
onClick: () => setShowSettingsMenu(!showSettingsMenu),
|
|
@@ -3817,28 +3938,28 @@ ${planToExecute}`;
|
|
|
3817
3938
|
internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
|
|
3818
3939
|
),
|
|
3819
3940
|
title: "Settings",
|
|
3820
|
-
children: /* @__PURE__ */
|
|
3821
|
-
/* @__PURE__ */
|
|
3822
|
-
/* @__PURE__ */
|
|
3823
|
-
/* @__PURE__ */
|
|
3824
|
-
/* @__PURE__ */
|
|
3825
|
-
/* @__PURE__ */
|
|
3826
|
-
/* @__PURE__ */
|
|
3827
|
-
/* @__PURE__ */
|
|
3828
|
-
/* @__PURE__ */
|
|
3829
|
-
/* @__PURE__ */
|
|
3941
|
+
children: /* @__PURE__ */ jsxs15("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
3942
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
|
|
3943
|
+
/* @__PURE__ */ jsx19("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
|
|
3944
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
|
|
3945
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
|
|
3946
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
|
|
3947
|
+
/* @__PURE__ */ jsx19("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
|
|
3948
|
+
/* @__PURE__ */ jsx19("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
|
|
3949
|
+
/* @__PURE__ */ jsx19("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
|
|
3950
|
+
/* @__PURE__ */ jsx19("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
|
|
3830
3951
|
] })
|
|
3831
3952
|
}
|
|
3832
3953
|
),
|
|
3833
|
-
showSettingsMenu && /* @__PURE__ */
|
|
3834
|
-
/* @__PURE__ */
|
|
3835
|
-
/* @__PURE__ */
|
|
3836
|
-
/* @__PURE__ */
|
|
3837
|
-
/* @__PURE__ */
|
|
3838
|
-
/* @__PURE__ */
|
|
3954
|
+
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: [
|
|
3955
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
3956
|
+
/* @__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" }) }),
|
|
3957
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3958
|
+
/* @__PURE__ */ jsx19("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
|
|
3959
|
+
/* @__PURE__ */ jsx19("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
|
|
3839
3960
|
] })
|
|
3840
3961
|
] }),
|
|
3841
|
-
/* @__PURE__ */
|
|
3962
|
+
/* @__PURE__ */ jsx19(
|
|
3842
3963
|
"button",
|
|
3843
3964
|
{
|
|
3844
3965
|
onClick: (e) => {
|
|
@@ -3850,7 +3971,7 @@ ${planToExecute}`;
|
|
|
3850
3971
|
internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
|
|
3851
3972
|
),
|
|
3852
3973
|
type: "button",
|
|
3853
|
-
children: /* @__PURE__ */
|
|
3974
|
+
children: /* @__PURE__ */ jsx19(
|
|
3854
3975
|
"span",
|
|
3855
3976
|
{
|
|
3856
3977
|
className: cn(
|
|
@@ -3864,9 +3985,9 @@ ${planToExecute}`;
|
|
|
3864
3985
|
] }) })
|
|
3865
3986
|
] })
|
|
3866
3987
|
] }) }),
|
|
3867
|
-
!(state === "idle" && allowInput) && /* @__PURE__ */
|
|
3868
|
-
/* @__PURE__ */
|
|
3869
|
-
(state === "success" || state === "error") && allowInput && /* @__PURE__ */
|
|
3988
|
+
!(state === "idle" && allowInput) && /* @__PURE__ */ jsx19("div", {}),
|
|
3989
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
3990
|
+
(state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx19(
|
|
3870
3991
|
"button",
|
|
3871
3992
|
{
|
|
3872
3993
|
onClick: resetCommand,
|
|
@@ -3874,7 +3995,7 @@ ${planToExecute}`;
|
|
|
3874
3995
|
children: "Reset"
|
|
3875
3996
|
}
|
|
3876
3997
|
),
|
|
3877
|
-
(state === "idle" || state === "error") && /* @__PURE__ */
|
|
3998
|
+
(state === "idle" || state === "error") && /* @__PURE__ */ jsx19(
|
|
3878
3999
|
"button",
|
|
3879
4000
|
{
|
|
3880
4001
|
onClick: () => executeCommand(),
|
|
@@ -3890,29 +4011,29 @@ ${planToExecute}`;
|
|
|
3890
4011
|
!command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
|
|
3891
4012
|
),
|
|
3892
4013
|
title: state === "error" ? "Retry" : "Execute",
|
|
3893
|
-
children: state === "error" ? /* @__PURE__ */
|
|
4014
|
+
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
4015
|
}
|
|
3895
4016
|
)
|
|
3896
4017
|
] })
|
|
3897
4018
|
] }),
|
|
3898
|
-
showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */
|
|
3899
|
-
/* @__PURE__ */
|
|
3900
|
-
/* @__PURE__ */
|
|
3901
|
-
/* @__PURE__ */
|
|
3902
|
-
/* @__PURE__ */
|
|
4019
|
+
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: [
|
|
4020
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
|
|
4021
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3", children: [
|
|
4022
|
+
/* @__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" }) }),
|
|
4023
|
+
/* @__PURE__ */ jsx19("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
|
|
3903
4024
|
] }),
|
|
3904
|
-
/* @__PURE__ */
|
|
4025
|
+
/* @__PURE__ */ jsx19(
|
|
3905
4026
|
"button",
|
|
3906
4027
|
{
|
|
3907
4028
|
onClick: () => setShowPlanDetails(false),
|
|
3908
4029
|
className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
|
|
3909
|
-
children: /* @__PURE__ */
|
|
4030
|
+
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
4031
|
}
|
|
3911
4032
|
)
|
|
3912
4033
|
] }),
|
|
3913
|
-
/* @__PURE__ */
|
|
3914
|
-
/* @__PURE__ */
|
|
3915
|
-
/* @__PURE__ */
|
|
4034
|
+
/* @__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 }) }) }),
|
|
4035
|
+
/* @__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: [
|
|
4036
|
+
/* @__PURE__ */ jsx19(
|
|
3916
4037
|
"button",
|
|
3917
4038
|
{
|
|
3918
4039
|
onClick: rejectPlan,
|
|
@@ -3920,7 +4041,7 @@ ${planToExecute}`;
|
|
|
3920
4041
|
children: "Modify Command"
|
|
3921
4042
|
}
|
|
3922
4043
|
),
|
|
3923
|
-
/* @__PURE__ */
|
|
4044
|
+
/* @__PURE__ */ jsx19(
|
|
3924
4045
|
"button",
|
|
3925
4046
|
{
|
|
3926
4047
|
onClick: approvePlan,
|
|
@@ -3930,7 +4051,7 @@ ${planToExecute}`;
|
|
|
3930
4051
|
)
|
|
3931
4052
|
] })
|
|
3932
4053
|
] }) }),
|
|
3933
|
-
/* @__PURE__ */
|
|
4054
|
+
/* @__PURE__ */ jsx19(
|
|
3934
4055
|
"input",
|
|
3935
4056
|
{
|
|
3936
4057
|
ref: fileInputRef,
|
|
@@ -3941,7 +4062,7 @@ ${planToExecute}`;
|
|
|
3941
4062
|
accept: "image/*,application/pdf,.doc,.docx,.txt"
|
|
3942
4063
|
}
|
|
3943
4064
|
),
|
|
3944
|
-
/* @__PURE__ */
|
|
4065
|
+
/* @__PURE__ */ jsx19("style", { dangerouslySetInnerHTML: {
|
|
3945
4066
|
__html: `
|
|
3946
4067
|
@keyframes pulse-border {
|
|
3947
4068
|
0%, 100% {
|
|
@@ -3962,8 +4083,8 @@ ${planToExecute}`;
|
|
|
3962
4083
|
}
|
|
3963
4084
|
|
|
3964
4085
|
// src/components/Prompt/Prompt.tsx
|
|
3965
|
-
import { useState as
|
|
3966
|
-
import { jsx as
|
|
4086
|
+
import { useState as useState7 } from "react";
|
|
4087
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3967
4088
|
function Prompt({
|
|
3968
4089
|
agentId,
|
|
3969
4090
|
placeholder = "Enter your prompt...",
|
|
@@ -3980,9 +4101,9 @@ function Prompt({
|
|
|
3980
4101
|
showSuggestions = false,
|
|
3981
4102
|
className
|
|
3982
4103
|
}) {
|
|
3983
|
-
const [value, setValue] =
|
|
3984
|
-
const [isLoading, setIsLoading] =
|
|
3985
|
-
const [suggestions] =
|
|
4104
|
+
const [value, setValue] = useState7(initialValue);
|
|
4105
|
+
const [isLoading, setIsLoading] = useState7(false);
|
|
4106
|
+
const [suggestions] = useState7(["Plan a trip", "Write a description", "Analyze data"]);
|
|
3986
4107
|
const handleChange = (e) => {
|
|
3987
4108
|
const newValue = e.target.value;
|
|
3988
4109
|
if (!maxLength || newValue.length <= maxLength) {
|
|
@@ -4025,9 +4146,9 @@ function Prompt({
|
|
|
4025
4146
|
handleSubmit();
|
|
4026
4147
|
}
|
|
4027
4148
|
};
|
|
4028
|
-
return /* @__PURE__ */
|
|
4029
|
-
/* @__PURE__ */
|
|
4030
|
-
/* @__PURE__ */
|
|
4149
|
+
return /* @__PURE__ */ jsxs16("div", { className: cn("space-y-2", className), children: [
|
|
4150
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
|
|
4151
|
+
/* @__PURE__ */ jsx20(
|
|
4031
4152
|
"input",
|
|
4032
4153
|
{
|
|
4033
4154
|
type: "text",
|
|
@@ -4040,7 +4161,7 @@ function Prompt({
|
|
|
4040
4161
|
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
4162
|
}
|
|
4042
4163
|
),
|
|
4043
|
-
submitOn === "button" && /* @__PURE__ */
|
|
4164
|
+
submitOn === "button" && /* @__PURE__ */ jsx20(
|
|
4044
4165
|
"button",
|
|
4045
4166
|
{
|
|
4046
4167
|
onClick: handleSubmit,
|
|
@@ -4050,13 +4171,13 @@ function Prompt({
|
|
|
4050
4171
|
}
|
|
4051
4172
|
)
|
|
4052
4173
|
] }),
|
|
4053
|
-
maxLength && /* @__PURE__ */
|
|
4174
|
+
maxLength && /* @__PURE__ */ jsxs16("p", { className: "text-xs text-neutral-500", children: [
|
|
4054
4175
|
value.length,
|
|
4055
4176
|
" / ",
|
|
4056
4177
|
maxLength,
|
|
4057
4178
|
" characters"
|
|
4058
4179
|
] }),
|
|
4059
|
-
showSuggestions && !value && /* @__PURE__ */
|
|
4180
|
+
showSuggestions && !value && /* @__PURE__ */ jsx20("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx20(
|
|
4060
4181
|
"button",
|
|
4061
4182
|
{
|
|
4062
4183
|
onClick: () => setValue(suggestion),
|
|
@@ -4065,16 +4186,16 @@ function Prompt({
|
|
|
4065
4186
|
},
|
|
4066
4187
|
idx
|
|
4067
4188
|
)) }),
|
|
4068
|
-
isLoading && /* @__PURE__ */
|
|
4069
|
-
/* @__PURE__ */
|
|
4070
|
-
/* @__PURE__ */
|
|
4189
|
+
isLoading && /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
|
|
4190
|
+
/* @__PURE__ */ jsx20("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
|
|
4191
|
+
/* @__PURE__ */ jsx20("span", { children: "AI is processing your request..." })
|
|
4071
4192
|
] })
|
|
4072
4193
|
] });
|
|
4073
4194
|
}
|
|
4074
4195
|
|
|
4075
4196
|
// src/components/Stream/Stream.tsx
|
|
4076
|
-
import { useState as
|
|
4077
|
-
import { jsx as
|
|
4197
|
+
import { useState as useState8, useEffect as useEffect6 } from "react";
|
|
4198
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4078
4199
|
function Stream({
|
|
4079
4200
|
agentId,
|
|
4080
4201
|
prompt,
|
|
@@ -4090,9 +4211,9 @@ function Stream({
|
|
|
4090
4211
|
typingSpeed = 30,
|
|
4091
4212
|
className
|
|
4092
4213
|
}) {
|
|
4093
|
-
const [text, setText] =
|
|
4094
|
-
const [isStreaming, setIsStreaming] =
|
|
4095
|
-
const [isComplete, setIsComplete] =
|
|
4214
|
+
const [text, setText] = useState8("");
|
|
4215
|
+
const [isStreaming, setIsStreaming] = useState8(false);
|
|
4216
|
+
const [isComplete, setIsComplete] = useState8(false);
|
|
4096
4217
|
useEffect6(() => {
|
|
4097
4218
|
if (autoStart && !isStreaming && !isComplete) {
|
|
4098
4219
|
startStreaming();
|
|
@@ -4154,7 +4275,7 @@ function Stream({
|
|
|
4154
4275
|
plain: "text-neutral-900 dark:text-neutral-100"
|
|
4155
4276
|
};
|
|
4156
4277
|
if (!isStreaming && !isComplete) {
|
|
4157
|
-
return /* @__PURE__ */
|
|
4278
|
+
return /* @__PURE__ */ jsx21("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx21(
|
|
4158
4279
|
"button",
|
|
4159
4280
|
{
|
|
4160
4281
|
onClick: startStreaming,
|
|
@@ -4163,19 +4284,19 @@ function Stream({
|
|
|
4163
4284
|
}
|
|
4164
4285
|
) });
|
|
4165
4286
|
}
|
|
4166
|
-
return /* @__PURE__ */
|
|
4287
|
+
return /* @__PURE__ */ jsxs17("div", { className: cn(variantClasses[variant], className), children: [
|
|
4167
4288
|
text,
|
|
4168
|
-
isStreaming && showCursor && /* @__PURE__ */
|
|
4289
|
+
isStreaming && showCursor && /* @__PURE__ */ jsx21("span", { className: "apteva-stream-cursor" })
|
|
4169
4290
|
] });
|
|
4170
4291
|
}
|
|
4171
4292
|
|
|
4172
4293
|
// src/components/Threads/ThreadList.tsx
|
|
4173
|
-
import { useState as
|
|
4294
|
+
import { useState as useState9 } from "react";
|
|
4174
4295
|
|
|
4175
4296
|
// src/components/Threads/ThreadItem.tsx
|
|
4176
|
-
import { jsx as
|
|
4297
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4177
4298
|
function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
|
|
4178
|
-
return /* @__PURE__ */
|
|
4299
|
+
return /* @__PURE__ */ jsxs18(
|
|
4179
4300
|
"div",
|
|
4180
4301
|
{
|
|
4181
4302
|
className: cn("apteva-thread-item", {
|
|
@@ -4183,19 +4304,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
|
|
|
4183
4304
|
}),
|
|
4184
4305
|
onClick: onSelect,
|
|
4185
4306
|
children: [
|
|
4186
|
-
/* @__PURE__ */
|
|
4187
|
-
/* @__PURE__ */
|
|
4188
|
-
thread.preview && /* @__PURE__ */
|
|
4189
|
-
/* @__PURE__ */
|
|
4190
|
-
/* @__PURE__ */
|
|
4307
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex-1 min-w-0", children: [
|
|
4308
|
+
/* @__PURE__ */ jsx22("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
|
|
4309
|
+
thread.preview && /* @__PURE__ */ jsx22("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
|
|
4310
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
|
|
4311
|
+
/* @__PURE__ */ jsxs18("span", { children: [
|
|
4191
4312
|
thread.messageCount,
|
|
4192
4313
|
" messages"
|
|
4193
4314
|
] }),
|
|
4194
|
-
/* @__PURE__ */
|
|
4195
|
-
/* @__PURE__ */
|
|
4315
|
+
/* @__PURE__ */ jsx22("span", { children: "\u2022" }),
|
|
4316
|
+
/* @__PURE__ */ jsx22("span", { children: formatRelativeTime(thread.updatedAt) })
|
|
4196
4317
|
] })
|
|
4197
4318
|
] }),
|
|
4198
|
-
onDelete && /* @__PURE__ */
|
|
4319
|
+
onDelete && /* @__PURE__ */ jsx22(
|
|
4199
4320
|
"button",
|
|
4200
4321
|
{
|
|
4201
4322
|
onClick: (e) => {
|
|
@@ -4225,7 +4346,7 @@ function formatRelativeTime(date) {
|
|
|
4225
4346
|
}
|
|
4226
4347
|
|
|
4227
4348
|
// src/components/Threads/ThreadList.tsx
|
|
4228
|
-
import { jsx as
|
|
4349
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4229
4350
|
function ThreadList({
|
|
4230
4351
|
threads,
|
|
4231
4352
|
currentThreadId,
|
|
@@ -4234,13 +4355,13 @@ function ThreadList({
|
|
|
4234
4355
|
showSearch = false,
|
|
4235
4356
|
groupBy = "none"
|
|
4236
4357
|
}) {
|
|
4237
|
-
const [searchQuery, setSearchQuery] =
|
|
4358
|
+
const [searchQuery, setSearchQuery] = useState9("");
|
|
4238
4359
|
const filteredThreads = threads.filter(
|
|
4239
4360
|
(thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
|
|
4240
4361
|
);
|
|
4241
4362
|
const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
|
|
4242
|
-
return /* @__PURE__ */
|
|
4243
|
-
showSearch && /* @__PURE__ */
|
|
4363
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col h-full", children: [
|
|
4364
|
+
showSearch && /* @__PURE__ */ jsx23("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx23(
|
|
4244
4365
|
"input",
|
|
4245
4366
|
{
|
|
4246
4367
|
type: "text",
|
|
@@ -4250,10 +4371,10 @@ function ThreadList({
|
|
|
4250
4371
|
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
4372
|
}
|
|
4252
4373
|
) }),
|
|
4253
|
-
/* @__PURE__ */
|
|
4254
|
-
Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */
|
|
4255
|
-
groupBy !== "none" && /* @__PURE__ */
|
|
4256
|
-
groupThreads.map((thread) => /* @__PURE__ */
|
|
4374
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-y-auto", children: [
|
|
4375
|
+
Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs19("div", { children: [
|
|
4376
|
+
groupBy !== "none" && /* @__PURE__ */ jsx23("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
|
|
4377
|
+
groupThreads.map((thread) => /* @__PURE__ */ jsx23(
|
|
4257
4378
|
ThreadItem,
|
|
4258
4379
|
{
|
|
4259
4380
|
thread,
|
|
@@ -4264,9 +4385,9 @@ function ThreadList({
|
|
|
4264
4385
|
thread.id
|
|
4265
4386
|
))
|
|
4266
4387
|
] }, group)),
|
|
4267
|
-
filteredThreads.length === 0 && /* @__PURE__ */
|
|
4268
|
-
/* @__PURE__ */
|
|
4269
|
-
/* @__PURE__ */
|
|
4388
|
+
filteredThreads.length === 0 && /* @__PURE__ */ jsxs19("div", { className: "p-8 text-center text-neutral-500", children: [
|
|
4389
|
+
/* @__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" }) }),
|
|
4390
|
+
/* @__PURE__ */ jsx23("p", { children: "No conversations found" })
|
|
4270
4391
|
] })
|
|
4271
4392
|
] })
|
|
4272
4393
|
] });
|
|
@@ -4298,7 +4419,7 @@ function groupThreadsByDate(threads) {
|
|
|
4298
4419
|
}
|
|
4299
4420
|
|
|
4300
4421
|
// src/components/Threads/Threads.tsx
|
|
4301
|
-
import { jsx as
|
|
4422
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4302
4423
|
function Threads({
|
|
4303
4424
|
threads,
|
|
4304
4425
|
currentThreadId,
|
|
@@ -4317,8 +4438,8 @@ function Threads({
|
|
|
4317
4438
|
tabs: "flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto"
|
|
4318
4439
|
};
|
|
4319
4440
|
if (variant === "tabs") {
|
|
4320
|
-
return /* @__PURE__ */
|
|
4321
|
-
threads.slice(0, 5).map((thread) => /* @__PURE__ */
|
|
4441
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn(variantClasses[variant], className), children: [
|
|
4442
|
+
threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx24(
|
|
4322
4443
|
"button",
|
|
4323
4444
|
{
|
|
4324
4445
|
onClick: () => onThreadSelect?.(thread.id),
|
|
@@ -4330,7 +4451,7 @@ function Threads({
|
|
|
4330
4451
|
},
|
|
4331
4452
|
thread.id
|
|
4332
4453
|
)),
|
|
4333
|
-
showNewButton && onNewThread && /* @__PURE__ */
|
|
4454
|
+
showNewButton && onNewThread && /* @__PURE__ */ jsx24(
|
|
4334
4455
|
"button",
|
|
4335
4456
|
{
|
|
4336
4457
|
onClick: onNewThread,
|
|
@@ -4340,8 +4461,8 @@ function Threads({
|
|
|
4340
4461
|
)
|
|
4341
4462
|
] });
|
|
4342
4463
|
}
|
|
4343
|
-
return /* @__PURE__ */
|
|
4344
|
-
showNewButton && onNewThread && /* @__PURE__ */
|
|
4464
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
|
|
4465
|
+
showNewButton && onNewThread && /* @__PURE__ */ jsx24("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx24(
|
|
4345
4466
|
"button",
|
|
4346
4467
|
{
|
|
4347
4468
|
onClick: onNewThread,
|
|
@@ -4349,7 +4470,7 @@ function Threads({
|
|
|
4349
4470
|
children: "+ New Conversation"
|
|
4350
4471
|
}
|
|
4351
4472
|
) }),
|
|
4352
|
-
/* @__PURE__ */
|
|
4473
|
+
/* @__PURE__ */ jsx24(
|
|
4353
4474
|
ThreadList,
|
|
4354
4475
|
{
|
|
4355
4476
|
threads,
|