@natoe/colab 0.1.4 → 0.1.6

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useMemo } from 'react';
+import React4, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback, useState, useContext, useId, useMemo } from 'react';
 import { Socket, Presence } from 'phoenix';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -370,7 +370,9 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       const data = snakeToCamel(await response.json());
       orderIds.forEach((orderId) => {
         const preview = data.previews[orderId] ?? null;
-        previewCache.current.set(orderId, preview);
+        if (preview !== null) {
+          previewCache.current.set(orderId, preview);
+        }
         resolvers.get(orderId)?.forEach((resolve) => resolve(preview));
       });
     } catch (error) {
@@ -417,7 +419,8 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       if (!response.ok) {
         throw { code: "FETCH_ERROR", message: "Failed to fetch messages", status: response.status };
       }
-      return snakeToCamel(await response.json());
+      const msgs = snakeToCamel(await response.json());
+      return msgs.sort((a, b) => a.insertedAt.localeCompare(b.insertedAt));
     },
     [apiBaseUrl, authHeaders]
   );
@@ -891,8 +894,8 @@ function useConversation({
       const payload = {
         body: "Voice message",
         type: "audio",
-        mediaUrl: url,
-        mediaDuration: duration
+        media_url: url,
+        media_duration: duration
       };
       const { conv, persistedByCreate } = await ensureConversation(payload);
       if (persistedByCreate) return;
@@ -908,8 +911,8 @@ function useConversation({
       const payload = {
         body: file.name,
         type: isImage ? "image" : "file",
-        mediaUrl: url,
-        fileName: file.name
+        media_url: url,
+        file_name: file.name
       };
       const { conv, persistedByCreate } = await ensureConversation(payload);
       if (persistedByCreate) return;
@@ -1373,91 +1376,247 @@ var styles3 = {
     textDecoration: "underline"
   }
 };
+function ReplyIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" })
+    }
+  );
+}
+function PinIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M16 9V4l1 0c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1l1 0v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })
+    }
+  );
+}
+function CopyIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" })
+    }
+  );
+}
+function MoreIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2" })
+      ]
+    }
+  );
+}
 function MessageActionsMenu({
   message,
   onReply,
   onPin,
   onUnpin,
   onCopy,
-  visible,
   pinDisabled = false,
+  anchorRight = false,
   className
 }) {
-  if (!visible) return null;
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const triggerRef = useRef(null);
   const isPinned = !!message.isPinned;
   const canCopy = message.type === "text" && !!message.body;
-  const handleCopy = () => {
-    if (!onCopy) return;
-    onCopy(message.body);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e) => {
+      if (!wrapperRef.current?.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isOpen]);
+  const run = (fn) => {
+    setIsOpen(false);
+    fn();
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: styles4.container, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className, style: styles4.wrapper, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => onReply(message),
-        style: styles4.button,
-        title: "Reply",
+        ref: triggerRef,
         type: "button",
-        children: "\u21A9"
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen((v) => !v);
+        },
+        "aria-label": "Message actions",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen ? "true" : "false",
+        title: "Message actions",
+        style: styles4.trigger,
+        children: /* @__PURE__ */ jsx(MoreIcon, { size: 18, color: "#4b5563" })
       }
     ),
-    isPinned ? /* @__PURE__ */ jsx(
-      "button",
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
       {
-        onClick: () => onUnpin(message.id),
-        style: styles4.button,
-        title: "Unpin",
-        type: "button",
-        children: "\u{1F4CC}"
-      }
-    ) : /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => onPin(message.id),
+        role: "menu",
+        "aria-label": "Message actions",
         style: {
-          ...styles4.button,
-          opacity: pinDisabled ? 0.4 : 1,
-          cursor: pinDisabled ? "not-allowed" : "pointer"
+          ...styles4.menu,
+          ...anchorRight ? styles4.menuRight : styles4.menuLeft
         },
-        disabled: pinDisabled,
-        title: pinDisabled ? "Pin limit reached (max 3)" : "Pin",
-        type: "button",
-        children: "\u{1F4CC}"
-      }
-    ),
-    canCopy && onCopy && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleCopy,
-        style: styles4.button,
-        title: "Copy text",
-        type: "button",
-        children: "\u2398"
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onReply(message)),
+              style: styles4.item,
+              children: [
+                /* @__PURE__ */ jsx(ReplyIcon, { size: 18, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: "Reply" })
+              ]
+            }
+          ),
+          isPinned ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onUnpin(message.id)),
+              style: styles4.item,
+              children: [
+                /* @__PURE__ */ jsx(PinIcon, { size: 16, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: "Unpin" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onPin(message.id)),
+              disabled: pinDisabled,
+              style: {
+                ...styles4.item,
+                ...pinDisabled ? styles4.itemDisabled : {}
+              },
+              title: pinDisabled ? "Pin limit reached (max 3)" : void 0,
+              children: [
+                /* @__PURE__ */ jsx(PinIcon, { size: 16, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: pinDisabled ? "Pin (limit reached)" : "Pin" })
+              ]
+            }
+          ),
+          canCopy && onCopy && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => run(() => onCopy(message.body)),
+              style: styles4.item,
+              children: [
+                /* @__PURE__ */ jsx(CopyIcon, { size: 16, color: "#374151" }),
+                /* @__PURE__ */ jsx("span", { children: "Copy text" })
+              ]
+            }
+          )
+        ]
       }
     )
   ] });
 }
 var styles4 = {
-  container: {
+  wrapper: {
+    position: "relative",
+    display: "inline-block"
+  },
+  trigger: {
+    width: "36px",
+    height: "36px",
     display: "flex",
-    gap: "2px",
-    padding: "2px",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    color: "#4b5563"
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    marginTop: "4px",
+    minWidth: "160px",
     backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
-    borderRadius: "20px",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
+    borderRadius: "10px",
+    boxShadow: "0 6px 18px rgba(0, 0, 0, 0.12)",
+    padding: "4px",
+    zIndex: 20
   },
-  button: {
-    width: "24px",
-    height: "24px",
+  menuLeft: {
+    left: 0
+  },
+  menuRight: {
+    right: 0
+  },
+  item: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    fontSize: "12px",
+    gap: "10px",
+    width: "100%",
+    minHeight: "40px",
+    padding: "8px 12px",
+    fontSize: "14px",
+    color: "#111827",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "50%",
-    cursor: "pointer"
+    borderRadius: "6px",
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  itemDisabled: {
+    color: "#9ca3af",
+    cursor: "not-allowed"
   }
 };
 function FileIcon({ size = 18, color = "currentColor" }) {
@@ -1474,20 +1633,6 @@ function FileIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
-function PinIcon({ size = 14, color = "currentColor" }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: color,
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M16 9V4l1 0c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1l1 0v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })
-    }
-  );
-}
 function AlertIcon({ size = 14, color = "currentColor" }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -1552,12 +1697,26 @@ function MessageBubble({
   pinDisabled = false,
   className
 }) {
-  const [isHovered, setIsHovered] = useState(false);
   if (message.type === "system") {
     return /* @__PURE__ */ jsx(SystemBubble, { message });
   }
   const hasActions = !!(onReply || onPin || onUnpin || onCopy);
-  return /* @__PURE__ */ jsx(
+  const actionsSlot = hasActions ? /* @__PURE__ */ jsx("div", { style: styles5.actionsSlot, children: /* @__PURE__ */ jsx(
+    MessageActionsMenu,
+    {
+      message,
+      onReply: onReply ?? (() => {
+      }),
+      onPin: onPin ?? (() => {
+      }),
+      onUnpin: onUnpin ?? (() => {
+      }),
+      onCopy,
+      pinDisabled,
+      anchorRight: !isOwn
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className,
@@ -1565,10 +1724,9 @@ function MessageBubble({
         ...styles5.wrapper,
         justifyContent: isOwn ? "flex-end" : "flex-start"
       },
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: /* @__PURE__ */ jsxs("div", { style: styles5.bubbleWrapper, children: [
-        /* @__PURE__ */ jsxs(
+      children: [
+        isOwn && actionsSlot,
+        /* @__PURE__ */ jsx("div", { style: styles5.bubbleWrapper, children: /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -1627,33 +1785,9 @@ function MessageBubble({
               )
             ]
           }
-        ),
-        hasActions && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              ...styles5.actionsWrapper,
-              [isOwn ? "right" : "left"]: "100%",
-              [isOwn ? "marginRight" : "marginLeft"]: "6px"
-            },
-            children: /* @__PURE__ */ jsx(
-              MessageActionsMenu,
-              {
-                message,
-                onReply: onReply ?? (() => {
-                }),
-                onPin: onPin ?? (() => {
-                }),
-                onUnpin: onUnpin ?? (() => {
-                }),
-                onCopy,
-                visible: isHovered,
-                pinDisabled
-              }
-            )
-          }
-        )
-      ] })
+        ) }),
+        !isOwn && actionsSlot
+      ]
     }
   );
 }
@@ -1750,6 +1884,8 @@ function escapeRegex2(string) {
 var styles5 = {
   wrapper: {
     display: "flex",
+    alignItems: "flex-end",
+    gap: "4px",
     marginBottom: "8px",
     paddingLeft: "16px",
     paddingRight: "16px"
@@ -1758,6 +1894,10 @@ var styles5 = {
     position: "relative",
     maxWidth: "75%"
   },
+  actionsSlot: {
+    flexShrink: 0,
+    alignSelf: "flex-end"
+  },
   bubble: {
     padding: "10px 14px",
     borderRadius: "12px",
@@ -1833,12 +1973,6 @@ var styles5 = {
     cursor: "pointer",
     padding: "0 2px"
   },
-  actionsWrapper: {
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
-    zIndex: 10
-  },
   audioContainer: {
     display: "flex",
     alignItems: "center",
@@ -2488,7 +2622,18 @@ function MessageInput({
           type: "file",
           onChange: handleFileSelect,
           style: { display: "none" },
-          accept: [...SUPPORTED_IMAGE_TYPES, "application/pdf", ".doc", ".docx"].join(",")
+          accept: [
+            ...SUPPORTED_IMAGE_TYPES,
+            "application/pdf",
+            ".doc",
+            ".docx",
+            ".xls",
+            ".xlsx",
+            ".csv",
+            ".txt",
+            ".heic",
+            ".heif"
+          ].join(",")
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3500,12 +3645,14 @@ function ExpandIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function CollabPopup({
   orderId,
   patientData,
   participantIds,
   isOpen,
   onClose,
+  onBack,
   initialPosition,
   width = 380,
   height = 520,
@@ -3521,6 +3668,8 @@ function CollabPopup({
   const [isMinimized, setIsMinimized] = useState(false);
   const dragOffset = useRef({ x: 0, y: 0 });
   const containerRef = useRef(null);
+  const previouslyFocused = useRef(null);
+  const titleId = useId();
   const handleMouseDown = useCallback(
     (e) => {
       if (!e.target.closest("[data-drag-handle]")) return;
@@ -3535,13 +3684,44 @@ function CollabPopup({
   );
   useEffect(() => {
     if (!isOpen) return;
+    previouslyFocused.current = document.activeElement;
+    const focusFirst = () => {
+      const root = containerRef.current;
+      if (!root) return;
+      const first = root.querySelector(FOCUSABLE_SELECTOR);
+      (first ?? root).focus();
+    };
+    const raf = requestAnimationFrame(focusFirst);
     const handleKey = (e) => {
       if (e.key === "Escape") {
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const root = containerRef.current;
+      if (!root) return;
+      const focusables = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+      if (focusables.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
       }
     };
     window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("keydown", handleKey);
+      previouslyFocused.current?.focus?.();
+    };
   }, [isOpen, onClose]);
   useEffect(() => {
     if (!isDragging) return;
@@ -3567,6 +3747,10 @@ function CollabPopup({
     {
       ref: containerRef,
       className,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
       style: {
         ...styles13.container,
         left: position.x,
@@ -3578,7 +3762,18 @@ function CollabPopup({
       onMouseDown: handleMouseDown,
       children: [
         /* @__PURE__ */ jsxs("div", { "data-drag-handle": true, style: styles13.titleBar, children: [
-          /* @__PURE__ */ jsx("span", { style: styles13.titleText, children: buildChannelName(patientData) }),
+          onBack && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onBack,
+              style: styles13.titleButton,
+              "aria-label": "Go back",
+              title: "Back",
+              type: "button",
+              children: "\u2190"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { id: titleId, style: { ...styles13.titleText, flex: 1 }, children: buildChannelName(patientData) }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -3865,8 +4060,8 @@ function useInlineCollab({
         await dispatchSend({
           body: "Voice message",
           type: "audio",
-          mediaUrl: url,
-          mediaDuration: duration
+          media_url: url,
+          media_duration: duration
         });
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to send voice message");