@assistant-ui/react 0.11.51 → 0.11.52
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageRoot.d.ts","sourceRoot":"","sources":["../../../src/primitives/message/MessageRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EACL,KAAK,YAAY,EAEjB,wBAAwB,EAEzB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MessageRoot.d.ts","sourceRoot":"","sources":["../../../src/primitives/message/MessageRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EACL,KAAK,YAAY,EAEjB,wBAAwB,EAEzB,MAAM,OAAO,CAAC;AAqEf,yBAAiB,oBAAoB,CAAC;IACpC,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;IACzD;;;OAGG;IACH,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;CACpE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,oBAAoB;;0DAiB/B,CAAC"}
|
|
@@ -26,7 +26,9 @@ var useIsHoveringRef = () => {
|
|
|
26
26
|
};
|
|
27
27
|
el.addEventListener("mouseenter", handleMouseEnter);
|
|
28
28
|
el.addEventListener("mouseleave", handleMouseLeave);
|
|
29
|
-
if (el.matches(":hover"))
|
|
29
|
+
if (el.matches(":hover")) {
|
|
30
|
+
queueMicrotask(() => message.setIsHovering(true));
|
|
31
|
+
}
|
|
30
32
|
return () => {
|
|
31
33
|
el.removeEventListener("mouseenter", handleMouseEnter);
|
|
32
34
|
el.removeEventListener("mouseleave", handleMouseLeave);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/primitives/message/MessageRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport {\n type ComponentRef,\n forwardRef,\n ComponentPropsWithoutRef,\n useCallback,\n} from \"react\";\nimport { useAssistantApi, useAssistantState } from \"../../context\";\nimport { useManagedRef } from \"../../utils/hooks/useManagedRef\";\nimport { useSizeHandle } from \"../../utils/hooks/useSizeHandle\";\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { useThreadViewport } from \"../../context/react/ThreadViewportContext\";\nimport { ThreadPrimitiveViewportSlack } from \"../thread/ThreadViewportSlack\";\n\nconst useIsHoveringRef = () => {\n const api = useAssistantApi();\n const message = useAssistantState(() => api.message());\n\n const callbackRef = useCallback(\n (el: HTMLElement) => {\n const handleMouseEnter = () => {\n message.setIsHovering(true);\n };\n const handleMouseLeave = () => {\n message.setIsHovering(false);\n };\n\n el.addEventListener(\"mouseenter\", handleMouseEnter);\n el.addEventListener(\"mouseleave\", handleMouseLeave);\n\n if (el.matches(\":hover\")) message.setIsHovering(true);\n\n return () => {\n el.removeEventListener(\"mouseenter\", handleMouseEnter);\n el.removeEventListener(\"mouseleave\", handleMouseLeave);\n message.setIsHovering(false);\n };\n },\n [message],\n );\n\n return useManagedRef(callbackRef);\n};\n\n/**\n * Hook that registers the anchor user message as a content inset.\n * Only registers if: user message, at index messages.length-2, and last message is assistant.\n */\nconst useMessageViewportRef = () => {\n const turnAnchor = useThreadViewport((s) => s.turnAnchor);\n const registerUserHeight = useThreadViewport(\n (s) => s.registerUserMessageHeight,\n );\n\n // inset rules:\n // - the previous user message before the last assistant message registers its full height\n const shouldRegisterAsInset = useAssistantState(\n ({ thread, message }) =>\n turnAnchor === \"top\" &&\n message.role === \"user\" &&\n message.index === thread.messages.length - 2 &&\n thread.messages.at(-1)?.role === \"assistant\",\n );\n\n const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);\n\n return useSizeHandle(\n shouldRegisterAsInset ? registerUserHeight : null,\n getHeight,\n );\n};\n\nexport namespace MessagePrimitiveRoot {\n export type Element = ComponentRef<typeof Primitive.div>;\n /**\n * Props for the MessagePrimitive.Root component.\n * Accepts all standard div element props.\n */\n export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;\n}\n\n/**\n * The root container component for a message.\n *\n * This component provides the foundational wrapper for message content and handles\n * hover state management for the message. It automatically tracks when the user\n * is hovering over the message, which can be used by child components like action bars.\n *\n * When `turnAnchor=\"top\"` is set on the viewport, this component\n * registers itself as the scroll anchor if it's the last user message.\n *\n * @example\n * ```tsx\n * <MessagePrimitive.Root>\n * <MessagePrimitive.Content />\n * <ActionBarPrimitive.Root>\n * <ActionBarPrimitive.Copy />\n * <ActionBarPrimitive.Edit />\n * </ActionBarPrimitive.Root>\n * </MessagePrimitive.Root>\n * ```\n */\nexport const MessagePrimitiveRoot = forwardRef<\n MessagePrimitiveRoot.Element,\n MessagePrimitiveRoot.Props\n>((props, forwardRef) => {\n const isHoveringRef = useIsHoveringRef();\n const anchorUserMessageRef = useMessageViewportRef();\n const ref = useComposedRefs<HTMLDivElement>(\n forwardRef,\n isHoveringRef,\n anchorUserMessageRef,\n );\n\n return (\n <ThreadPrimitiveViewportSlack>\n <Primitive.div {...props} ref={ref} />\n </ThreadPrimitiveViewportSlack>\n );\n});\n\nMessagePrimitiveRoot.displayName = \"MessagePrimitive.Root\";\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AACP,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,oCAAoC;
|
|
1
|
+
{"version":3,"sources":["../../../src/primitives/message/MessageRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport {\n type ComponentRef,\n forwardRef,\n ComponentPropsWithoutRef,\n useCallback,\n} from \"react\";\nimport { useAssistantApi, useAssistantState } from \"../../context\";\nimport { useManagedRef } from \"../../utils/hooks/useManagedRef\";\nimport { useSizeHandle } from \"../../utils/hooks/useSizeHandle\";\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { useThreadViewport } from \"../../context/react/ThreadViewportContext\";\nimport { ThreadPrimitiveViewportSlack } from \"../thread/ThreadViewportSlack\";\n\nconst useIsHoveringRef = () => {\n const api = useAssistantApi();\n const message = useAssistantState(() => api.message());\n\n const callbackRef = useCallback(\n (el: HTMLElement) => {\n const handleMouseEnter = () => {\n message.setIsHovering(true);\n };\n const handleMouseLeave = () => {\n message.setIsHovering(false);\n };\n\n el.addEventListener(\"mouseenter\", handleMouseEnter);\n el.addEventListener(\"mouseleave\", handleMouseLeave);\n\n if (el.matches(\":hover\")) {\n // TODO this is needed for SSR to work, figure out why\n queueMicrotask(() => message.setIsHovering(true));\n }\n\n return () => {\n el.removeEventListener(\"mouseenter\", handleMouseEnter);\n el.removeEventListener(\"mouseleave\", handleMouseLeave);\n message.setIsHovering(false);\n };\n },\n [message],\n );\n\n return useManagedRef(callbackRef);\n};\n\n/**\n * Hook that registers the anchor user message as a content inset.\n * Only registers if: user message, at index messages.length-2, and last message is assistant.\n */\nconst useMessageViewportRef = () => {\n const turnAnchor = useThreadViewport((s) => s.turnAnchor);\n const registerUserHeight = useThreadViewport(\n (s) => s.registerUserMessageHeight,\n );\n\n // inset rules:\n // - the previous user message before the last assistant message registers its full height\n const shouldRegisterAsInset = useAssistantState(\n ({ thread, message }) =>\n turnAnchor === \"top\" &&\n message.role === \"user\" &&\n message.index === thread.messages.length - 2 &&\n thread.messages.at(-1)?.role === \"assistant\",\n );\n\n const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);\n\n return useSizeHandle(\n shouldRegisterAsInset ? registerUserHeight : null,\n getHeight,\n );\n};\n\nexport namespace MessagePrimitiveRoot {\n export type Element = ComponentRef<typeof Primitive.div>;\n /**\n * Props for the MessagePrimitive.Root component.\n * Accepts all standard div element props.\n */\n export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;\n}\n\n/**\n * The root container component for a message.\n *\n * This component provides the foundational wrapper for message content and handles\n * hover state management for the message. It automatically tracks when the user\n * is hovering over the message, which can be used by child components like action bars.\n *\n * When `turnAnchor=\"top\"` is set on the viewport, this component\n * registers itself as the scroll anchor if it's the last user message.\n *\n * @example\n * ```tsx\n * <MessagePrimitive.Root>\n * <MessagePrimitive.Content />\n * <ActionBarPrimitive.Root>\n * <ActionBarPrimitive.Copy />\n * <ActionBarPrimitive.Edit />\n * </ActionBarPrimitive.Root>\n * </MessagePrimitive.Root>\n * ```\n */\nexport const MessagePrimitiveRoot = forwardRef<\n MessagePrimitiveRoot.Element,\n MessagePrimitiveRoot.Props\n>((props, forwardRef) => {\n const isHoveringRef = useIsHoveringRef();\n const anchorUserMessageRef = useMessageViewportRef();\n const ref = useComposedRefs<HTMLDivElement>(\n forwardRef,\n isHoveringRef,\n anchorUserMessageRef,\n );\n\n return (\n <ThreadPrimitiveViewportSlack>\n <Primitive.div {...props} ref={ref} />\n </ThreadPrimitiveViewportSlack>\n );\n});\n\nMessagePrimitiveRoot.displayName = \"MessagePrimitive.Root\";\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AACP,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,oCAAoC;AA2GvC;AAzGN,IAAM,mBAAmB,MAAM;AAC7B,QAAM,MAAM,gBAAgB;AAC5B,QAAM,UAAU,kBAAkB,MAAM,IAAI,QAAQ,CAAC;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,OAAoB;AACnB,YAAM,mBAAmB,MAAM;AAC7B,gBAAQ,cAAc,IAAI;AAAA,MAC5B;AACA,YAAM,mBAAmB,MAAM;AAC7B,gBAAQ,cAAc,KAAK;AAAA,MAC7B;AAEA,SAAG,iBAAiB,cAAc,gBAAgB;AAClD,SAAG,iBAAiB,cAAc,gBAAgB;AAElD,UAAI,GAAG,QAAQ,QAAQ,GAAG;AAExB,uBAAe,MAAM,QAAQ,cAAc,IAAI,CAAC;AAAA,MAClD;AAEA,aAAO,MAAM;AACX,WAAG,oBAAoB,cAAc,gBAAgB;AACrD,WAAG,oBAAoB,cAAc,gBAAgB;AACrD,gBAAQ,cAAc,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,cAAc,WAAW;AAClC;AAMA,IAAM,wBAAwB,MAAM;AAClC,QAAM,aAAa,kBAAkB,CAAC,MAAM,EAAE,UAAU;AACxD,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAAM,EAAE;AAAA,EACX;AAIA,QAAM,wBAAwB;AAAA,IAC5B,CAAC,EAAE,QAAQ,QAAQ,MACjB,eAAe,SACf,QAAQ,SAAS,UACjB,QAAQ,UAAU,OAAO,SAAS,SAAS,KAC3C,OAAO,SAAS,GAAG,EAAE,GAAG,SAAS;AAAA,EACrC;AAEA,QAAM,YAAY,YAAY,CAAC,OAAoB,GAAG,cAAc,CAAC,CAAC;AAEtE,SAAO;AAAA,IACL,wBAAwB,qBAAqB;AAAA,IAC7C;AAAA,EACF;AACF;AAgCO,IAAM,uBAAuB,WAGlC,CAAC,OAAOA,gBAAe;AACvB,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,uBAAuB,sBAAsB;AACnD,QAAM,MAAM;AAAA,IACVA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,gCACC,8BAAC,UAAU,KAAV,EAAe,GAAG,OAAO,KAAU,GACtC;AAEJ,CAAC;AAED,qBAAqB,cAAc;","names":["forwardRef"]}
|
package/package.json
CHANGED
|
@@ -30,7 +30,10 @@ const useIsHoveringRef = () => {
|
|
|
30
30
|
el.addEventListener("mouseenter", handleMouseEnter);
|
|
31
31
|
el.addEventListener("mouseleave", handleMouseLeave);
|
|
32
32
|
|
|
33
|
-
if (el.matches(":hover"))
|
|
33
|
+
if (el.matches(":hover")) {
|
|
34
|
+
// TODO this is needed for SSR to work, figure out why
|
|
35
|
+
queueMicrotask(() => message.setIsHovering(true));
|
|
36
|
+
}
|
|
34
37
|
|
|
35
38
|
return () => {
|
|
36
39
|
el.removeEventListener("mouseenter", handleMouseEnter);
|