@smart-cloud/ai-kit-ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@smart-cloud/ai-kit-core": "^1.0.0",
+    "@smart-cloud/ai-kit-core": "^1.1.1",
     "@smart-cloud/wpsuite-core": "^2.0.5",
     "@tabler/icons-react": "^3.36.1",
     "react-markdown": "^10.1.0",

package/src/ShadowBoundary.tsx

@@ -13,7 +13,7 @@ export type ShadowBoundaryProps = {
   className?: string;
 
   /** Optional raw CSS text injected into the shadow root (as <style>). */
-  styleText?: string;
+  innerCSS?: string;
 
   /** ID of the element inside the shadow root used as the portal target. */
   rootElementId: string;
@@ -87,7 +87,7 @@ function installAiKitPropertyRegistry() {
   doc.head.appendChild(style);
 }
 
-// tiny stable hash to detect styleText changes without forcing huge deps churn
+// 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++) {
@@ -102,7 +102,7 @@ const STYLE_TEXT_ID = "ai-kit-style-text";
 export function ShadowBoundary({
   stylesheets,
   className,
-  styleText,
+  innerCSS,
   children,
   rootElementId,
   mode = "local",
@@ -119,9 +119,9 @@ export function ShadowBoundary({
     return all.join("|");
   }, [stylesheets]);
 
-  const styleTextHash = useMemo(() => {
-    return styleText ? hashStringDjb2(styleText) : "";
-  }, [styleText]);
+  const innerCSSHash = useMemo(() => {
+    return innerCSS ? hashStringDjb2(innerCSS) : "";
+  }, [innerCSS]);
 
   useLayoutEffect(() => {
     if (!hostRef.current) return;
@@ -179,17 +179,11 @@ export function ShadowBoundary({
     const applyScheme = () => {
       host.setAttribute("data-ai-kit-variation", readVariation() || "default");
       host.setAttribute("data-mantine-color-scheme", readScheme() || "auto");
-      if (className) {
-        host.className = className;
-      }
-      host.style.setProperty("outline", "none");
-      host.style.setProperty("box-shadow", "none");
-      host.style.setProperty("--mantine-color-body", "transparent");
     };
 
     applyScheme();
 
-    // Kövesd, ha a host dokumentumban változik a séma
+    // 4) Watch for scheme/variation changes
     const mo = new MutationObserver(applyScheme);
     mo.observe(rootEl, {
       attributes: true,
@@ -215,18 +209,18 @@ export function ShadowBoundary({
       STYLE_TEXT_ID,
     ) as HTMLStyleElement | null;
 
-    if (styleText) {
+    if (innerCSS) {
       if (!existingStyle) {
         const s = doc.createElement("style");
         s.id = STYLE_TEXT_ID;
-        s.setAttribute("data-hash", styleTextHash);
-        s.textContent = styleText;
+        s.setAttribute("data-hash", innerCSSHash);
+        s.textContent = innerCSS;
         rootEl.appendChild(s);
       } else {
         const prevHash = existingStyle.getAttribute("data-hash") || "";
-        if (prevHash !== styleTextHash) {
-          existingStyle.setAttribute("data-hash", styleTextHash);
-          existingStyle.textContent = styleText;
+        if (prevHash !== innerCSSHash) {
+          existingStyle.setAttribute("data-hash", innerCSSHash);
+          existingStyle.textContent = innerCSS;
         }
       }
     } else if (existingStyle) {
@@ -240,7 +234,7 @@ export function ShadowBoundary({
       mo.disconnect();
       mq?.removeEventListener?.("change", onMq);
     };
-  }, [mode, overlayRootId, rootElementId, stylesKey, styleText, styleTextHash]);
+  }, [mode, overlayRootId, rootElementId, stylesKey, innerCSS, innerCSSHash]);
 
   const emotionCache = useMemo(() => {
     if (!portalTarget) return null;
@@ -252,7 +246,15 @@ export function ShadowBoundary({
   }, [portalTarget, mode]);
 
   return (
-    <div ref={hostRef}>
+    <div
+      ref={hostRef}
+      className={className}
+      style={{
+        outline: "none",
+        boxShadow: "none",
+        backgroundColor: "transparent",
+      }}
+    >
       {portalTarget && shadowRoot && emotionCache
         ? createPortal(
             <CacheProvider value={emotionCache}>