@natoe/colab 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -701,7 +701,8 @@ declare function MessageBubble({ message, isOwn, participants, currentUserId, sh
 
 interface MessageInputProps {
     onSendText: (body: string) => Promise<void>;
-    onSendAudio: (blob: Blob, duration: number) => Promise<void>;
+    /** @deprecated MIC DISABLED — kept in the prop signature for backward compat. */
+    onSendAudio?: (blob: Blob, duration: number) => Promise<void>;
     onSendFile: (file: File) => Promise<void>;
     onTyping: (isTyping: boolean) => void;
     /** When set, shows a ReplyPreview above the input */
@@ -712,7 +713,7 @@ interface MessageInputProps {
     placeholder?: string;
     className?: string;
 }
-declare function MessageInput({ onSendText, onSendAudio, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
+declare function MessageInput({ onSendText, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
 
 interface MessageActionsMenuProps {
     message: Message;

package/dist/index.d.ts

@@ -701,7 +701,8 @@ declare function MessageBubble({ message, isOwn, participants, currentUserId, sh
 
 interface MessageInputProps {
     onSendText: (body: string) => Promise<void>;
-    onSendAudio: (blob: Blob, duration: number) => Promise<void>;
+    /** @deprecated MIC DISABLED — kept in the prop signature for backward compat. */
+    onSendAudio?: (blob: Blob, duration: number) => Promise<void>;
     onSendFile: (file: File) => Promise<void>;
     onTyping: (isTyping: boolean) => void;
     /** When set, shows a ReplyPreview above the input */
@@ -712,7 +713,7 @@ interface MessageInputProps {
     placeholder?: string;
     className?: string;
 }
-declare function MessageInput({ onSendText, onSendAudio, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
+declare function MessageInput({ onSendText, onSendFile, onTyping, replyTo, onCancelReply, disabled, placeholder, className, }: MessageInputProps): react_jsx_runtime.JSX.Element;
 
 interface MessageActionsMenuProps {
     message: Message;

package/dist/index.js

@@ -1921,107 +1921,6 @@ var styles6 = {
     fontStyle: "italic"
   }
 };
-function useAudioRecorder() {
-  const [isRecording, setIsRecording] = react.useState(false);
-  const [duration, setDuration] = react.useState(0);
-  const [error, setError] = react.useState(null);
-  const mediaRecorderRef = react.useRef(null);
-  const chunksRef = react.useRef([]);
-  const streamRef = react.useRef(null);
-  const timerRef = react.useRef(null);
-  const startTimeRef = react.useRef(0);
-  const resolveRef = react.useRef(null);
-  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
-  const cleanup = react.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 = react.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 = react.useCallback(async () => {
-    return new Promise((resolve) => {
-      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
-        resolve(null);
-        return;
-      }
-      resolveRef.current = resolve;
-      mediaRecorderRef.current.stop();
-    });
-  }, []);
-  const cancel = react.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 ReplyPreview({ message, onCancel, className }) {
   const preview = renderQuotedPreview(message);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles7.container, children: [
@@ -2114,23 +2013,10 @@ var styles7 = {
     flexShrink: 0
   }
 };
-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 MessageInput({
   onSendText,
-  onSendAudio,
+  // MIC DISABLED — onSendAudio still accepted but unused.
+  // onSendAudio,
   onSendFile,
   onTyping,
   replyTo,
@@ -2146,7 +2032,6 @@ function MessageInput({
   const typingTimeoutRef = react.useRef(null);
   const isTypingRef = react.useRef(false);
   const sendingRef = react.useRef(false);
-  const { isRecording, duration, start: startRecording, stop: stopRecording, cancel: cancelRecording, isSupported: micSupported, error: micError } = useAudioRecorder();
   const handleTyping = react.useCallback(() => {
     if (!isTypingRef.current) {
       isTypingRef.current = true;
@@ -2195,17 +2080,6 @@ function MessageInput({
     },
     [handleSendText]
   );
-  const handleAudioStop = react.useCallback(async () => {
-    const result = await stopRecording();
-    if (result) {
-      setIsSending(true);
-      try {
-        await onSendAudio(result.blob, result.duration);
-      } finally {
-        setIsSending(false);
-      }
-    }
-  }, [stopRecording, onSendAudio]);
   const handleFileSelect = react.useCallback(
     async (e) => {
       const file = e.target.files?.[0];
@@ -2227,29 +2101,8 @@ function MessageInput({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles8.container, children: [
     replyTo && onCancelReply && /* @__PURE__ */ jsxRuntime.jsx(ReplyPreview, { message: replyTo, onCancel: onCancelReply }),
-    (fileError || micError) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles8.error, children: fileError || 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: [
-      micSupported && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: startRecording,
-          disabled: disabled || isSending,
-          style: styles8.iconButton,
-          title: "Record voice message",
-          type: "button",
-          children: /* @__PURE__ */ jsxRuntime.jsx(MicIcon, { size: 20, color: "#374151" })
-        }
-      ),
+    fileError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles8.error, children: fileError }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.inputBar, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2302,11 +2155,6 @@ 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 #e5e7eb",
@@ -2362,53 +2210,7 @@ var styles8 = {
     borderRadius: "50%",
     cursor: "pointer",
     flexShrink: 0
-  },
-  recordingBar: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "12px 16px",
-    backgroundColor: "#fef2f2"
-  },
-  recordingIndicator: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    fontSize: "14px",
-    color: "#dc2626",
-    fontWeight: 500
-  },
-  recordingDot: {
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%",
-    backgroundColor: "#dc2626",
-    animation: "pulse 1.5s infinite"
-  },
-  recordingActions: {
-    display: "flex",
-    gap: "8px"
-  },
-  cancelButton: {
-    padding: "6px 14px",
-    fontSize: "13px",
-    color: "#6b7280",
-    backgroundColor: "#ffffff",
-    border: "1px solid #d1d5db",
-    borderRadius: "6px",
-    cursor: "pointer"
-  },
-  stopButton: {
-    padding: "6px 14px",
-    fontSize: "13px",
-    fontWeight: 500,
-    color: "#ffffff",
-    backgroundColor: "#dc2626",
-    border: "none",
-    borderRadius: "6px",
-    cursor: "pointer"
-  }
-};
+  }};
 function ParticipantsList({
   participants,
   currentUserId,
@@ -3710,7 +3512,7 @@ function InlineAudioPlayer({ url, duration }) {
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "70%" } }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles13.waveBar, height: "40%" } })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.audioDuration, children: formatDuration3(displayTime) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.audioDuration, children: formatDuration2(displayTime) }),
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -3726,7 +3528,7 @@ function renderMessagePreview(message) {
       return message.body;
   }
 }
-function formatDuration3(seconds) {
+function formatDuration2(seconds) {
   const safe = Math.max(0, Math.floor(seconds));
   const m = Math.floor(safe / 60);
   const s = safe % 60;
@@ -3734,7 +3536,8 @@ function formatDuration3(seconds) {
 }
 function InlineInputBar({
   onSend,
-  onSendAudio,
+  // MIC DISABLED — onSendAudio accepted but unused.
+  // onSendAudio,
   placeholder,
   unreadCount,
   isLive,
@@ -3744,15 +3547,6 @@ function InlineInputBar({
   const [text, setText] = react.useState("");
   const [isSending, setIsSending] = react.useState(false);
   const inputRef = react.useRef(null);
-  const {
-    isRecording,
-    duration,
-    start: startRecording,
-    stop: stopRecording,
-    cancel: cancelRecording,
-    isSupported: micSupported,
-    error: micError
-  } = useAudioRecorder();
   const handleSend = react.useCallback(async () => {
     const trimmed = text.trim();
     if (!trimmed || isSending) return;
@@ -3774,46 +3568,6 @@ function InlineInputBar({
     },
     [handleSend]
   );
-  const handleStopRecording = react.useCallback(async () => {
-    const result = await stopRecording();
-    if (result) {
-      setIsSending(true);
-      try {
-        await onSendAudio(result.blob, result.duration);
-      } finally {
-        setIsSending(false);
-      }
-    }
-  }, [stopRecording, onSendAudio]);
-  if (isRecording) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.recordingBar, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.recordingDot }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles13.recordingLabel, children: [
-        "Recording ",
-        formatDuration3(duration)
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: cancelRecording,
-          style: styles13.recordingCancel,
-          title: "Cancel recording",
-          type: "button",
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handleStopRecording,
-          style: styles13.recordingSend,
-          title: "Send voice message",
-          type: "button",
-          children: "Send"
-        }
-      )
-    ] });
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.inputBar, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -3823,24 +3577,13 @@ function InlineInputBar({
         value: text,
         onChange: (e) => setText(e.target.value),
         onKeyDown: handleKeyDown,
-        placeholder: micError ?? placeholder,
+        placeholder,
         disabled: isSending,
         style: styles13.input
       }
     ),
     unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
     isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.liveDot, title: "Live updates active" }),
-    micSupported && !text.trim() && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: startRecording,
-        disabled: isSending,
-        style: styles13.micButton,
-        title: "Record voice message",
-        type: "button",
-        children: /* @__PURE__ */ jsxRuntime.jsx(MicIcon, { size: 16, color: "#374151" })
-      }
-    ),
     text.trim() && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -4018,19 +3761,6 @@ var styles13 = {
     borderRadius: "50%",
     backgroundColor: "#22c55e"
   },
-  micButton: {
-    flexShrink: 0,
-    width: "28px",
-    height: "28px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "13px",
-    backgroundColor: "#f3f4f6",
-    border: "none",
-    borderRadius: "50%",
-    cursor: "pointer"
-  },
   sendButton: {
     flexShrink: 0,
     width: "28px",
@@ -4058,54 +3788,7 @@ var styles13 = {
     border: "1px solid #e5e7eb",
     borderRadius: "50%",
     cursor: "pointer"
-  },
-  // ── Recording mode ──
-  recordingBar: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    padding: "6px 10px",
-    backgroundColor: "#fef2f2",
-    border: "1px solid #fecaca",
-    borderRadius: "16px"
-  },
-  recordingDot: {
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%",
-    backgroundColor: "#dc2626",
-    flexShrink: 0,
-    animation: "pulse 1.5s infinite"
-  },
-  recordingLabel: {
-    flex: 1,
-    fontSize: "12px",
-    fontWeight: 500,
-    color: "#dc2626",
-    fontVariantNumeric: "tabular-nums"
-  },
-  recordingCancel: {
-    padding: "4px 10px",
-    fontSize: "11px",
-    color: "#6b7280",
-    backgroundColor: "#ffffff",
-    border: "1px solid #d1d5db",
-    borderRadius: "12px",
-    cursor: "pointer",
-    flexShrink: 0
-  },
-  recordingSend: {
-    padding: "4px 10px",
-    fontSize: "11px",
-    fontWeight: 500,
-    color: "#ffffff",
-    backgroundColor: "#dc2626",
-    border: "none",
-    borderRadius: "12px",
-    cursor: "pointer",
-    flexShrink: 0
-  }
-};
+  }};
 function useConversationList(options) {
   const enabled = options?.enabled ?? true;
   const { fetchConversationList, config, totalUnread: serverTotalUnread } = useCollab();
@@ -4779,6 +4462,107 @@ function useMessages({
     reset
   };
 }
+function useAudioRecorder() {
+  const [isRecording, setIsRecording] = react.useState(false);
+  const [duration, setDuration] = react.useState(0);
+  const [error, setError] = react.useState(null);
+  const mediaRecorderRef = react.useRef(null);
+  const chunksRef = react.useRef([]);
+  const streamRef = react.useRef(null);
+  const timerRef = react.useRef(null);
+  const startTimeRef = react.useRef(0);
+  const resolveRef = react.useRef(null);
+  const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && !!window.MediaRecorder;
+  const cleanup = react.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 = react.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 = react.useCallback(async () => {
+    return new Promise((resolve) => {
+      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
+        resolve(null);
+        return;
+      }
+      resolveRef.current = resolve;
+      mediaRecorderRef.current.stop();
+    });
+  }, []);
+  const cancel = react.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] = react.useState({});