https://brinqsapp-production-f652.up.railway.app/assets/group-chat-page-mvPZYehk.js

1import{u as De,aC as Re,E as He,aH as Xe,a as Ke,r as c,F as ke,j as a,L as Ye,b as Z,A as Ze,a1 as qe,J as We,I as Ve,h as Qe,i as Je,k as Ge,aF as es,l as ss,bs as ts,bt as rs,bu as as,H as is,n as ns,W as Se,m as Ee,aL as os}from"./index-DXw5IyQz.js";import{f as Pe}from"./timestamp-utils-D3fEe_HZ.js";import{F as ls}from"./FileMessageBubble-B3KpUqPO.js";import{i as ds,P as cs}from"./PhotoGrid-BQqiotGP.js";import{C as ms}from"./ChatFileUpload-BTiXobAz.js";import{I as fs,i as gs}from"./isToday-Bum1QFLy.js";import{M as Ae}from"./message-circle-DjiHWWBO.js";import{I as us}from"./info-D32EcuXd.js";import{S as ps}from"./send-DyoKc_iB.js";import{f as hs}from"./format-Co3WRPUI.js";import{n as xs}from"./nl-BBnlNZVY.js";import"./api-qYiE87cU.js";import"./eye-BneA9b0F.js";import"./image-CUF_npZZ.js";import"./download-_Wn09zp8.js";import"./constructNow-C2JZsSDB.js";const ie=()=>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(r){const g=Math.random()*16|0;return(r==="x"?g:g&3|8).toString(16)}),ws=({item:r,isCurrentUser:g,showAvatar:y,onImageClick:O})=>{var I;const M=Pe(r.sentAt),v=((I=r.senderName)==null?void 0:I.split(" ").map(w=>w[0]).join("").toUpperCase().substring(0,2))||"?";return a.jsxs("div",{className:`flex mb-4 ${g?"flex-row-reverse":"flex-row"}`,children:[a.jsx("div",{className:`flex-shrink-0 ${g?"ml-3":"mr-3"}`,children:y?a.jsx(Se,{size:"md",profileImage:r.senderProfileImage,profileImageOriginal:r.senderProfileImageOriginal,profileImageZoom:r.senderProfileImageZoom,profileImageX:r.senderProfileImageX,profileImageY:r.senderProfileImageY,alt:r.senderName,fallback:v,className:"w-10 h-10 md:w-12 md:h-12"}):a.jsx("div",{className:"w-10 h-10 md:w-12 md:h-12"})}),a.jsxs("div",{className:`flex flex-col max-w-[85%] md:max-w-[70%] lg:max-w-[60%] xl:max-w-[50%] ${g?"items-end":"items-start"}`,children:[a.jsx(cs,{images:r.images.map(w=>w.url),onOpenGallery:w=>{O&&O(r.images,w)}}),a.jsxs("div",{className:"flex items-center mt-0.5 justify-start",children:[a.jsxs("span",{className:"text-[9px] sm:text-xs text-muted-foreground",children:[r.senderName," • ",M]}),g&&a.jsx("div",{className:"ml-2 flex items-center",children:a.jsx(Ee,{className:"w-3 h-3 text-green-500"})})]})]})]})},ys=({message:r,isCurrentUser:g,showAvatar:y,onImageClick:O})=>{var I;const M=Pe(r.sentAt),v=((I=r.senderName)==null?void 0:I.split(" ").map(w=>w[0]).join("").toUpperCase().substring(0,2))||"?";return a.jsxs("div",{className:`flex mb-4 ${g?"flex-row-reverse":"flex-row"}`,children:[a.jsx("div",{className:`flex-shrink-0 ${g?"ml-3":"mr-3"}`,children:y?a.jsx(Se,{size:"md",profileImage:r.senderProfileImage,profileImageOriginal:r.senderProfileImageOriginal??void 0,profileImageZoom:r.senderProfileImageZoom??void 0,profileImageX:r.senderProfileImageX??void 0,profileImageY:r.senderProfileImageY??void 0,alt:r.senderName,fallback:v,className:"w-10 h-10 md:w-12 md:h-12"}):a.jsx("div",{className:"w-10 h-10 md:w-12 md:h-12"})}),a.jsxs("div",{className:`flex flex-col max-w-[85%] md:max-w-[70%] lg:max-w-[60%] xl:max-w-[50%] ${g?"items-end":"items-start"}`,children:[(()=>{const w=r.type==="image"||r.type==="IMAGE",x=!!r.fileUrl,L=r.type==="file"||r.type==="document"||r.type==="DOCUMENT";return(r.fileName||r.fileUrl)&&console.log({type:r.type,isImageType:w,isFileType:L,hasFileUrl:x,fileUrl:r.fileUrl,fileName:r.fileName,willRenderAs:w&&x?"IMAGE":L&&x?"FILE/DOCUMENT":"TEXT"}),w&&x?r.fileUrl==="uploading"?a.jsx("div",{className:"rounded-2xl overflow-hidden shadow-md w-full max-w-full bg-gray-100 p-4",children:a.jsx("div",{className:"flex items-center justify-center h-32 text-gray-500",children:a.jsxs("div",{className:"text-center",children:[a.jsx("div",{className:"w-8 h-8 border-2 border-gray-400 border-t-transparent rounded-full animate-spin mx-auto mb-2"}),a.jsx("p",{className:"text-sm",children:"Afbeelding uploaden..."}),a.jsx("p",{className:"text-xs text-gray-400 mt-1",children:r.fileName})]})})}):a.jsxs("div",{className:"rounded-2xl overflow-hidden shadow-md w-full max-w-full relative",children:[a.jsx("img",{src:r.fileUrl,alt:"Image",className:"w-full h-auto max-h-96 object-cover cursor-pointer hover:opacity-90 transition-opacity",onClick:()=>{O&&r.fileUrl?O(r.fileUrl,[]):r.fileUrl&&window.open(r.fileUrl,"_blank")}}),r.isOptimistic&&a.jsx("div",{className:"absolute top-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded",children:"Uploaden..."})]}):L&&x?a.jsx(ls,{fileName:r.fileName||"Bestand",fileUrl:r.fileUrl||"",fileType:r.fileType||"application/octet-stream",fileSize:r.fileSize||0,thumbnailUrl:r.thumbnailUrl,message:r.content,timestamp:r.sentAt||r.createdAt,isCurrentUser:g,senderName:r.senderName||(g?user==null?void 0:user.name:"Onbekend"),senderProfileImage:r.senderProfileImage,senderProfileImageOriginal:r.senderProfileImageOriginal,senderProfileImageZoom:r.senderProfileImageZoom,senderProfileImageX:r.senderProfileImageX,senderProfileImageY:r.senderProfileImageY,isOptimistic:r.isOptimistic,uploadProgress:r.uploadProgress}):a.jsx("div",{className:`px-4 py-3 md:px-5 md:py-3 rounded-2xl shadow-sm transition-colors ${g?"bg-[#FF0083] text-white rounded-br-md hover:bg-[#

1E6007A]":"bg-white border border-gray-200 rounded-bl-md hover:bg-gray-50"}`,children:a.jsx("p",{className:"text-sm md:text-base leading-relaxed break-words",children:r.content})})})(),a.jsxs("div",{className:"flex items-center mt-2 px-2",children:[a.jsxs("span",{className:"text-xs md:text-sm text-gray-500",children:[!g&&y&&r.senderName&&`${r.senderName} • `,M]}),g&&a.jsx("div",{className:"ml-2 flex items-center",children:r.isOptimistic?r.status==="pending"?a.jsx("div",{className:"w-3 h-3 border border-gray-400 border-t-transparent rounded-full animate-spin"}):r.status==="failed"?a.jsx("span",{className:"text-xs text-red-500",children:"Failed"}):a.jsx(os,{className:"w-3 h-3 text-gray-400"}):a.jsx(Ee,{className:"w-3 h-3 text-green-500"})})]})]})]})},Is=({date:r})=>{let g;try{gs(r)?g="Vandaag":ds(r)?g="Gisteren":g=hs(r,"d MMMM yyyy",{locale:xs})}catch{g="Onbekende datum"}return a.jsxs("div",{className:"flex items-center justify-center my-4",children:[a.jsx("div",{className:"flex-1 h-px bg-gray-200"}),a.jsx(ns,{variant:"outline",className:"mx-3 text-xs font-normal",children:g}),a.jsx("div",{className:"flex-1 h-px bg-gray-200"})]})},_=(r,g)=>([...r],[...r].sort((O,M)=>{const v=g.get(O),I=g.get(M);if(!v||!I)return 0;if(v.isOptimistic&&!I.isOptimistic)return 1;if(!v.isOptimistic&&I.isOptimistic)return-1;if(v.isOptimistic&&I.isOptimistic){const z=v._timestamp||0,S=I._timestamp||0;return z-S}const w=v.sentAt?new Date(v.sentAt).getTime():0,x=I.sentAt?new Date(I.sentAt).getTime():0;if(w!==x)return w-x;const L=Number(v.id),U=Number(I.id);return!isNaN(L)&&!isNaN(U)?L-U:0}));function Us(){var we,ye,Ie;const{user:r,isLoading:g}=De(),{lastMessage:y,acknowledgeMessage:O}=Re(),M=He(),v=Xe(),[I,w]=Ke(),x=c.useRef(null),L=c.useRef(null),U=c.useRef(null),z=c.useRef(!1),[S,N]=c.useState({messages:new Map,messageOrder:[],isLoading:!1,hasOlder:!1,isLoadingOlder:!1,lastProcessedMessageId:void 0}),F=c.useRef(new Set),Ce=100,b=c.useRef(new Set),[q,ne]=c.useState(""),[W,oe]=c.useState(!1),[Le,G]=c.useState(!1),[le,de]=c.useState(!1),[_e,ce]=c.useState([]),[Be,me]=c.useState(0),$=v.chatSlug;c.useEffect(()=>{z.current=!1,x.current&&(x.current.scrollTop=0),$&&setTimeout(()=>{ge&&ge()},0)},[$]),c.useEffect(()=>{if(window.Capacitor)return document.body.classList.add("capacitor-platform"),()=>{document.body.classList.remove("capacitor-platform")}},[]),c.useEffect(()=>(document.body.classList.add("chat-page"),document.documentElement.classList.add("chat-page"),()=>{document.body.classList.remove("chat-page"),document.documentElement.classList.remove("chat-page")}),[]);const[E]=c.useState(()=>{const t=!!window.Capacitor,s="ontouchstart"in window||navigator.maxTouchPoints>0,i=window.innerWidth<=768,e=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);return t?!0:e||s&&i}),[P,V]=c.useState(!1),fe=c.useRef(window.innerHeight);c.useEffect(()=>{if(!E)return;if(!!window.Capacitor){const{Keyboard:i}=window.Capacitor.Plugins||{};if(i){const e=i.addListener("keyboardDidShow",l=>{V(!0),document.body.classList.add("keyboard-active")}),n=i.addListener("keyboardDidHide",()=>{V(!1),document.body.classList.remove("keyboard-active")});return()=>{e==null||e.remove(),n==null||n.remove(),document.body.classList.remove("keyboard-active")}}}const s=()=>{const i=window.innerHeight,l=fe.current-i>150;l!==P&&(V(l),l?document.body.classList.add("keyboard-active"):document.body.classList.remove("keyboard-active"))};return window.addEventListener("resize",s),window.addEventListener("orientationchange",()=>{setTimeout(()=>{fe.current=window.innerHeight,V(!1)},500)}),()=>{window.removeEventListener("resize",s),window.removeEventListener("orientationchange",s)}},[E,P]),c.useEffect(()=>{const t="keyboard-safe-area-override";if(P){if(document.body.classList.add("keyboard-active"),!document.getElementById(t)){const s=document.createElement("style");s.id=t,s.textContent=`
2          .keyboard-override-padding {
3            padding-bottom: 0px !important;
4            margin-bottom: 0px !important;
5          }
6          body.keyboard-active .group-chat-footer {
7            padding-bottom: 0px !important;
8            margin-bottom: 0px !important;
9          }
10        `,document.head.appendChild(s)}}else{document.body.classList.remove("keyboard-active");const s=document.getElementById(t);s&&s.remove()}return()=>{document.body.classList.remove("keyboard-active");const s=document.getElementById(t);s&&s.remove()}},[P]);const $e=c.useMemo(()=>{const t=!!window.Capacitor;return P&&(E||t)?"0px":t&&!P?"max(16px, env(safe-area-inset-bottom, 16px))":"16px"},[E,P]),{data:T,isLoading:D,error:bs,refetch:ge}=ke({queryKey:[`/api/organization/chat-groups/by-slug/${$}/complete`],enabled:!!$&&!!r,staleTime:0,refetchOnWindowFocus:!1,retry:!1,queryFn:async()=>{const t=sessionStorage.getItem("auth_token")||localStorage.getItem("auth_token");let s=await fetch(`/api/organization/chat-groups/by-slug/${$}/complete?limit=50`,{headers:{Authorization:`Bearer ${t}`}});if(!s.ok&&s.status===404&&(s=await fetch(`/api/organization/chat-groups/${$}`,{headers:{Authorization:`Bearer ${t}`}})),!s.ok)throw new Error("Failed to fetch chat group");return s.json()}}),o=(T==null?void 0:T.data)||T,[R,ue]=c.useState(!1),[H,X]=c.useState(!0),[ee,se]=c.useState(null),{data:k,isLoading:B}=ke({queryKey:[`/api/organization/chat-groups/${o==null?void 0:o.id}/messages`],enabled:!!(o!=null&&o.id),staleTime:0,refetchOnWindowFocus:!1,queryFn:async()=>{const t=sessionStorage.getItem("auth_token")||localStorage.getItem("auth_token"),s=await fetch(`/api/organization/chat-groups/${o.id}/messages?limit=50`,{headers:{Authorization:`Bearer ${t}`}});if(!s.ok)throw new Error("Failed to fetch messages");const i=await s.json(),e=i.data||i;return e!=null&&e.messages&&e.messages.length>0?(se(e.oldestId),X(e.hasMore)):X(!1),i}}),pe=c.useCallback(async()=>

10{if(!(!(o!=null&&o.id)||R||!H||!ee)){ue(!0);try{const t=sessionStorage.getItem("auth_token")||localStorage.getItem("auth_token"),s=await fetch(`/api/organization/chat-groups/by-slug/${o.slug}/complete?limit=30&beforeId=${ee}`,{headers:{Authorization:`Bearer ${t}`}});if(!s.ok)throw new Error(`HTTP ${s.status}`);const i=await s.json(),e=i.data||i,n=(e==null?void 0:e.messages)||[];n&&n.length>0?(N(l=>{const d=new Map(l.messages),f=[...l.messageOrder];return n.forEach(m=>{const h=String(m.id);d.has(h)||(d.set(h,{...m,status:"delivered"}),f.unshift(h))}),{...l,messages:d,messageOrder:f}}),se(e.oldestId),X(e.hasMore)):X(!1)}catch(t){console.error("[INFINITE SCROLL] Error loading older messages:",t)}finally{ue(!1)}}},[o==null?void 0:o.id,ee,H,R]);c.useEffect(()=>{if(!x.current||!H)return;const t=x.current;let s;const i=()=>{clearTimeout(s),s=setTimeout(()=>{t.scrollTop<200&&H&&!R&&pe()},100)};return t.addEventListener("scroll",i),()=>{t.removeEventListener("scroll",i),clearTimeout(s)}},[H,R,pe]),c.useEffect(()=>{if(!(o!=null&&o.id))return;const t=async()=>{try{const i=sessionStorage.getItem("auth_token")||localStorage.getItem("auth_token");await fetch(`/api/organization/chat-groups/${o.id}/mark-read`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${i}`}}),M.invalidateQueries({queryKey:["/api/organization/chat-groups/unread-count"]}),M.invalidateQueries({queryKey:["/api/projects/messages/unread-count"]})}catch(i){console.error("[MARK READ] Failed to mark messages as read:",i)}};t();const s=()=>{document.hidden||t()};return document.addEventListener("visibilitychange",s),window.addEventListener("focus",t),()=>{document.removeEventListener("visibilitychange",s),window.removeEventListener("focus",t)}},[o==null?void 0:o.id,M]),c.useEffect(()=>{const t=()=>{N(e=>{const n=new Map(e.messages);let l=[...e.messageOrder],d=!1;const f=Date.now();if(n.forEach((m,h)=>{m.isOptimistic&&m._timestamp&&f-m._timestamp>3e4&&(n.delete(h),l=l.filter(J=>J!==h),b.current.delete(h),d=!0)}),d){const m=_(l,n);return{...e,messages:n,messageOrder:m}}return e})},s=setTimeout(t,5e3),i=setInterval(t,1e4);return()=>{clearTimeout(s),clearInterval(i)}},[o==null?void 0:o.id]),c.useEffect(()=>{if(o!=null&&o.id&&!k&&!B)try{const t=sessionStorage.getItem(`chat_messages_${o.id}`);if(t){const s=JSON.parse(t),i=new Map,e=[];s.slice(-50).forEach(d=>{const f=String(d.id||d.tempId);i.set(f,d),e.push(f)});const l=_(e,i);N(d=>({...d,messages:i,messageOrder:l}))}}catch(t){console.error("Failed to load from cache:",t)}},[o==null?void 0:o.id,k,B]),c.useEffect(()=>{if(k&&!B){const t=k.data||k,s=(t==null?void 0:t.messages)||k.data||k||[];Array.isArray(s)&&s.length>0&&N(i=>{const e=new Map,n=[];return s.forEach(l=>{const d=String(l.id);e.set(d,{...l,_source:"api",_timestamp:Date.now(),status:"delivered"}),n.push(d)}),te(e,n,o==null?void 0:o.id),setTimeout(()=>{C(!1,!1)},200),{...i,messages:e,messageOrder:n,isLoading:!1}})}},[k,B,o==null?void 0:o.id]);const te=c.useCallback((t,s,i)=>{if(i)try{const e=s.map(n=>t.get(n)).filter(n=>n&&!n.isOptimistic).slice(-200);sessionStorage.setItem(`chat_messages_${i}`,JSON.stringify(e))}catch(e){console.error("Failed to save to cache:",e)}},[]);c.useEffect(()=>{if(T&&!D){const t=T.data||T,s=(t==null?void 0:t.messages)||[];t&&(se(t.oldestId),X(t.hasMore||!1)),Array.isArray(s)&&s.length>0&&N(i=>{const e=new Map,n=[];return s.forEach(l=>{const d=String(l.id);e.set(d,{...l,_source:"chat-group",_timestamp:Date.now(),status:"delivered"}),n.push(d)}),te(e,n,t==null?void 0:t.id),setTimeout(()=>{C(!1,!1)},200),{...i,messages:e,messageOrder:n,isLoading:!1}})}},[T,D]),c.useEffect(()=>{var t,s,i;if(!(!y||!o)&&(y.type==="NEW_CHAT_MESSAGE"||y.type==="NEW_NOTIFICATION"&&((t=y.notification)==null?void 0:t.type)==="NEW_CHAT_MESSAGE")){const e=y.message||((s=y.notification)==null?void 0:s.message)||y;if((y.chatGroupId||((i=y.notification)==null?void 0:i.chatGroupId))===o.id){const l=`${e.id}_${e.sentAt}_${e.senderId}`;if(F.current.has(l))return;if(F.current.add(l),F.current.size>Ce){const f=Array.from(F.current);F.current=new Set(f.slice(-100))}if(N(f=>{var Ne,je,Oe,Me,Te;const m=new Map(f.messages);let h=[...f.messageOrder];const j=String(e.id),J=e.clientId||e.uploadId;let be=!1;if(J){for(const[u,p]of m.entries())if(p.clientId===J){const A={...p,serverId:e.id,status:"sent",fileUrl:e.fileUrl||p.fileUrl,thumbnailUrl:e.thumbnailUrl||p.thumbnailUrl,sentAt:e.sentAt||p.sentAt,_source:"websocket-update",_timestamp:Date.now()};m.set(u,A),be=!0;break}}let K=!1;if(e.senderId===(r==null?void 0:r.id)&&e.uploadId&&b.current.size>0)for(const u of b.current.values()){const p=m.get(u);if(p&&p.isOptimistic&&p.uploadId===e.uploadId){m.delete(u);const A=h.indexOf(u),Y={...e,type:((Ne=e.messageType)==null?void 0:Ne.toLowerCase())||e.type,isOptimistic:!1,status:"sent",_source:"websocket-replacement",_timestamp:Date.now(),fileUrl:e.fileUrl||e.imageUrl||p.fileUrl,thumbnailUrl:e.thumbnailUrl||p.thumbnailUrl},ae=String(e.id);m.set(ae,Y),A!==-1?h[A]=ae:h.push(ae),b.current.delete(u),K=!0;break}}if(!be&&!K){const u=m.get(j);if(u){const p=u.sentAt?new Date(u.sentAt).getTime():0,A=e.sentAt?new Date(e.sentAt).getTime():0,Y={clientId:u.clientId||e.clientId||ie(),serverId:e.id,id:e.id,...e,type:((je=e.messageType)==null?void 0:je.toLowerCase())||e.type,status:"sent",isOptimistic:!1,_source:"websocket",_timestamp:Date.now(),sentAt:p&&A&&p<A?u.sentAt:e.sentAt};m.set(j,Y)}else{const p={clientId:e.clientId||ie(),serverId:e.id,id:e.id,...e,type:((Oe=e.messageType)==null?void 0:Oe.toLowerCase())||e.type,status:"sent",isOptimistic:!1,_source:"websocket",_timestamp:Date.now()};m.set(j,p),h.includes(j)||h.push(j)}}if(e.senderId===(r==null?void 0:r.id)&&e.uploadId&&!K)console.log(`Available: ${Array.from(b.current).map(u=>{const p=m.get(u);return`${u}(${(p==null?void 0:p.uploadId)||"none"})`}).join(", ")}`);else if(e.senderId===(r==null?void 0:r.id)&&!e.uploadId&&b.current.size>0){const u=Array.from(b.current)[0];if(u){const p=m.get(u);if(p&&p.isOptimistic){m.delete(u);const A=h.indexOf(u);A!==-1?h[A]=j:h.push(j);const Y={...e,type:((Me=e.messageType)==null?void 0:Me.toLowerCase())||e.type,isOptimistic:!1,status:"sent",_source:"websocket-fallback",_timestamp:Date.now()};m.set(j,Y),b.current.delete(u),K=!0}}}if(!K){const u={...e,type:((Te=e.messageType)==null?void 0:Te.toLowerCase())||e.type,isOptimistic:!1,status:"sent",_source:"websocket",_timestamp:Date.now()};m.set(j,u),h.includes(j)||h.push(j)}const ve=_(h,m);return te(m,ve,o.id),{...f,messages:m,messageOrder:ve}}),O&&typeof e.id=="number"&&O(e.id),Q()){const f=window.Capacitor?200:100;setTimeout(()=>C(!1,!1),f),setTimeout(()=>{Q()&&C(!1,!1)},f+300)}}}},[y,o==null?void 0:o.id,r==null?void 0:r.id,O]);const Q=c.useCallback(()=>

10{if(!x.current)return!1;const t=x.current,s=window.getComputedStyle(t),i=parseFloat(s.paddingBottom)||0,n=Math.max(E?150:50,i*.8);return t.scrollHeight-t.scrollTop-t.clientHeight<=n},[]),C=c.useCallback((t=!1,s=!1)=>{if(!x.current)return;const i=!!window.Capacitor,e=x.current;if(!s&&!Q())return;const n=window.getComputedStyle(e);parseFloat(n.paddingBottom);const d=e.scrollHeight-e.clientHeight+0;t?(e.scrollTop=d,i&&requestAnimationFrame(()=>{e.scrollTop=d})):e.scrollTo({top:d,behavior:i?"auto":"smooth"})},[Q]);c.useEffect(()=>{if((k&&!B||T&&!D)&&!z.current&&S.messages.size>0){const s=()=>{x.current,C(!0,!0),z.current=!0};s(),requestAnimationFrame(s),setTimeout(s,100)}},[k,B,T,D,S.messages.size]);const he=async()=>{if(!q.trim()||W||!(o!=null&&o.id))return;const t=q.trim();ne(""),oe(!0);const s=`temp-${Date.now()}-${Math.random()}`;b.current.add(s);const i={clientId:ie(),id:s,tempId:s,_tempId:s,content:t,sentAt:new Date().toISOString(),senderId:r.id,senderName:r.name||"Onbekend",senderProfileImage:r.profileImage||"",senderProfileImageOriginal:r.profileImageOriginal||null,senderProfileImageZoom:r.profileImageZoom||null,senderProfileImageX:r.profileImageX||null,senderProfileImageY:r.profileImageY||null,isOptimistic:!0,status:"pending",type:"TEXT",_source:"optimistic",_timestamp:Date.now()};N(e=>{const n=new Map(e.messages),l=[...e.messageOrder];n.set(s,i),l.push(s);const d=_(l,n);return{...e,messages:n,messageOrder:d}}),setTimeout(()=>C(!1,!0),50);try{const e=new Date().toISOString(),n=`${r==null?void 0:r.id}-${Date.now()}-${Math.random().toString(36).substring(7)}`;await is("POST",`/api/organization/chat-groups/${o.id}/messages`,{content:t,type:"TEXT",sentAt:e,clientId:n}),N(l=>{const d=new Map(l.messages),f=d.get(s);if(f){const m={...f,status:"sent",isOptimistic:!1};d.set(s,m),b.current.delete(s)}return{...l,messages:d}})}catch(e){console.error("Failed to send message:",e),N(n=>{const l=new Map(n.messages),d=l.get(s);return d&&(d.status="failed",d.retryCount=(d.retryCount||0)+1,l.set(s,{...d})),{...n,messages:l}})}finally{oe(!1)}setTimeout(()=>C(!1,!0),100)},xe=c.useCallback((t,s)=>{Array.isArray(t)?(ce(t),me(s||0)):(ce([{url:t}]),me(0)),de(!0)},[]),Ue=c.useMemo(()=>{const t=[];S.messageOrder.forEach(n=>{const l=S.messages.get(n);l&&t.push(l)});const s=[];let i=null,e=[];return t.forEach(n=>{const l=new Date(n.sentAt);l.setHours(0,0,0,0),!i||i.getTime()!==l.getTime()?(e.length>0&&s.push({date:i,messages:e}),i=l,e=[n]):e.push(n)}),e.length>0&&i&&s.push({date:i,messages:e}),s},[S.messages,S.messageOrder]),ze=c.useCallback(t=>{const s=[];let i=[],e=null;return t.forEach((n,l)=>{const d=n.type==="image"||n.type==="IMAGE";d&&n.senderId===e?i.push(n):(i.length>0&&(s.push({type:"imageGroup",images:i.map(f=>({url:f.fileUrl||f.thumbnailUrl,id:f.id})),senderId:i[0].senderId,senderName:i[0].senderName,senderProfileImage:i[0].senderProfileImage,senderProfileImageOriginal:i[0].senderProfileImageOriginal,senderProfileImageZoom:i[0].senderProfileImageZoom,senderProfileImageX:i[0].senderProfileImageX,senderProfileImageY:i[0].senderProfileImageY,sentAt:i[i.length-1].sentAt}),i=[]),d?(i.push(n),e=n.senderId):(s.push(n),e=n.senderId))}),i.length>0&&s.push({type:"imageGroup",images:i.map(n=>({url:n.fileUrl||n.thumbnailUrl,id:n.id})),senderId:i[0].senderId,senderName:i[0].senderName,senderProfileImage:i[0].senderProfileImage,senderProfileImageOriginal:i[0].senderProfileImageOriginal,senderProfileImageZoom:i[0].senderProfileImageZoom,senderProfileImageX:i[0].senderProfileImageX,senderProfileImageY:i[0].senderProfileImageY,sentAt:i[i.length-1].sentAt}),s},[]),Fe=()=>{var t;return(t=o==null?void 0:o.project)!=null&&t.customerName?o.project.customerName.charAt(0).toUpperCase():(o==null?void 0:o.name)==="Brinqs Klantenservice"?"B":null},re=((we=o==null?void 0:o.members)==null?void 0:we.length)===2;return g||D?a.jsx("div",{className:"flex items-center justify-center min-h-screen bg-gray-50",children:a.jsxs("div",{className:"text-center",children:[a.jsx(Ye,{className:"mx-auto h-8 w-8 animate-spin text-[#FF0083]"}),a.jsx("p",{className:"mt-4 text-gray-600",children:"Chat aan het laden..."})]})}):o?a.jsxs("div",{className:"flex flex-col h-screen bg-gradient-to-r from-[#2354C7] to-[#3B82F6] overflow-hidden md:flex md:flex-col",children:[a.jsx("div",{className:"group-chat-header flex-shrink-0 bg-gradient-to-r from-[#2354C7] to-[#3B82F6] text-white shadow-sm md:relative fixed top-0 left-0 right-0 z-40",children:a.jsxs("div",{className:"flex items-center px-4 py-3",style:{paddingTop:"calc(12px + env(safe-area-inset-top, 0px))",paddingBottom:"12px"},children:[a.jsx(Z,{variant:"ghost",size:"sm",className:"mr-3 h-8 w-8 p-0 text-white hover:bg-white/20",onClick:()=>{const s=new URLSearchParams(window.location.search).get("returnTo");

10w(s?decodeURIComponent(s):"/chats")},children:a.jsx(Ze,{className:"h-5 w-5"})}),a.jsx("div",{className:"w-10 h-10 bg-white/30 rounded-full flex items-center justify-center text-white mr-3",children:Fe()||(re?a.jsx(qe,{className:"w-5 h-5"}):a.jsx(We,{className:"w-5 h-5"}))}),a.jsxs("div",{className:"flex-1",children:[a.jsx("h2",{className:"font-semibold text-white",children:re?((Ie=(ye=o.members)==null?void 0:ye.find(t=>t.id!==(r==null?void 0:r.id)))==null?void 0:Ie.name)||"Privégesprek":o.name||"Chat"}),a.jsx("p",{className:"text-xs text-white/80",children:re?"Privégesprek":"Groepsgesprek"})]}),a.jsx(Z,{variant:"ghost",size:"sm",className:"h-8 w-8 p-0 text-white hover:bg-white/20",onClick:()=>G(!0),children:a.jsx(us,{className:"h-5 w-5"})})]})}),a.jsx("div",{ref:x,className:"flex-1 overflow-y-auto px-4 py-4 min-h-0 bg-[#f8fafc]",style:{paddingTop:E?"calc(80px + env(safe-area-inset-top, 0px))":"calc(64px + env(safe-area-inset-top, 0px))",paddingBottom:window.Capacitor?"140px":E?"100px":"24px"},children:a.jsxs("div",{className:"flex flex-col min-h-full",children:[R&&a.jsx("div",{className:"flex justify-center items-center py-4 mb-4",children:a.jsxs("div",{className:"flex items-center space-x-2 text-gray-500",children:[a.jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900"}),a.jsx("span",{className:"text-sm",children:"Oudere berichten laden..."})]})}),Ue.map(({date:t,messages:s},i)=>{const e=ze(s);return a.jsxs("div",{children:[a.jsx(Is,{date:t}),e.map((n,l)=>{if(n.type==="imageGroup")return a.jsx(ws,{item:n,isCurrentUser:n.senderId===(r==null?void 0:r.id),showAvatar:!0,onImageClick:xe},`group-${i}-${l}`);{const d=n;return a.jsx(ys,{message:d,isCurrentUser:d.senderId===(r==null?void 0:r.id),showAvatar:!0,onImageClick:f=>xe(f)},d.clientId||d.tempId||d.id)}})]},i)}),S.messages.size===0&&!B&&a.jsxs("div",{className:"flex items-center justify-center py-8 text-gray-500",children:[a.jsx(Ae,{className:"h-8 w-8 mr-2"}),a.jsx("span",{children:"Nog geen berichten. Start het gesprek!"})]}),a.jsx("div",{className:"flex-grow min-h-0"}),a.jsx("div",{ref:U})]})}),a.jsx("div",{className:`group-chat-footer flex-shrink-0 bg-white shadow-[0_-8px_24px_rgba(0,0,0,0.08)] p-3 md:p-4 fixed md:relative bottom-0 left-0 right-0 z-50 ${P&&(E||window.Capacitor)?"keyboard-override-padding":""}`,style:{paddingBottom:$e},children:a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsx(ms,{chatType:"group",chatId:o.id,disabled:W,onFileUploaded:async t=>{M.invalidateQueries({queryKey:[`/api/organization/chat-groups/${o.id}/messages`]}),setTimeout(()=>C(!1,!0),100)},optimisticCallbacks:{registerTempIds:t=>{t.forEach(s=>{b.current.add(s),setTimeout(()=>{b.current.has(s)&&(b.current.delete(s),N(i=>{const e=new Map(i.messages),n=i.messageOrder.filter(d=>d!==s);e.has(s)&&e.delete(s);const l=_(n,e);return{...i,messages:e,messageOrder:l}}))},3e4)})},addOptimisticMessage:t=>{const s=t.tempId||`temp-${Date.now()}-${Math.random()}`;b.current.add(s),N(i=>{const e=new Map(i.messages),n=[...i.messageOrder];e.set(s,{...t,id:s,tempId:s,_tempId:s}),n.push(s);const l=_(n,e);return{...i,messages:e,messageOrder:l}}),setTimeout(()=>C(!1,!0),50)},removeOptimisticMessage:t=>{b.current.delete(t),N(s=>{const i=new Map(s.messages),e=[...s.messageOrder];if(i.has(t)){i.delete(t);const l=e.indexOf(t);l!==-1&&e.splice(l,1)}const n=_(e,i);return{...s,messages:i,messageOrder:n}})},updateOptimisticMessage:(t,s)=>{N(i=>{const e=new Map(i.messages),n=[...i.messageOrder],l=e.get(t);if(l){const f={...l,...s};if(s.id&&s.id!==t){const m=String(s.id);e.delete(t),e.set(m,f);const h=n.indexOf(t);h!==-1&&(n[h]=m)}else e.set(t,f)}const d=_(n,e);return{...i,messages:e,messageOrder:d}})}},currentUser:r}),a.jsx("div",{className:"flex-1 relative",children:a.jsx(Ve,{ref:L,type:"text",placeholder:"Type een bericht...",value:q,onChange:t=>ne(t.target.value),onKeyPress:t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),he())},className:"w-full h-10 md:h-12 min-h-[40px] md:min-h-[48px] max-h-[40px] md:max-h-[48px] border-0 bg-gray-100 rounded-full px-4 md:px-5 pr-3 md:pr-4 focus:bg-gray-50 focus:ring-2 focus:ring-blue-500/30 focus:outline-none transition-all duration-200 text-sm md:text-base placeholder:text-gray-500 leading-none flex items-center",disabled:W})}),a.jsx(Z,{onClick:he,disabled:!q.trim()||W,className:"flex-shrink-0 h-10 w-10 md:h-12 md:w-12 rounded-full bg-[#ff0083] hover:bg-[#e6007a] disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed shadow-md hover:shadow-lg transition-all duration-200 p-0 border-0",children:a.jsx(ps,{className:"h-4 w-4 md:h-5 md:w-5 text-white"})})]})}),Le&&a.jsx("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",onClick:()=>G(!1),children:a.jsxs(Qe,{className:"w-full max-w-md",onClick:t=>t.stopPropagation(),children:[a.jsx(Je,{children:a.jsxs("div",{className:"flex justify-between items-start",children:[a.jsx(Ge,{children:"Chat Informatie"}),a.jsx(Z,{variant:"ghost",size:"sm",onClick:()=>G(!1),children:a.jsx(es,{className:"h-4 w-4"})})]})}),a.jsx(ss,{children:o.members&&o.members.length>0&&a.jsxs("div",{children:[a.jsxs("p",{className:"text-sm font-medium text-gray-500 mb-2",children:["Leden (",o.members.length,")"]}),a.jsx("div",{className:"space-y-2",children:o.members.map(t=>{var s;return a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsxs(ts,{className:"h-8 w-8",children:[a.jsx(rs,{src:t.profileImage}),a.jsx(as,{className:"text-xs",children:(s=t.name)==null?void 0:s.charAt(0).toUpperCase()})]}),a.jsx("span",{className:"text-sm",children:t.name})]},t.id)})})]})})]})}),le&&a.jsx(fs,{isOpen:le,images:_e,initialIndex:Be,onClose:()=>de(!1)})]}):a.jsx("div",{className:"flex items-center justify-center min-h-screen bg-gray-50",children:a.jsxs("div",{className:"text-center",children:[a.jsx(Ae,{className:"mx-auto h-12 w-12 text-gray-400"}),a.jsx("h3",{className:"mt-4 text-lg font-medium text-gray-900",children:"Chat niet gevonden"}),a.jsx("p",{className:"mt-2 text-gray-600",children:"De chat die je zoekt bestaat niet."}

10),a.jsx(Z,{className:"mt-4 bg-[#FF0083] hover:bg-[#E6007A]",onClick:()=>w("/chats"),children:"Terug naar chats"})]})})}export{Us as default};