@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.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: useThread.getState().messages.at(-1)?.id ?? null,
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(useThread, useThreadActions);
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 create7 } from "zustand";
283
- var makeAssistantActionsStore = (runtimeRef) => create7(
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 = (useThread, message) => {
371
+ var toAppendMessage = (useThreadMessages, message) => {
361
372
  if (typeof message === "string") {
362
373
  return {
363
- parentId: useThread.getState().messages.at(-1)?.id ?? null,
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 ?? useThread.getState().messages.at(-1)?.id ?? null,
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 { useThread, useThreadActions, useViewport, useComposer } = useThreadContext();
386
+ const { useThreadMessages, useThreadActions, useViewport, useComposer } = useThreadContext();
376
387
  const append = useCallback2(
377
388
  (message) => {
378
- const appendMessage = toAppendMessage(useThread, message);
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
- [useThread, useThreadActions, useViewport, useComposer]
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 useThread((thread) => {
724
- if (props.empty === true && thread.messages.length !== 0) return false;
725
- if (props.empty === false && thread.messages.length === 0) return false;
726
- if (props.running === true && !thread.isRunning) return false;
727
- if (props.running === false && thread.isRunning) return false;
728
- return true;
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 create8 } from "zustand";
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 = create8(
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 indicator = useContentPartInProgressIndicator();
1120
- return indicator;
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 jsx13 } from "react/jsx-runtime";
1153
+ import { jsx as jsx15 } from "react/jsx-runtime";
1128
1154
  var ContentPartPrimitiveText = forwardRef6((props, forwardedRef) => {
1129
1155
  const text = useContentPartText();
1130
- return /* @__PURE__ */ jsx13(Primitive4.p, { ...props, ref: forwardedRef, children: text });
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 { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs2 } from "react/jsx-runtime";
1161
+ import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
1136
1162
  var defaultComponents = {
1137
- Text: () => /* @__PURE__ */ jsxs2(Fragment3, { children: [
1138
- /* @__PURE__ */ jsx14(ContentPartPrimitiveText, { style: { whiteSpace: "pre-line" } }),
1139
- /* @__PURE__ */ jsx14(ContentPartPrimitiveInProgressIndicator, {})
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__ */ jsx14(ContentPartPrimitiveDisplay, {}),
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__ */ jsx14(Render, { ...props });
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__ */ jsx14(Text, { part, status });
1193
+ return /* @__PURE__ */ jsx16(Text, { part, status });
1168
1194
  case "image":
1169
- return /* @__PURE__ */ jsx14(Image, { part, status });
1195
+ return /* @__PURE__ */ jsx16(Image, { part, status });
1170
1196
  case "ui":
1171
- return /* @__PURE__ */ jsx14(UI, { part, status });
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__ */ jsx14(Tool, { part, status, addResult });
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__ */ jsx14(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx14(MessageContentPartComponent, { components }) });
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__ */ jsx14(
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
- forwardRef as forwardRef7,
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
- useEffect8(() => {
1220
- useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx15(Primitive5.span, { ...props, ref }));
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 jsx16 } from "react/jsx-runtime";
1249
+ import { jsx as jsx18 } from "react/jsx-runtime";
1231
1250
  var BranchPickerPrimitiveRoot = forwardRef8(({ hideWhenSingleBranch, ...rest }, ref) => {
1232
- return /* @__PURE__ */ jsx16(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive6.div, { ...rest, ref }) });
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 jsx17 } from "react/jsx-runtime";
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__ */ jsx17(
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 useEffect9,
1279
- useRef as useRef3
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 jsx18 } from "react/jsx-runtime";
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 = useRef3(null);
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
- useEffect9(() => focus(), [focus]);
1340
+ useEffect8(() => focus(), [focus]);
1322
1341
  useOnComposerFocus(() => {
1323
1342
  if (type === "new") {
1324
1343
  focus();
1325
1344
  }
1326
1345
  });
1327
- return /* @__PURE__ */ jsx18(
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 jsx19 } from "react/jsx-runtime";
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__ */ jsx19(
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 jsx20 } from "react/jsx-runtime";
1412
+ import { jsx as jsx22 } from "react/jsx-runtime";
1394
1413
  var ContentPartPrimitiveImage = forwardRef12((props, forwardedRef) => {
1395
1414
  const image = useContentPartImage();
1396
- return /* @__PURE__ */ jsx20(Primitive9.img, { src: image, ...props, ref: forwardedRef });
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 jsx21 } from "react/jsx-runtime";
1434
+ import { jsx as jsx23 } from "react/jsx-runtime";
1416
1435
  var ThreadPrimitiveRoot = forwardRef13((props, ref) => {
1417
- return /* @__PURE__ */ jsx21(Primitive10.div, { ...props, ref });
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 useRef5 } from "react";
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 useRef4 } from "react";
1473
+ import { useCallback as useCallback14, useRef as useRef5 } from "react";
1455
1474
  var useManagedRef = (callback) => {
1456
- const cleanupRef = useRef4();
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 useEffect10 } from "react";
1530
+ import { useEffect as useEffect9 } from "react";
1512
1531
  var useOnScrollToBottom = (callback) => {
1513
1532
  const callbackRef = useCallbackRef3(callback);
1514
1533
  const { useViewport } = useThreadContext();
1515
- useEffect10(() => {
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 = useRef5(null);
1545
+ const divRef = useRef6(null);
1527
1546
  const { useViewport } = useThreadContext();
1528
- const firstRenderRef = useRef5(true);
1529
- const lastScrollTop = useRef5(0);
1530
- const isScrollingToBottomRef = useRef5(false);
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 jsx22 } from "react/jsx-runtime";
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__ */ jsx22(Primitive11.div, { ...rest, ref, children });
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 useEffect11, useState as useState5 } from "react";
1591
- import { create as create11 } from "zustand";
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 create9 } from "zustand";
1613
+ import { create as create10 } from "zustand";
1595
1614
  var makeEditComposerStore = ({
1596
1615
  onEdit,
1597
1616
  onSend
1598
- }) => create9()((set, get, store) => ({
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 create10 } from "zustand";
1619
- var makeMessageUtilsStore = () => create10((set) => ({
1620
- inProgressIndicator: null,
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 jsx23 } from "react/jsx-runtime";
1636
- var getIsLast = (thread, message) => {
1637
- return thread.messages[thread.messages.length - 1]?.id === message.id;
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 = (thread, getBranches, useMessage, messageIndex) => {
1640
- const parentId = thread.messages[messageIndex - 1]?.id ?? null;
1641
- const message = thread.messages[messageIndex];
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(thread, message);
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 { useThread, useThreadActions } = useThreadContext();
1672
+ const { useThreadMessages, useThreadActions } = useThreadContext();
1657
1673
  const [context] = useState5(() => {
1658
- const useMessage = create11(() => ({}));
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
- useThread.getState(),
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
- useEffect11(() => {
1695
- return useThread.subscribe((thread) => {
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
- }, [useThread, useThreadActions, context, messageIndex]);
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__ */ jsx23(MessageContext.Provider, { value: context, children });
1727
+ return /* @__PURE__ */ jsx25(MessageContext.Provider, { value: context, children });
1712
1728
  };
1713
1729
 
1714
1730
  // src/primitives/thread/ThreadMessages.tsx
1715
- import { jsx as jsx24, jsxs as jsxs3 } from "react/jsx-runtime";
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__ */ jsx24(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx24(UserMessage, {}) }),
1731
- /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx24(EditComposer, {}) })
1746
+ /* @__PURE__ */ jsx26(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx26(UserMessage, {}) }),
1747
+ /* @__PURE__ */ jsx26(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx26(EditComposer, {}) })
1732
1748
  ] }),
1733
- /* @__PURE__ */ jsx24(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx24(AssistantMessage, {}) })
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 { useThread } = useThreadContext();
1744
- const messagesLength = useThread((t) => t.messages.length);
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__ */ jsx24(
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,