@assistant-ui/react 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +43 -43
- package/dist/index.d.ts +43 -43
- package/dist/index.js +165 -148
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +136 -121
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -3
package/dist/index.mjs
CHANGED
@@ -148,7 +148,7 @@ var makeBaseComposer = (set) => ({
|
|
148
148
|
});
|
149
149
|
|
150
150
|
// src/context/stores/Composer.ts
|
151
|
-
var makeComposerStore = (useThread, useThreadActions) => {
|
151
|
+
var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
|
152
152
|
const focusListeners = /* @__PURE__ */ new Set();
|
153
153
|
return create3()((set, get, store) => {
|
154
154
|
return {
|
@@ -158,7 +158,7 @@ var makeComposerStore = (useThread, useThreadActions) => {
|
|
158
158
|
const { setValue, value } = get();
|
159
159
|
setValue("");
|
160
160
|
useThreadActions.getState().append({
|
161
|
-
parentId:
|
161
|
+
parentId: useThreadMessages.getState().at(-1)?.id ?? null,
|
162
162
|
role: "user",
|
163
163
|
content: [{ type: "text", text: value }]
|
164
164
|
});
|
@@ -188,7 +188,6 @@ var makeComposerStore = (useThread, useThreadActions) => {
|
|
188
188
|
import { create as create4 } from "zustand";
|
189
189
|
var makeThreadStore = (runtimeRef) => {
|
190
190
|
return create4(() => ({
|
191
|
-
messages: runtimeRef.current.messages,
|
192
191
|
isRunning: runtimeRef.current.isRunning
|
193
192
|
}));
|
194
193
|
};
|
@@ -228,6 +227,12 @@ var makeThreadActionStore = (runtimeRef) => {
|
|
228
227
|
);
|
229
228
|
};
|
230
229
|
|
230
|
+
// src/context/stores/ThreadMessages.ts
|
231
|
+
import { create as create7 } from "zustand";
|
232
|
+
var makeThreadMessagesStore = (runtimeRef) => {
|
233
|
+
return create7(() => runtimeRef.current.messages);
|
234
|
+
};
|
235
|
+
|
231
236
|
// src/context/providers/ThreadProvider.tsx
|
232
237
|
import { jsx, jsxs } from "react/jsx-runtime";
|
233
238
|
var ThreadProvider = ({
|
@@ -240,11 +245,17 @@ var ThreadProvider = ({
|
|
240
245
|
});
|
241
246
|
const [context] = useState(() => {
|
242
247
|
const useThread = makeThreadStore(runtimeRef);
|
248
|
+
const useThreadMessages = makeThreadMessagesStore(runtimeRef);
|
243
249
|
const useThreadActions = makeThreadActionStore(runtimeRef);
|
244
250
|
const useViewport = makeThreadViewportStore();
|
245
|
-
const useComposer = makeComposerStore(
|
251
|
+
const useComposer = makeComposerStore(
|
252
|
+
useThread,
|
253
|
+
useThreadMessages,
|
254
|
+
useThreadActions
|
255
|
+
);
|
246
256
|
return {
|
247
257
|
useThread,
|
258
|
+
useThreadMessages,
|
248
259
|
useThreadActions,
|
249
260
|
useComposer,
|
250
261
|
useViewport
|
@@ -254,11 +265,11 @@ var ThreadProvider = ({
|
|
254
265
|
const onRuntimeUpdate = () => {
|
255
266
|
context.useThread.setState(
|
256
267
|
Object.freeze({
|
257
|
-
messages: runtimeRef.current.messages,
|
258
268
|
isRunning: runtimeRef.current.isRunning
|
259
269
|
}),
|
260
270
|
true
|
261
271
|
);
|
272
|
+
context.useThreadMessages.setState(Object.freeze(runtimeRef.current.messages), true);
|
262
273
|
};
|
263
274
|
onRuntimeUpdate();
|
264
275
|
return runtime.subscribe(onRuntimeUpdate);
|
@@ -279,8 +290,8 @@ var ThreadProvider = ({
|
|
279
290
|
};
|
280
291
|
|
281
292
|
// src/context/stores/AssistantActions.tsx
|
282
|
-
import { create as
|
283
|
-
var makeAssistantActionsStore = (runtimeRef) =>
|
293
|
+
import { create as create8 } from "zustand";
|
294
|
+
var makeAssistantActionsStore = (runtimeRef) => create8(
|
284
295
|
() => Object.freeze({
|
285
296
|
switchToThread: () => runtimeRef.current.switchToThread(null)
|
286
297
|
})
|
@@ -357,30 +368,30 @@ var useContentPartContext = () => {
|
|
357
368
|
|
358
369
|
// src/hooks/useAppendMessage.tsx
|
359
370
|
import { useCallback as useCallback2 } from "react";
|
360
|
-
var toAppendMessage = (
|
371
|
+
var toAppendMessage = (useThreadMessages, message) => {
|
361
372
|
if (typeof message === "string") {
|
362
373
|
return {
|
363
|
-
parentId:
|
374
|
+
parentId: useThreadMessages.getState().at(-1)?.id ?? null,
|
364
375
|
role: "user",
|
365
376
|
content: [{ type: "text", text: message }]
|
366
377
|
};
|
367
378
|
}
|
368
379
|
return {
|
369
|
-
parentId: message.parentId ??
|
380
|
+
parentId: message.parentId ?? useThreadMessages.getState().at(-1)?.id ?? null,
|
370
381
|
role: message.role ?? "user",
|
371
382
|
content: message.content
|
372
383
|
};
|
373
384
|
};
|
374
385
|
var useAppendMessage = () => {
|
375
|
-
const {
|
386
|
+
const { useThreadMessages, useThreadActions, useViewport, useComposer } = useThreadContext();
|
376
387
|
const append = useCallback2(
|
377
388
|
(message) => {
|
378
|
-
const appendMessage = toAppendMessage(
|
389
|
+
const appendMessage = toAppendMessage(useThreadMessages, message);
|
379
390
|
useThreadActions.getState().append(appendMessage);
|
380
391
|
useViewport.getState().scrollToBottom();
|
381
392
|
useComposer.getState().focus();
|
382
393
|
},
|
383
|
-
[
|
394
|
+
[useThreadMessages, useThreadActions, useViewport, useComposer]
|
384
395
|
);
|
385
396
|
return append;
|
386
397
|
};
|
@@ -676,17 +687,6 @@ var useContentPartImage = () => {
|
|
676
687
|
return image;
|
677
688
|
};
|
678
689
|
|
679
|
-
// src/primitive-hooks/contentPart/useContentPartInProgressIndicator.tsx
|
680
|
-
var useContentPartInProgressIndicator = () => {
|
681
|
-
const { useMessageUtils } = useMessageContext();
|
682
|
-
const { useContentPart } = useContentPartContext();
|
683
|
-
const indicator = useCombinedStore(
|
684
|
-
[useMessageUtils, useContentPart],
|
685
|
-
(m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
|
686
|
-
);
|
687
|
-
return indicator;
|
688
|
-
};
|
689
|
-
|
690
690
|
// src/primitive-hooks/contentPart/useContentPartText.tsx
|
691
691
|
var useContentPartText = () => {
|
692
692
|
const { useContentPart } = useContentPartContext();
|
@@ -719,14 +719,17 @@ var useMessageIf = (props) => {
|
|
719
719
|
|
720
720
|
// src/primitive-hooks/thread/useThreadIf.tsx
|
721
721
|
var useThreadIf = (props) => {
|
722
|
-
const { useThread } = useThreadContext();
|
723
|
-
return
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
722
|
+
const { useThread, useThreadMessages } = useThreadContext();
|
723
|
+
return useCombinedStore(
|
724
|
+
[useThread, useThreadMessages],
|
725
|
+
(thread, messages) => {
|
726
|
+
if (props.empty === true && messages.length !== 0) return false;
|
727
|
+
if (props.empty === false && messages.length === 0) return false;
|
728
|
+
if (props.running === true && !thread.isRunning) return false;
|
729
|
+
if (props.running === false && thread.isRunning) return false;
|
730
|
+
return true;
|
731
|
+
}
|
732
|
+
);
|
730
733
|
};
|
731
734
|
|
732
735
|
// src/primitive-hooks/thread/useThreadEmpty.tsx
|
@@ -1066,7 +1069,7 @@ import { memo as memo2 } from "react";
|
|
1066
1069
|
|
1067
1070
|
// src/context/providers/ContentPartProvider.tsx
|
1068
1071
|
import { useEffect as useEffect7, useState as useState4 } from "react";
|
1069
|
-
import { create as
|
1072
|
+
import { create as create9 } from "zustand";
|
1070
1073
|
import { jsx as jsx12 } from "react/jsx-runtime";
|
1071
1074
|
var syncContentPart = ({ message }, useContentPart, partIndex) => {
|
1072
1075
|
const part = message.content[partIndex];
|
@@ -1085,7 +1088,7 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
|
|
1085
1088
|
var useContentPartContext2 = (partIndex) => {
|
1086
1089
|
const { useMessage } = useMessageContext();
|
1087
1090
|
const [context] = useState4(() => {
|
1088
|
-
const useContentPart =
|
1091
|
+
const useContentPart = create9(
|
1089
1092
|
() => ({})
|
1090
1093
|
);
|
1091
1094
|
syncContentPart(useMessage.getState(), useContentPart, partIndex);
|
@@ -1114,38 +1117,61 @@ var ContentPartPrimitiveDisplay = () => {
|
|
1114
1117
|
};
|
1115
1118
|
ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
|
1116
1119
|
|
1120
|
+
// src/utils/OutPortal.tsx
|
1121
|
+
import { useLayoutEffect, useRef as useRef3 } from "react";
|
1122
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
1123
|
+
var OutPortal = ({ node }) => {
|
1124
|
+
const parentRef = useRef3(null);
|
1125
|
+
useLayoutEffect(() => {
|
1126
|
+
const parent = parentRef.current;
|
1127
|
+
if (!parent || !node) return;
|
1128
|
+
parent.appendChild(node);
|
1129
|
+
return () => {
|
1130
|
+
parent.removeChild(node);
|
1131
|
+
};
|
1132
|
+
}, [node]);
|
1133
|
+
if (!node) return null;
|
1134
|
+
return /* @__PURE__ */ jsx13("span", { ref: parentRef });
|
1135
|
+
};
|
1136
|
+
|
1117
1137
|
// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
|
1138
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
1118
1139
|
var ContentPartPrimitiveInProgressIndicator = () => {
|
1119
|
-
const
|
1120
|
-
|
1140
|
+
const { useMessageUtils } = useMessageContext();
|
1141
|
+
const { useContentPart } = useContentPartContext();
|
1142
|
+
const indicator = useCombinedStore(
|
1143
|
+
[useMessageUtils, useContentPart],
|
1144
|
+
(m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
|
1145
|
+
);
|
1146
|
+
return /* @__PURE__ */ jsx14(OutPortal, { node: indicator });
|
1121
1147
|
};
|
1122
1148
|
ContentPartPrimitiveInProgressIndicator.displayName = "ContentPartPrimitive.InProgressIndicator";
|
1123
1149
|
|
1124
1150
|
// src/primitives/contentPart/ContentPartText.tsx
|
1125
1151
|
import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
|
1126
1152
|
import { forwardRef as forwardRef6 } from "react";
|
1127
|
-
import { jsx as
|
1153
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
1128
1154
|
var ContentPartPrimitiveText = forwardRef6((props, forwardedRef) => {
|
1129
1155
|
const text = useContentPartText();
|
1130
|
-
return /* @__PURE__ */
|
1156
|
+
return /* @__PURE__ */ jsx15(Primitive4.span, { ...props, ref: forwardedRef, children: text });
|
1131
1157
|
});
|
1132
1158
|
ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
|
1133
1159
|
|
1134
1160
|
// src/primitives/message/MessageContent.tsx
|
1135
|
-
import {
|
1161
|
+
import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
|
1136
1162
|
var defaultComponents = {
|
1137
|
-
Text: () => /* @__PURE__ */ jsxs2(
|
1138
|
-
/* @__PURE__ */
|
1139
|
-
/* @__PURE__ */
|
1163
|
+
Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
|
1164
|
+
/* @__PURE__ */ jsx16(ContentPartPrimitiveText, {}),
|
1165
|
+
/* @__PURE__ */ jsx16(ContentPartPrimitiveInProgressIndicator, {})
|
1140
1166
|
] }),
|
1141
1167
|
Image: () => null,
|
1142
|
-
UI: () => /* @__PURE__ */
|
1168
|
+
UI: () => /* @__PURE__ */ jsx16(ContentPartPrimitiveDisplay, {}),
|
1143
1169
|
tools: {
|
1144
1170
|
Fallback: (props) => {
|
1145
1171
|
const { useToolUIs } = useAssistantContext();
|
1146
1172
|
const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
|
1147
1173
|
if (!Render) return null;
|
1148
|
-
return /* @__PURE__ */
|
1174
|
+
return /* @__PURE__ */ jsx16(Render, { ...props });
|
1149
1175
|
}
|
1150
1176
|
}
|
1151
1177
|
};
|
@@ -1164,15 +1190,15 @@ var MessageContentPartComponent = ({
|
|
1164
1190
|
const type = part.type;
|
1165
1191
|
switch (type) {
|
1166
1192
|
case "text":
|
1167
|
-
return /* @__PURE__ */
|
1193
|
+
return /* @__PURE__ */ jsx16(Text, { part, status });
|
1168
1194
|
case "image":
|
1169
|
-
return /* @__PURE__ */
|
1195
|
+
return /* @__PURE__ */ jsx16(Image, { part, status });
|
1170
1196
|
case "ui":
|
1171
|
-
return /* @__PURE__ */
|
1197
|
+
return /* @__PURE__ */ jsx16(UI, { part, status });
|
1172
1198
|
case "tool-call": {
|
1173
1199
|
const Tool = by_name[part.toolName] || Fallback;
|
1174
1200
|
const addResult = (result) => addToolResult(part.toolCallId, result);
|
1175
|
-
return /* @__PURE__ */
|
1201
|
+
return /* @__PURE__ */ jsx16(Tool, { part, status, addResult });
|
1176
1202
|
}
|
1177
1203
|
default:
|
1178
1204
|
throw new Error(`Unknown content part type: ${type}`);
|
@@ -1182,7 +1208,7 @@ var MessageContentPartImpl = ({
|
|
1182
1208
|
partIndex,
|
1183
1209
|
components
|
1184
1210
|
}) => {
|
1185
|
-
return /* @__PURE__ */
|
1211
|
+
return /* @__PURE__ */ jsx16(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx16(MessageContentPartComponent, { components }) });
|
1186
1212
|
};
|
1187
1213
|
var MessageContentPart = memo2(
|
1188
1214
|
MessageContentPartImpl,
|
@@ -1195,7 +1221,7 @@ var MessagePrimitiveContent = ({
|
|
1195
1221
|
const contentLength = useMessage((s) => s.message.content.length);
|
1196
1222
|
return new Array(contentLength).fill(null).map((_, idx) => {
|
1197
1223
|
const partIndex = idx;
|
1198
|
-
return /* @__PURE__ */
|
1224
|
+
return /* @__PURE__ */ jsx16(
|
1199
1225
|
MessageContentPart,
|
1200
1226
|
{
|
1201
1227
|
partIndex,
|
@@ -1208,28 +1234,21 @@ var MessagePrimitiveContent = ({
|
|
1208
1234
|
MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
|
1209
1235
|
|
1210
1236
|
// src/primitives/message/MessageInProgress.tsx
|
1237
|
+
import { createPortal } from "react-dom";
|
1211
1238
|
import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
|
1212
|
-
import {
|
1213
|
-
|
1214
|
-
useEffect as useEffect8
|
1215
|
-
} from "react";
|
1216
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
1239
|
+
import { forwardRef as forwardRef7 } from "react";
|
1240
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
1217
1241
|
var MessagePrimitiveInProgress = forwardRef7((props, ref) => {
|
1218
1242
|
const { useMessageUtils } = useMessageContext();
|
1219
|
-
|
1220
|
-
|
1221
|
-
return () => {
|
1222
|
-
useMessageUtils.getState().setInProgressIndicator(null);
|
1223
|
-
};
|
1224
|
-
}, [useMessageUtils, props, ref]);
|
1225
|
-
return null;
|
1243
|
+
const portalNode = useMessageUtils((s) => s.inProgressIndicator);
|
1244
|
+
return createPortal(/* @__PURE__ */ jsx17(Primitive5.span, { ...props, ref }), portalNode);
|
1226
1245
|
});
|
1227
1246
|
MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
|
1228
1247
|
|
1229
1248
|
// src/primitives/branchPicker/BranchPickerRoot.tsx
|
1230
|
-
import { jsx as
|
1249
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
1231
1250
|
var BranchPickerPrimitiveRoot = forwardRef8(({ hideWhenSingleBranch, ...rest }, ref) => {
|
1232
|
-
return /* @__PURE__ */
|
1251
|
+
return /* @__PURE__ */ jsx18(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx18(Primitive6.div, { ...rest, ref }) });
|
1233
1252
|
});
|
1234
1253
|
BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
|
1235
1254
|
|
@@ -1249,7 +1268,7 @@ import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
|
|
1249
1268
|
import {
|
1250
1269
|
forwardRef as forwardRef9
|
1251
1270
|
} from "react";
|
1252
|
-
import { jsx as
|
1271
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
1253
1272
|
var ComposerPrimitiveRoot = forwardRef9(({ onSubmit, ...rest }, forwardedRef) => {
|
1254
1273
|
const send = useComposerSend();
|
1255
1274
|
const handleSubmit = (e) => {
|
@@ -1257,7 +1276,7 @@ var ComposerPrimitiveRoot = forwardRef9(({ onSubmit, ...rest }, forwardedRef) =>
|
|
1257
1276
|
if (!send) return;
|
1258
1277
|
send();
|
1259
1278
|
};
|
1260
|
-
return /* @__PURE__ */
|
1279
|
+
return /* @__PURE__ */ jsx19(
|
1261
1280
|
Primitive7.form,
|
1262
1281
|
{
|
1263
1282
|
...rest,
|
@@ -1275,12 +1294,12 @@ import { Slot } from "@radix-ui/react-slot";
|
|
1275
1294
|
import {
|
1276
1295
|
forwardRef as forwardRef10,
|
1277
1296
|
useCallback as useCallback13,
|
1278
|
-
useEffect as
|
1279
|
-
useRef as
|
1297
|
+
useEffect as useEffect8,
|
1298
|
+
useRef as useRef4
|
1280
1299
|
} from "react";
|
1281
1300
|
import TextareaAutosize from "react-textarea-autosize";
|
1282
1301
|
import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
|
1283
|
-
import { jsx as
|
1302
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
1284
1303
|
var ComposerPrimitiveInput = forwardRef10(
|
1285
1304
|
({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
|
1286
1305
|
const { useThread } = useThreadContext();
|
@@ -1290,7 +1309,7 @@ var ComposerPrimitiveInput = forwardRef10(
|
|
1290
1309
|
return c.value;
|
1291
1310
|
});
|
1292
1311
|
const Component = asChild ? Slot : TextareaAutosize;
|
1293
|
-
const textareaRef =
|
1312
|
+
const textareaRef = useRef4(null);
|
1294
1313
|
const ref = useComposedRefs(forwardedRef, textareaRef);
|
1295
1314
|
useEscapeKeydown((e) => {
|
1296
1315
|
const composer = useComposer.getState();
|
@@ -1318,13 +1337,13 @@ var ComposerPrimitiveInput = forwardRef10(
|
|
1318
1337
|
textareaRef.current.value.length
|
1319
1338
|
);
|
1320
1339
|
}, [autoFocusEnabled]);
|
1321
|
-
|
1340
|
+
useEffect8(() => focus(), [focus]);
|
1322
1341
|
useOnComposerFocus(() => {
|
1323
1342
|
if (type === "new") {
|
1324
1343
|
focus();
|
1325
1344
|
}
|
1326
1345
|
});
|
1327
|
-
return /* @__PURE__ */
|
1346
|
+
return /* @__PURE__ */ jsx20(
|
1328
1347
|
Component,
|
1329
1348
|
{
|
1330
1349
|
value,
|
@@ -1346,11 +1365,11 @@ ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
|
|
1346
1365
|
// src/primitives/composer/ComposerSend.tsx
|
1347
1366
|
import { forwardRef as forwardRef11 } from "react";
|
1348
1367
|
import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
|
1349
|
-
import { jsx as
|
1368
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
1350
1369
|
var ComposerPrimitiveSend = forwardRef11(({ disabled, ...rest }, ref) => {
|
1351
1370
|
const { useComposer } = useComposerContext();
|
1352
1371
|
const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
|
1353
|
-
return /* @__PURE__ */
|
1372
|
+
return /* @__PURE__ */ jsx21(
|
1354
1373
|
Primitive8.button,
|
1355
1374
|
{
|
1356
1375
|
type: "submit",
|
@@ -1390,10 +1409,10 @@ __export(contentPart_exports, {
|
|
1390
1409
|
// src/primitives/contentPart/ContentPartImage.tsx
|
1391
1410
|
import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
|
1392
1411
|
import { forwardRef as forwardRef12 } from "react";
|
1393
|
-
import { jsx as
|
1412
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
1394
1413
|
var ContentPartPrimitiveImage = forwardRef12((props, forwardedRef) => {
|
1395
1414
|
const image = useContentPartImage();
|
1396
|
-
return /* @__PURE__ */
|
1415
|
+
return /* @__PURE__ */ jsx22(Primitive9.img, { src: image, ...props, ref: forwardedRef });
|
1397
1416
|
});
|
1398
1417
|
ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
|
1399
1418
|
|
@@ -1412,9 +1431,9 @@ __export(thread_exports, {
|
|
1412
1431
|
// src/primitives/thread/ThreadRoot.tsx
|
1413
1432
|
import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
|
1414
1433
|
import { forwardRef as forwardRef13 } from "react";
|
1415
|
-
import { jsx as
|
1434
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
1416
1435
|
var ThreadPrimitiveRoot = forwardRef13((props, ref) => {
|
1417
|
-
return /* @__PURE__ */
|
1436
|
+
return /* @__PURE__ */ jsx23(Primitive10.div, { ...props, ref });
|
1418
1437
|
});
|
1419
1438
|
ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
|
1420
1439
|
|
@@ -1444,16 +1463,16 @@ import { forwardRef as forwardRef14 } from "react";
|
|
1444
1463
|
|
1445
1464
|
// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
|
1446
1465
|
import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
|
1447
|
-
import { useRef as
|
1466
|
+
import { useRef as useRef6 } from "react";
|
1448
1467
|
|
1449
1468
|
// src/utils/hooks/useOnResizeContent.tsx
|
1450
1469
|
import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
|
1451
1470
|
import { useCallback as useCallback15 } from "react";
|
1452
1471
|
|
1453
1472
|
// src/utils/hooks/useManagedRef.ts
|
1454
|
-
import { useCallback as useCallback14, useRef as
|
1473
|
+
import { useCallback as useCallback14, useRef as useRef5 } from "react";
|
1455
1474
|
var useManagedRef = (callback) => {
|
1456
|
-
const cleanupRef =
|
1475
|
+
const cleanupRef = useRef5();
|
1457
1476
|
const ref = useCallback14(
|
1458
1477
|
(el) => {
|
1459
1478
|
if (cleanupRef.current) {
|
@@ -1508,11 +1527,11 @@ var useOnResizeContent = (callback) => {
|
|
1508
1527
|
|
1509
1528
|
// src/utils/hooks/useOnScrollToBottom.tsx
|
1510
1529
|
import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
|
1511
|
-
import { useEffect as
|
1530
|
+
import { useEffect as useEffect9 } from "react";
|
1512
1531
|
var useOnScrollToBottom = (callback) => {
|
1513
1532
|
const callbackRef = useCallbackRef3(callback);
|
1514
1533
|
const { useViewport } = useThreadContext();
|
1515
|
-
|
1534
|
+
useEffect9(() => {
|
1516
1535
|
return useViewport.getState().onScrollToBottom(() => {
|
1517
1536
|
callbackRef();
|
1518
1537
|
});
|
@@ -1523,11 +1542,11 @@ var useOnScrollToBottom = (callback) => {
|
|
1523
1542
|
var useThreadViewportAutoScroll = ({
|
1524
1543
|
autoScroll = true
|
1525
1544
|
}) => {
|
1526
|
-
const divRef =
|
1545
|
+
const divRef = useRef6(null);
|
1527
1546
|
const { useViewport } = useThreadContext();
|
1528
|
-
const firstRenderRef =
|
1529
|
-
const lastScrollTop =
|
1530
|
-
const isScrollingToBottomRef =
|
1547
|
+
const firstRenderRef = useRef6(true);
|
1548
|
+
const lastScrollTop = useRef6(0);
|
1549
|
+
const isScrollingToBottomRef = useRef6(false);
|
1531
1550
|
const scrollToBottom = () => {
|
1532
1551
|
const div = divRef.current;
|
1533
1552
|
if (!div || !autoScroll) return;
|
@@ -1573,13 +1592,13 @@ var useThreadViewportAutoScroll = ({
|
|
1573
1592
|
};
|
1574
1593
|
|
1575
1594
|
// src/primitives/thread/ThreadViewport.tsx
|
1576
|
-
import { jsx as
|
1595
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
1577
1596
|
var ThreadPrimitiveViewport = forwardRef14(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
|
1578
1597
|
const autoScrollRef = useThreadViewportAutoScroll({
|
1579
1598
|
autoScroll
|
1580
1599
|
});
|
1581
1600
|
const ref = useComposedRefs3(forwardedRef, autoScrollRef);
|
1582
|
-
return /* @__PURE__ */
|
1601
|
+
return /* @__PURE__ */ jsx24(Primitive11.div, { ...rest, ref, children });
|
1583
1602
|
});
|
1584
1603
|
ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
|
1585
1604
|
|
@@ -1587,15 +1606,15 @@ ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
|
|
1587
1606
|
import { memo as memo3 } from "react";
|
1588
1607
|
|
1589
1608
|
// src/context/providers/MessageProvider.tsx
|
1590
|
-
import { useEffect as
|
1591
|
-
import { create as
|
1609
|
+
import { useEffect as useEffect10, useState as useState5 } from "react";
|
1610
|
+
import { create as create12 } from "zustand";
|
1592
1611
|
|
1593
1612
|
// src/context/stores/EditComposer.ts
|
1594
|
-
import { create as
|
1613
|
+
import { create as create10 } from "zustand";
|
1595
1614
|
var makeEditComposerStore = ({
|
1596
1615
|
onEdit,
|
1597
1616
|
onSend
|
1598
|
-
}) =>
|
1617
|
+
}) => create10()((set, get, store) => ({
|
1599
1618
|
...makeBaseComposer(set, get, store),
|
1600
1619
|
isEditing: false,
|
1601
1620
|
edit: () => {
|
@@ -1615,12 +1634,9 @@ var makeEditComposerStore = ({
|
|
1615
1634
|
}));
|
1616
1635
|
|
1617
1636
|
// src/context/stores/MessageUtils.ts
|
1618
|
-
import { create as
|
1619
|
-
var makeMessageUtilsStore = () =>
|
1620
|
-
inProgressIndicator:
|
1621
|
-
setInProgressIndicator: (value) => {
|
1622
|
-
set({ inProgressIndicator: value });
|
1623
|
-
},
|
1637
|
+
import { create as create11 } from "zustand";
|
1638
|
+
var makeMessageUtilsStore = () => create11((set) => ({
|
1639
|
+
inProgressIndicator: document.createElement("span"),
|
1624
1640
|
isCopied: false,
|
1625
1641
|
setIsCopied: (value) => {
|
1626
1642
|
set({ isCopied: value });
|
@@ -1632,15 +1648,15 @@ var makeMessageUtilsStore = () => create10((set) => ({
|
|
1632
1648
|
}));
|
1633
1649
|
|
1634
1650
|
// src/context/providers/MessageProvider.tsx
|
1635
|
-
import { jsx as
|
1636
|
-
var getIsLast = (
|
1637
|
-
return
|
1651
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
1652
|
+
var getIsLast = (messages, message) => {
|
1653
|
+
return messages[messages.length - 1]?.id === message.id;
|
1638
1654
|
};
|
1639
|
-
var syncMessage = (
|
1640
|
-
const parentId =
|
1641
|
-
const message =
|
1655
|
+
var syncMessage = (messages, getBranches, useMessage, messageIndex) => {
|
1656
|
+
const parentId = messages[messageIndex - 1]?.id ?? null;
|
1657
|
+
const message = messages[messageIndex];
|
1642
1658
|
if (!message) return;
|
1643
|
-
const isLast = getIsLast(
|
1659
|
+
const isLast = getIsLast(messages, message);
|
1644
1660
|
const branches = getBranches(message.id);
|
1645
1661
|
const currentState = useMessage.getState();
|
1646
1662
|
if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
|
@@ -1653,9 +1669,9 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
|
|
1653
1669
|
});
|
1654
1670
|
};
|
1655
1671
|
var useMessageContext2 = (messageIndex) => {
|
1656
|
-
const {
|
1672
|
+
const { useThreadMessages, useThreadActions } = useThreadContext();
|
1657
1673
|
const [context] = useState5(() => {
|
1658
|
-
const useMessage =
|
1674
|
+
const useMessage = create12(() => ({}));
|
1659
1675
|
const useMessageUtils = makeMessageUtilsStore();
|
1660
1676
|
const useEditComposer = makeEditComposerStore({
|
1661
1677
|
onEdit: () => {
|
@@ -1684,15 +1700,15 @@ var useMessageContext2 = (messageIndex) => {
|
|
1684
1700
|
}
|
1685
1701
|
});
|
1686
1702
|
syncMessage(
|
1687
|
-
|
1703
|
+
useThreadMessages.getState(),
|
1688
1704
|
useThreadActions.getState().getBranches,
|
1689
1705
|
useMessage,
|
1690
1706
|
messageIndex
|
1691
1707
|
);
|
1692
1708
|
return { useMessage, useMessageUtils, useEditComposer };
|
1693
1709
|
});
|
1694
|
-
|
1695
|
-
return
|
1710
|
+
useEffect10(() => {
|
1711
|
+
return useThreadMessages.subscribe((thread) => {
|
1696
1712
|
syncMessage(
|
1697
1713
|
thread,
|
1698
1714
|
useThreadActions.getState().getBranches,
|
@@ -1700,7 +1716,7 @@ var useMessageContext2 = (messageIndex) => {
|
|
1700
1716
|
messageIndex
|
1701
1717
|
);
|
1702
1718
|
});
|
1703
|
-
}, [
|
1719
|
+
}, [useThreadMessages, useThreadActions, context, messageIndex]);
|
1704
1720
|
return context;
|
1705
1721
|
};
|
1706
1722
|
var MessageProvider = ({
|
@@ -1708,11 +1724,11 @@ var MessageProvider = ({
|
|
1708
1724
|
children
|
1709
1725
|
}) => {
|
1710
1726
|
const context = useMessageContext2(messageIndex);
|
1711
|
-
return /* @__PURE__ */
|
1727
|
+
return /* @__PURE__ */ jsx25(MessageContext.Provider, { value: context, children });
|
1712
1728
|
};
|
1713
1729
|
|
1714
1730
|
// src/primitives/thread/ThreadMessages.tsx
|
1715
|
-
import { jsx as
|
1731
|
+
import { jsx as jsx26, jsxs as jsxs3 } from "react/jsx-runtime";
|
1716
1732
|
var getComponents = (components) => {
|
1717
1733
|
return {
|
1718
1734
|
EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
|
@@ -1727,10 +1743,10 @@ var ThreadMessageImpl = ({
|
|
1727
1743
|
const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
|
1728
1744
|
return /* @__PURE__ */ jsxs3(MessageProvider, { messageIndex, children: [
|
1729
1745
|
/* @__PURE__ */ jsxs3(MessagePrimitiveIf, { user: true, children: [
|
1730
|
-
/* @__PURE__ */
|
1731
|
-
/* @__PURE__ */
|
1746
|
+
/* @__PURE__ */ jsx26(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx26(UserMessage, {}) }),
|
1747
|
+
/* @__PURE__ */ jsx26(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx26(EditComposer, {}) })
|
1732
1748
|
] }),
|
1733
|
-
/* @__PURE__ */
|
1749
|
+
/* @__PURE__ */ jsx26(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx26(AssistantMessage, {}) })
|
1734
1750
|
] });
|
1735
1751
|
};
|
1736
1752
|
var ThreadMessage = memo3(
|
@@ -1740,12 +1756,12 @@ var ThreadMessage = memo3(
|
|
1740
1756
|
var ThreadPrimitiveMessages = ({
|
1741
1757
|
components
|
1742
1758
|
}) => {
|
1743
|
-
const {
|
1744
|
-
const messagesLength =
|
1759
|
+
const { useThreadMessages } = useThreadContext();
|
1760
|
+
const messagesLength = useThreadMessages((t) => t.length);
|
1745
1761
|
if (messagesLength === 0) return null;
|
1746
1762
|
return new Array(messagesLength).fill(null).map((_, idx) => {
|
1747
1763
|
const messageIndex = idx;
|
1748
|
-
return /* @__PURE__ */
|
1764
|
+
return /* @__PURE__ */ jsx26(
|
1749
1765
|
ThreadMessage,
|
1750
1766
|
{
|
1751
1767
|
messageIndex,
|
@@ -2147,7 +2163,6 @@ export {
|
|
2147
2163
|
useContentPartContext,
|
2148
2164
|
useContentPartDisplay,
|
2149
2165
|
useContentPartImage,
|
2150
|
-
useContentPartInProgressIndicator,
|
2151
2166
|
useContentPartText,
|
2152
2167
|
useLocalRuntime,
|
2153
2168
|
useMessageContext,
|