@natoe/colab 0.1.19 → 0.1.22

package/dist/index.mjs

@@ -3088,6 +3088,121 @@ var styles6 = {
     animation: "natoe-colab-message-in 180ms ease-out"
   }
 };
+function useAudioRecorder() {
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [error, setError] = useState(null);
+  const mediaRecorderRef = useRef(null);
+  const chunksRef = useRef([]);
+  const streamRef = useRef(null);
+  const timerRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const resolveRef = useRef(null);
+  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
+  const cleanup = 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 = 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 = useCallback(async () => {
+    return new Promise((resolve) => {
+      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
+        resolve(null);
+        return;
+      }
+      resolveRef.current = resolve;
+      mediaRecorderRef.current.stop();
+    });
+  }, []);
+  const cancel = 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__ */ 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: "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__ */ jsxs("div", { className, style: styles7.container, children: [
@@ -3224,8 +3339,7 @@ function CloseIcon({ size = 18, color = "currentColor" }) {
 }
 function MessageInput({
   onSendText,
-  // MIC DISABLED — onSendAudio still accepted but unused.
-  // onSendAudio,
+  onSendAudio,
   onSendFile,
   onTyping,
   replyTo,
@@ -3242,6 +3356,15 @@ function MessageInput({
   const typingTimeoutRef = useRef(null);
   const isTypingRef = useRef(false);
   const sendingRef = useRef(false);
+  const {
+    isRecording,
+    duration,
+    start: startRecording,
+    stop: stopRecording,
+    cancel: cancelRecording,
+    isSupported: micSupported,
+    error: micError
+  } = useAudioRecorder();
   const handleTyping = useCallback(() => {
     if (!isTypingRef.current) {
       isTypingRef.current = true;
@@ -3290,6 +3413,16 @@ function MessageInput({
     },
     [handleSendText]
   );
+  const handleAudioStop = 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 = useCallback(
     async (e) => {
       const file = e.target.files?.[0];
@@ -3330,7 +3463,18 @@ function MessageInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles8.inputBar, children: [
+    micError && /* @__PURE__ */ jsx("div", { style: styles8.error, role: "alert", children: /* @__PURE__ */ jsx("span", { style: styles8.errorText, children: micError }) }),
+    isRecording ? /* @__PURE__ */ jsxs("div", { style: styles8.recordingBar, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles8.recordingIndicator, children: [
+        /* @__PURE__ */ jsx("span", { style: styles8.recordingDot }),
+        "Recording ",
+        formatDuration2(duration)
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles8.recordingActions, children: [
+        /* @__PURE__ */ jsx("button", { onClick: cancelRecording, style: styles8.cancelButton, type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { onClick: handleAudioStop, style: styles8.stopButton, type: "button", children: "Send" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { style: styles8.inputBar, children: [
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -3349,6 +3493,7 @@ function MessageInput({
           ref: fileInputRef,
           type: "file",
           onChange: handleFileSelect,
+          "aria-label": "Choose a file to upload",
           style: { display: "none" },
           accept: [
             ...SUPPORTED_IMAGE_TYPES,
@@ -3379,7 +3524,19 @@ function MessageInput({
           style: styles8.textarea
         }
       ),
-      /* @__PURE__ */ jsx(
+      onSendAudio && micSupported && !text.trim() && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: startRecording,
+          disabled: disabled || isSending,
+          "aria-label": "Record voice message",
+          title: "Record voice message",
+          style: styles8.micButton,
+          type: "button",
+          children: /* @__PURE__ */ jsx(MicIcon, { size: 22, color: COLOR.neutral700 })
+        }
+      ),
+      text.trim() && /* @__PURE__ */ jsx(
         "button",
         {
           onClick: handleSendText,
@@ -3397,6 +3554,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}`,
@@ -3473,6 +3635,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",
@@ -3505,7 +3684,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
@@ -5188,7 +5413,7 @@ function InlineAudioPlayer({
       /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "70%", backgroundColor: pal.audioFg } }),
       /* @__PURE__ */ jsx("span", { style: { ...styles14.waveBar, height: "40%", backgroundColor: pal.audioFg } })
     ] }),
-    /* @__PURE__ */ jsx("span", { style: { ...styles14.audioDuration, color: pal.audioFg }, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsx("span", { style: { ...styles14.audioDuration, color: pal.audioFg }, children: formatDuration3(displayTime) }),
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -5204,7 +5429,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;
@@ -6360,107 +6585,6 @@ function useMessages({
     reset
   };
 }
-function useAudioRecorder() {
-  const [isRecording, setIsRecording] = useState(false);
-  const [duration, setDuration] = useState(0);
-  const [error, setError] = useState(null);
-  const mediaRecorderRef = useRef(null);
-  const chunksRef = useRef([]);
-  const streamRef = useRef(null);
-  const timerRef = useRef(null);
-  const startTimeRef = useRef(0);
-  const resolveRef = useRef(null);
-  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
-  const cleanup = 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 = 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 = useCallback(async () => {
-    return new Promise((resolve) => {
-      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
-        resolve(null);
-        return;
-      }
-      resolveRef.current = resolve;
-      mediaRecorderRef.current.stop();
-    });
-  }, []);
-  const cancel = 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] = useState({});