@assistant-ui/react 0.1.12 → 0.2.0

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
@@ -39,22 +39,32 @@ __export(src_exports, {
39
39
  INTERNAL: () => internal_exports,
40
40
  MessagePrimitive: () => message_exports,
41
41
  ThreadPrimitive: () => thread_exports,
42
+ makeAssistantTool: () => makeAssistantTool,
43
+ makeAssistantToolUI: () => makeAssistantToolUI,
42
44
  useActionBarCopy: () => useActionBarCopy,
43
45
  useActionBarEdit: () => useActionBarEdit,
44
46
  useActionBarReload: () => useActionBarReload,
47
+ useAssistantContext: () => useAssistantContext,
48
+ useAssistantInstructions: () => useAssistantInstructions,
49
+ useAssistantTool: () => useAssistantTool,
50
+ useAssistantToolUI: () => useAssistantToolUI,
45
51
  useBranchPickerCount: () => useBranchPickerCount,
46
52
  useBranchPickerNext: () => useBranchPickerNext,
47
53
  useBranchPickerNumber: () => useBranchPickerNumber,
48
54
  useBranchPickerPrevious: () => useBranchPickerPrevious,
49
55
  useComposerCancel: () => useComposerCancel,
56
+ useComposerContext: () => useComposerContext,
50
57
  useComposerIf: () => useComposerIf,
51
58
  useComposerSend: () => useComposerSend,
59
+ useContentPartContext: () => useContentPartContext,
52
60
  useContentPartDisplay: () => useContentPartDisplay,
53
61
  useContentPartImage: () => useContentPartImage,
54
62
  useContentPartInProgressIndicator: () => useContentPartInProgressIndicator,
55
63
  useContentPartText: () => useContentPartText,
56
64
  useLocalRuntime: () => useLocalRuntime,
65
+ useMessageContext: () => useMessageContext,
57
66
  useMessageIf: () => useMessageIf,
67
+ useThreadContext: () => useThreadContext,
58
68
  useThreadEmpty: () => useThreadEmpty,
59
69
  useThreadIf: () => useThreadIf,
60
70
  useThreadScrollToBottom: () => useThreadScrollToBottom,
@@ -233,8 +243,14 @@ var useBranchPickerPrevious = () => {
233
243
  };
234
244
 
235
245
  // src/primitive-hooks/composer/useComposerCancel.tsx
246
+ var import_react16 = require("react");
247
+
248
+ // src/context/providers/AssistantRuntimeProvider.tsx
236
249
  var import_react13 = require("react");
237
250
 
251
+ // src/context/providers/AssistantProvider.tsx
252
+ var import_react12 = require("react");
253
+
238
254
  // src/context/react/AssistantContext.ts
239
255
  var import_react10 = require("react");
240
256
  var AssistantContext = (0, import_react10.createContext)(
@@ -249,12 +265,265 @@ var useAssistantContext = () => {
249
265
  return context;
250
266
  };
251
267
 
252
- // src/context/react/ComposerContext.ts
268
+ // src/context/stores/AssistantModelConfig.ts
269
+ var import_zustand = require("zustand");
270
+
271
+ // src/types/ModelConfigTypes.ts
272
+ var mergeModelConfigs = (configSet) => {
273
+ const configs = Array.from(configSet).map((c) => c()).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
274
+ return configs.reduce((acc, config) => {
275
+ if (config.system) {
276
+ if (acc.system) {
277
+ acc.system += `
278
+
279
+ ${config.system}`;
280
+ } else {
281
+ acc.system = config.system;
282
+ }
283
+ }
284
+ if (config.tools) {
285
+ for (const [name, tool] of Object.entries(config.tools)) {
286
+ if (acc.tools?.[name]) {
287
+ throw new Error(
288
+ `You tried to define a tool with the name ${name}, but it already exists.`
289
+ );
290
+ }
291
+ if (!acc.tools) acc.tools = {};
292
+ acc.tools[name] = tool;
293
+ }
294
+ }
295
+ return acc;
296
+ }, {});
297
+ };
298
+
299
+ // src/utils/ProxyConfigProvider.ts
300
+ var ProxyConfigProvider = class {
301
+ _providers = /* @__PURE__ */ new Set();
302
+ getModelConfig() {
303
+ return mergeModelConfigs(this._providers);
304
+ }
305
+ registerModelConfigProvider(provider) {
306
+ this._providers.add(provider);
307
+ return () => {
308
+ this._providers.delete(provider);
309
+ };
310
+ }
311
+ };
312
+
313
+ // src/context/stores/AssistantModelConfig.ts
314
+ var makeAssistantModelConfigStore = () => (0, import_zustand.create)(() => {
315
+ const proxy = new ProxyConfigProvider();
316
+ return Object.freeze({
317
+ getModelConfig: () => {
318
+ return proxy.getModelConfig();
319
+ },
320
+ registerModelConfigProvider: (provider) => {
321
+ return proxy.registerModelConfigProvider(provider);
322
+ }
323
+ });
324
+ });
325
+
326
+ // src/context/stores/AssistantToolUIs.ts
327
+ var import_zustand2 = require("zustand");
328
+ var makeAssistantToolUIsStore = () => (0, import_zustand2.create)((set) => {
329
+ const renderers = /* @__PURE__ */ new Map();
330
+ return Object.freeze({
331
+ getToolUI: (name) => {
332
+ const arr = renderers.get(name);
333
+ const last = arr?.at(-1);
334
+ if (last) return last;
335
+ return null;
336
+ },
337
+ setToolUI: (name, render) => {
338
+ let arr = renderers.get(name);
339
+ if (!arr) {
340
+ arr = [];
341
+ renderers.set(name, arr);
342
+ }
343
+ arr.push(render);
344
+ set({});
345
+ return () => {
346
+ const index = arr.indexOf(render);
347
+ if (index !== -1) {
348
+ arr.splice(index, 1);
349
+ }
350
+ if (index === arr.length) {
351
+ set({});
352
+ }
353
+ };
354
+ }
355
+ });
356
+ });
357
+
358
+ // src/context/providers/ThreadProvider.tsx
253
359
  var import_react11 = require("react");
360
+
361
+ // src/context/stores/Composer.ts
362
+ var import_zustand3 = require("zustand");
363
+
364
+ // src/context/stores/BaseComposer.ts
365
+ var makeBaseComposer = (set) => ({
366
+ value: "",
367
+ setValue: (value) => {
368
+ set({ value });
369
+ }
370
+ });
371
+
372
+ // src/context/stores/Composer.ts
373
+ var makeComposerStore = (useThread, useThreadActions) => {
374
+ const focusListeners = /* @__PURE__ */ new Set();
375
+ return (0, import_zustand3.create)()((set, get, store) => {
376
+ return {
377
+ ...makeBaseComposer(set, get, store),
378
+ isEditing: true,
379
+ send: () => {
380
+ const { setValue, value } = get();
381
+ setValue("");
382
+ useThreadActions.getState().append({
383
+ parentId: useThread.getState().messages.at(-1)?.id ?? null,
384
+ role: "user",
385
+ content: [{ type: "text", text: value }]
386
+ });
387
+ },
388
+ cancel: () => {
389
+ const thread = useThread.getState();
390
+ if (!thread.isRunning) return false;
391
+ useThreadActions.getState().cancelRun();
392
+ return true;
393
+ },
394
+ focus: () => {
395
+ for (const listener of focusListeners) {
396
+ listener();
397
+ }
398
+ },
399
+ onFocus: (listener) => {
400
+ focusListeners.add(listener);
401
+ return () => {
402
+ focusListeners.delete(listener);
403
+ };
404
+ }
405
+ };
406
+ });
407
+ };
408
+
409
+ // src/context/stores/Thread.ts
410
+ var import_zustand4 = require("zustand");
411
+ var makeThreadStore = (runtimeRef) => {
412
+ return (0, import_zustand4.create)(() => ({
413
+ messages: runtimeRef.current.messages,
414
+ isRunning: runtimeRef.current.isRunning
415
+ }));
416
+ };
417
+
418
+ // src/context/stores/ThreadViewport.tsx
419
+ var import_zustand5 = require("zustand");
420
+ var makeThreadViewportStore = () => {
421
+ const scrollToBottomListeners = /* @__PURE__ */ new Set();
422
+ return (0, import_zustand5.create)(() => ({
423
+ isAtBottom: true,
424
+ scrollToBottom: () => {
425
+ for (const listener of scrollToBottomListeners) {
426
+ listener();
427
+ }
428
+ },
429
+ onScrollToBottom: (callback) => {
430
+ scrollToBottomListeners.add(callback);
431
+ return () => {
432
+ scrollToBottomListeners.delete(callback);
433
+ };
434
+ }
435
+ }));
436
+ };
437
+
438
+ // src/context/stores/ThreadActions.ts
439
+ var import_zustand6 = require("zustand");
440
+ var makeThreadActionStore = (runtimeRef) => {
441
+ return (0, import_zustand6.create)(
442
+ () => Object.freeze({
443
+ getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
444
+ switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
445
+ startRun: (parentId) => runtimeRef.current.startRun(parentId),
446
+ append: (message) => runtimeRef.current.append(message),
447
+ cancelRun: () => runtimeRef.current.cancelRun(),
448
+ addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
449
+ })
450
+ );
451
+ };
452
+
453
+ // src/context/providers/ThreadProvider.tsx
454
+ var import_jsx_runtime = require("react/jsx-runtime");
455
+ var ThreadProvider = ({
456
+ children,
457
+ runtime
458
+ }) => {
459
+ const runtimeRef = (0, import_react11.useRef)(runtime);
460
+ (0, import_react11.useInsertionEffect)(() => {
461
+ runtimeRef.current = runtime;
462
+ });
463
+ const [context] = (0, import_react11.useState)(() => {
464
+ const useThread = makeThreadStore(runtimeRef);
465
+ const useThreadActions = makeThreadActionStore(runtimeRef);
466
+ const useViewport = makeThreadViewportStore();
467
+ const useComposer = makeComposerStore(useThread, useThreadActions);
468
+ return {
469
+ useThread,
470
+ useThreadActions,
471
+ useComposer,
472
+ useViewport
473
+ };
474
+ });
475
+ (0, import_react11.useEffect)(() => {
476
+ const onRuntimeUpdate = () => {
477
+ context.useThread.setState(
478
+ Object.freeze({
479
+ messages: runtimeRef.current.messages,
480
+ isRunning: runtimeRef.current.isRunning
481
+ }),
482
+ true
483
+ );
484
+ };
485
+ onRuntimeUpdate();
486
+ return runtime.subscribe(onRuntimeUpdate);
487
+ }, [context, runtime]);
488
+ const RuntimeSynchronizer = runtime.unstable_synchronizer;
489
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThreadContext.Provider, { value: context, children: [
490
+ RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuntimeSynchronizer, {}),
491
+ children
492
+ ] });
493
+ };
494
+
495
+ // src/context/providers/AssistantProvider.tsx
496
+ var import_jsx_runtime2 = require("react/jsx-runtime");
497
+ var AssistantProvider = ({ children, runtime }) => {
498
+ const runtimeRef = (0, import_react12.useRef)(runtime);
499
+ (0, import_react12.useInsertionEffect)(() => {
500
+ runtimeRef.current = runtime;
501
+ });
502
+ const [context] = (0, import_react12.useState)(() => {
503
+ const useModelConfig = makeAssistantModelConfigStore();
504
+ const useToolUIs = makeAssistantToolUIsStore();
505
+ return { useModelConfig, useToolUIs };
506
+ });
507
+ const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
508
+ (0, import_react12.useEffect)(() => {
509
+ return runtime.registerModelConfigProvider(getModelCOnfig);
510
+ }, [runtime, getModelCOnfig]);
511
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThreadProvider, { runtime, children }) });
512
+ };
513
+
514
+ // src/context/providers/AssistantRuntimeProvider.tsx
515
+ var import_jsx_runtime3 = require("react/jsx-runtime");
516
+ var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
517
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AssistantProvider, { runtime, children });
518
+ };
519
+ var AssistantRuntimeProvider = (0, import_react13.memo)(AssistantRuntimeProviderImpl);
520
+
521
+ // src/context/react/ComposerContext.ts
522
+ var import_react14 = require("react");
254
523
  var useComposerContext = () => {
255
524
  const { useComposer } = useThreadContext();
256
- const { useEditComposer } = (0, import_react11.useContext)(MessageContext) ?? {};
257
- return (0, import_react11.useMemo)(
525
+ const { useEditComposer } = (0, import_react14.useContext)(MessageContext) ?? {};
526
+ return (0, import_react14.useMemo)(
258
527
  () => ({
259
528
  useComposer: useEditComposer ?? useComposer,
260
529
  type: useEditComposer ? "edit" : "new"
@@ -264,12 +533,12 @@ var useComposerContext = () => {
264
533
  };
265
534
 
266
535
  // src/context/react/ContentPartContext.ts
267
- var import_react12 = require("react");
268
- var ContentPartContext = (0, import_react12.createContext)(
536
+ var import_react15 = require("react");
537
+ var ContentPartContext = (0, import_react15.createContext)(
269
538
  null
270
539
  );
271
540
  var useContentPartContext = () => {
272
- const context = (0, import_react12.useContext)(ContentPartContext);
541
+ const context = (0, import_react15.useContext)(ContentPartContext);
273
542
  if (!context)
274
543
  throw new Error(
275
544
  "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
@@ -281,7 +550,7 @@ var useContentPartContext = () => {
281
550
  var useComposerCancel = () => {
282
551
  const { useComposer } = useComposerContext();
283
552
  const disabled = useComposer((c) => !c.isEditing);
284
- const callback = (0, import_react13.useCallback)(() => {
553
+ const callback = (0, import_react16.useCallback)(() => {
285
554
  const { cancel } = useComposer.getState();
286
555
  cancel();
287
556
  }, [useComposer]);
@@ -300,12 +569,12 @@ var useComposerIf = (props) => {
300
569
  };
301
570
 
302
571
  // src/primitive-hooks/composer/useComposerSend.tsx
303
- var import_react14 = require("react");
572
+ var import_react17 = require("react");
304
573
  var useComposerSend = () => {
305
574
  const { useViewport, useComposer: useNewComposer } = useThreadContext();
306
575
  const { useComposer } = useComposerContext();
307
576
  const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
308
- const callback = (0, import_react14.useCallback)(() => {
577
+ const callback = (0, import_react17.useCallback)(() => {
309
578
  const composerState = useComposer.getState();
310
579
  if (!composerState.isEditing) return;
311
580
  composerState.send();
@@ -401,11 +670,11 @@ var useThreadEmpty = () => {
401
670
  };
402
671
 
403
672
  // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
404
- var import_react15 = require("react");
673
+ var import_react18 = require("react");
405
674
  var useThreadScrollToBottom = () => {
406
675
  const { useComposer, useViewport } = useThreadContext();
407
676
  const isAtBottom = useViewport((s) => s.isAtBottom);
408
- const handleScrollToBottom = (0, import_react15.useCallback)(() => {
677
+ const handleScrollToBottom = (0, import_react18.useCallback)(() => {
409
678
  useViewport.getState().scrollToBottom();
410
679
  useComposer.getState().focus();
411
680
  }, [useViewport, useComposer]);
@@ -414,14 +683,14 @@ var useThreadScrollToBottom = () => {
414
683
  };
415
684
 
416
685
  // src/primitive-hooks/thread/useThreadSuggestion.tsx
417
- var import_react16 = require("react");
686
+ var import_react19 = require("react");
418
687
  var useThreadSuggestion = ({
419
688
  prompt,
420
689
  autoSend
421
690
  }) => {
422
691
  const { useThread, useComposer } = useThreadContext();
423
692
  const disabled = useThread((t) => t.isRunning);
424
- const callback = (0, import_react16.useCallback)(() => {
693
+ const callback = (0, import_react19.useCallback)(() => {
425
694
  const thread = useThread.getState();
426
695
  const composer = useComposer.getState();
427
696
  composer.setValue(prompt);
@@ -444,8 +713,8 @@ __export(actionBar_exports, {
444
713
 
445
714
  // src/primitives/actionBar/ActionBarRoot.tsx
446
715
  var import_react_primitive = require("@radix-ui/react-primitive");
447
- var import_react17 = require("react");
448
- var import_jsx_runtime = require("react/jsx-runtime");
716
+ var import_react20 = require("react");
717
+ var import_jsx_runtime4 = require("react/jsx-runtime");
449
718
  var useActionBarFloatStatus = ({
450
719
  hideWhenRunning,
451
720
  autohide,
@@ -466,14 +735,14 @@ var useActionBarFloatStatus = ({
466
735
  }
467
736
  );
468
737
  };
469
- var ActionBarRoot = (0, import_react17.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
738
+ var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
470
739
  const hideAndfloatStatus = useActionBarFloatStatus({
471
740
  hideWhenRunning,
472
741
  autohide,
473
742
  autohideFloat
474
743
  });
475
744
  if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
476
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
745
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
477
746
  import_react_primitive.Primitive.div,
478
747
  {
479
748
  ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
@@ -487,12 +756,12 @@ ActionBarRoot.displayName = "ActionBarRoot";
487
756
  // src/utils/createActionButton.tsx
488
757
  var import_primitive = require("@radix-ui/primitive");
489
758
  var import_react_primitive2 = require("@radix-ui/react-primitive");
490
- var import_react18 = require("react");
491
- var import_jsx_runtime2 = require("react/jsx-runtime");
759
+ var import_react21 = require("react");
760
+ var import_jsx_runtime5 = require("react/jsx-runtime");
492
761
  var createActionButton = (displayName, useActionButton) => {
493
- const ActionButton = (0, import_react18.forwardRef)((props, forwardedRef) => {
762
+ const ActionButton = (0, import_react21.forwardRef)((props, forwardedRef) => {
494
763
  const callback = useActionButton(props);
495
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
764
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
496
765
  import_react_primitive2.Primitive.button,
497
766
  {
498
767
  type: "button",
@@ -536,17 +805,17 @@ __export(assistantModal_exports, {
536
805
  });
537
806
 
538
807
  // src/primitives/assistantModal/AssistantModalRoot.tsx
539
- var import_react20 = require("react");
808
+ var import_react23 = require("react");
540
809
  var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
541
810
  var import_primitive2 = require("@radix-ui/primitive");
542
811
 
543
812
  // src/utils/hooks/useOnComposerFocus.tsx
544
813
  var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
545
- var import_react19 = require("react");
814
+ var import_react22 = require("react");
546
815
  var useOnComposerFocus = (callback) => {
547
816
  const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
548
817
  const { useComposer } = useThreadContext();
549
- (0, import_react19.useEffect)(() => {
818
+ (0, import_react22.useEffect)(() => {
550
819
  return useComposer.getState().onFocus(() => {
551
820
  callbackRef();
552
821
  });
@@ -554,10 +823,10 @@ var useOnComposerFocus = (callback) => {
554
823
  };
555
824
 
556
825
  // src/primitives/assistantModal/AssistantModalRoot.tsx
557
- var import_jsx_runtime3 = require("react/jsx-runtime");
826
+ var import_jsx_runtime6 = require("react/jsx-runtime");
558
827
  var usePopoverScope = PopoverPrimitive.createPopoverScope();
559
828
  var useAssistantModalOpenState = (defaultOpen = false) => {
560
- const state = (0, import_react20.useState)(defaultOpen);
829
+ const state = (0, import_react23.useState)(defaultOpen);
561
830
  const [, setOpen] = state;
562
831
  useOnComposerFocus(() => {
563
832
  setOpen(true);
@@ -573,7 +842,7 @@ var AssistantModalRoot = ({
573
842
  }) => {
574
843
  const scope = usePopoverScope(__scopeAssistantModal);
575
844
  const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
576
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
845
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
577
846
  PopoverPrimitive.Root,
578
847
  {
579
848
  ...scope,
@@ -586,23 +855,23 @@ var AssistantModalRoot = ({
586
855
  AssistantModalRoot.displayName = "AssistantModalRoot";
587
856
 
588
857
  // src/primitives/assistantModal/AssistantModalTrigger.tsx
589
- var import_react21 = require("react");
858
+ var import_react24 = require("react");
590
859
  var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
591
- var import_jsx_runtime4 = require("react/jsx-runtime");
592
- var AssistantModalTrigger = (0, import_react21.forwardRef)(
860
+ var import_jsx_runtime7 = require("react/jsx-runtime");
861
+ var AssistantModalTrigger = (0, import_react24.forwardRef)(
593
862
  ({ __scopeAssistantModal, ...rest }, ref) => {
594
863
  const scope = usePopoverScope(__scopeAssistantModal);
595
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverPrimitive2.Trigger, { ...scope, ...rest, ref });
864
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive2.Trigger, { ...scope, ...rest, ref });
596
865
  }
597
866
  );
598
867
  AssistantModalTrigger.displayName = "AssistantModalTrigger";
599
868
 
600
869
  // src/primitives/assistantModal/AssistantModalContent.tsx
601
- var import_react22 = require("react");
870
+ var import_react25 = require("react");
602
871
  var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"));
603
872
  var import_primitive3 = require("@radix-ui/primitive");
604
- var import_jsx_runtime5 = require("react/jsx-runtime");
605
- var AssistantModalContent = (0, import_react22.forwardRef)(
873
+ var import_jsx_runtime8 = require("react/jsx-runtime");
874
+ var AssistantModalContent = (0, import_react25.forwardRef)(
606
875
  ({
607
876
  __scopeAssistantModal,
608
877
  side,
@@ -612,7 +881,7 @@ var AssistantModalContent = (0, import_react22.forwardRef)(
612
881
  ...props
613
882
  }, forwardedRef) => {
614
883
  const scope = usePopoverScope(__scopeAssistantModal);
615
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopoverPrimitive3.Portal, { ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
884
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverPrimitive3.Portal, { ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
616
885
  PopoverPrimitive3.Content,
617
886
  {
618
887
  ...scope,
@@ -653,22 +922,22 @@ var BranchPickerPrevious = createActionButton(
653
922
  );
654
923
 
655
924
  // src/primitives/branchPicker/BranchPickerCount.tsx
656
- var import_jsx_runtime6 = require("react/jsx-runtime");
925
+ var import_jsx_runtime9 = require("react/jsx-runtime");
657
926
  var BranchPickerCount = () => {
658
927
  const branchCount = useBranchPickerCount();
659
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: branchCount });
928
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: branchCount });
660
929
  };
661
930
 
662
931
  // src/primitives/branchPicker/BranchPickerNumber.tsx
663
- var import_jsx_runtime7 = require("react/jsx-runtime");
932
+ var import_jsx_runtime10 = require("react/jsx-runtime");
664
933
  var BranchPickerNumber = () => {
665
934
  const branchNumber = useBranchPickerNumber();
666
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: branchNumber });
935
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: branchNumber });
667
936
  };
668
937
 
669
938
  // src/primitives/branchPicker/BranchPickerRoot.tsx
670
939
  var import_react_primitive6 = require("@radix-ui/react-primitive");
671
- var import_react28 = require("react");
940
+ var import_react31 = require("react");
672
941
 
673
942
  // src/primitives/message/index.ts
674
943
  var message_exports = {};
@@ -682,9 +951,9 @@ __export(message_exports, {
682
951
  // src/primitives/message/MessageRoot.tsx
683
952
  var import_primitive4 = require("@radix-ui/primitive");
684
953
  var import_react_primitive3 = require("@radix-ui/react-primitive");
685
- var import_react23 = require("react");
686
- var import_jsx_runtime8 = require("react/jsx-runtime");
687
- var MessageRoot = (0, import_react23.forwardRef)(
954
+ var import_react26 = require("react");
955
+ var import_jsx_runtime11 = require("react/jsx-runtime");
956
+ var MessageRoot = (0, import_react26.forwardRef)(
688
957
  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
689
958
  const { useMessageUtils } = useMessageContext();
690
959
  const setIsHovering = useMessageUtils((s) => s.setIsHovering);
@@ -694,7 +963,7 @@ var MessageRoot = (0, import_react23.forwardRef)(
694
963
  const handleMouseLeave = () => {
695
964
  setIsHovering(false);
696
965
  };
697
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
966
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
698
967
  import_react_primitive3.Primitive.div,
699
968
  {
700
969
  ...rest,
@@ -714,12 +983,12 @@ var MessageIf = ({ children, ...query }) => {
714
983
  };
715
984
 
716
985
  // src/primitives/message/MessageContent.tsx
717
- var import_react26 = require("react");
986
+ var import_react29 = require("react");
718
987
 
719
988
  // src/context/providers/ContentPartProvider.tsx
720
- var import_react24 = require("react");
721
- var import_zustand = require("zustand");
722
- var import_jsx_runtime9 = require("react/jsx-runtime");
989
+ var import_react27 = require("react");
990
+ var import_zustand7 = require("zustand");
991
+ var import_jsx_runtime12 = require("react/jsx-runtime");
723
992
  var syncContentPart = ({ message }, useContentPart, partIndex) => {
724
993
  const part = message.content[partIndex];
725
994
  if (!part) return;
@@ -736,14 +1005,14 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
736
1005
  };
737
1006
  var useContentPartContext2 = (partIndex) => {
738
1007
  const { useMessage } = useMessageContext();
739
- const [context] = (0, import_react24.useState)(() => {
740
- const useContentPart = (0, import_zustand.create)(
1008
+ const [context] = (0, import_react27.useState)(() => {
1009
+ const useContentPart = (0, import_zustand7.create)(
741
1010
  () => ({})
742
1011
  );
743
1012
  syncContentPart(useMessage.getState(), useContentPart, partIndex);
744
1013
  return { useContentPart };
745
1014
  });
746
- (0, import_react24.useEffect)(() => {
1015
+ (0, import_react27.useEffect)(() => {
747
1016
  syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
748
1017
  return useMessage.subscribe((message) => {
749
1018
  syncContentPart(message, context.useContentPart, partIndex);
@@ -756,7 +1025,7 @@ var ContentPartProvider = ({
756
1025
  children
757
1026
  }) => {
758
1027
  const context = useContentPartContext2(partIndex);
759
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ContentPartContext.Provider, { value: context, children });
1028
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartContext.Provider, { value: context, children });
760
1029
  };
761
1030
 
762
1031
  // src/primitives/contentPart/ContentPartDisplay.tsx
@@ -773,29 +1042,29 @@ var ContentPartInProgressIndicator = () => {
773
1042
 
774
1043
  // src/primitives/contentPart/ContentPartText.tsx
775
1044
  var import_react_primitive4 = require("@radix-ui/react-primitive");
776
- var import_react25 = require("react");
777
- var import_jsx_runtime10 = require("react/jsx-runtime");
778
- var ContentPartText = (0, import_react25.forwardRef)((props, forwardedRef) => {
1045
+ var import_react28 = require("react");
1046
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1047
+ var ContentPartText = (0, import_react28.forwardRef)((props, forwardedRef) => {
779
1048
  const text = useContentPartText();
780
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_primitive4.Primitive.span, { ...props, ref: forwardedRef, children: text });
1049
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive4.Primitive.p, { ...props, ref: forwardedRef, children: text });
781
1050
  });
782
1051
  ContentPartText.displayName = "ContentPartText";
783
1052
 
784
1053
  // src/primitives/message/MessageContent.tsx
785
- var import_jsx_runtime11 = require("react/jsx-runtime");
1054
+ var import_jsx_runtime14 = require("react/jsx-runtime");
786
1055
  var defaultComponents = {
787
- Text: () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
788
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentPartText, {}),
789
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentPartInProgressIndicator, {})
1056
+ Text: () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
1057
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartText, { style: { whiteSpace: "pre-line" } }),
1058
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartInProgressIndicator, {})
790
1059
  ] }),
791
1060
  Image: () => null,
792
- UI: () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentPartDisplay, {}),
1061
+ UI: () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartDisplay, {}),
793
1062
  tools: {
794
1063
  Fallback: (props) => {
795
1064
  const { useToolUIs } = useAssistantContext();
796
1065
  const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
797
1066
  if (!Render) return null;
798
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Render, { ...props });
1067
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Render, { ...props });
799
1068
  }
800
1069
  }
801
1070
  };
@@ -814,15 +1083,15 @@ var MessageContentPartComponent = ({
814
1083
  const type = part.type;
815
1084
  switch (type) {
816
1085
  case "text":
817
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { part, status });
1086
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { part, status });
818
1087
  case "image":
819
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Image, { part, status });
1088
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image, { part, status });
820
1089
  case "ui":
821
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UI, { part, status });
1090
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UI, { part, status });
822
1091
  case "tool-call": {
823
1092
  const Tool = by_name[part.toolName] || Fallback;
824
1093
  const addResult = (result) => addToolResult(part.toolCallId, result);
825
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tool, { part, status, addResult });
1094
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tool, { part, status, addResult });
826
1095
  }
827
1096
  default:
828
1097
  throw new Error(`Unknown content part type: ${type}`);
@@ -832,9 +1101,9 @@ var MessageContentPartImpl = ({
832
1101
  partIndex,
833
1102
  components
834
1103
  }) => {
835
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageContentPartComponent, { components }) });
1104
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageContentPartComponent, { components }) });
836
1105
  };
837
- var MessageContentPart = (0, import_react26.memo)(
1106
+ var MessageContentPart = (0, import_react29.memo)(
838
1107
  MessageContentPartImpl,
839
1108
  (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
840
1109
  );
@@ -843,7 +1112,7 @@ var MessageContent = ({ components }) => {
843
1112
  const contentLength = useMessage((s) => s.message.content.length);
844
1113
  return new Array(contentLength).fill(null).map((_, idx) => {
845
1114
  const partIndex = idx;
846
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1115
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
847
1116
  MessageContentPart,
848
1117
  {
849
1118
  partIndex,
@@ -856,21 +1125,21 @@ var MessageContent = ({ components }) => {
856
1125
 
857
1126
  // src/primitives/message/MessageInProgress.tsx
858
1127
  var import_react_primitive5 = require("@radix-ui/react-primitive");
859
- var import_react27 = require("react");
860
- var import_jsx_runtime12 = require("react/jsx-runtime");
861
- var MessageInProgress = (0, import_react27.forwardRef)((props, ref) => {
1128
+ var import_react30 = require("react");
1129
+ var import_jsx_runtime15 = require("react/jsx-runtime");
1130
+ var MessageInProgress = (0, import_react30.forwardRef)((props, ref) => {
862
1131
  const { useMessageUtils } = useMessageContext();
863
- (0, import_react27.useMemo)(() => {
864
- useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_primitive5.Primitive.span, { ...props, ref }));
1132
+ (0, import_react30.useMemo)(() => {
1133
+ useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive5.Primitive.span, { ...props, ref }));
865
1134
  }, [useMessageUtils, props, ref]);
866
1135
  return null;
867
1136
  });
868
1137
  MessageInProgress.displayName = "MessageInProgress";
869
1138
 
870
1139
  // src/primitives/branchPicker/BranchPickerRoot.tsx
871
- var import_jsx_runtime13 = require("react/jsx-runtime");
872
- var BranchPickerRoot = (0, import_react28.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
873
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive6.Primitive.div, { ...rest, ref }) });
1140
+ var import_jsx_runtime16 = require("react/jsx-runtime");
1141
+ var BranchPickerRoot = (0, import_react31.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
1142
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive6.Primitive.div, { ...rest, ref }) });
874
1143
  });
875
1144
  BranchPickerRoot.displayName = "BranchPickerRoot";
876
1145
 
@@ -887,9 +1156,9 @@ __export(composer_exports, {
887
1156
  // src/primitives/composer/ComposerRoot.tsx
888
1157
  var import_primitive5 = require("@radix-ui/primitive");
889
1158
  var import_react_primitive7 = require("@radix-ui/react-primitive");
890
- var import_react29 = require("react");
891
- var import_jsx_runtime14 = require("react/jsx-runtime");
892
- var ComposerRoot = (0, import_react29.forwardRef)(
1159
+ var import_react32 = require("react");
1160
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1161
+ var ComposerRoot = (0, import_react32.forwardRef)(
893
1162
  ({ onSubmit, ...rest }, forwardedRef) => {
894
1163
  const send = useComposerSend();
895
1164
  const handleSubmit = (e) => {
@@ -897,7 +1166,7 @@ var ComposerRoot = (0, import_react29.forwardRef)(
897
1166
  e.preventDefault();
898
1167
  send();
899
1168
  };
900
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1169
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
901
1170
  import_react_primitive7.Primitive.form,
902
1171
  {
903
1172
  ...rest,
@@ -913,11 +1182,11 @@ ComposerRoot.displayName = "ComposerRoot";
913
1182
  var import_primitive6 = require("@radix-ui/primitive");
914
1183
  var import_react_compose_refs = require("@radix-ui/react-compose-refs");
915
1184
  var import_react_slot = require("@radix-ui/react-slot");
916
- var import_react30 = require("react");
1185
+ var import_react33 = require("react");
917
1186
  var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
918
1187
  var import_react_use_escape_keydown = require("@radix-ui/react-use-escape-keydown");
919
- var import_jsx_runtime15 = require("react/jsx-runtime");
920
- var ComposerInput = (0, import_react30.forwardRef)(
1188
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1189
+ var ComposerInput = (0, import_react33.forwardRef)(
921
1190
  ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
922
1191
  const { useThread } = useThreadContext();
923
1192
  const { useComposer, type } = useComposerContext();
@@ -926,7 +1195,7 @@ var ComposerInput = (0, import_react30.forwardRef)(
926
1195
  return c.value;
927
1196
  });
928
1197
  const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
929
- const textareaRef = (0, import_react30.useRef)(null);
1198
+ const textareaRef = (0, import_react33.useRef)(null);
930
1199
  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, textareaRef);
931
1200
  (0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
932
1201
  const composer = useComposer.getState();
@@ -945,7 +1214,7 @@ var ComposerInput = (0, import_react30.forwardRef)(
945
1214
  }
946
1215
  };
947
1216
  const autoFocusEnabled = autoFocus && !disabled;
948
- const focus = (0, import_react30.useCallback)(() => {
1217
+ const focus = (0, import_react33.useCallback)(() => {
949
1218
  const textarea = textareaRef.current;
950
1219
  if (!textarea || !autoFocusEnabled) return;
951
1220
  textarea.focus({ preventScroll: true });
@@ -954,13 +1223,13 @@ var ComposerInput = (0, import_react30.forwardRef)(
954
1223
  textareaRef.current.value.length
955
1224
  );
956
1225
  }, [autoFocusEnabled]);
957
- (0, import_react30.useEffect)(() => focus(), [focus]);
1226
+ (0, import_react33.useEffect)(() => focus(), [focus]);
958
1227
  useOnComposerFocus(() => {
959
1228
  if (type === "new") {
960
1229
  focus();
961
1230
  }
962
1231
  });
963
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1232
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
964
1233
  Component,
965
1234
  {
966
1235
  value,
@@ -980,14 +1249,14 @@ var ComposerInput = (0, import_react30.forwardRef)(
980
1249
  ComposerInput.displayName = "ComposerInput";
981
1250
 
982
1251
  // src/primitives/composer/ComposerSend.tsx
983
- var import_react31 = require("react");
1252
+ var import_react34 = require("react");
984
1253
  var import_react_primitive8 = require("@radix-ui/react-primitive");
985
- var import_jsx_runtime16 = require("react/jsx-runtime");
986
- var ComposerSend = (0, import_react31.forwardRef)(
1254
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1255
+ var ComposerSend = (0, import_react34.forwardRef)(
987
1256
  ({ disabled, ...rest }, ref) => {
988
1257
  const { useComposer } = useComposerContext();
989
1258
  const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
990
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1259
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
991
1260
  import_react_primitive8.Primitive.button,
992
1261
  {
993
1262
  type: "submit",
@@ -1023,11 +1292,11 @@ __export(contentPart_exports, {
1023
1292
 
1024
1293
  // src/primitives/contentPart/ContentPartImage.tsx
1025
1294
  var import_react_primitive9 = require("@radix-ui/react-primitive");
1026
- var import_react32 = require("react");
1027
- var import_jsx_runtime17 = require("react/jsx-runtime");
1028
- var ContentPartImage = (0, import_react32.forwardRef)((props, forwardedRef) => {
1295
+ var import_react35 = require("react");
1296
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1297
+ var ContentPartImage = (0, import_react35.forwardRef)((props, forwardedRef) => {
1029
1298
  const image = useContentPartImage();
1030
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_primitive9.Primitive.img, { src: image, ...props, ref: forwardedRef });
1299
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_primitive9.Primitive.img, { src: image, ...props, ref: forwardedRef });
1031
1300
  });
1032
1301
  ContentPartImage.displayName = "ContentPartImage";
1033
1302
 
@@ -1045,11 +1314,11 @@ __export(thread_exports, {
1045
1314
 
1046
1315
  // src/primitives/thread/ThreadRoot.tsx
1047
1316
  var import_react_primitive10 = require("@radix-ui/react-primitive");
1048
- var import_react33 = require("react");
1049
- var import_jsx_runtime18 = require("react/jsx-runtime");
1050
- var ThreadRoot = (0, import_react33.forwardRef)(
1317
+ var import_react36 = require("react");
1318
+ var import_jsx_runtime21 = require("react/jsx-runtime");
1319
+ var ThreadRoot = (0, import_react36.forwardRef)(
1051
1320
  (props, ref) => {
1052
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive10.Primitive.div, { ...props, ref });
1321
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_primitive10.Primitive.div, { ...props, ref });
1053
1322
  }
1054
1323
  );
1055
1324
  ThreadRoot.displayName = "ThreadRoot";
@@ -1069,21 +1338,21 @@ var ThreadIf = ({ children, ...query }) => {
1069
1338
  // src/primitives/thread/ThreadViewport.tsx
1070
1339
  var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
1071
1340
  var import_react_primitive11 = require("@radix-ui/react-primitive");
1072
- var import_react38 = require("react");
1341
+ var import_react41 = require("react");
1073
1342
 
1074
1343
  // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
1075
1344
  var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
1076
- var import_react37 = require("react");
1345
+ var import_react40 = require("react");
1077
1346
 
1078
1347
  // src/utils/hooks/useOnResizeContent.tsx
1079
1348
  var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
1080
- var import_react35 = require("react");
1349
+ var import_react38 = require("react");
1081
1350
 
1082
1351
  // src/utils/hooks/useManagedRef.ts
1083
- var import_react34 = require("react");
1352
+ var import_react37 = require("react");
1084
1353
  var useManagedRef = (callback) => {
1085
- const cleanupRef = (0, import_react34.useRef)();
1086
- const ref = (0, import_react34.useCallback)(
1354
+ const cleanupRef = (0, import_react37.useRef)();
1355
+ const ref = (0, import_react37.useCallback)(
1087
1356
  (el) => {
1088
1357
  if (cleanupRef.current) {
1089
1358
  cleanupRef.current();
@@ -1100,7 +1369,7 @@ var useManagedRef = (callback) => {
1100
1369
  // src/utils/hooks/useOnResizeContent.tsx
1101
1370
  var useOnResizeContent = (callback) => {
1102
1371
  const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
1103
- const refCallback = (0, import_react35.useCallback)(
1372
+ const refCallback = (0, import_react38.useCallback)(
1104
1373
  (el) => {
1105
1374
  const resizeObserver = new ResizeObserver(() => {
1106
1375
  callbackRef();
@@ -1137,11 +1406,11 @@ var useOnResizeContent = (callback) => {
1137
1406
 
1138
1407
  // src/utils/hooks/useOnScrollToBottom.tsx
1139
1408
  var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
1140
- var import_react36 = require("react");
1409
+ var import_react39 = require("react");
1141
1410
  var useOnScrollToBottom = (callback) => {
1142
1411
  const callbackRef = (0, import_react_use_callback_ref3.useCallbackRef)(callback);
1143
1412
  const { useViewport } = useThreadContext();
1144
- (0, import_react36.useEffect)(() => {
1413
+ (0, import_react39.useEffect)(() => {
1145
1414
  return useViewport.getState().onScrollToBottom(() => {
1146
1415
  callbackRef();
1147
1416
  });
@@ -1152,11 +1421,11 @@ var useOnScrollToBottom = (callback) => {
1152
1421
  var useThreadViewportAutoScroll = ({
1153
1422
  autoScroll = true
1154
1423
  }) => {
1155
- const divRef = (0, import_react37.useRef)(null);
1424
+ const divRef = (0, import_react40.useRef)(null);
1156
1425
  const { useViewport } = useThreadContext();
1157
- const firstRenderRef = (0, import_react37.useRef)(true);
1158
- const lastScrollTop = (0, import_react37.useRef)(0);
1159
- const isScrollingToBottomRef = (0, import_react37.useRef)(false);
1426
+ const firstRenderRef = (0, import_react40.useRef)(true);
1427
+ const lastScrollTop = (0, import_react40.useRef)(0);
1428
+ const isScrollingToBottomRef = (0, import_react40.useRef)(false);
1160
1429
  const scrollToBottom = () => {
1161
1430
  const div = divRef.current;
1162
1431
  if (!div || !autoScroll) return;
@@ -1202,39 +1471,29 @@ var useThreadViewportAutoScroll = ({
1202
1471
  };
1203
1472
 
1204
1473
  // src/primitives/thread/ThreadViewport.tsx
1205
- var import_jsx_runtime19 = require("react/jsx-runtime");
1206
- var ThreadViewport = (0, import_react38.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
1474
+ var import_jsx_runtime22 = require("react/jsx-runtime");
1475
+ var ThreadViewport = (0, import_react41.forwardRef)(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
1207
1476
  const autoScrollRef = useThreadViewportAutoScroll({
1208
1477
  autoScroll
1209
1478
  });
1210
1479
  const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, autoScrollRef);
1211
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref, children });
1480
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref, children });
1212
1481
  });
1213
1482
  ThreadViewport.displayName = "ThreadViewport";
1214
1483
 
1215
1484
  // src/primitives/thread/ThreadMessages.tsx
1216
- var import_react40 = require("react");
1485
+ var import_react43 = require("react");
1217
1486
 
1218
1487
  // src/context/providers/MessageProvider.tsx
1219
- var import_react39 = require("react");
1220
- var import_zustand4 = require("zustand");
1221
-
1222
- // src/context/stores/EditComposer.ts
1223
- var import_zustand2 = require("zustand");
1224
-
1225
- // src/context/stores/BaseComposer.ts
1226
- var makeBaseComposer = (set) => ({
1227
- value: "",
1228
- setValue: (value) => {
1229
- set({ value });
1230
- }
1231
- });
1488
+ var import_react42 = require("react");
1489
+ var import_zustand10 = require("zustand");
1232
1490
 
1233
1491
  // src/context/stores/EditComposer.ts
1492
+ var import_zustand8 = require("zustand");
1234
1493
  var makeEditComposerStore = ({
1235
1494
  onEdit,
1236
1495
  onSend
1237
- }) => (0, import_zustand2.create)()((set, get, store) => ({
1496
+ }) => (0, import_zustand8.create)()((set, get, store) => ({
1238
1497
  ...makeBaseComposer(set, get, store),
1239
1498
  isEditing: false,
1240
1499
  edit: () => {
@@ -1254,8 +1513,8 @@ var makeEditComposerStore = ({
1254
1513
  }));
1255
1514
 
1256
1515
  // src/context/stores/MessageUtils.ts
1257
- var import_zustand3 = require("zustand");
1258
- var makeMessageUtilsStore = () => (0, import_zustand3.create)((set) => ({
1516
+ var import_zustand9 = require("zustand");
1517
+ var makeMessageUtilsStore = () => (0, import_zustand9.create)((set) => ({
1259
1518
  inProgressIndicator: null,
1260
1519
  setInProgressIndicator: (value) => {
1261
1520
  set({ inProgressIndicator: value });
@@ -1271,7 +1530,7 @@ var makeMessageUtilsStore = () => (0, import_zustand3.create)((set) => ({
1271
1530
  }));
1272
1531
 
1273
1532
  // src/context/providers/MessageProvider.tsx
1274
- var import_jsx_runtime20 = require("react/jsx-runtime");
1533
+ var import_jsx_runtime23 = require("react/jsx-runtime");
1275
1534
  var getIsLast = (thread, message) => {
1276
1535
  return thread.messages[thread.messages.length - 1]?.id === message.id;
1277
1536
  };
@@ -1293,8 +1552,8 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
1293
1552
  };
1294
1553
  var useMessageContext2 = (messageIndex) => {
1295
1554
  const { useThread, useThreadActions } = useThreadContext();
1296
- const [context] = (0, import_react39.useState)(() => {
1297
- const useMessage = (0, import_zustand4.create)(() => ({}));
1555
+ const [context] = (0, import_react42.useState)(() => {
1556
+ const useMessage = (0, import_zustand10.create)(() => ({}));
1298
1557
  const useMessageUtils = makeMessageUtilsStore();
1299
1558
  const useEditComposer = makeEditComposerStore({
1300
1559
  onEdit: () => {
@@ -1330,7 +1589,7 @@ var useMessageContext2 = (messageIndex) => {
1330
1589
  );
1331
1590
  return { useMessage, useMessageUtils, useEditComposer };
1332
1591
  });
1333
- (0, import_react39.useEffect)(() => {
1592
+ (0, import_react42.useEffect)(() => {
1334
1593
  return useThread.subscribe((thread) => {
1335
1594
  syncMessage(
1336
1595
  thread,
@@ -1347,11 +1606,11 @@ var MessageProvider = ({
1347
1606
  children
1348
1607
  }) => {
1349
1608
  const context = useMessageContext2(messageIndex);
1350
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContext.Provider, { value: context, children });
1609
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MessageContext.Provider, { value: context, children });
1351
1610
  };
1352
1611
 
1353
1612
  // src/primitives/thread/ThreadMessages.tsx
1354
- var import_jsx_runtime21 = require("react/jsx-runtime");
1613
+ var import_jsx_runtime24 = require("react/jsx-runtime");
1355
1614
  var getComponents = (components) => {
1356
1615
  return {
1357
1616
  EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -1364,15 +1623,15 @@ var ThreadMessageImpl = ({
1364
1623
  components
1365
1624
  }) => {
1366
1625
  const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
1367
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(MessageProvider, { messageIndex, children: [
1368
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(MessageIf, { user: true, children: [
1369
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UserMessage, {}) }),
1370
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EditComposer, {}) })
1626
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MessageProvider, { messageIndex, children: [
1627
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MessageIf, { user: true, children: [
1628
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UserMessage, {}) }),
1629
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EditComposer, {}) })
1371
1630
  ] }),
1372
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantMessage, {}) })
1631
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantMessage, {}) })
1373
1632
  ] });
1374
1633
  };
1375
- var ThreadMessage = (0, import_react40.memo)(
1634
+ var ThreadMessage = (0, import_react43.memo)(
1376
1635
  ThreadMessageImpl,
1377
1636
  (prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
1378
1637
  );
@@ -1382,7 +1641,7 @@ var ThreadMessages = ({ components }) => {
1382
1641
  if (messagesLength === 0) return null;
1383
1642
  return new Array(messagesLength).fill(null).map((_, idx) => {
1384
1643
  const messageIndex = idx;
1385
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1644
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1386
1645
  ThreadMessage,
1387
1646
  {
1388
1647
  messageIndex,
@@ -1406,35 +1665,7 @@ var ThreadSuggestion = createActionButton(
1406
1665
  );
1407
1666
 
1408
1667
  // src/runtime/local/useLocalRuntime.tsx
1409
- var import_react41 = require("react");
1410
-
1411
- // src/utils/ModelConfigTypes.ts
1412
- var mergeModelConfigs = (configSet) => {
1413
- const configs = Array.from(configSet).map((c) => c()).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
1414
- return configs.reduce((acc, config) => {
1415
- if (config.system) {
1416
- if (acc.system) {
1417
- acc.system += `
1418
-
1419
- ${config.system}`;
1420
- } else {
1421
- acc.system = config.system;
1422
- }
1423
- }
1424
- if (config.tools) {
1425
- for (const [name, tool] of Object.entries(config.tools)) {
1426
- if (acc.tools?.[name]) {
1427
- throw new Error(
1428
- `You tried to define a tool with the name ${name}, but it already exists.`
1429
- );
1430
- }
1431
- if (!acc.tools) acc.tools = {};
1432
- acc.tools[name] = tool;
1433
- }
1434
- }
1435
- return acc;
1436
- }, {});
1437
- };
1668
+ var import_react44 = require("react");
1438
1669
 
1439
1670
  // src/runtime/utils/idUtils.tsx
1440
1671
  var import_non_secure = require("nanoid/non-secure");
@@ -1692,233 +1923,81 @@ var LocalRuntime = class {
1692
1923
 
1693
1924
  // src/runtime/local/useLocalRuntime.tsx
1694
1925
  var useLocalRuntime = (adapter) => {
1695
- const [runtime] = (0, import_react41.useState)(() => new LocalRuntime(adapter));
1696
- (0, import_react41.useInsertionEffect)(() => {
1926
+ const [runtime] = (0, import_react44.useState)(() => new LocalRuntime(adapter));
1927
+ (0, import_react44.useInsertionEffect)(() => {
1697
1928
  runtime.adapter = adapter;
1698
1929
  });
1699
1930
  return runtime;
1700
1931
  };
1701
1932
 
1702
- // src/context/providers/AssistantRuntimeProvider.tsx
1703
- var import_react44 = require("react");
1704
-
1705
- // src/context/providers/AssistantProvider.tsx
1706
- var import_react43 = require("react");
1707
-
1708
- // src/context/stores/AssistantModelConfig.ts
1709
- var import_zustand5 = require("zustand");
1710
-
1711
- // src/utils/ProxyConfigProvider.ts
1712
- var ProxyConfigProvider = class {
1713
- _providers = /* @__PURE__ */ new Set();
1714
- getModelConfig() {
1715
- return mergeModelConfigs(this._providers);
1716
- }
1717
- registerModelConfigProvider(provider) {
1718
- this._providers.add(provider);
1719
- return () => {
1720
- this._providers.delete(provider);
1721
- };
1722
- }
1723
- };
1724
-
1725
- // src/context/stores/AssistantModelConfig.ts
1726
- var makeAssistantModelConfigStore = () => (0, import_zustand5.create)(() => {
1727
- const proxy = new ProxyConfigProvider();
1728
- return Object.freeze({
1729
- getModelConfig: () => {
1730
- return proxy.getModelConfig();
1731
- },
1732
- registerModelConfigProvider: (provider) => {
1733
- return proxy.registerModelConfigProvider(provider);
1734
- }
1735
- });
1736
- });
1737
-
1738
- // src/context/stores/AssistantToolUIs.ts
1739
- var import_zustand6 = require("zustand");
1740
- var makeAssistantToolUIsStore = () => (0, import_zustand6.create)((set) => {
1741
- const renderers = /* @__PURE__ */ new Map();
1742
- return Object.freeze({
1743
- getToolUI: (name) => {
1744
- const arr = renderers.get(name);
1745
- const last = arr?.at(-1);
1746
- if (last) return last;
1747
- return null;
1748
- },
1749
- setToolUI: (name, render) => {
1750
- let arr = renderers.get(name);
1751
- if (!arr) {
1752
- arr = [];
1753
- renderers.set(name, arr);
1754
- }
1755
- arr.push(render);
1756
- set({});
1757
- return () => {
1758
- const index = arr.indexOf(render);
1759
- if (index !== -1) {
1760
- arr.splice(index, 1);
1761
- }
1762
- if (index === arr.length) {
1763
- set({});
1764
- }
1765
- };
1766
- }
1767
- });
1768
- });
1769
-
1770
- // src/context/providers/ThreadProvider.tsx
1771
- var import_react42 = require("react");
1772
-
1773
- // src/context/stores/Composer.ts
1774
- var import_zustand7 = require("zustand");
1775
- var makeComposerStore = (useThread, useThreadActions) => {
1776
- const focusListeners = /* @__PURE__ */ new Set();
1777
- return (0, import_zustand7.create)()((set, get, store) => {
1778
- return {
1779
- ...makeBaseComposer(set, get, store),
1780
- isEditing: true,
1781
- send: () => {
1782
- const { setValue, value } = get();
1783
- setValue("");
1784
- useThreadActions.getState().append({
1785
- parentId: useThread.getState().messages.at(-1)?.id ?? null,
1786
- role: "user",
1787
- content: [{ type: "text", text: value }]
1788
- });
1789
- },
1790
- cancel: () => {
1791
- const thread = useThread.getState();
1792
- if (!thread.isRunning) return false;
1793
- useThreadActions.getState().cancelRun();
1794
- return true;
1795
- },
1796
- focus: () => {
1797
- for (const listener of focusListeners) {
1798
- listener();
1799
- }
1800
- },
1801
- onFocus: (listener) => {
1802
- focusListeners.add(listener);
1803
- return () => {
1804
- focusListeners.delete(listener);
1805
- };
1933
+ // src/model-config/useAssistantTool.tsx
1934
+ var import_react45 = require("react");
1935
+ var useAssistantTool = (tool) => {
1936
+ const { useModelConfig, useToolUIs } = useAssistantContext();
1937
+ const registerModelConfigProvider = useModelConfig(
1938
+ (s) => s.registerModelConfigProvider
1939
+ );
1940
+ const setToolUI = useToolUIs((s) => s.setToolUI);
1941
+ (0, import_react45.useEffect)(() => {
1942
+ const { toolName, render, ...rest } = tool;
1943
+ const config = {
1944
+ tools: {
1945
+ [tool.toolName]: rest
1806
1946
  }
1807
1947
  };
1808
- });
1809
- };
1810
-
1811
- // src/context/stores/Thread.ts
1812
- var import_zustand8 = require("zustand");
1813
- var makeThreadStore = (runtimeRef) => {
1814
- return (0, import_zustand8.create)(() => ({
1815
- messages: runtimeRef.current.messages,
1816
- isRunning: runtimeRef.current.isRunning
1817
- }));
1948
+ const unsub1 = registerModelConfigProvider(() => config);
1949
+ const unsub2 = render ? setToolUI(toolName, render) : void 0;
1950
+ return () => {
1951
+ unsub1();
1952
+ unsub2?.();
1953
+ };
1954
+ }, [registerModelConfigProvider, setToolUI, tool]);
1818
1955
  };
1819
1956
 
1820
- // src/context/stores/ThreadViewport.tsx
1821
- var import_zustand9 = require("zustand");
1822
- var makeThreadViewportStore = () => {
1823
- const scrollToBottomListeners = /* @__PURE__ */ new Set();
1824
- return (0, import_zustand9.create)(() => ({
1825
- isAtBottom: true,
1826
- scrollToBottom: () => {
1827
- for (const listener of scrollToBottomListeners) {
1828
- listener();
1829
- }
1830
- },
1831
- onScrollToBottom: (callback) => {
1832
- scrollToBottomListeners.add(callback);
1833
- return () => {
1834
- scrollToBottomListeners.delete(callback);
1835
- };
1836
- }
1837
- }));
1957
+ // src/model-config/makeAssistantTool.tsx
1958
+ var makeAssistantTool = (tool) => {
1959
+ const Tool = () => {
1960
+ useAssistantTool(tool);
1961
+ return null;
1962
+ };
1963
+ return Tool;
1964
+ };
1965
+
1966
+ // src/model-config/useAssistantToolUI.tsx
1967
+ var import_react46 = require("react");
1968
+ var useAssistantToolUI = (tool) => {
1969
+ const { useToolUIs } = useAssistantContext();
1970
+ const setToolUI = useToolUIs((s) => s.setToolUI);
1971
+ (0, import_react46.useEffect)(() => {
1972
+ if (!tool) return;
1973
+ const { toolName, render } = tool;
1974
+ return setToolUI(toolName, render);
1975
+ }, [setToolUI, tool]);
1976
+ };
1977
+
1978
+ // src/model-config/makeAssistantToolUI.tsx
1979
+ var makeAssistantToolUI = (tool) => {
1980
+ const ToolUI = () => {
1981
+ useAssistantToolUI(tool);
1982
+ return null;
1983
+ };
1984
+ return ToolUI;
1838
1985
  };
1839
1986
 
1840
- // src/context/stores/ThreadActions.ts
1841
- var import_zustand10 = require("zustand");
1842
- var makeThreadActionStore = (runtimeRef) => {
1843
- return (0, import_zustand10.create)(
1844
- () => Object.freeze({
1845
- getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
1846
- switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
1847
- startRun: (parentId) => runtimeRef.current.startRun(parentId),
1848
- append: (message) => runtimeRef.current.append(message),
1849
- cancelRun: () => runtimeRef.current.cancelRun(),
1850
- addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
1851
- })
1987
+ // src/model-config/useAssistantInstructions.tsx
1988
+ var import_react47 = require("react");
1989
+ var useAssistantInstructions = (instruction) => {
1990
+ const { useModelConfig } = useAssistantContext();
1991
+ const registerModelConfigProvider = useModelConfig(
1992
+ (s) => s.registerModelConfigProvider
1852
1993
  );
1853
- };
1854
-
1855
- // src/context/providers/ThreadProvider.tsx
1856
- var import_jsx_runtime22 = require("react/jsx-runtime");
1857
- var ThreadProvider = ({
1858
- children,
1859
- runtime
1860
- }) => {
1861
- const runtimeRef = (0, import_react42.useRef)(runtime);
1862
- (0, import_react42.useInsertionEffect)(() => {
1863
- runtimeRef.current = runtime;
1864
- });
1865
- const [context] = (0, import_react42.useState)(() => {
1866
- const useThread = makeThreadStore(runtimeRef);
1867
- const useThreadActions = makeThreadActionStore(runtimeRef);
1868
- const useViewport = makeThreadViewportStore();
1869
- const useComposer = makeComposerStore(useThread, useThreadActions);
1870
- return {
1871
- useThread,
1872
- useThreadActions,
1873
- useComposer,
1874
- useViewport
1875
- };
1876
- });
1877
- (0, import_react42.useEffect)(() => {
1878
- const onRuntimeUpdate = () => {
1879
- context.useThread.setState(
1880
- Object.freeze({
1881
- messages: runtimeRef.current.messages,
1882
- isRunning: runtimeRef.current.isRunning
1883
- }),
1884
- true
1885
- );
1994
+ (0, import_react47.useEffect)(() => {
1995
+ const config = {
1996
+ system: instruction
1886
1997
  };
1887
- onRuntimeUpdate();
1888
- return runtime.subscribe(onRuntimeUpdate);
1889
- }, [context, runtime]);
1890
- const RuntimeSynchronizer = runtime.unstable_synchronizer;
1891
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ThreadContext.Provider, { value: context, children: [
1892
- RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RuntimeSynchronizer, {}),
1893
- children
1894
- ] });
1895
- };
1896
-
1897
- // src/context/providers/AssistantProvider.tsx
1898
- var import_jsx_runtime23 = require("react/jsx-runtime");
1899
- var AssistantProvider = ({ children, runtime }) => {
1900
- const runtimeRef = (0, import_react43.useRef)(runtime);
1901
- (0, import_react43.useInsertionEffect)(() => {
1902
- runtimeRef.current = runtime;
1903
- });
1904
- const [context] = (0, import_react43.useState)(() => {
1905
- const useModelConfig = makeAssistantModelConfigStore();
1906
- const useToolUIs = makeAssistantToolUIsStore();
1907
- return { useModelConfig, useToolUIs };
1908
- });
1909
- const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
1910
- (0, import_react43.useEffect)(() => {
1911
- return runtime.registerModelConfigProvider(getModelCOnfig);
1912
- }, [runtime, getModelCOnfig]);
1913
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ThreadProvider, { runtime, children }) });
1914
- };
1915
-
1916
- // src/context/providers/AssistantRuntimeProvider.tsx
1917
- var import_jsx_runtime24 = require("react/jsx-runtime");
1918
- var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
1919
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantProvider, { runtime, children });
1998
+ return registerModelConfigProvider(() => config);
1999
+ }, [registerModelConfigProvider, instruction]);
1920
2000
  };
1921
- var AssistantRuntimeProvider = (0, import_react44.memo)(AssistantRuntimeProviderImpl);
1922
2001
 
1923
2002
  // src/internal.ts
1924
2003
  var internal_exports = {};
@@ -1937,22 +2016,32 @@ __export(internal_exports, {
1937
2016
  INTERNAL,
1938
2017
  MessagePrimitive,
1939
2018
  ThreadPrimitive,
2019
+ makeAssistantTool,
2020
+ makeAssistantToolUI,
1940
2021
  useActionBarCopy,
1941
2022
  useActionBarEdit,
1942
2023
  useActionBarReload,
2024
+ useAssistantContext,
2025
+ useAssistantInstructions,
2026
+ useAssistantTool,
2027
+ useAssistantToolUI,
1943
2028
  useBranchPickerCount,
1944
2029
  useBranchPickerNext,
1945
2030
  useBranchPickerNumber,
1946
2031
  useBranchPickerPrevious,
1947
2032
  useComposerCancel,
2033
+ useComposerContext,
1948
2034
  useComposerIf,
1949
2035
  useComposerSend,
2036
+ useContentPartContext,
1950
2037
  useContentPartDisplay,
1951
2038
  useContentPartImage,
1952
2039
  useContentPartInProgressIndicator,
1953
2040
  useContentPartText,
1954
2041
  useLocalRuntime,
2042
+ useMessageContext,
1955
2043
  useMessageIf,
2044
+ useThreadContext,
1956
2045
  useThreadEmpty,
1957
2046
  useThreadIf,
1958
2047
  useThreadScrollToBottom,