@iclips/ui 3.1.0 → 4.0.0

package/dist/components/ui/data/comment-thread.js

@@ -0,0 +1,617 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { format as V } from "date-fns";
+import { ptBR as X } from "date-fns/locale";
+import { cn as o } from "../utils.js";
+import { Avatar as U, AvatarImage as B, AvatarFallback as D } from "../primitives/avatar.js";
+import { Button as l } from "../primitives/button.js";
+import { Badge as O } from "../primitives/badge.js";
+import { Tooltip as L, TooltipTrigger as R, TooltipContent as T } from "../overlays/tooltip.js";
+import { Separator as P } from "../primitives/separator.js";
+import { MoreHorizontal as J, Smile as q, Trash2 as Q, AlertCircle as _, Paperclip as j, Plus as Y, GripVertical as Z, X as ee, Type as te, Send as re, Bold as ie, Italic as ae, Underline as se, List as ne, ListOrdered as oe, ListChecks as le, Highlighter as ce, Table as de, ChevronsDownUp as me, Link as he } from "lucide-react";
+import { ReactRenderer as ue, useEditor as ge, EditorContent as fe } from "@tiptap/react";
+import pe from "@tiptap/starter-kit";
+import be from "@tiptap/extension-underline";
+import ve from "@tiptap/extension-link";
+import xe from "@tiptap/extension-image";
+import Ne from "@tiptap/extension-mention";
+import we from "@tiptap/extension-task-list";
+import ye from "@tiptap/extension-task-item";
+import Ce from "@tiptap/extension-file-handler";
+import ke from "@tiptap/extension-highlight";
+import Ae from "@tiptap/extension-typography";
+import { Placeholder as Le, CharacterCount as Re } from "@tiptap/extensions";
+import { TableKit as Te } from "@tiptap/extension-table";
+import { Details as je, DetailsSummary as ze, DetailsContent as Se } from "@tiptap/extension-details";
+import { DragHandle as Ee } from "@tiptap/extension-drag-handle-react";
+import Ie from "tippy.js";
+import { MentionList as Me } from "./mention-list.js";
+import z from "emoji-picker-react";
+import { Popover as S, PopoverTrigger as E, PopoverContent as I } from "../overlays/popover.js";
+const He = ({ role: t }) => {
+  const h = {
+    internal: { label: "Equipe iClips", className: "bg-primary/10 text-primary border-primary/20" },
+    client: { label: "Cliente", className: "bg-info/10 text-info-emphasis border-info/20" },
+    freelancer: { label: "Freelancer", className: "bg-warning/10 text-warning-emphasis border-warning/20" }
+  }, { label: m, className: n } = h[t];
+  return /* @__PURE__ */ e(O, { variant: "outline", className: o("text-[10px] h-5 px-1.5 font-medium border-0", n), children: m });
+}, Pe = ({
+  editor: t,
+  visible: h,
+  features: m = {}
+}) => !t || !h ? null : /* @__PURE__ */ i("div", { className: "flex items-center gap-1 border-b p-1 bg-muted/20 animate-in slide-in-from-bottom-2 duration-200", children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("bold") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleBold().run(),
+      title: "Negrito (Ctrl+B)",
+      "aria-label": "Negrito",
+      children: /* @__PURE__ */ e(ie, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("italic") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleItalic().run(),
+      title: "Itálico (Ctrl+I)",
+      "aria-label": "Itálico",
+      children: /* @__PURE__ */ e(ae, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("underline") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleUnderline().run(),
+      title: "Sublinhado (Ctrl+U)",
+      "aria-label": "Sublinhado",
+      children: /* @__PURE__ */ e(se, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(P, { orientation: "vertical", className: "h-4 mx-1" }),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("bulletList") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleBulletList().run(),
+      "aria-label": "Lista com marcadores",
+      children: /* @__PURE__ */ e(ne, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("orderedList") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleOrderedList().run(),
+      "aria-label": "Lista numerada",
+      children: /* @__PURE__ */ e(oe, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("taskList") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleTaskList().run(),
+      title: "Lista de tarefas",
+      "aria-label": "Lista de tarefas",
+      children: /* @__PURE__ */ e(le, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(P, { orientation: "vertical", className: "h-4 mx-1" }),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("highlight") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().toggleHighlight().run(),
+      title: "Marca-texto",
+      "aria-label": "Marca-texto",
+      children: /* @__PURE__ */ e(ce, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  m.table && /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("table") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: !0 }).run(),
+      title: "Inserir tabela 3x3",
+      "aria-label": "Inserir tabela",
+      children: /* @__PURE__ */ e(de, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  m.details && /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("details") && "bg-muted text-primary"),
+      onClick: () => t.chain().focus().setDetails().run(),
+      title: "Bloco recolhivel",
+      "aria-label": "Bloco recolhivel",
+      children: /* @__PURE__ */ e(me, { className: "h-3.5 w-3.5" })
+    }
+  ),
+  /* @__PURE__ */ e(
+    l,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: o("h-7 w-7", t.isActive("link") && "bg-muted text-primary"),
+      "aria-label": "Inserir link",
+      onClick: () => {
+        const n = t.getAttributes("link").href, u = window.prompt("URL", n);
+        if (u !== null) {
+          if (u === "") {
+            t.chain().focus().extendMarkRange("link").unsetLink().run();
+            return;
+          }
+          t.chain().focus().extendMarkRange("link").setLink({ href: u }).run();
+        }
+      },
+      children: /* @__PURE__ */ e(he, { className: "h-3.5 w-3.5" })
+    }
+  )
+] }), Ue = ({
+  currentUser: t,
+  onSubmit: h,
+  users: m = [],
+  maxLength: n,
+  placeholder: u = "Escreva um comentario... use @ para mencionar",
+  onImageUpload: b,
+  features: s = {},
+  extensions: w
+}) => {
+  const [x, y] = v.useState(!1), [N, k] = v.useState(!1), [f, g] = v.useState([]), [K, M] = v.useState(!0), H = v.useRef(null), A = v.useCallback(
+    async (r, a, c) => {
+      for (const p of a) {
+        const C = b ? await b(p) : URL.createObjectURL(p);
+        r.chain().insertContentAt(c ?? r.state.selection.anchor, { type: "image", attrs: { src: C } }).focus().run();
+      }
+    },
+    [b]
+  ), $ = v.useMemo(() => [
+    pe.configure({
+      link: !1,
+      underline: !1
+    }),
+    be,
+    ve.configure({
+      openOnClick: !1
+    }),
+    xe,
+    Ne.configure({
+      HTMLAttributes: {
+        class: "bg-secondary text-secondary-foreground rounded-sm px-1 py-0.5 font-medium decoration-clone"
+      },
+      suggestion: {
+        items: ({ query: r }) => m.filter((a) => a.name.toLowerCase().startsWith(r.toLowerCase())).slice(0, 5),
+        render: () => {
+          let r = null, a = null;
+          return {
+            onStart: (c) => {
+              r = new ue(Me, {
+                props: c,
+                editor: c.editor
+              }), c.clientRect && (a = Ie("body", {
+                // tiptap tipa como `() => DOMRect | null`; tippy exige não-nulo.
+                getReferenceClientRect: c.clientRect,
+                appendTo: () => document.body,
+                content: r.element,
+                showOnCreate: !0,
+                interactive: !0,
+                trigger: "manual",
+                placement: "bottom-start"
+              }));
+            },
+            onUpdate(c) {
+              r == null || r.updateProps(c), c.clientRect && (a == null || a[0].setProps({
+                getReferenceClientRect: c.clientRect
+              }));
+            },
+            onKeyDown(c) {
+              var p, C;
+              return c.event.key === "Escape" ? (a == null || a[0].hide(), !0) : !!((C = (p = r == null ? void 0 : r.ref) == null ? void 0 : p.onKeyDown) != null && C.call(p, c));
+            },
+            onExit() {
+              a == null || a[0].destroy(), r == null || r.destroy();
+            }
+          };
+        }
+      }
+    }),
+    we,
+    ye.configure({
+      nested: !0,
+      // Sem isso o checkbox nasce sem nome acessivel: o <label> que o tiptap
+      // gera envolve o input mas nao tem texto. Violacao critica no axe.
+      a11y: {
+        checkboxLabel: (r, a) => `${a ? "Concluido" : "Pendente"}: ${r.textContent || "tarefa vazia"}`
+      }
+    }),
+    ke,
+    Ae,
+    Le.configure({ placeholder: u }),
+    ...n ? [Re.configure({ limit: n })] : [],
+    Ce.configure({
+      allowedMimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
+      onDrop: (r, a, c) => {
+        A(r, a, c);
+      },
+      onPaste: (r, a) => {
+        A(r, a);
+      }
+    }),
+    ...s.table ? [Te.configure({ table: { resizable: !0 } })] : [],
+    ...s.details ? [je, ze, Se] : [],
+    ...w ?? []
+  ], [m, n, u, A, s.table, s.details, w]), d = ge({
+    extensions: $,
+    content: "",
+    onUpdate: ({ editor: r }) => {
+      M(r.isEmpty);
+    },
+    editorProps: {
+      attributes: {
+        class: "prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[80px] px-3 py-2 text-sm"
+      }
+    }
+  }), F = (r) => {
+    if (r.target.files && r.target.files[0]) {
+      const a = r.target.files[0], c = URL.createObjectURL(a), p = {
+        id: Math.random().toString(36).substr(2, 9),
+        name: a.name,
+        url: c,
+        type: a.type.startsWith("image/") ? "image" : "file"
+      };
+      g([...f, p]), r.target.value = "";
+    }
+  }, W = (r) => {
+    g(f.filter((a) => a.id !== r));
+  }, G = () => {
+    !d || d.isEmpty && f.length === 0 || (h({
+      content: d.getHTML(),
+      isRevisionRequest: x,
+      attachments: f
+    }), d.commands.clearContent(), g([]), y(!1), M(!0));
+  };
+  return /* @__PURE__ */ i("div", { className: "flex gap-3 items-start", children: [
+    /* @__PURE__ */ i(U, { className: "h-8 w-8 mt-1 border", children: [
+      /* @__PURE__ */ e(B, { src: t.avatar }),
+      /* @__PURE__ */ e(D, { children: t.name.substring(0, 2).toUpperCase() })
+    ] }),
+    /* @__PURE__ */ i("div", { className: o(
+      "flex-1 rounded-xl border bg-background shadow-sm overflow-hidden transition-colors",
+      x && "border-destructive/40 ring-1 ring-destructive/20"
+    ), children: [
+      /* @__PURE__ */ e(Pe, { editor: d, visible: N, features: s }),
+      s.dragHandle && /* @__PURE__ */ e(Ee, { editor: d, children: /* @__PURE__ */ e(Z, { className: "text-muted-foreground h-4 w-4 cursor-grab" }) }),
+      /* @__PURE__ */ e(fe, { editor: d }),
+      f.length > 0 && /* @__PURE__ */ e("div", { className: "px-3 pb-2 flex flex-wrap gap-2", children: f.map((r) => /* @__PURE__ */ i("div", { className: "relative group", children: [
+        r.type === "image" ? /* @__PURE__ */ e("div", { className: "h-16 w-16 rounded-md border overflow-hidden relative", children: /* @__PURE__ */ e("img", { src: r.url, alt: r.name, className: "h-full w-full object-cover" }) }) : /* @__PURE__ */ e("div", { className: "h-16 w-16 rounded-md border bg-muted flex items-center justify-center", children: /* @__PURE__ */ e(j, { className: "h-6 w-6 text-muted-foreground" }) }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => W(r.id),
+            className: "absolute -top-1.5 -right-1.5 border bg-background text-destructive-emphasis hover:bg-destructive/10 rounded-full p-0.5 opacity-100 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100 transition-opacity shadow-sm",
+            children: /* @__PURE__ */ e(ee, { className: "h-3 w-3" })
+          }
+        )
+      ] }, r.id)) }),
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-2 bg-muted/10 border-t", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ i(L, { children: [
+            /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
+              l,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: o(
+                  "h-8 w-8 transition-colors",
+                  N ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+                ),
+                onClick: () => k(!N),
+                "aria-label": "Opções de formatação",
+                children: /* @__PURE__ */ e(te, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ e(T, { children: "Opções de formatação" })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-border mx-1" }),
+          /* @__PURE__ */ i(S, { children: [
+            /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
+              l,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8 text-muted-foreground hover:text-foreground",
+                "aria-label": "Inserir emoji",
+                children: /* @__PURE__ */ e(q, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ e(I, { className: "w-auto p-0 border-none", align: "start", side: "top", children: /* @__PURE__ */ e(
+              z,
+              {
+                onEmojiClick: (r) => d == null ? void 0 : d.chain().focus().insertContent(r.emoji).run(),
+                width: 300,
+                height: 350
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "file",
+              className: "hidden",
+              ref: H,
+              onChange: F,
+              accept: "image/*,.pdf,.doc,.docx"
+            }
+          ),
+          /* @__PURE__ */ i(L, { children: [
+            /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
+              l,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8 text-muted-foreground hover:text-foreground",
+                onClick: () => {
+                  var r;
+                  return (r = H.current) == null ? void 0 : r.click();
+                },
+                "aria-label": "Anexar arquivo",
+                children: /* @__PURE__ */ e(j, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ e(T, { children: "Anexar arquivo" })
+          ] }),
+          /* @__PURE__ */ i(L, { children: [
+            /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ i(
+              l,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: o(
+                  "h-8 gap-2 px-2 transition-colors",
+                  x ? "bg-destructive/10 text-destructive-emphasis hover:bg-destructive/20" : "text-muted-foreground hover:text-foreground"
+                ),
+                onClick: () => y(!x),
+                children: [
+                  /* @__PURE__ */ e(_, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ e("span", { className: "text-xs font-medium", children: "Solicitar Refação" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ e(T, { children: "Marca este comentário como um pedido de alteração" })
+          ] })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+          n && d && /* @__PURE__ */ i(
+            "span",
+            {
+              className: o(
+                "text-xs tabular-nums",
+                d.storage.characterCount.characters() >= n ? "text-destructive" : "text-muted-foreground"
+              ),
+              "aria-live": "polite",
+              children: [
+                d.storage.characterCount.characters(),
+                "/",
+                n
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            l,
+            {
+              size: "sm",
+              onClick: G,
+              disabled: K && f.length === 0,
+              children: [
+                "Enviar ",
+                /* @__PURE__ */ e(re, { className: "h-3.5 w-3.5 ml-2" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}, Be = ({
+  comment: t,
+  currentUserId: h,
+  onDelete: m,
+  onReact: n
+}) => {
+  var b;
+  const u = t.isRevisionRequest;
+  return /* @__PURE__ */ i("div", { className: o(
+    "group flex gap-3 p-4 rounded-lg transition-colors",
+    u ? "bg-destructive/5 border border-destructive/20" : "hover:bg-muted/20"
+  ), children: [
+    /* @__PURE__ */ i(U, { className: "h-8 w-8 mt-0.5 border", children: [
+      /* @__PURE__ */ e(B, { src: t.user.avatar }),
+      /* @__PURE__ */ e(D, { children: t.user.name.substring(0, 2).toUpperCase() })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-1.5", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 flex-wrap", children: [
+          /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-foreground", children: t.user.name }),
+          /* @__PURE__ */ e(He, { role: t.user.role }),
+          /* @__PURE__ */ e("span", { className: "text-xs text-foreground/65", children: V(t.createdAt, "dd MMM 'às' HH:mm", { locale: X }) })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 opacity-100 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100 transition-opacity has-[[data-state=open]]:opacity-100", children: [
+          /* @__PURE__ */ i(S, { children: [
+            /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
+              l,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-6 w-6 relative before:absolute before:-inset-1 before:content-[''] text-muted-foreground hover:text-foreground",
+                "aria-label": "Reagir com emoji",
+                children: /* @__PURE__ */ e(q, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ e(I, { className: "w-auto p-0 border-none", align: "end", children: /* @__PURE__ */ e(
+              z,
+              {
+                onEmojiClick: (s) => n == null ? void 0 : n(t.id, s.emoji),
+                width: 300,
+                height: 350
+              }
+            ) })
+          ] }),
+          m && /* @__PURE__ */ e(
+            l,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6 relative before:absolute before:-inset-1 before:content-[''] text-muted-foreground hover:text-destructive-emphasis",
+              onClick: () => m(t.id),
+              "aria-label": "Excluir comentário",
+              children: /* @__PURE__ */ e(Q, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ] }),
+      u && /* @__PURE__ */ i("div", { className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-destructive/10 text-destructive-emphasis text-xs font-medium mb-2", children: [
+        /* @__PURE__ */ e(_, { className: "h-3.5 w-3.5" }),
+        "Solicitação de Refação"
+      ] }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "prose prose-sm dark:prose-invert max-w-none text-sm text-foreground/90 leading-relaxed break-words [&_p]:mb-2 [&_p:last-child]:mb-0",
+          dangerouslySetInnerHTML: { __html: t.content }
+        }
+      ),
+      t.attachments && t.attachments.length > 0 && /* @__PURE__ */ e("div", { className: "mt-3 flex flex-wrap gap-2", children: t.attachments.map((s) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: "group/att relative rounded-lg border overflow-hidden bg-background hover:shadow-sm transition-all cursor-pointer",
+          onClick: () => window.open(s.url, "_blank"),
+          children: s.type === "image" ? /* @__PURE__ */ i("div", { className: "h-32 aspect-[4/3]", children: [
+            /* @__PURE__ */ e("img", { src: s.url, alt: s.name, className: "h-full w-full object-cover" }),
+            /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-foreground/0 group-hover/att:bg-foreground/10 transition-colors" })
+          ] }) : /* @__PURE__ */ i("div", { className: "h-12 px-3 flex items-center gap-2 bg-muted/30", children: [
+            /* @__PURE__ */ e(j, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate max-w-[150px]", children: s.name })
+          ] })
+        },
+        s.id
+      )) }),
+      /* @__PURE__ */ i("div", { className: "mt-3 flex flex-wrap gap-2 items-center", children: [
+        (b = t.reactions) == null ? void 0 : b.map((s) => /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: () => n == null ? void 0 : n(t.id, s.emoji),
+            className: o(
+              "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors",
+              s.users.includes(h) ? "bg-secondary border-secondary text-secondary-foreground" : "bg-muted/30 border-transparent hover:bg-muted/50 text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ e("span", { children: s.emoji }),
+              /* @__PURE__ */ e("span", { children: s.users.length })
+            ]
+          },
+          s.emoji
+        )),
+        n && /* @__PURE__ */ i(S, { children: [
+          /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
+            l,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/50",
+              "aria-label": "Adicionar reação",
+              children: /* @__PURE__ */ e(Y, { className: "h-3.5 w-3.5" })
+            }
+          ) }),
+          /* @__PURE__ */ e(I, { className: "w-auto p-0 border-none", align: "start", children: /* @__PURE__ */ e(
+            z,
+            {
+              onEmojiClick: (s) => n(t.id, s.emoji),
+              width: 300,
+              height: 350
+            }
+          ) })
+        ] })
+      ] })
+    ] })
+  ] });
+}, gt = ({
+  comments: t,
+  currentUser: h,
+  users: m = [],
+  onAddComment: n,
+  onDeleteComment: u,
+  onReact: b,
+  maxLength: s,
+  placeholder: w,
+  onImageUpload: x,
+  features: y,
+  extensions: N,
+  className: k
+}) => {
+  const f = (g) => {
+    n({
+      content: g.content,
+      user: h,
+      isRevisionRequest: g.isRevisionRequest,
+      attachments: g.attachments
+    });
+  };
+  return /* @__PURE__ */ i("div", { className: o("flex flex-col h-full", k), children: [
+    /* @__PURE__ */ i("div", { className: "px-4 py-3 border-b flex items-center justify-between bg-card", children: [
+      /* @__PURE__ */ e("h3", { className: "font-semibold text-base", children: "Comentários da Atividade" }),
+      /* @__PURE__ */ e(O, { variant: "secondary", className: "bg-muted text-muted-foreground hover:bg-muted", children: t.length })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4 space-y-2 bg-muted/5", children: t.length === 0 ? /* @__PURE__ */ i("div", { className: "h-full flex flex-col items-center justify-center text-muted-foreground min-h-[200px]", children: [
+      /* @__PURE__ */ e("div", { className: "bg-muted rounded-full p-3 mb-3", children: /* @__PURE__ */ e(J, { className: "h-6 w-6", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm font-medium text-foreground/70", children: "Nenhum comentário ainda" }),
+      /* @__PURE__ */ e("p", { className: "text-xs", children: "Inicie a conversa sobre esta tarefa" })
+    ] }) : t.map((g) => /* @__PURE__ */ e(
+      Be,
+      {
+        comment: g,
+        currentUserId: h.id,
+        onDelete: u,
+        onReact: b
+      },
+      g.id
+    )) }),
+    /* @__PURE__ */ e("div", { className: "p-4 border-t bg-card", children: /* @__PURE__ */ e(
+      Ue,
+      {
+        currentUser: h,
+        onSubmit: f,
+        users: m,
+        maxLength: s,
+        placeholder: w,
+        onImageUpload: x,
+        features: y,
+        extensions: N
+      }
+    ) })
+  ] });
+};
+export {
+  gt as CommentThread
+};
+//# sourceMappingURL=comment-thread.js.map