@nqminds/mcp-client 1.0.34 → 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;AA0ahF,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.
  */
@@ -16,13 +26,23 @@ function stripUtmSource(url) {
  *
  * Expected JSON shape:
  *   { "columns": ["Col A", "Col B"], "rows": [["val1", "val2"], ...] }
+ *
+ * On mobile the table switches to a card layout using data-label attributes.
+ * Rows beyond INITIAL_ROWS are hidden behind an expand button.
  */
+const INITIAL_ROWS = 5;
 function JsonDataTable({ columns, rows }) {
+    const [showAll, setShowAll] = useState(false);
+    const visibleRows = showAll ? rows : rows.slice(0, INITIAL_ROWS);
+    const hiddenCount = rows.length - INITIAL_ROWS;
     return (React.createElement("div", { className: "mcp-data-table-wrapper" },
         React.createElement("table", { className: "mcp-data-table" },
             React.createElement("thead", null,
                 React.createElement("tr", null, columns.map((col, i) => React.createElement("th", { key: i }, col)))),
-            React.createElement("tbody", null, rows.map((row, ri) => (React.createElement("tr", { key: ri }, row.map((cell, ci) => React.createElement("td", { key: ci }, String(cell ?? ""))))))))));
+            React.createElement("tbody", null, visibleRows.map((row, ri) => (React.createElement("tr", { key: ri }, row.map((cell, ci) => (React.createElement("td", { key: ci, "data-label": columns[ci] }, String(cell ?? ""))))))))),
+        rows.length > INITIAL_ROWS && (React.createElement("button", { className: "mcp-table-expand-btn", onClick: () => setShowAll((s) => !s) }, showAll
+            ? "▲ Show less"
+            : `▼ Show ${hiddenCount} more row${hiddenCount !== 1 ? "s" : ""}`))));
 }
 /**
  * Returns the ReactMarkdown `components` map.
@@ -386,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);
@@ -397,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);
@@ -609,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([]);
@@ -630,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" },
@@ -675,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);
@@ -963,3 +998,205 @@
   display: flex;
   gap: 8px;
 }
+
+/* ───────────────────────────────────────────────
+   Table: expand / collapse button
+─────────────────────────────────────────────── */
+.mcp-table-expand-btn {
+  display: block;
+  width: 100%;
+  padding: 10px 16px;
+  min-height: 44px;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: inherit;
+  color: var(--mcp-primary-color);
+  background: transparent;
+  border: 1px solid var(--mcp-border);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s;
+}
+
+.mcp-table-expand-btn:hover {
+  background: rgba(78, 161, 255, 0.06);
+}
+
+/* ───────────────────────────────────────────────
+   Mobile: full-screen panel + compact layout
+─────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  /* Panel takes the full viewport */
+  .mcp-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .mcp-panel {
+    width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin-top: 0;
+    border-radius: 0;
+    border: none;
+  }
+
+  /* Tighter header */
+  .mcp-chat-header {
+    padding: 10px 14px;
+  }
+
+  .mcp-chat-title {
+    font-size: 17px;
+  }
+
+  /* Ensure all interactive elements in header meet 44px tap target */
+  .mcp-chat-button,
+  .mcp-btn-theme,
+  .mcp-btn-icon {
+    min-height: 44px;
+    min-width: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Hide dev-tool button on mobile — not relevant to end users */
+  .mcp-btn-dev {
+    display: none;
+  }
+
+  /* Messages: less padding */
+  .mcp-chat-messages {
+    padding: 10px 12px;
+    gap: 12px;
+  }
+
+  /* Message bubbles: use full available width */
+  .mcp-chat-message,
+  .mcp-chat-message-assistant {
+    max-width: 100%;
+  }
+
+  /* Tighter bubble padding */
+  .mcp-chat-message-bubble {
+    padding: 10px 14px;
+  }
+
+  /* Input bar */
+  .mcp-chat-input-form {
+    padding: 10px 12px;
+    gap: 8px;
+  }
+
+  .mcp-chat-input {
+    font-size: 16px; /* Prevent iOS auto-zoom on focus */
+  }
+
+  /* Home screen: 2-column grid */
+  .mcp-action-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+
+  .mcp-action-card {
+    padding: 14px 10px;
+    min-height: 72px;
+  }
+
+  .mcp-action-card-icon {
+    font-size: 24px;
+  }
+
+  .mcp-action-card-label {
+    font-size: 13px;
+  }
+
+  .mcp-chat-now-button {
+    min-height: 44px;
+    padding: 10px 28px;
+  }
+
+  /* Thinking panel */
+  .mcp-chat-thinking {
+    padding: 14px 16px;
+    min-height: unset;
+  }
+}
+
+/* ───────────────────────────────────────────────
+   Mobile: json-table card layout
+   Each row becomes a labelled card; column headers
+   are hidden and surfaced via data-label pseudo-elements.
+─────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .mcp-data-table-wrapper {
+    overflow-x: visible;
+  }
+
+  .mcp-data-table {
+    min-width: unset;
+    display: block;
+  }
+
+  .mcp-data-table thead {
+    display: none; /* labels come from data-label on each td */
+  }
+
+  .mcp-data-table tbody {
+    display: block;
+  }
+
+  .mcp-data-table tr {
+    display: block;
+    border: 1px solid var(--mcp-border);
+    border-radius: 8px;
+    margin-bottom: 10px;
+    overflow: hidden;
+  }
+
+  .mcp-data-table td {
+    display: grid;
+    grid-template-columns: minmax(80px, 36%) 1fr;
+    gap: 8px;
+    padding: 8px 12px;
+    border: none;
+    border-bottom: 1px solid var(--mcp-border);
+    font-size: 14px;
+    line-height: 1.45;
+    word-break: break-word;
+  }
+
+  .mcp-data-table td:last-child {
+    border-bottom: none;
+  }
+
+  /* Column label shown from the data-label attribute */
+  .mcp-data-table td::before {
+    content: attr(data-label);
+    font-weight: 700;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--mcp-text-secondary);
+    align-self: center;
+    line-height: 1.3;
+  }
+
+  /* Strip alternating row tints — card borders provide separation */
+  .mcp-data-table tbody tr:nth-child(even) {
+    background: transparent;
+  }
+
+  .mcp-data-table tbody tr:hover {
+    background: transparent;
+  }
+
+  /* Expand button full-width on mobile */
+  .mcp-table-expand-btn {
+    border-radius: 0 0 8px 8px;
+    font-size: 14px;
+  }
+}

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.34",
+  "version": "1.0.36",
   "description": "Reusable MCP client component with AI chat interface",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",