@scalemule/chat 0.0.8 → 0.0.9

package/dist/react.cjs

@@ -13,225 +13,562 @@ function ChatInput({
   onSend,
   onTypingChange,
   onUploadAttachment,
-  placeholder = "Type a message..."
+  onDeleteAttachment,
+  onValidateFile,
+  placeholder = "Type a message...",
+  disabled = false,
+  maxAttachments = 5,
+  accept = "image/*,video/*"
 }) {
-  const [content, setContent] = React4.useState("");
+  const [text, setText] = React4.useState("");
   const [attachments, setAttachments] = React4.useState([]);
+  const [isDragOver, setIsDragOver] = React4.useState(false);
   const [isSending, setIsSending] = React4.useState(false);
-  const [isDragging, setIsDragging] = React4.useState(false);
+  const textareaRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
-  const typingTimeoutRef = React4.useRef(null);
-  const readyAttachments = React4.useMemo(
-    () => attachments.filter((attachment) => attachment.attachment).map((attachment) => attachment.attachment),
-    [attachments]
+  const typingTimerRef = React4.useRef(null);
+  const dragCounterRef = React4.useRef(0);
+  const hasReadyAttachments = attachments.some((a) => a.status === "ready");
+  const hasUploadingAttachments = attachments.some(
+    (a) => a.status === "uploading"
   );
-  const uploadingCount = attachments.filter((attachment) => !attachment.attachment && !attachment.error).length;
-  const emitTyping = () => {
-    onTypingChange?.(true);
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-    typingTimeoutRef.current = setTimeout(() => {
-      onTypingChange?.(false);
-    }, 2500);
-  };
-  const handleFiles = async (fileList) => {
-    if (!onUploadAttachment) return;
-    const files = Array.from(fileList);
-    for (const file of files) {
-      const id = `${file.name}:${file.size}:${Date.now()}:${Math.random().toString(36).slice(2)}`;
-      setAttachments((current) => [
-        ...current,
-        {
-          id,
-          fileName: file.name,
-          progress: 0
+  const canSend = (text.trim() || hasReadyAttachments) && !hasUploadingAttachments && !isSending;
+  React4.useEffect(() => {
+    return () => {
+      if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+      for (const att of attachments) {
+        att.abortController?.abort();
+        URL.revokeObjectURL(att.preview);
+        if (att.status === "ready" && att.attachment?.file_id) {
+          void onDeleteAttachment?.(att.attachment.file_id);
         }
-      ]);
-      const result = await onUploadAttachment(file, (progress) => {
-        setAttachments(
-          (current) => current.map(
-            (attachment) => attachment.id === id ? { ...attachment, progress } : attachment
-          )
-        );
-      });
-      setAttachments(
-        (current) => current.map((attachment) => {
-          if (attachment.id !== id) return attachment;
+      }
+    };
+  }, []);
+  const handleTyping = React4.useCallback(() => {
+    if (!onTypingChange) return;
+    onTypingChange(true);
+    if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+    typingTimerRef.current = setTimeout(() => onTypingChange(false), 2e3);
+  }, [onTypingChange]);
+  const addFiles = React4.useCallback(
+    (files) => {
+      if (!onUploadAttachment) return;
+      const remaining = maxAttachments - attachments.length;
+      const toAdd = files.slice(0, remaining);
+      for (const file of toAdd) {
+        if (onValidateFile) {
+          const validation = onValidateFile(file);
+          if (!validation.valid) {
+            console.warn("File rejected:", validation.error);
+            continue;
+          }
+        }
+        const id = crypto.randomUUID();
+        const preview = URL.createObjectURL(file);
+        const abortController = new AbortController();
+        const pending = {
+          id,
+          file,
+          preview,
+          status: "uploading",
+          progress: 0,
+          abortController
+        };
+        setAttachments((prev) => [...prev, pending]);
+        onUploadAttachment(
+          file,
+          (progress) => {
+            setAttachments(
+              (prev) => prev.map(
+                (a) => a.id === id ? { ...a, progress } : a
+              )
+            );
+          },
+          abortController.signal
+        ).then((result) => {
           if (result?.data) {
-            return {
-              ...attachment,
-              progress: 100,
-              attachment: result.data
-            };
+            setAttachments(
+              (prev) => prev.map(
+                (a) => a.id === id ? {
+                  ...a,
+                  status: "ready",
+                  progress: 100,
+                  attachment: result.data
+                } : a
+              )
+            );
+          } else {
+            setAttachments(
+              (prev) => prev.map(
+                (a) => a.id === id ? {
+                  ...a,
+                  status: "error",
+                  error: result?.error?.message ?? "Upload failed"
+                } : a
+              )
+            );
           }
-          return {
-            ...attachment,
-            error: result?.error?.message ?? "Upload failed"
-          };
-        })
-      );
-    }
-  };
-  const handleSubmit = async () => {
-    const trimmed = content.trim();
-    if (!trimmed && !readyAttachments.length || isSending || uploadingCount > 0) return;
+        }).catch((err) => {
+          if (err.name === "AbortError") return;
+          setAttachments(
+            (prev) => prev.map(
+              (a) => a.id === id ? { ...a, status: "error", error: err.message } : a
+            )
+          );
+        });
+      }
+    },
+    [attachments.length, maxAttachments, onUploadAttachment, onValidateFile]
+  );
+  const removeAttachment = React4.useCallback(
+    (id) => {
+      setAttachments((prev) => {
+        const att = prev.find((a) => a.id === id);
+        if (att) {
+          att.abortController?.abort();
+          URL.revokeObjectURL(att.preview);
+          if (att.status === "ready" && att.attachment?.file_id) {
+            void onDeleteAttachment?.(att.attachment.file_id);
+          }
+        }
+        return prev.filter((a) => a.id !== id);
+      });
+    },
+    [onDeleteAttachment]
+  );
+  const handleSend = React4.useCallback(async () => {
+    if (!canSend) return;
+    const readyAttachments = attachments.filter((a) => a.status === "ready" && a.attachment).map((a) => a.attachment);
     setIsSending(true);
     try {
-      await onSend(trimmed, readyAttachments);
-      setContent("");
+      await onSend(
+        text.trim(),
+        readyAttachments.length > 0 ? readyAttachments : void 0
+      );
+      for (const att of attachments) {
+        URL.revokeObjectURL(att.preview);
+      }
+      setText("");
       setAttachments([]);
-      onTypingChange?.(false);
+      if (onTypingChange) onTypingChange(false);
+      if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+      if (textareaRef.current) textareaRef.current.style.height = "auto";
+      textareaRef.current?.focus();
     } finally {
       setIsSending(false);
     }
-  };
+  }, [text, attachments, canSend, onSend, onTypingChange]);
+  const handleKeyDown = React4.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        void handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleChange = React4.useCallback(
+    (e) => {
+      setText(e.target.value);
+      handleTyping();
+      const ta = e.target;
+      ta.style.height = "auto";
+      ta.style.height = Math.min(ta.scrollHeight, 120) + "px";
+    },
+    [handleTyping]
+  );
+  const handleDragEnter = React4.useCallback(
+    (e) => {
+      e.preventDefault();
+      dragCounterRef.current++;
+      if (e.dataTransfer.types.includes("Files") && onUploadAttachment) {
+        setIsDragOver(true);
+      }
+    },
+    [onUploadAttachment]
+  );
+  const handleDragLeave = React4.useCallback((e) => {
+    e.preventDefault();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false);
+    }
+  }, []);
+  const handleDragOver = React4.useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  const handleDrop = React4.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      dragCounterRef.current = 0;
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) addFiles(files);
+    },
+    [addFiles]
+  );
+  const handleFileSelect = React4.useCallback(
+    (e) => {
+      const files = Array.from(e.target.files ?? []);
+      if (files.length > 0) addFiles(files);
+      e.target.value = "";
+    },
+    [addFiles]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      onDragOver: (event) => {
-        event.preventDefault();
-        if (onUploadAttachment) {
-          setIsDragging(true);
-        }
-      },
-      onDragLeave: () => setIsDragging(false),
-      onDrop: (event) => {
-        event.preventDefault();
-        setIsDragging(false);
-        void handleFiles(event.dataTransfer.files);
-      },
       style: {
+        position: "relative",
         borderTop: "1px solid var(--sm-border-color, #e5e7eb)",
-        background: isDragging ? "rgba(37, 99, 235, 0.06)" : "var(--sm-surface, #fff)",
-        padding: 12,
-        display: "flex",
-        flexDirection: "column",
-        gap: 10
+        background: "var(--sm-surface, #fff)"
       },
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
       children: [
-        attachments.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsxs(
+        isDragOver && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
-              display: "inline-flex",
+              position: "absolute",
+              inset: 0,
+              zIndex: 50,
+              background: "rgba(37, 99, 235, 0.1)",
+              backdropFilter: "blur(4px)",
+              borderRadius: "0 0 var(--sm-border-radius, 16px) var(--sm-border-radius, 16px)",
+              display: "flex",
               alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "32",
+                  height: "32",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "var(--sm-primary, #2563eb)",
+                  strokeWidth: "2",
+                  style: { margin: "0 auto 8px" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    color: "var(--sm-primary, #2563eb)",
+                    fontSize: 14,
+                    fontWeight: 500
+                  },
+                  children: "Drop to attach"
+                }
+              )
+            ] })
+          }
+        ),
+        attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
               gap: 8,
-              padding: "6px 10px",
-              borderRadius: 999,
-              background: "var(--sm-surface-muted, #f8fafc)",
-              border: "1px solid var(--sm-border-color, #e5e7eb)",
-              fontSize: 12
+              padding: "8px 12px 4px",
+              overflowX: "auto"
+            },
+            children: attachments.map((att) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  background: att.status === "error" ? "#fef2f2" : "var(--sm-surface-muted, #f8fafc)",
+                  border: att.status === "error" ? "1px solid #fecaca" : "1px solid var(--sm-border-color, #e5e7eb)",
+                  borderRadius: 8,
+                  padding: "6px 8px",
+                  fontSize: 12,
+                  flexShrink: 0,
+                  maxWidth: 180
+                },
+                children: [
+                  att.file.type.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: att.preview,
+                      alt: "",
+                      style: {
+                        width: 32,
+                        height: 32,
+                        borderRadius: 4,
+                        objectFit: "cover",
+                        flexShrink: 0
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 32,
+                        height: 32,
+                        borderRadius: 4,
+                        background: "var(--sm-border-color, #e5e7eb)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          style: { color: "var(--sm-muted-text, #6b7280)" },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "23 7 16 12 23 17 23 7" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        style: {
+                          margin: 0,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          color: "var(--sm-text-color, #111827)"
+                        },
+                        children: att.file.name
+                      }
+                    ),
+                    att.status === "uploading" && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          width: "100%",
+                          height: 3,
+                          background: "var(--sm-border-color, #e5e7eb)",
+                          borderRadius: 999,
+                          marginTop: 2,
+                          overflow: "hidden"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            style: {
+                              height: "100%",
+                              background: "var(--sm-primary, #2563eb)",
+                              borderRadius: 999,
+                              transition: "width 0.2s ease",
+                              width: `${att.progress}%`
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        style: {
+                          margin: 0,
+                          color: "#dc2626",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: att.error
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => removeAttachment(att.id),
+                      style: {
+                        flexShrink: 0,
+                        width: 16,
+                        height: 16,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: 999,
+                        background: "var(--sm-muted-text, #9ca3af)",
+                        color: "#fff",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: 10,
+                        lineHeight: 1,
+                        padding: 0
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              },
+              att.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-end",
+              gap: 8,
+              padding: "8px 12px"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: attachment.fileName }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: attachment.error ? "#dc2626" : "var(--sm-muted-text, #6b7280)" }, children: attachment.error ?? `${attachment.progress}%` }),
+              onUploadAttachment && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: disabled || attachments.length >= maxAttachments,
+                    "aria-label": "Attach file",
+                    style: {
+                      flexShrink: 0,
+                      width: 32,
+                      height: 32,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: 999,
+                      border: "none",
+                      background: "transparent",
+                      cursor: disabled || attachments.length >= maxAttachments ? "not-allowed" : "pointer",
+                      color: "var(--sm-muted-text, #6b7280)",
+                      opacity: disabled || attachments.length >= maxAttachments ? 0.4 : 1,
+                      marginBottom: 2
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    accept,
+                    multiple: true,
+                    style: { display: "none" },
+                    onChange: handleFileSelect
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: text,
+                  onChange: handleChange,
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  disabled,
+                  rows: 1,
+                  style: {
+                    flex: 1,
+                    fontSize: 14,
+                    background: "var(--sm-surface-muted, #f8fafc)",
+                    border: "1px solid var(--sm-border-color, #e5e7eb)",
+                    borderRadius: 16,
+                    padding: "8px 16px",
+                    fontFamily: "var(--sm-font-family, system-ui, -apple-system, sans-serif)",
+                    color: "var(--sm-text-color, #111827)",
+                    resize: "none",
+                    overflow: "hidden",
+                    outline: "none",
+                    minHeight: 36,
+                    lineHeight: "20px",
+                    opacity: disabled ? 0.5 : 1,
+                    cursor: disabled ? "not-allowed" : "text",
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
+                  onClick: () => void handleSend(),
+                  disabled: disabled || !canSend,
                   type: "button",
-                  onClick: () => {
-                    setAttachments((current) => current.filter((item) => item.id !== attachment.id));
-                  },
+                  "aria-label": "Send message",
                   style: {
+                    flexShrink: 0,
+                    width: 32,
+                    height: 32,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: 999,
                     border: "none",
-                    background: "transparent",
-                    cursor: "pointer",
-                    color: "var(--sm-muted-text, #6b7280)"
+                    background: "var(--sm-primary, #2563eb)",
+                    color: "#fff",
+                    cursor: disabled || !canSend ? "not-allowed" : "pointer",
+                    opacity: disabled || !canSend ? 0.4 : 1,
+                    marginBottom: 2,
+                    transition: "opacity 0.15s ease"
                   },
-                  children: "x"
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                      ]
+                    }
+                  )
                 }
               )
             ]
-          },
-          attachment.id
-        )) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 10, alignItems: "flex-end" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "textarea",
-            {
-              value: content,
-              onChange: (event) => {
-                setContent(event.target.value);
-                emitTyping();
-              },
-              onKeyDown: (event) => {
-                if (event.key === "Enter" && !event.shiftKey) {
-                  event.preventDefault();
-                  void handleSubmit();
-                }
-              },
-              rows: 1,
-              placeholder,
-              style: {
-                flex: 1,
-                minHeight: 44,
-                maxHeight: 120,
-                resize: "vertical",
-                borderRadius: 14,
-                border: "1px solid var(--sm-border-color, #e5e7eb)",
-                padding: "12px 14px",
-                font: "inherit",
-                color: "var(--sm-text-color, #111827)"
-              }
-            }
-          ),
-          onUploadAttachment ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                hidden: true,
-                multiple: true,
-                accept: "image/*,video/*,audio/*",
-                onChange: (event) => {
-                  if (event.target.files) {
-                    void handleFiles(event.target.files);
-                    event.target.value = "";
-                  }
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => fileInputRef.current?.click(),
-                "aria-label": "Attach files",
-                style: {
-                  width: 44,
-                  height: 44,
-                  borderRadius: 14,
-                  border: "1px solid var(--sm-border-color, #e5e7eb)",
-                  background: "var(--sm-surface, #fff)",
-                  cursor: "pointer",
-                  color: "var(--sm-text-color, #111827)"
-                },
-                children: "+"
-              }
-            )
-          ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => void handleSubmit(),
-              disabled: isSending || uploadingCount > 0 || !content.trim() && !readyAttachments.length,
-              style: {
-                height: 44,
-                padding: "0 16px",
-                borderRadius: 14,
-                border: "none",
-                background: "var(--sm-primary, #2563eb)",
-                color: "#fff",
-                cursor: isSending ? "wait" : "pointer",
-                opacity: isSending || uploadingCount > 0 ? 0.75 : 1
-              },
-              children: "Send"
-            }
-          )
-        ] })
+          }
+        )
       ]
     }
   );
@@ -322,288 +659,870 @@ function EmojiPicker({
     document.body
   );
 }
+function EmojiPickerTrigger({
+  onSelect,
+  emojis
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const buttonRef = React4.useRef(null);
+  const handleClose = React4.useCallback(() => setOpen(false), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: () => setOpen(!open),
+        "aria-label": "Add reaction",
+        style: {
+          padding: 6,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: "var(--sm-muted-text, #6b7280)",
+          borderRadius: 8,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "color 0.15s ease"
+        },
+        onMouseEnter: (e) => {
+          e.target.style.color = "var(--sm-text-color, #111827)";
+        },
+        onMouseLeave: (e) => {
+          e.target.style.color = "var(--sm-muted-text, #6b7280)";
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "18",
+            height: "18",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+            ]
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      EmojiPicker,
+      {
+        onSelect,
+        onClose: handleClose,
+        anchorRef: buttonRef,
+        emojis
+      }
+    )
+  ] });
+}
+function ReactionBar({
+  reactions,
+  currentUserId,
+  onToggleReaction
+}) {
+  if (!reactions || reactions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 4 }, children: reactions.map((r) => {
+    const hasReacted = currentUserId ? r.user_ids.includes(currentUserId) : false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => onToggleReaction(r.emoji),
+        type: "button",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "2px 8px",
+          borderRadius: 999,
+          fontSize: 12,
+          border: hasReacted ? "1px solid var(--sm-reaction-active-border, rgba(37, 99, 235, 0.4))" : "1px solid var(--sm-border-color, #e5e7eb)",
+          background: hasReacted ? "var(--sm-reaction-active-bg, rgba(37, 99, 235, 0.08))" : "var(--sm-surface-muted, #f8fafc)",
+          color: hasReacted ? "var(--sm-primary, #2563eb)" : "var(--sm-text-color, #111827)",
+          cursor: "pointer",
+          lineHeight: "18px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: r.emoji }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: r.count })
+        ]
+      },
+      r.emoji
+    );
+  }) });
+}
 
 // src/react-components/utils.ts
 var timeFormatter = new Intl.DateTimeFormat(void 0, {
   hour: "numeric",
   minute: "2-digit"
 });
-var dateFormatter = new Intl.DateTimeFormat(void 0, {
-  month: "short",
-  day: "numeric",
-  year: "numeric"
-});
 function formatMessageTime(value) {
   if (!value) return "";
   return timeFormatter.format(new Date(value));
 }
-function formatDayLabel(value) {
-  if (!value) return "";
-  return dateFormatter.format(new Date(value));
-}
-function isSameDay(left, right) {
-  if (!left || !right) return false;
-  const leftDate = new Date(left);
-  const rightDate = new Date(right);
-  return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDate() === rightDate.getDate();
+function useAttachmentUrl(fileId, hasUrl, fetcher) {
+  const [url, setUrl] = React4.useState(null);
+  React4.useEffect(() => {
+    if (hasUrl || !fileId || !fetcher) return;
+    fetcher(fileId).then((viewUrl) => {
+      if (viewUrl) setUrl(viewUrl);
+    }).catch(() => {
+    });
+  }, [fileId, hasUrl, fetcher]);
+  return url;
 }
-function renderAttachment(messageId, attachment) {
-  const key = `${messageId}:${attachment.file_id}`;
-  const url = attachment.presigned_url;
-  if (!url) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          padding: "10px 12px",
-          borderRadius: 12,
-          background: "rgba(255,255,255,0.16)",
-          fontSize: 13
-        },
-        children: attachment.file_name
-      },
-      key
-    );
-  }
-  if (attachment.mime_type.startsWith("image/")) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: url,
-        alt: attachment.file_name,
-        loading: "lazy",
-        style: {
-          display: "block",
-          maxWidth: "100%",
-          borderRadius: 12,
-          marginTop: 8
+function AttachmentRenderer({
+  att,
+  fetcher
+}) {
+  const [expanded, setExpanded] = React4.useState(false);
+  const fetchedUrl = useAttachmentUrl(att.file_id, !!att.presigned_url, fetcher);
+  const viewUrl = att.presigned_url || fetchedUrl;
+  const isImage = att.mime_type?.startsWith("image/");
+  const isVideo = att.mime_type?.startsWith("video/");
+  const isAudio = att.mime_type?.startsWith("audio/");
+  if (isImage && viewUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: viewUrl,
+          alt: att.file_name,
+          loading: "lazy",
+          onClick: () => setExpanded(true),
+          style: {
+            display: "block",
+            maxHeight: 240,
+            maxWidth: "100%",
+            objectFit: "contain",
+            cursor: "pointer",
+            borderRadius: 8
+          }
         }
-      },
-      key
-    );
+      ),
+      expanded && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          onClick: () => setExpanded(false),
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            background: "rgba(0, 0, 0, 0.8)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 16,
+            cursor: "pointer"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: viewUrl,
+              alt: att.file_name,
+              style: {
+                maxWidth: "100%",
+                maxHeight: "100%",
+                objectFit: "contain",
+                borderRadius: 8
+              }
+            }
+          )
+        }
+      )
+    ] });
   }
-  if (attachment.mime_type.startsWith("video/")) {
+  if (isVideo && viewUrl) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "video",
       {
+        src: viewUrl,
         controls: true,
-        src: url,
+        preload: "metadata",
+        poster: att.thumbnail_url,
         style: {
           display: "block",
-          width: "100%",
-          maxWidth: 320,
-          borderRadius: 12,
-          marginTop: 8
+          maxHeight: 240,
+          maxWidth: "100%",
+          borderRadius: 8
         }
-      },
-      key
+      }
     );
   }
-  if (attachment.mime_type.startsWith("audio/")) {
+  if (isAudio && viewUrl) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "audio",
       {
+        src: viewUrl,
         controls: true,
-        src: url,
+        style: { display: "block", width: "100%", marginTop: 4 }
+      }
+    );
+  }
+  if (isImage && !viewUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
         style: {
-          display: "block",
-          width: "100%",
-          marginTop: 8
-        }
-      },
-      key
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "8px 12px",
+          fontSize: 12,
+          color: "var(--sm-muted-text, #6b7280)",
+          background: "var(--sm-surface-muted, #f8fafc)",
+          borderRadius: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: 16,
+                height: 16,
+                border: "2px solid var(--sm-border-color, #e5e7eb)",
+                borderTopColor: "var(--sm-primary, #2563eb)",
+                borderRadius: 999,
+                animation: "sm-spin 0.8s linear infinite"
+              }
+            }
+          ),
+          "Loading image..."
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      href: url,
-      target: "_blank",
-      rel: "noreferrer",
       style: {
-        display: "inline-block",
-        marginTop: 8,
-        color: "inherit",
-        fontSize: 13
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 12px",
+        fontSize: 14,
+        color: "var(--sm-text-color, #111827)",
+        background: "var(--sm-surface-muted, #f8fafc)",
+        borderRadius: 8,
+        border: "1px solid var(--sm-border-color, #e5e7eb)"
       },
-      children: attachment.file_name
-    },
-    key
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" })
+            ]
+          }
+        ),
+        viewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: viewUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            style: { color: "inherit", textDecoration: "underline" },
+            children: att.file_name
+          }
+        ) : att.file_name
+      ]
+    }
   );
 }
 function ChatMessageItem({
   message,
   currentUserId,
+  conversationId,
+  profile,
   onAddReaction,
   onRemoveReaction,
+  onEdit,
+  onDelete,
   onReport,
+  onFetchAttachmentUrl,
+  isOwnMessage: isOwnMessageProp,
   highlight = false
 }) {
-  const [showPicker, setShowPicker] = React4.useState(false);
-  const isOwn = Boolean(currentUserId && message.sender_id === currentUserId);
+  const [showActions, setShowActions] = React4.useState(false);
+  const [editing, setEditing] = React4.useState(false);
+  const [editContent, setEditContent] = React4.useState(message.content);
+  const isOwn = isOwnMessageProp !== void 0 ? isOwnMessageProp : Boolean(currentUserId && message.sender_id === currentUserId);
+  const displayName = profile?.display_name ?? "User";
+  const username = profile?.username;
+  const avatarUrl = profile?.avatar_url;
+  const initials = displayName.charAt(0).toUpperCase();
   const canReact = Boolean(onAddReaction || onRemoveReaction);
-  const reactionEntries = React4.useMemo(() => message.reactions ?? [], [message.reactions]);
+  function handleToggleReaction(emoji) {
+    const hasReacted = message.reactions?.some(
+      (r) => r.emoji === emoji && currentUserId && r.user_ids.includes(currentUserId)
+    );
+    if (hasReacted) {
+      void onRemoveReaction?.(message.id, emoji);
+    } else {
+      void onAddReaction?.(message.id, emoji);
+    }
+  }
+  function handleSaveEdit() {
+    if (editContent.trim() && editContent !== message.content) {
+      void onEdit?.(message.id, editContent.trim());
+    }
+    setEditing(false);
+  }
+  if (message.message_type === "system") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          textAlign: "center",
+          fontSize: 12,
+          color: "var(--sm-muted-text, #6b7280)",
+          padding: "8px 0",
+          fontStyle: "italic"
+        },
+        children: message.content
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
         display: "flex",
-        flexDirection: "column",
-        alignItems: isOwn ? "flex-end" : "flex-start",
-        gap: 6
+        justifyContent: isOwn ? "flex-end" : "flex-start",
+        padding: "3px 16px",
+        position: "relative"
       },
+      onMouseEnter: () => setShowActions(true),
+      onMouseLeave: () => setShowActions(false),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              maxWidth: "min(82%, 560px)",
-              padding: message.attachments?.length ? 10 : "10px 12px",
-              borderRadius: "var(--sm-border-radius, 16px)",
-              background: isOwn ? "var(--sm-own-bubble, #2563eb)" : "var(--sm-other-bubble, #f3f4f6)",
-              color: isOwn ? "var(--sm-own-text, #fff)" : "var(--sm-other-text, #111827)",
-              boxShadow: highlight ? "0 0 0 2px rgba(37, 99, 235, 0.22)" : "none",
-              transition: "box-shadow 0.2s ease"
-            },
-            children: [
-              message.content ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }, children: message.content }) : null,
-              message.attachments?.map((attachment) => renderAttachment(message.id, attachment))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        !isOwn && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
+              flexShrink: 0,
+              width: 32,
+              height: 32,
+              borderRadius: 999,
+              background: "var(--sm-surface-muted, #f3f4f6)",
+              overflow: "hidden",
               display: "flex",
               alignItems: "center",
-              gap: 8,
+              justifyContent: "center",
+              fontSize: 12,
+              fontWeight: 500,
               color: "var(--sm-muted-text, #6b7280)",
-              fontSize: 12
+              marginRight: 10,
+              marginTop: 2
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatMessageTime(message.created_at) }),
-              message.is_edited ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "edited" }) : null,
-              onReport && !isOwn ? /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => void onReport(message.id),
-                  style: {
-                    border: "none",
-                    background: "transparent",
-                    color: "inherit",
-                    cursor: "pointer",
-                    fontSize: 12,
-                    padding: 0
-                  },
-                  children: "Report"
-                }
-              ) : null,
-              canReact ? /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowPicker((value) => !value),
-                  style: {
-                    border: "none",
-                    background: "transparent",
-                    color: "inherit",
-                    cursor: "pointer",
-                    fontSize: 12,
-                    padding: 0
-                  },
-                  children: "React"
-                }
-              ) : null
-            ]
+            children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: avatarUrl,
+                alt: displayName,
+                style: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            ) : initials
           }
         ),
-        showPicker && canReact ? /* @__PURE__ */ jsxRuntime.jsx(
-          EmojiPicker,
-          {
-            onSelect: (emoji) => {
-              setShowPicker(false);
-              void onAddReaction?.(message.id, emoji);
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", maxWidth: "75%", minWidth: 0 }, children: [
+          showActions && canReact && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: -12,
+                [isOwn ? "right" : "left"]: 4,
+                zIndex: 50,
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                background: "var(--sm-surface, #fff)",
+                border: "1px solid var(--sm-border-color, #e5e7eb)",
+                borderRadius: 8,
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                padding: "2px 4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  EmojiPickerTrigger,
+                  {
+                    onSelect: (emoji) => void onAddReaction?.(message.id, emoji)
+                  }
+                ),
+                !isOwn && onReport && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      setShowActions(false);
+                      onReport(message.id);
+                    },
+                    type: "button",
+                    "aria-label": "Report",
+                    title: "Report message",
+                    style: {
+                      padding: 6,
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      color: "var(--sm-muted-text, #6b7280)",
+                      borderRadius: 8,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                isOwn && onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setEditing(true),
+                    type: "button",
+                    "aria-label": "Edit",
+                    style: {
+                      padding: 6,
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      color: "var(--sm-muted-text, #6b7280)",
+                      borderRadius: 8,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                isOwn && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => void onDelete(message.id),
+                    type: "button",
+                    "aria-label": "Delete",
+                    style: {
+                      padding: 6,
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      color: "var(--sm-muted-text, #6b7280)",
+                      borderRadius: 8,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 6 5 6 21 6" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
             }
-          }
-        ) : null,
-        reactionEntries.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: reactionEntries.map((reaction) => {
-          const reacted = Boolean(currentUserId && reaction.user_ids.includes(currentUserId));
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              type: "button",
-              onClick: () => {
-                if (reacted) {
-                  void onRemoveReaction?.(message.id, reaction.emoji);
-                  return;
-                }
-                void onAddReaction?.(message.id, reaction.emoji);
+              style: {
+                borderRadius: "var(--sm-border-radius, 16px)",
+                ...isOwn ? { borderBottomRightRadius: 6 } : { borderBottomLeftRadius: 6 },
+                padding: "8px 14px",
+                background: isOwn ? "var(--sm-own-bubble-bg, var(--sm-own-bubble, var(--sm-primary, #2563eb)))" : "var(--sm-other-bubble-bg, var(--sm-other-bubble, #f3f4f6))",
+                color: isOwn ? "var(--sm-own-bubble-text, var(--sm-own-text, #ffffff))" : "var(--sm-other-bubble-text, var(--sm-other-text, #111827))",
+                fontSize: "var(--sm-font-size, 14px)",
+                fontFamily: "var(--sm-font-family, system-ui, -apple-system, sans-serif)",
+                boxShadow: highlight ? "0 0 0 2px rgba(37, 99, 235, 0.22)" : "none",
+                transition: "box-shadow 0.2s ease"
               },
+              children: [
+                !isOwn && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "baseline",
+                      gap: 6,
+                      marginBottom: 2
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 12,
+                            fontWeight: 600,
+                            color: "var(--sm-other-bubble-text, var(--sm-other-text, #111827))"
+                          },
+                          children: displayName
+                        }
+                      ),
+                      username && /* @__PURE__ */ jsxRuntime.jsxs(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 12,
+                            color: "var(--sm-muted-text, #9ca3af)"
+                          },
+                          children: [
+                            "@",
+                            username
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: editContent,
+                      onChange: (e) => setEditContent(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") handleSaveEdit();
+                        if (e.key === "Escape") setEditing(false);
+                      },
+                      autoFocus: true,
+                      style: {
+                        flex: 1,
+                        fontSize: 14,
+                        border: "1px solid var(--sm-border-color, #e5e7eb)",
+                        borderRadius: 6,
+                        padding: "4px 8px",
+                        outline: "none",
+                        color: "var(--sm-text-color, #111827)",
+                        background: "var(--sm-surface, #fff)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: handleSaveEdit,
+                      type: "button",
+                      style: {
+                        fontSize: 12,
+                        fontWeight: 500,
+                        border: "none",
+                        background: "transparent",
+                        cursor: "pointer",
+                        color: isOwn ? "rgba(255,255,255,0.7)" : "var(--sm-primary, #2563eb)"
+                      },
+                      children: "Save"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setEditing(false),
+                      type: "button",
+                      style: {
+                        fontSize: 12,
+                        border: "none",
+                        background: "transparent",
+                        cursor: "pointer",
+                        color: isOwn ? "rgba(255,255,255,0.7)" : "var(--sm-muted-text, #6b7280)"
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] }) : message.content ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    style: {
+                      margin: 0,
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word"
+                    },
+                    children: message.content
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      marginTop: 2,
+                      justifyContent: isOwn ? "flex-end" : "flex-start"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 10,
+                            color: isOwn ? "rgba(255,255,255,0.6)" : "var(--sm-muted-text, #9ca3af)"
+                          },
+                          children: formatMessageTime(message.created_at)
+                        }
+                      ),
+                      message.is_edited && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 10,
+                            fontStyle: "italic",
+                            color: isOwn ? "rgba(255,255,255,0.6)" : "var(--sm-muted-text, #9ca3af)"
+                          },
+                          children: "(edited)"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
               style: {
-                border: reacted ? "1px solid rgba(37, 99, 235, 0.4)" : "1px solid var(--sm-border-color, #e5e7eb)",
-                background: reacted ? "rgba(37, 99, 235, 0.08)" : "var(--sm-surface, #fff)",
-                color: "var(--sm-text-color, #111827)",
-                borderRadius: 999,
-                padding: "4px 8px",
-                cursor: "pointer",
-                fontSize: 12
+                marginTop: 4,
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 8,
+                justifyContent: isOwn ? "flex-end" : "flex-start"
               },
-              children: [
-                reaction.emoji,
-                " ",
-                reaction.count
-              ]
-            },
-            `${message.id}:${reaction.emoji}`
-          );
-        }) }) : null
+              children: message.attachments.map((att) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    borderRadius: 8,
+                    overflow: "hidden",
+                    maxWidth: 320
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    AttachmentRenderer,
+                    {
+                      att,
+                      fetcher: onFetchAttachmentUrl
+                    }
+                  )
+                },
+                att.file_id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ReactionBar,
+            {
+              reactions: message.reactions ?? [],
+              currentUserId,
+              onToggleReaction: handleToggleReaction
+            }
+          )
+        ] })
       ]
     }
   );
 }
-function getUnreadIndex(messages, unreadSince) {
-  if (!unreadSince) return -1;
-  return messages.findIndex((message) => new Date(message.created_at).getTime() > new Date(unreadSince).getTime());
+function getDateLabel(dateStr) {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const diffDays = Math.round(
+    (today.getTime() - dateDay.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
+  });
+}
+function isSameDay(a, b) {
+  return new Date(a).toDateString() === new Date(b).toDateString();
 }
 function ChatMessageList({
   messages,
   currentUserId,
-  unreadSince,
-  scrollToUnreadOnMount = true,
+  conversationId,
+  profiles,
+  hasMore = false,
+  isLoading = false,
+  onLoadMore,
   onAddReaction,
   onRemoveReaction,
+  onEdit,
+  onDelete,
   onReport,
+  onFetchAttachmentUrl,
+  firstUnreadMessageId,
+  unreadSince,
+  isNearBottom: isNearBottomProp,
+  onReachBottom,
   emptyState
 }) {
   const containerRef = React4.useRef(null);
-  const unreadMarkerRef = React4.useRef(null);
-  const lastMessageCountRef = React4.useRef(messages.length);
-  const didScrollToUnreadRef = React4.useRef(false);
-  const [showJumpToLatest, setShowJumpToLatest] = React4.useState(false);
-  const unreadIndex = React4.useMemo(() => getUnreadIndex(messages, unreadSince), [messages, unreadSince]);
+  const bottomRef = React4.useRef(null);
+  const unreadDividerRef = React4.useRef(null);
+  const prevLengthRef = React4.useRef(messages.length);
+  const isNearBottomRef = React4.useRef(true);
+  const [showNewMessagesPill, setShowNewMessagesPill] = React4.useState(false);
+  const resolvedFirstUnreadId = firstUnreadMessageId ?? (unreadSince ? messages.find(
+    (m) => new Date(m.created_at).getTime() > new Date(unreadSince).getTime()
+  )?.id : void 0);
   React4.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const shouldStickToBottom = distanceFromBottom < 80;
-    if (messages.length > lastMessageCountRef.current && shouldStickToBottom) {
-      container.scrollTo({ top: container.scrollHeight, behavior: "smooth" });
-      setShowJumpToLatest(false);
-    } else if (messages.length > lastMessageCountRef.current) {
-      setShowJumpToLatest(true);
+    if (isNearBottomProp !== void 0) {
+      isNearBottomRef.current = isNearBottomProp;
+    }
+  }, [isNearBottomProp]);
+  const handleScroll = React4.useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const threshold = 100;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
+    isNearBottomRef.current = nearBottom;
+    if (nearBottom) {
+      setShowNewMessagesPill(false);
+    }
+    if (unreadDividerRef.current && el) {
+      const dividerRect = unreadDividerRef.current.getBoundingClientRect();
+      const containerRect = el.getBoundingClientRect();
+      if (dividerRect.bottom < containerRect.bottom) {
+        onReachBottom?.();
+      }
+    } else if (nearBottom) {
+      onReachBottom?.();
+    }
+  }, [onReachBottom]);
+  React4.useEffect(() => {
+    if (messages.length > prevLengthRef.current) {
+      if (isNearBottomRef.current) {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+      } else {
+        setShowNewMessagesPill(true);
+      }
     }
-    lastMessageCountRef.current = messages.length;
-  }, [messages]);
+    prevLengthRef.current = messages.length;
+  }, [messages.length]);
   React4.useEffect(() => {
-    if (!scrollToUnreadOnMount || unreadIndex < 0 || didScrollToUnreadRef.current) {
-      return;
+    if (!isLoading && messages.length > 0) {
+      if (resolvedFirstUnreadId && unreadDividerRef.current) {
+        unreadDividerRef.current.scrollIntoView({
+          block: "start",
+          behavior: "instant"
+        });
+      } else {
+        bottomRef.current?.scrollIntoView({
+          behavior: "instant"
+        });
+      }
     }
-    unreadMarkerRef.current?.scrollIntoView({ block: "center" });
-    didScrollToUnreadRef.current = true;
-  }, [scrollToUnreadOnMount, unreadIndex, messages.length]);
-  if (!messages.length) {
+  }, [isLoading, resolvedFirstUnreadId]);
+  React4.useEffect(() => {
+    const container = containerRef.current;
+    const bottom = bottomRef.current;
+    if (!container || !bottom) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          onReachBottom?.();
+        }
+      },
+      { root: container, threshold: 0.1 }
+    );
+    observer.observe(bottom);
+    return () => observer.disconnect();
+  }, [onReachBottom]);
+  const scrollToBottom = React4.useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    setShowNewMessagesPill(false);
+  }, []);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--sm-muted-text, #6b7280)",
+          fontSize: 14,
+          padding: 24
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 20,
+              height: 20,
+              border: "2px solid var(--sm-border-color, #e5e7eb)",
+              borderTopColor: "var(--sm-primary, #2563eb)",
+              borderRadius: 999,
+              animation: "sm-spin 0.8s linear infinite"
+            }
+          }
+        )
+      }
+    );
+  }
+  if (messages.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -621,103 +1540,200 @@ function ChatMessageList({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", flex: 1, minHeight: 0 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes sm-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: containerRef,
-        onScroll: (event) => {
-          const element = event.currentTarget;
-          const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
-          setShowJumpToLatest(distanceFromBottom > 120);
-        },
+        onScroll: handleScroll,
         style: {
           height: "100%",
           overflowY: "auto",
-          padding: 16,
-          display: "flex",
-          flexDirection: "column",
-          gap: 12,
+          position: "relative",
           background: "var(--sm-surface-muted, #f8fafc)"
         },
-        children: messages.map((message, index) => {
-          const previousMessage = messages[index - 1];
-          const showDateDivider = !previousMessage || !isSameDay(previousMessage.created_at, message.created_at);
-          const showUnreadDivider = unreadIndex === index;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
-            showDateDivider ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  alignSelf: "center",
-                  fontSize: 12,
-                  color: "var(--sm-muted-text, #6b7280)",
-                  padding: "4px 10px",
-                  borderRadius: 999,
-                  background: "rgba(148, 163, 184, 0.12)"
-                },
-                children: formatDayLabel(message.created_at)
-              }
-            ) : null,
-            showUnreadDivider ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                ref: unreadMarkerRef,
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 10,
-                  color: "var(--sm-primary, #2563eb)",
-                  fontSize: 12,
-                  fontWeight: 600
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, height: 1, background: "rgba(37, 99, 235, 0.28)" } }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New messages" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, height: 1, background: "rgba(37, 99, 235, 0.28)" } })
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ChatMessageItem,
-              {
-                message,
-                currentUserId,
-                onAddReaction,
-                onRemoveReaction,
-                onReport,
-                highlight: showUnreadDivider
-              }
-            )
-          ] }, message.id);
-        })
+        children: [
+          hasMore && onLoadMore && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                padding: "12px 0"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onLoadMore,
+                  type: "button",
+                  style: {
+                    fontSize: 12,
+                    color: "var(--sm-muted-text, #6b7280)",
+                    fontWeight: 500,
+                    padding: "4px 12px",
+                    borderRadius: 999,
+                    border: "1px solid var(--sm-border-color, #e5e7eb)",
+                    background: "var(--sm-surface, #fff)",
+                    cursor: "pointer"
+                  },
+                  children: "Load earlier messages"
+                }
+              )
+            }
+          ),
+          messages.map((msg, i) => {
+            const prevMsg = i > 0 ? messages[i - 1] : null;
+            const showDateSeparator = !prevMsg || !isSameDay(msg.created_at, prevMsg.created_at);
+            const showUnreadDivider = resolvedFirstUnreadId === msg.id;
+            const isOwn = msg.sender_id === currentUserId;
+            return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
+              showUnreadDivider && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  ref: unreadDividerRef,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    padding: "8px 16px",
+                    margin: "4px 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          height: 1,
+                          background: "var(--sm-unread-divider-color, rgba(37, 99, 235, 0.4))"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 12,
+                          color: "var(--sm-primary, #2563eb)",
+                          fontWeight: 500,
+                          background: "var(--sm-unread-divider-bg, rgba(37, 99, 235, 0.06))",
+                          padding: "2px 8px",
+                          borderRadius: 999
+                        },
+                        children: "New messages"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          height: 1,
+                          background: "var(--sm-unread-divider-color, rgba(37, 99, 235, 0.4))"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              showDateSeparator && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    padding: "8px 16px",
+                    margin: "4px 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          height: 1,
+                          background: "var(--sm-border-color, #e5e7eb)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 12,
+                          color: "var(--sm-muted-text, #6b7280)",
+                          fontWeight: 500
+                        },
+                        children: getDateLabel(msg.created_at)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          height: 1,
+                          background: "var(--sm-border-color, #e5e7eb)"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ChatMessageItem,
+                {
+                  message: msg,
+                  currentUserId,
+                  conversationId,
+                  profile: profiles?.get(msg.sender_id),
+                  onAddReaction,
+                  onRemoveReaction,
+                  onEdit,
+                  onDelete,
+                  onReport,
+                  onFetchAttachmentUrl,
+                  isOwnMessage: isOwn,
+                  highlight: showUnreadDivider
+                }
+              )
+            ] }, msg.id);
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef })
+        ]
       }
     ),
-    showJumpToLatest ? /* @__PURE__ */ jsxRuntime.jsx(
+    showNewMessagesPill && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        onClick: scrollToBottom,
         type: "button",
-        onClick: () => {
-          containerRef.current?.scrollTo({
-            top: containerRef.current.scrollHeight,
-            behavior: "smooth"
-          });
-          setShowJumpToLatest(false);
-        },
         style: {
           position: "absolute",
-          right: 16,
-          bottom: 16,
+          bottom: 12,
+          left: "50%",
+          transform: "translateX(-50%)",
           border: "none",
           borderRadius: 999,
           background: "var(--sm-primary, #2563eb)",
           color: "#fff",
-          padding: "10px 14px",
+          padding: "6px 16px",
           cursor: "pointer",
-          boxShadow: "0 12px 28px rgba(37, 99, 235, 0.28)"
+          boxShadow: "0 4px 12px rgba(37, 99, 235, 0.3)",
+          fontSize: 12,
+          fontWeight: 500,
+          zIndex: 10,
+          display: "flex",
+          alignItems: "center",
+          gap: 4
         },
-        children: "New messages"
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: "\u2193" }),
+          " New messages"
+        ]
       }
-    ) : null
+    )
   ] });
 }
 
@@ -749,8 +1765,10 @@ function ChatThread({
   conversationId,
   theme,
   currentUserId,
+  profiles,
   title = "Chat",
-  subtitle
+  subtitle,
+  onFetchAttachmentUrl
 }) {
   const client = useChatClient();
   const resolvedUserId = currentUserId ?? client.userId;
@@ -759,8 +1777,12 @@ function ChatThread({
     readStatuses,
     isLoading,
     error,
+    hasMore,
     sendMessage,
+    loadMore,
     markRead,
+    editMessage,
+    deleteMessage,
     addReaction,
     removeReaction,
     reportMessage,
@@ -865,10 +1887,19 @@ function ChatThread({
           {
             messages,
             currentUserId: resolvedUserId,
-            unreadSince: ownReadStatus,
+            conversationId,
+            profiles,
+            hasMore,
+            isLoading,
+            onLoadMore: loadMore,
             onAddReaction: (messageId, emoji) => void addReaction(messageId, emoji),
             onRemoveReaction: (messageId, emoji) => void removeReaction(messageId, emoji),
+            onEdit: (messageId, content) => void editMessage(messageId, content),
+            onDelete: (messageId) => void deleteMessage(messageId),
             onReport: (messageId) => void reportMessage(messageId, "other"),
+            onFetchAttachmentUrl,
+            unreadSince: ownReadStatus,
+            onReachBottom: () => void markRead(),
             emptyState: isLoading ? "Loading messages..." : "Start the conversation"
           }
         ),
@@ -890,7 +1921,7 @@ function ChatThread({
             onSend: async (content, attachments) => {
               await sendMessage(content, {
                 attachments,
-                message_type: inferMessageType(content, attachments)
+                message_type: inferMessageType(content, attachments ?? [])
               });
             },
             onTypingChange: (isTyping) => {
@@ -1067,6 +2098,346 @@ function ConversationList({
     }
   );
 }
+var REPORT_REASONS = [
+  { value: "spam", label: "Spam" },
+  { value: "harassment", label: "Harassment" },
+  { value: "hate", label: "Hate speech" },
+  { value: "violence", label: "Violence" },
+  { value: "other", label: "Other" }
+];
+function ReportDialog({
+  messageId,
+  onSubmit,
+  onClose
+}) {
+  const [reason, setReason] = React4.useState("spam");
+  const [description, setDescription] = React4.useState("");
+  const [submitting, setSubmitting] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [submitted, setSubmitted] = React4.useState(false);
+  async function handleSubmit() {
+    setSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit({
+        messageId,
+        reason,
+        description: description.trim() || void 0
+      });
+      setSubmitted(true);
+      setTimeout(onClose, 1500);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to submit report");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(4px)"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            background: "var(--sm-surface, #fff)",
+            borderRadius: 16,
+            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+            width: "100%",
+            maxWidth: 448,
+            margin: "0 16px",
+            overflow: "hidden",
+            color: "var(--sm-text-color, #111827)",
+            fontFamily: "var(--sm-font-family, system-ui, -apple-system, sans-serif)"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  padding: "16px 24px",
+                  borderBottom: "1px solid var(--sm-border-color, #e5e7eb)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: 16,
+                        fontWeight: 600,
+                        color: "var(--sm-text-color, #111827)"
+                      },
+                      children: "Report Message"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      type: "button",
+                      "aria-label": "Close",
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        padding: 4,
+                        cursor: "pointer",
+                        color: "var(--sm-muted-text, #6b7280)",
+                        borderRadius: 8,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "18",
+                          height: "18",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px 24px" }, children: submitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: 40,
+                    height: 40,
+                    borderRadius: 999,
+                    background: "#dcfce7",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    margin: "0 auto 12px"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "#16a34a",
+                      strokeWidth: "2",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: "var(--sm-text-color, #111827)"
+                  },
+                  children: "Report submitted"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  style: {
+                    margin: "4px 0 0",
+                    fontSize: 12,
+                    color: "var(--sm-muted-text, #6b7280)"
+                  },
+                  children: "We will review this message shortly."
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: 16 },
+                children: [
+                  error && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "8px 12px",
+                        background: "#fef2f2",
+                        color: "#dc2626",
+                        fontSize: 14,
+                        borderRadius: 8
+                      },
+                      children: error
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          fontSize: 14,
+                          fontWeight: 500,
+                          color: "var(--sm-text-color, #111827)",
+                          marginBottom: 6
+                        },
+                        children: "Reason"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "select",
+                      {
+                        value: reason,
+                        onChange: (e) => setReason(e.target.value),
+                        style: {
+                          width: "100%",
+                          border: "1px solid var(--sm-border-color, #e5e7eb)",
+                          borderRadius: 8,
+                          padding: "8px 12px",
+                          fontSize: 14,
+                          background: "var(--sm-surface, #fff)",
+                          color: "var(--sm-text-color, #111827)",
+                          fontFamily: "inherit",
+                          outline: "none"
+                        },
+                        children: REPORT_REASONS.map((r) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: r.value, children: r.label }, r.value))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          fontSize: 14,
+                          fontWeight: 500,
+                          color: "var(--sm-text-color, #111827)",
+                          marginBottom: 6
+                        },
+                        children: [
+                          "Description",
+                          " ",
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontWeight: 400,
+                                color: "var(--sm-muted-text, #6b7280)"
+                              },
+                              children: "(optional)"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        value: description,
+                        onChange: (e) => setDescription(e.target.value),
+                        placeholder: "Provide additional details...",
+                        rows: 3,
+                        maxLength: 1e3,
+                        style: {
+                          width: "100%",
+                          border: "1px solid var(--sm-border-color, #e5e7eb)",
+                          borderRadius: 8,
+                          padding: "8px 12px",
+                          fontSize: 14,
+                          fontFamily: "inherit",
+                          color: "var(--sm-text-color, #111827)",
+                          resize: "none",
+                          outline: "none",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) }),
+            !submitted && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  padding: "16px 24px",
+                  borderTop: "1px solid var(--sm-border-color, #e5e7eb)",
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      type: "button",
+                      style: {
+                        padding: "8px 16px",
+                        fontSize: 14,
+                        fontWeight: 500,
+                        color: "var(--sm-text-color, #111827)",
+                        background: "transparent",
+                        border: "none",
+                        borderRadius: 8,
+                        cursor: "pointer"
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => void handleSubmit(),
+                      disabled: submitting,
+                      type: "button",
+                      style: {
+                        padding: "8px 16px",
+                        fontSize: 14,
+                        fontWeight: 500,
+                        background: "var(--sm-primary, #2563eb)",
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: 8,
+                        cursor: submitting ? "wait" : "pointer",
+                        opacity: submitting ? 0.5 : 1
+                      },
+                      children: submitting ? "Submitting..." : "Submit Report"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var ChatContext = React4.createContext(null);
 function useChatContext() {
   const ctx = React4.useContext(ChatContext);
@@ -1513,6 +2884,9 @@ exports.ChatProvider = ChatProvider;
 exports.ChatThread = ChatThread;
 exports.ConversationList = ConversationList;
 exports.EmojiPicker = EmojiPicker;
+exports.EmojiPickerTrigger = EmojiPickerTrigger;
+exports.ReactionBar = ReactionBar;
+exports.ReportDialog = ReportDialog;
 exports.useChat = useChat;
 exports.useChatClient = useChatClient;
 exports.useChatConfig = useChatConfig;