@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.js
CHANGED
@@ -60,7 +60,6 @@ __export(src_exports, {
|
|
60
60
|
useContentPartContext: () => useContentPartContext,
|
61
61
|
useContentPartDisplay: () => useContentPartDisplay,
|
62
62
|
useContentPartImage: () => useContentPartImage,
|
63
|
-
useContentPartInProgressIndicator: () => useContentPartInProgressIndicator,
|
64
63
|
useContentPartText: () => useContentPartText,
|
65
64
|
useLocalRuntime: () => useLocalRuntime,
|
66
65
|
useMessageContext: () => useMessageContext,
|
@@ -211,7 +210,7 @@ var makeBaseComposer = (set) => ({
|
|
211
210
|
});
|
212
211
|
|
213
212
|
// src/context/stores/Composer.ts
|
214
|
-
var makeComposerStore = (useThread, useThreadActions) => {
|
213
|
+
var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
|
215
214
|
const focusListeners = /* @__PURE__ */ new Set();
|
216
215
|
return (0, import_zustand3.create)()((set, get, store) => {
|
217
216
|
return {
|
@@ -221,7 +220,7 @@ var makeComposerStore = (useThread, useThreadActions) => {
|
|
221
220
|
const { setValue, value } = get();
|
222
221
|
setValue("");
|
223
222
|
useThreadActions.getState().append({
|
224
|
-
parentId:
|
223
|
+
parentId: useThreadMessages.getState().at(-1)?.id ?? null,
|
225
224
|
role: "user",
|
226
225
|
content: [{ type: "text", text: value }]
|
227
226
|
});
|
@@ -251,7 +250,6 @@ var makeComposerStore = (useThread, useThreadActions) => {
|
|
251
250
|
var import_zustand4 = require("zustand");
|
252
251
|
var makeThreadStore = (runtimeRef) => {
|
253
252
|
return (0, import_zustand4.create)(() => ({
|
254
|
-
messages: runtimeRef.current.messages,
|
255
253
|
isRunning: runtimeRef.current.isRunning
|
256
254
|
}));
|
257
255
|
};
|
@@ -291,6 +289,12 @@ var makeThreadActionStore = (runtimeRef) => {
|
|
291
289
|
);
|
292
290
|
};
|
293
291
|
|
292
|
+
// src/context/stores/ThreadMessages.ts
|
293
|
+
var import_zustand7 = require("zustand");
|
294
|
+
var makeThreadMessagesStore = (runtimeRef) => {
|
295
|
+
return (0, import_zustand7.create)(() => runtimeRef.current.messages);
|
296
|
+
};
|
297
|
+
|
294
298
|
// src/context/providers/ThreadProvider.tsx
|
295
299
|
var import_jsx_runtime = require("react/jsx-runtime");
|
296
300
|
var ThreadProvider = ({
|
@@ -303,11 +307,17 @@ var ThreadProvider = ({
|
|
303
307
|
});
|
304
308
|
const [context] = (0, import_react3.useState)(() => {
|
305
309
|
const useThread = makeThreadStore(runtimeRef);
|
310
|
+
const useThreadMessages = makeThreadMessagesStore(runtimeRef);
|
306
311
|
const useThreadActions = makeThreadActionStore(runtimeRef);
|
307
312
|
const useViewport = makeThreadViewportStore();
|
308
|
-
const useComposer = makeComposerStore(
|
313
|
+
const useComposer = makeComposerStore(
|
314
|
+
useThread,
|
315
|
+
useThreadMessages,
|
316
|
+
useThreadActions
|
317
|
+
);
|
309
318
|
return {
|
310
319
|
useThread,
|
320
|
+
useThreadMessages,
|
311
321
|
useThreadActions,
|
312
322
|
useComposer,
|
313
323
|
useViewport
|
@@ -317,11 +327,11 @@ var ThreadProvider = ({
|
|
317
327
|
const onRuntimeUpdate = () => {
|
318
328
|
context.useThread.setState(
|
319
329
|
Object.freeze({
|
320
|
-
messages: runtimeRef.current.messages,
|
321
330
|
isRunning: runtimeRef.current.isRunning
|
322
331
|
}),
|
323
332
|
true
|
324
333
|
);
|
334
|
+
context.useThreadMessages.setState(Object.freeze(runtimeRef.current.messages), true);
|
325
335
|
};
|
326
336
|
onRuntimeUpdate();
|
327
337
|
return runtime.subscribe(onRuntimeUpdate);
|
@@ -342,8 +352,8 @@ var ThreadProvider = ({
|
|
342
352
|
};
|
343
353
|
|
344
354
|
// src/context/stores/AssistantActions.tsx
|
345
|
-
var
|
346
|
-
var makeAssistantActionsStore = (runtimeRef) => (0,
|
355
|
+
var import_zustand8 = require("zustand");
|
356
|
+
var makeAssistantActionsStore = (runtimeRef) => (0, import_zustand8.create)(
|
347
357
|
() => Object.freeze({
|
348
358
|
switchToThread: () => runtimeRef.current.switchToThread(null)
|
349
359
|
})
|
@@ -420,30 +430,30 @@ var useContentPartContext = () => {
|
|
420
430
|
|
421
431
|
// src/hooks/useAppendMessage.tsx
|
422
432
|
var import_react9 = require("react");
|
423
|
-
var toAppendMessage = (
|
433
|
+
var toAppendMessage = (useThreadMessages, message) => {
|
424
434
|
if (typeof message === "string") {
|
425
435
|
return {
|
426
|
-
parentId:
|
436
|
+
parentId: useThreadMessages.getState().at(-1)?.id ?? null,
|
427
437
|
role: "user",
|
428
438
|
content: [{ type: "text", text: message }]
|
429
439
|
};
|
430
440
|
}
|
431
441
|
return {
|
432
|
-
parentId: message.parentId ??
|
442
|
+
parentId: message.parentId ?? useThreadMessages.getState().at(-1)?.id ?? null,
|
433
443
|
role: message.role ?? "user",
|
434
444
|
content: message.content
|
435
445
|
};
|
436
446
|
};
|
437
447
|
var useAppendMessage = () => {
|
438
|
-
const {
|
448
|
+
const { useThreadMessages, useThreadActions, useViewport, useComposer } = useThreadContext();
|
439
449
|
const append = (0, import_react9.useCallback)(
|
440
450
|
(message) => {
|
441
|
-
const appendMessage = toAppendMessage(
|
451
|
+
const appendMessage = toAppendMessage(useThreadMessages, message);
|
442
452
|
useThreadActions.getState().append(appendMessage);
|
443
453
|
useViewport.getState().scrollToBottom();
|
444
454
|
useComposer.getState().focus();
|
445
455
|
},
|
446
|
-
[
|
456
|
+
[useThreadMessages, useThreadActions, useViewport, useComposer]
|
447
457
|
);
|
448
458
|
return append;
|
449
459
|
};
|
@@ -739,17 +749,6 @@ var useContentPartImage = () => {
|
|
739
749
|
return image;
|
740
750
|
};
|
741
751
|
|
742
|
-
// src/primitive-hooks/contentPart/useContentPartInProgressIndicator.tsx
|
743
|
-
var useContentPartInProgressIndicator = () => {
|
744
|
-
const { useMessageUtils } = useMessageContext();
|
745
|
-
const { useContentPart } = useContentPartContext();
|
746
|
-
const indicator = useCombinedStore(
|
747
|
-
[useMessageUtils, useContentPart],
|
748
|
-
(m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
|
749
|
-
);
|
750
|
-
return indicator;
|
751
|
-
};
|
752
|
-
|
753
752
|
// src/primitive-hooks/contentPart/useContentPartText.tsx
|
754
753
|
var useContentPartText = () => {
|
755
754
|
const { useContentPart } = useContentPartContext();
|
@@ -782,14 +781,17 @@ var useMessageIf = (props) => {
|
|
782
781
|
|
783
782
|
// src/primitive-hooks/thread/useThreadIf.tsx
|
784
783
|
var useThreadIf = (props) => {
|
785
|
-
const { useThread } = useThreadContext();
|
786
|
-
return
|
787
|
-
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
|
784
|
+
const { useThread, useThreadMessages } = useThreadContext();
|
785
|
+
return useCombinedStore(
|
786
|
+
[useThread, useThreadMessages],
|
787
|
+
(thread, messages) => {
|
788
|
+
if (props.empty === true && messages.length !== 0) return false;
|
789
|
+
if (props.empty === false && messages.length === 0) return false;
|
790
|
+
if (props.running === true && !thread.isRunning) return false;
|
791
|
+
if (props.running === false && thread.isRunning) return false;
|
792
|
+
return true;
|
793
|
+
}
|
794
|
+
);
|
793
795
|
};
|
794
796
|
|
795
797
|
// src/primitive-hooks/thread/useThreadEmpty.tsx
|
@@ -1077,7 +1079,7 @@ BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
|
|
1077
1079
|
|
1078
1080
|
// src/primitives/branchPicker/BranchPickerRoot.tsx
|
1079
1081
|
var import_react_primitive6 = require("@radix-ui/react-primitive");
|
1080
|
-
var
|
1082
|
+
var import_react37 = require("react");
|
1081
1083
|
|
1082
1084
|
// src/primitives/message/index.ts
|
1083
1085
|
var message_exports = {};
|
@@ -1125,11 +1127,11 @@ var MessagePrimitiveIf = ({
|
|
1125
1127
|
MessagePrimitiveIf.displayName = "MessagePrimitive.If";
|
1126
1128
|
|
1127
1129
|
// src/primitives/message/MessageContent.tsx
|
1128
|
-
var
|
1130
|
+
var import_react35 = require("react");
|
1129
1131
|
|
1130
1132
|
// src/context/providers/ContentPartProvider.tsx
|
1131
1133
|
var import_react32 = require("react");
|
1132
|
-
var
|
1134
|
+
var import_zustand9 = require("zustand");
|
1133
1135
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
1134
1136
|
var syncContentPart = ({ message }, useContentPart, partIndex) => {
|
1135
1137
|
const part = message.content[partIndex];
|
@@ -1148,7 +1150,7 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
|
|
1148
1150
|
var useContentPartContext2 = (partIndex) => {
|
1149
1151
|
const { useMessage } = useMessageContext();
|
1150
1152
|
const [context] = (0, import_react32.useState)(() => {
|
1151
|
-
const useContentPart = (0,
|
1153
|
+
const useContentPart = (0, import_zustand9.create)(
|
1152
1154
|
() => ({})
|
1153
1155
|
);
|
1154
1156
|
syncContentPart(useMessage.getState(), useContentPart, partIndex);
|
@@ -1177,38 +1179,61 @@ var ContentPartPrimitiveDisplay = () => {
|
|
1177
1179
|
};
|
1178
1180
|
ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
|
1179
1181
|
|
1182
|
+
// src/utils/OutPortal.tsx
|
1183
|
+
var import_react33 = require("react");
|
1184
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
1185
|
+
var OutPortal = ({ node }) => {
|
1186
|
+
const parentRef = (0, import_react33.useRef)(null);
|
1187
|
+
(0, import_react33.useLayoutEffect)(() => {
|
1188
|
+
const parent = parentRef.current;
|
1189
|
+
if (!parent || !node) return;
|
1190
|
+
parent.appendChild(node);
|
1191
|
+
return () => {
|
1192
|
+
parent.removeChild(node);
|
1193
|
+
};
|
1194
|
+
}, [node]);
|
1195
|
+
if (!node) return null;
|
1196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref: parentRef });
|
1197
|
+
};
|
1198
|
+
|
1180
1199
|
// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
|
1200
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
1181
1201
|
var ContentPartPrimitiveInProgressIndicator = () => {
|
1182
|
-
const
|
1183
|
-
|
1202
|
+
const { useMessageUtils } = useMessageContext();
|
1203
|
+
const { useContentPart } = useContentPartContext();
|
1204
|
+
const indicator = useCombinedStore(
|
1205
|
+
[useMessageUtils, useContentPart],
|
1206
|
+
(m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
|
1207
|
+
);
|
1208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OutPortal, { node: indicator });
|
1184
1209
|
};
|
1185
1210
|
ContentPartPrimitiveInProgressIndicator.displayName = "ContentPartPrimitive.InProgressIndicator";
|
1186
1211
|
|
1187
1212
|
// src/primitives/contentPart/ContentPartText.tsx
|
1188
1213
|
var import_react_primitive4 = require("@radix-ui/react-primitive");
|
1189
|
-
var
|
1190
|
-
var
|
1191
|
-
var ContentPartPrimitiveText = (0,
|
1214
|
+
var import_react34 = require("react");
|
1215
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
1216
|
+
var ContentPartPrimitiveText = (0, import_react34.forwardRef)((props, forwardedRef) => {
|
1192
1217
|
const text = useContentPartText();
|
1193
|
-
return /* @__PURE__ */ (0,
|
1218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive4.Primitive.span, { ...props, ref: forwardedRef, children: text });
|
1194
1219
|
});
|
1195
1220
|
ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
|
1196
1221
|
|
1197
1222
|
// src/primitives/message/MessageContent.tsx
|
1198
|
-
var
|
1223
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
1199
1224
|
var defaultComponents = {
|
1200
|
-
Text: () => /* @__PURE__ */ (0,
|
1201
|
-
/* @__PURE__ */ (0,
|
1202
|
-
/* @__PURE__ */ (0,
|
1225
|
+
Text: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { style: { whiteSpace: "pre-line" }, children: [
|
1226
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveText, {}),
|
1227
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveInProgressIndicator, {})
|
1203
1228
|
] }),
|
1204
1229
|
Image: () => null,
|
1205
|
-
UI: () => /* @__PURE__ */ (0,
|
1230
|
+
UI: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveDisplay, {}),
|
1206
1231
|
tools: {
|
1207
1232
|
Fallback: (props) => {
|
1208
1233
|
const { useToolUIs } = useAssistantContext();
|
1209
1234
|
const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
|
1210
1235
|
if (!Render) return null;
|
1211
|
-
return /* @__PURE__ */ (0,
|
1236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Render, { ...props });
|
1212
1237
|
}
|
1213
1238
|
}
|
1214
1239
|
};
|
@@ -1227,15 +1252,15 @@ var MessageContentPartComponent = ({
|
|
1227
1252
|
const type = part.type;
|
1228
1253
|
switch (type) {
|
1229
1254
|
case "text":
|
1230
|
-
return /* @__PURE__ */ (0,
|
1255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { part, status });
|
1231
1256
|
case "image":
|
1232
|
-
return /* @__PURE__ */ (0,
|
1257
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Image, { part, status });
|
1233
1258
|
case "ui":
|
1234
|
-
return /* @__PURE__ */ (0,
|
1259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UI, { part, status });
|
1235
1260
|
case "tool-call": {
|
1236
1261
|
const Tool = by_name[part.toolName] || Fallback;
|
1237
1262
|
const addResult = (result) => addToolResult(part.toolCallId, result);
|
1238
|
-
return /* @__PURE__ */ (0,
|
1263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tool, { part, status, addResult });
|
1239
1264
|
}
|
1240
1265
|
default:
|
1241
1266
|
throw new Error(`Unknown content part type: ${type}`);
|
@@ -1245,9 +1270,9 @@ var MessageContentPartImpl = ({
|
|
1245
1270
|
partIndex,
|
1246
1271
|
components
|
1247
1272
|
}) => {
|
1248
|
-
return /* @__PURE__ */ (0,
|
1273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageContentPartComponent, { components }) });
|
1249
1274
|
};
|
1250
|
-
var MessageContentPart = (0,
|
1275
|
+
var MessageContentPart = (0, import_react35.memo)(
|
1251
1276
|
MessageContentPartImpl,
|
1252
1277
|
(prev, next) => prev.partIndex === next.partIndex && prev.components?.Text === next.components?.Text && prev.components?.Image === next.components?.Image && prev.components?.UI === next.components?.UI && prev.components?.tools === next.components?.tools
|
1253
1278
|
);
|
@@ -1258,7 +1283,7 @@ var MessagePrimitiveContent = ({
|
|
1258
1283
|
const contentLength = useMessage((s) => s.message.content.length);
|
1259
1284
|
return new Array(contentLength).fill(null).map((_, idx) => {
|
1260
1285
|
const partIndex = idx;
|
1261
|
-
return /* @__PURE__ */ (0,
|
1286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
1262
1287
|
MessageContentPart,
|
1263
1288
|
{
|
1264
1289
|
partIndex,
|
@@ -1271,25 +1296,21 @@ var MessagePrimitiveContent = ({
|
|
1271
1296
|
MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
|
1272
1297
|
|
1273
1298
|
// src/primitives/message/MessageInProgress.tsx
|
1299
|
+
var import_react_dom = require("react-dom");
|
1274
1300
|
var import_react_primitive5 = require("@radix-ui/react-primitive");
|
1275
|
-
var
|
1276
|
-
var
|
1277
|
-
var MessagePrimitiveInProgress = (0,
|
1301
|
+
var import_react36 = require("react");
|
1302
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
1303
|
+
var MessagePrimitiveInProgress = (0, import_react36.forwardRef)((props, ref) => {
|
1278
1304
|
const { useMessageUtils } = useMessageContext();
|
1279
|
-
|
1280
|
-
|
1281
|
-
return () => {
|
1282
|
-
useMessageUtils.getState().setInProgressIndicator(null);
|
1283
|
-
};
|
1284
|
-
}, [useMessageUtils, props, ref]);
|
1285
|
-
return null;
|
1305
|
+
const portalNode = useMessageUtils((s) => s.inProgressIndicator);
|
1306
|
+
return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_primitive5.Primitive.span, { ...props, ref }), portalNode);
|
1286
1307
|
});
|
1287
1308
|
MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
|
1288
1309
|
|
1289
1310
|
// src/primitives/branchPicker/BranchPickerRoot.tsx
|
1290
|
-
var
|
1291
|
-
var BranchPickerPrimitiveRoot = (0,
|
1292
|
-
return /* @__PURE__ */ (0,
|
1311
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
1312
|
+
var BranchPickerPrimitiveRoot = (0, import_react37.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
|
1313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive6.Primitive.div, { ...rest, ref }) });
|
1293
1314
|
});
|
1294
1315
|
BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
|
1295
1316
|
|
@@ -1306,16 +1327,16 @@ __export(composer_exports, {
|
|
1306
1327
|
// src/primitives/composer/ComposerRoot.tsx
|
1307
1328
|
var import_primitive5 = require("@radix-ui/primitive");
|
1308
1329
|
var import_react_primitive7 = require("@radix-ui/react-primitive");
|
1309
|
-
var
|
1310
|
-
var
|
1311
|
-
var ComposerPrimitiveRoot = (0,
|
1330
|
+
var import_react38 = require("react");
|
1331
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
1332
|
+
var ComposerPrimitiveRoot = (0, import_react38.forwardRef)(({ onSubmit, ...rest }, forwardedRef) => {
|
1312
1333
|
const send = useComposerSend();
|
1313
1334
|
const handleSubmit = (e) => {
|
1314
1335
|
e.preventDefault();
|
1315
1336
|
if (!send) return;
|
1316
1337
|
send();
|
1317
1338
|
};
|
1318
|
-
return /* @__PURE__ */ (0,
|
1339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
1319
1340
|
import_react_primitive7.Primitive.form,
|
1320
1341
|
{
|
1321
1342
|
...rest,
|
@@ -1330,11 +1351,11 @@ ComposerPrimitiveRoot.displayName = "ComposerPrimitive.Root";
|
|
1330
1351
|
var import_primitive6 = require("@radix-ui/primitive");
|
1331
1352
|
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
1332
1353
|
var import_react_slot = require("@radix-ui/react-slot");
|
1333
|
-
var
|
1354
|
+
var import_react39 = require("react");
|
1334
1355
|
var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
|
1335
1356
|
var import_react_use_escape_keydown = require("@radix-ui/react-use-escape-keydown");
|
1336
|
-
var
|
1337
|
-
var ComposerPrimitiveInput = (0,
|
1357
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
1358
|
+
var ComposerPrimitiveInput = (0, import_react39.forwardRef)(
|
1338
1359
|
({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
|
1339
1360
|
const { useThread } = useThreadContext();
|
1340
1361
|
const { useComposer, type } = useComposerContext();
|
@@ -1343,7 +1364,7 @@ var ComposerPrimitiveInput = (0, import_react38.forwardRef)(
|
|
1343
1364
|
return c.value;
|
1344
1365
|
});
|
1345
1366
|
const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
|
1346
|
-
const textareaRef = (0,
|
1367
|
+
const textareaRef = (0, import_react39.useRef)(null);
|
1347
1368
|
const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, textareaRef);
|
1348
1369
|
(0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
|
1349
1370
|
const composer = useComposer.getState();
|
@@ -1362,7 +1383,7 @@ var ComposerPrimitiveInput = (0, import_react38.forwardRef)(
|
|
1362
1383
|
}
|
1363
1384
|
};
|
1364
1385
|
const autoFocusEnabled = autoFocus && !disabled;
|
1365
|
-
const focus = (0,
|
1386
|
+
const focus = (0, import_react39.useCallback)(() => {
|
1366
1387
|
const textarea = textareaRef.current;
|
1367
1388
|
if (!textarea || !autoFocusEnabled) return;
|
1368
1389
|
textarea.focus({ preventScroll: true });
|
@@ -1371,13 +1392,13 @@ var ComposerPrimitiveInput = (0, import_react38.forwardRef)(
|
|
1371
1392
|
textareaRef.current.value.length
|
1372
1393
|
);
|
1373
1394
|
}, [autoFocusEnabled]);
|
1374
|
-
(0,
|
1395
|
+
(0, import_react39.useEffect)(() => focus(), [focus]);
|
1375
1396
|
useOnComposerFocus(() => {
|
1376
1397
|
if (type === "new") {
|
1377
1398
|
focus();
|
1378
1399
|
}
|
1379
1400
|
});
|
1380
|
-
return /* @__PURE__ */ (0,
|
1401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
1381
1402
|
Component,
|
1382
1403
|
{
|
1383
1404
|
value,
|
@@ -1397,13 +1418,13 @@ var ComposerPrimitiveInput = (0, import_react38.forwardRef)(
|
|
1397
1418
|
ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
|
1398
1419
|
|
1399
1420
|
// src/primitives/composer/ComposerSend.tsx
|
1400
|
-
var
|
1421
|
+
var import_react40 = require("react");
|
1401
1422
|
var import_react_primitive8 = require("@radix-ui/react-primitive");
|
1402
|
-
var
|
1403
|
-
var ComposerPrimitiveSend = (0,
|
1423
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
1424
|
+
var ComposerPrimitiveSend = (0, import_react40.forwardRef)(({ disabled, ...rest }, ref) => {
|
1404
1425
|
const { useComposer } = useComposerContext();
|
1405
1426
|
const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
|
1406
|
-
return /* @__PURE__ */ (0,
|
1427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
1407
1428
|
import_react_primitive8.Primitive.button,
|
1408
1429
|
{
|
1409
1430
|
type: "submit",
|
@@ -1442,11 +1463,11 @@ __export(contentPart_exports, {
|
|
1442
1463
|
|
1443
1464
|
// src/primitives/contentPart/ContentPartImage.tsx
|
1444
1465
|
var import_react_primitive9 = require("@radix-ui/react-primitive");
|
1445
|
-
var
|
1446
|
-
var
|
1447
|
-
var ContentPartPrimitiveImage = (0,
|
1466
|
+
var import_react41 = require("react");
|
1467
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
1468
|
+
var ContentPartPrimitiveImage = (0, import_react41.forwardRef)((props, forwardedRef) => {
|
1448
1469
|
const image = useContentPartImage();
|
1449
|
-
return /* @__PURE__ */ (0,
|
1470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive9.Primitive.img, { src: image, ...props, ref: forwardedRef });
|
1450
1471
|
});
|
1451
1472
|
ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
|
1452
1473
|
|
@@ -1464,10 +1485,10 @@ __export(thread_exports, {
|
|
1464
1485
|
|
1465
1486
|
// src/primitives/thread/ThreadRoot.tsx
|
1466
1487
|
var import_react_primitive10 = require("@radix-ui/react-primitive");
|
1467
|
-
var
|
1468
|
-
var
|
1469
|
-
var ThreadPrimitiveRoot = (0,
|
1470
|
-
return /* @__PURE__ */ (0,
|
1488
|
+
var import_react42 = require("react");
|
1489
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
1490
|
+
var ThreadPrimitiveRoot = (0, import_react42.forwardRef)((props, ref) => {
|
1491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_primitive10.Primitive.div, { ...props, ref });
|
1471
1492
|
});
|
1472
1493
|
ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
|
1473
1494
|
|
@@ -1493,21 +1514,21 @@ ThreadPrimitiveIf.displayName = "ThreadPrimitive.If";
|
|
1493
1514
|
// src/primitives/thread/ThreadViewport.tsx
|
1494
1515
|
var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
|
1495
1516
|
var import_react_primitive11 = require("@radix-ui/react-primitive");
|
1496
|
-
var
|
1517
|
+
var import_react47 = require("react");
|
1497
1518
|
|
1498
1519
|
// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
|
1499
1520
|
var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
|
1500
|
-
var
|
1521
|
+
var import_react46 = require("react");
|
1501
1522
|
|
1502
1523
|
// src/utils/hooks/useOnResizeContent.tsx
|
1503
1524
|
var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
|
1504
|
-
var
|
1525
|
+
var import_react44 = require("react");
|
1505
1526
|
|
1506
1527
|
// src/utils/hooks/useManagedRef.ts
|
1507
|
-
var
|
1528
|
+
var import_react43 = require("react");
|
1508
1529
|
var useManagedRef = (callback) => {
|
1509
|
-
const cleanupRef = (0,
|
1510
|
-
const ref = (0,
|
1530
|
+
const cleanupRef = (0, import_react43.useRef)();
|
1531
|
+
const ref = (0, import_react43.useCallback)(
|
1511
1532
|
(el) => {
|
1512
1533
|
if (cleanupRef.current) {
|
1513
1534
|
cleanupRef.current();
|
@@ -1524,7 +1545,7 @@ var useManagedRef = (callback) => {
|
|
1524
1545
|
// src/utils/hooks/useOnResizeContent.tsx
|
1525
1546
|
var useOnResizeContent = (callback) => {
|
1526
1547
|
const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
|
1527
|
-
const refCallback = (0,
|
1548
|
+
const refCallback = (0, import_react44.useCallback)(
|
1528
1549
|
(el) => {
|
1529
1550
|
const resizeObserver = new ResizeObserver(() => {
|
1530
1551
|
callbackRef();
|
@@ -1561,11 +1582,11 @@ var useOnResizeContent = (callback) => {
|
|
1561
1582
|
|
1562
1583
|
// src/utils/hooks/useOnScrollToBottom.tsx
|
1563
1584
|
var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
|
1564
|
-
var
|
1585
|
+
var import_react45 = require("react");
|
1565
1586
|
var useOnScrollToBottom = (callback) => {
|
1566
1587
|
const callbackRef = (0, import_react_use_callback_ref3.useCallbackRef)(callback);
|
1567
1588
|
const { useViewport } = useThreadContext();
|
1568
|
-
(0,
|
1589
|
+
(0, import_react45.useEffect)(() => {
|
1569
1590
|
return useViewport.getState().onScrollToBottom(() => {
|
1570
1591
|
callbackRef();
|
1571
1592
|
});
|
@@ -1576,11 +1597,11 @@ var useOnScrollToBottom = (callback) => {
|
|
1576
1597
|
var useThreadViewportAutoScroll = ({
|
1577
1598
|
autoScroll = true
|
1578
1599
|
}) => {
|
1579
|
-
const divRef = (0,
|
1600
|
+
const divRef = (0, import_react46.useRef)(null);
|
1580
1601
|
const { useViewport } = useThreadContext();
|
1581
|
-
const firstRenderRef = (0,
|
1582
|
-
const lastScrollTop = (0,
|
1583
|
-
const isScrollingToBottomRef = (0,
|
1602
|
+
const firstRenderRef = (0, import_react46.useRef)(true);
|
1603
|
+
const lastScrollTop = (0, import_react46.useRef)(0);
|
1604
|
+
const isScrollingToBottomRef = (0, import_react46.useRef)(false);
|
1584
1605
|
const scrollToBottom = () => {
|
1585
1606
|
const div = divRef.current;
|
1586
1607
|
if (!div || !autoScroll) return;
|
@@ -1626,29 +1647,29 @@ var useThreadViewportAutoScroll = ({
|
|
1626
1647
|
};
|
1627
1648
|
|
1628
1649
|
// src/primitives/thread/ThreadViewport.tsx
|
1629
|
-
var
|
1630
|
-
var ThreadPrimitiveViewport = (0,
|
1650
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
1651
|
+
var ThreadPrimitiveViewport = (0, import_react47.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
|
1631
1652
|
const autoScrollRef = useThreadViewportAutoScroll({
|
1632
1653
|
autoScroll
|
1633
1654
|
});
|
1634
1655
|
const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, autoScrollRef);
|
1635
|
-
return /* @__PURE__ */ (0,
|
1656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref, children });
|
1636
1657
|
});
|
1637
1658
|
ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
|
1638
1659
|
|
1639
1660
|
// src/primitives/thread/ThreadMessages.tsx
|
1640
|
-
var
|
1661
|
+
var import_react49 = require("react");
|
1641
1662
|
|
1642
1663
|
// src/context/providers/MessageProvider.tsx
|
1643
|
-
var
|
1644
|
-
var
|
1664
|
+
var import_react48 = require("react");
|
1665
|
+
var import_zustand12 = require("zustand");
|
1645
1666
|
|
1646
1667
|
// src/context/stores/EditComposer.ts
|
1647
|
-
var
|
1668
|
+
var import_zustand10 = require("zustand");
|
1648
1669
|
var makeEditComposerStore = ({
|
1649
1670
|
onEdit,
|
1650
1671
|
onSend
|
1651
|
-
}) => (0,
|
1672
|
+
}) => (0, import_zustand10.create)()((set, get, store) => ({
|
1652
1673
|
...makeBaseComposer(set, get, store),
|
1653
1674
|
isEditing: false,
|
1654
1675
|
edit: () => {
|
@@ -1668,12 +1689,9 @@ var makeEditComposerStore = ({
|
|
1668
1689
|
}));
|
1669
1690
|
|
1670
1691
|
// src/context/stores/MessageUtils.ts
|
1671
|
-
var
|
1672
|
-
var makeMessageUtilsStore = () => (0,
|
1673
|
-
inProgressIndicator:
|
1674
|
-
setInProgressIndicator: (value) => {
|
1675
|
-
set({ inProgressIndicator: value });
|
1676
|
-
},
|
1692
|
+
var import_zustand11 = require("zustand");
|
1693
|
+
var makeMessageUtilsStore = () => (0, import_zustand11.create)((set) => ({
|
1694
|
+
inProgressIndicator: document.createElement("span"),
|
1677
1695
|
isCopied: false,
|
1678
1696
|
setIsCopied: (value) => {
|
1679
1697
|
set({ isCopied: value });
|
@@ -1685,15 +1703,15 @@ var makeMessageUtilsStore = () => (0, import_zustand10.create)((set) => ({
|
|
1685
1703
|
}));
|
1686
1704
|
|
1687
1705
|
// src/context/providers/MessageProvider.tsx
|
1688
|
-
var
|
1689
|
-
var getIsLast = (
|
1690
|
-
return
|
1706
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
1707
|
+
var getIsLast = (messages, message) => {
|
1708
|
+
return messages[messages.length - 1]?.id === message.id;
|
1691
1709
|
};
|
1692
|
-
var syncMessage = (
|
1693
|
-
const parentId =
|
1694
|
-
const message =
|
1710
|
+
var syncMessage = (messages, getBranches, useMessage, messageIndex) => {
|
1711
|
+
const parentId = messages[messageIndex - 1]?.id ?? null;
|
1712
|
+
const message = messages[messageIndex];
|
1695
1713
|
if (!message) return;
|
1696
|
-
const isLast = getIsLast(
|
1714
|
+
const isLast = getIsLast(messages, message);
|
1697
1715
|
const branches = getBranches(message.id);
|
1698
1716
|
const currentState = useMessage.getState();
|
1699
1717
|
if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
|
@@ -1706,9 +1724,9 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
|
|
1706
1724
|
});
|
1707
1725
|
};
|
1708
1726
|
var useMessageContext2 = (messageIndex) => {
|
1709
|
-
const {
|
1710
|
-
const [context] = (0,
|
1711
|
-
const useMessage = (0,
|
1727
|
+
const { useThreadMessages, useThreadActions } = useThreadContext();
|
1728
|
+
const [context] = (0, import_react48.useState)(() => {
|
1729
|
+
const useMessage = (0, import_zustand12.create)(() => ({}));
|
1712
1730
|
const useMessageUtils = makeMessageUtilsStore();
|
1713
1731
|
const useEditComposer = makeEditComposerStore({
|
1714
1732
|
onEdit: () => {
|
@@ -1737,15 +1755,15 @@ var useMessageContext2 = (messageIndex) => {
|
|
1737
1755
|
}
|
1738
1756
|
});
|
1739
1757
|
syncMessage(
|
1740
|
-
|
1758
|
+
useThreadMessages.getState(),
|
1741
1759
|
useThreadActions.getState().getBranches,
|
1742
1760
|
useMessage,
|
1743
1761
|
messageIndex
|
1744
1762
|
);
|
1745
1763
|
return { useMessage, useMessageUtils, useEditComposer };
|
1746
1764
|
});
|
1747
|
-
(0,
|
1748
|
-
return
|
1765
|
+
(0, import_react48.useEffect)(() => {
|
1766
|
+
return useThreadMessages.subscribe((thread) => {
|
1749
1767
|
syncMessage(
|
1750
1768
|
thread,
|
1751
1769
|
useThreadActions.getState().getBranches,
|
@@ -1753,7 +1771,7 @@ var useMessageContext2 = (messageIndex) => {
|
|
1753
1771
|
messageIndex
|
1754
1772
|
);
|
1755
1773
|
});
|
1756
|
-
}, [
|
1774
|
+
}, [useThreadMessages, useThreadActions, context, messageIndex]);
|
1757
1775
|
return context;
|
1758
1776
|
};
|
1759
1777
|
var MessageProvider = ({
|
@@ -1761,11 +1779,11 @@ var MessageProvider = ({
|
|
1761
1779
|
children
|
1762
1780
|
}) => {
|
1763
1781
|
const context = useMessageContext2(messageIndex);
|
1764
|
-
return /* @__PURE__ */ (0,
|
1782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageContext.Provider, { value: context, children });
|
1765
1783
|
};
|
1766
1784
|
|
1767
1785
|
// src/primitives/thread/ThreadMessages.tsx
|
1768
|
-
var
|
1786
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
1769
1787
|
var getComponents = (components) => {
|
1770
1788
|
return {
|
1771
1789
|
EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
|
@@ -1778,27 +1796,27 @@ var ThreadMessageImpl = ({
|
|
1778
1796
|
components
|
1779
1797
|
}) => {
|
1780
1798
|
const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
|
1781
|
-
return /* @__PURE__ */ (0,
|
1782
|
-
/* @__PURE__ */ (0,
|
1783
|
-
/* @__PURE__ */ (0,
|
1784
|
-
/* @__PURE__ */ (0,
|
1799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MessageProvider, { messageIndex, children: [
|
1800
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MessagePrimitiveIf, { user: true, children: [
|
1801
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UserMessage, {}) }),
|
1802
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EditComposer, {}) })
|
1785
1803
|
] }),
|
1786
|
-
/* @__PURE__ */ (0,
|
1804
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AssistantMessage, {}) })
|
1787
1805
|
] });
|
1788
1806
|
};
|
1789
|
-
var ThreadMessage = (0,
|
1807
|
+
var ThreadMessage = (0, import_react49.memo)(
|
1790
1808
|
ThreadMessageImpl,
|
1791
1809
|
(prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
|
1792
1810
|
);
|
1793
1811
|
var ThreadPrimitiveMessages = ({
|
1794
1812
|
components
|
1795
1813
|
}) => {
|
1796
|
-
const {
|
1797
|
-
const messagesLength =
|
1814
|
+
const { useThreadMessages } = useThreadContext();
|
1815
|
+
const messagesLength = useThreadMessages((t) => t.length);
|
1798
1816
|
if (messagesLength === 0) return null;
|
1799
1817
|
return new Array(messagesLength).fill(null).map((_, idx) => {
|
1800
1818
|
const messageIndex = idx;
|
1801
|
-
return /* @__PURE__ */ (0,
|
1819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
1802
1820
|
ThreadMessage,
|
1803
1821
|
{
|
1804
1822
|
messageIndex,
|
@@ -1823,7 +1841,7 @@ var ThreadPrimitiveSuggestion = createActionButton(
|
|
1823
1841
|
);
|
1824
1842
|
|
1825
1843
|
// src/runtime/local/useLocalRuntime.tsx
|
1826
|
-
var
|
1844
|
+
var import_react50 = require("react");
|
1827
1845
|
|
1828
1846
|
// src/runtime/utils/idUtils.tsx
|
1829
1847
|
var import_non_secure = require("nanoid/non-secure");
|
@@ -2155,8 +2173,8 @@ var LocalThreadRuntime = class {
|
|
2155
2173
|
|
2156
2174
|
// src/runtime/local/useLocalRuntime.tsx
|
2157
2175
|
var useLocalRuntime = (adapter) => {
|
2158
|
-
const [runtime] = (0,
|
2159
|
-
(0,
|
2176
|
+
const [runtime] = (0, import_react50.useState)(() => new LocalRuntime(adapter));
|
2177
|
+
(0, import_react50.useInsertionEffect)(() => {
|
2160
2178
|
runtime.adapter = adapter;
|
2161
2179
|
});
|
2162
2180
|
return runtime;
|
@@ -2201,7 +2219,6 @@ __export(internal_exports, {
|
|
2201
2219
|
useContentPartContext,
|
2202
2220
|
useContentPartDisplay,
|
2203
2221
|
useContentPartImage,
|
2204
|
-
useContentPartInProgressIndicator,
|
2205
2222
|
useContentPartText,
|
2206
2223
|
useLocalRuntime,
|
2207
2224
|
useMessageContext,
|