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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "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.1.4",
+    "@smart-cloud/ai-kit-core": "^1.1.5",
     "@smart-cloud/wpsuite-core": "^2.0.5",
     "@tabler/icons-react": "^3.36.1",
     "react-markdown": "^10.1.0",

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,9 +1123,13 @@ const AiChatbotBase: FC<AiChatbotProps & AiKitShellInjectedProps> = (props) => {
         <Modal.Root
           ref={chatContainerRef}
           opened={opened}
+          lockScroll={false}
+          trapFocus={false}
+          closeOnEscape={true}
           onClose={closeModal}
           className={
-            "ai-chat-container" +
+            rootClassName +
+            " ai-chat-container" +
             (isMaximized ? " maximized" : "") +
             (isMaximized && maxEnter ? " ai-max-enter" : "")
           }
@@ -1073,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">
@@ -1106,7 +1170,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 =
@@ -1128,7 +1196,9 @@ 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">
@@ -1388,7 +1458,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 */
@@ -601,8 +612,10 @@
   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 +668,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 +694,6 @@
 }
 
 .ai-chat-bubble {
-  max-width: 85%;
   padding: 10px 12px;
   border-radius: var(--ai-kit-radius-sm);
   background: var(--ai-kit-assistant-bubble-bg);
@@ -781,7 +798,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

@@ -183,16 +183,24 @@ 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}
                 />