// @bun
import{gql as $}from"@apollo/client";import{useMutation as D,useQuery as U}from"@apollo/client/react";import{useTemplateRuntime as Y}from"@contractspec/lib.example-shared-ui";import{useEffect as X,useRef as h}from"react";import{jsx as B,jsxs as Z}from"react/jsx-runtime";var W=$`
  query Messages($conversationId: ID!) {
    messages(conversationId: $conversationId, limit: 50) {
      id
      content
      senderId
      senderName
      createdAt
      status
    }
  }
`,q=$`
  mutation SetMessagesRead($conversationId: ID!, $userId: String!) {
    setMessagesRead(conversationId: $conversationId, userId: $userId)
  }
`;function R({conversationId:z,viewerId:F="local-user"}){let K=h(null),J=Boolean(z),{data:H,loading:L}=U(W,{variables:{conversationId:z},skip:!J,fetchPolicy:"cache-and-network"}),[O]=D(q),{projectId:P}=Y(),V=H?.messages??[];if(X(()=>{if(!J||!z)return;O({variables:{conversationId:z,userId:F}}).catch(()=>{})},[z,J,O,F]),X(()=>{let k=K.current;if(!k)return;k.scrollTop=k.scrollHeight},[V]),!z)return B("div",{className:"flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",children:B("p",{className:"text-muted-foreground text-sm",children:"Select a conversation"})});return B("div",{className:"flex flex-1 flex-col rounded-2xl border border-border bg-card",children:B("div",{ref:K,className:"flex-1 space-y-3 overflow-y-auto p-4",children:L?B("p",{className:"text-center text-muted-foreground text-sm",children:"Loading\u2026"}):V.slice().reverse().map((k)=>Z("div",{className:`flex flex-col ${k.senderId===F?"items-end":"items-start"}`,children:[B("div",{className:`max-w-xs rounded-2xl px-3 py-2 text-sm ${k.senderId===F?"bg-violet-500 text-white":"bg-muted text-foreground"}`,children:B("p",{children:k.content})}),Z("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))})})}import{gql as G}from"@apollo/client";import{useMutation as N}from"@apollo/client/react";import{useTemplateRuntime as Q}from"@contractspec/lib.example-shared-ui";import{Send as A}from"lucide-react";import{useState as T}from"react";import{jsx as y,jsxs as C}from"react/jsx-runtime";var _=G`
  mutation SendMessage($input: SendMessageInput!) {
    sendMessage(input: $input) {
      id
    }
  }
`;function m({conversationId:z,viewerId:F="local-user",viewerName:K="You"}){let{projectId:J}=Q(),[H,L]=T(""),[O,{loading:P}]=N(_);return C("form",{onSubmit:async(k)=>{if(k.preventDefault(),!z||!H.trim())return;await O({variables:{input:{projectId:J,conversationId:z,senderId:F,senderName:K,content:H.trim()}},refetchQueries:[{query:W,variables:{conversationId:z}}]}),L("")},className:"mt-3 flex items-center gap-2 rounded-2xl border border-border bg-card px-4 py-3",children:[y("input",{type:"text",className:"flex-1 bg-transparent text-foreground text-sm outline-none",placeholder:z?"Type a message\u2026":"Select a conversation to start",disabled:!z||P,value:H,onChange:(k)=>L(k.target.value)}),C("button",{type:"submit",className:"btn-primary inline-flex items-center gap-1 text-sm",disabled:!z||P||!H.trim(),children:[y(A,{className:"h-4 w-4"}),"Send"]})]})}export{m as MessageComposer};
