// @bun
import{gql as O}from"@apollo/client";import{useMutation as X,useQuery as Z}from"@apollo/client/react";import{useTemplateRuntime as $}from"@contractspec/lib.example-shared-ui";import{useEffect as L,useRef as h}from"react";import{jsx as z,jsxs as N}from"react/jsx-runtime";var y=O`
  query Messages($conversationId: ID!) {
    messages(conversationId: $conversationId, limit: 50) {
      id
      content
      senderId
      senderName
      createdAt
      status
    }
  }
`,D=O`
  mutation SetMessagesRead($conversationId: ID!, $userId: String!) {
    setMessagesRead(conversationId: $conversationId, userId: $userId)
  }
`;function A({conversationId:B,viewerId:C="local-user"}){let H=h(null),F=Boolean(B),{data:P,loading:V}=Z(y,{variables:{conversationId:B},skip:!F,fetchPolicy:"cache-and-network"}),[J]=X(D),{projectId:W}=$(),K=P?.messages??[];if(L(()=>{if(!F||!B)return;J({variables:{conversationId:B,userId:C}}).catch(()=>{})},[B,F,J,C]),L(()=>{let k=H.current;if(!k)return;k.scrollTop=k.scrollHeight},[K]),!B)return z("div",{className:"flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",children:z("p",{className:"text-muted-foreground text-sm",children:"Select a conversation"})});return z("div",{className:"flex flex-1 flex-col rounded-2xl border border-border bg-card",children:z("div",{ref:H,className:"flex-1 space-y-3 overflow-y-auto p-4",children:V?z("p",{className:"text-center text-muted-foreground text-sm",children:"Loading\u2026"}):K.slice().reverse().map((k)=>N("div",{className:`flex flex-col ${k.senderId===C?"items-end":"items-start"}`,children:[z("div",{className:`max-w-xs rounded-2xl px-3 py-2 text-sm ${k.senderId===C?"bg-violet-500 text-white":"bg-muted text-foreground"}`,children:z("p",{children:k.content})}),N("span",{className:"mt-1 text-muted-foreground text-xs",children:[k.senderName||k.senderId," \xB7"," ",new Date(k.createdAt).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})]})]},k.id))})})}export{A as MessageThread,y as MESSAGES_QUERY};
