@natoe/colab 0.1.18 → 0.1.20

package/dist/index.d.mts

@@ -964,7 +964,7 @@ declare function MessageBubble({ message, isOwn, participants, currentUserId, sh
 
 interface MessageInputProps {
     onSendText: (body: string) => Promise<void>;
-    /** @deprecated MIC DISABLED — kept in the prop signature for backward compat. */
+    /** Voice message handler. Receives the recorded blob + duration in seconds. */
     onSendAudio?: (blob: Blob, duration: number) => Promise<void>;
     onSendFile: (file: File) => Promise<void>;
     onTyping: (isTyping: boolean) => void;
@@ -976,7 +976,7 @@ interface MessageInputProps {
     placeholder?: string;
     className?: string;
 }
-declare function MessageInput({ onSendText, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
+declare function MessageInput({ onSendText, onSendAudio, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
 
 interface MessageActionsMenuProps {
     message: Message;

package/dist/index.d.ts

@@ -964,7 +964,7 @@ declare function MessageBubble({ message, isOwn, participants, currentUserId, sh
 
 interface MessageInputProps {
     onSendText: (body: string) => Promise<void>;
-    /** @deprecated MIC DISABLED — kept in the prop signature for backward compat. */
+    /** Voice message handler. Receives the recorded blob + duration in seconds. */
     onSendAudio?: (blob: Blob, duration: number) => Promise<void>;
     onSendFile: (file: File) => Promise<void>;
     onTyping: (isTyping: boolean) => void;
@@ -976,7 +976,7 @@ interface MessageInputProps {
     placeholder?: string;
     className?: string;
 }
-declare function MessageInput({ onSendText, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
+declare function MessageInput({ onSendText, onSendAudio, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
 
 interface MessageActionsMenuProps {
     message: Message;

package/dist/index.js

@@ -3094,6 +3094,121 @@ var styles6 = {
     animation: "natoe-colab-message-in 180ms ease-out"
   }
 };
+function useAudioRecorder() {
+  const [isRecording, setIsRecording] = React4.useState(false);
+  const [duration, setDuration] = React4.useState(0);
+  const [error, setError] = React4.useState(null);
+  const mediaRecorderRef = React4.useRef(null);
+  const chunksRef = React4.useRef([]);
+  const streamRef = React4.useRef(null);
+  const timerRef = React4.useRef(null);
+  const startTimeRef = React4.useRef(0);
+  const resolveRef = React4.useRef(null);
+  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
+  const cleanup = React4.useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+    mediaRecorderRef.current = null;
+    chunksRef.current = [];
+    setIsRecording(false);
+    setDuration(0);
+  }, []);
+  const start = React4.useCallback(async () => {
+    if (!isSupported) {
+      setError("Audio recording is not supported in this browser");
+      return;
+    }
+    try {
+      setError(null);
+      chunksRef.current = [];
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mimeType = MediaRecorder.isTypeSupported(AUDIO_MIME_TYPE) ? AUDIO_MIME_TYPE : MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
+      const recorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = recorder;
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      };
+      recorder.onerror = () => {
+        setError("Recording failed");
+        cleanup();
+        resolveRef.current?.(null);
+        resolveRef.current = null;
+      };
+      recorder.onstop = () => {
+        const finalDuration = Math.round((Date.now() - startTimeRef.current) / 1e3);
+        const blob = new Blob(chunksRef.current, { type: mimeType });
+        cleanup();
+        resolveRef.current?.({ blob, duration: finalDuration });
+        resolveRef.current = null;
+      };
+      recorder.start(250);
+      startTimeRef.current = Date.now();
+      setIsRecording(true);
+      timerRef.current = setInterval(() => {
+        const elapsed = Math.round((Date.now() - startTimeRef.current) / 1e3);
+        setDuration(elapsed);
+      }, 1e3);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "NotAllowedError") {
+        setError("Microphone access denied. Please allow microphone permissions.");
+      } else {
+        setError("Failed to start recording");
+      }
+      cleanup();
+    }
+  }, [isSupported, cleanup]);
+  const stop = React4.useCallback(async () => {
+    return new Promise((resolve) => {
+      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
+        resolve(null);
+        return;
+      }
+      resolveRef.current = resolve;
+      mediaRecorderRef.current.stop();
+    });
+  }, []);
+  const cancel = React4.useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.onstop = null;
+      mediaRecorderRef.current.stop();
+    }
+    cleanup();
+    resolveRef.current?.(null);
+    resolveRef.current = null;
+  }, [cleanup]);
+  return {
+    isRecording,
+    duration,
+    start,
+    stop,
+    cancel,
+    isSupported,
+    error
+  };
+}
+function MicIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" })
+    }
+  );
+}
 function ReplyPreview({ message, onCancel, className }) {
   const preview = renderQuotedPreview(message);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles7.container, children: [
@@ -3230,8 +3345,7 @@ function CloseIcon({ size = 18, color = "currentColor" }) {
 }
 function MessageInput({
   onSendText,
-  // MIC DISABLED — onSendAudio still accepted but unused.
-  // onSendAudio,
+  onSendAudio,
   onSendFile,
   onTyping,
   replyTo,
@@ -3248,6 +3362,15 @@ function MessageInput({
   const typingTimeoutRef = React4.useRef(null);
   const isTypingRef = React4.useRef(false);
   const sendingRef = React4.useRef(false);
+  const {
+    isRecording,
+    duration,
+    start: startRecording,
+    stop: stopRecording,
+    cancel: cancelRecording,
+    isSupported: micSupported,
+    error: micError
+  } = useAudioRecorder();
   const handleTyping = React4.useCallback(() => {
     if (!isTypingRef.current) {
       isTypingRef.current = true;
@@ -3296,6 +3419,16 @@ function MessageInput({
     },
     [handleSendText]
   );
+  const handleAudioStop = React4.useCallback(async () => {
+    const result = await stopRecording();
+    if (!result || !onSendAudio) return;
+    setIsSending(true);
+    try {
+      await onSendAudio(result.blob, result.duration);
+    } finally {
+      setIsSending(false);
+    }
+  }, [stopRecording, onSendAudio]);
   const handleFileSelect = React4.useCallback(
     async (e) => {
       const file = e.target.files?.[0];
@@ -3336,7 +3469,18 @@ function MessageInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.inputBar, children: [
+    micError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles8.error, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles8.errorText, children: micError }) }),
+    isRecording ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.recordingBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.recordingIndicator, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles8.recordingDot }),
+        "Recording ",
+        formatDuration2(duration)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.recordingActions, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: cancelRecording, style: styles8.cancelButton, type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleAudioStop, style: styles8.stopButton, type: "button", children: "Send" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.inputBar, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -3355,6 +3499,7 @@ function MessageInput({
           ref: fileInputRef,
           type: "file",
           onChange: handleFileSelect,
+          "aria-label": "Choose a file to upload",
           style: { display: "none" },
           accept: [
             ...SUPPORTED_IMAGE_TYPES,
@@ -3385,7 +3530,19 @@ function MessageInput({
           style: styles8.textarea
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      onSendAudio && micSupported && !text.trim() && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: startRecording,
+          disabled: disabled || isSending,
+          "aria-label": "Record voice message",
+          title: "Record voice message",
+          style: styles8.micButton,
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(MicIcon, { size: 22, color: COLOR.neutral700 })
+        }
+      ),
+      text.trim() && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleSendText,
@@ -3403,6 +3560,11 @@ function MessageInput({
     ] })
   ] });
 }
+function formatDuration2(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
 var styles8 = {
   container: {
     borderTop: `1px solid ${COLOR.neutral200}`,
@@ -3479,6 +3641,23 @@ var styles8 = {
     color: COLOR.neutral700,
     transition: "background-color 120ms ease, color 120ms ease, border-color 120ms ease"
   },
+  // Same 48-square chrome as attach. Sits between the textarea and send
+  // button when there's no draft text — replaces send while idle so the
+  // input row stays one row tall.
+  micButton: {
+    width: "48px",
+    height: "48px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: COLOR.neutral100,
+    border: `1.5px solid ${COLOR.neutral200}`,
+    borderRadius: "14px",
+    cursor: "pointer",
+    flexShrink: 0,
+    color: COLOR.neutral700,
+    transition: "background-color 120ms ease, color 120ms ease, border-color 120ms ease"
+  },
   textarea: {
     flex: 1,
     minHeight: "48px",
@@ -3511,7 +3690,53 @@ var styles8 = {
     cursor: "pointer",
     flexShrink: 0,
     transition: "opacity 120ms ease, background-color 120ms ease"
-  }};
+  },
+  recordingBar: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    backgroundColor: COLOR.dangerBg
+  },
+  recordingIndicator: {
+    display: "flex",
+    alignItems: "center",
+    gap: SPACE.S2,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.danger,
+    fontWeight: FONT_WEIGHT.medium
+  },
+  recordingDot: {
+    width: SPACE.S2,
+    height: SPACE.S2,
+    borderRadius: RADIUS.full,
+    backgroundColor: COLOR.danger,
+    animation: "pulse 1.5s infinite"
+  },
+  recordingActions: {
+    display: "flex",
+    gap: SPACE.S2
+  },
+  cancelButton: {
+    padding: `${SPACE.S1} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.md,
+    cursor: "pointer"
+  },
+  stopButton: {
+    padding: `${SPACE.S1} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.white,
+    backgroundColor: COLOR.danger,
+    border: "none",
+    borderRadius: RADIUS.md,
+    cursor: "pointer"
+  }
+};
 var ROLE_AVATAR_BG = {
   radiologist: "#4f46e5",
   // indigo
@@ -4938,6 +5163,7 @@ function useInlineCollab({
       }
       try {
         await socket.sendMessage(preview.conversationId, payload);
+        setUnreadCount(0);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to send message");
         config.onError?.({
@@ -5193,7 +5419,7 @@ function InlineAudioPlayer({
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "70%", backgroundColor: pal.audioFg } }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%", backgroundColor: pal.audioFg } })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.audioDuration, color: pal.audioFg }, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.audioDuration, color: pal.audioFg }, children: formatDuration3(displayTime) }),
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -5209,7 +5435,7 @@ function renderMessagePreview(message) {
       return message.body;
   }
 }
-function formatDuration2(seconds) {
+function formatDuration3(seconds) {
   const safe = Math.max(0, Math.floor(seconds));
   const m = Math.floor(safe / 60);
   const s = safe % 60;
@@ -5269,8 +5495,6 @@ function InlineInputBar({
         }
       }
     ),
-    unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
-    isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.liveDot, title: "Live updates active" }),
     text.trim() && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -5282,6 +5506,8 @@ function InlineInputBar({
         children: "\u27A4"
       }
     ),
+    unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
+    isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.liveDot, title: "Live updates active" }),
     showExpand && onExpand && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -6365,107 +6591,6 @@ function useMessages({
     reset
   };
 }
-function useAudioRecorder() {
-  const [isRecording, setIsRecording] = React4.useState(false);
-  const [duration, setDuration] = React4.useState(0);
-  const [error, setError] = React4.useState(null);
-  const mediaRecorderRef = React4.useRef(null);
-  const chunksRef = React4.useRef([]);
-  const streamRef = React4.useRef(null);
-  const timerRef = React4.useRef(null);
-  const startTimeRef = React4.useRef(0);
-  const resolveRef = React4.useRef(null);
-  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
-  const cleanup = React4.useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-      streamRef.current = null;
-    }
-    mediaRecorderRef.current = null;
-    chunksRef.current = [];
-    setIsRecording(false);
-    setDuration(0);
-  }, []);
-  const start = React4.useCallback(async () => {
-    if (!isSupported) {
-      setError("Audio recording is not supported in this browser");
-      return;
-    }
-    try {
-      setError(null);
-      chunksRef.current = [];
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-      const mimeType = MediaRecorder.isTypeSupported(AUDIO_MIME_TYPE) ? AUDIO_MIME_TYPE : MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
-      const recorder = new MediaRecorder(stream, { mimeType });
-      mediaRecorderRef.current = recorder;
-      recorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          chunksRef.current.push(event.data);
-        }
-      };
-      recorder.onerror = () => {
-        setError("Recording failed");
-        cleanup();
-        resolveRef.current?.(null);
-        resolveRef.current = null;
-      };
-      recorder.onstop = () => {
-        const finalDuration = Math.round((Date.now() - startTimeRef.current) / 1e3);
-        const blob = new Blob(chunksRef.current, { type: mimeType });
-        cleanup();
-        resolveRef.current?.({ blob, duration: finalDuration });
-        resolveRef.current = null;
-      };
-      recorder.start(250);
-      startTimeRef.current = Date.now();
-      setIsRecording(true);
-      timerRef.current = setInterval(() => {
-        const elapsed = Math.round((Date.now() - startTimeRef.current) / 1e3);
-        setDuration(elapsed);
-      }, 1e3);
-    } catch (err) {
-      if (err instanceof DOMException && err.name === "NotAllowedError") {
-        setError("Microphone access denied. Please allow microphone permissions.");
-      } else {
-        setError("Failed to start recording");
-      }
-      cleanup();
-    }
-  }, [isSupported, cleanup]);
-  const stop = React4.useCallback(async () => {
-    return new Promise((resolve) => {
-      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
-        resolve(null);
-        return;
-      }
-      resolveRef.current = resolve;
-      mediaRecorderRef.current.stop();
-    });
-  }, []);
-  const cancel = React4.useCallback(() => {
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-      mediaRecorderRef.current.onstop = null;
-      mediaRecorderRef.current.stop();
-    }
-    cleanup();
-    resolveRef.current?.(null);
-    resolveRef.current = null;
-  }, [cleanup]);
-  return {
-    isRecording,
-    duration,
-    start,
-    stop,
-    cancel,
-    isSupported,
-    error
-  };
-}
 function useUnreadCount() {
   const { socket, totalUnread } = useCollab();
   const [counts, setCounts] = React4.useState({});