@timbal-ai/timbal-react 0.5.2 → 0.5.4
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.cjs +676 -658
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.esm.js +410 -392
- package/dist/styles.css +1 -4
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -32,12 +32,12 @@ var index_exports = {};
|
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
ARTIFACT_AGENT_INSTRUCTIONS: () => ARTIFACT_AGENT_INSTRUCTIONS,
|
|
34
34
|
ARTIFACT_FENCE_LANGUAGES: () => ARTIFACT_FENCE_LANGUAGES,
|
|
35
|
-
ActionBarPrimitive: () =>
|
|
35
|
+
ActionBarPrimitive: () => import_react46.ActionBarPrimitive,
|
|
36
36
|
ArtifactCard: () => ArtifactCard,
|
|
37
37
|
ArtifactRegistryProvider: () => ArtifactRegistryProvider,
|
|
38
38
|
ArtifactView: () => ArtifactView,
|
|
39
|
-
AssistantRuntimeProvider: () =>
|
|
40
|
-
AuiIf: () =>
|
|
39
|
+
AssistantRuntimeProvider: () => import_react46.AssistantRuntimeProvider,
|
|
40
|
+
AuiIf: () => import_react46.AuiIf,
|
|
41
41
|
AuthGuard: () => AuthGuard,
|
|
42
42
|
Avatar: () => Avatar,
|
|
43
43
|
AvatarFallback: () => AvatarFallback,
|
|
@@ -45,7 +45,7 @@ __export(index_exports, {
|
|
|
45
45
|
Button: () => Button,
|
|
46
46
|
ChartArtifactView: () => ChartArtifactView,
|
|
47
47
|
Composer: () => Composer,
|
|
48
|
-
ComposerPrimitive: () =>
|
|
48
|
+
ComposerPrimitive: () => import_react46.ComposerPrimitive,
|
|
49
49
|
DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
|
|
50
50
|
Dialog: () => Dialog,
|
|
51
51
|
DialogClose: () => DialogClose,
|
|
@@ -57,7 +57,7 @@ __export(index_exports, {
|
|
|
57
57
|
HtmlArtifactView: () => HtmlArtifactView,
|
|
58
58
|
JsonArtifactView: () => JsonArtifactView,
|
|
59
59
|
MarkdownText: () => MarkdownText,
|
|
60
|
-
MessagePrimitive: () =>
|
|
60
|
+
MessagePrimitive: () => import_react46.MessagePrimitive,
|
|
61
61
|
ModeToggle: () => ModeToggle,
|
|
62
62
|
QuestionArtifactView: () => QuestionArtifactView,
|
|
63
63
|
SessionProvider: () => SessionProvider,
|
|
@@ -67,7 +67,7 @@ __export(index_exports, {
|
|
|
67
67
|
Suggestions: () => Suggestions,
|
|
68
68
|
TableArtifactView: () => TableArtifactView,
|
|
69
69
|
Thread: () => Thread,
|
|
70
|
-
ThreadPrimitive: () =>
|
|
70
|
+
ThreadPrimitive: () => import_react46.ThreadPrimitive,
|
|
71
71
|
TimbalChat: () => TimbalChat,
|
|
72
72
|
TimbalChatShell: () => TimbalChatShell,
|
|
73
73
|
TimbalMark: () => TimbalMark,
|
|
@@ -109,13 +109,13 @@ __export(index_exports, {
|
|
|
109
109
|
setRefreshToken: () => setRefreshToken,
|
|
110
110
|
splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
|
|
111
111
|
useArtifactRegistry: () => useArtifactRegistry,
|
|
112
|
-
useComposerRuntime: () =>
|
|
113
|
-
useMessageRuntime: () =>
|
|
112
|
+
useComposerRuntime: () => import_react46.useComposerRuntime,
|
|
113
|
+
useMessageRuntime: () => import_react46.useMessageRuntime,
|
|
114
114
|
useOptionalSession: () => useOptionalSession,
|
|
115
115
|
useResolvedSuggestions: () => useResolvedSuggestions,
|
|
116
116
|
useSession: () => useSession,
|
|
117
|
-
useThread: () =>
|
|
118
|
-
useThreadRuntime: () =>
|
|
117
|
+
useThread: () => import_react46.useThread,
|
|
118
|
+
useThreadRuntime: () => import_react46.useThreadRuntime,
|
|
119
119
|
useTimbalRuntime: () => useTimbalRuntime,
|
|
120
120
|
useTimbalStream: () => useTimbalStream,
|
|
121
121
|
useToolRunning: () => useToolRunning,
|
|
@@ -128,8 +128,8 @@ __export(index_exports, {
|
|
|
128
128
|
module.exports = __toCommonJS(index_exports);
|
|
129
129
|
|
|
130
130
|
// src/runtime/provider.tsx
|
|
131
|
-
var
|
|
132
|
-
var
|
|
131
|
+
var import_react2 = require("react");
|
|
132
|
+
var import_react3 = require("@assistant-ui/react");
|
|
133
133
|
var import_timbal_sdk = require("@timbal-ai/timbal-sdk");
|
|
134
134
|
|
|
135
135
|
// src/auth/tokens.ts
|
|
@@ -562,6 +562,20 @@ function buildPromptBody({
|
|
|
562
562
|
return { prompt: parts, context };
|
|
563
563
|
}
|
|
564
564
|
|
|
565
|
+
// src/runtime/attachments-context.tsx
|
|
566
|
+
var import_react = require("react");
|
|
567
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
568
|
+
var TimbalAttachmentsEnabledContext = (0, import_react.createContext)(false);
|
|
569
|
+
function TimbalAttachmentsEnabledProvider({
|
|
570
|
+
enabled,
|
|
571
|
+
children
|
|
572
|
+
}) {
|
|
573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimbalAttachmentsEnabledContext.Provider, { value: enabled, children });
|
|
574
|
+
}
|
|
575
|
+
function useTimbalAttachmentsEnabled() {
|
|
576
|
+
return (0, import_react.useContext)(TimbalAttachmentsEnabledContext);
|
|
577
|
+
}
|
|
578
|
+
|
|
565
579
|
// src/runtime/upload-adapter.ts
|
|
566
580
|
var DEFAULT_UPLOAD_ACCEPT = "image/*,application/pdf,text/*,.md,.json,.csv,.tsv,.xlsx,.docx";
|
|
567
581
|
function createDefaultAttachmentAdapter({
|
|
@@ -615,8 +629,9 @@ async function readUploadedUrl(res) {
|
|
|
615
629
|
const contentType = res.headers.get("content-type") ?? "";
|
|
616
630
|
if (contentType.includes("application/json")) {
|
|
617
631
|
const data = await res.json();
|
|
618
|
-
const
|
|
619
|
-
|
|
632
|
+
const raw = data.url ?? data.signed_url ?? data.id;
|
|
633
|
+
const candidate = typeof raw === "string" ? raw : typeof raw === "number" ? String(raw) : "";
|
|
634
|
+
if (candidate.length > 0) {
|
|
620
635
|
return candidate;
|
|
621
636
|
}
|
|
622
637
|
throw new Error(
|
|
@@ -668,7 +683,7 @@ function resolveAttachmentAdapter(attachments, options = {}) {
|
|
|
668
683
|
}
|
|
669
684
|
|
|
670
685
|
// src/runtime/provider.tsx
|
|
671
|
-
var
|
|
686
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
672
687
|
function projectAttachment(attachment) {
|
|
673
688
|
const filename = attachment.name ?? "attachment";
|
|
674
689
|
const mimeType = attachment.contentType ?? "application/octet-stream";
|
|
@@ -733,22 +748,22 @@ function useTimbalStream({
|
|
|
733
748
|
fetch: fetchFn,
|
|
734
749
|
debug = false
|
|
735
750
|
}) {
|
|
736
|
-
const [messages, setMessages] = (0,
|
|
737
|
-
const [isRunning, setIsRunning] = (0,
|
|
738
|
-
const abortRef = (0,
|
|
739
|
-
const messagesRef = (0,
|
|
740
|
-
const fetchFnRef = (0,
|
|
741
|
-
(0,
|
|
751
|
+
const [messages, setMessages] = (0, import_react2.useState)([]);
|
|
752
|
+
const [isRunning, setIsRunning] = (0, import_react2.useState)(false);
|
|
753
|
+
const abortRef = (0, import_react2.useRef)(null);
|
|
754
|
+
const messagesRef = (0, import_react2.useRef)([]);
|
|
755
|
+
const fetchFnRef = (0, import_react2.useRef)(fetchFn ?? authFetch);
|
|
756
|
+
(0, import_react2.useEffect)(() => {
|
|
742
757
|
fetchFnRef.current = fetchFn ?? authFetch;
|
|
743
758
|
}, [fetchFn]);
|
|
744
|
-
const debugRef = (0,
|
|
745
|
-
(0,
|
|
759
|
+
const debugRef = (0, import_react2.useRef)(debug);
|
|
760
|
+
(0, import_react2.useEffect)(() => {
|
|
746
761
|
debugRef.current = debug;
|
|
747
762
|
}, [debug]);
|
|
748
|
-
(0,
|
|
763
|
+
(0, import_react2.useEffect)(() => {
|
|
749
764
|
messagesRef.current = messages;
|
|
750
765
|
}, [messages]);
|
|
751
|
-
const streamAssistantResponse = (0,
|
|
766
|
+
const streamAssistantResponse = (0, import_react2.useCallback)(
|
|
752
767
|
async (input, attachments, userId, assistantId, parentId, signal) => {
|
|
753
768
|
const state = createReducerState();
|
|
754
769
|
const flush = () => {
|
|
@@ -827,7 +842,7 @@ function useTimbalStream({
|
|
|
827
842
|
},
|
|
828
843
|
[workforceId, baseUrl]
|
|
829
844
|
);
|
|
830
|
-
const send = (0,
|
|
845
|
+
const send = (0, import_react2.useCallback)(
|
|
831
846
|
async (input, options) => {
|
|
832
847
|
const userId = crypto.randomUUID();
|
|
833
848
|
const assistantId = crypto.randomUUID();
|
|
@@ -858,7 +873,7 @@ function useTimbalStream({
|
|
|
858
873
|
},
|
|
859
874
|
[streamAssistantResponse]
|
|
860
875
|
);
|
|
861
|
-
const reload = (0,
|
|
876
|
+
const reload = (0, import_react2.useCallback)(
|
|
862
877
|
async (messageId) => {
|
|
863
878
|
const current = messagesRef.current;
|
|
864
879
|
const idx = messageId ? current.findIndex((m) => m.id === messageId) : current.length - 2;
|
|
@@ -887,14 +902,14 @@ function useTimbalStream({
|
|
|
887
902
|
},
|
|
888
903
|
[streamAssistantResponse]
|
|
889
904
|
);
|
|
890
|
-
const cancel = (0,
|
|
905
|
+
const cancel = (0, import_react2.useCallback)(() => {
|
|
891
906
|
abortRef.current?.abort();
|
|
892
907
|
}, []);
|
|
893
|
-
const clear = (0,
|
|
908
|
+
const clear = (0, import_react2.useCallback)(() => {
|
|
894
909
|
abortRef.current?.abort();
|
|
895
910
|
setMessages([]);
|
|
896
911
|
}, []);
|
|
897
|
-
return (0,
|
|
912
|
+
return (0, import_react2.useMemo)(
|
|
898
913
|
() => ({ messages, isRunning, send, reload, cancel, clear }),
|
|
899
914
|
[messages, isRunning, send, reload, cancel, clear]
|
|
900
915
|
);
|
|
@@ -905,9 +920,9 @@ function readTopLevelStartRunId(event) {
|
|
|
905
920
|
}
|
|
906
921
|
return null;
|
|
907
922
|
}
|
|
908
|
-
var TimbalStreamContext = (0,
|
|
923
|
+
var TimbalStreamContext = (0, import_react2.createContext)(null);
|
|
909
924
|
function useTimbalRuntime() {
|
|
910
|
-
const ctx = (0,
|
|
925
|
+
const ctx = (0, import_react2.useContext)(TimbalStreamContext);
|
|
911
926
|
if (!ctx) {
|
|
912
927
|
throw new Error(
|
|
913
928
|
"useTimbalRuntime must be used inside a <TimbalRuntimeProvider>."
|
|
@@ -931,7 +946,7 @@ function TimbalRuntimeProvider({
|
|
|
931
946
|
fetch: fetchFn,
|
|
932
947
|
debug
|
|
933
948
|
});
|
|
934
|
-
const attachmentAdapter = (0,
|
|
949
|
+
const attachmentAdapter = (0, import_react2.useMemo)(
|
|
935
950
|
() => resolveAttachmentAdapter(attachments, {
|
|
936
951
|
baseUrl,
|
|
937
952
|
fetch: fetchFn,
|
|
@@ -940,7 +955,7 @@ function TimbalRuntimeProvider({
|
|
|
940
955
|
}),
|
|
941
956
|
[attachments, attachmentsUploadUrl, attachmentsAccept, baseUrl, fetchFn]
|
|
942
957
|
);
|
|
943
|
-
const onNew = (0,
|
|
958
|
+
const onNew = (0, import_react2.useCallback)(
|
|
944
959
|
async (message) => {
|
|
945
960
|
const textPart = message.content.find((c) => c.type === "text");
|
|
946
961
|
const input = textPart && textPart.type === "text" ? textPart.text : "";
|
|
@@ -955,16 +970,16 @@ function TimbalRuntimeProvider({
|
|
|
955
970
|
},
|
|
956
971
|
[stream]
|
|
957
972
|
);
|
|
958
|
-
const onReload = (0,
|
|
973
|
+
const onReload = (0, import_react2.useCallback)(
|
|
959
974
|
async (messageId) => {
|
|
960
975
|
await stream.reload(messageId);
|
|
961
976
|
},
|
|
962
977
|
[stream]
|
|
963
978
|
);
|
|
964
|
-
const onCancel = (0,
|
|
979
|
+
const onCancel = (0, import_react2.useCallback)(async () => {
|
|
965
980
|
stream.cancel();
|
|
966
981
|
}, [stream]);
|
|
967
|
-
const runtime = (0,
|
|
982
|
+
const runtime = (0, import_react3.useExternalStoreRuntime)({
|
|
968
983
|
isRunning: stream.isRunning,
|
|
969
984
|
messages: stream.messages,
|
|
970
985
|
convertMessage,
|
|
@@ -974,7 +989,7 @@ function TimbalRuntimeProvider({
|
|
|
974
989
|
onCancel,
|
|
975
990
|
...attachmentAdapter ? { adapters: { attachments: attachmentAdapter } } : {}
|
|
976
991
|
});
|
|
977
|
-
return /* @__PURE__ */ (0,
|
|
992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TimbalStreamContext.Provider, { value: stream, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TimbalAttachmentsEnabledProvider, { enabled: attachmentAdapter !== void 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.AssistantRuntimeProvider, { runtime, children }) }) });
|
|
978
993
|
}
|
|
979
994
|
function findParentIdFromAuiParent(messages, auiParentId) {
|
|
980
995
|
const idx = messages.findIndex((m) => m.id === auiParentId);
|
|
@@ -986,15 +1001,15 @@ function findParentIdFromAuiParent(messages, auiParentId) {
|
|
|
986
1001
|
var import_timbal_sdk2 = require("@timbal-ai/timbal-sdk");
|
|
987
1002
|
|
|
988
1003
|
// src/components/thread.tsx
|
|
989
|
-
var
|
|
990
|
-
var
|
|
1004
|
+
var import_react26 = require("react");
|
|
1005
|
+
var import_react27 = require("@assistant-ui/react");
|
|
991
1006
|
var import_lucide_react8 = require("lucide-react");
|
|
992
|
-
var
|
|
1007
|
+
var import_react28 = require("motion/react");
|
|
993
1008
|
|
|
994
1009
|
// src/components/attachment.tsx
|
|
995
|
-
var
|
|
1010
|
+
var import_react5 = require("react");
|
|
996
1011
|
var import_lucide_react2 = require("lucide-react");
|
|
997
|
-
var
|
|
1012
|
+
var import_react6 = require("@assistant-ui/react");
|
|
998
1013
|
var import_shallow = require("zustand/shallow");
|
|
999
1014
|
|
|
1000
1015
|
// src/ui/tooltip.tsx
|
|
@@ -1008,12 +1023,12 @@ function cn(...inputs) {
|
|
|
1008
1023
|
}
|
|
1009
1024
|
|
|
1010
1025
|
// src/ui/tooltip.tsx
|
|
1011
|
-
var
|
|
1026
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1012
1027
|
function TooltipProvider({
|
|
1013
1028
|
delayDuration = 0,
|
|
1014
1029
|
...props
|
|
1015
1030
|
}) {
|
|
1016
|
-
return /* @__PURE__ */ (0,
|
|
1031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1017
1032
|
import_radix_ui.Tooltip.Provider,
|
|
1018
1033
|
{
|
|
1019
1034
|
"data-slot": "tooltip-provider",
|
|
@@ -1025,12 +1040,12 @@ function TooltipProvider({
|
|
|
1025
1040
|
function Tooltip({
|
|
1026
1041
|
...props
|
|
1027
1042
|
}) {
|
|
1028
|
-
return /* @__PURE__ */ (0,
|
|
1043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
1029
1044
|
}
|
|
1030
1045
|
function TooltipTrigger({
|
|
1031
1046
|
...props
|
|
1032
1047
|
}) {
|
|
1033
|
-
return /* @__PURE__ */ (0,
|
|
1048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
1034
1049
|
}
|
|
1035
1050
|
function TooltipContent({
|
|
1036
1051
|
className,
|
|
@@ -1038,7 +1053,7 @@ function TooltipContent({
|
|
|
1038
1053
|
children,
|
|
1039
1054
|
...props
|
|
1040
1055
|
}) {
|
|
1041
|
-
return /* @__PURE__ */ (0,
|
|
1056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1042
1057
|
import_radix_ui.Tooltip.Content,
|
|
1043
1058
|
{
|
|
1044
1059
|
"data-slot": "tooltip-content",
|
|
@@ -1050,7 +1065,7 @@ function TooltipContent({
|
|
|
1050
1065
|
...props,
|
|
1051
1066
|
children: [
|
|
1052
1067
|
children,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1068
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
|
|
1054
1069
|
]
|
|
1055
1070
|
}
|
|
1056
1071
|
) });
|
|
@@ -1059,32 +1074,32 @@ function TooltipContent({
|
|
|
1059
1074
|
// src/ui/dialog.tsx
|
|
1060
1075
|
var import_lucide_react = require("lucide-react");
|
|
1061
1076
|
var import_radix_ui2 = require("radix-ui");
|
|
1062
|
-
var
|
|
1077
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1063
1078
|
function Dialog({
|
|
1064
1079
|
...props
|
|
1065
1080
|
}) {
|
|
1066
|
-
return /* @__PURE__ */ (0,
|
|
1081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
1067
1082
|
}
|
|
1068
1083
|
function DialogTrigger({
|
|
1069
1084
|
...props
|
|
1070
1085
|
}) {
|
|
1071
|
-
return /* @__PURE__ */ (0,
|
|
1086
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
1072
1087
|
}
|
|
1073
1088
|
function DialogPortal({
|
|
1074
1089
|
...props
|
|
1075
1090
|
}) {
|
|
1076
|
-
return /* @__PURE__ */ (0,
|
|
1091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
|
|
1077
1092
|
}
|
|
1078
1093
|
function DialogClose({
|
|
1079
1094
|
...props
|
|
1080
1095
|
}) {
|
|
1081
|
-
return /* @__PURE__ */ (0,
|
|
1096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Close, { "data-slot": "dialog-close", ...props });
|
|
1082
1097
|
}
|
|
1083
1098
|
function DialogOverlay({
|
|
1084
1099
|
className,
|
|
1085
1100
|
...props
|
|
1086
1101
|
}) {
|
|
1087
|
-
return /* @__PURE__ */ (0,
|
|
1102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1088
1103
|
import_radix_ui2.Dialog.Overlay,
|
|
1089
1104
|
{
|
|
1090
1105
|
"data-slot": "dialog-overlay",
|
|
@@ -1102,9 +1117,9 @@ function DialogContent({
|
|
|
1102
1117
|
showCloseButton = true,
|
|
1103
1118
|
...props
|
|
1104
1119
|
}) {
|
|
1105
|
-
return /* @__PURE__ */ (0,
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
/* @__PURE__ */ (0,
|
|
1120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
1121
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogOverlay, {}),
|
|
1122
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1108
1123
|
import_radix_ui2.Dialog.Content,
|
|
1109
1124
|
{
|
|
1110
1125
|
"data-slot": "dialog-content",
|
|
@@ -1115,14 +1130,14 @@ function DialogContent({
|
|
|
1115
1130
|
...props,
|
|
1116
1131
|
children: [
|
|
1117
1132
|
children,
|
|
1118
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
1133
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1119
1134
|
import_radix_ui2.Dialog.Close,
|
|
1120
1135
|
{
|
|
1121
1136
|
"data-slot": "dialog-close",
|
|
1122
1137
|
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
1123
1138
|
children: [
|
|
1124
|
-
/* @__PURE__ */ (0,
|
|
1125
|
-
/* @__PURE__ */ (0,
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.XIcon, {}),
|
|
1140
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Close" })
|
|
1126
1141
|
]
|
|
1127
1142
|
}
|
|
1128
1143
|
)
|
|
@@ -1135,7 +1150,7 @@ function DialogTitle({
|
|
|
1135
1150
|
className,
|
|
1136
1151
|
...props
|
|
1137
1152
|
}) {
|
|
1138
|
-
return /* @__PURE__ */ (0,
|
|
1153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1139
1154
|
import_radix_ui2.Dialog.Title,
|
|
1140
1155
|
{
|
|
1141
1156
|
"data-slot": "dialog-title",
|
|
@@ -1147,13 +1162,13 @@ function DialogTitle({
|
|
|
1147
1162
|
|
|
1148
1163
|
// src/ui/avatar.tsx
|
|
1149
1164
|
var import_radix_ui3 = require("radix-ui");
|
|
1150
|
-
var
|
|
1165
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1151
1166
|
function Avatar({
|
|
1152
1167
|
className,
|
|
1153
1168
|
size = "default",
|
|
1154
1169
|
...props
|
|
1155
1170
|
}) {
|
|
1156
|
-
return /* @__PURE__ */ (0,
|
|
1171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1157
1172
|
import_radix_ui3.Avatar.Root,
|
|
1158
1173
|
{
|
|
1159
1174
|
"data-slot": "avatar",
|
|
@@ -1170,7 +1185,7 @@ function AvatarImage({
|
|
|
1170
1185
|
className,
|
|
1171
1186
|
...props
|
|
1172
1187
|
}) {
|
|
1173
|
-
return /* @__PURE__ */ (0,
|
|
1188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1174
1189
|
import_radix_ui3.Avatar.Image,
|
|
1175
1190
|
{
|
|
1176
1191
|
"data-slot": "avatar-image",
|
|
@@ -1183,7 +1198,7 @@ function AvatarFallback({
|
|
|
1183
1198
|
className,
|
|
1184
1199
|
...props
|
|
1185
1200
|
}) {
|
|
1186
|
-
return /* @__PURE__ */ (0,
|
|
1201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1187
1202
|
import_radix_ui3.Avatar.Fallback,
|
|
1188
1203
|
{
|
|
1189
1204
|
"data-slot": "avatar-fallback",
|
|
@@ -1197,7 +1212,7 @@ function AvatarFallback({
|
|
|
1197
1212
|
}
|
|
1198
1213
|
|
|
1199
1214
|
// src/components/tooltip-icon-button.tsx
|
|
1200
|
-
var
|
|
1215
|
+
var import_react4 = require("react");
|
|
1201
1216
|
|
|
1202
1217
|
// src/ui/timbal-v2-button.tsx
|
|
1203
1218
|
var React = __toESM(require("react"), 1);
|
|
@@ -1281,7 +1296,7 @@ var TIMBAL_V2_SECONDARY_CHROME = [
|
|
|
1281
1296
|
].join(" ");
|
|
1282
1297
|
|
|
1283
1298
|
// src/ui/timbal-v2-button.tsx
|
|
1284
|
-
var
|
|
1299
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1285
1300
|
var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
|
|
1286
1301
|
variant = "secondary",
|
|
1287
1302
|
size = "sm",
|
|
@@ -1299,7 +1314,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
|
|
|
1299
1314
|
const Comp = asChild ? import_radix_ui4.Slot.Root : "button";
|
|
1300
1315
|
const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
|
|
1301
1316
|
const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : "rounded-full";
|
|
1302
|
-
return /* @__PURE__ */ (0,
|
|
1317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1303
1318
|
Comp,
|
|
1304
1319
|
{
|
|
1305
1320
|
ref,
|
|
@@ -1321,7 +1336,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
|
|
|
1321
1336
|
),
|
|
1322
1337
|
...props,
|
|
1323
1338
|
children: [
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1339
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1325
1340
|
"span",
|
|
1326
1341
|
{
|
|
1327
1342
|
"aria-hidden": true,
|
|
@@ -1331,7 +1346,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
|
|
|
1331
1346
|
)
|
|
1332
1347
|
}
|
|
1333
1348
|
),
|
|
1334
|
-
/* @__PURE__ */ (0,
|
|
1349
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1335
1350
|
"span",
|
|
1336
1351
|
{
|
|
1337
1352
|
className: cn(
|
|
@@ -1339,7 +1354,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
|
|
|
1339
1354
|
!isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
|
|
1340
1355
|
TIMBAL_V2_LABEL[variant]
|
|
1341
1356
|
),
|
|
1342
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
1357
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
|
|
1343
1358
|
}
|
|
1344
1359
|
)
|
|
1345
1360
|
]
|
|
@@ -1348,22 +1363,22 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
|
|
|
1348
1363
|
});
|
|
1349
1364
|
|
|
1350
1365
|
// src/components/tooltip-icon-button.tsx
|
|
1351
|
-
var
|
|
1352
|
-
var TooltipIconButton = (0,
|
|
1353
|
-
return /* @__PURE__ */ (0,
|
|
1354
|
-
/* @__PURE__ */ (0,
|
|
1366
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1367
|
+
var TooltipIconButton = (0, import_react4.forwardRef)(function TooltipIconButton2({ tooltip, side = "bottom", variant = "secondary", children, ...props }, ref) {
|
|
1368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { children: [
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(TimbalV2Button, { ref, variant, size: "sm", isIconOnly: true, ...props, children: [
|
|
1355
1370
|
children,
|
|
1356
|
-
/* @__PURE__ */ (0,
|
|
1371
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: tooltip })
|
|
1357
1372
|
] }) }),
|
|
1358
|
-
/* @__PURE__ */ (0,
|
|
1373
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContent, { side, children: tooltip })
|
|
1359
1374
|
] });
|
|
1360
1375
|
});
|
|
1361
1376
|
|
|
1362
1377
|
// src/components/attachment.tsx
|
|
1363
|
-
var
|
|
1378
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1364
1379
|
var useFileSrc = (file) => {
|
|
1365
|
-
const [src, setSrc] = (0,
|
|
1366
|
-
(0,
|
|
1380
|
+
const [src, setSrc] = (0, import_react5.useState)(void 0);
|
|
1381
|
+
(0, import_react5.useEffect)(() => {
|
|
1367
1382
|
if (!file) {
|
|
1368
1383
|
setSrc(void 0);
|
|
1369
1384
|
return;
|
|
@@ -1377,7 +1392,7 @@ var useFileSrc = (file) => {
|
|
|
1377
1392
|
return src;
|
|
1378
1393
|
};
|
|
1379
1394
|
var useAttachmentSrc = () => {
|
|
1380
|
-
const { file, src } = (0,
|
|
1395
|
+
const { file, src } = (0, import_react6.useAuiState)(
|
|
1381
1396
|
(0, import_shallow.useShallow)((s) => {
|
|
1382
1397
|
if (s.attachment.type !== "image") return {};
|
|
1383
1398
|
if (s.attachment.file) return { file: s.attachment.file };
|
|
@@ -1389,8 +1404,8 @@ var useAttachmentSrc = () => {
|
|
|
1389
1404
|
return useFileSrc(file) ?? src;
|
|
1390
1405
|
};
|
|
1391
1406
|
var AttachmentPreview = ({ src }) => {
|
|
1392
|
-
const [isLoaded, setIsLoaded] = (0,
|
|
1393
|
-
return /* @__PURE__ */ (0,
|
|
1407
|
+
const [isLoaded, setIsLoaded] = (0, import_react5.useState)(false);
|
|
1408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1394
1409
|
"img",
|
|
1395
1410
|
{
|
|
1396
1411
|
src,
|
|
@@ -1406,8 +1421,8 @@ var AttachmentPreview = ({ src }) => {
|
|
|
1406
1421
|
var AttachmentPreviewDialog = ({ children }) => {
|
|
1407
1422
|
const src = useAttachmentSrc();
|
|
1408
1423
|
if (!src) return children;
|
|
1409
|
-
return /* @__PURE__ */ (0,
|
|
1410
|
-
/* @__PURE__ */ (0,
|
|
1424
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Dialog, { children: [
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1411
1426
|
DialogTrigger,
|
|
1412
1427
|
{
|
|
1413
1428
|
className: "aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50",
|
|
@@ -1415,17 +1430,17 @@ var AttachmentPreviewDialog = ({ children }) => {
|
|
|
1415
1430
|
children
|
|
1416
1431
|
}
|
|
1417
1432
|
),
|
|
1418
|
-
/* @__PURE__ */ (0,
|
|
1419
|
-
/* @__PURE__ */ (0,
|
|
1420
|
-
/* @__PURE__ */ (0,
|
|
1433
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [
|
|
1434
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogTitle, { className: "aui-sr-only sr-only", children: "Image Attachment Preview" }),
|
|
1435
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AttachmentPreview, { src }) })
|
|
1421
1436
|
] })
|
|
1422
1437
|
] });
|
|
1423
1438
|
};
|
|
1424
1439
|
var AttachmentThumb = () => {
|
|
1425
|
-
const isImage = (0,
|
|
1440
|
+
const isImage = (0, import_react6.useAuiState)((s) => s.attachment.type === "image");
|
|
1426
1441
|
const src = useAttachmentSrc();
|
|
1427
|
-
return /* @__PURE__ */ (0,
|
|
1428
|
-
/* @__PURE__ */ (0,
|
|
1442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Avatar, { className: "aui-attachment-tile-avatar h-full w-full rounded-none", children: [
|
|
1443
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1429
1444
|
AvatarImage,
|
|
1430
1445
|
{
|
|
1431
1446
|
src,
|
|
@@ -1433,14 +1448,14 @@ var AttachmentThumb = () => {
|
|
|
1433
1448
|
className: "aui-attachment-tile-image object-cover"
|
|
1434
1449
|
}
|
|
1435
1450
|
),
|
|
1436
|
-
/* @__PURE__ */ (0,
|
|
1451
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarFallback, { delayMs: isImage ? 200 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.FileText, { className: "aui-attachment-tile-fallback-icon size-8 text-muted-foreground" }) })
|
|
1437
1452
|
] });
|
|
1438
1453
|
};
|
|
1439
1454
|
var AttachmentUI = () => {
|
|
1440
|
-
const aui = (0,
|
|
1455
|
+
const aui = (0, import_react6.useAui)();
|
|
1441
1456
|
const isComposer = aui.attachment.source === "composer";
|
|
1442
|
-
const isImage = (0,
|
|
1443
|
-
const typeLabel = (0,
|
|
1457
|
+
const isImage = (0, import_react6.useAuiState)((s) => s.attachment.type === "image");
|
|
1458
|
+
const typeLabel = (0, import_react6.useAuiState)((s) => {
|
|
1444
1459
|
const type = s.attachment.type;
|
|
1445
1460
|
switch (type) {
|
|
1446
1461
|
case "image":
|
|
@@ -1453,16 +1468,16 @@ var AttachmentUI = () => {
|
|
|
1453
1468
|
throw new Error(`Unknown attachment type: ${type}`);
|
|
1454
1469
|
}
|
|
1455
1470
|
});
|
|
1456
|
-
return /* @__PURE__ */ (0,
|
|
1457
|
-
/* @__PURE__ */ (0,
|
|
1458
|
-
|
|
1471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Tooltip, { children: [
|
|
1472
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1473
|
+
import_react6.AttachmentPrimitive.Root,
|
|
1459
1474
|
{
|
|
1460
1475
|
className: cn(
|
|
1461
1476
|
"aui-attachment-root relative",
|
|
1462
1477
|
isImage && "aui-attachment-root-composer only:[&>#attachment-tile]:size-24"
|
|
1463
1478
|
),
|
|
1464
1479
|
children: [
|
|
1465
|
-
/* @__PURE__ */ (0,
|
|
1480
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AttachmentPreviewDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1466
1481
|
"div",
|
|
1467
1482
|
{
|
|
1468
1483
|
className: cn(
|
|
@@ -1472,40 +1487,40 @@ var AttachmentUI = () => {
|
|
|
1472
1487
|
role: "button",
|
|
1473
1488
|
id: "attachment-tile",
|
|
1474
1489
|
"aria-label": `${typeLabel} attachment`,
|
|
1475
|
-
children: /* @__PURE__ */ (0,
|
|
1490
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AttachmentThumb, {})
|
|
1476
1491
|
}
|
|
1477
1492
|
) }) }),
|
|
1478
|
-
isComposer && /* @__PURE__ */ (0,
|
|
1493
|
+
isComposer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AttachmentRemove, {})
|
|
1479
1494
|
]
|
|
1480
1495
|
}
|
|
1481
1496
|
),
|
|
1482
|
-
/* @__PURE__ */ (0,
|
|
1497
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipContent, { side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.AttachmentPrimitive.Name, {}) })
|
|
1483
1498
|
] });
|
|
1484
1499
|
};
|
|
1485
1500
|
var AttachmentRemove = () => {
|
|
1486
|
-
return /* @__PURE__ */ (0,
|
|
1501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1487
1502
|
TooltipIconButton,
|
|
1488
1503
|
{
|
|
1489
1504
|
tooltip: "Remove file",
|
|
1490
1505
|
className: "aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-card text-foreground opacity-100 shadow-card hover:bg-card! [&_svg]:text-foreground hover:[&_svg]:text-destructive",
|
|
1491
1506
|
side: "top",
|
|
1492
|
-
children: /* @__PURE__ */ (0,
|
|
1507
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.XIcon, { className: "aui-attachment-remove-icon size-3" })
|
|
1493
1508
|
}
|
|
1494
1509
|
) });
|
|
1495
1510
|
};
|
|
1496
1511
|
var UserMessageAttachments = () => {
|
|
1497
|
-
return /* @__PURE__ */ (0,
|
|
1512
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.MessagePrimitive.Attachments, { components: { Attachment: AttachmentUI } }) });
|
|
1498
1513
|
};
|
|
1499
1514
|
var ComposerAttachments = () => {
|
|
1500
|
-
return /* @__PURE__ */ (0,
|
|
1501
|
-
|
|
1515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1516
|
+
import_react6.ComposerPrimitive.Attachments,
|
|
1502
1517
|
{
|
|
1503
1518
|
components: { Attachment: AttachmentUI }
|
|
1504
1519
|
}
|
|
1505
1520
|
) });
|
|
1506
1521
|
};
|
|
1507
1522
|
var ComposerAddAttachment = () => {
|
|
1508
|
-
return /* @__PURE__ */ (0,
|
|
1523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1509
1524
|
TooltipIconButton,
|
|
1510
1525
|
{
|
|
1511
1526
|
tooltip: "Add Attachment",
|
|
@@ -1513,7 +1528,7 @@ var ComposerAddAttachment = () => {
|
|
|
1513
1528
|
variant: "secondary",
|
|
1514
1529
|
className: "aui-composer-add-attachment shrink-0 text-muted-foreground",
|
|
1515
1530
|
"aria-label": "Add Attachment",
|
|
1516
|
-
children: /* @__PURE__ */ (0,
|
|
1531
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.PlusIcon, { className: "aui-attachment-add-icon size-4 stroke-[1.5]" })
|
|
1517
1532
|
}
|
|
1518
1533
|
) });
|
|
1519
1534
|
};
|
|
@@ -1525,25 +1540,25 @@ var import_react_markdown = require("@assistant-ui/react-markdown");
|
|
|
1525
1540
|
var import_remark_gfm = __toESM(require("remark-gfm"), 1);
|
|
1526
1541
|
var import_remark_math = __toESM(require("remark-math"), 1);
|
|
1527
1542
|
var import_rehype_katex = __toESM(require("rehype-katex"), 1);
|
|
1528
|
-
var
|
|
1543
|
+
var import_react17 = require("react");
|
|
1529
1544
|
var import_lucide_react4 = require("lucide-react");
|
|
1530
1545
|
|
|
1531
1546
|
// src/components/syntax-highlighter.tsx
|
|
1532
|
-
var
|
|
1547
|
+
var import_react16 = require("react");
|
|
1533
1548
|
var import_core = require("shiki/core");
|
|
1534
1549
|
var import_javascript = require("shiki/engine/javascript");
|
|
1535
1550
|
|
|
1536
1551
|
// src/artifacts/registry.tsx
|
|
1537
|
-
var
|
|
1552
|
+
var import_react15 = require("react");
|
|
1538
1553
|
|
|
1539
1554
|
// src/artifacts/chart-artifact.tsx
|
|
1540
|
-
var
|
|
1555
|
+
var import_react7 = require("react");
|
|
1541
1556
|
|
|
1542
1557
|
// src/artifacts/artifact-card.tsx
|
|
1543
|
-
var
|
|
1558
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1544
1559
|
var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
|
|
1545
1560
|
const hasHeader = Boolean(title || toolbar);
|
|
1546
|
-
return /* @__PURE__ */ (0,
|
|
1561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1547
1562
|
"div",
|
|
1548
1563
|
{
|
|
1549
1564
|
className: cn(
|
|
@@ -1552,31 +1567,31 @@ var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }
|
|
|
1552
1567
|
),
|
|
1553
1568
|
"data-artifact-kind": kind,
|
|
1554
1569
|
children: [
|
|
1555
|
-
hasHeader && /* @__PURE__ */ (0,
|
|
1556
|
-
title && /* @__PURE__ */ (0,
|
|
1557
|
-
!title && /* @__PURE__ */ (0,
|
|
1570
|
+
hasHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "aui-artifact-header flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-1.5", children: [
|
|
1571
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
|
|
1572
|
+
!title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1" }),
|
|
1558
1573
|
toolbar
|
|
1559
1574
|
] }),
|
|
1560
|
-
/* @__PURE__ */ (0,
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
|
|
1561
1576
|
]
|
|
1562
1577
|
}
|
|
1563
1578
|
);
|
|
1564
1579
|
};
|
|
1565
1580
|
|
|
1566
1581
|
// src/artifacts/chart-artifact.tsx
|
|
1567
|
-
var
|
|
1582
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1568
1583
|
var ChartArtifactView = ({
|
|
1569
1584
|
artifact
|
|
1570
1585
|
}) => {
|
|
1571
1586
|
const { type: _t, chartType = "bar", data = [] } = artifact;
|
|
1572
1587
|
const xKey = artifact.xKey ?? inferXKey(data);
|
|
1573
|
-
const dataKeys = (0,
|
|
1588
|
+
const dataKeys = (0, import_react7.useMemo)(() => {
|
|
1574
1589
|
if (Array.isArray(artifact.dataKey)) return artifact.dataKey;
|
|
1575
1590
|
if (typeof artifact.dataKey === "string") return [artifact.dataKey];
|
|
1576
1591
|
return inferDataKeys(data, xKey);
|
|
1577
1592
|
}, [artifact.dataKey, data, xKey]);
|
|
1578
|
-
return /* @__PURE__ */ (0,
|
|
1579
|
-
/* @__PURE__ */ (0,
|
|
1593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aui-artifact-chart p-3", children: [
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1580
1595
|
ChartSvg,
|
|
1581
1596
|
{
|
|
1582
1597
|
chartType,
|
|
@@ -1586,7 +1601,7 @@ var ChartArtifactView = ({
|
|
|
1586
1601
|
unit: artifact.unit
|
|
1587
1602
|
}
|
|
1588
1603
|
),
|
|
1589
|
-
dataKeys.length > 1 && /* @__PURE__ */ (0,
|
|
1604
|
+
dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Legend, { dataKeys })
|
|
1590
1605
|
] }) });
|
|
1591
1606
|
};
|
|
1592
1607
|
var COLORS = [
|
|
@@ -1602,10 +1617,10 @@ var H = 240;
|
|
|
1602
1617
|
var PAD = { top: 12, right: 16, bottom: 28, left: 36 };
|
|
1603
1618
|
var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
1604
1619
|
if (data.length === 0 || dataKeys.length === 0) {
|
|
1605
|
-
return /* @__PURE__ */ (0,
|
|
1620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EmptyState, {});
|
|
1606
1621
|
}
|
|
1607
1622
|
if (chartType === "pie") {
|
|
1608
|
-
return /* @__PURE__ */ (0,
|
|
1623
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PieChart, { data, xKey, dataKey: dataKeys[0] });
|
|
1609
1624
|
}
|
|
1610
1625
|
const innerW = W - PAD.left - PAD.right;
|
|
1611
1626
|
const innerH = H - PAD.top - PAD.bottom;
|
|
@@ -1618,7 +1633,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
|
1618
1633
|
const xStep = xCount > 1 ? innerW / (xCount - 1) : innerW;
|
|
1619
1634
|
const xPos = (i) => chartType === "bar" ? PAD.left + innerW * (i + 0.5) / xCount : PAD.left + i * xStep;
|
|
1620
1635
|
const ticks = niceTicks(minV, maxV);
|
|
1621
|
-
return /* @__PURE__ */ (0,
|
|
1636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1622
1637
|
"svg",
|
|
1623
1638
|
{
|
|
1624
1639
|
viewBox: `0 0 ${W} ${H}`,
|
|
@@ -1626,8 +1641,8 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
|
1626
1641
|
role: "img",
|
|
1627
1642
|
"aria-label": "Chart",
|
|
1628
1643
|
children: [
|
|
1629
|
-
ticks.map((t, i) => /* @__PURE__ */ (0,
|
|
1630
|
-
/* @__PURE__ */ (0,
|
|
1644
|
+
ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
|
|
1645
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1631
1646
|
"line",
|
|
1632
1647
|
{
|
|
1633
1648
|
x1: PAD.left,
|
|
@@ -1638,7 +1653,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
|
1638
1653
|
strokeOpacity: 0.08
|
|
1639
1654
|
}
|
|
1640
1655
|
),
|
|
1641
|
-
/* @__PURE__ */ (0,
|
|
1656
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1642
1657
|
"text",
|
|
1643
1658
|
{
|
|
1644
1659
|
x: PAD.left - 6,
|
|
@@ -1650,7 +1665,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
|
1650
1665
|
}
|
|
1651
1666
|
)
|
|
1652
1667
|
] }, i)),
|
|
1653
|
-
data.map((d, i) => /* @__PURE__ */ (0,
|
|
1668
|
+
data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1654
1669
|
"text",
|
|
1655
1670
|
{
|
|
1656
1671
|
x: xPos(i),
|
|
@@ -1662,7 +1677,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
|
1662
1677
|
i
|
|
1663
1678
|
)),
|
|
1664
1679
|
chartType === "bar" && renderBars({ data, dataKeys, xCount, xPos, yScale, minV, innerW }),
|
|
1665
|
-
chartType === "line" && dataKeys.map((k, ki) => /* @__PURE__ */ (0,
|
|
1680
|
+
chartType === "line" && dataKeys.map((k, ki) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1666
1681
|
Polyline,
|
|
1667
1682
|
{
|
|
1668
1683
|
data,
|
|
@@ -1673,7 +1688,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
|
|
|
1673
1688
|
},
|
|
1674
1689
|
k
|
|
1675
1690
|
)),
|
|
1676
|
-
chartType === "area" && dataKeys.map((k, ki) => /* @__PURE__ */ (0,
|
|
1691
|
+
chartType === "area" && dataKeys.map((k, ki) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1677
1692
|
Area,
|
|
1678
1693
|
{
|
|
1679
1694
|
data,
|
|
@@ -1701,7 +1716,7 @@ function renderBars(args) {
|
|
|
1701
1716
|
const x = xPos(i) - groupWidth / 2 + ki * barWidth;
|
|
1702
1717
|
const top = Math.min(y, baseY);
|
|
1703
1718
|
const height = Math.abs(y - baseY);
|
|
1704
|
-
return /* @__PURE__ */ (0,
|
|
1719
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1705
1720
|
"rect",
|
|
1706
1721
|
{
|
|
1707
1722
|
x,
|
|
@@ -1718,7 +1733,7 @@ function renderBars(args) {
|
|
|
1718
1733
|
}
|
|
1719
1734
|
var Polyline = ({ data, dataKey, xPos, yScale, color }) => {
|
|
1720
1735
|
const points = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
|
|
1721
|
-
return /* @__PURE__ */ (0,
|
|
1736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1722
1737
|
"polyline",
|
|
1723
1738
|
{
|
|
1724
1739
|
points,
|
|
@@ -1734,9 +1749,9 @@ var Area = ({ data, dataKey, xPos, yScale, baseY, color }) => {
|
|
|
1734
1749
|
if (data.length === 0) return null;
|
|
1735
1750
|
const top = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
|
|
1736
1751
|
const path = `M ${xPos(0)},${baseY} L ${top} L ${xPos(data.length - 1)},${baseY} Z`;
|
|
1737
|
-
return /* @__PURE__ */ (0,
|
|
1738
|
-
/* @__PURE__ */ (0,
|
|
1739
|
-
/* @__PURE__ */ (0,
|
|
1752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
1753
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: path, fill: color, fillOpacity: 0.18 }),
|
|
1754
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Polyline, { data, dataKey, xPos, yScale, color })
|
|
1740
1755
|
] });
|
|
1741
1756
|
};
|
|
1742
1757
|
var PieChart = ({ data, xKey, dataKey }) => {
|
|
@@ -1745,7 +1760,7 @@ var PieChart = ({ data, xKey, dataKey }) => {
|
|
|
1745
1760
|
const r = Math.min(W, H) / 2 - 16;
|
|
1746
1761
|
const total = data.reduce((sum, d) => sum + toNum(d[dataKey]), 0) || 1;
|
|
1747
1762
|
let acc = 0;
|
|
1748
|
-
return /* @__PURE__ */ (0,
|
|
1763
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1749
1764
|
"svg",
|
|
1750
1765
|
{
|
|
1751
1766
|
viewBox: `0 0 ${W} ${H}`,
|
|
@@ -1757,7 +1772,7 @@ var PieChart = ({ data, xKey, dataKey }) => {
|
|
|
1757
1772
|
const start = acc / total * Math.PI * 2;
|
|
1758
1773
|
acc += value;
|
|
1759
1774
|
const end = acc / total * Math.PI * 2;
|
|
1760
|
-
return /* @__PURE__ */ (0,
|
|
1775
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1761
1776
|
PieSlice,
|
|
1762
1777
|
{
|
|
1763
1778
|
cx,
|
|
@@ -1784,9 +1799,9 @@ var PieSlice = ({ cx, cy, r, start, end, color, label }) => {
|
|
|
1784
1799
|
const mid = (start + end) / 2;
|
|
1785
1800
|
const lx = cx + Math.sin(mid) * (r * 0.65);
|
|
1786
1801
|
const ly = cy - Math.cos(mid) * (r * 0.65);
|
|
1787
|
-
return /* @__PURE__ */ (0,
|
|
1788
|
-
/* @__PURE__ */ (0,
|
|
1789
|
-
/* @__PURE__ */ (0,
|
|
1802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: path, fill: color, stroke: "var(--background, #fff)", strokeWidth: 1 }),
|
|
1804
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1790
1805
|
"text",
|
|
1791
1806
|
{
|
|
1792
1807
|
x: lx,
|
|
@@ -1799,8 +1814,8 @@ var PieSlice = ({ cx, cy, r, start, end, color, label }) => {
|
|
|
1799
1814
|
)
|
|
1800
1815
|
] });
|
|
1801
1816
|
};
|
|
1802
|
-
var Legend = ({ dataKeys }) => /* @__PURE__ */ (0,
|
|
1803
|
-
/* @__PURE__ */ (0,
|
|
1817
|
+
var Legend = ({ dataKeys }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aui-artifact-chart-legend mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: dataKeys.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
|
|
1818
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1804
1819
|
"span",
|
|
1805
1820
|
{
|
|
1806
1821
|
className: "inline-block size-2 rounded-sm",
|
|
@@ -1810,7 +1825,7 @@ var Legend = ({ dataKeys }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div
|
|
|
1810
1825
|
),
|
|
1811
1826
|
k
|
|
1812
1827
|
] }, k)) });
|
|
1813
|
-
var EmptyState = () => /* @__PURE__ */ (0,
|
|
1828
|
+
var EmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aui-artifact-chart-empty flex h-32 items-center justify-center text-xs text-muted-foreground", children: "No data" });
|
|
1814
1829
|
function inferXKey(data) {
|
|
1815
1830
|
if (data.length === 0) return "x";
|
|
1816
1831
|
for (const k of Object.keys(data[0])) {
|
|
@@ -1857,8 +1872,8 @@ function formatTick(v, unit) {
|
|
|
1857
1872
|
}
|
|
1858
1873
|
|
|
1859
1874
|
// src/artifacts/question-artifact.tsx
|
|
1860
|
-
var
|
|
1861
|
-
var
|
|
1875
|
+
var import_react8 = require("react");
|
|
1876
|
+
var import_react9 = require("@assistant-ui/react");
|
|
1862
1877
|
var import_lucide_react3 = require("lucide-react");
|
|
1863
1878
|
|
|
1864
1879
|
// src/design/classes.ts
|
|
@@ -1969,12 +1984,12 @@ var studioQuestionOptionSelectedClass = cn(
|
|
|
1969
1984
|
);
|
|
1970
1985
|
|
|
1971
1986
|
// src/artifacts/question-artifact.tsx
|
|
1972
|
-
var
|
|
1987
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1973
1988
|
function optionKey(option, index) {
|
|
1974
1989
|
const id = option.id?.trim();
|
|
1975
1990
|
return id ? id : `__option-${index}`;
|
|
1976
1991
|
}
|
|
1977
|
-
var OptionRadio = ({ selected }) => /* @__PURE__ */ (0,
|
|
1992
|
+
var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1978
1993
|
"span",
|
|
1979
1994
|
{
|
|
1980
1995
|
className: cn(
|
|
@@ -1982,18 +1997,18 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx
|
|
|
1982
1997
|
selected ? "border-foreground bg-foreground text-background" : "border-border bg-background"
|
|
1983
1998
|
),
|
|
1984
1999
|
"aria-hidden": true,
|
|
1985
|
-
children: selected ? /* @__PURE__ */ (0,
|
|
2000
|
+
children: selected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
|
|
1986
2001
|
}
|
|
1987
2002
|
);
|
|
1988
2003
|
var QuestionArtifactView = ({
|
|
1989
2004
|
artifact
|
|
1990
2005
|
}) => {
|
|
1991
|
-
const runtime = (0,
|
|
1992
|
-
const [selected, setSelected] = (0,
|
|
1993
|
-
const [submittedIds, setSubmittedIds] = (0,
|
|
2006
|
+
const runtime = (0, import_react9.useThreadRuntime)();
|
|
2007
|
+
const [selected, setSelected] = (0, import_react8.useState)([]);
|
|
2008
|
+
const [submittedIds, setSubmittedIds] = (0, import_react8.useState)(null);
|
|
1994
2009
|
const isMulti = artifact.multi === true;
|
|
1995
2010
|
const isDisabled = submittedIds !== null;
|
|
1996
|
-
const send = (0,
|
|
2011
|
+
const send = (0, import_react8.useCallback)(
|
|
1997
2012
|
(keys) => {
|
|
1998
2013
|
if (keys.length === 0) return;
|
|
1999
2014
|
const labels = artifact.options.map((option, index) => ({ option, key: optionKey(option, index) })).filter(({ key }) => keys.includes(key)).map(({ option }) => option.label);
|
|
@@ -2005,7 +2020,7 @@ var QuestionArtifactView = ({
|
|
|
2005
2020
|
},
|
|
2006
2021
|
[artifact.options, runtime]
|
|
2007
2022
|
);
|
|
2008
|
-
const onPick = (0,
|
|
2023
|
+
const onPick = (0, import_react8.useCallback)(
|
|
2009
2024
|
(key) => {
|
|
2010
2025
|
if (isDisabled) return;
|
|
2011
2026
|
if (!isMulti) {
|
|
@@ -2018,15 +2033,15 @@ var QuestionArtifactView = ({
|
|
|
2018
2033
|
},
|
|
2019
2034
|
[isDisabled, isMulti, send]
|
|
2020
2035
|
);
|
|
2021
|
-
const onConfirm = (0,
|
|
2036
|
+
const onConfirm = (0, import_react8.useCallback)(() => {
|
|
2022
2037
|
send(selected);
|
|
2023
2038
|
}, [selected, send]);
|
|
2024
|
-
return /* @__PURE__ */ (0,
|
|
2025
|
-
artifact.prompt ? /* @__PURE__ */ (0,
|
|
2026
|
-
/* @__PURE__ */ (0,
|
|
2039
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "px-2.5 py-2", children: [
|
|
2040
|
+
artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
|
|
2041
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
|
|
2027
2042
|
const key = optionKey(option, index);
|
|
2028
2043
|
const isSelected = submittedIds ? submittedIds.includes(key) : isMulti && selected.includes(key);
|
|
2029
|
-
return /* @__PURE__ */ (0,
|
|
2044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2030
2045
|
"button",
|
|
2031
2046
|
{
|
|
2032
2047
|
type: "button",
|
|
@@ -2038,17 +2053,17 @@ var QuestionArtifactView = ({
|
|
|
2038
2053
|
isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
|
|
2039
2054
|
),
|
|
2040
2055
|
children: [
|
|
2041
|
-
/* @__PURE__ */ (0,
|
|
2042
|
-
/* @__PURE__ */ (0,
|
|
2043
|
-
/* @__PURE__ */ (0,
|
|
2044
|
-
option.description ? /* @__PURE__ */ (0,
|
|
2056
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(OptionRadio, { selected: isSelected }),
|
|
2057
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
|
|
2059
|
+
option.description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
|
|
2045
2060
|
] })
|
|
2046
2061
|
]
|
|
2047
2062
|
},
|
|
2048
2063
|
key
|
|
2049
2064
|
);
|
|
2050
2065
|
}) }),
|
|
2051
|
-
isMulti && !submittedIds ? /* @__PURE__ */ (0,
|
|
2066
|
+
isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2052
2067
|
TimbalV2Button,
|
|
2053
2068
|
{
|
|
2054
2069
|
type: "button",
|
|
@@ -2063,12 +2078,12 @@ var QuestionArtifactView = ({
|
|
|
2063
2078
|
};
|
|
2064
2079
|
|
|
2065
2080
|
// src/artifacts/html-artifact.tsx
|
|
2066
|
-
var
|
|
2081
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2067
2082
|
var HtmlArtifactView = ({ artifact }) => {
|
|
2068
2083
|
const sandboxed = artifact.sandboxed !== false;
|
|
2069
2084
|
const sandbox = sandboxed ? "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-pointer-lock" : void 0;
|
|
2070
2085
|
const height = artifact.height ?? "320px";
|
|
2071
|
-
return /* @__PURE__ */ (0,
|
|
2086
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2072
2087
|
"iframe",
|
|
2073
2088
|
{
|
|
2074
2089
|
title: artifact.title ?? "HTML artifact",
|
|
@@ -2081,7 +2096,7 @@ var HtmlArtifactView = ({ artifact }) => {
|
|
|
2081
2096
|
};
|
|
2082
2097
|
|
|
2083
2098
|
// src/artifacts/json-artifact.tsx
|
|
2084
|
-
var
|
|
2099
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2085
2100
|
var JsonArtifactView = ({
|
|
2086
2101
|
artifact
|
|
2087
2102
|
}) => {
|
|
@@ -2093,16 +2108,16 @@ var JsonArtifactView = ({
|
|
|
2093
2108
|
} catch {
|
|
2094
2109
|
body = String(data);
|
|
2095
2110
|
}
|
|
2096
|
-
return /* @__PURE__ */ (0,
|
|
2111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "aui-artifact-json m-0 max-h-[420px] overflow-auto p-3 font-mono text-[12px] leading-relaxed text-foreground/85", children: body }) });
|
|
2097
2112
|
};
|
|
2098
2113
|
|
|
2099
2114
|
// src/artifacts/table-artifact.tsx
|
|
2100
|
-
var
|
|
2115
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2101
2116
|
var TableArtifactView = ({ artifact }) => {
|
|
2102
2117
|
const rows = artifact.rows ?? [];
|
|
2103
2118
|
const columns = artifact.columns ?? deriveColumns(rows);
|
|
2104
|
-
return /* @__PURE__ */ (0,
|
|
2105
|
-
/* @__PURE__ */ (0,
|
|
2119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
|
|
2120
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2106
2121
|
"th",
|
|
2107
2122
|
{
|
|
2108
2123
|
className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
|
|
@@ -2110,11 +2125,11 @@ var TableArtifactView = ({ artifact }) => {
|
|
|
2110
2125
|
},
|
|
2111
2126
|
col.key
|
|
2112
2127
|
)) }) }),
|
|
2113
|
-
/* @__PURE__ */ (0,
|
|
2128
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2114
2129
|
"tr",
|
|
2115
2130
|
{
|
|
2116
2131
|
className: "border-b border-border/30 transition-colors last:border-b-0 hover:bg-muted/20",
|
|
2117
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
2132
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2118
2133
|
"td",
|
|
2119
2134
|
{
|
|
2120
2135
|
className: "px-3 py-2 align-top text-foreground/85",
|
|
@@ -2147,7 +2162,7 @@ function formatCell(value) {
|
|
|
2147
2162
|
}
|
|
2148
2163
|
|
|
2149
2164
|
// src/artifacts/ui/ui-artifact.tsx
|
|
2150
|
-
var
|
|
2165
|
+
var import_react14 = require("react");
|
|
2151
2166
|
|
|
2152
2167
|
// src/artifacts/ui/types.ts
|
|
2153
2168
|
function isUiBinding(value) {
|
|
@@ -2200,40 +2215,40 @@ function resolveBindable(value, state) {
|
|
|
2200
2215
|
}
|
|
2201
2216
|
|
|
2202
2217
|
// src/artifacts/ui/registry.tsx
|
|
2203
|
-
var
|
|
2204
|
-
var
|
|
2205
|
-
var UiStateContext = (0,
|
|
2206
|
-
var UiDispatchContext = (0,
|
|
2218
|
+
var import_react10 = require("react");
|
|
2219
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2220
|
+
var UiStateContext = (0, import_react10.createContext)({});
|
|
2221
|
+
var UiDispatchContext = (0, import_react10.createContext)(() => {
|
|
2207
2222
|
});
|
|
2208
|
-
var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0,
|
|
2223
|
+
var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
|
|
2209
2224
|
function useUiState() {
|
|
2210
|
-
return (0,
|
|
2225
|
+
return (0, import_react10.useContext)(UiStateContext);
|
|
2211
2226
|
}
|
|
2212
2227
|
function useUiDispatch() {
|
|
2213
|
-
return (0,
|
|
2228
|
+
return (0, import_react10.useContext)(UiDispatchContext);
|
|
2214
2229
|
}
|
|
2215
|
-
var UiEventContext = (0,
|
|
2230
|
+
var UiEventContext = (0, import_react10.createContext)(
|
|
2216
2231
|
null
|
|
2217
2232
|
);
|
|
2218
|
-
var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0,
|
|
2233
|
+
var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiEventContext.Provider, { value: onEvent, children });
|
|
2219
2234
|
function useUiEventEmitter() {
|
|
2220
|
-
return (0,
|
|
2235
|
+
return (0, import_react10.useContext)(UiEventContext);
|
|
2221
2236
|
}
|
|
2222
|
-
var UiCustomNodeRegistryContext = (0,
|
|
2223
|
-
var UiCustomNodeRegistryProvider = ({ renderers, children }) => /* @__PURE__ */ (0,
|
|
2237
|
+
var UiCustomNodeRegistryContext = (0, import_react10.createContext)({});
|
|
2238
|
+
var UiCustomNodeRegistryProvider = ({ renderers, children }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiCustomNodeRegistryContext.Provider, { value: renderers, children });
|
|
2224
2239
|
function useUiCustomNodeRegistry() {
|
|
2225
|
-
return (0,
|
|
2240
|
+
return (0, import_react10.useContext)(UiCustomNodeRegistryContext);
|
|
2226
2241
|
}
|
|
2227
2242
|
|
|
2228
2243
|
// src/artifacts/ui/nodes.tsx
|
|
2229
|
-
var
|
|
2230
|
-
var
|
|
2231
|
-
var
|
|
2244
|
+
var import_react11 = require("react");
|
|
2245
|
+
var import_react12 = require("motion/react");
|
|
2246
|
+
var import_react13 = require("@assistant-ui/react");
|
|
2232
2247
|
|
|
2233
2248
|
// src/ui/button.tsx
|
|
2234
2249
|
var import_class_variance_authority = require("class-variance-authority");
|
|
2235
2250
|
var import_radix_ui5 = require("radix-ui");
|
|
2236
|
-
var
|
|
2251
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2237
2252
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
2238
2253
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/30 aria-invalid:border-destructive",
|
|
2239
2254
|
{
|
|
@@ -2271,7 +2286,7 @@ function Button({
|
|
|
2271
2286
|
...props
|
|
2272
2287
|
}) {
|
|
2273
2288
|
const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
|
|
2274
|
-
return /* @__PURE__ */ (0,
|
|
2289
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2275
2290
|
Comp,
|
|
2276
2291
|
{
|
|
2277
2292
|
"data-slot": "button",
|
|
@@ -2284,29 +2299,29 @@ function Button({
|
|
|
2284
2299
|
}
|
|
2285
2300
|
|
|
2286
2301
|
// src/artifacts/ui/nodes.tsx
|
|
2287
|
-
var
|
|
2302
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2288
2303
|
var UiNodeView = ({ node }) => {
|
|
2289
2304
|
switch (node.kind) {
|
|
2290
2305
|
case "box":
|
|
2291
|
-
return /* @__PURE__ */ (0,
|
|
2306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BoxNode, { node });
|
|
2292
2307
|
case "text":
|
|
2293
|
-
return /* @__PURE__ */ (0,
|
|
2308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextNode, { node });
|
|
2294
2309
|
case "heading":
|
|
2295
|
-
return /* @__PURE__ */ (0,
|
|
2310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeadingNode, { node });
|
|
2296
2311
|
case "badge":
|
|
2297
|
-
return /* @__PURE__ */ (0,
|
|
2312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BadgeNode, { node });
|
|
2298
2313
|
case "button":
|
|
2299
|
-
return /* @__PURE__ */ (0,
|
|
2314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ButtonNode, { node });
|
|
2300
2315
|
case "toggle":
|
|
2301
|
-
return /* @__PURE__ */ (0,
|
|
2316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleNode, { node });
|
|
2302
2317
|
case "slider":
|
|
2303
|
-
return /* @__PURE__ */ (0,
|
|
2318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SliderNode, { node });
|
|
2304
2319
|
case "tooltip":
|
|
2305
|
-
return /* @__PURE__ */ (0,
|
|
2320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipNode, { node });
|
|
2306
2321
|
case "draggable":
|
|
2307
|
-
return /* @__PURE__ */ (0,
|
|
2322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DraggableNode, { node });
|
|
2308
2323
|
case "custom":
|
|
2309
|
-
return /* @__PURE__ */ (0,
|
|
2324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CustomNode, { node });
|
|
2310
2325
|
default:
|
|
2311
2326
|
return null;
|
|
2312
2327
|
}
|
|
@@ -2314,9 +2329,9 @@ var UiNodeView = ({ node }) => {
|
|
|
2314
2329
|
function useActionRunner() {
|
|
2315
2330
|
const state = useUiState();
|
|
2316
2331
|
const dispatch = useUiDispatch();
|
|
2317
|
-
const runtime = (0,
|
|
2332
|
+
const runtime = (0, import_react13.useThreadRuntime)();
|
|
2318
2333
|
const emit = useUiEventEmitter();
|
|
2319
|
-
return (0,
|
|
2334
|
+
return (0, import_react11.useCallback)(
|
|
2320
2335
|
(actions) => {
|
|
2321
2336
|
if (!actions) return;
|
|
2322
2337
|
const list = Array.isArray(actions) ? actions : [actions];
|
|
@@ -2366,7 +2381,7 @@ var JUSTIFY_CLS = {
|
|
|
2366
2381
|
};
|
|
2367
2382
|
var BoxNode = ({ node }) => {
|
|
2368
2383
|
const dir = node.direction ?? "col";
|
|
2369
|
-
return /* @__PURE__ */ (0,
|
|
2384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2370
2385
|
"div",
|
|
2371
2386
|
{
|
|
2372
2387
|
className: cn(
|
|
@@ -2381,7 +2396,7 @@ var BoxNode = ({ node }) => {
|
|
|
2381
2396
|
gap: node.gap !== void 0 ? `${node.gap * 0.25}rem` : void 0,
|
|
2382
2397
|
padding: node.padding !== void 0 ? `${node.padding * 0.25}rem` : void 0
|
|
2383
2398
|
},
|
|
2384
|
-
children: node.children?.map((child, i) => /* @__PURE__ */ (0,
|
|
2399
|
+
children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: child }, child.id ?? i))
|
|
2385
2400
|
}
|
|
2386
2401
|
);
|
|
2387
2402
|
};
|
|
@@ -2400,7 +2415,7 @@ var TEXT_WEIGHT = {
|
|
|
2400
2415
|
var TextNode = ({ node }) => {
|
|
2401
2416
|
const state = useUiState();
|
|
2402
2417
|
const value = resolveBindable(node.value, state);
|
|
2403
|
-
return /* @__PURE__ */ (0,
|
|
2418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2404
2419
|
"span",
|
|
2405
2420
|
{
|
|
2406
2421
|
className: cn(
|
|
@@ -2431,13 +2446,13 @@ var HeadingNode = ({ node }) => {
|
|
|
2431
2446
|
);
|
|
2432
2447
|
switch (level) {
|
|
2433
2448
|
case 1:
|
|
2434
|
-
return /* @__PURE__ */ (0,
|
|
2449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: cls, children: value });
|
|
2435
2450
|
case 2:
|
|
2436
|
-
return /* @__PURE__ */ (0,
|
|
2451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: cls, children: value });
|
|
2437
2452
|
case 3:
|
|
2438
|
-
return /* @__PURE__ */ (0,
|
|
2453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: cls, children: value });
|
|
2439
2454
|
case 4:
|
|
2440
|
-
return /* @__PURE__ */ (0,
|
|
2455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { className: cls, children: value });
|
|
2441
2456
|
}
|
|
2442
2457
|
};
|
|
2443
2458
|
var BADGE_TONE = {
|
|
@@ -2450,7 +2465,7 @@ var BADGE_TONE = {
|
|
|
2450
2465
|
var BadgeNode = ({ node }) => {
|
|
2451
2466
|
const state = useUiState();
|
|
2452
2467
|
const value = String(resolveBindable(node.value, state) ?? "");
|
|
2453
|
-
return /* @__PURE__ */ (0,
|
|
2468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2454
2469
|
"span",
|
|
2455
2470
|
{
|
|
2456
2471
|
className: cn(
|
|
@@ -2467,7 +2482,7 @@ var ButtonNode = ({ node }) => {
|
|
|
2467
2482
|
const run = useActionRunner();
|
|
2468
2483
|
const label = String(resolveBindable(node.label, state) ?? "");
|
|
2469
2484
|
const disabled = node.disabled !== void 0 ? Boolean(resolveBindable(node.disabled, state)) : false;
|
|
2470
|
-
return /* @__PURE__ */ (0,
|
|
2485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2471
2486
|
Button,
|
|
2472
2487
|
{
|
|
2473
2488
|
variant: node.variant ?? "default",
|
|
@@ -2489,7 +2504,7 @@ var ToggleNode = ({ node }) => {
|
|
|
2489
2504
|
dispatch({ type: "toggle", path: node.binding });
|
|
2490
2505
|
run(node.onChange);
|
|
2491
2506
|
};
|
|
2492
|
-
return /* @__PURE__ */ (0,
|
|
2507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2493
2508
|
"label",
|
|
2494
2509
|
{
|
|
2495
2510
|
className: cn(
|
|
@@ -2497,7 +2512,7 @@ var ToggleNode = ({ node }) => {
|
|
|
2497
2512
|
node.className
|
|
2498
2513
|
),
|
|
2499
2514
|
children: [
|
|
2500
|
-
/* @__PURE__ */ (0,
|
|
2515
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2501
2516
|
"button",
|
|
2502
2517
|
{
|
|
2503
2518
|
type: "button",
|
|
@@ -2508,7 +2523,7 @@ var ToggleNode = ({ node }) => {
|
|
|
2508
2523
|
"relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors",
|
|
2509
2524
|
value ? "border-primary bg-primary" : "border-border bg-muted hover:bg-muted/80"
|
|
2510
2525
|
),
|
|
2511
|
-
children: /* @__PURE__ */ (0,
|
|
2526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2512
2527
|
"span",
|
|
2513
2528
|
{
|
|
2514
2529
|
className: cn(
|
|
@@ -2520,7 +2535,7 @@ var ToggleNode = ({ node }) => {
|
|
|
2520
2535
|
)
|
|
2521
2536
|
}
|
|
2522
2537
|
),
|
|
2523
|
-
label && /* @__PURE__ */ (0,
|
|
2538
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-foreground/85", children: label })
|
|
2524
2539
|
]
|
|
2525
2540
|
}
|
|
2526
2541
|
);
|
|
@@ -2540,12 +2555,12 @@ var SliderNode = ({ node }) => {
|
|
|
2540
2555
|
const next = Number(e.target.value);
|
|
2541
2556
|
dispatch({ type: "set", path: node.binding, value: next });
|
|
2542
2557
|
};
|
|
2543
|
-
return /* @__PURE__ */ (0,
|
|
2544
|
-
(label || showValue) && /* @__PURE__ */ (0,
|
|
2545
|
-
label && /* @__PURE__ */ (0,
|
|
2546
|
-
showValue && /* @__PURE__ */ (0,
|
|
2558
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
|
|
2559
|
+
(label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
|
|
2560
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label }),
|
|
2561
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-mono", children: value })
|
|
2547
2562
|
] }),
|
|
2548
|
-
/* @__PURE__ */ (0,
|
|
2563
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2549
2564
|
"input",
|
|
2550
2565
|
{
|
|
2551
2566
|
type: "range",
|
|
@@ -2567,9 +2582,9 @@ var SliderNode = ({ node }) => {
|
|
|
2567
2582
|
var TooltipNode = ({ node }) => {
|
|
2568
2583
|
const state = useUiState();
|
|
2569
2584
|
const content = String(resolveBindable(node.content, state) ?? "");
|
|
2570
|
-
return /* @__PURE__ */ (0,
|
|
2571
|
-
/* @__PURE__ */ (0,
|
|
2572
|
-
/* @__PURE__ */ (0,
|
|
2585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
|
|
2586
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: node.child }) }) }),
|
|
2587
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
|
|
2573
2588
|
] }) });
|
|
2574
2589
|
};
|
|
2575
2590
|
var DraggableNode = ({ node }) => {
|
|
@@ -2577,8 +2592,8 @@ var DraggableNode = ({ node }) => {
|
|
|
2577
2592
|
const snapBack = node.snapBack ?? true;
|
|
2578
2593
|
const axis = node.axis ?? "both";
|
|
2579
2594
|
const dragProp = axis === "both" ? true : axis;
|
|
2580
|
-
return /* @__PURE__ */ (0,
|
|
2581
|
-
|
|
2595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2596
|
+
import_react12.motion.div,
|
|
2582
2597
|
{
|
|
2583
2598
|
drag: dragProp,
|
|
2584
2599
|
dragMomentum: false,
|
|
@@ -2589,7 +2604,7 @@ var DraggableNode = ({ node }) => {
|
|
|
2589
2604
|
"aui-ui-draggable inline-block cursor-grab touch-none",
|
|
2590
2605
|
node.className
|
|
2591
2606
|
),
|
|
2592
|
-
children: /* @__PURE__ */ (0,
|
|
2607
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: node.child })
|
|
2593
2608
|
}
|
|
2594
2609
|
);
|
|
2595
2610
|
};
|
|
@@ -2599,8 +2614,8 @@ var CustomNode = ({ node }) => {
|
|
|
2599
2614
|
const Renderer = registry[node.name];
|
|
2600
2615
|
if (!Renderer) return null;
|
|
2601
2616
|
const resolvedProps = resolveProps(node.props ?? {}, state);
|
|
2602
|
-
const children = node.children?.map((child, i) => /* @__PURE__ */ (0,
|
|
2603
|
-
return /* @__PURE__ */ (0,
|
|
2617
|
+
const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: child }, child.id ?? i));
|
|
2618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Renderer, { props: resolvedProps, children });
|
|
2604
2619
|
};
|
|
2605
2620
|
function resolveProps(props, state) {
|
|
2606
2621
|
const out = {};
|
|
@@ -2611,17 +2626,17 @@ function resolveProps(props, state) {
|
|
|
2611
2626
|
}
|
|
2612
2627
|
|
|
2613
2628
|
// src/artifacts/ui/ui-artifact.tsx
|
|
2614
|
-
var
|
|
2629
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2615
2630
|
var UiArtifactView = ({ artifact }) => {
|
|
2616
|
-
const [state, dispatch] = (0,
|
|
2631
|
+
const [state, dispatch] = (0, import_react14.useReducer)(
|
|
2617
2632
|
uiStateReducer,
|
|
2618
2633
|
artifact.initialState ?? {}
|
|
2619
2634
|
);
|
|
2620
|
-
return /* @__PURE__ */ (0,
|
|
2635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiNodeView, { node: artifact.root }) }) }) });
|
|
2621
2636
|
};
|
|
2622
2637
|
|
|
2623
2638
|
// src/artifacts/registry.tsx
|
|
2624
|
-
var
|
|
2639
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2625
2640
|
var defaultArtifactRenderers = {
|
|
2626
2641
|
chart: ChartArtifactView,
|
|
2627
2642
|
question: QuestionArtifactView,
|
|
@@ -2630,25 +2645,25 @@ var defaultArtifactRenderers = {
|
|
|
2630
2645
|
table: TableArtifactView,
|
|
2631
2646
|
ui: UiArtifactView
|
|
2632
2647
|
};
|
|
2633
|
-
var ArtifactRegistryContext = (0,
|
|
2648
|
+
var ArtifactRegistryContext = (0, import_react15.createContext)(
|
|
2634
2649
|
defaultArtifactRenderers
|
|
2635
2650
|
);
|
|
2636
2651
|
var ArtifactRegistryProvider = ({ renderers, override, children }) => {
|
|
2637
|
-
const merged = (0,
|
|
2652
|
+
const merged = (0, import_react15.useMemo)(() => {
|
|
2638
2653
|
if (!renderers) return defaultArtifactRenderers;
|
|
2639
2654
|
if (override) return renderers;
|
|
2640
2655
|
return { ...defaultArtifactRenderers, ...renderers };
|
|
2641
2656
|
}, [renderers, override]);
|
|
2642
|
-
return /* @__PURE__ */ (0,
|
|
2657
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
|
|
2643
2658
|
};
|
|
2644
2659
|
function useArtifactRegistry() {
|
|
2645
|
-
return (0,
|
|
2660
|
+
return (0, import_react15.useContext)(ArtifactRegistryContext);
|
|
2646
2661
|
}
|
|
2647
2662
|
var ArtifactView = ({ artifact }) => {
|
|
2648
2663
|
const registry = useArtifactRegistry();
|
|
2649
2664
|
const Renderer = registry[artifact.type] ?? registry.json;
|
|
2650
2665
|
if (!Renderer) return null;
|
|
2651
|
-
return /* @__PURE__ */ (0,
|
|
2666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Renderer, { artifact });
|
|
2652
2667
|
};
|
|
2653
2668
|
|
|
2654
2669
|
// src/artifacts/parse.ts
|
|
@@ -2764,7 +2779,7 @@ var import_c = __toESM(require("shiki/langs/c.mjs"), 1);
|
|
|
2764
2779
|
var import_cpp = __toESM(require("shiki/langs/cpp.mjs"), 1);
|
|
2765
2780
|
var import_vitesse_dark = __toESM(require("shiki/themes/vitesse-dark.mjs"), 1);
|
|
2766
2781
|
var import_vitesse_light = __toESM(require("shiki/themes/vitesse-light.mjs"), 1);
|
|
2767
|
-
var
|
|
2782
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2768
2783
|
var SHIKI_THEME_DARK = "vitesse-dark";
|
|
2769
2784
|
var SHIKI_THEME_LIGHT = "vitesse-light";
|
|
2770
2785
|
var highlighterPromise = null;
|
|
@@ -2802,8 +2817,8 @@ var ShikiSyntaxHighlighter = ({
|
|
|
2802
2817
|
language,
|
|
2803
2818
|
code
|
|
2804
2819
|
}) => {
|
|
2805
|
-
const [html, setHtml] = (0,
|
|
2806
|
-
(0,
|
|
2820
|
+
const [html, setHtml] = (0, import_react16.useState)(null);
|
|
2821
|
+
(0, import_react16.useEffect)(() => {
|
|
2807
2822
|
let cancelled = false;
|
|
2808
2823
|
(async () => {
|
|
2809
2824
|
try {
|
|
@@ -2833,13 +2848,13 @@ var ShikiSyntaxHighlighter = ({
|
|
|
2833
2848
|
try {
|
|
2834
2849
|
const parsed = JSON.parse(code);
|
|
2835
2850
|
if (isArtifact(parsed)) {
|
|
2836
|
-
return /* @__PURE__ */ (0,
|
|
2851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArtifactView, { artifact: parsed });
|
|
2837
2852
|
}
|
|
2838
2853
|
} catch {
|
|
2839
2854
|
}
|
|
2840
2855
|
}
|
|
2841
2856
|
if (html) {
|
|
2842
|
-
return /* @__PURE__ */ (0,
|
|
2857
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2843
2858
|
"div",
|
|
2844
2859
|
{
|
|
2845
2860
|
className: "shiki-wrapper [&>pre]:!m-0 [&>pre]:!rounded-t-none [&>pre]:!rounded-b-lg [&>pre]:!border [&>pre]:!border-t-0 [&>pre]:!border-border/50 [&>pre]:!p-3 [&>pre]:!text-xs [&>pre]:!leading-relaxed [&>pre]:overflow-x-auto",
|
|
@@ -2847,14 +2862,14 @@ var ShikiSyntaxHighlighter = ({
|
|
|
2847
2862
|
}
|
|
2848
2863
|
);
|
|
2849
2864
|
}
|
|
2850
|
-
return /* @__PURE__ */ (0,
|
|
2865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Code2, { children: code }) });
|
|
2851
2866
|
};
|
|
2852
2867
|
var syntax_highlighter_default = ShikiSyntaxHighlighter;
|
|
2853
2868
|
|
|
2854
2869
|
// src/components/markdown-text.tsx
|
|
2855
|
-
var
|
|
2870
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2856
2871
|
var MarkdownTextImpl = () => {
|
|
2857
|
-
return /* @__PURE__ */ (0,
|
|
2872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2858
2873
|
import_react_markdown.MarkdownTextPrimitive,
|
|
2859
2874
|
{
|
|
2860
2875
|
remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
|
|
@@ -2867,7 +2882,7 @@ var MarkdownTextImpl = () => {
|
|
|
2867
2882
|
}
|
|
2868
2883
|
);
|
|
2869
2884
|
};
|
|
2870
|
-
var MarkdownText = (0,
|
|
2885
|
+
var MarkdownText = (0, import_react17.memo)(MarkdownTextImpl);
|
|
2871
2886
|
var CodeHeader = ({ language, code }) => {
|
|
2872
2887
|
const { isCopied, copyToClipboard } = useCopyToClipboard();
|
|
2873
2888
|
if (isArtifactFenceLanguage(language)) return null;
|
|
@@ -2875,20 +2890,20 @@ var CodeHeader = ({ language, code }) => {
|
|
|
2875
2890
|
if (!code || isCopied) return;
|
|
2876
2891
|
copyToClipboard(code);
|
|
2877
2892
|
};
|
|
2878
|
-
return /* @__PURE__ */ (0,
|
|
2879
|
-
/* @__PURE__ */ (0,
|
|
2880
|
-
/* @__PURE__ */ (0,
|
|
2893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-code-header-bg px-4 py-2", children: [
|
|
2894
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
|
|
2895
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
|
|
2881
2896
|
language
|
|
2882
2897
|
] }),
|
|
2883
|
-
/* @__PURE__ */ (0,
|
|
2898
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2884
2899
|
TooltipIconButton,
|
|
2885
2900
|
{
|
|
2886
2901
|
tooltip: isCopied ? "Copied!" : "Copy",
|
|
2887
2902
|
onClick: onCopy,
|
|
2888
2903
|
className: "transition-colors hover:text-foreground",
|
|
2889
2904
|
children: [
|
|
2890
|
-
!isCopied && /* @__PURE__ */ (0,
|
|
2891
|
-
isCopied && /* @__PURE__ */ (0,
|
|
2905
|
+
!isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
|
|
2906
|
+
isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
|
|
2892
2907
|
]
|
|
2893
2908
|
}
|
|
2894
2909
|
)
|
|
@@ -2897,7 +2912,7 @@ var CodeHeader = ({ language, code }) => {
|
|
|
2897
2912
|
var useCopyToClipboard = ({
|
|
2898
2913
|
copiedDuration = 3e3
|
|
2899
2914
|
} = {}) => {
|
|
2900
|
-
const [isCopied, setIsCopied] = (0,
|
|
2915
|
+
const [isCopied, setIsCopied] = (0, import_react17.useState)(false);
|
|
2901
2916
|
const copyToClipboard = (value) => {
|
|
2902
2917
|
if (!value) return;
|
|
2903
2918
|
navigator.clipboard.writeText(value).then(() => {
|
|
@@ -2908,7 +2923,7 @@ var useCopyToClipboard = ({
|
|
|
2908
2923
|
return { isCopied, copyToClipboard };
|
|
2909
2924
|
};
|
|
2910
2925
|
var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownComponents)({
|
|
2911
|
-
h1: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2926
|
+
h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2912
2927
|
"h1",
|
|
2913
2928
|
{
|
|
2914
2929
|
className: cn(
|
|
@@ -2918,7 +2933,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2918
2933
|
...props
|
|
2919
2934
|
}
|
|
2920
2935
|
),
|
|
2921
|
-
h2: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2936
|
+
h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2922
2937
|
"h2",
|
|
2923
2938
|
{
|
|
2924
2939
|
className: cn(
|
|
@@ -2928,7 +2943,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2928
2943
|
...props
|
|
2929
2944
|
}
|
|
2930
2945
|
),
|
|
2931
|
-
h3: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2946
|
+
h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2932
2947
|
"h3",
|
|
2933
2948
|
{
|
|
2934
2949
|
className: cn(
|
|
@@ -2938,7 +2953,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2938
2953
|
...props
|
|
2939
2954
|
}
|
|
2940
2955
|
),
|
|
2941
|
-
h4: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2956
|
+
h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2942
2957
|
"h4",
|
|
2943
2958
|
{
|
|
2944
2959
|
className: cn(
|
|
@@ -2948,7 +2963,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2948
2963
|
...props
|
|
2949
2964
|
}
|
|
2950
2965
|
),
|
|
2951
|
-
h5: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2966
|
+
h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2952
2967
|
"h5",
|
|
2953
2968
|
{
|
|
2954
2969
|
className: cn(
|
|
@@ -2958,7 +2973,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2958
2973
|
...props
|
|
2959
2974
|
}
|
|
2960
2975
|
),
|
|
2961
|
-
h6: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2976
|
+
h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2962
2977
|
"h6",
|
|
2963
2978
|
{
|
|
2964
2979
|
className: cn(
|
|
@@ -2968,7 +2983,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2968
2983
|
...props
|
|
2969
2984
|
}
|
|
2970
2985
|
),
|
|
2971
|
-
p: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2986
|
+
p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2972
2987
|
"p",
|
|
2973
2988
|
{
|
|
2974
2989
|
className: cn(
|
|
@@ -2978,7 +2993,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2978
2993
|
...props
|
|
2979
2994
|
}
|
|
2980
2995
|
),
|
|
2981
|
-
a: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
2996
|
+
a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2982
2997
|
"a",
|
|
2983
2998
|
{
|
|
2984
2999
|
className: cn(
|
|
@@ -2990,7 +3005,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
2990
3005
|
...props
|
|
2991
3006
|
}
|
|
2992
3007
|
),
|
|
2993
|
-
blockquote: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3008
|
+
blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2994
3009
|
"blockquote",
|
|
2995
3010
|
{
|
|
2996
3011
|
className: cn(
|
|
@@ -3000,7 +3015,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3000
3015
|
...props
|
|
3001
3016
|
}
|
|
3002
3017
|
),
|
|
3003
|
-
ul: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3018
|
+
ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3004
3019
|
"ul",
|
|
3005
3020
|
{
|
|
3006
3021
|
className: cn(
|
|
@@ -3010,7 +3025,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3010
3025
|
...props
|
|
3011
3026
|
}
|
|
3012
3027
|
),
|
|
3013
|
-
ol: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3028
|
+
ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3014
3029
|
"ol",
|
|
3015
3030
|
{
|
|
3016
3031
|
className: cn(
|
|
@@ -3020,7 +3035,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3020
3035
|
...props
|
|
3021
3036
|
}
|
|
3022
3037
|
),
|
|
3023
|
-
hr: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3038
|
+
hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3024
3039
|
"hr",
|
|
3025
3040
|
{
|
|
3026
3041
|
className: cn(
|
|
@@ -3030,14 +3045,14 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3030
3045
|
...props
|
|
3031
3046
|
}
|
|
3032
3047
|
),
|
|
3033
|
-
table: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3048
|
+
table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3034
3049
|
"table",
|
|
3035
3050
|
{
|
|
3036
3051
|
className: cn("aui-md-table w-full border-collapse text-sm", className),
|
|
3037
3052
|
...props
|
|
3038
3053
|
}
|
|
3039
3054
|
) }),
|
|
3040
|
-
th: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3055
|
+
th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3041
3056
|
"th",
|
|
3042
3057
|
{
|
|
3043
3058
|
className: cn(
|
|
@@ -3047,7 +3062,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3047
3062
|
...props
|
|
3048
3063
|
}
|
|
3049
3064
|
),
|
|
3050
|
-
td: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3065
|
+
td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3051
3066
|
"td",
|
|
3052
3067
|
{
|
|
3053
3068
|
className: cn(
|
|
@@ -3057,7 +3072,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3057
3072
|
...props
|
|
3058
3073
|
}
|
|
3059
3074
|
),
|
|
3060
|
-
tr: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3075
|
+
tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3061
3076
|
"tr",
|
|
3062
3077
|
{
|
|
3063
3078
|
className: cn(
|
|
@@ -3067,8 +3082,8 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3067
3082
|
...props
|
|
3068
3083
|
}
|
|
3069
3084
|
),
|
|
3070
|
-
li: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3071
|
-
sup: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3085
|
+
li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
|
|
3086
|
+
sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3072
3087
|
"sup",
|
|
3073
3088
|
{
|
|
3074
3089
|
className: cn(
|
|
@@ -3078,7 +3093,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3078
3093
|
...props
|
|
3079
3094
|
}
|
|
3080
3095
|
),
|
|
3081
|
-
pre: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3096
|
+
pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3082
3097
|
"pre",
|
|
3083
3098
|
{
|
|
3084
3099
|
className: cn(
|
|
@@ -3090,7 +3105,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3090
3105
|
),
|
|
3091
3106
|
code: function Code({ className, ...props }) {
|
|
3092
3107
|
const isCodeBlock = (0, import_react_markdown.useIsMarkdownCodeBlock)();
|
|
3093
|
-
return /* @__PURE__ */ (0,
|
|
3108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3094
3109
|
"code",
|
|
3095
3110
|
{
|
|
3096
3111
|
className: cn(
|
|
@@ -3101,20 +3116,20 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
|
|
|
3101
3116
|
}
|
|
3102
3117
|
);
|
|
3103
3118
|
},
|
|
3104
|
-
strong: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3105
|
-
em: ({ className, ...props }) => /* @__PURE__ */ (0,
|
|
3119
|
+
strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
|
|
3120
|
+
em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("em", { className: cn("italic", className), ...props }),
|
|
3106
3121
|
CodeHeader
|
|
3107
3122
|
});
|
|
3108
3123
|
|
|
3109
3124
|
// src/components/tool-fallback.tsx
|
|
3110
|
-
var
|
|
3125
|
+
var import_react21 = require("react");
|
|
3111
3126
|
var import_lucide_react5 = require("lucide-react");
|
|
3112
|
-
var
|
|
3127
|
+
var import_react22 = require("@assistant-ui/react");
|
|
3113
3128
|
|
|
3114
3129
|
// src/ui/shimmer.tsx
|
|
3115
|
-
var
|
|
3116
|
-
var
|
|
3117
|
-
var
|
|
3130
|
+
var import_react18 = require("motion/react");
|
|
3131
|
+
var import_react19 = require("react");
|
|
3132
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3118
3133
|
var ShimmerComponent = ({
|
|
3119
3134
|
children,
|
|
3120
3135
|
as: Component = "p",
|
|
@@ -3122,14 +3137,14 @@ var ShimmerComponent = ({
|
|
|
3122
3137
|
duration = 2,
|
|
3123
3138
|
spread = 2
|
|
3124
3139
|
}) => {
|
|
3125
|
-
const MotionComponent =
|
|
3140
|
+
const MotionComponent = import_react18.motion.create(
|
|
3126
3141
|
Component
|
|
3127
3142
|
);
|
|
3128
|
-
const dynamicSpread = (0,
|
|
3143
|
+
const dynamicSpread = (0, import_react19.useMemo)(
|
|
3129
3144
|
() => (children?.length ?? 0) * spread,
|
|
3130
3145
|
[children, spread]
|
|
3131
3146
|
);
|
|
3132
|
-
return /* @__PURE__ */ (0,
|
|
3147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3133
3148
|
MotionComponent,
|
|
3134
3149
|
{
|
|
3135
3150
|
animate: { backgroundPosition: "0% center" },
|
|
@@ -3152,11 +3167,11 @@ var ShimmerComponent = ({
|
|
|
3152
3167
|
}
|
|
3153
3168
|
);
|
|
3154
3169
|
};
|
|
3155
|
-
var Shimmer = (0,
|
|
3170
|
+
var Shimmer = (0, import_react19.memo)(ShimmerComponent);
|
|
3156
3171
|
|
|
3157
3172
|
// src/components/motion.tsx
|
|
3158
|
-
var
|
|
3159
|
-
var
|
|
3173
|
+
var import_react20 = require("motion/react");
|
|
3174
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3160
3175
|
var luxuryEase = [0.16, 1, 0.3, 1];
|
|
3161
3176
|
var TOOL_ENTER_MS = 0.78;
|
|
3162
3177
|
var TOOL_EXIT_MS = 0.28;
|
|
@@ -3182,10 +3197,10 @@ function toolMotionState(reduced, entering, variant) {
|
|
|
3182
3197
|
return entering ? { opacity: 0, y: 14, filter: "blur(10px)" } : { opacity: 1, y: 0, filter: "blur(0px)" };
|
|
3183
3198
|
}
|
|
3184
3199
|
function ToolMotion({ children, className, motionKey }) {
|
|
3185
|
-
const reduced = (0,
|
|
3200
|
+
const reduced = (0, import_react20.useReducedMotion)() ?? false;
|
|
3186
3201
|
const { enter, exit } = toolPresenceTransition(reduced);
|
|
3187
|
-
return /* @__PURE__ */ (0,
|
|
3188
|
-
|
|
3202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3203
|
+
import_react20.motion.div,
|
|
3189
3204
|
{
|
|
3190
3205
|
className: cn("aui-tool-motion w-full min-w-0", className),
|
|
3191
3206
|
initial: toolMotionState(reduced, true, "settled"),
|
|
@@ -3204,11 +3219,11 @@ function ToolPresence({
|
|
|
3204
3219
|
className,
|
|
3205
3220
|
variant = "settled"
|
|
3206
3221
|
}) {
|
|
3207
|
-
const reduced = (0,
|
|
3222
|
+
const reduced = (0, import_react20.useReducedMotion)() ?? false;
|
|
3208
3223
|
const { enter, exit } = toolPresenceTransition(reduced);
|
|
3209
3224
|
const enterTransition = variant === "executing" ? { duration: reduced ? 0.3 : 0.52, ease: luxuryEase } : enter;
|
|
3210
|
-
return /* @__PURE__ */ (0,
|
|
3211
|
-
|
|
3225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3226
|
+
import_react20.motion.div,
|
|
3212
3227
|
{
|
|
3213
3228
|
className: cn("aui-tool-presence w-full min-w-0", className),
|
|
3214
3229
|
initial: toolMotionState(reduced, true, variant),
|
|
@@ -3228,8 +3243,8 @@ function ToolBodyPresence({
|
|
|
3228
3243
|
children,
|
|
3229
3244
|
className
|
|
3230
3245
|
}) {
|
|
3231
|
-
const reduced = (0,
|
|
3232
|
-
return /* @__PURE__ */ (0,
|
|
3246
|
+
const reduced = (0, import_react20.useReducedMotion)() ?? false;
|
|
3247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3233
3248
|
"div",
|
|
3234
3249
|
{
|
|
3235
3250
|
className: cn(
|
|
@@ -3237,7 +3252,7 @@ function ToolBodyPresence({
|
|
|
3237
3252
|
open ? reduced ? "duration-200 ease-out" : "duration-[340ms] ease-[cubic-bezier(0.16,1,0.3,1)]" : reduced ? "duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]" : "duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
|
|
3238
3253
|
),
|
|
3239
3254
|
style: { gridTemplateRows: open ? "1fr" : "0fr" },
|
|
3240
|
-
children: /* @__PURE__ */ (0,
|
|
3255
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3241
3256
|
"div",
|
|
3242
3257
|
{
|
|
3243
3258
|
className: cn(
|
|
@@ -3253,7 +3268,7 @@ function ToolBodyPresence({
|
|
|
3253
3268
|
}
|
|
3254
3269
|
|
|
3255
3270
|
// src/components/tool-fallback.tsx
|
|
3256
|
-
var
|
|
3271
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3257
3272
|
function detectRunning({
|
|
3258
3273
|
status,
|
|
3259
3274
|
result,
|
|
@@ -3267,7 +3282,7 @@ function detectRunning({
|
|
|
3267
3282
|
}
|
|
3268
3283
|
function useToolRunning(props) {
|
|
3269
3284
|
const { isRunning: streamRunning } = useTimbalRuntime();
|
|
3270
|
-
const partStatus = (0,
|
|
3285
|
+
const partStatus = (0, import_react22.useAuiState)((s) => s.part.status);
|
|
3271
3286
|
return detectRunning({
|
|
3272
3287
|
status: partStatus ?? props.status,
|
|
3273
3288
|
result: props.result,
|
|
@@ -3285,8 +3300,8 @@ function formatToolResult(result) {
|
|
|
3285
3300
|
return String(result);
|
|
3286
3301
|
}
|
|
3287
3302
|
}
|
|
3288
|
-
var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0,
|
|
3289
|
-
action ? shimmer ? /* @__PURE__ */ (0,
|
|
3303
|
+
var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
|
|
3304
|
+
action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3290
3305
|
Shimmer,
|
|
3291
3306
|
{
|
|
3292
3307
|
as: "span",
|
|
@@ -3295,10 +3310,10 @@ var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__
|
|
|
3295
3310
|
spread: 2.5,
|
|
3296
3311
|
children: action
|
|
3297
3312
|
}
|
|
3298
|
-
) : /* @__PURE__ */ (0,
|
|
3299
|
-
detail ? /* @__PURE__ */ (0,
|
|
3313
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
|
|
3314
|
+
detail ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
|
|
3300
3315
|
] });
|
|
3301
|
-
var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0,
|
|
3316
|
+
var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3302
3317
|
import_lucide_react5.ChevronRightIcon,
|
|
3303
3318
|
{
|
|
3304
3319
|
className: studioTimelineChevronClass(expanded),
|
|
@@ -3306,9 +3321,9 @@ var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runt
|
|
|
3306
3321
|
}
|
|
3307
3322
|
);
|
|
3308
3323
|
var ToolPanel = ({ toolName, argsText, result, isError }) => {
|
|
3309
|
-
const [open, setOpen] = (0,
|
|
3324
|
+
const [open, setOpen] = (0, import_react21.useState)(false);
|
|
3310
3325
|
const detail = formatToolLabel(toolName);
|
|
3311
|
-
const formattedArgs = (0,
|
|
3326
|
+
const formattedArgs = (0, import_react21.useMemo)(() => {
|
|
3312
3327
|
if (!argsText || argsText === "{}") return null;
|
|
3313
3328
|
try {
|
|
3314
3329
|
return JSON.stringify(JSON.parse(argsText), null, 2);
|
|
@@ -3316,17 +3331,17 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
|
|
|
3316
3331
|
return argsText;
|
|
3317
3332
|
}
|
|
3318
3333
|
}, [argsText]);
|
|
3319
|
-
const formattedResult = (0,
|
|
3334
|
+
const formattedResult = (0, import_react21.useMemo)(() => {
|
|
3320
3335
|
if (result === void 0 || result === null) return null;
|
|
3321
3336
|
return formatToolResult(result);
|
|
3322
3337
|
}, [result]);
|
|
3323
3338
|
const hasBody = Boolean(formattedArgs || formattedResult);
|
|
3324
3339
|
const action = isError ? "Failed" : "Used";
|
|
3325
3340
|
if (!hasBody) {
|
|
3326
|
-
return /* @__PURE__ */ (0,
|
|
3341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineActionLabel, { action, detail }) });
|
|
3327
3342
|
}
|
|
3328
|
-
return /* @__PURE__ */ (0,
|
|
3329
|
-
/* @__PURE__ */ (0,
|
|
3343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
|
|
3344
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3330
3345
|
"button",
|
|
3331
3346
|
{
|
|
3332
3347
|
type: "button",
|
|
@@ -3334,7 +3349,7 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
|
|
|
3334
3349
|
"aria-expanded": open,
|
|
3335
3350
|
"aria-label": `${action} ${detail}`,
|
|
3336
3351
|
className: studioTimelineRowButtonClass,
|
|
3337
|
-
children: /* @__PURE__ */ (0,
|
|
3352
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
3338
3353
|
"span",
|
|
3339
3354
|
{
|
|
3340
3355
|
className: cn(
|
|
@@ -3343,37 +3358,37 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
|
|
|
3343
3358
|
"text-foreground"
|
|
3344
3359
|
),
|
|
3345
3360
|
children: [
|
|
3346
|
-
/* @__PURE__ */ (0,
|
|
3347
|
-
/* @__PURE__ */ (0,
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineActionLabel, { action, detail }),
|
|
3362
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineHoverChevron, { expanded: open })
|
|
3348
3363
|
]
|
|
3349
3364
|
}
|
|
3350
3365
|
)
|
|
3351
3366
|
}
|
|
3352
3367
|
),
|
|
3353
|
-
/* @__PURE__ */ (0,
|
|
3368
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
3354
3369
|
ToolBodyPresence,
|
|
3355
3370
|
{
|
|
3356
3371
|
open,
|
|
3357
3372
|
className: cn(studioTimelineBodyPadClass, "gap-2"),
|
|
3358
3373
|
children: [
|
|
3359
|
-
formattedArgs ? /* @__PURE__ */ (0,
|
|
3374
|
+
formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3360
3375
|
"div",
|
|
3361
3376
|
{
|
|
3362
3377
|
className: cn(
|
|
3363
3378
|
studioComposerIoWellClass,
|
|
3364
3379
|
"max-h-48 overflow-auto px-2.5 py-2"
|
|
3365
3380
|
),
|
|
3366
|
-
children: /* @__PURE__ */ (0,
|
|
3381
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
|
|
3367
3382
|
}
|
|
3368
3383
|
) : null,
|
|
3369
|
-
formattedResult ? /* @__PURE__ */ (0,
|
|
3384
|
+
formattedResult ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3370
3385
|
"div",
|
|
3371
3386
|
{
|
|
3372
3387
|
className: cn(
|
|
3373
3388
|
studioComposerIoWellClass,
|
|
3374
3389
|
"max-h-48 overflow-auto px-2.5 py-2"
|
|
3375
3390
|
),
|
|
3376
|
-
children: /* @__PURE__ */ (0,
|
|
3391
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
|
|
3377
3392
|
}
|
|
3378
3393
|
) : null
|
|
3379
3394
|
]
|
|
@@ -3390,20 +3405,20 @@ var ToolFallbackImpl = ({
|
|
|
3390
3405
|
const isRunning = useToolRunning({ status, result });
|
|
3391
3406
|
const isError = status?.type === "incomplete" && status.reason !== "cancelled";
|
|
3392
3407
|
const presenceKey = isRunning ? "running" : isError ? "error" : "complete";
|
|
3393
|
-
return /* @__PURE__ */ (0,
|
|
3408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3394
3409
|
ToolPresence,
|
|
3395
3410
|
{
|
|
3396
3411
|
presenceKey,
|
|
3397
3412
|
variant: isRunning ? "executing" : "settled",
|
|
3398
3413
|
className: "py-0.5",
|
|
3399
|
-
children: isRunning ? /* @__PURE__ */ (0,
|
|
3414
|
+
children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3400
3415
|
TimelineActionLabel,
|
|
3401
3416
|
{
|
|
3402
3417
|
action: "Using",
|
|
3403
3418
|
detail: formatToolLabel(toolName),
|
|
3404
3419
|
shimmer: true
|
|
3405
3420
|
}
|
|
3406
|
-
) }) : /* @__PURE__ */ (0,
|
|
3421
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3407
3422
|
ToolPanel,
|
|
3408
3423
|
{
|
|
3409
3424
|
toolName,
|
|
@@ -3415,13 +3430,13 @@ var ToolFallbackImpl = ({
|
|
|
3415
3430
|
}
|
|
3416
3431
|
);
|
|
3417
3432
|
};
|
|
3418
|
-
var ToolFallback = (0,
|
|
3433
|
+
var ToolFallback = (0, import_react21.memo)(
|
|
3419
3434
|
ToolFallbackImpl
|
|
3420
3435
|
);
|
|
3421
3436
|
ToolFallback.displayName = "ToolFallback";
|
|
3422
3437
|
|
|
3423
3438
|
// src/artifacts/tool-artifact.tsx
|
|
3424
|
-
var
|
|
3439
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3425
3440
|
var ToolArtifactFallback = (props) => {
|
|
3426
3441
|
const registry = useArtifactRegistry();
|
|
3427
3442
|
const isRunning = useToolRunning({
|
|
@@ -3433,60 +3448,63 @@ var ToolArtifactFallback = (props) => {
|
|
|
3433
3448
|
if (artifact) {
|
|
3434
3449
|
const Renderer = registry[artifact.type];
|
|
3435
3450
|
if (Renderer) {
|
|
3436
|
-
return /* @__PURE__ */ (0,
|
|
3451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3437
3452
|
ToolMotion,
|
|
3438
3453
|
{
|
|
3439
3454
|
motionKey: `artifact-${artifact.type}`,
|
|
3440
3455
|
className: "aui-tool-artifact",
|
|
3441
|
-
children: /* @__PURE__ */ (0,
|
|
3456
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Renderer, { artifact })
|
|
3442
3457
|
}
|
|
3443
3458
|
);
|
|
3444
3459
|
}
|
|
3445
3460
|
}
|
|
3446
3461
|
}
|
|
3447
|
-
return /* @__PURE__ */ (0,
|
|
3462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToolFallback, { ...props });
|
|
3448
3463
|
};
|
|
3449
3464
|
|
|
3450
3465
|
// src/components/composer.tsx
|
|
3451
|
-
var
|
|
3466
|
+
var import_react23 = require("@assistant-ui/react");
|
|
3452
3467
|
var import_lucide_react6 = require("lucide-react");
|
|
3453
|
-
var
|
|
3468
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3454
3469
|
var Composer = ({
|
|
3455
3470
|
placeholder = "Send a message...",
|
|
3456
|
-
showAttachments
|
|
3471
|
+
showAttachments,
|
|
3457
3472
|
toolbar,
|
|
3458
3473
|
sendTooltip = "Send message",
|
|
3459
3474
|
noAutoFocus,
|
|
3460
3475
|
className
|
|
3461
3476
|
}) => {
|
|
3462
|
-
|
|
3463
|
-
|
|
3477
|
+
const attachmentsEnabled = useTimbalAttachmentsEnabled();
|
|
3478
|
+
const attachUi = showAttachments !== false && attachmentsEnabled;
|
|
3479
|
+
const shell = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
3480
|
+
attachUi && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerAttachments, {}),
|
|
3481
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
|
|
3482
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3483
|
+
ComposerToolbar,
|
|
3484
|
+
{
|
|
3485
|
+
showAttachments: attachUi,
|
|
3486
|
+
toolbar,
|
|
3487
|
+
sendTooltip
|
|
3488
|
+
}
|
|
3489
|
+
)
|
|
3490
|
+
] });
|
|
3491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3492
|
+
import_react23.ComposerPrimitive.Root,
|
|
3464
3493
|
{
|
|
3465
3494
|
className: cn(
|
|
3466
3495
|
"aui-composer-root relative flex w-full flex-col",
|
|
3467
3496
|
className
|
|
3468
3497
|
),
|
|
3469
|
-
children: /* @__PURE__ */ (0,
|
|
3470
|
-
|
|
3498
|
+
children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3499
|
+
import_react23.ComposerPrimitive.AttachmentDropzone,
|
|
3471
3500
|
{
|
|
3472
3501
|
className: cn(
|
|
3473
3502
|
studioComposeInputShellClass,
|
|
3474
3503
|
"data-[dragging=true]:border-2 data-[dragging=true]:border-dashed data-[dragging=true]:border-primary data-[dragging=true]:bg-accent/50"
|
|
3475
3504
|
),
|
|
3476
|
-
children:
|
|
3477
|
-
showAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerAttachments, {}),
|
|
3478
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
|
|
3479
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3480
|
-
ComposerToolbar,
|
|
3481
|
-
{
|
|
3482
|
-
showAttachments,
|
|
3483
|
-
toolbar,
|
|
3484
|
-
sendTooltip
|
|
3485
|
-
}
|
|
3486
|
-
)
|
|
3487
|
-
]
|
|
3505
|
+
children: shell
|
|
3488
3506
|
}
|
|
3489
|
-
)
|
|
3507
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: studioComposeInputShellClass, children: shell })
|
|
3490
3508
|
}
|
|
3491
3509
|
);
|
|
3492
3510
|
};
|
|
@@ -3494,7 +3512,7 @@ var ComposerInput = ({
|
|
|
3494
3512
|
placeholder,
|
|
3495
3513
|
autoFocus
|
|
3496
3514
|
}) => {
|
|
3497
|
-
const composer = (0,
|
|
3515
|
+
const composer = (0, import_react23.useComposerRuntime)();
|
|
3498
3516
|
const onKeyDown = (e) => {
|
|
3499
3517
|
if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
|
|
3500
3518
|
e.preventDefault();
|
|
@@ -3506,8 +3524,8 @@ var ComposerInput = ({
|
|
|
3506
3524
|
el.style.height = "auto";
|
|
3507
3525
|
el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
|
|
3508
3526
|
};
|
|
3509
|
-
return /* @__PURE__ */ (0,
|
|
3510
|
-
|
|
3527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3528
|
+
import_react23.ComposerPrimitive.Input,
|
|
3511
3529
|
{
|
|
3512
3530
|
placeholder,
|
|
3513
3531
|
className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
|
|
@@ -3520,17 +3538,17 @@ var ComposerInput = ({
|
|
|
3520
3538
|
);
|
|
3521
3539
|
};
|
|
3522
3540
|
var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
|
|
3523
|
-
return /* @__PURE__ */ (0,
|
|
3524
|
-
/* @__PURE__ */ (0,
|
|
3525
|
-
showAttachments && /* @__PURE__ */ (0,
|
|
3541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
|
|
3542
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3543
|
+
showAttachments && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerAddAttachment, {}),
|
|
3526
3544
|
toolbar
|
|
3527
3545
|
] }),
|
|
3528
|
-
/* @__PURE__ */ (0,
|
|
3546
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerSendOrCancel, { sendTooltip })
|
|
3529
3547
|
] });
|
|
3530
3548
|
};
|
|
3531
3549
|
var ComposerSendOrCancel = ({ sendTooltip }) => {
|
|
3532
|
-
return /* @__PURE__ */ (0,
|
|
3533
|
-
/* @__PURE__ */ (0,
|
|
3550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
3551
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3534
3552
|
TooltipIconButton,
|
|
3535
3553
|
{
|
|
3536
3554
|
tooltip: sendTooltip,
|
|
@@ -3538,34 +3556,34 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
|
|
|
3538
3556
|
type: "submit",
|
|
3539
3557
|
className: "aui-composer-send shrink-0 disabled:opacity-30",
|
|
3540
3558
|
"aria-label": "Send message",
|
|
3541
|
-
children: /* @__PURE__ */ (0,
|
|
3559
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
|
|
3542
3560
|
}
|
|
3543
3561
|
) }) }),
|
|
3544
|
-
/* @__PURE__ */ (0,
|
|
3562
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3545
3563
|
TooltipIconButton,
|
|
3546
3564
|
{
|
|
3547
3565
|
tooltip: "Stop generating",
|
|
3548
3566
|
variant: "primary",
|
|
3549
3567
|
className: "aui-composer-cancel shrink-0",
|
|
3550
3568
|
"aria-label": "Stop generating",
|
|
3551
|
-
children: /* @__PURE__ */ (0,
|
|
3569
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
|
|
3552
3570
|
}
|
|
3553
3571
|
) }) })
|
|
3554
3572
|
] });
|
|
3555
3573
|
};
|
|
3556
3574
|
|
|
3557
3575
|
// src/components/suggestions.tsx
|
|
3558
|
-
var
|
|
3559
|
-
var
|
|
3576
|
+
var import_react24 = require("react");
|
|
3577
|
+
var import_react25 = require("@assistant-ui/react");
|
|
3560
3578
|
var import_lucide_react7 = require("lucide-react");
|
|
3561
|
-
var
|
|
3579
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3562
3580
|
var Suggestions = ({
|
|
3563
3581
|
suggestions,
|
|
3564
3582
|
className
|
|
3565
3583
|
}) => {
|
|
3566
3584
|
const items = useResolvedSuggestions(suggestions);
|
|
3567
3585
|
if (!items || items.length === 0) return null;
|
|
3568
|
-
return /* @__PURE__ */ (0,
|
|
3586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3569
3587
|
"div",
|
|
3570
3588
|
{
|
|
3571
3589
|
className: cn(
|
|
@@ -3574,17 +3592,17 @@ var Suggestions = ({
|
|
|
3574
3592
|
),
|
|
3575
3593
|
role: "list",
|
|
3576
3594
|
"aria-label": "Suggested prompts",
|
|
3577
|
-
children: items.map((suggestion, i) => /* @__PURE__ */ (0,
|
|
3595
|
+
children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
|
|
3578
3596
|
}
|
|
3579
3597
|
);
|
|
3580
3598
|
};
|
|
3581
3599
|
var SuggestionRow = ({ suggestion }) => {
|
|
3582
|
-
const runtime = (0,
|
|
3600
|
+
const runtime = (0, import_react25.useThreadRuntime)();
|
|
3583
3601
|
const onClick = () => {
|
|
3584
3602
|
const text = suggestion.prompt ?? suggestion.title;
|
|
3585
3603
|
runtime.append({ role: "user", content: [{ type: "text", text }] });
|
|
3586
3604
|
};
|
|
3587
|
-
return /* @__PURE__ */ (0,
|
|
3605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3588
3606
|
"button",
|
|
3589
3607
|
{
|
|
3590
3608
|
type: "button",
|
|
@@ -3592,20 +3610,20 @@ var SuggestionRow = ({ suggestion }) => {
|
|
|
3592
3610
|
onClick,
|
|
3593
3611
|
className: cn("aui-thread-suggestion", studioListRowButtonClass),
|
|
3594
3612
|
children: [
|
|
3595
|
-
/* @__PURE__ */ (0,
|
|
3596
|
-
/* @__PURE__ */ (0,
|
|
3597
|
-
/* @__PURE__ */ (0,
|
|
3598
|
-
suggestion.description && /* @__PURE__ */ (0,
|
|
3613
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
|
|
3614
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
|
|
3615
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
|
|
3616
|
+
suggestion.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
|
|
3599
3617
|
] })
|
|
3600
3618
|
]
|
|
3601
3619
|
}
|
|
3602
3620
|
);
|
|
3603
3621
|
};
|
|
3604
3622
|
function useResolvedSuggestions(source) {
|
|
3605
|
-
const [resolved, setResolved] = (0,
|
|
3623
|
+
const [resolved, setResolved] = (0, import_react24.useState)(
|
|
3606
3624
|
() => Array.isArray(source) ? source : void 0
|
|
3607
3625
|
);
|
|
3608
|
-
(0,
|
|
3626
|
+
(0, import_react24.useEffect)(() => {
|
|
3609
3627
|
if (!source) {
|
|
3610
3628
|
setResolved(void 0);
|
|
3611
3629
|
return;
|
|
@@ -3624,7 +3642,7 @@ function useResolvedSuggestions(source) {
|
|
|
3624
3642
|
cancelled = true;
|
|
3625
3643
|
};
|
|
3626
3644
|
}, [source]);
|
|
3627
|
-
return (0,
|
|
3645
|
+
return (0, import_react24.useMemo)(() => resolved, [resolved]);
|
|
3628
3646
|
}
|
|
3629
3647
|
|
|
3630
3648
|
// src/design/theme-sanity.ts
|
|
@@ -3697,7 +3715,7 @@ function scheduleThemeSanityCheck() {
|
|
|
3697
3715
|
}
|
|
3698
3716
|
|
|
3699
3717
|
// src/components/thread.tsx
|
|
3700
|
-
var
|
|
3718
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
3701
3719
|
var Thread = ({
|
|
3702
3720
|
className,
|
|
3703
3721
|
maxWidth = "44rem",
|
|
@@ -3715,30 +3733,30 @@ var Thread = ({
|
|
|
3715
3733
|
const EditComposerSlot = components?.EditComposer ?? EditComposer;
|
|
3716
3734
|
const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
|
|
3717
3735
|
const SuggestionsSlot = components?.Suggestions ?? Suggestions;
|
|
3718
|
-
(0,
|
|
3736
|
+
(0, import_react26.useEffect)(() => {
|
|
3719
3737
|
scheduleThemeSanityCheck();
|
|
3720
3738
|
}, []);
|
|
3721
|
-
return /* @__PURE__ */ (0,
|
|
3739
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3722
3740
|
ArtifactRegistryProvider,
|
|
3723
3741
|
{
|
|
3724
3742
|
renderers: artifacts?.renderers,
|
|
3725
3743
|
override: artifacts?.override,
|
|
3726
|
-
children: /* @__PURE__ */ (0,
|
|
3727
|
-
}), children: /* @__PURE__ */ (0,
|
|
3728
|
-
|
|
3744
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
|
|
3745
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3746
|
+
import_react27.ThreadPrimitive.Root,
|
|
3729
3747
|
{
|
|
3730
3748
|
className: cn(
|
|
3731
|
-
"aui-root aui-thread-root @container flex h-full flex-col bg-
|
|
3749
|
+
"aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
|
|
3732
3750
|
className
|
|
3733
3751
|
),
|
|
3734
3752
|
style: { ["--thread-max-width"]: maxWidth },
|
|
3735
|
-
children: /* @__PURE__ */ (0,
|
|
3736
|
-
|
|
3753
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3754
|
+
import_react27.ThreadPrimitive.Viewport,
|
|
3737
3755
|
{
|
|
3738
3756
|
turnAnchor: "bottom",
|
|
3739
3757
|
className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
|
|
3740
3758
|
children: [
|
|
3741
|
-
/* @__PURE__ */ (0,
|
|
3759
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3742
3760
|
WelcomeSlot,
|
|
3743
3761
|
{
|
|
3744
3762
|
config: welcome,
|
|
@@ -3746,8 +3764,8 @@ var Thread = ({
|
|
|
3746
3764
|
Suggestions: SuggestionsSlot
|
|
3747
3765
|
}
|
|
3748
3766
|
),
|
|
3749
|
-
/* @__PURE__ */ (0,
|
|
3750
|
-
|
|
3767
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3768
|
+
import_react27.ThreadPrimitive.Messages,
|
|
3751
3769
|
{
|
|
3752
3770
|
components: {
|
|
3753
3771
|
UserMessage: UserMessageSlot,
|
|
@@ -3756,9 +3774,9 @@ var Thread = ({
|
|
|
3756
3774
|
}
|
|
3757
3775
|
}
|
|
3758
3776
|
),
|
|
3759
|
-
/* @__PURE__ */ (0,
|
|
3760
|
-
/* @__PURE__ */ (0,
|
|
3761
|
-
/* @__PURE__ */ (0,
|
|
3777
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
|
|
3778
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollToBottomSlot, {}),
|
|
3779
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
|
|
3762
3780
|
] })
|
|
3763
3781
|
]
|
|
3764
3782
|
}
|
|
@@ -3769,13 +3787,13 @@ var Thread = ({
|
|
|
3769
3787
|
);
|
|
3770
3788
|
};
|
|
3771
3789
|
var ThreadScrollToBottom = () => {
|
|
3772
|
-
return /* @__PURE__ */ (0,
|
|
3790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3773
3791
|
TooltipIconButton,
|
|
3774
3792
|
{
|
|
3775
3793
|
tooltip: "Scroll to bottom",
|
|
3776
3794
|
variant: "secondary",
|
|
3777
3795
|
className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center disabled:invisible",
|
|
3778
|
-
children: /* @__PURE__ */ (0,
|
|
3796
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.ArrowDownIcon, { className: "size-4" })
|
|
3779
3797
|
}
|
|
3780
3798
|
) });
|
|
3781
3799
|
};
|
|
@@ -3807,28 +3825,28 @@ var ThreadWelcome = ({
|
|
|
3807
3825
|
suggestions,
|
|
3808
3826
|
Suggestions: SuggestionsSlot = Suggestions
|
|
3809
3827
|
}) => {
|
|
3810
|
-
const isEmpty = (0,
|
|
3828
|
+
const isEmpty = (0, import_react27.useThread)((s) => s.messages.length === 0);
|
|
3811
3829
|
if (!isEmpty) return null;
|
|
3812
|
-
return /* @__PURE__ */ (0,
|
|
3813
|
-
/* @__PURE__ */ (0,
|
|
3814
|
-
|
|
3830
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
|
|
3831
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3832
|
+
import_react28.motion.div,
|
|
3815
3833
|
{
|
|
3816
3834
|
className: "aui-thread-welcome-message flex flex-col items-center justify-center px-4 text-center",
|
|
3817
3835
|
variants: welcomeStagger,
|
|
3818
3836
|
initial: "initial",
|
|
3819
3837
|
animate: "animate",
|
|
3820
3838
|
children: [
|
|
3821
|
-
config?.icon && /* @__PURE__ */ (0,
|
|
3822
|
-
/* @__PURE__ */ (0,
|
|
3823
|
-
|
|
3839
|
+
config?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.motion.div, { variants: welcomeIcon, className: "mb-5", children: config.icon }),
|
|
3840
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3841
|
+
import_react28.motion.h1,
|
|
3824
3842
|
{
|
|
3825
3843
|
variants: welcomeItem,
|
|
3826
3844
|
className: "aui-thread-welcome-message-inner font-semibold text-2xl",
|
|
3827
3845
|
children: config?.heading ?? "How can I help you today?"
|
|
3828
3846
|
}
|
|
3829
3847
|
),
|
|
3830
|
-
/* @__PURE__ */ (0,
|
|
3831
|
-
|
|
3848
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3849
|
+
import_react28.motion.p,
|
|
3832
3850
|
{
|
|
3833
3851
|
variants: welcomeItem,
|
|
3834
3852
|
className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
|
|
@@ -3838,22 +3856,22 @@ var ThreadWelcome = ({
|
|
|
3838
3856
|
]
|
|
3839
3857
|
}
|
|
3840
3858
|
) }),
|
|
3841
|
-
suggestions && /* @__PURE__ */ (0,
|
|
3859
|
+
suggestions && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SuggestionsSlot, { suggestions }) })
|
|
3842
3860
|
] });
|
|
3843
3861
|
};
|
|
3844
3862
|
var MessageError = () => {
|
|
3845
|
-
return /* @__PURE__ */ (0,
|
|
3863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
|
|
3846
3864
|
};
|
|
3847
3865
|
var AssistantMessage = () => {
|
|
3848
|
-
return /* @__PURE__ */ (0,
|
|
3849
|
-
|
|
3866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3867
|
+
import_react27.MessagePrimitive.Root,
|
|
3850
3868
|
{
|
|
3851
3869
|
className: "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150",
|
|
3852
3870
|
"data-role": "assistant",
|
|
3853
3871
|
children: [
|
|
3854
|
-
/* @__PURE__ */ (0,
|
|
3855
|
-
/* @__PURE__ */ (0,
|
|
3856
|
-
|
|
3872
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
|
|
3873
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3874
|
+
import_react27.MessagePrimitive.Parts,
|
|
3857
3875
|
{
|
|
3858
3876
|
components: {
|
|
3859
3877
|
Text: MarkdownText,
|
|
@@ -3863,9 +3881,9 @@ var AssistantMessage = () => {
|
|
|
3863
3881
|
}
|
|
3864
3882
|
}
|
|
3865
3883
|
),
|
|
3866
|
-
/* @__PURE__ */ (0,
|
|
3884
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageError, {})
|
|
3867
3885
|
] }),
|
|
3868
|
-
/* @__PURE__ */ (0,
|
|
3886
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AssistantActionBar, {}) })
|
|
3869
3887
|
]
|
|
3870
3888
|
}
|
|
3871
3889
|
);
|
|
@@ -3878,36 +3896,36 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
|
|
|
3878
3896
|
"[&>span:first-child]:group-hover/tbv2:bg-muted/70"
|
|
3879
3897
|
);
|
|
3880
3898
|
var AssistantActionBar = () => {
|
|
3881
|
-
return /* @__PURE__ */ (0,
|
|
3882
|
-
|
|
3899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3900
|
+
import_react27.ActionBarPrimitive.Root,
|
|
3883
3901
|
{
|
|
3884
3902
|
hideWhenRunning: true,
|
|
3885
3903
|
autohide: "never",
|
|
3886
3904
|
className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
|
|
3887
3905
|
children: [
|
|
3888
|
-
/* @__PURE__ */ (0,
|
|
3906
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3889
3907
|
TooltipIconButton,
|
|
3890
3908
|
{
|
|
3891
3909
|
tooltip: "Copy",
|
|
3892
3910
|
variant: "ghost",
|
|
3893
3911
|
className: ASSISTANT_ACTION_ICON_CLASS,
|
|
3894
3912
|
children: [
|
|
3895
|
-
/* @__PURE__ */ (0,
|
|
3896
|
-
/* @__PURE__ */ (0,
|
|
3913
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
|
|
3914
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
|
|
3897
3915
|
]
|
|
3898
3916
|
}
|
|
3899
3917
|
) }),
|
|
3900
|
-
/* @__PURE__ */ (0,
|
|
3918
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3901
3919
|
TooltipIconButton,
|
|
3902
3920
|
{
|
|
3903
3921
|
tooltip: "Regenerate",
|
|
3904
3922
|
variant: "ghost",
|
|
3905
3923
|
className: ASSISTANT_ACTION_ICON_CLASS,
|
|
3906
|
-
children: /* @__PURE__ */ (0,
|
|
3924
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
|
|
3907
3925
|
}
|
|
3908
3926
|
) }),
|
|
3909
|
-
/* @__PURE__ */ (0,
|
|
3910
|
-
/* @__PURE__ */ (0,
|
|
3927
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ActionBarMorePrimitive.Root, { children: [
|
|
3928
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3911
3929
|
TooltipIconButton,
|
|
3912
3930
|
{
|
|
3913
3931
|
tooltip: "More",
|
|
@@ -3916,17 +3934,17 @@ var AssistantActionBar = () => {
|
|
|
3916
3934
|
ASSISTANT_ACTION_ICON_CLASS,
|
|
3917
3935
|
"data-[state=open]:text-muted-foreground/80"
|
|
3918
3936
|
),
|
|
3919
|
-
children: /* @__PURE__ */ (0,
|
|
3937
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-3" })
|
|
3920
3938
|
}
|
|
3921
3939
|
) }),
|
|
3922
|
-
/* @__PURE__ */ (0,
|
|
3923
|
-
|
|
3940
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3941
|
+
import_react27.ActionBarMorePrimitive.Content,
|
|
3924
3942
|
{
|
|
3925
3943
|
side: "bottom",
|
|
3926
3944
|
align: "start",
|
|
3927
3945
|
className: "aui-action-bar-more-content z-50 min-w-36 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-card-elevated",
|
|
3928
|
-
children: /* @__PURE__ */ (0,
|
|
3929
|
-
/* @__PURE__ */ (0,
|
|
3946
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-muted focus:bg-muted", children: [
|
|
3947
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
|
|
3930
3948
|
"Export as Markdown"
|
|
3931
3949
|
] }) })
|
|
3932
3950
|
}
|
|
@@ -3937,26 +3955,26 @@ var AssistantActionBar = () => {
|
|
|
3937
3955
|
);
|
|
3938
3956
|
};
|
|
3939
3957
|
var UserMessageText = () => {
|
|
3940
|
-
return /* @__PURE__ */ (0,
|
|
3958
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePartPrimitive.Text, { smooth: false }) });
|
|
3941
3959
|
};
|
|
3942
3960
|
var UserMessage = () => {
|
|
3943
|
-
return /* @__PURE__ */ (0,
|
|
3944
|
-
|
|
3961
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3962
|
+
import_react27.MessagePrimitive.Root,
|
|
3945
3963
|
{
|
|
3946
3964
|
className: "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2 px-2 py-3",
|
|
3947
3965
|
"data-role": "user",
|
|
3948
3966
|
children: [
|
|
3949
|
-
/* @__PURE__ */ (0,
|
|
3950
|
-
/* @__PURE__ */ (0,
|
|
3951
|
-
|
|
3967
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserMessageAttachments, {}),
|
|
3968
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3969
|
+
import_react28.motion.div,
|
|
3952
3970
|
{
|
|
3953
3971
|
className: "aui-user-message-content relative inline-block max-w-[80%] rounded-2xl bg-bubble-user px-4 py-2.5 text-bubble-user-foreground",
|
|
3954
3972
|
initial: { opacity: 0, y: 8, scale: 0.99 },
|
|
3955
3973
|
animate: { opacity: 1, y: 0, scale: 1 },
|
|
3956
3974
|
transition: { duration: 0.65, ease: luxuryEase },
|
|
3957
3975
|
children: [
|
|
3958
|
-
/* @__PURE__ */ (0,
|
|
3959
|
-
/* @__PURE__ */ (0,
|
|
3976
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
|
|
3977
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserActionBar, {}) })
|
|
3960
3978
|
]
|
|
3961
3979
|
}
|
|
3962
3980
|
)
|
|
@@ -3965,42 +3983,42 @@ var UserMessage = () => {
|
|
|
3965
3983
|
);
|
|
3966
3984
|
};
|
|
3967
3985
|
var UserActionBar = () => {
|
|
3968
|
-
return /* @__PURE__ */ (0,
|
|
3969
|
-
|
|
3986
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3987
|
+
import_react27.ActionBarPrimitive.Root,
|
|
3970
3988
|
{
|
|
3971
3989
|
hideWhenRunning: true,
|
|
3972
|
-
autohide: "
|
|
3990
|
+
autohide: "always",
|
|
3973
3991
|
className: "aui-user-action-bar-root flex flex-col items-end",
|
|
3974
|
-
children: /* @__PURE__ */ (0,
|
|
3992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3975
3993
|
TooltipIconButton,
|
|
3976
3994
|
{
|
|
3977
3995
|
tooltip: "Edit",
|
|
3978
3996
|
variant: "ghost",
|
|
3979
3997
|
className: ASSISTANT_ACTION_ICON_CLASS,
|
|
3980
|
-
children: /* @__PURE__ */ (0,
|
|
3998
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.PencilIcon, { className: "size-3" })
|
|
3981
3999
|
}
|
|
3982
4000
|
) })
|
|
3983
4001
|
}
|
|
3984
4002
|
);
|
|
3985
4003
|
};
|
|
3986
4004
|
var EditComposer = () => {
|
|
3987
|
-
return /* @__PURE__ */ (0,
|
|
3988
|
-
/* @__PURE__ */ (0,
|
|
3989
|
-
|
|
4005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
|
|
4006
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4007
|
+
import_react27.ComposerPrimitive.Input,
|
|
3990
4008
|
{
|
|
3991
4009
|
className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none",
|
|
3992
4010
|
autoFocus: true
|
|
3993
4011
|
}
|
|
3994
4012
|
),
|
|
3995
|
-
/* @__PURE__ */ (0,
|
|
3996
|
-
/* @__PURE__ */ (0,
|
|
3997
|
-
/* @__PURE__ */ (0,
|
|
4013
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
|
|
4014
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
|
|
4015
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
|
|
3998
4016
|
] })
|
|
3999
4017
|
] }) });
|
|
4000
4018
|
};
|
|
4001
4019
|
|
|
4002
4020
|
// src/components/chat.tsx
|
|
4003
|
-
var
|
|
4021
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
4004
4022
|
function TimbalChat({
|
|
4005
4023
|
workforceId,
|
|
4006
4024
|
baseUrl,
|
|
@@ -4011,7 +4029,7 @@ function TimbalChat({
|
|
|
4011
4029
|
debug,
|
|
4012
4030
|
...threadProps
|
|
4013
4031
|
}) {
|
|
4014
|
-
return /* @__PURE__ */ (0,
|
|
4032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4015
4033
|
TimbalRuntimeProvider,
|
|
4016
4034
|
{
|
|
4017
4035
|
workforceId,
|
|
@@ -4021,14 +4039,14 @@ function TimbalChat({
|
|
|
4021
4039
|
attachmentsUploadUrl,
|
|
4022
4040
|
attachmentsAccept,
|
|
4023
4041
|
debug,
|
|
4024
|
-
children: /* @__PURE__ */ (0,
|
|
4042
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Thread, { ...threadProps })
|
|
4025
4043
|
}
|
|
4026
4044
|
);
|
|
4027
4045
|
}
|
|
4028
4046
|
|
|
4029
4047
|
// src/components/workforce-selector.tsx
|
|
4030
4048
|
var import_lucide_react9 = require("lucide-react");
|
|
4031
|
-
var
|
|
4049
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
4032
4050
|
var WorkforceSelector = ({
|
|
4033
4051
|
workforces,
|
|
4034
4052
|
value,
|
|
@@ -4039,7 +4057,7 @@ var WorkforceSelector = ({
|
|
|
4039
4057
|
}) => {
|
|
4040
4058
|
if (workforces.length === 0) return null;
|
|
4041
4059
|
if (hideWhenSingle && workforces.length === 1) return null;
|
|
4042
|
-
return /* @__PURE__ */ (0,
|
|
4060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
4043
4061
|
"div",
|
|
4044
4062
|
{
|
|
4045
4063
|
className: cn(
|
|
@@ -4050,7 +4068,7 @@ var WorkforceSelector = ({
|
|
|
4050
4068
|
className
|
|
4051
4069
|
),
|
|
4052
4070
|
children: [
|
|
4053
|
-
/* @__PURE__ */ (0,
|
|
4071
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
4054
4072
|
"select",
|
|
4055
4073
|
{
|
|
4056
4074
|
className: "aui-workforce-selector-input h-full cursor-pointer appearance-none rounded-full border-none bg-transparent pr-8 pl-3.5 text-sm font-medium text-foreground outline-none focus:outline-none",
|
|
@@ -4058,15 +4076,15 @@ var WorkforceSelector = ({
|
|
|
4058
4076
|
onChange: (e) => onChange(e.target.value),
|
|
4059
4077
|
"aria-label": placeholder,
|
|
4060
4078
|
children: [
|
|
4061
|
-
!value && /* @__PURE__ */ (0,
|
|
4079
|
+
!value && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "", children: placeholder }),
|
|
4062
4080
|
workforces.map((w) => {
|
|
4063
4081
|
const id = idOf(w);
|
|
4064
|
-
return /* @__PURE__ */ (0,
|
|
4082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: id, children: w.name ?? id }, id);
|
|
4065
4083
|
})
|
|
4066
4084
|
]
|
|
4067
4085
|
}
|
|
4068
4086
|
),
|
|
4069
|
-
/* @__PURE__ */ (0,
|
|
4087
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4070
4088
|
import_lucide_react9.ChevronDownIcon,
|
|
4071
4089
|
{
|
|
4072
4090
|
className: "aui-workforce-selector-icon pointer-events-none absolute right-3 size-3.5 text-muted-foreground/70",
|
|
@@ -4082,22 +4100,22 @@ function idOf(item) {
|
|
|
4082
4100
|
}
|
|
4083
4101
|
|
|
4084
4102
|
// src/hooks/use-workforces.ts
|
|
4085
|
-
var
|
|
4103
|
+
var import_react29 = require("react");
|
|
4086
4104
|
function useWorkforces(options = {}) {
|
|
4087
4105
|
const { baseUrl = "/api", fetch: fetchFn, pickInitial, enabled = true } = options;
|
|
4088
|
-
const [workforces, setWorkforces] = (0,
|
|
4089
|
-
const [selectedId, setSelectedId] = (0,
|
|
4090
|
-
const [isLoading, setIsLoading] = (0,
|
|
4091
|
-
const [error, setError] = (0,
|
|
4092
|
-
const fetchFnRef = (0,
|
|
4093
|
-
(0,
|
|
4106
|
+
const [workforces, setWorkforces] = (0, import_react29.useState)([]);
|
|
4107
|
+
const [selectedId, setSelectedId] = (0, import_react29.useState)("");
|
|
4108
|
+
const [isLoading, setIsLoading] = (0, import_react29.useState)(enabled);
|
|
4109
|
+
const [error, setError] = (0, import_react29.useState)(null);
|
|
4110
|
+
const fetchFnRef = (0, import_react29.useRef)(fetchFn ?? authFetch);
|
|
4111
|
+
(0, import_react29.useEffect)(() => {
|
|
4094
4112
|
fetchFnRef.current = fetchFn ?? authFetch;
|
|
4095
4113
|
}, [fetchFn]);
|
|
4096
|
-
const pickInitialRef = (0,
|
|
4097
|
-
(0,
|
|
4114
|
+
const pickInitialRef = (0, import_react29.useRef)(pickInitial);
|
|
4115
|
+
(0, import_react29.useEffect)(() => {
|
|
4098
4116
|
pickInitialRef.current = pickInitial;
|
|
4099
4117
|
}, [pickInitial]);
|
|
4100
|
-
const load = (0,
|
|
4118
|
+
const load = (0, import_react29.useMemo)(() => {
|
|
4101
4119
|
return async () => {
|
|
4102
4120
|
if (!enabled) {
|
|
4103
4121
|
setIsLoading(false);
|
|
@@ -4122,10 +4140,10 @@ function useWorkforces(options = {}) {
|
|
|
4122
4140
|
}
|
|
4123
4141
|
};
|
|
4124
4142
|
}, [baseUrl, enabled]);
|
|
4125
|
-
(0,
|
|
4143
|
+
(0, import_react29.useEffect)(() => {
|
|
4126
4144
|
load();
|
|
4127
4145
|
}, [load]);
|
|
4128
|
-
const selected = (0,
|
|
4146
|
+
const selected = (0, import_react29.useMemo)(
|
|
4129
4147
|
() => workforces.find((w) => idOf2(w) === selectedId),
|
|
4130
4148
|
[workforces, selectedId]
|
|
4131
4149
|
);
|
|
@@ -4185,7 +4203,7 @@ var DOM_IDS = {
|
|
|
4185
4203
|
};
|
|
4186
4204
|
|
|
4187
4205
|
// src/components/chat-shell.tsx
|
|
4188
|
-
var
|
|
4206
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
4189
4207
|
var TimbalChatShell = ({
|
|
4190
4208
|
workforceId,
|
|
4191
4209
|
brand,
|
|
@@ -4203,7 +4221,7 @@ var TimbalChatShell = ({
|
|
|
4203
4221
|
});
|
|
4204
4222
|
const effectiveId = workforceId ?? selectedId;
|
|
4205
4223
|
const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
|
|
4206
|
-
return /* @__PURE__ */ (0,
|
|
4224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
4207
4225
|
"div",
|
|
4208
4226
|
{
|
|
4209
4227
|
className: cn(
|
|
@@ -4212,7 +4230,7 @@ var TimbalChatShell = ({
|
|
|
4212
4230
|
),
|
|
4213
4231
|
style: studioChromeShellStyle,
|
|
4214
4232
|
children: [
|
|
4215
|
-
/* @__PURE__ */ (0,
|
|
4233
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4216
4234
|
"div",
|
|
4217
4235
|
{
|
|
4218
4236
|
className: cn(
|
|
@@ -4222,18 +4240,18 @@ var TimbalChatShell = ({
|
|
|
4222
4240
|
"aria-hidden": true
|
|
4223
4241
|
}
|
|
4224
4242
|
),
|
|
4225
|
-
/* @__PURE__ */ (0,
|
|
4243
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
4226
4244
|
"header",
|
|
4227
4245
|
{
|
|
4228
4246
|
className: cn(
|
|
4229
|
-
"aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between px-4 pt-[var(--studio-topbar-gap)] pb-2",
|
|
4247
|
+
"aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between bg-transparent px-4 pt-[var(--studio-topbar-gap)] pb-2",
|
|
4230
4248
|
headerClassName
|
|
4231
4249
|
),
|
|
4232
4250
|
style: { minHeight: "var(--studio-topbar-height)" },
|
|
4233
4251
|
children: [
|
|
4234
|
-
/* @__PURE__ */ (0,
|
|
4252
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
|
|
4235
4253
|
brand,
|
|
4236
|
-
showSelector && /* @__PURE__ */ (0,
|
|
4254
|
+
showSelector && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4237
4255
|
WorkforceSelector,
|
|
4238
4256
|
{
|
|
4239
4257
|
workforces,
|
|
@@ -4242,11 +4260,11 @@ var TimbalChatShell = ({
|
|
|
4242
4260
|
}
|
|
4243
4261
|
)
|
|
4244
4262
|
] }),
|
|
4245
|
-
/* @__PURE__ */ (0,
|
|
4263
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions })
|
|
4246
4264
|
]
|
|
4247
4265
|
}
|
|
4248
4266
|
),
|
|
4249
|
-
/* @__PURE__ */ (0,
|
|
4267
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4250
4268
|
TimbalChat,
|
|
4251
4269
|
{
|
|
4252
4270
|
workforceId: effectiveId,
|
|
@@ -4263,9 +4281,9 @@ var TimbalChatShell = ({
|
|
|
4263
4281
|
};
|
|
4264
4282
|
|
|
4265
4283
|
// src/components/studio/studio-shell.tsx
|
|
4266
|
-
var
|
|
4284
|
+
var import_react42 = require("react");
|
|
4267
4285
|
var import_lucide_react13 = require("lucide-react");
|
|
4268
|
-
var
|
|
4286
|
+
var import_react43 = require("motion/react");
|
|
4269
4287
|
|
|
4270
4288
|
// src/design/sidebar-motion.ts
|
|
4271
4289
|
var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
|
|
@@ -4336,16 +4354,16 @@ function studioSidebarBackdropTransition(reduced) {
|
|
|
4336
4354
|
}
|
|
4337
4355
|
|
|
4338
4356
|
// src/hooks/use-sidebar-collapse-phase.ts
|
|
4339
|
-
var
|
|
4357
|
+
var import_react30 = require("react");
|
|
4340
4358
|
var WIDTH_OVERLAP_FRAC = 0.7;
|
|
4341
4359
|
function useSidebarCollapsePhase(collapsed, reducedMotion) {
|
|
4342
|
-
const [widthCollapsed, setWidthCollapsed] = (0,
|
|
4343
|
-
const [entriesVisible, setEntriesVisible] = (0,
|
|
4344
|
-
const collapsedTarget = (0,
|
|
4345
|
-
const isFirstRender = (0,
|
|
4346
|
-
const widthTimerRef = (0,
|
|
4347
|
-
const revealTimerRef = (0,
|
|
4348
|
-
(0,
|
|
4360
|
+
const [widthCollapsed, setWidthCollapsed] = (0, import_react30.useState)(collapsed);
|
|
4361
|
+
const [entriesVisible, setEntriesVisible] = (0, import_react30.useState)(true);
|
|
4362
|
+
const collapsedTarget = (0, import_react30.useRef)(collapsed);
|
|
4363
|
+
const isFirstRender = (0, import_react30.useRef)(true);
|
|
4364
|
+
const widthTimerRef = (0, import_react30.useRef)(null);
|
|
4365
|
+
const revealTimerRef = (0, import_react30.useRef)(null);
|
|
4366
|
+
(0, import_react30.useEffect)(() => {
|
|
4349
4367
|
collapsedTarget.current = collapsed;
|
|
4350
4368
|
}, [collapsed]);
|
|
4351
4369
|
const clearWidthTimer = () => {
|
|
@@ -4360,7 +4378,7 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
|
|
|
4360
4378
|
revealTimerRef.current = null;
|
|
4361
4379
|
}
|
|
4362
4380
|
};
|
|
4363
|
-
const applyWidthTarget = (0,
|
|
4381
|
+
const applyWidthTarget = (0, import_react30.useCallback)(() => {
|
|
4364
4382
|
const willExpand = !collapsedTarget.current;
|
|
4365
4383
|
setWidthCollapsed(collapsedTarget.current);
|
|
4366
4384
|
clearRevealTimer();
|
|
@@ -4371,7 +4389,7 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
|
|
|
4371
4389
|
);
|
|
4372
4390
|
}
|
|
4373
4391
|
}, [reducedMotion]);
|
|
4374
|
-
(0,
|
|
4392
|
+
(0, import_react30.useEffect)(() => {
|
|
4375
4393
|
clearWidthTimer();
|
|
4376
4394
|
clearRevealTimer();
|
|
4377
4395
|
if (reducedMotion) {
|
|
@@ -4395,10 +4413,10 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
|
|
|
4395
4413
|
clearRevealTimer();
|
|
4396
4414
|
};
|
|
4397
4415
|
}, [collapsed, reducedMotion, applyWidthTarget]);
|
|
4398
|
-
const onEntriesBlurOutComplete = (0,
|
|
4416
|
+
const onEntriesBlurOutComplete = (0, import_react30.useCallback)(() => {
|
|
4399
4417
|
applyWidthTarget();
|
|
4400
4418
|
}, [applyWidthTarget]);
|
|
4401
|
-
const onPanelWidthComplete = (0,
|
|
4419
|
+
const onPanelWidthComplete = (0, import_react30.useCallback)(() => {
|
|
4402
4420
|
clearRevealTimer();
|
|
4403
4421
|
setEntriesVisible(true);
|
|
4404
4422
|
}, []);
|
|
@@ -4413,15 +4431,15 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
|
|
|
4413
4431
|
}
|
|
4414
4432
|
|
|
4415
4433
|
// src/components/studio/sidebar-backdrop.tsx
|
|
4416
|
-
var
|
|
4417
|
-
var
|
|
4434
|
+
var import_react31 = require("motion/react");
|
|
4435
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
4418
4436
|
var StudioSidebarBackdrop = ({
|
|
4419
4437
|
open,
|
|
4420
4438
|
onClose
|
|
4421
4439
|
}) => {
|
|
4422
|
-
const reducedMotion = (0,
|
|
4423
|
-
return /* @__PURE__ */ (0,
|
|
4424
|
-
|
|
4440
|
+
const reducedMotion = (0, import_react31.useReducedMotion)();
|
|
4441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react31.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4442
|
+
import_react31.motion.button,
|
|
4425
4443
|
{
|
|
4426
4444
|
type: "button",
|
|
4427
4445
|
className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden",
|
|
@@ -4436,36 +4454,36 @@ var StudioSidebarBackdrop = ({
|
|
|
4436
4454
|
};
|
|
4437
4455
|
|
|
4438
4456
|
// src/components/studio/sidebar-context.tsx
|
|
4439
|
-
var
|
|
4440
|
-
var StudioSidebarContext = (0,
|
|
4457
|
+
var import_react32 = require("react");
|
|
4458
|
+
var StudioSidebarContext = (0, import_react32.createContext)({
|
|
4441
4459
|
collapsed: false,
|
|
4442
4460
|
isMobile: false,
|
|
4443
4461
|
isCollapsedRail: false,
|
|
4444
4462
|
iconOnlyLayout: false
|
|
4445
4463
|
});
|
|
4446
4464
|
function useStudioSidebarLayout() {
|
|
4447
|
-
return (0,
|
|
4465
|
+
return (0, import_react32.useContext)(StudioSidebarContext);
|
|
4448
4466
|
}
|
|
4449
4467
|
|
|
4450
4468
|
// src/components/studio/sidebar.tsx
|
|
4451
|
-
var
|
|
4452
|
-
var
|
|
4469
|
+
var import_react36 = require("react");
|
|
4470
|
+
var import_react37 = require("motion/react");
|
|
4453
4471
|
|
|
4454
4472
|
// src/components/studio/sidebar-entries.tsx
|
|
4455
|
-
var
|
|
4456
|
-
var
|
|
4473
|
+
var import_react33 = require("motion/react");
|
|
4474
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4457
4475
|
var StudioSidebarEntries = ({
|
|
4458
4476
|
visible,
|
|
4459
4477
|
onBlurOutComplete,
|
|
4460
4478
|
children,
|
|
4461
4479
|
className
|
|
4462
4480
|
}) => {
|
|
4463
|
-
const reducedMotion = (0,
|
|
4481
|
+
const reducedMotion = (0, import_react33.useReducedMotion)();
|
|
4464
4482
|
if (reducedMotion) {
|
|
4465
|
-
return visible ? /* @__PURE__ */ (0,
|
|
4483
|
+
return visible ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
|
|
4466
4484
|
}
|
|
4467
|
-
return /* @__PURE__ */ (0,
|
|
4468
|
-
|
|
4485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4486
|
+
import_react33.motion.div,
|
|
4469
4487
|
{
|
|
4470
4488
|
className: cn("flex min-h-0 flex-1 flex-col", className),
|
|
4471
4489
|
initial: false,
|
|
@@ -4488,8 +4506,8 @@ var StudioSidebarEntries = ({
|
|
|
4488
4506
|
var import_lucide_react10 = require("lucide-react");
|
|
4489
4507
|
|
|
4490
4508
|
// src/auth/provider.tsx
|
|
4491
|
-
var
|
|
4492
|
-
var
|
|
4509
|
+
var import_react34 = require("react");
|
|
4510
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
4493
4511
|
function isInsideIframe() {
|
|
4494
4512
|
try {
|
|
4495
4513
|
return typeof window !== "undefined" && window.self !== window.top;
|
|
@@ -4497,26 +4515,26 @@ function isInsideIframe() {
|
|
|
4497
4515
|
return true;
|
|
4498
4516
|
}
|
|
4499
4517
|
}
|
|
4500
|
-
var SessionContext = (0,
|
|
4518
|
+
var SessionContext = (0, import_react34.createContext)(void 0);
|
|
4501
4519
|
var useSession = () => {
|
|
4502
|
-
const context = (0,
|
|
4520
|
+
const context = (0, import_react34.useContext)(SessionContext);
|
|
4503
4521
|
if (context === void 0) {
|
|
4504
4522
|
throw new Error("useSession must be used within a SessionProvider");
|
|
4505
4523
|
}
|
|
4506
4524
|
return context;
|
|
4507
4525
|
};
|
|
4508
4526
|
var useOptionalSession = () => {
|
|
4509
|
-
const context = (0,
|
|
4527
|
+
const context = (0, import_react34.useContext)(SessionContext);
|
|
4510
4528
|
return context ?? null;
|
|
4511
4529
|
};
|
|
4512
4530
|
var SessionProvider = ({
|
|
4513
4531
|
children,
|
|
4514
4532
|
enabled = true
|
|
4515
4533
|
}) => {
|
|
4516
|
-
const [user, setUser] = (0,
|
|
4517
|
-
const [loading, setLoading] = (0,
|
|
4518
|
-
const [embedded] = (0,
|
|
4519
|
-
(0,
|
|
4534
|
+
const [user, setUser] = (0, import_react34.useState)(null);
|
|
4535
|
+
const [loading, setLoading] = (0, import_react34.useState)(enabled);
|
|
4536
|
+
const [embedded] = (0, import_react34.useState)(isInsideIframe);
|
|
4537
|
+
(0, import_react34.useEffect)(() => {
|
|
4520
4538
|
if (!enabled) {
|
|
4521
4539
|
setLoading(false);
|
|
4522
4540
|
return;
|
|
@@ -4577,7 +4595,7 @@ var SessionProvider = ({
|
|
|
4577
4595
|
messageCleanup?.();
|
|
4578
4596
|
};
|
|
4579
4597
|
}, [enabled, embedded]);
|
|
4580
|
-
const logout = (0,
|
|
4598
|
+
const logout = (0, import_react34.useCallback)(() => {
|
|
4581
4599
|
clearTokens();
|
|
4582
4600
|
setUser(null);
|
|
4583
4601
|
const returnTo = encodeURIComponent(
|
|
@@ -4587,7 +4605,7 @@ var SessionProvider = ({
|
|
|
4587
4605
|
() => window.location.href = `/api/auth/login?return_to=${returnTo}`
|
|
4588
4606
|
);
|
|
4589
4607
|
}, []);
|
|
4590
|
-
return /* @__PURE__ */ (0,
|
|
4608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4591
4609
|
SessionContext.Provider,
|
|
4592
4610
|
{
|
|
4593
4611
|
value: {
|
|
@@ -4625,35 +4643,35 @@ function studioSidebarNavItemClasses(iconOnly, isActive) {
|
|
|
4625
4643
|
}
|
|
4626
4644
|
|
|
4627
4645
|
// src/components/studio/sidebar-entry-motion.tsx
|
|
4628
|
-
var
|
|
4629
|
-
var
|
|
4646
|
+
var import_react35 = require("motion/react");
|
|
4647
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
4630
4648
|
var StudioSidebarEntryMotion = ({
|
|
4631
4649
|
children,
|
|
4632
4650
|
className
|
|
4633
4651
|
}) => {
|
|
4634
|
-
const reducedMotion = (0,
|
|
4652
|
+
const reducedMotion = (0, import_react35.useReducedMotion)();
|
|
4635
4653
|
if (reducedMotion) {
|
|
4636
|
-
return /* @__PURE__ */ (0,
|
|
4654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, children });
|
|
4637
4655
|
}
|
|
4638
|
-
return /* @__PURE__ */ (0,
|
|
4656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react35.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
|
|
4639
4657
|
};
|
|
4640
4658
|
|
|
4641
4659
|
// src/components/studio/sidebar-tooltip.tsx
|
|
4642
|
-
var
|
|
4660
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
4643
4661
|
var StudioSidebarTooltip = ({
|
|
4644
4662
|
label,
|
|
4645
4663
|
enabled,
|
|
4646
4664
|
children
|
|
4647
4665
|
}) => {
|
|
4648
|
-
if (!enabled) return /* @__PURE__ */ (0,
|
|
4649
|
-
return /* @__PURE__ */ (0,
|
|
4650
|
-
/* @__PURE__ */ (0,
|
|
4651
|
-
/* @__PURE__ */ (0,
|
|
4666
|
+
if (!enabled) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
|
|
4667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children }),
|
|
4669
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
|
|
4652
4670
|
] });
|
|
4653
4671
|
};
|
|
4654
4672
|
|
|
4655
4673
|
// src/components/studio/sidebar-footer.tsx
|
|
4656
|
-
var
|
|
4674
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
4657
4675
|
function userInitials(name, email) {
|
|
4658
4676
|
const fromName = name.trim().split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
|
|
4659
4677
|
if (fromName) return fromName;
|
|
@@ -4671,32 +4689,32 @@ var StudioSidebarFooter = ({
|
|
|
4671
4689
|
session?.logout();
|
|
4672
4690
|
onSignOut?.();
|
|
4673
4691
|
};
|
|
4674
|
-
return /* @__PURE__ */ (0,
|
|
4692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StudioSidebarEntryMotion, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4675
4693
|
"footer",
|
|
4676
4694
|
{
|
|
4677
4695
|
className: cn(
|
|
4678
4696
|
"mt-auto w-full shrink-0 py-2.5",
|
|
4679
4697
|
iconOnlyLayout ? studioSidebarCollapsedRailInsetClass : "px-2.5"
|
|
4680
4698
|
),
|
|
4681
|
-
children: user ? /* @__PURE__ */ (0,
|
|
4682
|
-
iconOnlyLayout ? /* @__PURE__ */ (0,
|
|
4683
|
-
user.user_photo_url ? /* @__PURE__ */ (0,
|
|
4684
|
-
/* @__PURE__ */ (0,
|
|
4685
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
4686
|
-
/* @__PURE__ */ (0,
|
|
4687
|
-
user.user_photo_url ? /* @__PURE__ */ (0,
|
|
4688
|
-
/* @__PURE__ */ (0,
|
|
4699
|
+
children: user ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-2", children: [
|
|
4700
|
+
iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Avatar, { size: "sm", className: "size-8", children: [
|
|
4701
|
+
user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
|
|
4702
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
|
|
4703
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
4704
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Avatar, { size: "sm", children: [
|
|
4705
|
+
user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
|
|
4706
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
|
|
4689
4707
|
] }),
|
|
4690
|
-
/* @__PURE__ */ (0,
|
|
4691
|
-
/* @__PURE__ */ (0,
|
|
4692
|
-
/* @__PURE__ */ (0,
|
|
4708
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
4709
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
|
|
4710
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
|
|
4693
4711
|
] })
|
|
4694
4712
|
] }),
|
|
4695
|
-
/* @__PURE__ */ (0,
|
|
4713
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4696
4714
|
"div",
|
|
4697
4715
|
{
|
|
4698
4716
|
className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
|
|
4699
|
-
children: /* @__PURE__ */ (0,
|
|
4717
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
4700
4718
|
"button",
|
|
4701
4719
|
{
|
|
4702
4720
|
type: "button",
|
|
@@ -4707,28 +4725,28 @@ var StudioSidebarFooter = ({
|
|
|
4707
4725
|
),
|
|
4708
4726
|
"aria-label": "Sign out",
|
|
4709
4727
|
children: [
|
|
4710
|
-
/* @__PURE__ */ (0,
|
|
4728
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.LogOut, { className: "size-3.5 shrink-0" }),
|
|
4711
4729
|
!iconOnlyLayout ? "Sign out" : null
|
|
4712
4730
|
]
|
|
4713
4731
|
}
|
|
4714
4732
|
) })
|
|
4715
4733
|
}
|
|
4716
4734
|
)
|
|
4717
|
-
] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0,
|
|
4735
|
+
] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
|
|
4718
4736
|
}
|
|
4719
4737
|
) });
|
|
4720
4738
|
};
|
|
4721
4739
|
|
|
4722
4740
|
// src/components/studio/sidebar-header.tsx
|
|
4723
4741
|
var import_lucide_react11 = require("lucide-react");
|
|
4724
|
-
var
|
|
4742
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
4725
4743
|
var sidebarHeaderClass = "flex h-12 shrink-0 items-center px-2";
|
|
4726
4744
|
var toggleButtonClass = cn(
|
|
4727
4745
|
"flex shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
|
|
4728
4746
|
"hover:bg-muted hover:text-foreground",
|
|
4729
4747
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15"
|
|
4730
4748
|
);
|
|
4731
|
-
var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0,
|
|
4749
|
+
var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4732
4750
|
"button",
|
|
4733
4751
|
{
|
|
4734
4752
|
type: "button",
|
|
@@ -4742,7 +4760,7 @@ var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__
|
|
|
4742
4760
|
var CollapsedBrandToggle = ({
|
|
4743
4761
|
onExpand,
|
|
4744
4762
|
brand
|
|
4745
|
-
}) => /* @__PURE__ */ (0,
|
|
4763
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
4746
4764
|
"button",
|
|
4747
4765
|
{
|
|
4748
4766
|
type: "button",
|
|
@@ -4754,7 +4772,7 @@ var CollapsedBrandToggle = ({
|
|
|
4754
4772
|
"group relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg"
|
|
4755
4773
|
),
|
|
4756
4774
|
children: [
|
|
4757
|
-
/* @__PURE__ */ (0,
|
|
4775
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4758
4776
|
"span",
|
|
4759
4777
|
{
|
|
4760
4778
|
"aria-hidden": true,
|
|
@@ -4766,7 +4784,7 @@ var CollapsedBrandToggle = ({
|
|
|
4766
4784
|
children: brand
|
|
4767
4785
|
}
|
|
4768
4786
|
),
|
|
4769
|
-
/* @__PURE__ */ (0,
|
|
4787
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4770
4788
|
import_lucide_react11.ChevronRight,
|
|
4771
4789
|
{
|
|
4772
4790
|
"aria-hidden": true,
|
|
@@ -4788,40 +4806,40 @@ var StudioSidebarHeader = ({
|
|
|
4788
4806
|
brand
|
|
4789
4807
|
}) => {
|
|
4790
4808
|
if (isMobile) {
|
|
4791
|
-
return /* @__PURE__ */ (0,
|
|
4809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
|
|
4792
4810
|
brand,
|
|
4793
|
-
/* @__PURE__ */ (0,
|
|
4811
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4794
4812
|
SidebarToggleButton,
|
|
4795
4813
|
{
|
|
4796
4814
|
ariaLabel: "Close menu",
|
|
4797
4815
|
expanded: mobileOpen,
|
|
4798
4816
|
onClick: onToggle,
|
|
4799
|
-
children: /* @__PURE__ */ (0,
|
|
4817
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react11.X, { className: "size-3.5" })
|
|
4800
4818
|
}
|
|
4801
4819
|
)
|
|
4802
4820
|
] });
|
|
4803
4821
|
}
|
|
4804
4822
|
if (isCollapsedRail) {
|
|
4805
|
-
return /* @__PURE__ */ (0,
|
|
4823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4806
4824
|
"header",
|
|
4807
4825
|
{
|
|
4808
4826
|
className: cn(
|
|
4809
4827
|
"flex h-12 shrink-0 items-center",
|
|
4810
4828
|
studioSidebarCollapsedRailInsetClass
|
|
4811
4829
|
),
|
|
4812
|
-
children: /* @__PURE__ */ (0,
|
|
4830
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CollapsedBrandToggle, { onExpand: onToggle, brand })
|
|
4813
4831
|
}
|
|
4814
4832
|
);
|
|
4815
4833
|
}
|
|
4816
|
-
return /* @__PURE__ */ (0,
|
|
4834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
|
|
4817
4835
|
brand,
|
|
4818
|
-
/* @__PURE__ */ (0,
|
|
4836
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4819
4837
|
SidebarToggleButton,
|
|
4820
4838
|
{
|
|
4821
4839
|
ariaLabel: "Collapse sidebar",
|
|
4822
4840
|
expanded: true,
|
|
4823
4841
|
onClick: onToggle,
|
|
4824
|
-
children: /* @__PURE__ */ (0,
|
|
4842
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react11.ChevronLeft, { className: "size-4" })
|
|
4825
4843
|
}
|
|
4826
4844
|
)
|
|
4827
4845
|
] });
|
|
@@ -4840,7 +4858,7 @@ function workforceItemInitial(w) {
|
|
|
4840
4858
|
}
|
|
4841
4859
|
|
|
4842
4860
|
// src/components/studio/sidebar-nav.tsx
|
|
4843
|
-
var
|
|
4861
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
4844
4862
|
var StudioSidebarNav = ({
|
|
4845
4863
|
workforces,
|
|
4846
4864
|
selectedId,
|
|
@@ -4849,7 +4867,7 @@ var StudioSidebarNav = ({
|
|
|
4849
4867
|
showTooltips
|
|
4850
4868
|
}) => {
|
|
4851
4869
|
if (workforces.length === 0) return null;
|
|
4852
|
-
return /* @__PURE__ */ (0,
|
|
4870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4853
4871
|
"nav",
|
|
4854
4872
|
{
|
|
4855
4873
|
className: cn(
|
|
@@ -4861,11 +4879,11 @@ var StudioSidebarNav = ({
|
|
|
4861
4879
|
const id = workforceItemId(w);
|
|
4862
4880
|
const isActive = id === selectedId;
|
|
4863
4881
|
const label = workforceItemLabel(w);
|
|
4864
|
-
return /* @__PURE__ */ (0,
|
|
4882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4865
4883
|
StudioSidebarEntryMotion,
|
|
4866
4884
|
{
|
|
4867
4885
|
className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
|
|
4868
|
-
children: /* @__PURE__ */ (0,
|
|
4886
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4869
4887
|
"button",
|
|
4870
4888
|
{
|
|
4871
4889
|
type: "button",
|
|
@@ -4876,7 +4894,7 @@ var StudioSidebarNav = ({
|
|
|
4876
4894
|
studioSidebarNavItemClasses(iconOnlyLayout, isActive),
|
|
4877
4895
|
iconOnlyLayout && "inline-flex"
|
|
4878
4896
|
),
|
|
4879
|
-
children: iconOnlyLayout ? /* @__PURE__ */ (0,
|
|
4897
|
+
children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 truncate", children: label })
|
|
4880
4898
|
}
|
|
4881
4899
|
) })
|
|
4882
4900
|
},
|
|
@@ -4889,7 +4907,7 @@ var StudioSidebarNav = ({
|
|
|
4889
4907
|
|
|
4890
4908
|
// src/components/studio/timbal-mark.tsx
|
|
4891
4909
|
var import_shaders_react = require("@paper-design/shaders-react");
|
|
4892
|
-
var
|
|
4910
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
4893
4911
|
var DEFAULT_SIZE = 64;
|
|
4894
4912
|
var TRANSPARENT_BACK = "#00000000";
|
|
4895
4913
|
var TIMBAL_SYMBOL_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAH6ElEQVR4Aeyci7EcNRBFFxIBIgEygUiASCATyASIBOa4rFrZntmPPq1W93218o5nZyTd26dbmnX5fX3TjxyY4IDAmmCqurzdBJYomOKAwJpiqzoVWGJgigMCa4qt6lRgZWHAWKfAMjY8y3ACK0ukjXUKLGPDswwnsLJE2linwDI2PMtwAitLpI11Cixjw+/DxT4SWLHju0ydwHrP+p/euzzE1T8cKr492lsvgfWaXZj733Hp90fL9Pr1EPvn0QTWYcLoF8bS6Pdf/kjQAAnNv7RqVcW6do4q9ffxMe/HW5oXy323boF1zkvzEnDe3RZnS5X6fcRsBdbdRY6oTl1LAJ1s2NDdXaVq3QLr7kapUph8Pxv/iESiDVUqsG63sgQ0b1Rve/6QQEOrVG1DdrCGbFRrQzc5Zh9FlSKppkw5M1gYi8FTjHXaaalSJNTUKWYEC3P5spP3qeY667zsIadVqVpvNrCoUrTag+jHgIRm0z2ka7AGRpzqNG2jOnCeo7uiSi3RnQEszCVjydzRgfPaH1rRbFqlajMig0WVWmpubbThMRvzJVWq1hgVrFKlgKvWG/2YRHLxpBsNrOVLwCJySSBXT7qRwHKxBCwAiypFWzD09ZARwCpVysUScG318E+oUsv3Uleq3gPrqpd1512bO9GWsockqSYO0971zmBR/mnt6ve7k0RC87KvEV61bEewMNftEvCq8Q3XlSqF/obbbW/ZDSz2UWSs2yVgQvjQimb3VarWvgtYZCnm8uRXzz/6MXq3rM47gLXVEjCI9FKlqNCDurTtxjNYxdytloAB4aM6r65S3TK8grXtEtAZEZZ7Wmc362/3BlapUtsuAY0hDVGlau2ewApnbm30g+OyhySpHly210dewKL80/Zyr2+2JBKaQ+4hV4OFudtvVBv4KlUK/Q23+79lJVjso8jYUEvAk5CjFc0hq1StfQVYZCnm8uRXzyX6MXqbq/Nu5liDFX4JOAGgVCkq9MnHMU9ZgVXMDb8EfIYJ1TlNlaq1W4BFlcpoLss9rfY7zfFMsFSl0mD0pdBZYKXaqFa2so+iSpFU1el8hzPAwlgMzuQmeyl0k1ARdf/zrqiRYGGuq/+C9K4Zb11/v5g9JFCh/342+dEosDCWlslOljs0Z3vSfSnGvWCRpRmf+KhSGXW/BBUX9YCFuWQsmUtfGdo3h0g0q0odRjx6tYAFSFnNZXNOlX7kqT47HGgB67jtJnNv+nnkQCtYj/rUZ3LgFggsRdOTAwLLUzQCzUVgBQqmJykCy1M0As1FYAUKpicpAstTNALNRWAFCqYnKTPB8qRTczF2QGAZG55lOIGVJdLGOgWWseFZhhNYWSJtrFNgGRueZTiBlSXSM3We9C2wTkzRqX4HBFa/h+rhxAGBdWKKTvU7ILD6PVQPJw4IrBNTdKrfAYHV76F6OHFAYJ2Ysv+p9QoE1voYhJyBwAoZ1vWiBNb6GIScgcAKGdb1ogTW+hiEnIHAChnW9aIElk0M0o0isNKF3EawwLLxOd0oAitdyN8W/Ndxx9LfmnyMH/aFuX+EVXct7Lfjox+P9vZLFeu5ZcXcf59fGuYKKhRA8Xtmm0QJrGvbqFJd5l537foTKvN3xwzRf7y1vdKC9cSuUqW6zH0yhsePSaSfR0xMYH3qYvcS8Gl32/yNBPrqmC3vx1v/S2DdPRyyBNy72+aIKkUbOuEWsPg970MnsbizUqWGLAGLtbwzPNWpey91NWALWFd97Xh+qrmODSl7SJJqyjQzg0X5p00x1mmnJBKam79GeFVXRrAwd9oS8KrxC64rVQr904f3A9Z0qR8GYB9Fxk5bAj6M4usPtKJ5epWqZWcBiyzFXJ78av3Rj9G7pDpnAMt0CXBCaqlSVOglU4oMVjHXdAlYEsVPB6U6L6lS9TSigkWVWm5ubbTRMcs9zWi462GigaUqdR1r008igbVso2oasS8HYx9FlSKpvvx00ZkHYC2aUduwGIvBbXfveRd7KXSTUO4U7A4W5g79V3l3ETqfEHtIoEL/+RWLz+4MFsbSFltoOjzLHZrdP+nuCBZZmvGJjyVvG927gVWWADLXtFQsHAytVKmt9pC7gEWVwlz3S8BgANG9TZWqte8AVqlSmFzPPfoxiUSbrnPGAJ7BKkuAqtSMyE/u0ytYW21UB8aIfRRViqQa2K19Vx7BwlgMtndj3Ygs8+gmodbNYuDInsDCXH3ZOTC4K7vyAhbZSlvphfXYLHdoDrmHXA0WVWrLx+lOCnnSDa17JViYS8aSuZ1x2uZ2tKL5cZXaRs71RFeARZVKYe5ntrMxD12lar3WYJUqBVz1PKIfk0ipnnStwEqzBHyWISRQxifdmwVYqZaACiyqFK06ledwJlilSqVaAg50qFJp9lKH3tPXLLCymlv2kCTVqeFZTs4Ai/JPC+ThUykkEprDf43w1ImPF4wEC3MzLgGlSqH/o616GwUW+ygyNtMSgFY0q0qd5FEvWGQp5vLkd9J92FPozVidXw5oD1hZlwASiQr9sskZL2wBK+sSgO6UX3a2JEYrWCyBLePtfA/L387zN517C1imE7wYTKedOyCwnAdo1+kJrF0j53zeAst5gHadnsDaNXLO5y2wnAdo1+kJrF0j53zew8ByrlPTM3ZAYBkbnmU4gZUl0sY6BZax4VmGE1hZIm2sU2AZG55lOIGVJdLDdL7W0f8AAAD//x3VUCQAAAAGSURBVAMArsj7LTb9pqMAAAAASUVORK5CYII=";
|
|
@@ -4898,14 +4916,14 @@ function TimbalMark({
|
|
|
4898
4916
|
size = DEFAULT_SIZE,
|
|
4899
4917
|
src = TIMBAL_SYMBOL_DATA_URI
|
|
4900
4918
|
}) {
|
|
4901
|
-
return /* @__PURE__ */ (0,
|
|
4919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4902
4920
|
"div",
|
|
4903
4921
|
{
|
|
4904
4922
|
className: cn("relative shrink-0 bg-transparent", className),
|
|
4905
4923
|
style: { width: size, height: size },
|
|
4906
4924
|
role: "img",
|
|
4907
4925
|
"aria-label": "Timbal",
|
|
4908
|
-
children: /* @__PURE__ */ (0,
|
|
4926
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4909
4927
|
import_shaders_react.LiquidMetal,
|
|
4910
4928
|
{
|
|
4911
4929
|
width: size,
|
|
@@ -4937,7 +4955,7 @@ function TimbalMark({
|
|
|
4937
4955
|
}
|
|
4938
4956
|
|
|
4939
4957
|
// src/components/studio/sidebar.tsx
|
|
4940
|
-
var
|
|
4958
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
4941
4959
|
var DEFAULT_BREAKPOINT_PX = 768;
|
|
4942
4960
|
function readPersistedCollapsed(key) {
|
|
4943
4961
|
if (!key || typeof window === "undefined") return false;
|
|
@@ -4970,7 +4988,7 @@ var StudioSidebarPanel = ({
|
|
|
4970
4988
|
brand,
|
|
4971
4989
|
emptyCaption = null
|
|
4972
4990
|
}) => {
|
|
4973
|
-
const reducedMotion = (0,
|
|
4991
|
+
const reducedMotion = (0, import_react37.useReducedMotion)();
|
|
4974
4992
|
const isCollapsedRail = widthCollapsed && !isMobile;
|
|
4975
4993
|
const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
|
|
4976
4994
|
const isDrawerOpen = isMobile && mobileOpen;
|
|
@@ -4987,9 +5005,9 @@ var StudioSidebarPanel = ({
|
|
|
4987
5005
|
onCollapsedChange(!collapsed);
|
|
4988
5006
|
};
|
|
4989
5007
|
const panelWidthPx = isMobile ? SIDEBAR_MOBILE_PX : widthCollapsed ? SIDEBAR_WIDTH_COLLAPSED_PX : SIDEBAR_WIDTH_PX;
|
|
4990
|
-
const brandNode = brand ?? /* @__PURE__ */ (0,
|
|
4991
|
-
const panel = /* @__PURE__ */ (0,
|
|
4992
|
-
|
|
5008
|
+
const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimbalMark, { size: 32 });
|
|
5009
|
+
const panel = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
5010
|
+
import_react37.motion.div,
|
|
4993
5011
|
{
|
|
4994
5012
|
"data-sidebar-collapsed": isCollapsedRail ? "" : void 0,
|
|
4995
5013
|
className: cn(
|
|
@@ -5003,7 +5021,7 @@ var StudioSidebarPanel = ({
|
|
|
5003
5021
|
style: { willChange: entriesVisible ? void 0 : "width" },
|
|
5004
5022
|
onAnimationComplete: isMobile || entriesVisible ? void 0 : () => onPanelWidthComplete(),
|
|
5005
5023
|
children: [
|
|
5006
|
-
/* @__PURE__ */ (0,
|
|
5024
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5007
5025
|
StudioSidebarHeader,
|
|
5008
5026
|
{
|
|
5009
5027
|
isCollapsedRail,
|
|
@@ -5013,13 +5031,13 @@ var StudioSidebarPanel = ({
|
|
|
5013
5031
|
brand: brandNode
|
|
5014
5032
|
}
|
|
5015
5033
|
),
|
|
5016
|
-
/* @__PURE__ */ (0,
|
|
5034
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
5017
5035
|
StudioSidebarEntries,
|
|
5018
5036
|
{
|
|
5019
5037
|
visible: entriesVisible,
|
|
5020
5038
|
onBlurOutComplete: onEntriesBlurOutComplete,
|
|
5021
5039
|
children: [
|
|
5022
|
-
/* @__PURE__ */ (0,
|
|
5040
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5023
5041
|
"div",
|
|
5024
5042
|
{
|
|
5025
5043
|
id: DOM_IDS.sidebarRuntimeAnchor,
|
|
@@ -5029,7 +5047,7 @@ var StudioSidebarPanel = ({
|
|
|
5029
5047
|
)
|
|
5030
5048
|
}
|
|
5031
5049
|
),
|
|
5032
|
-
/* @__PURE__ */ (0,
|
|
5050
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5033
5051
|
StudioSidebarNav,
|
|
5034
5052
|
{
|
|
5035
5053
|
workforces,
|
|
@@ -5039,8 +5057,8 @@ var StudioSidebarPanel = ({
|
|
|
5039
5057
|
showTooltips: isCollapsedRail
|
|
5040
5058
|
}
|
|
5041
5059
|
),
|
|
5042
|
-
workforces.length === 0 ? /* @__PURE__ */ (0,
|
|
5043
|
-
/* @__PURE__ */ (0,
|
|
5060
|
+
workforces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "min-h-0 flex-1" }) : null,
|
|
5061
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5044
5062
|
StudioSidebarFooter,
|
|
5045
5063
|
{
|
|
5046
5064
|
iconOnlyLayout,
|
|
@@ -5056,8 +5074,8 @@ var StudioSidebarPanel = ({
|
|
|
5056
5074
|
}
|
|
5057
5075
|
);
|
|
5058
5076
|
if (isMobile) {
|
|
5059
|
-
return /* @__PURE__ */ (0,
|
|
5060
|
-
|
|
5077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5078
|
+
import_react37.motion.aside,
|
|
5061
5079
|
{
|
|
5062
5080
|
className: "fixed inset-y-0 left-0 z-[60] flex",
|
|
5063
5081
|
"aria-label": "Studio navigation",
|
|
@@ -5072,7 +5090,7 @@ var StudioSidebarPanel = ({
|
|
|
5072
5090
|
}
|
|
5073
5091
|
);
|
|
5074
5092
|
}
|
|
5075
|
-
return /* @__PURE__ */ (0,
|
|
5093
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5076
5094
|
"aside",
|
|
5077
5095
|
{
|
|
5078
5096
|
className: "absolute inset-y-0 left-0 z-[60] flex py-[var(--studio-sidebar-gap)] pl-[var(--studio-sidebar-gap)]",
|
|
@@ -5093,51 +5111,51 @@ var StudioSidebar = ({
|
|
|
5093
5111
|
mobileOpen: mobileOpenProp,
|
|
5094
5112
|
onMobileOpenChange: onMobileOpenChangeProp
|
|
5095
5113
|
}) => {
|
|
5096
|
-
const reducedMotion = (0,
|
|
5114
|
+
const reducedMotion = (0, import_react37.useReducedMotion)();
|
|
5097
5115
|
const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
|
|
5098
5116
|
const workforces = workforcesProp ?? fetched.workforces;
|
|
5099
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
5117
|
+
const [internalSelected, setInternalSelected] = (0, import_react36.useState)(
|
|
5100
5118
|
selectedIdProp ?? ""
|
|
5101
5119
|
);
|
|
5102
|
-
(0,
|
|
5120
|
+
(0, import_react36.useEffect)(() => {
|
|
5103
5121
|
if (selectedIdProp !== void 0) return;
|
|
5104
5122
|
if (internalSelected) return;
|
|
5105
5123
|
const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
|
|
5106
5124
|
if (first) setInternalSelected(first);
|
|
5107
5125
|
}, [workforces, selectedIdProp, internalSelected]);
|
|
5108
5126
|
const selectedId = selectedIdProp ?? internalSelected ?? workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name ?? "";
|
|
5109
|
-
const handleSelect = (0,
|
|
5127
|
+
const handleSelect = (0, import_react36.useCallback)(
|
|
5110
5128
|
(id) => {
|
|
5111
5129
|
if (selectedIdProp === void 0) setInternalSelected(id);
|
|
5112
5130
|
onSelect?.(id);
|
|
5113
5131
|
},
|
|
5114
5132
|
[selectedIdProp, onSelect]
|
|
5115
5133
|
);
|
|
5116
|
-
const [collapsed, setCollapsed] = (0,
|
|
5134
|
+
const [collapsed, setCollapsed] = (0, import_react36.useState)(() => {
|
|
5117
5135
|
const persisted = readPersistedCollapsed(persistKey);
|
|
5118
5136
|
return persisted || defaultCollapsed;
|
|
5119
5137
|
});
|
|
5120
|
-
const handleCollapsedChange = (0,
|
|
5138
|
+
const handleCollapsedChange = (0, import_react36.useCallback)(
|
|
5121
5139
|
(next) => {
|
|
5122
5140
|
setCollapsed(next);
|
|
5123
5141
|
writePersistedCollapsed(persistKey, next);
|
|
5124
5142
|
},
|
|
5125
5143
|
[persistKey]
|
|
5126
5144
|
);
|
|
5127
|
-
const [isMobile, setIsMobile] = (0,
|
|
5145
|
+
const [isMobile, setIsMobile] = (0, import_react36.useState)(() => {
|
|
5128
5146
|
if (typeof window === "undefined") return false;
|
|
5129
5147
|
return window.innerWidth < mobileBreakpointPx;
|
|
5130
5148
|
});
|
|
5131
|
-
(0,
|
|
5149
|
+
(0, import_react36.useEffect)(() => {
|
|
5132
5150
|
if (typeof window === "undefined") return;
|
|
5133
5151
|
const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
|
|
5134
5152
|
onResize();
|
|
5135
5153
|
window.addEventListener("resize", onResize);
|
|
5136
5154
|
return () => window.removeEventListener("resize", onResize);
|
|
5137
5155
|
}, [mobileBreakpointPx]);
|
|
5138
|
-
const [internalMobileOpen, setInternalMobileOpen] = (0,
|
|
5156
|
+
const [internalMobileOpen, setInternalMobileOpen] = (0, import_react36.useState)(false);
|
|
5139
5157
|
const mobileOpen = mobileOpenProp ?? internalMobileOpen;
|
|
5140
|
-
const setMobileOpen = (0,
|
|
5158
|
+
const setMobileOpen = (0, import_react36.useCallback)(
|
|
5141
5159
|
(next) => {
|
|
5142
5160
|
if (mobileOpenProp === void 0) setInternalMobileOpen(next);
|
|
5143
5161
|
onMobileOpenChangeProp?.(next);
|
|
@@ -5154,7 +5172,7 @@ var StudioSidebar = ({
|
|
|
5154
5172
|
const entriesVisible = isMobile || phaseEntriesVisible;
|
|
5155
5173
|
const isCollapsedRail = widthCollapsed && !isMobile;
|
|
5156
5174
|
const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
|
|
5157
|
-
const contextValue = (0,
|
|
5175
|
+
const contextValue = (0, import_react36.useMemo)(
|
|
5158
5176
|
() => ({
|
|
5159
5177
|
collapsed: effectiveCollapsed,
|
|
5160
5178
|
isMobile,
|
|
@@ -5163,7 +5181,7 @@ var StudioSidebar = ({
|
|
|
5163
5181
|
}),
|
|
5164
5182
|
[effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
|
|
5165
5183
|
);
|
|
5166
|
-
return /* @__PURE__ */ (0,
|
|
5184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StudioSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5167
5185
|
StudioSidebarPanel,
|
|
5168
5186
|
{
|
|
5169
5187
|
workforces,
|
|
@@ -5185,26 +5203,26 @@ var StudioSidebar = ({
|
|
|
5185
5203
|
};
|
|
5186
5204
|
|
|
5187
5205
|
// src/components/studio/sidebar-runtime-portal.tsx
|
|
5188
|
-
var
|
|
5206
|
+
var import_react38 = require("react");
|
|
5189
5207
|
var import_react_dom = require("react-dom");
|
|
5190
5208
|
var import_lucide_react12 = require("lucide-react");
|
|
5191
|
-
var
|
|
5192
|
-
var
|
|
5209
|
+
var import_react39 = require("@assistant-ui/react");
|
|
5210
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
5193
5211
|
var StudioSidebarRuntimePortal = ({
|
|
5194
5212
|
label = "New chat"
|
|
5195
5213
|
}) => {
|
|
5196
5214
|
const { iconOnlyLayout } = useStudioSidebarLayout();
|
|
5197
|
-
const hasMessages = (0,
|
|
5215
|
+
const hasMessages = (0, import_react39.useThread)((s) => s.messages.length > 0);
|
|
5198
5216
|
const { clear } = useTimbalRuntime();
|
|
5199
|
-
const [anchor, setAnchor] = (0,
|
|
5200
|
-
const startNewChat = (0,
|
|
5217
|
+
const [anchor, setAnchor] = (0, import_react38.useState)(null);
|
|
5218
|
+
const startNewChat = (0, import_react38.useCallback)(() => {
|
|
5201
5219
|
clear();
|
|
5202
5220
|
}, [clear]);
|
|
5203
|
-
(0,
|
|
5221
|
+
(0, import_react38.useLayoutEffect)(() => {
|
|
5204
5222
|
setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
|
|
5205
5223
|
}, []);
|
|
5206
5224
|
if (!anchor || !hasMessages) return null;
|
|
5207
|
-
const button = /* @__PURE__ */ (0,
|
|
5225
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
5208
5226
|
"button",
|
|
5209
5227
|
{
|
|
5210
5228
|
type: "button",
|
|
@@ -5212,24 +5230,24 @@ var StudioSidebarRuntimePortal = ({
|
|
|
5212
5230
|
"aria-label": label,
|
|
5213
5231
|
className: studioSidebarNavItemClasses(iconOnlyLayout, false),
|
|
5214
5232
|
children: [
|
|
5215
|
-
/* @__PURE__ */ (0,
|
|
5216
|
-
!iconOnlyLayout ? /* @__PURE__ */ (0,
|
|
5233
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.MessageSquarePlus, { className: "size-3.5 shrink-0" }),
|
|
5234
|
+
!iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "min-w-0 truncate", children: label }) : null
|
|
5217
5235
|
]
|
|
5218
5236
|
}
|
|
5219
5237
|
);
|
|
5220
5238
|
return (0, import_react_dom.createPortal)(
|
|
5221
|
-
iconOnlyLayout ? /* @__PURE__ */ (0,
|
|
5222
|
-
/* @__PURE__ */ (0,
|
|
5223
|
-
/* @__PURE__ */ (0,
|
|
5239
|
+
iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
|
|
5240
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: button }),
|
|
5241
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
|
|
5224
5242
|
] }) : button,
|
|
5225
5243
|
anchor
|
|
5226
5244
|
);
|
|
5227
5245
|
};
|
|
5228
5246
|
|
|
5229
5247
|
// src/components/studio/welcome.tsx
|
|
5230
|
-
var
|
|
5231
|
-
var
|
|
5232
|
-
var
|
|
5248
|
+
var import_react40 = require("motion/react");
|
|
5249
|
+
var import_react41 = require("@assistant-ui/react");
|
|
5250
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
5233
5251
|
var luxuryEase2 = [0.16, 1, 0.3, 1];
|
|
5234
5252
|
var welcomeStagger2 = {
|
|
5235
5253
|
initial: {},
|
|
@@ -5255,34 +5273,34 @@ var welcomeIcon2 = {
|
|
|
5255
5273
|
}
|
|
5256
5274
|
};
|
|
5257
5275
|
var StudioWelcome = ({ config, icon }) => {
|
|
5258
|
-
const isEmpty = (0,
|
|
5276
|
+
const isEmpty = (0, import_react41.useThread)((s) => s.messages.length === 0);
|
|
5259
5277
|
if (!isEmpty) return null;
|
|
5260
|
-
const iconNode = icon ?? /* @__PURE__ */ (0,
|
|
5278
|
+
const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5261
5279
|
TimbalMark,
|
|
5262
5280
|
{
|
|
5263
5281
|
size: 112,
|
|
5264
5282
|
className: "max-md:scale-[0.58] max-md:origin-center"
|
|
5265
5283
|
}
|
|
5266
5284
|
);
|
|
5267
|
-
return /* @__PURE__ */ (0,
|
|
5268
|
-
|
|
5285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
5286
|
+
import_react40.motion.div,
|
|
5269
5287
|
{
|
|
5270
5288
|
className: "aui-thread-welcome-message flex flex-col items-center justify-center px-2 text-center sm:px-4",
|
|
5271
5289
|
variants: welcomeStagger2,
|
|
5272
5290
|
initial: "initial",
|
|
5273
5291
|
animate: "animate",
|
|
5274
5292
|
children: [
|
|
5275
|
-
/* @__PURE__ */ (0,
|
|
5276
|
-
/* @__PURE__ */ (0,
|
|
5277
|
-
|
|
5293
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react40.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
|
|
5294
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5295
|
+
import_react40.motion.h1,
|
|
5278
5296
|
{
|
|
5279
5297
|
variants: welcomeItem2,
|
|
5280
5298
|
className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
|
|
5281
5299
|
children: config?.heading ?? "How can I help you today?"
|
|
5282
5300
|
}
|
|
5283
5301
|
),
|
|
5284
|
-
/* @__PURE__ */ (0,
|
|
5285
|
-
|
|
5302
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5303
|
+
import_react40.motion.p,
|
|
5286
5304
|
{
|
|
5287
5305
|
variants: welcomeItem2,
|
|
5288
5306
|
className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
|
|
@@ -5295,8 +5313,8 @@ var StudioWelcome = ({ config, icon }) => {
|
|
|
5295
5313
|
};
|
|
5296
5314
|
|
|
5297
5315
|
// src/components/studio/studio-shell.tsx
|
|
5298
|
-
var
|
|
5299
|
-
var
|
|
5316
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
5317
|
+
var import_react44 = require("react");
|
|
5300
5318
|
var DEFAULT_BREAKPOINT_PX2 = 768;
|
|
5301
5319
|
function readPersistedCollapsed2(key) {
|
|
5302
5320
|
if (!key || typeof window === "undefined") return false;
|
|
@@ -5316,9 +5334,9 @@ function writePersistedCollapsed2(key, collapsed) {
|
|
|
5316
5334
|
function makeComposerWithPortal(BaseComposer) {
|
|
5317
5335
|
const Resolved = BaseComposer ?? Composer;
|
|
5318
5336
|
return function StudioComposerWithSidebar(props) {
|
|
5319
|
-
return /* @__PURE__ */ (0,
|
|
5320
|
-
/* @__PURE__ */ (0,
|
|
5321
|
-
/* @__PURE__ */ (0,
|
|
5337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
|
|
5338
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StudioSidebarRuntimePortal, {}),
|
|
5339
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Resolved, { ...props })
|
|
5322
5340
|
] });
|
|
5323
5341
|
};
|
|
5324
5342
|
}
|
|
@@ -5338,7 +5356,7 @@ var TimbalStudioShell = ({
|
|
|
5338
5356
|
components,
|
|
5339
5357
|
...chatProps
|
|
5340
5358
|
}) => {
|
|
5341
|
-
const reducedMotion = (0,
|
|
5359
|
+
const reducedMotion = (0, import_react43.useReducedMotion)();
|
|
5342
5360
|
const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
|
|
5343
5361
|
const fetched = useWorkforces({
|
|
5344
5362
|
enabled: shouldFetchWorkforces,
|
|
@@ -5346,36 +5364,36 @@ var TimbalStudioShell = ({
|
|
|
5346
5364
|
baseUrl: workforcesBaseUrl
|
|
5347
5365
|
});
|
|
5348
5366
|
const workforces = workforcesProp ?? fetched.workforces;
|
|
5349
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
5367
|
+
const [internalSelected, setInternalSelected] = (0, import_react42.useState)(
|
|
5350
5368
|
workforceId ?? ""
|
|
5351
5369
|
);
|
|
5352
|
-
(0,
|
|
5370
|
+
(0, import_react42.useEffect)(() => {
|
|
5353
5371
|
if (workforceId) return;
|
|
5354
5372
|
if (internalSelected) return;
|
|
5355
5373
|
const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
|
|
5356
5374
|
if (first) setInternalSelected(first);
|
|
5357
5375
|
}, [workforces, workforceId, internalSelected]);
|
|
5358
5376
|
const activeWorkforceId = workforceId ?? internalSelected ?? fetched.selectedId ?? "";
|
|
5359
|
-
const [collapsed, setCollapsed] = (0,
|
|
5377
|
+
const [collapsed, setCollapsed] = (0, import_react42.useState)(() => {
|
|
5360
5378
|
const persisted = readPersistedCollapsed2(persistKey);
|
|
5361
5379
|
return persisted || defaultCollapsed;
|
|
5362
5380
|
});
|
|
5363
|
-
const [isMobile, setIsMobile] = (0,
|
|
5381
|
+
const [isMobile, setIsMobile] = (0, import_react42.useState)(() => {
|
|
5364
5382
|
if (typeof window === "undefined") return false;
|
|
5365
5383
|
return window.innerWidth < mobileBreakpointPx;
|
|
5366
5384
|
});
|
|
5367
|
-
const [mobileSidebarOpen, setMobileSidebarOpen] = (0,
|
|
5368
|
-
(0,
|
|
5385
|
+
const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react42.useState)(false);
|
|
5386
|
+
(0, import_react42.useEffect)(() => {
|
|
5369
5387
|
if (typeof window === "undefined") return;
|
|
5370
5388
|
const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
|
|
5371
5389
|
onResize();
|
|
5372
5390
|
window.addEventListener("resize", onResize);
|
|
5373
5391
|
return () => window.removeEventListener("resize", onResize);
|
|
5374
5392
|
}, [mobileBreakpointPx]);
|
|
5375
|
-
(0,
|
|
5393
|
+
(0, import_react42.useEffect)(() => {
|
|
5376
5394
|
if (!isMobile) setMobileSidebarOpen(false);
|
|
5377
5395
|
}, [isMobile]);
|
|
5378
|
-
(0,
|
|
5396
|
+
(0, import_react42.useEffect)(() => {
|
|
5379
5397
|
if (!mobileSidebarOpen) return;
|
|
5380
5398
|
const onKeyDown = (e) => {
|
|
5381
5399
|
if (e.key === "Escape") setMobileSidebarOpen(false);
|
|
@@ -5399,21 +5417,21 @@ var TimbalStudioShell = ({
|
|
|
5399
5417
|
layoutDirection
|
|
5400
5418
|
);
|
|
5401
5419
|
const desktopInsetPx = widthCollapsed ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
|
|
5402
|
-
const onCollapsedChange = (0,
|
|
5420
|
+
const onCollapsedChange = (0, import_react42.useCallback)(
|
|
5403
5421
|
(next) => {
|
|
5404
5422
|
setCollapsed(next);
|
|
5405
5423
|
writePersistedCollapsed2(persistKey, next);
|
|
5406
5424
|
},
|
|
5407
5425
|
[persistKey]
|
|
5408
5426
|
);
|
|
5409
|
-
const handleSelectWorkforce = (0,
|
|
5427
|
+
const handleSelectWorkforce = (0, import_react42.useCallback)(
|
|
5410
5428
|
(id) => {
|
|
5411
5429
|
if (!workforceId) setInternalSelected(id);
|
|
5412
5430
|
if (isMobile) setMobileSidebarOpen(false);
|
|
5413
5431
|
},
|
|
5414
5432
|
[workforceId, isMobile]
|
|
5415
5433
|
);
|
|
5416
|
-
const sidebarContext = (0,
|
|
5434
|
+
const sidebarContext = (0, import_react42.useMemo)(
|
|
5417
5435
|
() => ({
|
|
5418
5436
|
collapsed: effectiveCollapsed,
|
|
5419
5437
|
isMobile,
|
|
@@ -5422,12 +5440,12 @@ var TimbalStudioShell = ({
|
|
|
5422
5440
|
}),
|
|
5423
5441
|
[effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
|
|
5424
5442
|
);
|
|
5425
|
-
const resolvedComponents = (0,
|
|
5443
|
+
const resolvedComponents = (0, import_react42.useMemo)(() => {
|
|
5426
5444
|
const next = { Welcome: StudioWelcome, ...components };
|
|
5427
5445
|
next.Composer = makeComposerWithPortal(components?.Composer);
|
|
5428
5446
|
return next;
|
|
5429
5447
|
}, [components]);
|
|
5430
|
-
return /* @__PURE__ */ (0,
|
|
5448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
5431
5449
|
"div",
|
|
5432
5450
|
{
|
|
5433
5451
|
className: cn(
|
|
@@ -5436,14 +5454,14 @@ var TimbalStudioShell = ({
|
|
|
5436
5454
|
),
|
|
5437
5455
|
style: studioChromeShellStyle,
|
|
5438
5456
|
children: [
|
|
5439
|
-
/* @__PURE__ */ (0,
|
|
5457
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
5440
5458
|
"div",
|
|
5441
5459
|
{
|
|
5442
5460
|
className: "pointer-events-none absolute inset-0 z-0 bg-background",
|
|
5443
5461
|
"aria-hidden": true
|
|
5444
5462
|
}
|
|
5445
5463
|
),
|
|
5446
|
-
/* @__PURE__ */ (0,
|
|
5464
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
5447
5465
|
"div",
|
|
5448
5466
|
{
|
|
5449
5467
|
className: cn(
|
|
@@ -5453,14 +5471,14 @@ var TimbalStudioShell = ({
|
|
|
5453
5471
|
"aria-hidden": true
|
|
5454
5472
|
}
|
|
5455
5473
|
),
|
|
5456
|
-
/* @__PURE__ */ (0,
|
|
5474
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
5457
5475
|
StudioSidebarBackdrop,
|
|
5458
5476
|
{
|
|
5459
5477
|
open: isMobile && mobileSidebarOpen,
|
|
5460
5478
|
onClose: () => setMobileSidebarOpen(false)
|
|
5461
5479
|
}
|
|
5462
5480
|
),
|
|
5463
|
-
/* @__PURE__ */ (0,
|
|
5481
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
5464
5482
|
StudioSidebarPanel,
|
|
5465
5483
|
{
|
|
5466
5484
|
workforces,
|
|
@@ -5479,8 +5497,8 @@ var TimbalStudioShell = ({
|
|
|
5479
5497
|
emptyCaption: sidebarEmptyCaption
|
|
5480
5498
|
}
|
|
5481
5499
|
),
|
|
5482
|
-
/* @__PURE__ */ (0,
|
|
5483
|
-
|
|
5500
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
5501
|
+
import_react43.motion.header,
|
|
5484
5502
|
{
|
|
5485
5503
|
className: cn(
|
|
5486
5504
|
"absolute top-0 right-0 z-40 flex items-start justify-between gap-2",
|
|
@@ -5491,7 +5509,7 @@ var TimbalStudioShell = ({
|
|
|
5491
5509
|
animate: { left: isMobile ? 0 : desktopInsetPx },
|
|
5492
5510
|
transition: layoutTransition,
|
|
5493
5511
|
children: [
|
|
5494
|
-
/* @__PURE__ */ (0,
|
|
5512
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
5495
5513
|
"div",
|
|
5496
5514
|
{
|
|
5497
5515
|
className: cn(
|
|
@@ -5499,7 +5517,7 @@ var TimbalStudioShell = ({
|
|
|
5499
5517
|
studioTopbarPillHeightClass
|
|
5500
5518
|
),
|
|
5501
5519
|
children: [
|
|
5502
|
-
isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0,
|
|
5520
|
+
isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
5503
5521
|
TimbalV2Button,
|
|
5504
5522
|
{
|
|
5505
5523
|
variant: "secondary",
|
|
@@ -5509,19 +5527,19 @@ var TimbalStudioShell = ({
|
|
|
5509
5527
|
onClick: () => setMobileSidebarOpen(true),
|
|
5510
5528
|
"aria-label": "Open menu",
|
|
5511
5529
|
"aria-expanded": false,
|
|
5512
|
-
children: /* @__PURE__ */ (0,
|
|
5530
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react13.Menu, { className: "size-4" })
|
|
5513
5531
|
}
|
|
5514
5532
|
) : null,
|
|
5515
5533
|
headerStart
|
|
5516
5534
|
]
|
|
5517
5535
|
}
|
|
5518
5536
|
),
|
|
5519
|
-
headerActions ? /* @__PURE__ */ (0,
|
|
5537
|
+
headerActions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
|
|
5520
5538
|
]
|
|
5521
5539
|
}
|
|
5522
5540
|
),
|
|
5523
|
-
/* @__PURE__ */ (0,
|
|
5524
|
-
|
|
5541
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
5542
|
+
import_react43.motion.main,
|
|
5525
5543
|
{
|
|
5526
5544
|
className: cn(
|
|
5527
5545
|
"relative z-10 flex h-full min-w-0 flex-col",
|
|
@@ -5531,7 +5549,7 @@ var TimbalStudioShell = ({
|
|
|
5531
5549
|
initial: false,
|
|
5532
5550
|
animate: { paddingLeft: isMobile ? 12 : desktopInsetPx },
|
|
5533
5551
|
transition: layoutTransition,
|
|
5534
|
-
children: activeWorkforceId ? /* @__PURE__ */ (0,
|
|
5552
|
+
children: activeWorkforceId ? /* @__PURE__ */ (0, import_react44.createElement)(
|
|
5535
5553
|
TimbalChat,
|
|
5536
5554
|
{
|
|
5537
5555
|
...chatProps,
|
|
@@ -5550,9 +5568,9 @@ var TimbalStudioShell = ({
|
|
|
5550
5568
|
};
|
|
5551
5569
|
|
|
5552
5570
|
// src/components/studio/mode-toggle.tsx
|
|
5553
|
-
var
|
|
5571
|
+
var import_react45 = require("react");
|
|
5554
5572
|
var import_lucide_react14 = require("lucide-react");
|
|
5555
|
-
var
|
|
5573
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
5556
5574
|
var ModeToggle = ({
|
|
5557
5575
|
theme,
|
|
5558
5576
|
setTheme,
|
|
@@ -5560,14 +5578,14 @@ var ModeToggle = ({
|
|
|
5560
5578
|
label = "Toggle theme"
|
|
5561
5579
|
}) => {
|
|
5562
5580
|
const isControlled = theme !== void 0;
|
|
5563
|
-
const [internalIsDark, setInternalIsDark] = (0,
|
|
5564
|
-
(0,
|
|
5581
|
+
const [internalIsDark, setInternalIsDark] = (0, import_react45.useState)(false);
|
|
5582
|
+
(0, import_react45.useEffect)(() => {
|
|
5565
5583
|
if (isControlled) return;
|
|
5566
5584
|
if (typeof document === "undefined") return;
|
|
5567
5585
|
setInternalIsDark(document.documentElement.classList.contains("dark"));
|
|
5568
5586
|
}, [isControlled]);
|
|
5569
5587
|
const isDark = isControlled ? theme === "dark" : internalIsDark;
|
|
5570
|
-
const onClick = (0,
|
|
5588
|
+
const onClick = (0, import_react45.useCallback)(() => {
|
|
5571
5589
|
const next = isDark ? "light" : "dark";
|
|
5572
5590
|
if (setTheme) {
|
|
5573
5591
|
setTheme(next);
|
|
@@ -5577,7 +5595,7 @@ var ModeToggle = ({
|
|
|
5577
5595
|
document.documentElement.classList.toggle("dark", next === "dark");
|
|
5578
5596
|
setInternalIsDark(next === "dark");
|
|
5579
5597
|
}, [isDark, setTheme]);
|
|
5580
|
-
return /* @__PURE__ */ (0,
|
|
5598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
5581
5599
|
TimbalV2Button,
|
|
5582
5600
|
{
|
|
5583
5601
|
variant: "secondary",
|
|
@@ -5593,9 +5611,9 @@ var ModeToggle = ({
|
|
|
5593
5611
|
"aria-label": label,
|
|
5594
5612
|
title: label,
|
|
5595
5613
|
children: [
|
|
5596
|
-
/* @__PURE__ */ (0,
|
|
5597
|
-
/* @__PURE__ */ (0,
|
|
5598
|
-
/* @__PURE__ */ (0,
|
|
5614
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
|
|
5615
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
|
|
5616
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sr-only", children: label })
|
|
5599
5617
|
]
|
|
5600
5618
|
}
|
|
5601
5619
|
);
|
|
@@ -5729,7 +5747,7 @@ When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`,
|
|
|
5729
5747
|
|
|
5730
5748
|
// src/auth/guard.tsx
|
|
5731
5749
|
var import_lucide_react15 = require("lucide-react");
|
|
5732
|
-
var
|
|
5750
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
5733
5751
|
var AuthGuard = ({
|
|
5734
5752
|
children,
|
|
5735
5753
|
requireAuth = false,
|
|
@@ -5740,7 +5758,7 @@ var AuthGuard = ({
|
|
|
5740
5758
|
return children;
|
|
5741
5759
|
}
|
|
5742
5760
|
if (loading) {
|
|
5743
|
-
return /* @__PURE__ */ (0,
|
|
5761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react15.Loader2, { className: "w-8 h-8 animate-spin" }) });
|
|
5744
5762
|
}
|
|
5745
5763
|
if (requireAuth && !isAuthenticated && !isEmbedded) {
|
|
5746
5764
|
const returnTo = encodeURIComponent(
|
|
@@ -5753,7 +5771,7 @@ var AuthGuard = ({
|
|
|
5753
5771
|
};
|
|
5754
5772
|
|
|
5755
5773
|
// src/index.ts
|
|
5756
|
-
var
|
|
5774
|
+
var import_react46 = require("@assistant-ui/react");
|
|
5757
5775
|
// Annotate the CommonJS export names for ESM import in node:
|
|
5758
5776
|
0 && (module.exports = {
|
|
5759
5777
|
ARTIFACT_AGENT_INSTRUCTIONS,
|