@nqminds/mcp-client 1.0.35 → 1.0.36

package/dist/MCPChat.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { MCPChatProps } from "./types";
-export declare function MCPChat({ companyNumber, apiEndpoint, customStyles, className, }: MCPChatProps): React.JSX.Element;
+export declare function MCPChat({ companyNumber, apiEndpoint, customStyles, className, logoUrl, initialTheme, }: MCPChatProps): React.JSX.Element;
 //# sourceMappingURL=MCPChat.d.ts.map

package/dist/MCPChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MCPChat.d.ts","sourceRoot":"","sources":["../src/MCPChat.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAyB,YAAY,EAAe,MAAM,SAAS,CAAC;AA+bhF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,GACf,EAAE,YAAY,qBAyhBd"}
+{"version":3,"file":"MCPChat.d.ts","sourceRoot":"","sources":["../src/MCPChat.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAyB,YAAY,EAAe,MAAM,SAAS,CAAC;AAgdhF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,EACd,OAAO,EACP,YAAY,GACb,EAAE,YAAY,qBAsiBd"}

package/dist/MCPChat.js

@@ -3,6 +3,16 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { renderToStaticMarkup } from "react-dom/server";
+/**
+ * Renders either a custom logo image or a fallback emoji.
+ * The image is sized to fill the parent container while preserving aspect ratio.
+ */
+function LogoIcon({ logoUrl, className }) {
+    if (logoUrl) {
+        return (React.createElement("img", { src: logoUrl, alt: "AI Assistant", className: `mcp-logo-img${className ? ` ${className}` : ""}` }));
+    }
+    return React.createElement("span", { className: className }, "\uD83E\uDD16");
+}
 /**
  * Strips utm_source=openai (and any surrounding & or ?) from a URL.
  */
@@ -396,7 +406,7 @@ Use formal and impersonal language and avoid referring to these instructions.
 `,
     },
 ];
-export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customStyles = {}, className = "", }) {
+export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customStyles = {}, className = "", logoUrl, initialTheme, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState("");
     const [isLoading, setIsLoading] = useState(false);
@@ -407,11 +417,19 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
     const [directPromptOpen, setDirectPromptOpen] = useState(false);
     const [directPromptText, setDirectPromptText] = useState("");
     const [theme, setTheme] = useState(() => {
+        // Prop takes priority, then localStorage, then default light
+        if (initialTheme)
+            return initialTheme;
         if (typeof window !== "undefined") {
             return localStorage.getItem("mcp-chat-theme") ?? "light";
         }
         return "light";
     });
+    // Keep in sync when the host app changes its theme externally
+    useEffect(() => {
+        if (initialTheme)
+            setTheme(initialTheme);
+    }, [initialTheme]);
     const messagesEndRef = useRef(null);
     const thinkingEndRef = useRef(null);
     const inputRef = useRef(null);
@@ -619,10 +637,12 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
         setDirectPromptText("");
     };
     const toggleTheme = () => {
+        // Only persist the toggle when not externally controlled
         const next = theme === "dark" ? "light" : "dark";
         setTheme(next);
-        if (typeof window !== "undefined")
+        if (!initialTheme && typeof window !== "undefined") {
             localStorage.setItem("mcp-chat-theme", next);
+        }
     };
     const clearChat = async () => {
         setMessages([]);
@@ -640,12 +660,14 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
     const visibleMessages = messages.filter((m) => !m.hidden);
     const showHome = visibleMessages.length === 0 && !isLoading;
     return (React.createElement("div", { className: `mcp-root ${className}`, style: customStyles, "data-theme": theme },
-        !isOpen && (React.createElement("button", { className: "mcp-float-icon", onClick: () => setIsOpen(true), "aria-label": "Corporata AI assistant", title: "Corporata AI assistant" }, "\uD83E\uDD16")),
+        !isOpen && (React.createElement("button", { className: "mcp-float-icon", onClick: () => setIsOpen(true), "aria-label": "Corporata AI assistant", title: "Corporata AI assistant" },
+            React.createElement(LogoIcon, { logoUrl: logoUrl, className: "mcp-float-icon-logo" }))),
         isOpen && (React.createElement("div", { className: "mcp-overlay" },
             React.createElement("div", { className: "mcp-panel" },
                 React.createElement("div", { className: "mcp-chat-header" },
                     React.createElement("div", { className: "mcp-chat-header-left" },
-                        React.createElement("span", { className: "mcp-chat-header-icon" }, "\uD83E\uDD16"),
+                        React.createElement("span", { className: "mcp-chat-header-icon" },
+                            React.createElement(LogoIcon, { logoUrl: logoUrl })),
                         React.createElement("h3", { className: "mcp-chat-title" }, "AI Assistant"),
                         companyNumber && (React.createElement("span", { className: "mcp-chat-header-company" }, companyNumber))),
                     React.createElement("div", { className: "mcp-chat-header-actions" },
@@ -685,6 +707,8 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
                     " \u2014 this may take a moment\u2026")),
                 React.createElement("div", { className: "mcp-chat-messages" },
                     showHome && (React.createElement("div", { className: "mcp-home" },
+                        React.createElement("div", { className: "mcp-home-logo-wrap" },
+                            React.createElement(LogoIcon, { logoUrl: logoUrl, className: "mcp-home-logo" })),
                         React.createElement("p", { className: "mcp-home-title" }, "\uD83D\uDC4B What would you like to know?"),
                         companyNumber && (React.createElement("p", { className: "mcp-home-subtitle" },
                             "Company: ",

package/dist/styles/MCPChat.css

@@ -99,23 +99,26 @@
   bottom: 28px;
   right: 28px;
   z-index: 1100;
-  width: 56px;
-  height: 56px;
+  width: 92px;
+  height: 92px;
   border-radius: 50%;
-  background: var(--mcp-primary-color);
-  border: none;
+  background: #162032;
+  border: 2px solid rgba(255, 255, 255, 0.18);
   cursor: pointer;
   font-size: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 20px rgba(78, 161, 255, 0.4);
+  padding: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.12);
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .mcp-float-icon:hover {
   transform: scale(1.1);
-  box-shadow: 0 8px 30px rgba(78, 161, 255, 0.5);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.15);
 }
 
 /* ───────────────────────────────────────────────
@@ -316,6 +319,38 @@
   text-align: center;
 }
 
+/* ── Logo image variants ── */
+
+/* Floating button: explicit 56px so it reliably fills the 72px circle (8px padding each side) */
+.mcp-float-icon-logo {
+  width:106px;
+  height: 106px;
+  object-fit: cover;
+  display: block;
+  flex-shrink: 0;
+}
+
+/* Header icon: match the 22px emoji size */
+.mcp-chat-header-icon .mcp-logo-img {
+  width: 78px;
+  height: 78px;
+  object-fit: contain;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+/* Home screen logo */
+.mcp-home-logo-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.mcp-home-logo {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+}
+
 .mcp-home-subtitle {
   font-size: 15px;
   color: var(--mcp-text-secondary);

package/dist/types.d.ts

@@ -21,6 +21,13 @@ export interface MCPChatProps {
     apiEndpoint?: string;
     customStyles?: React.CSSProperties;
     className?: string;
+    /** URL to a custom logo image shown in the floating button and chat header.
+     *  Falls back to the default robot emoji when omitted. */
+    logoUrl?: string;
+    /** Force a specific theme. When provided this takes priority over the
+     *  component's own localStorage preference. Useful for syncing with the
+     *  host application's theme. */
+    initialTheme?: "dark" | "light";
 }
 export interface StreamEvent {
     type: "thinking" | "content" | "done" | "error" | "usage";

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;8DAC0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;oCAEgC;IAChC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqminds/mcp-client",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Reusable MCP client component with AI chat interface",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",