https://junkbin.io/assets/MessageThread-DYGWD5FI.js

1import{a as ie,u as L,c as M,j as e}from"./vendor-query-BS2dq783.js";import{r}from"./vendor-sentry-D2THoUNl.js";import{u as le,m as h}from"./index-XSMUCKQL.js";import{R as H}from"./ReportModal-i3gWo3VP.js";import{c as j}from"./vendor-utils-BVzZ8OFP.js";import{u as ce}from"./vendor-i18n-D2HZKkC3.js";import{d as me,L as de}from"./vendor-router-B8t7gLgI.js";import{aa as xe,az as ue,ap as he,a4 as O,j as pe,L as Y,a3 as E,F as X,X as W,aA as ge,aB as fe}from"./vendor-icons-CK634XgA.js";const S=5,ye=10*1024*1024,be=new Set(["jpg","jpeg","png","gif","webp","pdf","zip","txt","csv"]);function Z(a){return a<1024?`${a} B`:a<1024*1024?`${(a/1024).toFixed(1)} KB`:`${(a/(1024*1024)).toFixed(1)} MB`}function je(a){const i=Math.floor((Date.now()-new Date(a).getTime())/1e3);if(i<60)return"just now";const x=Math.floor(i/60);if(x<60)return`${x}m ago`;const c=Math.floor(x/60);if(c<24)return`${c}h ago`;const p=Math.floor(c/24);return p<30?`${p}d ago`:new Date(a).toLocaleDateString()}function Ee(){const{t:a}=ce(),{conversationId:i}=me(),{user:x}=le(),c=ie(),p=r.useRef(null),F=r.useRef(null),[g,R]=r.useState(""),[v,G]=r.useState(1),[C,D]=r.useState(null),[J,K]=r.useState(!1),[m,_]=r.useState([]),[I,f]=r.useState(null),P=r.useRef(null),[d,w]=r.useState(null),[q,z]=r.useState(null),y=r.useRef(null);r.useEffect(()=>{window.innerWidth>=768&&z(240)},[]);const V=s=>{s.preventDefault();const t=F.current?.offsetHeight??240;y.current={startY:s.clientY,startHeight:t};const n=k=>{if(!y.current)return;const oe=y.current.startY-k.clientY;z(Math.max(80,Math.min(600,y.current.startHeight+oe)))},l=()=>{y.current=null,window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",l)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",l)};r.useEffect(()=>{if(!d)return;const s=t=>{t.key==="Escape"&&w(null)};return window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s)},[d]);const{data:b}=L({queryKey:["conversation",i],queryFn:()=>h.conversation(i),enabled:!!i,refetchInterval:1e4}),{data:N,isLoading:ee}=L({queryKey:["messages",i,v],queryFn:()=>h.messages(i,{page:v}),enabled:!!i,refetchInterval:1e4}),o=b?b.other_participant??(b.participant_1?.id===x?.id?b.participant_2:b.participant_1):void 0,B=(s="smooth")=>{const t=p.current;t&&(t.scrollTop=t.scrollHeight)};r.useEffect(()=>{N&&v===1&&B("auto")},[N,v]);const u=M({mutationFn:({text:s,files:t})=>h.send({conversation_id:i,content:s,files:t}),onSuccess:()=>{R(""),_([]),f(null),c.invalidateQueries({queryKey:["messages",i]}),c.invalidateQueries({queryKey:["conversations"]}),c.invalidateQueries({queryKey:["unreadCount"]}),setTimeout(()=>B(),100)}}),{data:se}=L({queryKey:["blocked-users"],queryFn:h.blocks,enabled:!!o}),$=se?.results.find(s=>s.blocked_user.id===o?.id),A=M({mutationFn:()=>h.blockUser(o.id),onSuccess:()=>{c.invalidateQueries({queryKey:["blocked-users"]})}}),T=M({mutationFn:s=>h.unblockUser(s),onSuccess:()=>{c.invalidateQueries({queryKey:["blocked-users"]})}}),U=()=>{const s=g.trim();!s&&m.length===0||u.isPending||u.mutate({text:s,files:m})},te=s=>{s.key==="Enter"&&(s.ctrlKey||s.metaKey)&&(s.preventDefault(),U())},ne=s=>{const t=Array.from(s.target.files??[]);s.target.value="";const n=[...m,...t];if(n.length>S){f(`Max ${S} attachments per message.`);return}for(const l of t){const k=l.name.includes(".")?l.name.split(".").pop().toLowerCase():"";if(!be.has(k)){f(`File type .${k} is not allowed.`);return}if(l.size>ye){f(`${l.name} exceeds the 10 MB size limit.`);return}}f(null),_(n)},ae=s=>{_(t=>t.filter((n,l)=>l!==s))},Q=[...N?.results??[]].reverse(),re=!!N?.next;return e.jsxs("div",{className:"mx-auto max-w-screen-2xl px-4 py-4 flex flex-col",style:{height:"calc(100vh - 4rem)",overflow:"hidden"},children:[e.jsxs("div",{className:"flex items-center justify-between mb-4 pb-4 border-b border-cyber-light/30",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(de,{to:"/messages",className:"p-2 text-gray-400 hover:text-cyber-cyan transition-colors",children:e.jsx(xe,{className:"h-5 w-5"})}),o&&e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"h-9 w-9 rounded-full flex items-center justify-center font-mono font-bold text-sm bg-cyber-cyan/20 text-cyber-cyan border border-cyber-cyan/50",children:o.username.charAt(0).toUpperCase()}),e.jsxs("div",{children:[e.jsx("span",{className:"font-mono text-sm text-white",children:o.username}),o.is_trusted&&e.jsxs("span",{className:"ml-1 text-[10px] text-cyber-green",children:["[",a("profile.trusted"),"]"]}),o.is_moderator&&e.jsxs("span",{className:"ml-1 text-[10px] text-cyber-yellow",children:["[",a("profile.moderator"),"]"]})]})]})]}),o&&e.jsxs("div",{className:"flex items-center gap-3",children:[$?e.jsxs("button",{onClick:()=>T.mutate($.id),disabled:T.isPending,className:"flex items-center gap-1 text-xs font-mono text-cyber-green hover:text-white transition-colors disabled:opacity-50",title:"Unblock user",children:[e.jsx(ue,{className:"h-3.5 w-3.5"}),a("messages.unblock")]}):e.jsxs("button",{onClick:()=>{window.confirm(`Block ${o.username}? You will no longer be able to message each other.`)&&A.mutate()},disabled:A.isPending,className:"flex items-center gap-1 text-xs font-mono text-gray-500 hover:text-cyber-pink transition-colors disabled:opacity-50",title:"Block user",children:[e.jsx(he,{className:"h-3.5 w-3.5"}),a("messages.block")]}),e.jsxs("button",{onClick:()=>K(!0),className:"flex items-center gap-1 text-xs font-mono text-gray-500 hover:text-cyber-yellow transition-colors",title:"Report user",children:[e.jsx(O,{className:"h-3.5 w-3.5"}),a("messages.report")]})]})]}),e.jsxs("div",{ref:p,className:"flex-1 overflow-y-auto space-y-3 mb-4",children:[re&&e.jsxs("button",{onClick:()=>G(s=>s+1),className:"w-full py-2 text-center text-xs font-mono text-gray-500 hover:text-cyber-cyan transition-colors flex items-center justify-center gap-1",children:[e.jsx(pe,{className:"h-3 w-3"}),a("messages.load_older")]}),ee?e.jsx("div",{className:"flex items-center justify-center py-16",children:e.jsx(Y,{className:"h-6 w-6 animate-spin text-cyber-cyan"})}):Q.length===0?e.jsx("div",{className:"text-center py-16 text-gray-500 text-sm font-mono",children:a("messages.no_messages")}):Q.map(s=>{const t=s.sender?.id===x?.id;return e.jsx("div",{className:j("flex",t?"justify-end":"justify-start"),children:e.jsxs("div",{className:j("max-w-[75%] px-4 py-3 group relative",t?"bg-cyber-cyan/10 border border-cyber-cyan/30":"bg-cyber-dark border border-cyber-light/30"),children:[s.content&&e.jsx("p",{className:"text-sm text-gray-200 whitespace-pre-wrap break-words",children:s.content}),s.attachments&&s.attachments.length>0&&e.jsx("div",{className:j("flex flex-col gap-2",s.content&&"mt-2"),children:s.attachments.map(n=>n.is_image?e.jsxs("div",{className:"relative group/img cursor-zoom-in inline-block",onClick:()=>w({url:n.url,filename:n.original_filename}),children:[e.jsx("img",{src:n.url,alt:n.original_filename,className:"max-w-xs max-h-64 object-contain border border-cyber-light/20"}),e.jsx("a",{href:n.url,download:n.original_filename,onClick:l=>l.stopPropagation(),title:"Download",className:"absolute bottom-1 right-1 opacity-0 group-hover/img:opacity-100 bg-black/60 p-1 transition-opacity",children:e.jsx(E,{className:"h-3 w-3 text-white"})})]},n.id):e.jsxs("a",{href:n.url,download:n.original_filename,className:"flex items-center gap-2 px-3 py-2 border border-cyber-light/30 hover:border-cyber-cyan/50 transition-colors text-xs font-mono text-gray-300 hover:text-cyber-cyan",children:[e.jsx(X,{className:"h-4 w-4 shrink-0"}),e.jsx("span",{className:"truncate",children:n.original_filename}),e.jsx("span",{className:"text-gray-500 shrink-0",children:Z(n.file_size)}),e.jsx(E,{className:"h-3 w-3 shrink-0 ml-auto"})]},n.id))}),e.jsx("div",{className:j("flex items-center gap-2 mt-1",t?"justify-end":"justify-start"),children:e.jsx("span",{className:"text-[10px] text-gray-600 font-mono",children:je(s.created_at)})}),!t&&e.jsx("button",{onClick:()=>D(s.id),className:"absolute top-2 right-2 opacity-0 group-hover:opacity-100 text-gray-600 hover:text-cyber-yellow transition-all",title:"Report message",children:e.jsx(O,{className:"h-3 w-3"})})]})},s.id)})]}),e.jsxs("div",{className:"border-t border-cyber-light/30 pt-4",children:[(u.isError||I)&&e.jsx("div",{className:"mb-3 p-2 border border-cyber-pink/50 bg-cyber-pink/10 text-cyber-pink text-xs font-mono",children:I??a("messages.send_error")}),m.length>0&&e.jsx("div",{className:"flex flex-wrap gap-2 mb-2",children:m.map((s,t)=>{const n=s.type.startsWith("image/");return e.jsxs("div",{className:"relative flex items-center gap-1 border border-cyber-light/30 bg-cyber-dark px-2 py-1 text-xs font-mono text-gray-300",children:[n?e.jsx("img",{src:URL.createObjectURL(s),alt:s.name,className:"h-10 w-10 object-cover"}):e.jsx(X,{className:"h-4 w-4 text-gray-500"}),e.jsx("span",{className:"max-w-[120px] truncate",children:s.name}),e.jsx("span",{className:"text-gray-600",children:Z(s.size)}),e.jsx("button",{onClick:()=>ae(t),className:"ml-1 text-gray-500 hover:text-cyber-pink transition-colors",children:e.jsx(W,{className:"h-3 w-3"})})]},t)})}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx("input",{ref:P,type:"file",multiple:!0,accept:".jpg,.jpeg,.png,.gif,.webp,.pdf,.zip,.txt,.csv",className:"hidden",onChange:ne}),e.jsxs("div",{className:"relative flex-1",children:[e.jsx("div",{className:"hidden md:flex absolute -top-3 left-0 right-0 justify-center items-center h-4 cursor-ns-resize z-10 group select-none",onMouseDown:V,children:e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("div",{className:"w-10 h-px bg-cyber-light/40 group-hover:bg-cyber-cyan/60 transition-colors"}),e.jsx("div",{className:"h-1 w-1 rounded-full bg-cyber-light/40 group-hover:bg-cyber-cyan/60 transition-colors"}),e.jsx("div",{className:"w-10 h-px bg-cyber-light/40 group-hover:bg-cyber-cyan/60 transition-colors"})]})}),e.jsx("textarea",{ref:F,value:g,onChange:s=>R(s.target.value),onKeyDown:te,placeholder:a("messages.type_message"),rows:4,maxLength:5e3,className:"input-cyber w-full resize-none text-sm",style:q!==null?{height:`${q}px`}:void 0})]}

1),e.jsxs("div",{className:"flex flex-col gap-2 self-end",children:[e.jsx("button",{onClick:()=>P.current?.click(),title:"Attach files",className:"btn-cyber px-4",children:e.jsx(ge,{className:"h-4 w-4"})}),e.jsx("button",{onClick:U,disabled:!g.trim()&&m.length===0||u.isPending,className:j("btn-cyber px-4",(!g.trim()&&m.length===0||u.isPending)&&"opacity-50 cursor-not-allowed"),children:u.isPending?e.jsx(Y,{className:"h-4 w-4 animate-spin"}):e.jsx(fe,{className:"h-4 w-4"})})]})]}),e.jsxs("div",{className:"flex items-center justify-between mt-1",children:[e.jsxs("span",{className:"text-[10px] text-gray-600 font-mono",children:[a("messages.ctrl_enter_to_send")," · ",m.length,"/",S," ",a("messages.files")]}),e.jsxs("span",{className:"text-[10px] text-gray-600 font-mono",children:[g.length,"/5000"]})]})]}),C&&e.jsx(H,{isOpen:!!C,onClose:()=>D(null),contentType:"messaging.message",objectId:C,itemName:"Message"}),o&&e.jsx(H,{isOpen:J,onClose:()=>K(!1),contentType:"users.customuser",objectId:o.id,itemName:o.username}),d&&e.jsx("div",{className:"fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4",onClick:()=>w(null),children:e.jsxs("div",{className:"relative flex flex-col items-center gap-3 max-w-[90vw] max-h-[90vh]",onClick:s=>s.stopPropagation(),children:[e.jsx("button",{onClick:()=>w(null),className:"absolute -top-9 right-0 text-gray-400 hover:text-white transition-colors",title:"Close",children:e.jsx(W,{className:"h-6 w-6"})}),e.jsx("img",{src:d.url,alt:d.filename,className:"max-w-full max-h-[80vh] object-contain"}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-xs font-mono text-gray-400 truncate max-w-xs",children:d.filename}),e.jsxs("a",{href:d.url,download:d.filename,className:"btn-cyber text-xs px-3 py-1 flex items-center gap-1.5",children:[e.jsx(E,{className:"h-3 w-3"}),a("messages.download")]})]})]})})]})}export{Ee as default};