blixify-ui-web-mcp 0.1.22 → 0.1.23

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

@@ -8,10 +8,20 @@ A floating chat button fixed to the viewport. Clicking it toggles the `ChatBase`
 
 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.
 
+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.
+
 | Prop                 | Type      | Default                          | Description                                                                                 |
 | -------------------- | --------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
 | `draggable`          | `boolean` | `true`                           | Set `false` to pin the button to `positionOffset` and ignore any saved position             |
 | `positionStorageKey` | `string`  | `"blixify-chat-anchor-position"` | `localStorage` key holding `{ right, bottom }` in px, measured from the bottom-right corner |
+| `resizableWidth`     | `boolean` | `false`                          | Set `true` to show a left-edge handle that drags the open panel to any width                |
+| `defaultWidth`       | `number`  | `384`                            | Width (px) the panel opens at before the user has dragged (matches `sm:w-96`)               |
+| `widthStorageKey`    | `string`  | `"blixify-chat-anchor-width"`    | `localStorage` key holding the panel width in px                                            |
+| `resizableHeight`    | `boolean` | `false`                          | Set `true` to show a top-edge handle that drags the open panel to any height                |
+| `defaultHeight`      | `number`  | `75% of viewport`                | Height (px) the panel opens at before the user has dragged (matches `sm:h-[75vh]`)          |
+| `heightStorageKey`   | `string`  | `"blixify-chat-anchor-height"`   | `localStorage` key holding the panel height in px                                           |
 
 ##### Import
 
@@ -70,11 +80,11 @@ return (
 
 | Name             | Type                          | Default                                | Description                                                                                     |
 | ---------------- | ----------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `positionOffset` | `string`                      | `"bottom-8 right-8"`                   | Tailwind classes that control the fixed position of the anchor. Ignored on mobile when open.    |
+| `positionOffset` | `string`                      | `"bottom-6 right-6"`                   | Tailwind classes that control the fixed position of the anchor. 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.                                                 |
-| `openIcon`       | `React.ReactNode` \| `string` | `ChatBubbleOvalLeftIcon`               | Icon shown when the chat is closed. A string is treated as an image URL (64×64 rounded circle). |
-| `closeIcon`      | `React.ReactNode` \| `string` | `XMarkIcon`                            | Icon shown when the chat is open. A string is treated as an image URL (64×64 rounded circle).   |
+| `openIcon`       | `React.ReactNode` \| `string` | `ChatBubbleOvalLeftIcon`               | Icon shown when the chat is closed. A string is treated as an image URL (56×56 rounded circle). |
+| `closeIcon`      | `React.ReactNode` \| `string` | `XMarkIcon`                            | Icon shown when the chat is open. A string is treated as an image URL (56×56 rounded circle).   |
 
 ##### Optional props — inherited from ChatBase
 

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

@@ -148,3 +148,53 @@ export const ChatAnchor = () => {
     </div>
   );
 }
+
+export const Resizable = () => {
+  const botUser = { id: "1", name: "Bot" };
+  const currentUser = { id: "2", name: "Guest" };
+
+  const [openChatBase, setOpenChatBase] = useState<boolean>(true);
+  const [message, setMessage] = useState("");
+
+  const [conversation, setConversation] = useState<Conversation>({
+    id: "1",
+    members: [currentUser, botUser],
+    messageList: [
+      {
+        sender: botUser,
+        messageBody:
+          "Drag my left edge to resize the width and my top edge to resize the height. Both are remembered independently.",
+        createdAt: dayjs(
+          "Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+    ],
+  });
+
+  const handleOnClick = () => setOpenChatBase(!openChatBase);
+
+  const handleOnSendMessage = (conversation: Conversation) => {
+    setConversation(conversation);
+    setMessage("");
+  };
+
+  return (
+    <div className="h-96 w-full relative">
+      <ChatAnchorImpl
+        open={openChatBase}
+        value={message}
+        currentUser={currentUser}
+        conversation={conversation}
+        onSendMessage={handleOnSendMessage}
+        onChangeMessage={(e) => setMessage(e.target.value)}
+        onClose={handleOnClick}
+        onClick={handleOnClick}
+        className="shadow-lg border border-gray-200"
+        resizableWidth
+        defaultWidth={384}
+        resizableHeight
+        defaultHeight={384}
+      />
+    </div>
+  );
+};

package/package.json

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