@assistant-ui/react 0.7.64 → 0.7.65
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/primitives/thread/useThreadViewportAutoScroll.d.ts +1 -2
- package/dist/primitives/thread/useThreadViewportAutoScroll.d.ts.map +1 -1
- package/dist/primitives/thread/useThreadViewportAutoScroll.js +4 -6
- package/dist/primitives/thread/useThreadViewportAutoScroll.js.map +1 -1
- package/dist/primitives/thread/useThreadViewportAutoScroll.mjs +4 -6
- package/dist/primitives/thread/useThreadViewportAutoScroll.mjs.map +1 -1
- package/dist/utils/hooks/useOnResizeContent.d.ts.map +1 -1
- package/dist/utils/hooks/useOnResizeContent.js +7 -17
- package/dist/utils/hooks/useOnResizeContent.js.map +1 -1
- package/dist/utils/hooks/useOnResizeContent.mjs +7 -17
- package/dist/utils/hooks/useOnResizeContent.mjs.map +1 -1
- package/package.json +1 -1
- package/src/primitives/thread/useThreadViewportAutoScroll.tsx +3 -8
- package/src/utils/hooks/useOnResizeContent.tsx +7 -21
|
@@ -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,
|
|
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;
|
|
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
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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
|
|
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,
|
|
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((
|
|
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, {
|
|
53
|
-
|
|
54
|
-
|
|
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((
|
|
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((
|
|
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, {
|
|
29
|
-
|
|
30
|
-
|
|
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((
|
|
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
|
@@ -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
|
-
|
|
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((
|
|
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, {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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();
|