blixify-ui-web-mcp 0.1.53 → 0.1.55

package/lib/components/chat/chatAnchor/README.md

@@ -4,13 +4,13 @@
 
 <hr>
 
-A floating chat button fixed to the viewport. Clicking it toggles the `ChatBase` panel open/closed with an animated transition. On mobile (< 640px) the chat panel expands to full screen when open.
+A floating chat button fixed to the viewport. Clicking it toggles the `ChatBase` panel open/closed with an animated transition. On mobile (< 640px) the chat panel expands to full screen by default. Enable `resizableHeight` to open a full-width, bottom-aligned panel with a touch-friendly height handle instead. Desktop keeps the floating panel.
 
-The button can be dragged out of the way on desktop and touch, and where it is dropped is kept in `localStorage` so it stays there on the next visit. A short drag is still treated as a click, so tapping always opens the chat. A saved position is clamped back into view when it is restored on a smaller screen or the window is resized under it, and dragging is disabled while the panel is full screen on mobile.
+The button can be dragged out of the way on desktop and touch, and where it is dropped is kept in `localStorage` so it stays there on the next visit. A short drag is still treated as a click, so tapping always opens the chat. A saved position is clamped back into view when it is restored on a smaller screen or the window is resized under it, and button dragging is disabled while the chat is open on mobile.
 
 With `resizableWidth`, an open panel gains a grab handle on its left edge — dragging it left or right resizes the panel to any width. The only bounds are physical: it cannot be dragged wider than the viewport, nor narrower than 280px, below which the header, messages and input stop being usable. The chosen width is kept in `localStorage`, re-clamped to the viewport on window resize, and the handle is hidden while the panel is full screen on mobile.
 
-`resizableHeight` works the same way on the vertical axis: an open panel gains a grab handle on its top edge, and dragging it up or down resizes the panel to any height. Because the panel grows upward from the bottom-right anchor, the cap is the distance from its bottom edge to the top of the viewport, and the floor keeps the header and input row usable. The default height is three quarters of the viewport (matching the panel's `sm:h-[75vh]`). Width and height are independent — turn on either or both. The chosen height is kept in `localStorage` and re-clamped on window resize.
+`resizableHeight` works the same way on the vertical axis: an open panel gains a grab handle on its top edge, and dragging it up or down resizes the panel to any height. Because the panel grows upward from the bottom-right anchor, the cap is the distance from its bottom edge to the top of the viewport, and the floor keeps the header and input row usable. The default height is three quarters of the viewport (matching the panel's `sm:h-[75vh]`). Width and height are independent — turn on either or both. The chosen height is kept in `localStorage` and re-clamped on window resize. On mobile, this enables a bottom-aligned panel with a larger top handle; see Mobile height resizing below.
 
 | Prop                 | Type      | Default                          | Description                                                                                 |
 | -------------------- | --------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
@@ -66,6 +66,36 @@ return (
 );
 ```
 
+##### Mobile height resizing
+
+```tsx
+<ChatAnchor
+  {...chatProps}
+  resizableHeight
+  open={open}
+  onClick={() => setOpen(!open)}
+  onClose={() => setOpen(false)}
+/>
+```
+
+On mobile, the chat is pinned to the bottom at full width. Drag the top handle up to extend it to the viewport height, or down to shrink it to 50% of the current viewport height. The initial height is 75% of the viewport unless `defaultHeight` or a saved height overrides it. The same `heightStorageKey` stores height on desktop and mobile, and restored heights are clamped to the available screen. Arrow Up/Down on the focused handle also adjusts height.
+
+Your `headerElement` renders beneath the handle. Messages scroll above the composer. The chat close button calls `onClose`, falling back to `onClick`; if `hideAdditionalAction` hides that button, a close button appears beside the handle. The page remains accessible above the panel. Mobile sizing ignores `positionOffset`, saved button positions, `sizeClassName`, and `disableMobileResize` while open; the closed button keeps its saved position. Width resizing stays desktop-only. Without `resizableHeight`, mobile keeps its fullscreen layout. No `mobileView` prop or Drawer is needed.
+
+##### Keyboard and safe areas
+
+On mobile, opening the keyboard temporarily fits the chat to the visible viewport and disables the outer height resize handle. The preferred height is preserved and restored when the keyboard closes; keyboard adjustments are never saved to `heightStorageKey`. If a keyboard interrupts an unfinished height drag, that drag is cancelled. Message scrolling and the composer remain available.
+
+Browsers detect the keyboard from input focus within the chat and a substantial viewport height reduction. Pinch zoom and small browser toolbar changes do not activate this detection. `visualViewport` resize/scroll events position the panel above an overlay keyboard; window resize events also support WebViews that resize their layout viewport. Native hosts can override the detection:
+
+```tsx
+<ChatAnchor {...chatProps} resizableHeight keyboardOpen={keyboardVisible} />
+```
+
+Omit `keyboardOpen` for automatic detection. Supply `true`/`false` from the app's Capacitor keyboard events when available. This prop supplies visibility, not keyboard dimensions: the host must still configure its WebView to resize or expose a reduced visual viewport when the keyboard opens. No Capacitor plugin is required by ui-web.
+
+The mobile panel respects `--safe-area-inset-*` CSS variables, falling back to `env(safe-area-inset-*, 0px)`. Bottom padding is omitted while the keyboard is open; top spacing protects the drag handle and header when the panel reaches the top of the visible viewport. Provide `viewport-fit=cover` and the relevant safe-area values in the host app. The 50–100% range applies to the keyboard-closed viewport; fitting the visible space takes priority while typing.
+
 ##### Required props
 
 | Name           | Type           | Description                                            |
@@ -80,6 +110,7 @@ return (
 
 | Name             | Type                          | Default                                | Description                                                                                     |
 | ---------------- | ----------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `keyboardOpen` | `boolean` | Automatic detection | Optional native keyboard visibility override. Temporarily fits mobile chat and disables outer height resizing while open. |
 | `positionOffset` | `string`                      | `"bottom-[88px] right-4 md:bottom-6 md:right-6"` | Tailwind classes that control the fixed position of the anchor. On phones the default rests on the top edge of a bottom bar such as DataTemplate's Quick find, clear of its filter button. Ignored on mobile when open. |
 | `greetingCard`   | `boolean`                     | `false`                                | When `true`, shows a greeting bubble next to the anchor button while the chat is closed.        |
 | `greetingText`   | `string`                      | `"Welcome! How can I help you today?"` | Text displayed inside the greeting card bubble.                                                 |

package/lib/components/chat/chatAnchor/chatAnchor.stories.tsx

@@ -198,3 +198,73 @@ export const Resizable = () => {
     </div>
   );
 };
+
+export const CustomHeader = () => {
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState("");
+  const currentUser = { id: "1", name: "Guest" };
+  const botUser = { id: "2", name: "Support" };
+  const [conversation, setConversation] = useState<Conversation>({
+    id: "custom-header",
+    members: [currentUser, botUser],
+    messageList: [
+      "Hi! Welcome to Blixify support. How can we help today?",
+      "Can I customize the chat to match my brand?",
+      "Absolutely. Your header can include your logo, team details, and availability.",
+      "Will the same header work on mobile?",
+      "Yes! Open this example at a mobile width to see how it adapts.",
+    ].map((messageBody, index) => ({
+      sender: index % 2 ? currentUser : botUser,
+      messageBody,
+      createdAt: new Date("2026-10-16T00:00:00Z"),
+    })),
+  });
+  const handleToggleChat = () => setOpen((previous) => !previous);
+  const handleSendMessage = (nextConversation: Conversation) => {
+    setConversation(nextConversation);
+    setMessage("");
+  };
+
+  return (
+    <div className="min-h-screen p-6 bg-gray-50">
+      <p>
+        Open chat to see a custom branded header with a team avatar, availability,
+        and response time. The same header adapts to desktop and mobile.
+      </p>
+      <ChatAnchorImpl
+        resizableHeight
+        headerElement={
+          <div className="bg-gradient-to-br from-indigo-900 to-indigo-700 text-white">
+            <div className="flex items-center gap-3 py-5 pl-4 pr-24">
+              <div className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white/15 text-lg font-semibold ring-1 ring-white/20">
+                B
+                <span className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-indigo-400 ring-2 ring-indigo-900" />
+              </div>
+              <div className="min-w-0">
+                <p className="text-xs font-medium uppercase tracking-wider text-indigo-200">
+                  Customer care
+                </p>
+                <h2 className="text-base font-semibold">Blixify support</h2>
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-white/15 bg-black/10 px-4 py-3 text-xs">
+              <span className="flex items-center gap-1.5 font-medium">
+                <span className="h-1.5 w-1.5 rounded-full bg-indigo-300" />
+                Online now
+              </span>
+              <span className="text-indigo-100">Usually replies in a few minutes</span>
+            </div>
+          </div>
+        }
+        open={open}
+        value={message}
+        currentUser={currentUser}
+        conversation={conversation}
+        onClick={handleToggleChat}
+        onClose={() => setOpen(false)}
+        onChangeMessage={(event) => setMessage(event.target.value)}
+        onSendMessage={handleSendMessage}
+      />
+    </div>
+  );
+};

package/lib/components/display/newTable/newTable.stories.tsx

@@ -751,3 +751,85 @@ export const FlatTable = () => {
     </StorySection>
   );
 };
+
+// INFO: a row that opens on click, with a link, a checkbox and a button placed
+// in its cells — the e2e checks which of them open the row
+export const RowLinks = () => {
+  const [opened, setOpened] = useState<string[]>([]);
+  const [ticked, setTicked] = useState(false);
+  const rows = [
+    {
+      id: "row-1",
+      name: "Alarm log",
+      download: (
+        <a href="#downloaded" data-testid="row-download-link">
+          Download
+        </a>
+      ),
+      ack: (
+        <input
+          type="checkbox"
+          data-testid="row-checkbox"
+          checked={ticked}
+          onChange={(e) => setTicked(e.target.checked)}
+        />
+      ),
+      action: (
+        <IconButton
+          testId="row-icon-button"
+          size="small"
+          icon={<span className="text-xs">Go</span>}
+          onClick={() => {}}
+        />
+      ),
+    },
+  ];
+  return (
+    <StorySection
+      title="Links and fields in a row"
+      description="A link or form field in a cell does its own action and does not open the row. A button still opens the row unless it stops the click."
+    >
+      <NewTableImpl
+        columns={[
+          { key: "name", title: "Name" },
+          { key: "download", title: "" },
+          { key: "ack", title: "" },
+          { key: "action", title: "" },
+        ]}
+        data={rows}
+        size={rows.length}
+        limit={10}
+        paginationType="page"
+        handleUpdatePageIndex={() => {}}
+        onClickRow={(id) => setOpened((previous) => [...previous, id])}
+      />
+      <pre data-testid="row-opened" className="mt-3 text-xs">
+        {JSON.stringify(opened)}
+      </pre>
+      <NewTableImpl
+        columns={[
+          { key: "name", title: "Name" },
+          { key: "preview", title: "" },
+        ]}
+        data={[
+          {
+            id: "row-2",
+            name: "Open in place",
+            preview: (
+              <button type="button" data-testid="row-link-button">
+                Preview
+              </button>
+            ),
+          },
+        ]}
+        size={1}
+        limit={10}
+        paginationType="page"
+        handleUpdatePageIndex={() => {}}
+        newTabUrl="#record-"
+        linkType="default"
+        onClickRow={(id) => setOpened((previous) => [...previous, id])}
+      />
+    </StorySection>
+  );
+};

package/lib/components/navigation/leftNav/README.md

@@ -165,6 +165,7 @@ Below `lg` the rail moves into the mobile drawer as a row of icons above the sid
 | `compactMode`                  | `boolean`                                                  | `false` | Tighter rows, smaller icons and a smaller expand chevron, keeping every label                               |
 | `searchable`                   | `boolean`                                                  | `false` | Shows a filter box. Matches are listed flat, each with the path it sits under (e.g. `Sales › Reports`)      |
 | `searchAction`                 | `ReactElement`                                             | —       | A small control inside the right end of the filter box, such as a filter button opening the app's own pop-up. Shown only with `searchable` |
+| `keepSearchAncestors`          | `boolean`                                                  | `false` | With `searchable`, keeps each match under its parents (a workspace, a folder page), shown open, instead of the flat list. Rows that neither match nor hold a match are left out |
 | `persistKey`                   | `string`                                                   | —       | localStorage key that remembers open groups and pages. A new key loads that key's stored state.             |
 | `defaultExpandedIds`           | `string[]`                                                 | —       | Groups (by `groupId`) and pages (by `id`) open when nothing is stored for them                              |
 

package/lib/components/navigation/leftNav/leftNav.stories.tsx

@@ -584,6 +584,27 @@ export const LeftNav = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Search Keeping Parents"
+        description="keepSearchAncestors keeps each match where it sits while the filter has text — under its parents, shown open — so a page found in a nested folder still shows which branch it belongs to. Type 'vol' and the volumes stay under the rows above them. Rows that neither match nor hold a match are left out, and clearing the box brings back the tree as it was."
+      >
+        <div className="w-full h-96 relative overflow-hidden border rounded-lg">
+          <LeftNavImpl
+            selectedId={selectedId}
+            navigation={manyNavigation}
+            {...handleMobileMenu("story-7b")}
+            searchable={true}
+            keepSearchAncestors={true}
+            compactMode={true}
+            searchPlaceholder="Filter pages"
+            handleBarsOnClick={(id) => setSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={renderContent}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Search Action"
         description="searchAction puts a small control inside the right end of the filter box, so narrowing the nav costs no row of its own. Here a funnel button toggles a filter the app owns — top-level pages only — and shows a dot while it is on. LeftNav only draws the control; what it opens and filters is up to the app."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {