@smart-cloud/ai-kit-ui 1.1.11 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -19,9 +19,11 @@
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@smart-cloud/ai-kit-core": "^1.1.4",
+    "@mantine/colors-generator": "^8.3.13",
+    "@smart-cloud/ai-kit-core": "^1.1.5",
     "@smart-cloud/wpsuite-core": "^2.0.5",
     "@tabler/icons-react": "^3.36.1",
+    "chroma-js": "^3.2.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",

package/src/ShadowBoundary.tsx

@@ -12,9 +12,6 @@ export type ShadowBoundaryProps = {
   /** Optional class name applied to the host element. */
   className?: string;
 
-  /** Optional raw CSS text injected into the shadow root (as <style>). */
-  innerCSS?: string;
-
   /** ID of the element inside the shadow root used as the portal target. */
   rootElementId: string;
 
@@ -89,22 +86,9 @@ function installAiKitPropertyRegistry() {
   doc.head.appendChild(style);
 }
 
-// tiny stable hash to detect innerCSS changes without forcing huge deps churn
-function hashStringDjb2(str: string): string {
-  let hash = 5381;
-  for (let i = 0; i < str.length; i++) {
-    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
-  }
-  // unsigned + base36
-  return (hash >>> 0).toString(36);
-}
-
-const STYLE_TEXT_ID = "ai-kit-style-text";
-
 export function ShadowBoundary({
   stylesheets,
   className,
-  innerCSS,
   children,
   rootElementId,
   mode = "local",
@@ -121,10 +105,6 @@ export function ShadowBoundary({
     return all.join("|");
   }, [stylesheets]);
 
-  const innerCSSHash = useMemo(() => {
-    return innerCSS ? hashStringDjb2(innerCSS) : "";
-  }, [innerCSS]);
-
   useLayoutEffect(() => {
     if (!hostRef.current) return;
 
@@ -206,29 +186,6 @@ export function ShadowBoundary({
       stylesKey ? stylesKey.split("|") : [],
     );
 
-    // 6) Optional: inject raw style text into the shadow root
-    const existingStyle = shadow.getElementById(
-      STYLE_TEXT_ID,
-    ) as HTMLStyleElement | null;
-
-    if (innerCSS) {
-      if (!existingStyle) {
-        const s = doc.createElement("style");
-        s.id = STYLE_TEXT_ID;
-        s.setAttribute("data-hash", innerCSSHash);
-        s.textContent = innerCSS;
-        rootEl.appendChild(s);
-      } else {
-        const prevHash = existingStyle.getAttribute("data-hash") || "";
-        if (prevHash !== innerCSSHash) {
-          existingStyle.setAttribute("data-hash", innerCSSHash);
-          existingStyle.textContent = innerCSS;
-        }
-      }
-    } else if (existingStyle) {
-      existingStyle.remove();
-    }
-
     setShadowRoot(shadow);
     setPortalTarget(rootEl);
 
@@ -236,7 +193,7 @@ export function ShadowBoundary({
       mo.disconnect();
       mq?.removeEventListener?.("change", onMq);
     };
-  }, [mode, overlayRootId, rootElementId, stylesKey, innerCSS, innerCSSHash]);
+  }, [mode, overlayRootId, rootElementId, stylesKey]);
 
   const emotionCache = useMemo(() => {
     if (!portalTarget) return null;

package/src/ai-chatbot/AiChatbot.tsx

@@ -57,7 +57,7 @@ const HISTORY_STORAGE_KEY = `ai-kit-chatbot-history-v1:${
   typeof window !== "undefined" ? window.location.hostname : "unknown"
 }`;
 
-const DEFAULT_LABELS: Required<AiChatbotLabels> = {
+export const DEFAULT_CHATBOT_LABELS: Required<AiChatbotLabels> = {
   modalTitle: "AI Assistant",
 
   userLabel: "User",
@@ -234,7 +234,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   } = props;
 
   const labels = useMemo(
-    () => ({ ...DEFAULT_LABELS, ...(labelsOverride || {}) }),
+    () => ({ ...DEFAULT_CHATBOT_LABELS, ...(labelsOverride || {}) }),
     [labelsOverride],
   );
 
@@ -253,6 +253,10 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   const [opened, setOpened] = useState(false);
   const [stickToBottom, setStickToBottom] = useState(true);
 
+  const [wheelHostEl, setWheelHostEl] = useState<HTMLDivElement | null>(null);
+  const [scrollerEl, setScrollerEl] = useState<HTMLDivElement | null>(null);
+  const [bodyScrollable, setBodyScrollable] = useState(false);
+
   const [activeOp, setActiveOp] = useState<ActiveOp>(null);
   const activeOpRef = useRef<ActiveOp>(activeOp);
   useEffect(() => {
@@ -267,7 +271,6 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const questionInputRef = useRef<HTMLTextAreaElement>(null);
   const sessionRef = useRef<{ id: string; storedAt: number } | null>(null);
-  const chatScrollRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
 
   // New: persist timestamp of last actually-sent user message
@@ -356,18 +359,13 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
       const viewportMax = Math.floor(vh * 0.8);
       const target = Math.max(minHeight, Math.min(viewportMax, maxHeightCap));
       el.style.height = `${target}px`;
-      const scrollEl = chatScrollRef.current;
-      if (scrollEl) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        scrollEl.offsetHeight;
-      }
     } catch {
       // ignore
     }
   }, []);
 
   const scrollToBottom = useCallback(() => {
-    const el = chatScrollRef.current;
+    const el = scrollerEl;
     if (!el) return;
     window.setTimeout(() => {
       try {
@@ -376,7 +374,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
         // ignore
       }
     }, 50);
-  }, []);
+  }, [scrollerEl]);
 
   const closeModal = useCallback(() => {
     setOpened(false);
@@ -393,19 +391,12 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   }, [opened, adjustChatHeight]);
 
   useEffect(() => {
-    if (!opened) return;
+    if (!opened || !isMaximized) return;
     document.body.style.overflow = "hidden";
-    document.body.onkeydown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        closeModal();
-      }
-    };
     return () => {
       document.body.style.overflow = "";
-      document.body.onkeydown = null;
     };
-  }, [opened, closeModal]);
+  }, [opened, isMaximized, closeModal]);
 
   const imagePreviews = useMemo(() => {
     if (
@@ -435,7 +426,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   }, [imagePreviews]);
 
   useEffect(() => {
-    const el = chatScrollRef.current;
+    const el = scrollerEl;
     if (!el) return;
     const handleScroll = () => {
       const distanceFromBottom =
@@ -446,16 +437,16 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
     return () => {
       el.removeEventListener("scroll", handleScroll);
     };
-  }, [opened]);
+  }, [opened, scrollerEl]);
 
   useEffect(() => {
     if (!stickToBottom) return;
-    const el = chatScrollRef.current;
+    const el = scrollerEl;
     if (!el) return;
     if (el.scrollHeight > el.clientHeight) {
       el.scrollTop = el.scrollHeight;
     }
-  }, [messages, ai.busy, stickToBottom]);
+  }, [messages, ai.busy, stickToBottom, scrollerEl]);
 
   const statusText = useMemo(() => {
     if (!ai.busy) return null;
@@ -849,10 +840,16 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
   const renderOpenButtonIcon = useMemo(() => {
     if (!showOpenButtonIcon) return null;
     if (openButtonIcon) {
-      return <span dangerouslySetInnerHTML={{ __html: openButtonIcon }} />;
+      return (
+        <img
+          src={openButtonIcon}
+          className="ai-open-btn-icon"
+          alt={I18n.get(labels.askMeLabel || openButtonLabel)}
+        />
+      );
     }
     return <IconMessage size={18} />;
-  }, [showOpenButtonIcon, openButtonIcon]);
+  }, [showOpenButtonIcon, openButtonIcon, labels, openButtonLabel, language]);
 
   const openButtonContent = useMemo(() => {
     const iconEl = renderOpenButtonIcon;
@@ -942,6 +939,69 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
     void ask();
   }, [isChatBusy, cancelChat, ask]);
 
+  useEffect(() => {
+    if (!opened) return;
+    if (!wheelHostEl || !scrollerEl) return;
+
+    const isScrollableNow = () => {
+      const cs = window.getComputedStyle(scrollerEl);
+      const overflowY = cs.overflowY;
+      const canOverflow = overflowY === "auto" || overflowY === "scroll";
+
+      const sh = Math.ceil(scrollerEl.scrollHeight);
+      const ch = Math.floor(scrollerEl.clientHeight);
+      const hasOverflow = sh > ch;
+      return canOverflow && hasOverflow;
+    };
+    let enabled = false;
+
+    const onWheel = (e: WheelEvent) => {
+      if (!isScrollableNow()) return;
+
+      e.preventDefault();
+
+      const max = scrollerEl.scrollHeight - scrollerEl.clientHeight;
+      scrollerEl.scrollTop = Math.max(
+        0,
+        Math.min(max, scrollerEl.scrollTop + e.deltaY),
+      );
+    };
+
+    const sync = () => {
+      const shouldEnable = isScrollableNow();
+      setBodyScrollable(shouldEnable);
+      if (shouldEnable === enabled) return;
+      enabled = shouldEnable;
+      if (enabled) {
+        wheelHostEl.addEventListener("wheel", onWheel, { passive: false });
+      } else {
+        wheelHostEl.removeEventListener("wheel", onWheel as EventListener);
+      }
+    };
+
+    sync();
+
+    const ro = new ResizeObserver(sync);
+    ro.observe(scrollerEl);
+
+    const mo = new MutationObserver(sync);
+    mo.observe(scrollerEl, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    window.addEventListener("resize", sync);
+
+    return () => {
+      if (enabled)
+        wheelHostEl.removeEventListener("wheel", onWheel as EventListener);
+      ro.disconnect();
+      mo.disconnect();
+      window.removeEventListener("resize", sync);
+    };
+  }, [opened, wheelHostEl, scrollerEl]);
+
   // -----------------------------
   // History persistence
   // -----------------------------
@@ -1063,6 +1123,9 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
         <Modal.Root
           ref={chatContainerRef}
           opened={opened}
+          lockScroll={false}
+          trapFocus={false}
+          closeOnEscape={true}
           onClose={closeModal}
           className={
             rootClassName +
@@ -1074,7 +1137,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
           data-ai-kit-theme={colorMode}
           data-ai-kit-variation="modal"
         >
-          <Modal.Body className="ai-chat-container-internal">
+          <div className="ai-chat-container-internal" ref={setWheelHostEl}>
             <Modal.Header className="ai-chat-header-bar">
               <Modal.Title className="ai-chat-title">{modalTitle}</Modal.Title>
               <Group gap="4px" align="center" justify="center">
@@ -1093,6 +1156,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                         ? I18n.get(labels.restoreSizeLabel)
                         : I18n.get(labels.maximizeLabel)
                     }
+                    data-ai-kit-maximize-button
                   >
                     {isMaximized ? (
                       <IconMinimize size={16} />
@@ -1107,7 +1171,11 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
               </Group>
             </Modal.Header>
 
-            <Modal.Body className="ai-chat-scroll" ref={chatScrollRef}>
+            <Modal.Body
+              className="ai-chat-scroll"
+              ref={setScrollerEl}
+              data-scrollable={bodyScrollable ? "true" : "false"}
+            >
               {messages.map((msg) => {
                 const isUser = msg.role === "user";
                 const isLastCanceled =
@@ -1129,16 +1197,23 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                   >
                     <Stack
                       gap={4}
-                      style={{ alignItems: isUser ? "flex-end" : "flex-start" }}
+                      style={{
+                        alignItems: isUser ? "flex-end" : "flex-start",
+                      }}
                     >
                       <Stack className="ai-chat-bubble">
                         <Text className="ai-chat-header">
-                          <Text fw="bolder" size="xs">
+                          <Text
+                            fw="bolder"
+                            size="xs"
+                            style={{ whiteSpace: "nowrap" }}
+                          >
                             {isUser
                               ? I18n.get(labels.userLabel)
                               : I18n.get(labels.assistantLabel)}
                           </Text>
-                          <Text size="xs">
+                          &nbsp;
+                          <Text size="xs" style={{ whiteSpace: "nowrap" }}>
                             {new Date(msg.createdAt).toLocaleTimeString([], {
                               hour: "2-digit",
                               minute: "2-digit",
@@ -1169,6 +1244,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                               onClick={() => handleEditCanceled(msg)}
                               title={I18n.get(labels.editLabel)}
                               aria-label={I18n.get(labels.editLabel)}
+                              data-ai-kit-edit-button
                             >
                               <IconPencil size={14} />
                             </ActionIcon>
@@ -1222,6 +1298,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                             onClick={() => updateFeedback(msg.id, "accepted")}
                             aria-label={I18n.get(labels.acceptResponseLabel)}
                             disabled={ai.busy}
+                            data-ai-kit-feedback-accept-button
                           >
                             👍
                           </Button>
@@ -1233,6 +1310,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                             onClick={() => updateFeedback(msg.id, "rejected")}
                             aria-label={I18n.get(labels.rejectResponseLabel)}
                             disabled={ai.busy}
+                            data-ai-kit-feedback-reject-button
                           >
                             👎
                           </Button>
@@ -1287,13 +1365,18 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                   {I18n.get("Are you sure you want to reset the conversation?")}
                 </Text>
                 <Group justify="flex-end" mt="md">
-                  <Button variant="default" onClick={cancelReset}>
+                  <Button
+                    variant="default"
+                    onClick={cancelReset}
+                    data-ai-kit-no-button
+                  >
                     {I18n.get("No")}
                   </Button>
                   <Button
-                    color="red"
+                    color="var(--ai-kit-color-danger, red)"
                     onClick={confirmReset}
                     disabled={!hasMessages && !isChatBusy}
+                    data-ai-kit-yes-button
                   >
                     {I18n.get("Yes")}
                   </Button>
@@ -1321,6 +1404,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                     leftSection={<IconTrash size={18} />}
                     onClick={handleResetClick}
                     disabled={!hasMessages && !isChatBusy}
+                    data-ai-kit-reset-button
                   >
                     {I18n.get(labels.resetLabel)}
                   </Button>
@@ -1333,6 +1417,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                     onClick={() => fileInputRef.current?.click()}
                     disabled={images.length >= resolvedMaxImages}
                     title={I18n.get(labels.addImageLabel)}
+                    data-ai-kit-add-image-button
                   >
                     {I18n.get(labels.addLabel)}
                   </Button>
@@ -1351,6 +1436,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                     variant="filled"
                     onClick={onSendOrCancel}
                     disabled={!isChatBusy && !canSend}
+                    data-ai-kit-send-button
                   >
                     {sendOrCancelLabel}
                   </Button>
@@ -1381,6 +1467,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                         p={0}
                         className="remove-image-button"
                         title={I18n.get(labels.removeImageLabel)}
+                        data-ai-kit-remove-image-button
                       >
                         X
                       </Button>
@@ -1389,7 +1476,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                 </Group>
               )}
             </Stack>
-          </Modal.Body>
+          </div>
         </Modal.Root>
       )}
     </Group>

package/src/ai-chatbot/index.tsx

@@ -1 +1 @@
-export { AiChatbot } from "./AiChatbot";
+export { AiChatbot, DEFAULT_CHATBOT_LABELS } from "./AiChatbot";

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

@@ -129,7 +129,7 @@
   /* Sizing */
   --ai-kit-chat-launcher-size: 60px;
 
-  --ai-kit-chat-width: 400px;
+  --ai-kit-chat-width: 480px;
   --ai-kit-chat-height-min: 360px;
   --ai-kit-chat-height-max: 80vh;
   --ai-kit-chat-height-cap: 1000px;
@@ -376,6 +376,16 @@
   display: contents;
 }
 
+.ai-docs-ask[data-ai-kit-theme="dark"] {
+  --ai-kit-chat-status-fg: var(--ai-kit-color-text);
+  --ai-kit-chat-status-bg: transparent;
+}
+
+.ai-open-btn-icon {
+  width: 24px;
+  height: 24px;
+}
+
 .ai-docs-ask.ai-open-btn--bottom-right {
   --ai-kit-pos-top: auto;
   --ai-kit-pos-right: var(--ai-kit-open-button-offset-x);
@@ -428,8 +438,8 @@
 
   z-index: var(--ai-kit-position-z-index);
 
-  width: var(--ai-kit-chat-launcher-size);
-  height: var(--ai-kit-chat-launcher-size);
+  width: auto;
+  height: auto;
 
   /* Radius: apply both border-radius and Mantine variable */
   border-radius: var(--ai-kit-launcher-radius) !important;
@@ -453,7 +463,7 @@
     box-shadow 0.2s ease,
     background 0.2s ease;
 
-  padding: 0;
+  padding: var(--ai-kit-space-3);
   pointer-events: auto;
 }
 
@@ -541,6 +551,7 @@
   margin-right: auto;
   margin-left: auto;
   flex-direction: column;
+  padding: 0 var(--ai-kit-space-3) var(--ai-kit-space-3) var(--ai-kit-space-3);
 }
 
 /* Input Box */
@@ -598,11 +609,14 @@
 
 /* Header / status */
 .ai-chat-header-bar {
+  background: var(--ai-kit-chat-surface);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--ai-kit-space-3) var(--ai-kit-space-3) var(--ai-kit-space-4);
+  padding: 0 var(--ai-kit-space-3);
   border-bottom: 1px solid var(--ai-kit-chat-border-color);
+  margin-left: calc(-1 * var(--ai-kit-button-padding-x));
+  margin-right: calc(-1 * var(--ai-kit-button-padding-x));
 }
 
 .ai-status-line {
@@ -655,6 +669,11 @@
   flex: 1;
   overflow-y: auto;
   padding: var(--ai-kit-space-4);
+  overscroll-behavior: auto;
+}
+
+.ai-chat-scroll[data-scrollable="true"] {
+  overscroll-behavior: contain;
 }
 
 .ai-chat-placeholder {
@@ -676,7 +695,6 @@
 }
 
 .ai-chat-bubble {
-  max-width: 85%;
   padding: 10px 12px;
   border-radius: var(--ai-kit-radius-sm);
   background: var(--ai-kit-assistant-bubble-bg);
@@ -687,6 +705,8 @@
   word-break: break-word;
   hyphens: auto;
   line-height: var(--ai-kit-line-height);
+  width: fit-content;
+  max-width: 80%;
 }
 
 .ai-chat-row.user .ai-chat-bubble {
@@ -781,7 +801,7 @@
 
 .ai-status-text {
   font-size: 0.85rem;
-  color: var(--ai-kit-color-text-muted);
+  color: var(--ai-kit-color-text);
 }
 
 .ai-feedback {

package/src/withAiKitShell.tsx

@@ -1,3 +1,4 @@
+import { generateColors } from "@mantine/colors-generator";
 import {
   colorsTuple,
   createTheme,
@@ -13,7 +14,7 @@ import {
 } from "@smart-cloud/ai-kit-core";
 import { useSelect } from "@wordpress/data";
 import { I18n } from "aws-amplify/utils";
-import { type ComponentType, useMemo, useState } from "react";
+import { type ComponentType, useCallback, useMemo, useState } from "react";
 import { ShadowBoundary } from "./ShadowBoundary";
 
 export type AiKitShellInjectedProps = {
@@ -21,6 +22,17 @@ export type AiKitShellInjectedProps = {
   rootElement: HTMLElement;
 };
 
+function hashStringDjb2(str: string): string {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
+  }
+  // unsigned + base36
+  return (hash >>> 0).toString(36);
+}
+
+const STYLE_TEXT_ID = "ai-kit-style-text";
+
 export function withAiKitShell<P extends object>(
   RootComponent: ComponentType<P & AiKitShellInjectedProps>,
   propOverrides?: Partial<AiWorkerProps>,
@@ -96,10 +108,16 @@ export function withAiKitShell<P extends object>(
     if (colors) {
       customColors = {};
       Object.keys(colors).forEach((c) => {
-        customColors![c] = colorsTuple(colors[c]);
+        try {
+          customColors![c] = generateColors(colors[c]);
+        } catch {
+          customColors![c] = colorsTuple(colors[c]);
+        }
       });
     }
 
+    console.log("withAiKitShell rendered", { customColors });
+
     const theme = createTheme({
       respectReducedMotion: true,
       ...(customColors && { colors: customColors }),
@@ -159,13 +177,43 @@ export function withAiKitShell<P extends object>(
       },
     });
 
+    const innerCSSHash = useMemo(() => {
+      return innerCSS ? hashStringDjb2(innerCSS) : "";
+    }, [innerCSS]);
+
+    const injectStyle = useCallback(
+      (rootElement: HTMLDivElement) => {
+        const existingStyle = rootElement.ownerDocument.getElementById(
+          STYLE_TEXT_ID,
+        ) as HTMLStyleElement | null;
+
+        if (innerCSS) {
+          if (!existingStyle) {
+            const s = rootElement.ownerDocument.createElement("style");
+            s.id = STYLE_TEXT_ID;
+            s.setAttribute("data-hash", innerCSSHash);
+            s.textContent = innerCSS;
+            rootElement.appendChild(s);
+          } else {
+            const prevHash = existingStyle.getAttribute("data-hash") || "";
+            if (prevHash !== innerCSSHash) {
+              existingStyle.setAttribute("data-hash", innerCSSHash);
+              existingStyle.textContent = innerCSS;
+            }
+          }
+        } else if (existingStyle) {
+          existingStyle.remove();
+        }
+      },
+      [innerCSS, innerCSSHash],
+    );
+
     return (
       <ShadowBoundary
         mode={variation === "modal" && !showOpenButton ? "overlay" : "local"}
         variation={variation}
         overlayRootId="ai-kit-overlay-root"
         stylesheets={stylesheets}
-        innerCSS={innerCSS}
         className={className}
         rootElementId={
           variation === "modal" && !showOpenButton
@@ -174,6 +222,7 @@ export function withAiKitShell<P extends object>(
         }
       >
         {({ rootElement }) => {
+          injectStyle(rootElement);
           rootElement.setAttribute(
             "data-ai-kit-variation",
             variation || "default",
@@ -183,16 +232,23 @@ export function withAiKitShell<P extends object>(
             rootElement.setAttribute("lang", currentLanguage);
           }
 
+          const resolved =
+            colorMode === "auto"
+              ? window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
+                ? "dark"
+                : "light"
+              : colorMode;
+
           return (
             <DirectionProvider initialDirection={currentDirection}>
               <MantineProvider
-                defaultColorScheme={colorMode}
+                forceColorScheme={resolved}
                 theme={theme}
-                cssVariablesSelector={`#${rootElement.id}`}
                 getRootElement={() => rootElement as unknown as HTMLElement}
               >
                 <RootComponent
                   {...props}
+                  colorMode={resolved}
                   language={currentLanguage}
                   rootElement={rootElement}
                 />