@assistant-ui/react 0.7.64 → 0.7.65

Sign up to get free protection for your applications and to get access to all the features.
@@ -2,8 +2,7 @@ import { RefCallback } from "react";
2
2
  export declare namespace useThreadViewportAutoScroll {
3
3
  type Options = {
4
4
  autoScroll?: boolean | undefined;
5
- unstable_scrollToBottomOnRunStart?: boolean | undefined;
6
5
  };
7
6
  }
8
- export declare const useThreadViewportAutoScroll: <TElement extends HTMLElement>({ autoScroll, unstable_scrollToBottomOnRunStart, }: useThreadViewportAutoScroll.Options) => RefCallback<TElement>;
7
+ export declare const useThreadViewportAutoScroll: <TElement extends HTMLElement>({ autoScroll, }: useThreadViewportAutoScroll.Options) => RefCallback<TElement>;
9
8
  //# sourceMappingURL=useThreadViewportAutoScroll.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useThreadViewportAutoScroll.d.ts","sourceRoot":"","sources":["../../../src/primitives/thread/useThreadViewportAutoScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAqB,MAAM,OAAO,CAAC;AAUvD,yBAAiB,2BAA2B,CAAC;IAC3C,KAAY,OAAO,GAAG;QACpB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QACjC,iCAAiC,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;KACzD,CAAC;CACH;AAED,eAAO,MAAM,2BAA2B,GAAI,QAAQ,SAAS,WAAW,sDAGrE,2BAA2B,CAAC,OAAO,KAAG,WAAW,CAAC,QAAQ,CA6E5D,CAAC"}
1
+ {"version":3,"file":"useThreadViewportAutoScroll.d.ts","sourceRoot":"","sources":["../../../src/primitives/thread/useThreadViewportAutoScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAqB,MAAM,OAAO,CAAC;AAUvD,yBAAiB,2BAA2B,CAAC;IAC3C,KAAY,OAAO,GAAG;QACpB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;KAClC,CAAC;CACH;AAED,eAAO,MAAM,2BAA2B,GAAI,QAAQ,SAAS,WAAW,mBAErE,2BAA2B,CAAC,OAAO,KAAG,WAAW,CAAC,QAAQ,CA0E5D,CAAC"}
@@ -32,8 +32,7 @@ var import_useOnScrollToBottom = require("../../utils/hooks/useOnScrollToBottom.
32
32
  var import_useManagedRef = require("../../utils/hooks/useManagedRef.js");
33
33
  var import_ReadonlyStore = require("../../context/ReadonlyStore.js");
34
34
  var useThreadViewportAutoScroll = ({
35
- autoScroll = true,
36
- unstable_scrollToBottomOnRunStart = true
35
+ autoScroll = true
37
36
  }) => {
38
37
  const divRef = (0, import_react.useRef)(null);
39
38
  const threadViewportStore = (0, import_ThreadContext.useThreadViewportStore)();
@@ -75,15 +74,14 @@ var useThreadViewportAutoScroll = ({
75
74
  el.removeEventListener("scroll", handleScroll);
76
75
  };
77
76
  });
78
- const autoScrollRef = (0, import_react_compose_refs.useComposedRefs)(resizeRef, scrollRef, divRef);
79
77
  (0, import_useOnScrollToBottom.useOnScrollToBottom)(() => {
80
78
  scrollToBottom("auto");
81
79
  });
82
80
  const threadRuntime = (0, import_ThreadContext.useThreadRuntime)();
83
81
  (0, import_react.useEffect)(() => {
84
- if (!unstable_scrollToBottomOnRunStart) return void 0;
85
- return threadRuntime.unstable_on("run-start", focus);
86
- }, [unstable_scrollToBottomOnRunStart]);
82
+ return threadRuntime.unstable_on("run-start", () => scrollToBottom("auto"));
83
+ }, []);
84
+ const autoScrollRef = (0, import_react_compose_refs.useComposedRefs)(resizeRef, scrollRef, divRef);
87
85
  return autoScrollRef;
88
86
  };
89
87
  // Annotate the CommonJS export names for ESM import in node:
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/primitives/thread/useThreadViewportAutoScroll.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { RefCallback, useEffect, useRef } from \"react\";\nimport {\n useThreadRuntime,\n useThreadViewportStore,\n} from \"../../context/react/ThreadContext\";\nimport { useOnResizeContent } from \"../../utils/hooks/useOnResizeContent\";\nimport { useOnScrollToBottom } from \"../../utils/hooks/useOnScrollToBottom\";\nimport { useManagedRef } from \"../../utils/hooks/useManagedRef\";\nimport { writableStore } from \"../../context/ReadonlyStore\";\n\nexport namespace useThreadViewportAutoScroll {\n export type Options = {\n autoScroll?: boolean | undefined;\n unstable_scrollToBottomOnRunStart?: boolean | undefined;\n };\n}\n\nexport const useThreadViewportAutoScroll = <TElement extends HTMLElement>({\n autoScroll = true,\n unstable_scrollToBottomOnRunStart = true,\n}: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {\n const divRef = useRef<TElement>(null);\n\n const threadViewportStore = useThreadViewportStore();\n\n const lastScrollTop = useRef<number>(0);\n\n // bug: when ScrollToBottom's button changes its disabled state, the scroll stops\n // fix: delay the state change until the scroll is done\n const isScrollingToBottomRef = useRef(false);\n\n const scrollToBottom = (behavior: ScrollBehavior) => {\n const div = divRef.current;\n if (!div || !autoScroll) return;\n\n isScrollingToBottomRef.current = true;\n div.scrollTo({ top: div.scrollHeight, behavior });\n };\n\n const handleScroll = () => {\n const div = divRef.current;\n if (!div) return;\n\n const isAtBottom = threadViewportStore.getState().isAtBottom;\n const newIsAtBottom =\n div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed\n\n if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {\n // ignore scroll down\n } else {\n if (newIsAtBottom) {\n isScrollingToBottomRef.current = false;\n }\n\n if (newIsAtBottom !== isAtBottom) {\n writableStore(threadViewportStore).setState({\n isAtBottom: newIsAtBottom,\n });\n }\n }\n\n lastScrollTop.current = div.scrollTop;\n };\n\n const resizeRef = useOnResizeContent(() => {\n if (\n isScrollingToBottomRef.current ||\n threadViewportStore.getState().isAtBottom\n ) {\n scrollToBottom(\"instant\");\n }\n\n handleScroll();\n });\n\n const scrollRef = useManagedRef<HTMLElement>((el) => {\n el.addEventListener(\"scroll\", handleScroll);\n return () => {\n el.removeEventListener(\"scroll\", handleScroll);\n };\n });\n\n const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);\n\n useOnScrollToBottom(() => {\n scrollToBottom(\"auto\");\n });\n\n // autoscroll on run start\n const threadRuntime = useThreadRuntime();\n useEffect(() => {\n if (!unstable_scrollToBottomOnRunStart) return undefined;\n\n return threadRuntime.unstable_on(\"run-start\", focus);\n }, [unstable_scrollToBottomOnRunStart]);\n\n return autoScrollRef;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gCAAgC;AAChC,mBAA+C;AAC/C,2BAGO;AACP,gCAAmC;AACnC,iCAAoC;AACpC,2BAA8B;AAC9B,2BAA8B;AASvB,IAAM,8BAA8B,CAA+B;AAAA,EACxE,aAAa;AAAA,EACb,oCAAoC;AACtC,MAAkE;AAChE,QAAM,aAAS,qBAAiB,IAAI;AAEpC,QAAM,0BAAsB,6CAAuB;AAEnD,QAAM,oBAAgB,qBAAe,CAAC;AAItC,QAAM,6BAAyB,qBAAO,KAAK;AAE3C,QAAM,iBAAiB,CAAC,aAA6B;AACnD,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,OAAO,CAAC,WAAY;AAEzB,2BAAuB,UAAU;AACjC,QAAI,SAAS,EAAE,KAAK,IAAI,cAAc,SAAS,CAAC;AAAA,EAClD;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAK;AAEV,UAAM,aAAa,oBAAoB,SAAS,EAAE;AAClD,UAAM,gBACJ,IAAI,eAAe,IAAI,aAAa,IAAI,eAAe;AAEzD,QAAI,CAAC,iBAAiB,cAAc,UAAU,IAAI,WAAW;AAAA,IAE7D,OAAO;AACL,UAAI,eAAe;AACjB,+BAAuB,UAAU;AAAA,MACnC;AAEA,UAAI,kBAAkB,YAAY;AAChC,gDAAc,mBAAmB,EAAE,SAAS;AAAA,UAC1C,YAAY;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF;AAEA,kBAAc,UAAU,IAAI;AAAA,EAC9B;AAEA,QAAM,gBAAY,8CAAmB,MAAM;AACzC,QACE,uBAAuB,WACvB,oBAAoB,SAAS,EAAE,YAC/B;AACA,qBAAe,SAAS;AAAA,IAC1B;AAEA,iBAAa;AAAA,EACf,CAAC;AAED,QAAM,gBAAY,oCAA2B,CAAC,OAAO;AACnD,OAAG,iBAAiB,UAAU,YAAY;AAC1C,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,YAAY;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,QAAM,oBAAgB,2CAA0B,WAAW,WAAW,MAAM;AAE5E,sDAAoB,MAAM;AACxB,mBAAe,MAAM;AAAA,EACvB,CAAC;AAGD,QAAM,oBAAgB,uCAAiB;AACvC,8BAAU,MAAM;AACd,QAAI,CAAC,kCAAmC,QAAO;AAE/C,WAAO,cAAc,YAAY,aAAa,KAAK;AAAA,EACrD,GAAG,CAAC,iCAAiC,CAAC;AAEtC,SAAO;AACT;","names":[]}
1
+ {"version":3,"sources":["../../../src/primitives/thread/useThreadViewportAutoScroll.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { RefCallback, useEffect, useRef } from \"react\";\nimport {\n useThreadRuntime,\n useThreadViewportStore,\n} from \"../../context/react/ThreadContext\";\nimport { useOnResizeContent } from \"../../utils/hooks/useOnResizeContent\";\nimport { useOnScrollToBottom } from \"../../utils/hooks/useOnScrollToBottom\";\nimport { useManagedRef } from \"../../utils/hooks/useManagedRef\";\nimport { writableStore } from \"../../context/ReadonlyStore\";\n\nexport namespace useThreadViewportAutoScroll {\n export type Options = {\n autoScroll?: boolean | undefined;\n };\n}\n\nexport const useThreadViewportAutoScroll = <TElement extends HTMLElement>({\n autoScroll = true,\n}: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {\n const divRef = useRef<TElement>(null);\n\n const threadViewportStore = useThreadViewportStore();\n\n const lastScrollTop = useRef<number>(0);\n\n // bug: when ScrollToBottom's button changes its disabled state, the scroll stops\n // fix: delay the state change until the scroll is done\n const isScrollingToBottomRef = useRef(false);\n\n const scrollToBottom = (behavior: ScrollBehavior) => {\n const div = divRef.current;\n if (!div || !autoScroll) return;\n\n isScrollingToBottomRef.current = true;\n div.scrollTo({ top: div.scrollHeight, behavior });\n };\n\n const handleScroll = () => {\n const div = divRef.current;\n if (!div) return;\n\n const isAtBottom = threadViewportStore.getState().isAtBottom;\n const newIsAtBottom =\n div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed\n\n if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {\n // ignore scroll down\n } else {\n if (newIsAtBottom) {\n isScrollingToBottomRef.current = false;\n }\n\n if (newIsAtBottom !== isAtBottom) {\n writableStore(threadViewportStore).setState({\n isAtBottom: newIsAtBottom,\n });\n }\n }\n\n lastScrollTop.current = div.scrollTop;\n };\n\n const resizeRef = useOnResizeContent(() => {\n if (\n isScrollingToBottomRef.current ||\n threadViewportStore.getState().isAtBottom\n ) {\n scrollToBottom(\"instant\");\n }\n\n handleScroll();\n });\n\n const scrollRef = useManagedRef<HTMLElement>((el) => {\n el.addEventListener(\"scroll\", handleScroll);\n return () => {\n el.removeEventListener(\"scroll\", handleScroll);\n };\n });\n\n useOnScrollToBottom(() => {\n scrollToBottom(\"auto\");\n });\n\n // autoscroll on run start\n const threadRuntime = useThreadRuntime();\n useEffect(() => {\n return threadRuntime.unstable_on(\"run-start\", () => scrollToBottom(\"auto\"));\n }, []);\n\n const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);\n return autoScrollRef;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gCAAgC;AAChC,mBAA+C;AAC/C,2BAGO;AACP,gCAAmC;AACnC,iCAAoC;AACpC,2BAA8B;AAC9B,2BAA8B;AAQvB,IAAM,8BAA8B,CAA+B;AAAA,EACxE,aAAa;AACf,MAAkE;AAChE,QAAM,aAAS,qBAAiB,IAAI;AAEpC,QAAM,0BAAsB,6CAAuB;AAEnD,QAAM,oBAAgB,qBAAe,CAAC;AAItC,QAAM,6BAAyB,qBAAO,KAAK;AAE3C,QAAM,iBAAiB,CAAC,aAA6B;AACnD,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,OAAO,CAAC,WAAY;AAEzB,2BAAuB,UAAU;AACjC,QAAI,SAAS,EAAE,KAAK,IAAI,cAAc,SAAS,CAAC;AAAA,EAClD;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAK;AAEV,UAAM,aAAa,oBAAoB,SAAS,EAAE;AAClD,UAAM,gBACJ,IAAI,eAAe,IAAI,aAAa,IAAI,eAAe;AAEzD,QAAI,CAAC,iBAAiB,cAAc,UAAU,IAAI,WAAW;AAAA,IAE7D,OAAO;AACL,UAAI,eAAe;AACjB,+BAAuB,UAAU;AAAA,MACnC;AAEA,UAAI,kBAAkB,YAAY;AAChC,gDAAc,mBAAmB,EAAE,SAAS;AAAA,UAC1C,YAAY;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF;AAEA,kBAAc,UAAU,IAAI;AAAA,EAC9B;AAEA,QAAM,gBAAY,8CAAmB,MAAM;AACzC,QACE,uBAAuB,WACvB,oBAAoB,SAAS,EAAE,YAC/B;AACA,qBAAe,SAAS;AAAA,IAC1B;AAEA,iBAAa;AAAA,EACf,CAAC;AAED,QAAM,gBAAY,oCAA2B,CAAC,OAAO;AACnD,OAAG,iBAAiB,UAAU,YAAY;AAC1C,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,YAAY;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,sDAAoB,MAAM;AACxB,mBAAe,MAAM;AAAA,EACvB,CAAC;AAGD,QAAM,oBAAgB,uCAAiB;AACvC,8BAAU,MAAM;AACd,WAAO,cAAc,YAAY,aAAa,MAAM,eAAe,MAAM,CAAC;AAAA,EAC5E,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAgB,2CAA0B,WAAW,WAAW,MAAM;AAC5E,SAAO;AACT;","names":[]}
@@ -12,8 +12,7 @@ import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom.mjs";
12
12
  import { useManagedRef } from "../../utils/hooks/useManagedRef.mjs";
13
13
  import { writableStore } from "../../context/ReadonlyStore.mjs";
14
14
  var useThreadViewportAutoScroll = ({
15
- autoScroll = true,
16
- unstable_scrollToBottomOnRunStart = true
15
+ autoScroll = true
17
16
  }) => {
18
17
  const divRef = useRef(null);
19
18
  const threadViewportStore = useThreadViewportStore();
@@ -55,15 +54,14 @@ var useThreadViewportAutoScroll = ({
55
54
  el.removeEventListener("scroll", handleScroll);
56
55
  };
57
56
  });
58
- const autoScrollRef = useComposedRefs(resizeRef, scrollRef, divRef);
59
57
  useOnScrollToBottom(() => {
60
58
  scrollToBottom("auto");
61
59
  });
62
60
  const threadRuntime = useThreadRuntime();
63
61
  useEffect(() => {
64
- if (!unstable_scrollToBottomOnRunStart) return void 0;
65
- return threadRuntime.unstable_on("run-start", focus);
66
- }, [unstable_scrollToBottomOnRunStart]);
62
+ return threadRuntime.unstable_on("run-start", () => scrollToBottom("auto"));
63
+ }, []);
64
+ const autoScrollRef = useComposedRefs(resizeRef, scrollRef, divRef);
67
65
  return autoScrollRef;
68
66
  };
69
67
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/primitives/thread/useThreadViewportAutoScroll.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { RefCallback, useEffect, useRef } from \"react\";\nimport {\n useThreadRuntime,\n useThreadViewportStore,\n} from \"../../context/react/ThreadContext\";\nimport { useOnResizeContent } from \"../../utils/hooks/useOnResizeContent\";\nimport { useOnScrollToBottom } from \"../../utils/hooks/useOnScrollToBottom\";\nimport { useManagedRef } from \"../../utils/hooks/useManagedRef\";\nimport { writableStore } from \"../../context/ReadonlyStore\";\n\nexport namespace useThreadViewportAutoScroll {\n export type Options = {\n autoScroll?: boolean | undefined;\n unstable_scrollToBottomOnRunStart?: boolean | undefined;\n };\n}\n\nexport const useThreadViewportAutoScroll = <TElement extends HTMLElement>({\n autoScroll = true,\n unstable_scrollToBottomOnRunStart = true,\n}: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {\n const divRef = useRef<TElement>(null);\n\n const threadViewportStore = useThreadViewportStore();\n\n const lastScrollTop = useRef<number>(0);\n\n // bug: when ScrollToBottom's button changes its disabled state, the scroll stops\n // fix: delay the state change until the scroll is done\n const isScrollingToBottomRef = useRef(false);\n\n const scrollToBottom = (behavior: ScrollBehavior) => {\n const div = divRef.current;\n if (!div || !autoScroll) return;\n\n isScrollingToBottomRef.current = true;\n div.scrollTo({ top: div.scrollHeight, behavior });\n };\n\n const handleScroll = () => {\n const div = divRef.current;\n if (!div) return;\n\n const isAtBottom = threadViewportStore.getState().isAtBottom;\n const newIsAtBottom =\n div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed\n\n if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {\n // ignore scroll down\n } else {\n if (newIsAtBottom) {\n isScrollingToBottomRef.current = false;\n }\n\n if (newIsAtBottom !== isAtBottom) {\n writableStore(threadViewportStore).setState({\n isAtBottom: newIsAtBottom,\n });\n }\n }\n\n lastScrollTop.current = div.scrollTop;\n };\n\n const resizeRef = useOnResizeContent(() => {\n if (\n isScrollingToBottomRef.current ||\n threadViewportStore.getState().isAtBottom\n ) {\n scrollToBottom(\"instant\");\n }\n\n handleScroll();\n });\n\n const scrollRef = useManagedRef<HTMLElement>((el) => {\n el.addEventListener(\"scroll\", handleScroll);\n return () => {\n el.removeEventListener(\"scroll\", handleScroll);\n };\n });\n\n const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);\n\n useOnScrollToBottom(() => {\n scrollToBottom(\"auto\");\n });\n\n // autoscroll on run start\n const threadRuntime = useThreadRuntime();\n useEffect(() => {\n if (!unstable_scrollToBottomOnRunStart) return undefined;\n\n return threadRuntime.unstable_on(\"run-start\", focus);\n }, [unstable_scrollToBottomOnRunStart]);\n\n return autoScrollRef;\n};\n"],"mappings":";;;AAEA,SAAS,uBAAuB;AAChC,SAAsB,WAAW,cAAc;AAC/C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AASvB,IAAM,8BAA8B,CAA+B;AAAA,EACxE,aAAa;AAAA,EACb,oCAAoC;AACtC,MAAkE;AAChE,QAAM,SAAS,OAAiB,IAAI;AAEpC,QAAM,sBAAsB,uBAAuB;AAEnD,QAAM,gBAAgB,OAAe,CAAC;AAItC,QAAM,yBAAyB,OAAO,KAAK;AAE3C,QAAM,iBAAiB,CAAC,aAA6B;AACnD,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,OAAO,CAAC,WAAY;AAEzB,2BAAuB,UAAU;AACjC,QAAI,SAAS,EAAE,KAAK,IAAI,cAAc,SAAS,CAAC;AAAA,EAClD;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAK;AAEV,UAAM,aAAa,oBAAoB,SAAS,EAAE;AAClD,UAAM,gBACJ,IAAI,eAAe,IAAI,aAAa,IAAI,eAAe;AAEzD,QAAI,CAAC,iBAAiB,cAAc,UAAU,IAAI,WAAW;AAAA,IAE7D,OAAO;AACL,UAAI,eAAe;AACjB,+BAAuB,UAAU;AAAA,MACnC;AAEA,UAAI,kBAAkB,YAAY;AAChC,sBAAc,mBAAmB,EAAE,SAAS;AAAA,UAC1C,YAAY;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF;AAEA,kBAAc,UAAU,IAAI;AAAA,EAC9B;AAEA,QAAM,YAAY,mBAAmB,MAAM;AACzC,QACE,uBAAuB,WACvB,oBAAoB,SAAS,EAAE,YAC/B;AACA,qBAAe,SAAS;AAAA,IAC1B;AAEA,iBAAa;AAAA,EACf,CAAC;AAED,QAAM,YAAY,cAA2B,CAAC,OAAO;AACnD,OAAG,iBAAiB,UAAU,YAAY;AAC1C,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,YAAY;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,gBAA0B,WAAW,WAAW,MAAM;AAE5E,sBAAoB,MAAM;AACxB,mBAAe,MAAM;AAAA,EACvB,CAAC;AAGD,QAAM,gBAAgB,iBAAiB;AACvC,YAAU,MAAM;AACd,QAAI,CAAC,kCAAmC,QAAO;AAE/C,WAAO,cAAc,YAAY,aAAa,KAAK;AAAA,EACrD,GAAG,CAAC,iCAAiC,CAAC;AAEtC,SAAO;AACT;","names":[]}
1
+ {"version":3,"sources":["../../../src/primitives/thread/useThreadViewportAutoScroll.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { RefCallback, useEffect, useRef } from \"react\";\nimport {\n useThreadRuntime,\n useThreadViewportStore,\n} from \"../../context/react/ThreadContext\";\nimport { useOnResizeContent } from \"../../utils/hooks/useOnResizeContent\";\nimport { useOnScrollToBottom } from \"../../utils/hooks/useOnScrollToBottom\";\nimport { useManagedRef } from \"../../utils/hooks/useManagedRef\";\nimport { writableStore } from \"../../context/ReadonlyStore\";\n\nexport namespace useThreadViewportAutoScroll {\n export type Options = {\n autoScroll?: boolean | undefined;\n };\n}\n\nexport const useThreadViewportAutoScroll = <TElement extends HTMLElement>({\n autoScroll = true,\n}: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {\n const divRef = useRef<TElement>(null);\n\n const threadViewportStore = useThreadViewportStore();\n\n const lastScrollTop = useRef<number>(0);\n\n // bug: when ScrollToBottom's button changes its disabled state, the scroll stops\n // fix: delay the state change until the scroll is done\n const isScrollingToBottomRef = useRef(false);\n\n const scrollToBottom = (behavior: ScrollBehavior) => {\n const div = divRef.current;\n if (!div || !autoScroll) return;\n\n isScrollingToBottomRef.current = true;\n div.scrollTo({ top: div.scrollHeight, behavior });\n };\n\n const handleScroll = () => {\n const div = divRef.current;\n if (!div) return;\n\n const isAtBottom = threadViewportStore.getState().isAtBottom;\n const newIsAtBottom =\n div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed\n\n if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {\n // ignore scroll down\n } else {\n if (newIsAtBottom) {\n isScrollingToBottomRef.current = false;\n }\n\n if (newIsAtBottom !== isAtBottom) {\n writableStore(threadViewportStore).setState({\n isAtBottom: newIsAtBottom,\n });\n }\n }\n\n lastScrollTop.current = div.scrollTop;\n };\n\n const resizeRef = useOnResizeContent(() => {\n if (\n isScrollingToBottomRef.current ||\n threadViewportStore.getState().isAtBottom\n ) {\n scrollToBottom(\"instant\");\n }\n\n handleScroll();\n });\n\n const scrollRef = useManagedRef<HTMLElement>((el) => {\n el.addEventListener(\"scroll\", handleScroll);\n return () => {\n el.removeEventListener(\"scroll\", handleScroll);\n };\n });\n\n useOnScrollToBottom(() => {\n scrollToBottom(\"auto\");\n });\n\n // autoscroll on run start\n const threadRuntime = useThreadRuntime();\n useEffect(() => {\n return threadRuntime.unstable_on(\"run-start\", () => scrollToBottom(\"auto\"));\n }, []);\n\n const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);\n return autoScrollRef;\n};\n"],"mappings":";;;AAEA,SAAS,uBAAuB;AAChC,SAAsB,WAAW,cAAc;AAC/C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAQvB,IAAM,8BAA8B,CAA+B;AAAA,EACxE,aAAa;AACf,MAAkE;AAChE,QAAM,SAAS,OAAiB,IAAI;AAEpC,QAAM,sBAAsB,uBAAuB;AAEnD,QAAM,gBAAgB,OAAe,CAAC;AAItC,QAAM,yBAAyB,OAAO,KAAK;AAE3C,QAAM,iBAAiB,CAAC,aAA6B;AACnD,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,OAAO,CAAC,WAAY;AAEzB,2BAAuB,UAAU;AACjC,QAAI,SAAS,EAAE,KAAK,IAAI,cAAc,SAAS,CAAC;AAAA,EAClD;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAK;AAEV,UAAM,aAAa,oBAAoB,SAAS,EAAE;AAClD,UAAM,gBACJ,IAAI,eAAe,IAAI,aAAa,IAAI,eAAe;AAEzD,QAAI,CAAC,iBAAiB,cAAc,UAAU,IAAI,WAAW;AAAA,IAE7D,OAAO;AACL,UAAI,eAAe;AACjB,+BAAuB,UAAU;AAAA,MACnC;AAEA,UAAI,kBAAkB,YAAY;AAChC,sBAAc,mBAAmB,EAAE,SAAS;AAAA,UAC1C,YAAY;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF;AAEA,kBAAc,UAAU,IAAI;AAAA,EAC9B;AAEA,QAAM,YAAY,mBAAmB,MAAM;AACzC,QACE,uBAAuB,WACvB,oBAAoB,SAAS,EAAE,YAC/B;AACA,qBAAe,SAAS;AAAA,IAC1B;AAEA,iBAAa;AAAA,EACf,CAAC;AAED,QAAM,YAAY,cAA2B,CAAC,OAAO;AACnD,OAAG,iBAAiB,UAAU,YAAY;AAC1C,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,YAAY;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,sBAAoB,MAAM;AACxB,mBAAe,MAAM;AAAA,EACvB,CAAC;AAGD,QAAM,gBAAgB,iBAAiB;AACvC,YAAU,MAAM;AACd,WAAO,cAAc,YAAY,aAAa,MAAM,eAAe,MAAM,CAAC;AAAA,EAC5E,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB,gBAA0B,WAAW,WAAW,MAAM;AAC5E,SAAO;AACT;","names":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"useOnResizeContent.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useOnResizeContent.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,aAAc,MAAM,IAAI,qCA4CtD,CAAC"}
1
+ {"version":3,"file":"useOnResizeContent.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useOnResizeContent.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,aAAc,MAAM,IAAI,qCA8BtD,CAAC"}
@@ -33,26 +33,16 @@ var useOnResizeContent = (callback) => {
33
33
  const resizeObserver = new ResizeObserver(() => {
34
34
  callbackRef();
35
35
  });
36
- const mutationObserver = new MutationObserver((mutations) => {
37
- for (const mutation of mutations) {
38
- for (const node of mutation.addedNodes) {
39
- if (node instanceof Element) {
40
- resizeObserver.observe(node);
41
- }
42
- }
43
- for (const node of mutation.removedNodes) {
44
- if (node instanceof Element) {
45
- resizeObserver.unobserve(node);
46
- }
47
- }
48
- }
36
+ const mutationObserver = new MutationObserver(() => {
49
37
  callbackRef();
50
38
  });
51
39
  resizeObserver.observe(el);
52
- mutationObserver.observe(el, { childList: true });
53
- for (const child of el.children) {
54
- resizeObserver.observe(child);
55
- }
40
+ mutationObserver.observe(el, {
41
+ childList: true,
42
+ subtree: true,
43
+ attributes: true,
44
+ characterData: true
45
+ });
56
46
  return () => {
57
47
  resizeObserver.disconnect();
58
48
  mutationObserver.disconnect();
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/utils/hooks/useOnResizeContent.tsx"],"sourcesContent":["import { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useCallback } from \"react\";\nimport { useManagedRef } from \"./useManagedRef\";\n\nexport const useOnResizeContent = (callback: () => void) => {\n const callbackRef = useCallbackRef(callback);\n\n const refCallback = useCallback(\n (el: HTMLElement) => {\n const resizeObserver = new ResizeObserver(() => {\n callbackRef();\n });\n\n const mutationObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (node instanceof Element) {\n resizeObserver.observe(node);\n }\n }\n\n for (const node of mutation.removedNodes) {\n if (node instanceof Element) {\n resizeObserver.unobserve(node);\n }\n }\n }\n\n callbackRef();\n });\n\n resizeObserver.observe(el);\n mutationObserver.observe(el, { childList: true });\n\n // Observe existing children\n for (const child of el.children) {\n resizeObserver.observe(child);\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n },\n [callbackRef],\n );\n\n return useManagedRef(refCallback);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA+B;AAC/B,mBAA4B;AAC5B,2BAA8B;AAEvB,IAAM,qBAAqB,CAAC,aAAyB;AAC1D,QAAM,kBAAc,8CAAe,QAAQ;AAE3C,QAAM,kBAAc;AAAA,IAClB,CAAC,OAAoB;AACnB,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,oBAAY;AAAA,MACd,CAAC;AAED,YAAM,mBAAmB,IAAI,iBAAiB,CAAC,cAAc;AAC3D,mBAAW,YAAY,WAAW;AAChC,qBAAW,QAAQ,SAAS,YAAY;AACtC,gBAAI,gBAAgB,SAAS;AAC3B,6BAAe,QAAQ,IAAI;AAAA,YAC7B;AAAA,UACF;AAEA,qBAAW,QAAQ,SAAS,cAAc;AACxC,gBAAI,gBAAgB,SAAS;AAC3B,6BAAe,UAAU,IAAI;AAAA,YAC/B;AAAA,UACF;AAAA,QACF;AAEA,oBAAY;AAAA,MACd,CAAC;AAED,qBAAe,QAAQ,EAAE;AACzB,uBAAiB,QAAQ,IAAI,EAAE,WAAW,KAAK,CAAC;AAGhD,iBAAW,SAAS,GAAG,UAAU;AAC/B,uBAAe,QAAQ,KAAK;AAAA,MAC9B;AAEA,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,yBAAiB,WAAW;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,aAAO,oCAAc,WAAW;AAClC;","names":[]}
1
+ {"version":3,"sources":["../../../src/utils/hooks/useOnResizeContent.tsx"],"sourcesContent":["import { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useCallback } from \"react\";\nimport { useManagedRef } from \"./useManagedRef\";\n\nexport const useOnResizeContent = (callback: () => void) => {\n const callbackRef = useCallbackRef(callback);\n\n const refCallback = useCallback(\n (el: HTMLElement) => {\n const resizeObserver = new ResizeObserver(() => {\n callbackRef();\n });\n\n const mutationObserver = new MutationObserver(() => {\n callbackRef();\n });\n\n resizeObserver.observe(el);\n mutationObserver.observe(el, {\n childList: true,\n subtree: true,\n attributes: true,\n characterData: true,\n });\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n },\n [callbackRef],\n );\n\n return useManagedRef(refCallback);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA+B;AAC/B,mBAA4B;AAC5B,2BAA8B;AAEvB,IAAM,qBAAqB,CAAC,aAAyB;AAC1D,QAAM,kBAAc,8CAAe,QAAQ;AAE3C,QAAM,kBAAc;AAAA,IAClB,CAAC,OAAoB;AACnB,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,oBAAY;AAAA,MACd,CAAC;AAED,YAAM,mBAAmB,IAAI,iBAAiB,MAAM;AAClD,oBAAY;AAAA,MACd,CAAC;AAED,qBAAe,QAAQ,EAAE;AACzB,uBAAiB,QAAQ,IAAI;AAAA,QAC3B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,eAAe;AAAA,MACjB,CAAC;AAED,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,yBAAiB,WAAW;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,aAAO,oCAAc,WAAW;AAClC;","names":[]}
@@ -9,26 +9,16 @@ var useOnResizeContent = (callback) => {
9
9
  const resizeObserver = new ResizeObserver(() => {
10
10
  callbackRef();
11
11
  });
12
- const mutationObserver = new MutationObserver((mutations) => {
13
- for (const mutation of mutations) {
14
- for (const node of mutation.addedNodes) {
15
- if (node instanceof Element) {
16
- resizeObserver.observe(node);
17
- }
18
- }
19
- for (const node of mutation.removedNodes) {
20
- if (node instanceof Element) {
21
- resizeObserver.unobserve(node);
22
- }
23
- }
24
- }
12
+ const mutationObserver = new MutationObserver(() => {
25
13
  callbackRef();
26
14
  });
27
15
  resizeObserver.observe(el);
28
- mutationObserver.observe(el, { childList: true });
29
- for (const child of el.children) {
30
- resizeObserver.observe(child);
31
- }
16
+ mutationObserver.observe(el, {
17
+ childList: true,
18
+ subtree: true,
19
+ attributes: true,
20
+ characterData: true
21
+ });
32
22
  return () => {
33
23
  resizeObserver.disconnect();
34
24
  mutationObserver.disconnect();
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/utils/hooks/useOnResizeContent.tsx"],"sourcesContent":["import { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useCallback } from \"react\";\nimport { useManagedRef } from \"./useManagedRef\";\n\nexport const useOnResizeContent = (callback: () => void) => {\n const callbackRef = useCallbackRef(callback);\n\n const refCallback = useCallback(\n (el: HTMLElement) => {\n const resizeObserver = new ResizeObserver(() => {\n callbackRef();\n });\n\n const mutationObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (node instanceof Element) {\n resizeObserver.observe(node);\n }\n }\n\n for (const node of mutation.removedNodes) {\n if (node instanceof Element) {\n resizeObserver.unobserve(node);\n }\n }\n }\n\n callbackRef();\n });\n\n resizeObserver.observe(el);\n mutationObserver.observe(el, { childList: true });\n\n // Observe existing children\n for (const child of el.children) {\n resizeObserver.observe(child);\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n },\n [callbackRef],\n );\n\n return useManagedRef(refCallback);\n};\n"],"mappings":";AAAA,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAEvB,IAAM,qBAAqB,CAAC,aAAyB;AAC1D,QAAM,cAAc,eAAe,QAAQ;AAE3C,QAAM,cAAc;AAAA,IAClB,CAAC,OAAoB;AACnB,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,oBAAY;AAAA,MACd,CAAC;AAED,YAAM,mBAAmB,IAAI,iBAAiB,CAAC,cAAc;AAC3D,mBAAW,YAAY,WAAW;AAChC,qBAAW,QAAQ,SAAS,YAAY;AACtC,gBAAI,gBAAgB,SAAS;AAC3B,6BAAe,QAAQ,IAAI;AAAA,YAC7B;AAAA,UACF;AAEA,qBAAW,QAAQ,SAAS,cAAc;AACxC,gBAAI,gBAAgB,SAAS;AAC3B,6BAAe,UAAU,IAAI;AAAA,YAC/B;AAAA,UACF;AAAA,QACF;AAEA,oBAAY;AAAA,MACd,CAAC;AAED,qBAAe,QAAQ,EAAE;AACzB,uBAAiB,QAAQ,IAAI,EAAE,WAAW,KAAK,CAAC;AAGhD,iBAAW,SAAS,GAAG,UAAU;AAC/B,uBAAe,QAAQ,KAAK;AAAA,MAC9B;AAEA,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,yBAAiB,WAAW;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO,cAAc,WAAW;AAClC;","names":[]}
1
+ {"version":3,"sources":["../../../src/utils/hooks/useOnResizeContent.tsx"],"sourcesContent":["import { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useCallback } from \"react\";\nimport { useManagedRef } from \"./useManagedRef\";\n\nexport const useOnResizeContent = (callback: () => void) => {\n const callbackRef = useCallbackRef(callback);\n\n const refCallback = useCallback(\n (el: HTMLElement) => {\n const resizeObserver = new ResizeObserver(() => {\n callbackRef();\n });\n\n const mutationObserver = new MutationObserver(() => {\n callbackRef();\n });\n\n resizeObserver.observe(el);\n mutationObserver.observe(el, {\n childList: true,\n subtree: true,\n attributes: true,\n characterData: true,\n });\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n },\n [callbackRef],\n );\n\n return useManagedRef(refCallback);\n};\n"],"mappings":";AAAA,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAEvB,IAAM,qBAAqB,CAAC,aAAyB;AAC1D,QAAM,cAAc,eAAe,QAAQ;AAE3C,QAAM,cAAc;AAAA,IAClB,CAAC,OAAoB;AACnB,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,oBAAY;AAAA,MACd,CAAC;AAED,YAAM,mBAAmB,IAAI,iBAAiB,MAAM;AAClD,oBAAY;AAAA,MACd,CAAC;AAED,qBAAe,QAAQ,EAAE;AACzB,uBAAiB,QAAQ,IAAI;AAAA,QAC3B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,eAAe;AAAA,MACjB,CAAC;AAED,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,yBAAiB,WAAW;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO,cAAc,WAAW;AAClC;","names":[]}
package/package.json CHANGED
@@ -29,7 +29,7 @@
29
29
  "conversational-ui",
30
30
  "conversational-ai"
31
31
  ],
32
- "version": "0.7.64",
32
+ "version": "0.7.65",
33
33
  "license": "MIT",
34
34
  "exports": {
35
35
  ".": {
@@ -14,13 +14,11 @@ import { writableStore } from "../../context/ReadonlyStore";
14
14
  export namespace useThreadViewportAutoScroll {
15
15
  export type Options = {
16
16
  autoScroll?: boolean | undefined;
17
- unstable_scrollToBottomOnRunStart?: boolean | undefined;
18
17
  };
19
18
  }
20
19
 
21
20
  export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
22
21
  autoScroll = true,
23
- unstable_scrollToBottomOnRunStart = true,
24
22
  }: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {
25
23
  const divRef = useRef<TElement>(null);
26
24
 
@@ -83,8 +81,6 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
83
81
  };
84
82
  });
85
83
 
86
- const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);
87
-
88
84
  useOnScrollToBottom(() => {
89
85
  scrollToBottom("auto");
90
86
  });
@@ -92,10 +88,9 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
92
88
  // autoscroll on run start
93
89
  const threadRuntime = useThreadRuntime();
94
90
  useEffect(() => {
95
- if (!unstable_scrollToBottomOnRunStart) return undefined;
96
-
97
- return threadRuntime.unstable_on("run-start", focus);
98
- }, [unstable_scrollToBottomOnRunStart]);
91
+ return threadRuntime.unstable_on("run-start", () => scrollToBottom("auto"));
92
+ }, []);
99
93
 
94
+ const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);
100
95
  return autoScrollRef;
101
96
  };
@@ -11,31 +11,17 @@ export const useOnResizeContent = (callback: () => void) => {
11
11
  callbackRef();
12
12
  });
13
13
 
14
- const mutationObserver = new MutationObserver((mutations) => {
15
- for (const mutation of mutations) {
16
- for (const node of mutation.addedNodes) {
17
- if (node instanceof Element) {
18
- resizeObserver.observe(node);
19
- }
20
- }
21
-
22
- for (const node of mutation.removedNodes) {
23
- if (node instanceof Element) {
24
- resizeObserver.unobserve(node);
25
- }
26
- }
27
- }
28
-
14
+ const mutationObserver = new MutationObserver(() => {
29
15
  callbackRef();
30
16
  });
31
17
 
32
18
  resizeObserver.observe(el);
33
- mutationObserver.observe(el, { childList: true });
34
-
35
- // Observe existing children
36
- for (const child of el.children) {
37
- resizeObserver.observe(child);
38
- }
19
+ mutationObserver.observe(el, {
20
+ childList: true,
21
+ subtree: true,
22
+ attributes: true,
23
+ characterData: true,
24
+ });
39
25
 
40
26
  return () => {
41
27
  resizeObserver.disconnect();