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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "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

@@ -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;
 
@@ -88,7 +85,6 @@ function installAiKitPropertyRegistry() {
 
 export function ShadowBoundary({
   stylesheets,
-  className,
   children,
   rootElementId,
   mode = "local",
@@ -207,7 +203,6 @@ export function ShadowBoundary({
   return (
     <div
       ref={hostRef}
-      className={className}
       style={{
         outline: "none",
         boxShadow: "none",
@@ -216,11 +211,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

@@ -47,8 +47,7 @@ export function withAiKitShell<P extends object>(
       colorMode,
       primaryColor,
       primaryShade,
-      className,
-      innerCSS,
+      themeOverrides,
       language,
       direction,
     } = { ...props, ...propOverrides } as AiWorkerProps & P;
@@ -126,19 +125,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,9 +174,9 @@ export function withAiKitShell<P extends object>(
       },
     });
 
-    const innerCSSHash = useMemo(() => {
-      return innerCSS ? hashStringDjb2(innerCSS) : "";
-    }, [innerCSS]);
+    const themeOverridesHash = useMemo(() => {
+      return themeOverrides ? hashStringDjb2(themeOverrides) : "";
+    }, [themeOverrides]);
 
     const injectStyle = useCallback(
       (rootElement: HTMLDivElement) => {
@@ -185,25 +184,25 @@ export function withAiKitShell<P extends object>(
           STYLE_TEXT_ID,
         ) as HTMLStyleElement | null;
 
-        if (innerCSS) {
+        if (themeOverrides) {
           if (!existingStyle) {
             const s = rootElement.ownerDocument.createElement("style");
             s.id = STYLE_TEXT_ID;
-            s.setAttribute("data-hash", innerCSSHash);
-            s.textContent = innerCSS;
+            s.setAttribute("data-hash", themeOverridesHash);
+            s.textContent = themeOverrides;
             rootElement.appendChild(s);
           } else {
             const prevHash = existingStyle.getAttribute("data-hash") || "";
-            if (prevHash !== innerCSSHash) {
-              existingStyle.setAttribute("data-hash", innerCSSHash);
-              existingStyle.textContent = innerCSS;
+            if (prevHash !== themeOverridesHash) {
+              existingStyle.setAttribute("data-hash", themeOverridesHash);
+              existingStyle.textContent = themeOverrides;
             }
           }
         } else if (existingStyle) {
           existingStyle.remove();
         }
       },
-      [innerCSS, innerCSSHash],
+      [themeOverrides, themeOverridesHash],
     );
 
     return (
@@ -212,7 +211,6 @@ export function withAiKitShell<P extends object>(
         variation={variation}
         overlayRootId="ai-kit-overlay-root"
         stylesheets={stylesheets}
-        className={className}
         rootElementId={
           variation === "modal" && !showOpenButton
             ? "ai-kit-portal-root"
@@ -258,8 +256,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;
 }