@xbrain-swe/nova-chat-widget 0.1.2 → 0.1.4

package/dist/index.d.cts

@@ -43,6 +43,10 @@ type FactValue = unknown | (() => unknown);
 type XbNovaTheme = {
     accentFrom: string;
     accentTo: string;
+    /** 위젯의 라이트/다크. `"system"`(기본)은 브라우저·OS 설정을 따른다 — 호스트 사이트가 다크
+     * 모드를 지원하지 않는데 사용자 OS만 다크이면 사이트는 밝은데 위젯만 어두워진다. 그런 사이트는
+     * `"light"`로 고정하고, 사이트 자체 테마를 가진 호스트는 그 값을 넘기면 된다. */
+    colorScheme: "light" | "dark" | "system";
 };
 
 declare function XbNovaProvider({ apiKey, botId, appId, screen, apiBaseUrl, clientActions, theme, children, }: {

package/dist/index.d.ts

@@ -43,6 +43,10 @@ type FactValue = unknown | (() => unknown);
 type XbNovaTheme = {
     accentFrom: string;
     accentTo: string;
+    /** 위젯의 라이트/다크. `"system"`(기본)은 브라우저·OS 설정을 따른다 — 호스트 사이트가 다크
+     * 모드를 지원하지 않는데 사용자 OS만 다크이면 사이트는 밝은데 위젯만 어두워진다. 그런 사이트는
+     * `"light"`로 고정하고, 사이트 자체 테마를 가진 호스트는 그 값을 넘기면 된다. */
+    colorScheme: "light" | "dark" | "system";
 };
 
 declare function XbNovaProvider({ apiKey, botId, appId, screen, apiBaseUrl, clientActions, theme, children, }: {

package/dist/index.js

@@ -11,7 +11,8 @@ import { createContext, useContext, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_THEME = {
   accentFrom: "#4f46e5",
-  accentTo: "#7c3aed"
+  accentTo: "#7c3aed",
+  colorScheme: "system"
 };
 var InternalContext = createContext(null);
 function useXbNovaInternal() {
@@ -921,10 +922,25 @@ function loadCss() {
   }
   return cssPromise;
 }
+function useResolvedScheme(scheme) {
+  const [systemDark, setSystemDark] = useState2(false);
+  useEffect6(() => {
+    if (scheme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemDark(mq.matches);
+    const onChange = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [scheme]);
+  if (scheme === "system") return systemDark ? "dark" : "light";
+  return scheme;
+}
 function XbNovaShadowRoot({
   children,
   style
 }) {
+  const { theme } = useXbNovaInternal();
+  const scheme = useResolvedScheme(theme.colorScheme);
   const hostRef = useRef6(null);
   const [mountNode, setMountNode] = useState2(null);
   const [portalTarget, setPortalTarget] = useState2(null);
@@ -946,6 +962,11 @@ function XbNovaShadowRoot({
     shadow.appendChild(mount);
     setMountNode(mount);
   }, [portalTarget]);
+  useEffect6(() => {
+    if (!mountNode) return;
+    mountNode.dataset.xbnovaScheme = scheme;
+    mountNode.style.colorScheme = scheme;
+  }, [mountNode, scheme]);
   if (!portalTarget) return null;
   return createPortal(
     /* @__PURE__ */ jsx5("div", { ref: hostRef, style, children: mountNode ? createPortal(children, mountNode) : null }),
@@ -1715,7 +1736,7 @@ function XbNovaChat({
                     onChange: (e) => setInput(e.target.value),
                     placeholder: "\uC774 \uCC28\uC5D0 \uB300\uD574 \uBB34\uC5C7\uC774\uB4E0 \uBB3C\uC5B4\uBCF4\uC138\uC694",
                     disabled: busy,
-                    className: "xbnova-input-accent flex-1 rounded-full border border-neutral-300 px-3.5 py-2 text-sm outline-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-800"
+                    className: "xbnova-input-accent flex-1 rounded-full border border-neutral-300 bg-white px-3.5 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-500"
                   }
                 ),
                 /* @__PURE__ */ jsx7(