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

package/package.json

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

@@ -1156,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} />
@@ -1202,12 +1203,17 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                     >
                       <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",
@@ -1238,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>
@@ -1291,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>
@@ -1302,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>
@@ -1356,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>
@@ -1390,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>
@@ -1402,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>
@@ -1420,6 +1436,7 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
                     variant="filled"
                     onClick={onSendOrCancel}
                     disabled={!isChatBusy && !canSend}
+                    data-ai-kit-send-button
                   >
                     {sendOrCancelLabel}
                   </Button>
@@ -1450,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>

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

@@ -609,6 +609,7 @@
 
 /* Header / status */
 .ai-chat-header-bar {
+  background: var(--ai-kit-chat-surface);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -704,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 {

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",
@@ -195,7 +244,6 @@ export function withAiKitShell<P extends object>(
               <MantineProvider
                 forceColorScheme={resolved}
                 theme={theme}
-                cssVariablesSelector={`#${rootElement.id}`}
                 getRootElement={() => rootElement as unknown as HTMLElement}
               >
                 <RootComponent