@iclips/ui 2.0.2 → 3.0.0

package/dist/components/ui/data/comment-system.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"comment-system.cjs","sources":["../../../../src/components/ui/data/comment-system.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { format } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\nimport { cn } from \"../utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../primitives/avatar\";\nimport { Button } from \"../primitives/button\";\nimport { Badge } from \"../primitives/badge\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../overlays/tooltip\";\nimport { Separator } from \"../primitives/separator\";\nimport { \n  Bold, \n  Italic, \n  Underline as UnderlineIcon, \n  List, \n  ListOrdered, \n  Link as LinkIcon,\n  Send,\n  Paperclip,\n  AlertCircle,\n  MoreHorizontal,\n  Trash2,\n  Type,\n  X,\n  Smile,\n  Plus\n} from \"lucide-react\";\n\n// Tiptap Imports\nimport { useEditor, EditorContent, Editor, ReactRenderer } from '@tiptap/react';\nimport type { Instance as TippyInstance } from 'tippy.js';\nimport StarterKit from '@tiptap/starter-kit';\nimport Underline from '@tiptap/extension-underline';\nimport Link from '@tiptap/extension-link';\nimport TiptapImage from '@tiptap/extension-image';\nimport Mention from '@tiptap/extension-mention';\nimport tippy from 'tippy.js';\nimport { MentionList } from './mention-list';\nimport Picker from 'emoji-picker-react';\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlays/popover\";\n\n// ==========================================\n// TIPOS\n// ==========================================\n\nexport type UserRole = 'internal' | 'client' | 'freelancer';\n\nexport interface CommentUser {\n  id: string;\n  name: string;\n  avatar?: string;\n  role: UserRole;\n}\n\nexport interface CommentReaction {\n  emoji: string;\n  users: string[]; // Array de IDs de usuários que reagiram\n}\n\nexport interface CommentAttachment {\n  id: string;\n  url: string;\n  name: string;\n  type: 'image' | 'file';\n}\n\nexport interface Comment {\n  id: string;\n  content: string; // Conteúdo HTML\n  user: CommentUser;\n  createdAt: Date;\n  isRevisionRequest?: boolean;\n  attachments?: CommentAttachment[];\n  reactions?: CommentReaction[];\n}\n\nexport interface CommentSystemProps {\n  comments: Comment[];\n  currentUser: CommentUser;\n  users?: CommentUser[]; // Lista de usuários mencionáveis\n  onAddComment: (comment: Omit<Comment, \"id\" | \"createdAt\">) => void;\n  onDeleteComment?: (id: string) => void;\n  onReact?: (commentId: string, emoji: string) => void;\n  className?: string;\n}\n\n// ==========================================\n// COMPONENTES AUXILIARES\n// ==========================================\n\nconst RoleBadge = ({ role }: { role: UserRole }) => {\n  const config = {\n    internal: { label: \"Equipe iClips\", className: \"bg-primary/10 text-primary hover:bg-primary/20 border-primary/20\" },\n    client: { label: \"Cliente\", className: \"bg-info/10 text-info-emphasis hover:bg-info/20 border-info/20\" },\n    freelancer: { label: \"Freelancer\", className: \"bg-warning/10 text-warning-emphasis hover:bg-warning/20 border-warning/20\" },\n  };\n\n  const { label, className } = config[role];\n\n  return (\n    <Badge variant=\"outline\" className={cn(\"text-[10px] h-5 px-1.5 font-medium border-0\", className)}>\n      {label}\n    </Badge>\n  );\n};\n\n// ==========================================\n// EDITOR TOOLBAR\n// ==========================================\n\nconst EditorToolbar = ({ editor, visible }: { editor: Editor | null, visible: boolean }) => {\n  if (!editor) return null;\n\n  if (!visible) return null;\n\n  return (\n    <div className=\"flex items-center gap-1 border-b p-1 bg-muted/20 animate-in slide-in-from-bottom-2 duration-200\">\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('bold') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleBold().run()}\n        title=\"Negrito (Ctrl+B)\"\n        aria-label=\"Negrito\"\n      >\n        <Bold className=\"h-3.5 w-3.5\" />\n      </Button>\n      \n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('italic') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleItalic().run()}\n        title=\"Itálico (Ctrl+I)\"\n        aria-label=\"Itálico\"\n      >\n        <Italic className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('underline') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleUnderline().run()}\n        title=\"Sublinhado (Ctrl+U)\"\n        aria-label=\"Sublinhado\"\n      >\n        <UnderlineIcon className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"h-4 mx-1\" />\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('bulletList') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n        aria-label=\"Lista com marcadores\"\n      >\n        <List className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('orderedList') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        aria-label=\"Lista numerada\"\n      >\n        <ListOrdered className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"h-4 mx-1\" />\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('link') && \"bg-muted text-primary\")}\n        aria-label=\"Inserir link\"\n        onClick={() => {\n          const previousUrl = editor.getAttributes('link').href;\n          const url = window.prompt('URL', previousUrl);\n          if (url === null) return;\n          if (url === '') {\n            editor.chain().focus().extendMarkRange('link').unsetLink().run();\n            return;\n          }\n          editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();\n        }}\n      >\n        <LinkIcon className=\"h-3.5 w-3.5\" />\n      </Button>\n    </div>\n  );\n};\n\n// ==========================================\n// COMMENT EDITOR AREA\n// ==========================================\n\nconst CommentEditor = ({ \n  currentUser, \n  onSubmit,\n  users = []\n}: { \n  currentUser: CommentUser;\n  onSubmit: (data: { content: string; isRevisionRequest: boolean; attachments: CommentAttachment[] }) => void;\n  users?: CommentUser[];\n}) => {\n  const [isRevision, setIsRevision] = React.useState(false);\n  const [showToolbar, setShowToolbar] = React.useState(false);\n  const [attachments, setAttachments] = React.useState<CommentAttachment[]>([]);\n  const [isEditorEmpty, setIsEditorEmpty] = React.useState(true);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n  const extensions = React.useMemo(() => [\n    StarterKit.configure({\n      // @ts-ignore\n      link: false,\n      // @ts-ignore\n      underline: false,\n    }),\n    Underline,\n    Link.configure({\n      openOnClick: false,\n    }),\n    TiptapImage,\n    Mention.configure({\n      HTMLAttributes: {\n        class: 'bg-accent text-accent-foreground rounded-sm px-1 py-0.5 font-medium decoration-clone',\n      },\n      suggestion: {\n        items: ({ query }: { query: string }) => {\n          return users\n            .filter(item => item.name.toLowerCase().startsWith(query.toLowerCase()))\n            .slice(0, 5);\n        },\n        render: () => {\n          // Formato mínimo dos props do ciclo de vida do suggestion do tiptap\n          // (o tipo completo `SuggestionProps` vive em `@tiptap/suggestion`, dep\n          // transitiva sem entrada direta no package.json).\n          type MentionRenderProps = {\n            editor: Editor;\n            clientRect?: (() => DOMRect | null) | null;\n            event?: KeyboardEvent;\n          };\n          let component: ReactRenderer | null = null;\n          let popup: TippyInstance[] | null = null;\n\n          return {\n            onStart: (props: MentionRenderProps) => {\n              component = new ReactRenderer(MentionList, {\n                props,\n                editor: props.editor,\n              });\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              popup = tippy('body', {\n                // tiptap tipa como `() => DOMRect | null`; tippy exige não-nulo.\n                getReferenceClientRect: props.clientRect as () => DOMRect,\n                appendTo: () => document.body,\n                content: component.element,\n                showOnCreate: true,\n                interactive: true,\n                trigger: 'manual',\n                placement: 'bottom-start',\n              });\n            },\n            onUpdate(props: MentionRenderProps) {\n              component?.updateProps(props);\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              popup?.[0].setProps({\n                getReferenceClientRect: props.clientRect as () => DOMRect,\n              });\n            },\n            onKeyDown(props: { event: KeyboardEvent }) {\n              if (props.event.key === 'Escape') {\n                popup?.[0].hide();\n\n                return true;\n              }\n\n              return Boolean(\n                (component?.ref as { onKeyDown?: (p: { event: KeyboardEvent }) => boolean } | undefined)?.onKeyDown?.(props),\n              );\n            },\n            onExit() {\n              popup?.[0].destroy();\n              component?.destroy();\n            },\n          };\n        },\n      },\n    }),\n  ], [users]);\n\n  const editor = useEditor({\n    extensions,\n    content: '',\n    onUpdate: ({ editor }) => {\n      setIsEditorEmpty(editor.isEmpty);\n    },\n    editorProps: {\n      attributes: {\n        class: 'prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[80px] px-3 py-2 text-sm',\n      },\n    },\n  });\n\n  const handleAttach = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files && e.target.files[0]) {\n      const file = e.target.files[0];\n      const url = URL.createObjectURL(file);\n      \n      const newAttachment: CommentAttachment = {\n        id: Math.random().toString(36).substr(2, 9),\n        name: file.name,\n        url,\n        type: file.type.startsWith('image/') ? 'image' : 'file'\n      };\n      \n      setAttachments([...attachments, newAttachment]);\n      // Reset input\n      e.target.value = '';\n    }\n  };\n\n  const removeAttachment = (id: string) => {\n    setAttachments(attachments.filter(a => a.id !== id));\n  };\n\n  const handleSubmit = () => {\n    if (!editor || (editor.isEmpty && attachments.length === 0)) return;\n    \n    onSubmit({\n      content: editor.getHTML(),\n      isRevisionRequest: isRevision,\n      attachments\n    });\n\n    editor.commands.clearContent();\n    setAttachments([]);\n    setIsRevision(false);\n    // Manually reset empty state since clearContent triggers update but we want to be sure\n    setIsEditorEmpty(true);\n  };\n\n  return (\n    <div className=\"flex gap-3 items-start\">\n      <Avatar className=\"h-8 w-8 mt-1 border\">\n        <AvatarImage src={currentUser.avatar} />\n        <AvatarFallback>{currentUser.name.substring(0, 2).toUpperCase()}</AvatarFallback>\n      </Avatar>\n\n      <div className={cn(\n        \"flex-1 rounded-xl border bg-background shadow-sm overflow-hidden transition-colors\",\n        isRevision && \"border-destructive/40 ring-1 ring-destructive/20\"\n      )}>\n        <EditorToolbar editor={editor} visible={showToolbar} />\n        \n        <EditorContent editor={editor} />\n\n        {/* Attachments Preview Area */}\n        {attachments.length > 0 && (\n          <div className=\"px-3 pb-2 flex flex-wrap gap-2\">\n            {attachments.map(att => (\n              <div key={att.id} className=\"relative group\">\n                {att.type === 'image' ? (\n                  <div className=\"h-16 w-16 rounded-md border overflow-hidden relative\">\n                    <img src={att.url} alt={att.name} className=\"h-full w-full object-cover\" />\n                  </div>\n                ) : (\n                  <div className=\"h-16 w-16 rounded-md border bg-muted flex items-center justify-center\">\n                    <Paperclip className=\"h-6 w-6 text-muted-foreground\" />\n                  </div>\n                )}\n                <button \n                  onClick={() => removeAttachment(att.id)}\n                  className=\"absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm\"\n                >\n                  <X className=\"h-3 w-3\" />\n                </button>\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between p-2 bg-muted/10 border-t\">\n          <div className=\"flex items-center gap-2\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button \n                  variant=\"ghost\" \n                  size=\"icon\" \n                  className={cn(\n                    \"h-8 w-8 transition-colors\",\n                    showToolbar ? \"bg-muted text-foreground\" : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                  onClick={() => setShowToolbar(!showToolbar)}\n                  aria-label=\"Opções de formatação\"\n                >\n                  <Type className=\"h-4 w-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Opções de formatação</TooltipContent>\n            </Tooltip>\n\n            <div className=\"w-px h-4 bg-border mx-1\" />\n\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-8 w-8 text-muted-foreground hover:text-foreground\"\n                  aria-label=\"Inserir emoji\"\n                >\n                  <Smile className=\"h-4 w-4\" />\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-auto p-0 border-none\" align=\"start\" side=\"top\">\n                 <Picker \n                   onEmojiClick={(emojiData) => editor?.chain().focus().insertContent(emojiData.emoji).run()}\n                   width={300}\n                   height={350}\n                 />\n              </PopoverContent>\n            </Popover>\n\n            <input \n              type=\"file\" \n              className=\"hidden\" \n              ref={fileInputRef}\n              onChange={handleAttach}\n              accept=\"image/*,.pdf,.doc,.docx\"\n            />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button \n                  variant=\"ghost\" \n                  size=\"icon\" \n                  className=\"h-8 w-8 text-muted-foreground hover:text-foreground\"\n                  onClick={() => fileInputRef.current?.click()}\n                  aria-label=\"Anexar arquivo\"\n                >\n                  <Paperclip className=\"h-4 w-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Anexar arquivo</TooltipContent>\n            </Tooltip>\n\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button \n                  variant=\"ghost\" \n                  size=\"sm\" \n                  className={cn(\n                    \"h-8 gap-2 px-2 transition-colors\",\n                    isRevision\n                      ? \"bg-destructive/10 text-destructive-emphasis hover:bg-destructive/20\"\n                      : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                  onClick={() => setIsRevision(!isRevision)}\n                >\n                  <AlertCircle className=\"h-4 w-4\" />\n                  <span className=\"text-xs font-medium\">Solicitar Refação</span>\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Marca este comentário como um pedido de alteração</TooltipContent>\n            </Tooltip>\n          </div>\n\n          <Button\n            size=\"sm\"\n            onClick={handleSubmit}\n            disabled={isEditorEmpty && attachments.length === 0}\n          >\n            Enviar <Send className=\"h-3.5 w-3.5 ml-2\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// ==========================================\n// SINGLE COMMENT ITEM\n// ==========================================\n\nconst CommentItem = ({ \n  comment, \n  currentUserId,\n  onDelete, \n  onReact \n}: { \n  comment: Comment; \n  currentUserId: string;\n  onDelete?: (id: string) => void;\n  onReact?: (commentId: string, emoji: string) => void;\n}) => {\n  const isRevision = comment.isRevisionRequest;\n\n  return (\n    <div className={cn(\n      \"group flex gap-3 p-4 rounded-lg transition-colors\",\n      isRevision ? \"bg-destructive/5 border border-destructive/20\" : \"hover:bg-muted/20\"\n    )}>\n      <Avatar className=\"h-8 w-8 mt-0.5 border\">\n        <AvatarImage src={comment.user.avatar} />\n        <AvatarFallback>{comment.user.name.substring(0, 2).toUpperCase()}</AvatarFallback>\n      </Avatar>\n\n      <div className=\"flex-1 min-w-0\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between mb-1.5\">\n          <div className=\"flex items-center gap-2 flex-wrap\">\n            <span className=\"font-semibold text-sm text-foreground\">{comment.user.name}</span>\n            <RoleBadge role={comment.user.role} />\n            <span className=\"text-xs text-foreground/65\">\n              {format(comment.createdAt, \"dd MMM 'às' HH:mm\", { locale: ptBR })}\n            </span>\n          </div>\n          \n          <div className=\"flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity\">\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-6 w-6 text-muted-foreground hover:text-foreground\"\n                  aria-label=\"Reagir com emoji\"\n                >\n                  <Smile className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-auto p-0 border-none\" align=\"end\">\n                 <Picker \n                   onEmojiClick={(emojiData) => onReact?.(comment.id, emojiData.emoji)}\n                   width={300}\n                   height={350}\n                 />\n              </PopoverContent>\n            </Popover>\n\n            {onDelete && (\n              <Button \n                variant=\"ghost\" \n                size=\"icon\" \n                className=\"h-6 w-6 text-muted-foreground hover:text-destructive\"\n                onClick={() => onDelete(comment.id)}\n                aria-label=\"Excluir comentário\"\n              >\n                <Trash2 className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Revision Badge */}\n        {isRevision && (\n          <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\">\n            <AlertCircle className=\"h-3.5 w-3.5\" />\n            Solicitação de Refação\n          </div>\n        )}\n\n        {/* Content */}\n        <div \n          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\"\n          dangerouslySetInnerHTML={{ __html: comment.content }}\n        />\n\n        {/* Attachments Display */}\n        {comment.attachments && comment.attachments.length > 0 && (\n          <div className=\"mt-3 flex flex-wrap gap-2\">\n            {comment.attachments.map(att => (\n              <div \n                key={att.id} \n                className=\"group/att relative rounded-lg border overflow-hidden bg-background hover:shadow-sm transition-all cursor-pointer\"\n                onClick={() => window.open(att.url, '_blank')}\n              >\n                {att.type === 'image' ? (\n                  <div className=\"h-32 aspect-[4/3]\">\n                    <img src={att.url} alt={att.name} className=\"h-full w-full object-cover\" />\n                    <div className=\"absolute inset-0 bg-foreground/0 group-hover/att:bg-foreground/10 transition-colors\" />\n                  </div>\n                ) : (\n                  <div className=\"h-12 px-3 flex items-center gap-2 bg-muted/30\">\n                    <Paperclip className=\"h-4 w-4 text-muted-foreground\" />\n                    <span className=\"text-xs font-medium truncate max-w-[150px]\">{att.name}</span>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {/* Reactions */}\n        <div className=\"mt-3 flex flex-wrap gap-2 items-center\">\n          {comment.reactions?.map((reaction) => (\n            <button\n              key={reaction.emoji}\n              onClick={() => onReact?.(comment.id, reaction.emoji)}\n              className={cn(\n                \"inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors\",\n                reaction.users.includes(currentUserId)\n                  ? \"bg-accent border-accent text-accent-foreground\"\n                  : \"bg-muted/30 border-transparent hover:bg-muted/50 text-muted-foreground\"\n              )}\n            >\n              <span>{reaction.emoji}</span>\n              <span>{reaction.users.length}</span>\n            </button>\n          ))}\n          \n          {onReact && (\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-6 w-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                  aria-label=\"Adicionar reação\"\n                >\n                  <Plus className=\"h-3.5 w-3.5\" />\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-auto p-0 border-none\" align=\"start\">\n                 <Picker \n                   onEmojiClick={(emojiData) => onReact(comment.id, emojiData.emoji)}\n                   width={300}\n                   height={350}\n                 />\n              </PopoverContent>\n            </Popover>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// ==========================================\n// MAIN COMPONENT\n// ==========================================\n\nexport const CommentSystem = ({ \n  comments, \n  currentUser, \n  users = [],\n  onAddComment, \n  onDeleteComment,\n  onReact,\n  className \n}: CommentSystemProps) => {\n  \n  const handleSubmit = (data: { content: string; isRevisionRequest: boolean; attachments: CommentAttachment[] }) => {\n    onAddComment({\n      content: data.content,\n      user: currentUser,\n      isRevisionRequest: data.isRevisionRequest,\n      attachments: data.attachments\n    });\n  };\n\n  return (\n    <div className={cn(\"flex flex-col h-full\", className)}>\n      {/* Header */}\n      <div className=\"px-4 py-3 border-b flex items-center justify-between bg-card\">\n        <h3 className=\"font-semibold text-base\">Comentários da Atividade</h3>\n        <Badge variant=\"secondary\" className=\"bg-muted text-muted-foreground hover:bg-muted\">\n          {comments.length}\n        </Badge>\n      </div>\n\n      {/* Scrollable List */}\n      <div className=\"flex-1 overflow-y-auto p-4 space-y-2 bg-muted/5\">\n        {comments.length === 0 ? (\n          <div className=\"h-full flex flex-col items-center justify-center text-muted-foreground min-h-[200px]\">\n            <div className=\"bg-muted rounded-full p-3 mb-3\">\n              <MoreHorizontal className=\"h-6 w-6\" aria-hidden=\"true\" />\n            </div>\n            <p className=\"text-sm font-medium text-foreground/70\">Nenhum comentário ainda</p>\n            <p className=\"text-xs\">Inicie a conversa sobre esta tarefa</p>\n          </div>\n        ) : (\n          comments.map((comment) => (\n            <CommentItem \n              key={comment.id} \n              comment={comment} \n              currentUserId={currentUser.id}\n              onDelete={onDeleteComment} \n              onReact={onReact}\n            />\n          ))\n        )}\n      </div>\n\n      {/* Input Area */}\n      <div className=\"p-4 border-t bg-card\">\n        <CommentEditor \n          currentUser={currentUser} \n          onSubmit={handleSubmit}\n          users={users}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default CommentSystem;"],"names":["RoleBadge","role","config","label","className","jsx","Badge","cn","EditorToolbar","editor","visible","jsxs","Button","Bold","Italic","UnderlineIcon","Separator","List","ListOrdered","previousUrl","url","LinkIcon","CommentEditor","currentUser","onSubmit","users","isRevision","setIsRevision","React","showToolbar","setShowToolbar","attachments","setAttachments","isEditorEmpty","setIsEditorEmpty","fileInputRef","extensions","StarterKit","Underline","Link","TiptapImage","Mention","query","item","component","popup","props","ReactRenderer","MentionList","tippy","_b","_a","useEditor","handleAttach","e","file","newAttachment","removeAttachment","id","handleSubmit","Avatar","AvatarImage","AvatarFallback","EditorContent","att","Paperclip","X","Tooltip","TooltipTrigger","Type","TooltipContent","Popover","PopoverTrigger","Smile","PopoverContent","Picker","emojiData","AlertCircle","Send","CommentItem","comment","currentUserId","onDelete","onReact","format","ptBR","Trash2","reaction","Plus","CommentSystem","comments","onAddComment","onDeleteComment","data","MoreHorizontal"],"mappings":"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"}
+{"version":3,"file":"comment-system.cjs","sources":["../../../../src/components/ui/data/comment-system.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { format } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\nimport { cn } from \"../utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../primitives/avatar\";\nimport { Button } from \"../primitives/button\";\nimport { Badge } from \"../primitives/badge\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../overlays/tooltip\";\nimport { Separator } from \"../primitives/separator\";\nimport { \n  Bold, \n  Italic, \n  Underline as UnderlineIcon, \n  List, \n  ListOrdered, \n  Link as LinkIcon,\n  Send,\n  Paperclip,\n  AlertCircle,\n  MoreHorizontal,\n  Trash2,\n  Type,\n  X,\n  Smile,\n  Plus\n} from \"lucide-react\";\n\n// Tiptap Imports\nimport { useEditor, EditorContent, Editor, ReactRenderer } from '@tiptap/react';\nimport type { Instance as TippyInstance } from 'tippy.js';\nimport StarterKit from '@tiptap/starter-kit';\nimport Underline from '@tiptap/extension-underline';\nimport Link from '@tiptap/extension-link';\nimport TiptapImage from '@tiptap/extension-image';\nimport Mention from '@tiptap/extension-mention';\nimport tippy from 'tippy.js';\nimport { MentionList } from './mention-list';\nimport Picker from 'emoji-picker-react';\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlays/popover\";\n\n// ==========================================\n// TIPOS\n// ==========================================\n\nexport type UserRole = 'internal' | 'client' | 'freelancer';\n\nexport interface CommentUser {\n  id: string;\n  name: string;\n  avatar?: string;\n  role: UserRole;\n}\n\nexport interface CommentReaction {\n  emoji: string;\n  users: string[]; // Array de IDs de usuários que reagiram\n}\n\nexport interface CommentAttachment {\n  id: string;\n  url: string;\n  name: string;\n  type: 'image' | 'file';\n}\n\nexport interface Comment {\n  id: string;\n  content: string; // Conteúdo HTML\n  user: CommentUser;\n  createdAt: Date;\n  isRevisionRequest?: boolean;\n  attachments?: CommentAttachment[];\n  reactions?: CommentReaction[];\n}\n\nexport interface CommentSystemProps {\n  comments: Comment[];\n  currentUser: CommentUser;\n  users?: CommentUser[]; // Lista de usuários mencionáveis\n  onAddComment: (comment: Omit<Comment, \"id\" | \"createdAt\">) => void;\n  onDeleteComment?: (id: string) => void;\n  onReact?: (commentId: string, emoji: string) => void;\n  className?: string;\n}\n\n// ==========================================\n// COMPONENTES AUXILIARES\n// ==========================================\n\nconst RoleBadge = ({ role }: { role: UserRole }) => {\n  const config = {\n    internal: { label: \"Equipe iClips\", className: \"bg-primary/10 text-primary border-primary/20\" },\n    client: { label: \"Cliente\", className: \"bg-info/10 text-info-emphasis border-info/20\" },\n    freelancer: { label: \"Freelancer\", className: \"bg-warning/10 text-warning-emphasis border-warning/20\" },\n  };\n\n  const { label, className } = config[role];\n\n  return (\n    <Badge variant=\"outline\" className={cn(\"text-[10px] h-5 px-1.5 font-medium border-0\", className)}>\n      {label}\n    </Badge>\n  );\n};\n\n// ==========================================\n// EDITOR TOOLBAR\n// ==========================================\n\nconst EditorToolbar = ({ editor, visible }: { editor: Editor | null, visible: boolean }) => {\n  if (!editor) return null;\n\n  if (!visible) return null;\n\n  return (\n    <div className=\"flex items-center gap-1 border-b p-1 bg-muted/20 animate-in slide-in-from-bottom-2 duration-200\">\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('bold') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleBold().run()}\n        title=\"Negrito (Ctrl+B)\"\n        aria-label=\"Negrito\"\n      >\n        <Bold className=\"h-3.5 w-3.5\" />\n      </Button>\n      \n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('italic') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleItalic().run()}\n        title=\"Itálico (Ctrl+I)\"\n        aria-label=\"Itálico\"\n      >\n        <Italic className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('underline') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleUnderline().run()}\n        title=\"Sublinhado (Ctrl+U)\"\n        aria-label=\"Sublinhado\"\n      >\n        <UnderlineIcon className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"h-4 mx-1\" />\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('bulletList') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n        aria-label=\"Lista com marcadores\"\n      >\n        <List className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('orderedList') && \"bg-muted text-primary\")}\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        aria-label=\"Lista numerada\"\n      >\n        <ListOrdered className=\"h-3.5 w-3.5\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"h-4 mx-1\" />\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn(\"h-7 w-7\", editor.isActive('link') && \"bg-muted text-primary\")}\n        aria-label=\"Inserir link\"\n        onClick={() => {\n          const previousUrl = editor.getAttributes('link').href;\n          const url = window.prompt('URL', previousUrl);\n          if (url === null) return;\n          if (url === '') {\n            editor.chain().focus().extendMarkRange('link').unsetLink().run();\n            return;\n          }\n          editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();\n        }}\n      >\n        <LinkIcon className=\"h-3.5 w-3.5\" />\n      </Button>\n    </div>\n  );\n};\n\n// ==========================================\n// COMMENT EDITOR AREA\n// ==========================================\n\nconst CommentEditor = ({ \n  currentUser, \n  onSubmit,\n  users = []\n}: { \n  currentUser: CommentUser;\n  onSubmit: (data: { content: string; isRevisionRequest: boolean; attachments: CommentAttachment[] }) => void;\n  users?: CommentUser[];\n}) => {\n  const [isRevision, setIsRevision] = React.useState(false);\n  const [showToolbar, setShowToolbar] = React.useState(false);\n  const [attachments, setAttachments] = React.useState<CommentAttachment[]>([]);\n  const [isEditorEmpty, setIsEditorEmpty] = React.useState(true);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n  const extensions = React.useMemo(() => [\n    StarterKit.configure({\n      // @ts-ignore\n      link: false,\n      // @ts-ignore\n      underline: false,\n    }),\n    Underline,\n    Link.configure({\n      openOnClick: false,\n    }),\n    TiptapImage,\n    Mention.configure({\n      HTMLAttributes: {\n        class: 'bg-secondary text-secondary-foreground rounded-sm px-1 py-0.5 font-medium decoration-clone',\n      },\n      suggestion: {\n        items: ({ query }: { query: string }) => {\n          return users\n            .filter(item => item.name.toLowerCase().startsWith(query.toLowerCase()))\n            .slice(0, 5);\n        },\n        render: () => {\n          // Formato mínimo dos props do ciclo de vida do suggestion do tiptap\n          // (o tipo completo `SuggestionProps` vive em `@tiptap/suggestion`, dep\n          // transitiva sem entrada direta no package.json).\n          type MentionRenderProps = {\n            editor: Editor;\n            clientRect?: (() => DOMRect | null) | null;\n            event?: KeyboardEvent;\n          };\n          let component: ReactRenderer | null = null;\n          let popup: TippyInstance[] | null = null;\n\n          return {\n            onStart: (props: MentionRenderProps) => {\n              component = new ReactRenderer(MentionList, {\n                props,\n                editor: props.editor,\n              });\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              popup = tippy('body', {\n                // tiptap tipa como `() => DOMRect | null`; tippy exige não-nulo.\n                getReferenceClientRect: props.clientRect as () => DOMRect,\n                appendTo: () => document.body,\n                content: component.element,\n                showOnCreate: true,\n                interactive: true,\n                trigger: 'manual',\n                placement: 'bottom-start',\n              });\n            },\n            onUpdate(props: MentionRenderProps) {\n              component?.updateProps(props);\n\n              if (!props.clientRect) {\n                return;\n              }\n\n              popup?.[0].setProps({\n                getReferenceClientRect: props.clientRect as () => DOMRect,\n              });\n            },\n            onKeyDown(props: { event: KeyboardEvent }) {\n              if (props.event.key === 'Escape') {\n                popup?.[0].hide();\n\n                return true;\n              }\n\n              return Boolean(\n                (component?.ref as { onKeyDown?: (p: { event: KeyboardEvent }) => boolean } | undefined)?.onKeyDown?.(props),\n              );\n            },\n            onExit() {\n              popup?.[0].destroy();\n              component?.destroy();\n            },\n          };\n        },\n      },\n    }),\n  ], [users]);\n\n  const editor = useEditor({\n    extensions,\n    content: '',\n    onUpdate: ({ editor }) => {\n      setIsEditorEmpty(editor.isEmpty);\n    },\n    editorProps: {\n      attributes: {\n        class: 'prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[80px] px-3 py-2 text-sm',\n      },\n    },\n  });\n\n  const handleAttach = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files && e.target.files[0]) {\n      const file = e.target.files[0];\n      const url = URL.createObjectURL(file);\n      \n      const newAttachment: CommentAttachment = {\n        id: Math.random().toString(36).substr(2, 9),\n        name: file.name,\n        url,\n        type: file.type.startsWith('image/') ? 'image' : 'file'\n      };\n      \n      setAttachments([...attachments, newAttachment]);\n      // Reset input\n      e.target.value = '';\n    }\n  };\n\n  const removeAttachment = (id: string) => {\n    setAttachments(attachments.filter(a => a.id !== id));\n  };\n\n  const handleSubmit = () => {\n    if (!editor || (editor.isEmpty && attachments.length === 0)) return;\n    \n    onSubmit({\n      content: editor.getHTML(),\n      isRevisionRequest: isRevision,\n      attachments\n    });\n\n    editor.commands.clearContent();\n    setAttachments([]);\n    setIsRevision(false);\n    // Manually reset empty state since clearContent triggers update but we want to be sure\n    setIsEditorEmpty(true);\n  };\n\n  return (\n    <div className=\"flex gap-3 items-start\">\n      <Avatar className=\"h-8 w-8 mt-1 border\">\n        <AvatarImage src={currentUser.avatar} />\n        <AvatarFallback>{currentUser.name.substring(0, 2).toUpperCase()}</AvatarFallback>\n      </Avatar>\n\n      <div className={cn(\n        \"flex-1 rounded-xl border bg-background shadow-sm overflow-hidden transition-colors\",\n        isRevision && \"border-destructive/40 ring-1 ring-destructive/20\"\n      )}>\n        <EditorToolbar editor={editor} visible={showToolbar} />\n        \n        <EditorContent editor={editor} />\n\n        {/* Attachments Preview Area */}\n        {attachments.length > 0 && (\n          <div className=\"px-3 pb-2 flex flex-wrap gap-2\">\n            {attachments.map(att => (\n              <div key={att.id} className=\"relative group\">\n                {att.type === 'image' ? (\n                  <div className=\"h-16 w-16 rounded-md border overflow-hidden relative\">\n                    <img src={att.url} alt={att.name} className=\"h-full w-full object-cover\" />\n                  </div>\n                ) : (\n                  <div className=\"h-16 w-16 rounded-md border bg-muted flex items-center justify-center\">\n                    <Paperclip className=\"h-6 w-6 text-muted-foreground\" />\n                  </div>\n                )}\n                <button \n                  onClick={() => removeAttachment(att.id)}\n                  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\"\n                >\n                  <X className=\"h-3 w-3\" />\n                </button>\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between p-2 bg-muted/10 border-t\">\n          <div className=\"flex items-center gap-2\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button \n                  variant=\"ghost\" \n                  size=\"icon\" \n                  className={cn(\n                    \"h-8 w-8 transition-colors\",\n                    showToolbar ? \"bg-muted text-foreground\" : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                  onClick={() => setShowToolbar(!showToolbar)}\n                  aria-label=\"Opções de formatação\"\n                >\n                  <Type className=\"h-4 w-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Opções de formatação</TooltipContent>\n            </Tooltip>\n\n            <div className=\"w-px h-4 bg-border mx-1\" />\n\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-8 w-8 text-muted-foreground hover:text-foreground\"\n                  aria-label=\"Inserir emoji\"\n                >\n                  <Smile className=\"h-4 w-4\" />\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-auto p-0 border-none\" align=\"start\" side=\"top\">\n                 <Picker \n                   onEmojiClick={(emojiData) => editor?.chain().focus().insertContent(emojiData.emoji).run()}\n                   width={300}\n                   height={350}\n                 />\n              </PopoverContent>\n            </Popover>\n\n            <input \n              type=\"file\" \n              className=\"hidden\" \n              ref={fileInputRef}\n              onChange={handleAttach}\n              accept=\"image/*,.pdf,.doc,.docx\"\n            />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button \n                  variant=\"ghost\" \n                  size=\"icon\" \n                  className=\"h-8 w-8 text-muted-foreground hover:text-foreground\"\n                  onClick={() => fileInputRef.current?.click()}\n                  aria-label=\"Anexar arquivo\"\n                >\n                  <Paperclip className=\"h-4 w-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Anexar arquivo</TooltipContent>\n            </Tooltip>\n\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button \n                  variant=\"ghost\" \n                  size=\"sm\" \n                  className={cn(\n                    \"h-8 gap-2 px-2 transition-colors\",\n                    isRevision\n                      ? \"bg-destructive/10 text-destructive-emphasis hover:bg-destructive/20\"\n                      : \"text-muted-foreground hover:text-foreground\"\n                  )}\n                  onClick={() => setIsRevision(!isRevision)}\n                >\n                  <AlertCircle className=\"h-4 w-4\" />\n                  <span className=\"text-xs font-medium\">Solicitar Refação</span>\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Marca este comentário como um pedido de alteração</TooltipContent>\n            </Tooltip>\n          </div>\n\n          <Button\n            size=\"sm\"\n            onClick={handleSubmit}\n            disabled={isEditorEmpty && attachments.length === 0}\n          >\n            Enviar <Send className=\"h-3.5 w-3.5 ml-2\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// ==========================================\n// SINGLE COMMENT ITEM\n// ==========================================\n\nconst CommentItem = ({ \n  comment, \n  currentUserId,\n  onDelete, \n  onReact \n}: { \n  comment: Comment; \n  currentUserId: string;\n  onDelete?: (id: string) => void;\n  onReact?: (commentId: string, emoji: string) => void;\n}) => {\n  const isRevision = comment.isRevisionRequest;\n\n  return (\n    <div className={cn(\n      \"group flex gap-3 p-4 rounded-lg transition-colors\",\n      isRevision ? \"bg-destructive/5 border border-destructive/20\" : \"hover:bg-muted/20\"\n    )}>\n      <Avatar className=\"h-8 w-8 mt-0.5 border\">\n        <AvatarImage src={comment.user.avatar} />\n        <AvatarFallback>{comment.user.name.substring(0, 2).toUpperCase()}</AvatarFallback>\n      </Avatar>\n\n      <div className=\"flex-1 min-w-0\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between mb-1.5\">\n          <div className=\"flex items-center gap-2 flex-wrap\">\n            <span className=\"font-semibold text-sm text-foreground\">{comment.user.name}</span>\n            <RoleBadge role={comment.user.role} />\n            <span className=\"text-xs text-foreground/65\">\n              {format(comment.createdAt, \"dd MMM 'às' HH:mm\", { locale: ptBR })}\n            </span>\n          </div>\n          \n          <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\">\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-6 w-6 relative before:absolute before:-inset-1 before:content-[''] text-muted-foreground hover:text-foreground\"\n                  aria-label=\"Reagir com emoji\"\n                >\n                  <Smile className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-auto p-0 border-none\" align=\"end\">\n                 <Picker \n                   onEmojiClick={(emojiData) => onReact?.(comment.id, emojiData.emoji)}\n                   width={300}\n                   height={350}\n                 />\n              </PopoverContent>\n            </Popover>\n\n            {onDelete && (\n              <Button \n                variant=\"ghost\" \n                size=\"icon\" \n                className=\"h-6 w-6 relative before:absolute before:-inset-1 before:content-[''] text-muted-foreground hover:text-destructive-emphasis\"\n                onClick={() => onDelete(comment.id)}\n                aria-label=\"Excluir comentário\"\n              >\n                <Trash2 className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Revision Badge */}\n        {isRevision && (\n          <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\">\n            <AlertCircle className=\"h-3.5 w-3.5\" />\n            Solicitação de Refação\n          </div>\n        )}\n\n        {/* Content */}\n        <div \n          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\"\n          dangerouslySetInnerHTML={{ __html: comment.content }}\n        />\n\n        {/* Attachments Display */}\n        {comment.attachments && comment.attachments.length > 0 && (\n          <div className=\"mt-3 flex flex-wrap gap-2\">\n            {comment.attachments.map(att => (\n              <div \n                key={att.id} \n                className=\"group/att relative rounded-lg border overflow-hidden bg-background hover:shadow-sm transition-all cursor-pointer\"\n                onClick={() => window.open(att.url, '_blank')}\n              >\n                {att.type === 'image' ? (\n                  <div className=\"h-32 aspect-[4/3]\">\n                    <img src={att.url} alt={att.name} className=\"h-full w-full object-cover\" />\n                    <div className=\"absolute inset-0 bg-foreground/0 group-hover/att:bg-foreground/10 transition-colors\" />\n                  </div>\n                ) : (\n                  <div className=\"h-12 px-3 flex items-center gap-2 bg-muted/30\">\n                    <Paperclip className=\"h-4 w-4 text-muted-foreground\" />\n                    <span className=\"text-xs font-medium truncate max-w-[150px]\">{att.name}</span>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {/* Reactions */}\n        <div className=\"mt-3 flex flex-wrap gap-2 items-center\">\n          {comment.reactions?.map((reaction) => (\n            <button\n              key={reaction.emoji}\n              onClick={() => onReact?.(comment.id, reaction.emoji)}\n              className={cn(\n                \"inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors\",\n                reaction.users.includes(currentUserId)\n                  ? \"bg-secondary border-secondary text-secondary-foreground\"\n                  : \"bg-muted/30 border-transparent hover:bg-muted/50 text-muted-foreground\"\n              )}\n            >\n              <span>{reaction.emoji}</span>\n              <span>{reaction.users.length}</span>\n            </button>\n          ))}\n          \n          {onReact && (\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-6 w-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                  aria-label=\"Adicionar reação\"\n                >\n                  <Plus className=\"h-3.5 w-3.5\" />\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent className=\"w-auto p-0 border-none\" align=\"start\">\n                 <Picker \n                   onEmojiClick={(emojiData) => onReact(comment.id, emojiData.emoji)}\n                   width={300}\n                   height={350}\n                 />\n              </PopoverContent>\n            </Popover>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// ==========================================\n// MAIN COMPONENT\n// ==========================================\n\nexport const CommentSystem = ({ \n  comments, \n  currentUser, \n  users = [],\n  onAddComment, \n  onDeleteComment,\n  onReact,\n  className \n}: CommentSystemProps) => {\n  \n  const handleSubmit = (data: { content: string; isRevisionRequest: boolean; attachments: CommentAttachment[] }) => {\n    onAddComment({\n      content: data.content,\n      user: currentUser,\n      isRevisionRequest: data.isRevisionRequest,\n      attachments: data.attachments\n    });\n  };\n\n  return (\n    <div className={cn(\"flex flex-col h-full\", className)}>\n      {/* Header */}\n      <div className=\"px-4 py-3 border-b flex items-center justify-between bg-card\">\n        <h3 className=\"font-semibold text-base\">Comentários da Atividade</h3>\n        <Badge variant=\"secondary\" className=\"bg-muted text-muted-foreground hover:bg-muted\">\n          {comments.length}\n        </Badge>\n      </div>\n\n      {/* Scrollable List */}\n      <div className=\"flex-1 overflow-y-auto p-4 space-y-2 bg-muted/5\">\n        {comments.length === 0 ? (\n          <div className=\"h-full flex flex-col items-center justify-center text-muted-foreground min-h-[200px]\">\n            <div className=\"bg-muted rounded-full p-3 mb-3\">\n              <MoreHorizontal className=\"h-6 w-6\" aria-hidden=\"true\" />\n            </div>\n            <p className=\"text-sm font-medium text-foreground/70\">Nenhum comentário ainda</p>\n            <p className=\"text-xs\">Inicie a conversa sobre esta tarefa</p>\n          </div>\n        ) : (\n          comments.map((comment) => (\n            <CommentItem \n              key={comment.id} \n              comment={comment} \n              currentUserId={currentUser.id}\n              onDelete={onDeleteComment} \n              onReact={onReact}\n            />\n          ))\n        )}\n      </div>\n\n      {/* Input Area */}\n      <div className=\"p-4 border-t bg-card\">\n        <CommentEditor \n          currentUser={currentUser} \n          onSubmit={handleSubmit}\n          users={users}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default CommentSystem;"],"names":["RoleBadge","role","config","label","className","jsx","Badge","cn","EditorToolbar","editor","visible","jsxs","Button","Bold","Italic","UnderlineIcon","Separator","List","ListOrdered","previousUrl","url","LinkIcon","CommentEditor","currentUser","onSubmit","users","isRevision","setIsRevision","React","showToolbar","setShowToolbar","attachments","setAttachments","isEditorEmpty","setIsEditorEmpty","fileInputRef","extensions","StarterKit","Underline","Link","TiptapImage","Mention","query","item","component","popup","props","ReactRenderer","MentionList","tippy","_b","_a","useEditor","handleAttach","e","file","newAttachment","removeAttachment","id","a","handleSubmit","Avatar","AvatarImage","AvatarFallback","EditorContent","att","Paperclip","X","Tooltip","TooltipTrigger","Type","TooltipContent","Popover","PopoverTrigger","Smile","PopoverContent","Picker","emojiData","AlertCircle","Send","CommentItem","comment","currentUserId","onDelete","onReact","format","ptBR","Trash2","reaction","Plus","CommentSystem","comments","onAddComment","onDeleteComment","data","MoreHorizontal"],"mappings":"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"}

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

@@ -4,16 +4,16 @@ import { format as K } from "date-fns";
 import { ptBR as D } from "date-fns/locale";
 import { cn as c } from "../utils.js";
 import { Avatar as I, AvatarImage as z, AvatarFallback as T } from "../primitives/avatar.js";
-import { Button as l } from "../primitives/button.js";
+import { Button as o } from "../primitives/button.js";
 import { Badge as M } from "../primitives/badge.js";
 import { Tooltip as x, TooltipTrigger as N, TooltipContent as w } from "../overlays/tooltip.js";
 import { Separator as E } from "../primitives/separator.js";
 import { MoreHorizontal as F, Smile as U, Trash2 as W, AlertCircle as B, Paperclip as y, Plus as $, X, Type as G, Send as J, Bold as Q, Italic as V, Underline as Y, List as Z, ListOrdered as ee, Link as te } from "lucide-react";
 import { ReactRenderer as re, useEditor as ie, EditorContent as ae } from "@tiptap/react";
-import ne from "@tiptap/starter-kit";
-import se from "@tiptap/extension-underline";
-import le from "@tiptap/extension-link";
-import oe from "@tiptap/extension-image";
+import se from "@tiptap/starter-kit";
+import ne from "@tiptap/extension-underline";
+import oe from "@tiptap/extension-link";
+import le from "@tiptap/extension-image";
 import ce from "@tiptap/extension-mention";
 import de from "tippy.js";
 import { MentionList as me } from "./mention-list.js";
@@ -21,14 +21,14 @@ import C from "emoji-picker-react";
 import { Popover as k, PopoverTrigger as R, PopoverContent as L } from "../overlays/popover.js";
 const ue = ({ role: t }) => {
   const d = {
-    internal: { label: "Equipe iClips", className: "bg-primary/10 text-primary hover:bg-primary/20 border-primary/20" },
-    client: { label: "Cliente", className: "bg-info/10 text-info-emphasis hover:bg-info/20 border-info/20" },
-    freelancer: { label: "Freelancer", className: "bg-warning/10 text-warning-emphasis hover:bg-warning/20 border-warning/20" }
+    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: a } = d[t];
   return /* @__PURE__ */ e(M, { variant: "outline", className: c("text-[10px] h-5 px-1.5 font-medium border-0", a), children: m });
 }, he = ({ editor: t, visible: d }) => !t || !d ? 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,
+    o,
     {
       variant: "ghost",
       size: "icon",
@@ -40,7 +40,7 @@ const ue = ({ role: t }) => {
     }
   ),
   /* @__PURE__ */ e(
-    l,
+    o,
     {
       variant: "ghost",
       size: "icon",
@@ -52,7 +52,7 @@ const ue = ({ role: t }) => {
     }
   ),
   /* @__PURE__ */ e(
-    l,
+    o,
     {
       variant: "ghost",
       size: "icon",
@@ -65,7 +65,7 @@ const ue = ({ role: t }) => {
   ),
   /* @__PURE__ */ e(E, { orientation: "vertical", className: "h-4 mx-1" }),
   /* @__PURE__ */ e(
-    l,
+    o,
     {
       variant: "ghost",
       size: "icon",
@@ -76,7 +76,7 @@ const ue = ({ role: t }) => {
     }
   ),
   /* @__PURE__ */ e(
-    l,
+    o,
     {
       variant: "ghost",
       size: "icon",
@@ -88,7 +88,7 @@ const ue = ({ role: t }) => {
   ),
   /* @__PURE__ */ e(E, { orientation: "vertical", className: "h-4 mx-1" }),
   /* @__PURE__ */ e(
-    l,
+    o,
     {
       variant: "ghost",
       size: "icon",
@@ -112,34 +112,34 @@ const ue = ({ role: t }) => {
   onSubmit: d,
   users: m = []
 }) => {
-  const [a, p] = v.useState(!1), [f, n] = v.useState(!1), [h, u] = v.useState([]), [P, j] = v.useState(!0), A = v.useRef(null), q = v.useMemo(() => [
-    ne.configure({
+  const [a, p] = v.useState(!1), [f, s] = v.useState(!1), [h, u] = v.useState([]), [P, j] = v.useState(!0), A = v.useRef(null), q = v.useMemo(() => [
+    se.configure({
       // @ts-ignore
       link: !1,
       // @ts-ignore
       underline: !1
     }),
-    se,
-    le.configure({
+    ne,
+    oe.configure({
       openOnClick: !1
     }),
-    oe,
+    le,
     ce.configure({
       HTMLAttributes: {
-        class: "bg-accent text-accent-foreground rounded-sm px-1 py-0.5 font-medium decoration-clone"
+        class: "bg-secondary text-secondary-foreground rounded-sm px-1 py-0.5 font-medium decoration-clone"
       },
       suggestion: {
-        items: ({ query: r }) => m.filter((s) => s.name.toLowerCase().startsWith(r.toLowerCase())).slice(0, 5),
+        items: ({ query: r }) => m.filter((n) => n.name.toLowerCase().startsWith(r.toLowerCase())).slice(0, 5),
         render: () => {
-          let r = null, s = null;
+          let r = null, n = null;
           return {
-            onStart: (o) => {
+            onStart: (l) => {
               r = new re(me, {
-                props: o,
-                editor: o.editor
-              }), o.clientRect && (s = de("body", {
+                props: l,
+                editor: l.editor
+              }), l.clientRect && (n = de("body", {
                 // tiptap tipa como `() => DOMRect | null`; tippy exige não-nulo.
-                getReferenceClientRect: o.clientRect,
+                getReferenceClientRect: l.clientRect,
                 appendTo: () => document.body,
                 content: r.element,
                 showOnCreate: !0,
@@ -148,17 +148,17 @@ const ue = ({ role: t }) => {
                 placement: "bottom-start"
               }));
             },
-            onUpdate(o) {
-              r == null || r.updateProps(o), o.clientRect && (s == null || s[0].setProps({
-                getReferenceClientRect: o.clientRect
+            onUpdate(l) {
+              r == null || r.updateProps(l), l.clientRect && (n == null || n[0].setProps({
+                getReferenceClientRect: l.clientRect
               }));
             },
-            onKeyDown(o) {
+            onKeyDown(l) {
               var b, S;
-              return o.event.key === "Escape" ? (s == null || s[0].hide(), !0) : !!((S = (b = r == null ? void 0 : r.ref) == null ? void 0 : b.onKeyDown) != null && S.call(b, o));
+              return l.event.key === "Escape" ? (n == null || n[0].hide(), !0) : !!((S = (b = r == null ? void 0 : r.ref) == null ? void 0 : b.onKeyDown) != null && S.call(b, l));
             },
             onExit() {
-              s == null || s[0].destroy(), r == null || r.destroy();
+              n == null || n[0].destroy(), r == null || r.destroy();
             }
           };
         }
@@ -177,16 +177,16 @@ const ue = ({ role: t }) => {
     }
   }), O = (r) => {
     if (r.target.files && r.target.files[0]) {
-      const s = r.target.files[0], o = URL.createObjectURL(s), b = {
+      const n = r.target.files[0], l = URL.createObjectURL(n), b = {
         id: Math.random().toString(36).substr(2, 9),
-        name: s.name,
-        url: o,
-        type: s.type.startsWith("image/") ? "image" : "file"
+        name: n.name,
+        url: l,
+        type: n.type.startsWith("image/") ? "image" : "file"
       };
       u([...h, b]), r.target.value = "";
     }
   }, H = (r) => {
-    u(h.filter((s) => s.id !== r));
+    u(h.filter((n) => n.id !== r));
   }, _ = () => {
     !g || g.isEmpty && h.length === 0 || (d({
       content: g.getHTML(),
@@ -211,7 +211,7 @@ const ue = ({ role: t }) => {
           "button",
           {
             onClick: () => H(r.id),
-            className: "absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm",
+            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(X, { className: "h-3 w-3" })
           }
         )
@@ -220,7 +220,7 @@ const ue = ({ role: t }) => {
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ i(x, { children: [
             /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(
-              l,
+              o,
               {
                 variant: "ghost",
                 size: "icon",
@@ -228,7 +228,7 @@ const ue = ({ role: t }) => {
                   "h-8 w-8 transition-colors",
                   f ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
                 ),
-                onClick: () => n(!f),
+                onClick: () => s(!f),
                 "aria-label": "Opções de formatação",
                 children: /* @__PURE__ */ e(G, { className: "h-4 w-4" })
               }
@@ -238,7 +238,7 @@ const ue = ({ role: t }) => {
           /* @__PURE__ */ e("div", { className: "w-px h-4 bg-border mx-1" }),
           /* @__PURE__ */ i(k, { children: [
             /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
-              l,
+              o,
               {
                 variant: "ghost",
                 size: "icon",
@@ -268,7 +268,7 @@ const ue = ({ role: t }) => {
           ),
           /* @__PURE__ */ i(x, { children: [
             /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(
-              l,
+              o,
               {
                 variant: "ghost",
                 size: "icon",
@@ -285,7 +285,7 @@ const ue = ({ role: t }) => {
           ] }),
           /* @__PURE__ */ i(x, { children: [
             /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ i(
-              l,
+              o,
               {
                 variant: "ghost",
                 size: "sm",
@@ -304,7 +304,7 @@ const ue = ({ role: t }) => {
           ] })
         ] }),
         /* @__PURE__ */ i(
-          l,
+          o,
           {
             size: "sm",
             onClick: _,
@@ -341,14 +341,14 @@ const ue = ({ role: t }) => {
           /* @__PURE__ */ e(ue, { role: t.user.role }),
           /* @__PURE__ */ e("span", { className: "text-xs text-foreground/65", children: K(t.createdAt, "dd MMM 'às' HH:mm", { locale: D }) })
         ] }),
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+        /* @__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(k, { children: [
             /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
-              l,
+              o,
               {
                 variant: "ghost",
                 size: "icon",
-                className: "h-6 w-6 text-muted-foreground hover:text-foreground",
+                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(U, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
               }
@@ -356,18 +356,18 @@ const ue = ({ role: t }) => {
             /* @__PURE__ */ e(L, { className: "w-auto p-0 border-none", align: "end", children: /* @__PURE__ */ e(
               C,
               {
-                onEmojiClick: (n) => a == null ? void 0 : a(t.id, n.emoji),
+                onEmojiClick: (s) => a == null ? void 0 : a(t.id, s.emoji),
                 width: 300,
                 height: 350
               }
             ) })
           ] }),
           m && /* @__PURE__ */ e(
-            l,
+            o,
             {
               variant: "ghost",
               size: "icon",
-              className: "h-6 w-6 text-muted-foreground hover:text-destructive",
+              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(W, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
@@ -386,40 +386,40 @@ const ue = ({ role: t }) => {
           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((n) => /* @__PURE__ */ e(
+      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(n.url, "_blank"),
-          children: n.type === "image" ? /* @__PURE__ */ i("div", { className: "h-32 aspect-[4/3]", children: [
-            /* @__PURE__ */ e("img", { src: n.url, alt: n.name, className: "h-full w-full object-cover" }),
+          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(y, { className: "h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate max-w-[150px]", children: n.name })
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate max-w-[150px]", children: s.name })
           ] })
         },
-        n.id
+        s.id
       )) }),
       /* @__PURE__ */ i("div", { className: "mt-3 flex flex-wrap gap-2 items-center", children: [
-        (f = t.reactions) == null ? void 0 : f.map((n) => /* @__PURE__ */ i(
+        (f = t.reactions) == null ? void 0 : f.map((s) => /* @__PURE__ */ i(
           "button",
           {
-            onClick: () => a == null ? void 0 : a(t.id, n.emoji),
+            onClick: () => a == null ? void 0 : a(t.id, s.emoji),
             className: c(
               "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors",
-              n.users.includes(d) ? "bg-accent border-accent text-accent-foreground" : "bg-muted/30 border-transparent hover:bg-muted/50 text-muted-foreground"
+              s.users.includes(d) ? "bg-secondary border-secondary text-secondary-foreground" : "bg-muted/30 border-transparent hover:bg-muted/50 text-muted-foreground"
             ),
             children: [
-              /* @__PURE__ */ e("span", { children: n.emoji }),
-              /* @__PURE__ */ e("span", { children: n.users.length })
+              /* @__PURE__ */ e("span", { children: s.emoji }),
+              /* @__PURE__ */ e("span", { children: s.users.length })
             ]
           },
-          n.emoji
+          s.emoji
         )),
         a && /* @__PURE__ */ i(k, { children: [
           /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
-            l,
+            o,
             {
               variant: "ghost",
               size: "icon",
@@ -431,7 +431,7 @@ const ue = ({ role: t }) => {
           /* @__PURE__ */ e(L, { className: "w-auto p-0 border-none", align: "start", children: /* @__PURE__ */ e(
             C,
             {
-              onEmojiClick: (n) => a(t.id, n.emoji),
+              onEmojiClick: (s) => a(t.id, s.emoji),
               width: 300,
               height: 350
             }
@@ -447,7 +447,7 @@ const ue = ({ role: t }) => {
   onAddComment: a,
   onDeleteComment: p,
   onReact: f,
-  className: n
+  className: s
 }) => {
   const h = (u) => {
     a({
@@ -457,7 +457,7 @@ const ue = ({ role: t }) => {
       attachments: u.attachments
     });
   };
-  return /* @__PURE__ */ i("div", { className: c("flex flex-col h-full", n), children: [
+  return /* @__PURE__ */ i("div", { className: c("flex flex-col h-full", s), 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(M, { variant: "secondary", className: "bg-muted text-muted-foreground hover:bg-muted", children: t.length })