@smart-cloud/ai-kit-ui 1.1.3 → 1.1.5

package/package.json

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

package/src/ShadowBoundary.tsx

@@ -18,6 +18,8 @@ export type ShadowBoundaryProps = {
   /** ID of the element inside the shadow root used as the portal target. */
   rootElementId: string;
 
+  /** Variation of the shadow boundary behavior. */
+  variation?: "default" | "modal";
   /**
    * Where to create the shadow root:
    * - "local": attach shadow to this component's host element (keeps layout positioning).
@@ -106,6 +108,7 @@ export function ShadowBoundary({
   children,
   rootElementId,
   mode = "local",
+  variation = "default",
   overlayRootId = "ai-kit-overlay-root",
 }: ShadowBoundaryProps) {
   const hostRef = useRef<HTMLDivElement | null>(null);
@@ -144,8 +147,6 @@ export function ShadowBoundary({
         overlayHost.style.inset = "0";
         overlayHost.style.width = "0";
         overlayHost.style.height = "0";
-        overlayHost.style.zIndex = "2147483647"; // max z-index
-        overlayHost.style.pointerEvents = "none";
 
         doc.body.appendChild(overlayHost);
       }
@@ -154,6 +155,11 @@ export function ShadowBoundary({
       host = hostRef.current;
     }
 
+    if (variation === "modal") {
+      host.style.zIndex = "2147483647"; // max z-index
+      host.style.pointerEvents = "none";
+    }
+
     // 2) Ensure shadow root
     const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
 

package/src/ai-chatbot/AiChatbot.tsx

@@ -1033,7 +1033,10 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
     }
   }, [messages, lastUserSentAt, historyStorage]);
 
-  if (previewMode && !showChatbotPreview) {
+  if (
+    (previewMode && !showChatbotPreview) ||
+    (!previewMode && showChatbotPreview)
+  ) {
     return null;
   }
 

package/src/styles/ai-kit-ui.css

@@ -68,9 +68,12 @@
   --ai-kit-color-success: #22c55e;
 
   /* Brand / primary */
-  --ai-kit-color-primary: #228be6;
-  --ai-kit-color-primary-hover: #1971c2;
-  --ai-kit-color-primary-contrast: #fff;
+  --ai-kit-color-primary: var(--mantine-primary-color-filled, #1c7ed6);
+  --ai-kit-color-primary-hover: var(
+    --mantine-primary-color-filled-hover,
+    #1971c2
+  );
+  --ai-kit-color-primary-contrast: var(--mantine-primary-color-contrast, #fff);
 
   /* Back-compat aliases (existing names) */
   --ai-kit-text-color: var(--ai-kit-color-text);

package/src/withAiKitShell.tsx

@@ -162,6 +162,7 @@ export function withAiKitShell<P extends object>(
     return (
       <ShadowBoundary
         mode={variation === "modal" && !showOpenButton ? "overlay" : "local"}
+        variation={variation}
         overlayRootId="ai-kit-overlay-root"
         stylesheets={stylesheets}
         innerCSS={innerCSS}