@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.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: useThread.getState().messages.at(-1)?.id ?? null,
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(useThread, useThreadActions);
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 import_zustand7 = require("zustand");
346
- var makeAssistantActionsStore = (runtimeRef) => (0, import_zustand7.create)(
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 = (useThread, message) => {
433
+ var toAppendMessage = (useThreadMessages, message) => {
424
434
  if (typeof message === "string") {
425
435
  return {
426
- parentId: useThread.getState().messages.at(-1)?.id ?? null,
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 ?? useThread.getState().messages.at(-1)?.id ?? null,
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 { useThread, useThreadActions, useViewport, useComposer } = useThreadContext();
448
+ const { useThreadMessages, useThreadActions, useViewport, useComposer } = useThreadContext();
439
449
  const append = (0, import_react9.useCallback)(
440
450
  (message) => {
441
- const appendMessage = toAppendMessage(useThread, message);
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
- [useThread, useThreadActions, useViewport, useComposer]
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 useThread((thread) => {
787
- if (props.empty === true && thread.messages.length !== 0) return false;
788
- if (props.empty === false && thread.messages.length === 0) return false;
789
- if (props.running === true && !thread.isRunning) return false;
790
- if (props.running === false && thread.isRunning) return false;
791
- return true;
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 import_react36 = require("react");
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 import_react34 = require("react");
1130
+ var import_react35 = require("react");
1129
1131
 
1130
1132
  // src/context/providers/ContentPartProvider.tsx
1131
1133
  var import_react32 = require("react");
1132
- var import_zustand8 = require("zustand");
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, import_zustand8.create)(
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 indicator = useContentPartInProgressIndicator();
1183
- return indicator;
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 import_react33 = require("react");
1190
- var import_jsx_runtime13 = require("react/jsx-runtime");
1191
- var ContentPartPrimitiveText = (0, import_react33.forwardRef)((props, forwardedRef) => {
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, import_jsx_runtime13.jsx)(import_react_primitive4.Primitive.p, { ...props, ref: forwardedRef, children: text });
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 import_jsx_runtime14 = require("react/jsx-runtime");
1223
+ var import_jsx_runtime16 = require("react/jsx-runtime");
1199
1224
  var defaultComponents = {
1200
- Text: () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
1201
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartPrimitiveText, { style: { whiteSpace: "pre-line" } }),
1202
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartPrimitiveInProgressIndicator, {})
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, import_jsx_runtime14.jsx)(ContentPartPrimitiveDisplay, {}),
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, import_jsx_runtime14.jsx)(Render, { ...props });
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, import_jsx_runtime14.jsx)(Text, { part, status });
1255
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { part, status });
1231
1256
  case "image":
1232
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image, { part, status });
1257
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Image, { part, status });
1233
1258
  case "ui":
1234
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UI, { part, status });
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, import_jsx_runtime14.jsx)(Tool, { part, status, addResult });
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, import_jsx_runtime14.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageContentPartComponent, { components }) });
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, import_react34.memo)(
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, import_jsx_runtime14.jsx)(
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 import_react35 = require("react");
1276
- var import_jsx_runtime15 = require("react/jsx-runtime");
1277
- var MessagePrimitiveInProgress = (0, import_react35.forwardRef)((props, ref) => {
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
- (0, import_react35.useEffect)(() => {
1280
- useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive5.Primitive.span, { ...props, ref }));
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 import_jsx_runtime16 = require("react/jsx-runtime");
1291
- var BranchPickerPrimitiveRoot = (0, import_react36.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
1292
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive6.Primitive.div, { ...rest, ref }) });
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 import_react37 = require("react");
1310
- var import_jsx_runtime17 = require("react/jsx-runtime");
1311
- var ComposerPrimitiveRoot = (0, import_react37.forwardRef)(({ onSubmit, ...rest }, forwardedRef) => {
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, import_jsx_runtime17.jsx)(
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 import_react38 = require("react");
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 import_jsx_runtime18 = require("react/jsx-runtime");
1337
- var ComposerPrimitiveInput = (0, import_react38.forwardRef)(
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, import_react38.useRef)(null);
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, import_react38.useCallback)(() => {
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, import_react38.useEffect)(() => focus(), [focus]);
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, import_jsx_runtime18.jsx)(
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 import_react39 = require("react");
1421
+ var import_react40 = require("react");
1401
1422
  var import_react_primitive8 = require("@radix-ui/react-primitive");
1402
- var import_jsx_runtime19 = require("react/jsx-runtime");
1403
- var ComposerPrimitiveSend = (0, import_react39.forwardRef)(({ disabled, ...rest }, ref) => {
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, import_jsx_runtime19.jsx)(
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 import_react40 = require("react");
1446
- var import_jsx_runtime20 = require("react/jsx-runtime");
1447
- var ContentPartPrimitiveImage = (0, import_react40.forwardRef)((props, forwardedRef) => {
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, import_jsx_runtime20.jsx)(import_react_primitive9.Primitive.img, { src: image, ...props, ref: forwardedRef });
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 import_react41 = require("react");
1468
- var import_jsx_runtime21 = require("react/jsx-runtime");
1469
- var ThreadPrimitiveRoot = (0, import_react41.forwardRef)((props, ref) => {
1470
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_primitive10.Primitive.div, { ...props, ref });
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 import_react46 = require("react");
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 import_react45 = require("react");
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 import_react43 = require("react");
1525
+ var import_react44 = require("react");
1505
1526
 
1506
1527
  // src/utils/hooks/useManagedRef.ts
1507
- var import_react42 = require("react");
1528
+ var import_react43 = require("react");
1508
1529
  var useManagedRef = (callback) => {
1509
- const cleanupRef = (0, import_react42.useRef)();
1510
- const ref = (0, import_react42.useCallback)(
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, import_react43.useCallback)(
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 import_react44 = require("react");
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, import_react44.useEffect)(() => {
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, import_react45.useRef)(null);
1600
+ const divRef = (0, import_react46.useRef)(null);
1580
1601
  const { useViewport } = useThreadContext();
1581
- const firstRenderRef = (0, import_react45.useRef)(true);
1582
- const lastScrollTop = (0, import_react45.useRef)(0);
1583
- const isScrollingToBottomRef = (0, import_react45.useRef)(false);
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 import_jsx_runtime22 = require("react/jsx-runtime");
1630
- var ThreadPrimitiveViewport = (0, import_react46.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
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, import_jsx_runtime22.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref, children });
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 import_react48 = require("react");
1661
+ var import_react49 = require("react");
1641
1662
 
1642
1663
  // src/context/providers/MessageProvider.tsx
1643
- var import_react47 = require("react");
1644
- var import_zustand11 = require("zustand");
1664
+ var import_react48 = require("react");
1665
+ var import_zustand12 = require("zustand");
1645
1666
 
1646
1667
  // src/context/stores/EditComposer.ts
1647
- var import_zustand9 = require("zustand");
1668
+ var import_zustand10 = require("zustand");
1648
1669
  var makeEditComposerStore = ({
1649
1670
  onEdit,
1650
1671
  onSend
1651
- }) => (0, import_zustand9.create)()((set, get, store) => ({
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 import_zustand10 = require("zustand");
1672
- var makeMessageUtilsStore = () => (0, import_zustand10.create)((set) => ({
1673
- inProgressIndicator: null,
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 import_jsx_runtime23 = require("react/jsx-runtime");
1689
- var getIsLast = (thread, message) => {
1690
- return thread.messages[thread.messages.length - 1]?.id === message.id;
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 = (thread, getBranches, useMessage, messageIndex) => {
1693
- const parentId = thread.messages[messageIndex - 1]?.id ?? null;
1694
- const message = thread.messages[messageIndex];
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(thread, message);
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 { useThread, useThreadActions } = useThreadContext();
1710
- const [context] = (0, import_react47.useState)(() => {
1711
- const useMessage = (0, import_zustand11.create)(() => ({}));
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
- useThread.getState(),
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, import_react47.useEffect)(() => {
1748
- return useThread.subscribe((thread) => {
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
- }, [useThread, useThreadActions, context, messageIndex]);
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, import_jsx_runtime23.jsx)(MessageContext.Provider, { value: context, children });
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 import_jsx_runtime24 = require("react/jsx-runtime");
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, import_jsx_runtime24.jsxs)(MessageProvider, { messageIndex, children: [
1782
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MessagePrimitiveIf, { user: true, children: [
1783
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UserMessage, {}) }),
1784
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EditComposer, {}) })
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, import_jsx_runtime24.jsx)(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantMessage, {}) })
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, import_react48.memo)(
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 { useThread } = useThreadContext();
1797
- const messagesLength = useThread((t) => t.messages.length);
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, import_jsx_runtime24.jsx)(
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 import_react49 = require("react");
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, import_react49.useState)(() => new LocalRuntime(adapter));
2159
- (0, import_react49.useInsertionEffect)(() => {
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,