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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,7 +20,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@mantine/colors-generator": "^8.3.13",
-    "@smart-cloud/ai-kit-core": "^1.1.6",
+    "@smart-cloud/ai-kit-core": "^1.1.7",
     "@smart-cloud/wpsuite-core": "^2.0.5",
     "@tabler/icons-react": "^3.36.1",
     "chroma-js": "^3.2.0",

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";
@@ -9,9 +9,6 @@ export type ShadowBoundaryProps = {
   /** Stylesheets to inject into the shadow root (as <link rel="stylesheet">). */
   stylesheets: string[];
 
-  /** Optional class name applied to the host element. */
-  className?: string;
-
   /** ID of the element inside the shadow root used as the portal target. */
   rootElementId: string;
 
@@ -30,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;
@@ -88,11 +86,11 @@ function installAiKitPropertyRegistry() {
 
 export function ShadowBoundary({
   stylesheets,
-  className,
   children,
   rootElementId,
   mode = "local",
   overlayRootId = "ai-kit-overlay-root",
+  setHost,
 }: ShadowBoundaryProps) {
   const hostRef = useRef<HTMLDivElement | null>(null);
 
@@ -135,6 +133,7 @@ export function ShadowBoundary({
     } else {
       host = hostRef.current;
     }
+    setHost(host);
 
     // 2) Ensure shadow root
     const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
@@ -207,7 +206,6 @@ export function ShadowBoundary({
   return (
     <div
       ref={hostRef}
-      className={className}
       style={{
         outline: "none",
         boxShadow: "none",
@@ -216,11 +214,11 @@ export function ShadowBoundary({
     >
       {portalTarget && shadowRoot && emotionCache
         ? createPortal(
-            <CacheProvider value={emotionCache}>
-              {children({ rootElement: portalTarget, shadowRoot })}
-            </CacheProvider>,
-            portalTarget,
-          )
+          <CacheProvider value={emotionCache}>
+            {children({ rootElement: portalTarget, shadowRoot })}
+          </CacheProvider>,
+          portalTarget,
+        )
         : null}
     </div>
   );

package/src/ai-chatbot/AiChatbot.tsx

@@ -53,9 +53,8 @@ const TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1000;
 
 // New: history storage support
 const DEFAULT_HISTORY_STORAGE: HistoryStorageMode = "localstorage";
-const HISTORY_STORAGE_KEY = `ai-kit-chatbot-history-v1:${
-  typeof window !== "undefined" ? window.location.hostname : "unknown"
-}`;
+const HISTORY_STORAGE_KEY = `ai-kit-chatbot-history-v1:${typeof window !== "undefined" ? window.location.hostname : "unknown"
+  }`;
 
 export const DEFAULT_CHATBOT_LABELS: Required<AiChatbotLabels> = {
   modalTitle: "AI Assistant",
@@ -216,7 +215,6 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
     openButtonIcon,
     showOpenButtonTitle = true,
     showOpenButtonIcon = true,
-    className,
     colorMode,
     language,
     onClose,
@@ -346,8 +344,8 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   const rootClassName = useMemo(() => {
     const base = "ai-docs-ask";
     const pos = `ai-open-btn--${openButtonPosition}`;
-    return className ? `${base} ${pos} ${className}` : `${base} ${pos}`;
-  }, [className, openButtonPosition]);
+    return `${base} ${pos}`;
+  }, [openButtonPosition]);
 
   const adjustChatHeight = useCallback(() => {
     const el = chatContainerRef.current;
@@ -597,7 +595,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
       try {
         const activeSessionId =
           sessionRef.current &&
-          Date.now() - sessionRef.current.storedAt < TWENTY_FOUR_HOURS_MS
+            Date.now() - sessionRef.current.storedAt < TWENTY_FOUR_HOURS_MS
             ? sessionRef.current.id
             : undefined;
         if (!activeSessionId) return;
@@ -682,7 +680,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
     try {
       const activeSessionId =
         sessionRef.current &&
-        Date.now() - sessionRef.current.storedAt < TWENTY_FOUR_HOURS_MS
+          Date.now() - sessionRef.current.storedAt < TWENTY_FOUR_HOURS_MS
           ? sessionRef.current.id
           : undefined;
 

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 = {
@@ -47,12 +47,12 @@ export function withAiKitShell<P extends object>(
       colorMode,
       primaryColor,
       primaryShade,
-      className,
-      innerCSS,
+      themeOverrides,
       language,
       direction,
     } = { ...props, ...propOverrides } as AiWorkerProps & P;
 
+    const [host, setHost] = useState<HTMLElement | null>(null);
     const languageInStore: string | undefined | null = useSelect(() =>
       getStoreSelect(store).getLanguage(),
     );
@@ -126,19 +126,19 @@ export function withAiKitShell<P extends object>(
         ].includes(primaryColor) && { primaryColor }),
       ...(primaryShade &&
         Object.keys(primaryShade).length > 0 && {
-          primaryShade: {
-            light:
-              primaryShade.light ??
-              (typeof DEFAULT_THEME.primaryShade === "object"
-                ? DEFAULT_THEME.primaryShade.light
-                : (DEFAULT_THEME.primaryShade ?? 6)),
-            dark:
-              primaryShade.dark ??
-              (typeof DEFAULT_THEME.primaryShade === "object"
-                ? DEFAULT_THEME.primaryShade.dark
-                : (DEFAULT_THEME.primaryShade ?? 6)),
-          },
-        }),
+        primaryShade: {
+          light:
+            primaryShade.light ??
+            (typeof DEFAULT_THEME.primaryShade === "object"
+              ? DEFAULT_THEME.primaryShade.light
+              : (DEFAULT_THEME.primaryShade ?? 6)),
+          dark:
+            primaryShade.dark ??
+            (typeof DEFAULT_THEME.primaryShade === "object"
+              ? DEFAULT_THEME.primaryShade.dark
+              : (DEFAULT_THEME.primaryShade ?? 6)),
+        },
+      }),
       components: {
         Button: {
           styles: { root: { borderRadius: "inherit" } },
@@ -175,35 +175,44 @@ export function withAiKitShell<P extends object>(
       },
     });
 
-    const innerCSSHash = useMemo(() => {
-      return innerCSS ? hashStringDjb2(innerCSS) : "";
-    }, [innerCSS]);
+    const themeOverridesHash = useMemo(() => {
+      return themeOverrides ? hashStringDjb2(themeOverrides) : "";
+    }, [themeOverrides]);
+
+    useEffect(
+      () => {
 
-    const injectStyle = useCallback(
-      (rootElement: HTMLDivElement) => {
-        const existingStyle = rootElement.ownerDocument.getElementById(
+        if (!host) {
+          return;
+        }
+
+        const existingStyle = host.shadowRoot!.getElementById(
           STYLE_TEXT_ID,
         ) as HTMLStyleElement | null;
 
-        if (innerCSS) {
+        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", innerCSSHash);
-            s.textContent = innerCSS;
-            rootElement.appendChild(s);
+            s.setAttribute("data-hash", themeOverridesHash);
+            s.textContent = themeOverrides;
+            host.shadowRoot!.appendChild(s);
           } else {
             const prevHash = existingStyle.getAttribute("data-hash") || "";
-            if (prevHash !== innerCSSHash) {
-              existingStyle.setAttribute("data-hash", innerCSSHash);
-              existingStyle.textContent = innerCSS;
+            if (prevHash !== themeOverridesHash) {
+              console.log('Updating existing style element');
+              existingStyle.textContent = themeOverrides;
             }
           }
         } else if (existingStyle) {
+          console.log('Removing existing style element');
           existingStyle.remove();
         }
       },
-      [innerCSS, innerCSSHash],
+      [host, themeOverrides, themeOverridesHash],
     );
 
     return (
@@ -212,7 +221,7 @@ export function withAiKitShell<P extends object>(
         variation={variation}
         overlayRootId="ai-kit-overlay-root"
         stylesheets={stylesheets}
-        className={className}
+        setHost={setHost}
         rootElementId={
           variation === "modal" && !showOpenButton
             ? "ai-kit-portal-root"
@@ -220,7 +229,6 @@ export function withAiKitShell<P extends object>(
         }
       >
         {({ rootElement }) => {
-          injectStyle(rootElement);
           rootElement.setAttribute(
             "data-ai-kit-variation",
             variation || "default",
@@ -258,8 +266,7 @@ export function withAiKitShell<P extends object>(
     );
   };
 
-  Wrapped.displayName = `withAiKitShell(${
-    RootComponent.displayName ?? RootComponent.name ?? "Component"
-  })`;
+  Wrapped.displayName = `withAiKitShell(${RootComponent.displayName ?? RootComponent.name ?? "Component"
+    })`;
   return Wrapped;
 }