@nqminds/mcp-client 1.0.34 → 1.0.35

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;AA+bhF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,GACf,EAAE,YAAY,qBAyhBd"}

package/dist/MCPChat.js

@@ -16,13 +16,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.

package/dist/styles/MCPChat.css

@@ -963,3 +963,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/package.json

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