@smart-cloud/ai-kit-ui 1.1.16 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/ShadowBoundary.tsx

@@ -1,6 +1,6 @@
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { SetStateAction, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 export type ShadowBoundaryMode = "local" | "overlay";
@@ -27,6 +27,7 @@ export type ShadowBoundaryProps = {
    */
   overlayRootId?: string;
 
+  setHost: React.Dispatch<SetStateAction<HTMLElement | null>>;
   children: (api: {
     /** Portal target element inside the shadow root. */
     rootElement: HTMLDivElement;
@@ -89,6 +90,7 @@ export function ShadowBoundary({
   rootElementId,
   mode = "local",
   overlayRootId = "ai-kit-overlay-root",
+  setHost,
 }: ShadowBoundaryProps) {
   const hostRef = useRef<HTMLDivElement | null>(null);
 
@@ -131,6 +133,7 @@ export function ShadowBoundary({
     } else {
       host = hostRef.current;
     }
+    setHost(host);
 
     // 2) Ensure shadow root
     const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });

package/src/withAiKitShell.tsx

@@ -14,7 +14,7 @@ import {
 } from "@smart-cloud/ai-kit-core";
 import { useSelect } from "@wordpress/data";
 import { I18n } from "aws-amplify/utils";
-import { type ComponentType, useCallback, useMemo, useState } from "react";
+import { type ComponentType, useEffect, useMemo, useState } from "react";
 import { ShadowBoundary } from "./ShadowBoundary";
 
 export type AiKitShellInjectedProps = {
@@ -52,6 +52,7 @@ export function withAiKitShell<P extends object>(
       direction,
     } = { ...props, ...propOverrides } as AiWorkerProps & P;
 
+    const [host, setHost] = useState<HTMLElement | null>(null);
     const languageInStore: string | undefined | null = useSelect(() =>
       getStoreSelect(store).getLanguage(),
     );
@@ -178,31 +179,40 @@ export function withAiKitShell<P extends object>(
       return themeOverrides ? hashStringDjb2(themeOverrides) : "";
     }, [themeOverrides]);
 
-    const injectStyle = useCallback(
-      (rootElement: HTMLDivElement) => {
-        const existingStyle = rootElement.ownerDocument.getElementById(
+    useEffect(
+      () => {
+
+        if (!host) {
+          return;
+        }
+
+        const existingStyle = host.shadowRoot!.getElementById(
           STYLE_TEXT_ID,
         ) as HTMLStyleElement | null;
 
+        console.log('injectStyle called', host, host.shadowRoot, existingStyle);
+
         if (themeOverrides) {
           if (!existingStyle) {
-            const s = rootElement.ownerDocument.createElement("style");
+            console.log('Creating new style element');
+            const s = host.shadowRoot!.ownerDocument.createElement("style");
             s.id = STYLE_TEXT_ID;
             s.setAttribute("data-hash", themeOverridesHash);
             s.textContent = themeOverrides;
-            rootElement.appendChild(s);
+            host.shadowRoot!.appendChild(s);
           } else {
             const prevHash = existingStyle.getAttribute("data-hash") || "";
             if (prevHash !== themeOverridesHash) {
-              existingStyle.setAttribute("data-hash", themeOverridesHash);
+              console.log('Updating existing style element');
               existingStyle.textContent = themeOverrides;
             }
           }
         } else if (existingStyle) {
+          console.log('Removing existing style element');
           existingStyle.remove();
         }
       },
-      [themeOverrides, themeOverridesHash],
+      [host, themeOverrides, themeOverridesHash],
     );
 
     return (
@@ -211,6 +221,7 @@ export function withAiKitShell<P extends object>(
         variation={variation}
         overlayRootId="ai-kit-overlay-root"
         stylesheets={stylesheets}
+        setHost={setHost}
         rootElementId={
           variation === "modal" && !showOpenButton
             ? "ai-kit-portal-root"
@@ -218,7 +229,6 @@ export function withAiKitShell<P extends object>(
         }
       >
         {({ rootElement }) => {
-          injectStyle(rootElement);
           rootElement.setAttribute(
             "data-ai-kit-variation",
             variation || "default",