203cb5d5e5
- DESIGN_TOKENS.md: Complete rewrite to document --sumi-* token system - APP_SHELL.md: Update layout shell docs (glass bg, backdrop-blur, z-index) - DESIGN_DIRECTION.md: Update aesthetic direction to SUMI philosophy - .storybook/preview.tsx: Remove deleted CSS imports, update bg colors - eslint.config.js: Update color rule message from Kodo to SUMI tokens - tailwind.config.ts: Fix comment referencing deleted design-tokens.css Co-authored-by: Cursor <cursoragent@cursor.com>
2 lines
32 KiB
JavaScript
2 lines
32 KiB
JavaScript
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/vendor-CAoAb3tF.js","assets/vendor-react-Dkpvlwai.js","assets/vendor-BD_zwJK7.css"])))=>i.map(i=>d[i]);
|
|
import{a as n,j as e}from"./vendor-react-Dkpvlwai.js";import{g as ee,D as ue,E as W,B as _,p as te,a as M,d as y,u as A,l as O,L as se,_ as re,h as me,i as H,C as q}from"./index-jE2AGx2y.js";import{u as ae,a as ne,b as V}from"./vendor-tanstack-BoI3DtL9.js";import{L as J,I as oe}from"./input-CpxrTzwP.js";import{S as he}from"./Select-Zbef75Fw.js";import{u as T}from"./chatStore-Dpim9vVR.js";import{D as F,ab as fe,L as xe,ac as pe,ad as ge,m as be,T as ye,ae as ve,af as Q,a1 as je,j as we,S as ie,X as $,ag as B,ah as Ne,ai as Ce,aj as Se,ak as ke,a as G}from"./vendor-icons-CbmLcMl-.js";import{D as _e,a as Ee,b as Re,c as Z,u as De}from"./useIsRateLimited-V6u_TMsM.js";import{C as X}from"./confirmation-dialog-oRC6nIEK.js";import{A as le}from"./avatar-DSgu46M3.js";import{F as ze,T as ce,G as Te}from"./vendor-CAoAb3tF.js";import"./vendor-router-4bycex72.js";import"./vendor-utils-CDFfoeXY.js";import"./dropdown-WuZUrg5z.js";function Le({open:t,onClose:l}){const[a,o]=n.useState(""),[m,c]=n.useState("public"),[d,s]=n.useState(!1),[i,u]=n.useState(null),[p,x]=n.useState(null),[r,v]=n.useState(0),g=n.useRef(null),w=ee(),{addConversation:E,setCurrentConversation:R}=T(),D=async()=>{if(u(null),x(null),!a.trim()){u("Room name is required");return}const N=a.trim(),f=m,j=async()=>{const k=await M.post("/conversations",{name:N,type:f}),C={id:k.data.id||k.data.conversation?.id,name:k.data.name||k.data.conversation?.name,type:k.data.type||k.data.conversation?.type||f,participants:k.data.participants||[],unread_count:0};E(C),R(C.id),w.success("Room created successfully"),o(""),c("public"),x(null),v(0),g.current=null,l()};g.current=j,s(!0);try{await j()}catch(k){const C=te(k);x(new Error(C.message))}finally{s(!1)}},P=async()=>{if(!(!g.current||r>=3)){v(N=>N+1),s(!0);try{await g.current()}catch{}finally{s(!1)}}};return e.jsx(ue,{open:t,onClose:l,title:"Create New Room",variant:"default",size:"md",children:e.jsxs("div",{className:"space-y-4",children:[p&&e.jsx(W,{error:p,variant:"banner",severity:"error",context:{action:"creating room",resource:"conversation"},onRetry:r<3?P:void 0,onDismiss:()=>{x(null),v(0),g.current=null}}),i&&e.jsx(W,{error:i,variant:"inline",severity:"error",size:"sm",dismissible:!1}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(J,{htmlFor:"room-name",children:"Room Name"}),e.jsx(oe,{id:"room-name",value:a,onChange:N=>{o(N.target.value),u(null)},placeholder:"Enter room name",maxLength:100})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(J,{htmlFor:"room-type",children:"Room Type"}),e.jsx(he,{options:[{value:"public",label:"Public"},{value:"private",label:"Private"}],value:m,onChange:N=>c(Array.isArray(N)?N[0]:N),name:"room-type"})]}),e.jsxs("div",{className:"flex justify-end gap-2 pt-4",children:[e.jsx(_,{variant:"outline",onClick:l,disabled:d,children:"Cancel"}),e.jsx(_,{onClick:D,disabled:d||!a.trim(),children:d?"Creating...":"Create Room"})]})]})})}function Me(t,l,a){const{data:o,isLoading:m,error:c}=ae({queryKey:["chatConversations",t],queryFn:async()=>{if(!t)return[];const s=(await M.get("/conversations")).data,i=Array.isArray(s)?s:s?.conversations??[];return Array.isArray(i)?i:[]},enabled:!!t});return n.useEffect(()=>{o&&o.forEach(d=>{a.some(s=>s.id===d.id)||l({id:d.id,name:d.name,type:d.type??"direct",participants:Array.isArray(d.participants)?d.participants:[],unread_count:0})})},[o,a,l]),{data:o??[],isLoading:m,error:c}}function Pe({count:t,className:l}){return e.jsx("div",{className:y("p-4 border-b border-white/5 bg-white/2 backdrop-blur-sm",l),children:e.jsxs("div",{className:"flex items-center justify-between mb-1",children:[e.jsxs("h2",{className:"text-sm font-bold text-foreground tracking-wide uppercase flex items-center gap-2",children:[e.jsx(F,{className:"w-4 h-4 text-muted-foreground"}),"Active Channels"]}),e.jsx("span",{className:"text-xs font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded",children:t})]})})}function Ae({className:t}){return e.jsxs("div",{className:y("flex flex-col items-center gap-3 text-sm p-6 text-center border border-dashed border-border rounded-xl m-2 animate-empty-state-in",t),children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-muted flex items-center justify-center",children:e.jsx(fe,{className:"w-5 h-5 text-muted-foreground"})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-foreground font-medium text-sm",children:"No conversations yet"}),e.jsx("p",{className:"text-muted-foreground text-xs mt-1",children:"Start a new conversation to get going."})]})]})}function Ie({className:t}){return e.jsx("div",{className:y("flex flex-1 items-center justify-center min-h-layout-story",t),"data-testid":"chat-sidebar-skeleton",children:e.jsx(xe,{className:"animate-spin text-muted-foreground",size:24})})}function Oe(t,l){const a=ne(),o=ee(),m=T(s=>s.setCurrentConversation),c=V({mutationFn:async s=>{await M.delete(`/conversations/${s}/participants/${t}`)},onMutate:async s=>{await a.cancelQueries({queryKey:["chatConversations",t]});const i=a.getQueryData(["chatConversations",t]);return i&&Array.isArray(i)&&a.setQueryData(["chatConversations",t],i.filter(u=>u.id!==s)),{previous:i}},onError:(s,i,u)=>{u?.previous&&a.setQueryData(["chatConversations",t],u.previous);const p=s?.response?.data?.error??"Failed to leave room";l?.onLeaveError?.(new Error(p))},onSuccess:()=>{a.invalidateQueries({queryKey:["chatConversations",t]}),o.success("Left room successfully"),m(null),l?.onLeaveSuccess?.()}}),d=V({mutationFn:async s=>{await M.delete(`/conversations/${s}`)},onMutate:async s=>{await a.cancelQueries({queryKey:["chatConversations",t]});const i=a.getQueryData(["chatConversations",t]);return i&&Array.isArray(i)&&a.setQueryData(["chatConversations",t],i.filter(u=>u.id!==s)),{previous:i}},onError:(s,i,u)=>{u?.previous&&a.setQueryData(["chatConversations",t],u.previous);const p=s?.response?.data?.error??"Failed to delete room";l?.onDeleteError?.(new Error(p))},onSuccess:()=>{a.invalidateQueries({queryKey:["chatConversations",t]}),o.success("Room deleted successfully"),m(null),l?.onDeleteSuccess?.()}});return{leaveRoomMutation:c,deleteRoomMutation:d}}function Y(t){if(t==null)return"";if(typeof t=="string")return t;try{return String(t)}catch{return"Invalid Value"}}function qe({conversation:t,onSelect:l,isSelected:a}){const{data:o}=A(),[m,c]=n.useState(!1),[d,s]=n.useState(!1),[i,u]=n.useState(null),[p,x]=n.useState(0),[r,v]=n.useState(null),[g,w]=n.useState(null),{leaveRoomMutation:E,deleteRoomMutation:R}=Oe(o?.id,{onLeaveError:u,onDeleteError:u,onLeaveSuccess:()=>{c(!1),u(null)},onDeleteSuccess:()=>{s(!1),u(null)}}),D=()=>{v("leave"),w(t.id),E.mutate(t.id)},P=()=>{v("delete"),w(t.id),R.mutate(t.id)},N=()=>{!r||!g||p>=3||(x(f=>f+1),r==="leave"?E.mutate(g):R.mutate(g))};return e.jsxs(e.Fragment,{children:[i&&e.jsx(W,{error:i,variant:"banner",severity:"error",context:{action:"managing room",resource:"conversation",resourceId:t.id},onRetry:p<3?N:void 0,onDismiss:()=>{u(null),x(0),v(null),w(null)}}),e.jsxs("div",{role:"button",tabIndex:0,onClick:()=>l(t.id),onKeyDown:f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),l(t.id))},className:y("group relative flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-[var(--sumi-duration-normal)] border border-transparent","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",a?"bg-primary/10 border-primary/30 shadow-queue-item-current":"hover:bg-muted/50 hover:border-muted"),children:[e.jsxs("div",{className:"flex items-center gap-4 min-w-0",children:[t.type==="direct"?e.jsx(le,{fallback:t.name||"U",size:"sm",status:"online"}):e.jsx("div",{className:y("w-8 h-8 rounded-lg flex items-center justify-center transition-colors shrink-0",a?"bg-primary text-foreground":"bg-white/5 text-muted-foreground group-hover:text-foreground"),children:e.jsx(pe,{size:14})}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx("span",{className:y("text-sm font-medium truncate transition-colors",a?"text-foreground":"text-muted-foreground group-hover:text-foreground"),children:Y(t.name||`Channel ${t.id.substring(0,4)}`)}),t.type!=="direct"&&e.jsx("span",{className:"text-xs text-muted-foreground/50 uppercase tracking-wider",children:Y(t.type)})]})]}),t.unread_count!=null&&Number(t.unread_count)>0?e.jsx("span",{className:"bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full font-bold shadow-lg shrink-0",children:t.unread_count}):null,e.jsxs(_e,{children:[e.jsx(Ee,{asChild:!0,onClick:f=>f.stopPropagation(),children:e.jsx(_,{variant:"ghost",size:"sm",className:y("h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity shrink-0",a?"text-primary hover:bg-primary/20":"text-muted-foreground hover:text-foreground"),children:e.jsx(ge,{className:"h-4 w-4"})})}),e.jsxs(Re,{align:"end",className:"bg-card border-border text-foreground",children:[e.jsxs(Z,{onClick:f=>{f.stopPropagation(),c(!0)},className:"focus:bg-white/10 cursor-pointer",children:[e.jsx(be,{className:"mr-2 h-4 w-4"}),"Leave Channel"]}),t.type!=="direct"&&e.jsxs(Z,{onClick:f=>{f.stopPropagation(),s(!0)},className:"text-destructive focus:bg-destructive/10 cursor-pointer",children:[e.jsx(ye,{className:"mr-2 h-4 w-4"}),"Delete Channel"]})]})]}),a&&e.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-0.5 bg-primary rounded-r-full shadow-status-dot-cyan"})]}),e.jsx(X,{open:m,onClose:()=>c(!1),onConfirm:D,title:"Leave Channel",description:"Disconnect from this secure frequency? Incoming transmission will cease.",confirmLabel:"Disconnect",cancelLabel:"Cancel",variant:"default",isLoading:E.isPending}),e.jsx(X,{open:d,onClose:()=>s(!1),onConfirm:P,title:"Delete Channel",description:"Permanently purge this channel from the network? This action is irreversible.",confirmLabel:"Purge",cancelLabel:"Cancel",variant:"destructive",isLoading:R.isPending})]})}const We=()=>{const{data:t}=A(),l=t?.id,a=ne(),{conversations:o,currentConversationId:m,setCurrentConversation:c,addConversation:d}=T(),{isLoading:s,error:i}=Me(l,d,o),[u,p]=n.useState(!1);return s?e.jsx(Ie,{}):i?e.jsx("div",{className:"flex flex-1 items-center justify-center p-4 min-h-layout-page-sm",children:e.jsx(W,{error:i instanceof Error?i:new Error("Signal Lost"),variant:"card",severity:"error",context:{action:"fetching conversations",resource:"conversations"},onRetry:()=>a.invalidateQueries({queryKey:["chatConversations",l]})})}):e.jsxs("div",{className:y("flex flex-col h-full"),children:[e.jsx(Pe,{count:o.length}),e.jsx("div",{className:"flex-1 overflow-y-auto custom-scrollbar p-4 space-y-1",children:o.length===0?e.jsx(Ae,{}):o.map(x=>e.jsx(qe,{conversation:{id:x.id,name:x.name,type:x.type,unread_count:x.unread_count},onSelect:r=>c(r),isSelected:x.id===m},x.id))}),e.jsx("div",{className:"p-4 border-t border-white/5 bg-white/2 backdrop-blur-sm",children:e.jsxs(_,{onClick:()=>p(!0),className:"w-full shadow-lg shadow-sm",variant:"default",children:[e.jsx(ve,{className:"mr-2 h-4 w-4"}),"New Channel"]})}),e.jsx(Le,{open:u,onClose:()=>p(!1)})]})},K=()=>{const{data:t}=A(),l=t?.id,{wsToken:a,wsUrl:o,wsStatus:m,setWsStatus:c,addMessage:d,currentConversationId:s,loadMessages:i,addReaction:u,removeReaction:p,setUserTyping:x}=T(),r=n.useRef(null),v=n.useRef(0),[g,w]=n.useState([]),E=n.useCallback(()=>{if(!a||!o||r.current?.readyState===WebSocket.OPEN)return;r.current&&(r.current.onopen=null,r.current.onmessage=null,r.current.onclose=null,r.current.onerror=null,(r.current.readyState===WebSocket.OPEN||r.current.readyState===WebSocket.CONNECTING)&&r.current.close()),c("connecting");const b=`${o}?token=${a}`;r.current=new WebSocket(b);const S=()=>{c("connected"),v.current=0,w(L=>(L.forEach(z=>r.current?.send(JSON.stringify(z))),[]))},I=L=>{const z=JSON.parse(L.data);if(z.type==="NewMessage"){const h=z;h.conversation_id===s&&h.message_id&&h.sender_id&&h.content&&h.created_at&&d({id:h.message_id,conversation_id:h.conversation_id,sender_id:h.sender_id,sender_username:h.sender_username||"Unknown",content:h.content,created_at:h.created_at,attachments:h.attachments})}else if(z.type==="ReactionAdded"){const h=z;h.message_id&&h.user_id&&h.emoji&&u(h.conversation_id,h.message_id,h.user_id,h.emoji)}else if(z.type==="ReactionRemoved"){const h=z;h.message_id&&h.user_id&&p(h.conversation_id,h.message_id,h.user_id)}else if(z.type==="UserTyping"){const h=z;h.user_id&&x(h.conversation_id,h.user_id,h.is_typing??!1)}},U=()=>{c("disconnected")},de=L=>{c("error"),v.current+=1,v.current<=3&&O.error("WebSocket error",{error:L instanceof Error?L.message:String(L),stack:L instanceof Error?L.stack:void 0})};r.current.onopen=S,r.current.onmessage=I,r.current.onclose=U,r.current.onerror=de},[a,o,c,d,s,u,p,x]),R=n.useCallback(()=>{r.current&&(r.current.onopen=null,r.current.onmessage=null,r.current.onclose=null,r.current.onerror=null,(r.current.readyState===WebSocket.OPEN||r.current.readyState===WebSocket.CONNECTING)&&r.current.close(),r.current=null,c("disconnected"))},[c]),D=n.useRef(0),P=5;n.useEffect(()=>{let b;return a&&o&&m==="disconnected"&&D.current<P&&(b=setTimeout(()=>{D.current++,E()},1e3*Math.pow(2,D.current))),m==="connected"&&(D.current=0),()=>{b&&clearTimeout(b)}},[a,o,m,E]),n.useEffect(()=>()=>{R()},[R]);const N=n.useCallback((b,S)=>{if(!r.current||r.current.readyState!==WebSocket.OPEN||!s||!l){O.warn("WebSocket not open or missing conversation/user ID. Message queued.",{conversationId:s,userId:l}),w(U=>[...U,{type:"SendMessage",conversation_id:s||ze(),content:b,parent_message_id:null,attachments:S}]);return}const I={type:"SendMessage",conversation_id:s,content:b,parent_message_id:null,attachments:S};r.current.send(JSON.stringify(I))},[s,l]),f=n.useCallback(async b=>{try{const S=await M.get(`/conversations/${b}/history`);i(b,S.data.messages)}catch(S){O.error("Failed to fetch chat history",{error:S instanceof Error?S.message:String(S),stack:S instanceof Error?S.stack:void 0,conversationId:b})}},[i]),j=n.useCallback((b,S)=>{r.current?.readyState===WebSocket.OPEN&&s&&r.current.send(JSON.stringify({type:"AddReaction",conversation_id:s,message_id:b,emoji:S}))},[s]),k=n.useCallback(b=>{r.current?.readyState===WebSocket.OPEN&&s&&r.current.send(JSON.stringify({type:"RemoveReaction",conversation_id:s,message_id:b}))},[s]),C=n.useCallback(b=>{r.current?.readyState===WebSocket.OPEN&&s&&r.current.send(JSON.stringify({type:"Typing",conversation_id:s,is_typing:b}))},[s]);return{wsStatus:m,connect:E,disconnect:R,sendMessage:N,fetchHistory:f,addReaction:j,removeReaction:k,setTyping:C}},Ue=n.lazy(()=>re(()=>import("./vendor-CAoAb3tF.js").then(t=>t.Z),__vite__mapDeps([0,1,2])).then(t=>({default:t.default}))),Fe=t=>{if(t==null)return"";if(typeof t=="string")return t;try{return String(t)}catch{return"Invalid Value"}},Qe=({message:t})=>{const{data:l}=A(),{addReaction:a}=K(),o=l?.id===t.sender_id,[m,c]=n.useState(!1),d=s=>{a(t.id,s.emoji),c(!1)};return e.jsxs("div",{className:y("group flex flex-col gap-1 max-w-[80%] mb-4 relative",o?"ml-auto items-end":"mr-auto items-start"),children:[e.jsxs("div",{className:"flex items-center gap-2 px-1 mb-0.5",children:[!o&&e.jsx(le,{fallback:t.sender_username||"U",size:"xs",status:"online"}),e.jsx("span",{className:y("font-mono text-xs uppercase tracking-wider",o?"text-muted-foreground":"text-destructive"),children:o?"You":Fe(t.sender_username||"Unknown_Signal")}),e.jsx("span",{className:"text-xs text-muted-foreground/60",children:new Date(t.created_at).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})})]}),e.jsxs("div",{className:"relative flex items-end gap-2 group/bubble",children:[o&&e.jsx("button",{onClick:()=>c(!m),className:"opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-muted/50 rounded-full transition-all text-muted-foreground hover:text-foreground",children:e.jsx(Q,{size:14})}),e.jsxs("div",{className:y("px-4 py-2.5 rounded-2xl text-sm backdrop-blur-md shadow-lg transition-all",o?"bg-primary/10 border border-primary/20 text-foreground rounded-tr-sm":"bg-muted/30 border border-border text-foreground rounded-tl-sm hover:bg-muted/50"),children:[t.attachments&&t.attachments.length>0&&e.jsx("div",{className:"mb-2 flex flex-wrap gap-2",children:t.attachments.map((s,i)=>e.jsx("div",{className:"max-w-full overflow-hidden rounded-lg border border-white/10 bg-black/20",children:s.file_type.startsWith("image")?e.jsx("img",{src:s.file_url,alt:s.file_name,className:"max-h-60 object-contain cursor-pointer hover:opacity-90 transition-opacity",onClick:()=>window.open(s.file_url,"_blank")}):e.jsxs("a",{href:s.file_url,target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-4 p-4 hover:bg-white/5 transition-colors",children:[e.jsx("div",{className:"w-8 h-8 rounded bg-muted/50 flex items-center justify-center",children:e.jsx(je,{size:16,className:"text-muted-foreground"})}),e.jsx("span",{className:"truncate max-w-[150px] text-xs font-mono",children:s.file_name})]})},i))}),e.jsx("p",{className:"whitespace-pre-wrap break-words leading-relaxed",children:t.content})]}),!o&&e.jsx("button",{onClick:()=>c(!m),className:"opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-muted/50 rounded-full transition-all text-muted-foreground hover:text-foreground",children:e.jsx(Q,{size:14})}),m&&e.jsxs("div",{className:y("absolute z-50 bottom-full mb-2",o?"right-0":"left-0"),children:[e.jsx("div",{className:"fixed inset-0",onClick:()=>c(!1)}),e.jsx("div",{className:"relative shadow-2xl rounded-xl overflow-hidden border border-white/10 animate-scaleIn",children:e.jsx(n.Suspense,{fallback:e.jsx("div",{className:"w-[300px] h-[400px] bg-card flex items-center justify-center",children:e.jsx(se,{size:"sm"})}),children:e.jsx(Ue,{onEmojiClick:d,theme:ce.DARK,lazyLoadEmojis:!0,width:300,height:400})})})]})]}),e.jsxs("div",{className:"flex items-center justify-between w-full px-1 mt-1",children:[e.jsx("div",{className:"flex flex-wrap gap-1",children:t.reactions&&Object.entries(t.reactions).map(([s,i])=>e.jsxs("button",{onClick:()=>a(t.id,s),className:y("flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border transition-all animate-scaleIn",i.includes(l?.id||"")?"bg-primary/20 border-primary/40 text-primary shadow-queue-item-current":"bg-muted/30 border-border text-muted-foreground hover:bg-muted/50 hover:border-border"),children:[e.jsx("span",{children:s}),i.length>1&&e.jsx("span",{className:"font-bold",children:i.length})]},s))}),o&&e.jsx("div",{className:"text-muted-foreground/40 ml-auto",children:e.jsx(we,{size:12})})]})]})};function $e({conversationId:t,onMessageSelect:l}){const[a,o]=n.useState(""),[m,c]=n.useState([]),[d,s]=n.useState(!1),[i,u]=n.useState(!1),p=async()=>{if(!(!a.trim()||!t))try{s(!0),u(!0);const r=await M.get(`/conversations/${t}/messages/search`,{params:{q:a,limit:20}});c(r.data.messages||[])}catch(r){const v=te(r);O.warn("Search endpoint not available or failed",{error:v.message}),c([])}finally{s(!1)}},x=()=>{o(""),c([]),u(!1)};return e.jsxs("div",{className:"relative",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("div",{className:"relative flex-1",children:[e.jsx(ie,{className:"absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"}),e.jsx(oe,{type:"text",value:a,onChange:r=>o(r.target.value),onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),p())},placeholder:"Search messages...",className:"pl-8 pr-8"}),a&&e.jsx(_,{variant:"ghost",size:"sm",className:"absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",onClick:x,children:e.jsx($,{className:"h-4 w-4"})})]}),e.jsx(_,{onClick:p,disabled:!a.trim()||d,size:"sm",children:d?"Searching...":"Search"})]}),i&&m.length>0&&e.jsx("div",{className:"absolute z-10 w-full mt-2 bg-white border rounded-lg shadow-lg max-h-64 overflow-y-auto",children:e.jsxs("div",{className:"p-2",children:[e.jsxs("div",{className:"text-xs text-muted-foreground mb-2",children:[m.length," result(s) found"]}),m.map(r=>e.jsxs("div",{className:"p-2 hover:bg-background rounded cursor-pointer",onClick:()=>{l?.(r.id),u(!1)},children:[e.jsx("div",{className:"text-sm font-medium",children:r.sender_username}),e.jsx("div",{className:"text-xs text-muted-foreground truncate",children:r.content}),e.jsx("div",{className:"text-xs text-muted-foreground",children:new Date(r.created_at).toLocaleString()})]},r.id))]})}),i&&m.length===0&&a&&e.jsx("div",{className:"absolute z-10 w-full mt-2 bg-white border rounded-lg shadow-lg p-4 text-sm text-muted-foreground",children:"No messages found"})]})}function Ke({conversationId:t}){const{typingUsers:l,userId:a}=T(),o=(l[t]||[]).filter(m=>m!==a);return o.length===0?e.jsx("div",{className:"h-6"}):e.jsx("div",{className:"px-4 py-1 text-xs text-muted-foreground italic animate-pulse",children:o.length===1?"Quelqu'un écrit...":`${o.length} personnes écrivent...`})}const He=({conversationId:t})=>{const{messages:l,wsStatus:a}=T(),{fetchHistory:o}=K(),{data:m}=A(),c=m?.id,d=n.useRef(null),[s,i]=n.useState(!1),[u,p]=n.useState(null),x=l[t]||[],r=n.useRef({});n.useEffect(()=>{t&&!l[t]&&!r.current[t]&&(r.current[t]=!0,o(t).finally(()=>{}))},[t,l[t],o]),n.useEffect(()=>{d.current&&d.current.scrollIntoView({behavior:"smooth"})},[x.length,t]);const v=g=>{p(g);const w=document.getElementById(`message-${g}`);w&&(w.scrollIntoView({behavior:"smooth",block:"center"}),setTimeout(()=>p(null),3e3))};return t?e.jsxs("div",{className:"flex-1 flex flex-col h-full overflow-hidden",children:[e.jsx("div",{className:y("absolute top-0 left-0 right-0 z-20 px-4 py-2 transition-all duration-[var(--sumi-duration-normal)]",s?"bg-card/90 backdrop-blur-md border-b border-border":"bg-transparent pointer-events-none"),children:s?e.jsxs("div",{className:"flex items-center gap-2 max-w-2xl mx-auto",children:[e.jsx("div",{className:"flex-1",children:e.jsx($e,{conversationId:t,onMessageSelect:v})}),e.jsx(_,{variant:"ghost",size:"sm",onClick:()=>i(!1),className:"hover:bg-muted/50",children:e.jsx($,{className:"h-4 w-4"})})]}):e.jsx("div",{className:"flex justify-end pointer-events-auto",children:e.jsxs(_,{variant:"ghost",size:"sm",onClick:()=>i(!0),className:"text-muted-foreground/50 hover:text-foreground hover:bg-muted/50 bg-muted/30 backdrop-blur-sm rounded-full h-8 px-4 border border-border",children:[e.jsx(ie,{className:"h-3 w-3 mr-2"}),e.jsx("span",{className:"text-xs font-mono uppercase",children:"Search Log"})]})})}),e.jsxs("div",{className:"flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 scroll-smooth",children:[x.length===0&&e.jsxs("div",{className:"flex flex-col items-center justify-center h-layout-lyrics-sm text-center space-y-4 animate-empty-state-in",children:[e.jsx("div",{className:"w-14 h-14 rounded-full bg-muted flex items-center justify-center",children:e.jsx(F,{className:"w-7 h-7 text-muted-foreground"})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-foreground font-medium",children:"No messages yet"}),e.jsx("p",{className:"text-sm text-muted-foreground mt-1",children:"Send the first message to start the conversation."})]})]}),x.map((g,w)=>(c&&g.sender_id,w>0&&(x[w-1].sender_id,g.sender_id),e.jsx("div",{id:`message-${g.id}`,className:y("transition-all duration-[var(--sumi-duration-slow)] animate-slideUp",u===g.id&&"bg-muted/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-border/30"),children:e.jsx(Qe,{message:g})},g.id))),e.jsx(Ke,{conversationId:t}),e.jsx("div",{ref:d,className:"h-4"})]})]}):e.jsxs("div",{className:"flex-1 flex flex-col items-center justify-center text-muted-foreground space-y-4 animate-empty-state-in",children:[e.jsx("div",{className:"w-24 h-24 rounded-full bg-muted flex items-center justify-center",children:e.jsx(F,{className:"w-10 h-10 text-muted-foreground"})}),e.jsxs("div",{className:"text-center",children:[e.jsx("p",{className:"text-sm font-medium text-foreground mb-1",children:"No conversation selected"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Pick a channel from the sidebar to start chatting."})]})]})},Ve=n.lazy(()=>re(()=>import("./vendor-CAoAb3tF.js").then(t=>t.Z),__vite__mapDeps([0,1,2])).then(t=>({default:t.default}))),Je=()=>{const[t,l]=n.useState(""),[a,o]=n.useState([]),[m,c]=n.useState(!1),[d,s]=n.useState(!1),{sendMessage:i,setTyping:u}=K(),{currentConversationId:p}=T(),x=De(),r=n.useRef(null),v=f=>{f.preventDefault(),(t.trim()||a.length>0)&&p&&(i(t,a.length>0?a:void 0),l(""),o([]),r.current&&clearTimeout(r.current),u(!1))},g=n.useRef(null),w=n.useCallback(async f=>{c(!0);try{const j=f.map(async C=>{const b=new FormData;b.append("file",C);const I=(await M.post("/uploads",b,{headers:{"Content-Type":"multipart/form-data"}})).data;return{file_name:C.name,file_type:C.type,file_url:I.url,file_size:C.size}}),k=await Promise.all(j);o(C=>[...C,...k])}catch(j){O.error("Failed to upload files",{error:j instanceof Error?j.message:String(j)})}finally{c(!1)}},[]),{getRootProps:E,getInputProps:R,isDragActive:D}=Te({onDrop:w,noClick:!0}),P=f=>{l(j=>j+f.emoji),s(!1)},N=f=>{o(j=>j.filter((k,C)=>C!==f))};return n.useEffect(()=>{t.length>0?(u(!0),r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{u(!1)},3e3)):u(!1)},[t,u]),e.jsxs("div",{...E(),className:"relative",children:[e.jsx("input",{...R(),ref:g,className:"hidden"}),D&&e.jsx("div",{className:"absolute bottom-full left-0 right-0 h-48 z-50 bg-muted/10 backdrop-blur-md flex items-center justify-center border-t-2 border-border border-dashed rounded-t-2xl animate-fadeIn",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"w-12 h-12 rounded-full bg-muted/20 flex items-center justify-center mx-auto mb-2 animate-bounce",children:e.jsx(B,{className:"w-6 h-6 text-muted-foreground"})}),e.jsx("p",{className:"text-muted-foreground font-mono uppercase tracking-widest text-sm",children:"Initiate Data Transfer"})]})}),a.length>0&&e.jsx("div",{className:"absolute bottom-full left-0 right-0 p-4 bg-background/90 backdrop-blur-xl border-t border-white/10 flex gap-2 overflow-x-auto",children:a.map((f,j)=>e.jsxs("div",{className:"relative group flex items-center gap-2 p-2 bg-white/5 rounded-lg border border-white/10 text-xs text-foreground min-w-36",children:[f.file_type.startsWith("image")?e.jsx(Ne,{size:14,className:"text-primary"}):e.jsx(Ce,{size:14,className:"text-muted-foreground"}),e.jsx("span",{className:"truncate flex-1",children:f.file_name}),e.jsx("button",{onClick:()=>N(j),className:"p-1 hover:bg-white/10 rounded-full text-destructive opacity-0 group-hover:opacity-100 transition-opacity",children:e.jsx($,{size:12})})]},j))}),e.jsxs("form",{onSubmit:v,className:"flex items-center gap-2",children:[e.jsxs("div",{className:"flex gap-1",children:[e.jsx(_,{type:"button",variant:"ghost",size:"icon",className:"text-muted-foreground hover:text-foreground hover:bg-white/5",onClick:()=>g.current?.click(),children:e.jsx(B,{size:20})}),e.jsxs("div",{className:"relative",children:[e.jsx(_,{type:"button",variant:"ghost",size:"icon",className:y("text-muted-foreground hover:text-foreground hover:bg-white/5",d&&"text-muted-foreground bg-white/5"),onClick:()=>s(!d),children:e.jsx(Q,{size:20})}),d&&e.jsxs("div",{className:"absolute bottom-full left-0 mb-4 z-50 animate-scaleIn origin-bottom-left",children:[e.jsx("div",{className:"fixed inset-0",onClick:()=>s(!1)}),e.jsx("div",{className:"relative shadow-2xl rounded-xl overflow-hidden border border-white/10",children:e.jsx(n.Suspense,{fallback:e.jsx("div",{className:"w-[350px] h-[450px] bg-card flex items-center justify-center",children:e.jsx(se,{})}),children:e.jsx(Ve,{onEmojiClick:P,theme:ce.DARK,lazyLoadEmojis:!0,width:350,height:450})})})]})]})]}),e.jsxs("div",{className:"flex-1 relative",children:[e.jsx("input",{type:"text",value:t,onChange:f=>l(f.target.value),placeholder:"Broadcast message...",className:"w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:border-border/50 focus:ring-1 focus:ring-border/50 transition-all font-mono text-sm",disabled:!p||m}),t.length===0&&!m&&e.jsx(_,{type:"button",variant:"ghost",size:"icon",className:"absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-muted-foreground/30 hover:text-foreground",children:e.jsx(Se,{className:"w-4 h-4"})})]}),e.jsx(_,{type:"submit",variant:"primary",size:"icon",className:y("rounded-xl transition-all duration-[var(--sumi-duration-normal)]",t.trim()||a.length>0?"bg-primary text-foreground hover:bg-primary-dim shadow-neon-cyan":"bg-white/5 text-muted-foreground hover:bg-white/10"),disabled:!p||!t.trim()&&a.length===0||m||x,children:m?e.jsx("div",{className:"w-5 h-5 border-2 border-border/30 border-t-border rounded-full animate-spin"}):e.jsx(ke,{size:18,className:y(t.trim()?"translate-x-0.5":"")})})]})]})},ct=()=>{const{isAuthenticated:t}=me(),{data:l}=A(),a=l?.id,{setWsToken:o,currentConversationId:m,wsStatus:c}=T(),{data:d,isLoading:s,error:i}=ae({queryKey:["chatWsToken",a],queryFn:async()=>!t||!a?null:(await M.post("/chat/token",{})).data,enabled:t&&!!a&&c==="disconnected",refetchOnWindowFocus:!1,retry:!1,staleTime:300*1e3,gcTime:600*1e3});return n.useEffect(()=>{d?.token&&(d.token!==T.getState().wsToken||H.WS_URL!==T.getState().wsUrl)&&o(d.token,H.WS_URL)},[d,o]),t?s||c==="connecting"?e.jsxs("div",{className:"flex flex-col items-center justify-center h-layout-chat",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-2 border-primary/20 border-t-primary rounded-full animate-spin"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:"w-2 h-2 bg-primary rounded-full animate-pulse shadow-status-dot-cyan"})})]}),e.jsx("p",{className:"font-mono text-sm text-primary animate-pulse tracking-widest",children:"ESTABLISHING UPLINK..."})]}):i?e.jsx("div",{className:"flex flex-col items-center justify-center h-layout-chat",children:e.jsxs(q,{variant:"glass",className:"p-8 text-center max-w-md border-destructive/30",children:[e.jsx(G,{className:"w-12 h-12 text-destructive mb-4"}),e.jsx("h2",{className:"text-xl font-bold text-foreground mb-2",children:"Connection Terminated"}),e.jsx("p",{className:"text-destructive/80 mb-4",children:i.message||"Secure handshake failed."}),e.jsx(_,{variant:"outline",onClick:()=>window.location.reload(),children:"Retry Connection"})]})}):e.jsxs("div",{className:"h-layout-chat-main flex gap-6 overflow-hidden p-4 container mx-auto max-w-layout-content",children:[e.jsxs(q,{variant:"glass",className:"w-80 shrink-0 flex flex-col overflow-hidden p-0 border-white/5 bg-black/40 backdrop-blur-2xl",children:[e.jsxs("div",{className:"p-4 border-b border-white/5 flex items-center justify-between",children:[e.jsx("h3",{className:"font-bold text-sm tracking-widest text-muted-foreground uppercase",children:"Channels"}),e.jsx("div",{className:y("w-2 h-2 rounded-full",c==="connected"?"bg-success shadow-status-dot-lime":"bg-destructive")})]}),e.jsx(We,{})]}),e.jsxs(q,{variant:"glass",className:"flex-1 flex flex-col overflow-hidden relative p-0 border-white/5 bg-black/40 backdrop-blur-2xl",children:[e.jsx("div",{className:"absolute inset-0 opacity-[0.03] pointer-events-none",style:{backgroundImage:"linear-gradient(var(--color-primary) 1px, transparent 1px), linear-gradient(90deg, var(--color-primary) 1px, transparent 1px)",backgroundSize:"40px 40px"}}),e.jsx("div",{className:"flex-1 overflow-hidden flex flex-col relative z-10",children:e.jsx(He,{conversationId:m||""})}),e.jsx("div",{className:"p-4 border-t border-white/5 bg-black/40 relative z-20 backdrop-blur-xl",children:e.jsx(Je,{})})]})]}):e.jsx("div",{className:"flex flex-col items-center justify-center h-layout-chat",children:e.jsxs(q,{variant:"glass",className:"p-8 text-center max-w-md border-primary/20",children:[e.jsx(G,{className:"w-12 h-12 text-primary mx-auto mb-4 opacity-50"}),e.jsx("h2",{className:"text-xl font-bold text-foreground mb-2",children:"Access Restricted"}),e.jsx("p",{className:"mb-6 text-muted-foreground",children:"Encrypted channel access requires authorization."}),e.jsx(_,{onClick:()=>window.location.href="/login",children:"Initialize Handshake"})]})})};export{ct as ChatPage};
|