@agentforge-io/chat-sdk 2.3.0 → 2.3.1

package/dist/ChatDrawer.d.ts

@@ -37,7 +37,7 @@
  *     decides what trigger UX makes sense (button, input pill, FAB, etc.)
  *     and calls `onOpenChange(true)`.
  */
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type ChatWidgetProps } from './react';
 /**
  * Drawer accepts the chat surface in two shapes:
@@ -86,6 +86,18 @@ export type ChatDrawerProps = ChatSurface & {
      *  add a custom shadow / border colour. The CSS vars on `--af-*` already
      *  let you re-theme the chat widget itself; this is for the SURROUND. */
     drawerClassName?: string;
+    /** Inline style applied to the drawer surface — typically the host's
+     *  bundle of `--af-bg`, `--af-fg`, `--af-bubble-*`, etc. CSS vars.
+     *  Because the drawer renders into a portal (`document.body`), any
+     *  vars declared on the host's page wrapper DON'T cascade in. The
+     *  host re-declares them here so the chat surface inside the portal
+     *  picks up the same theme.
+     *
+     *  We default the SURFACE BG to `var(--af-bg, …)` so passing
+     *  `--af-bg` in `surfaceStyle` themes the drawer's background.
+     *  When omitted the drawer falls back to white in light mode and
+     *  the system default elsewhere — passable but not theme-perfect. */
+    surfaceStyle?: CSSProperties & Record<string, string>;
 };
 export declare function ChatDrawer(props: ChatDrawerProps): JSX.Element | null;
 export {};

package/dist/ChatDrawer.js

@@ -45,7 +45,7 @@ const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const react_2 = require("./react");
 function ChatDrawer(props) {
-    const { open, onOpenChange, snap = 0.98, header, closeOnBackdropClick = true, drawerClassName, widgetProps, chatSlot, } = props;
+    const { open, onOpenChange, snap = 0.98, header, closeOnBackdropClick = true, drawerClassName, surfaceStyle: surfaceStyleProp, widgetProps, chatSlot, } = props;
     // We mount once and keep alive across close→reopen so the chat session
     // doesn't get destroyed. After the FIRST open the panel stays in the
     // DOM forever (toggled by `display:none`) — `hasOpened` gates the
@@ -182,7 +182,10 @@ function ChatDrawer(props) {
     // finger 1:1. Re-enabled at the end of the drag (delta back to 0
     // smoothly when below threshold).
     const isDragging = dragStateRef.current?.dragging === true;
-    const surfaceStyle = {
+    // Motion / sizing portion of the surface style, kept separate from
+    // the host-supplied theming so a re-render driven by drag offset
+    // doesn't smash the host's CSS vars.
+    const surfaceMotionStyle = {
         height: `${drawerHeight}px`,
         transform: `translate3d(0, ${translateY}, 0)`,
         bottom: `${vv.offsetTop}px`,
@@ -205,14 +208,25 @@ function ChatDrawer(props) {
                     left: 0,
                     right: 0,
                     width: '100%',
+                    // Host supplies the CSS vars via `surfaceStyle`; the
+                    // backgroundColor resolves from `--af-bg` (which the host
+                    // declares in that same prop). When `surfaceStyle` is
+                    // omitted we fall back to white — passable for an unthemed
+                    // demo, wrong for a themed embed; passing surfaceStyle is
+                    // the correct path.
                     backgroundColor: 'var(--af-bg, #ffffff)',
+                    color: 'var(--af-fg, inherit)',
                     borderTopLeftRadius: '16px',
                     borderTopRightRadius: '16px',
-                    boxShadow: '0 -8px 24px rgba(15, 23, 42, 0.15)',
+                    boxShadow: '0 -8px 24px rgba(15, 23, 42, 0.25)',
                     display: 'flex',
                     flexDirection: 'column',
                     overflow: 'hidden',
-                    ...surfaceStyle,
+                    // Host-supplied theme vars come FIRST so the motion
+                    // properties below override any conflicting `transform` /
+                    // `height` declarations a careless host might pass.
+                    ...surfaceStyleProp,
+                    ...surfaceMotionStyle,
                 }, children: [(0, jsx_runtime_1.jsx)("div", { onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onPointerCancel: onHandlePointerUp, style: {
                             padding: '10px 0',
                             cursor: 'grab',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Framework-free chat session SDK for AgentForge public chat tokens. Headless — no DOM. Drop into any frontend (React, Vue, Svelte, vanilla) and listen for events.",
   "license": "MIT",
   "main": "dist/index.js",