Build Ringnity inbox, presence, and calls inside a CRM workspace

# Pilot install from a local source package
npm install ./ringnity-agent-sdk

# or, after public package publishing
npm install @ringnity/agent-sdk

import { RingnityAgent } from '@ringnity/agent-sdk';

async function fetchAgentSdkToken() {
  const response = await fetch('/ringnity/agent-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    body: JSON.stringify({
      userId: currentCrmUser.id,
      username: currentCrmUser.ringnityUsername,
    }),
  });

  if (!response.ok) {
    throw new Error('Ringnity Agent SDK token request failed');
  }

  const payload = await response.json();
  return payload.data ?? payload;
}

const agent = await RingnityAgent.create({
  tokenProvider: fetchAgentSdkToken,
  onError: (error) => {
    console.warn(error.code, error.message);
  },
});

const me = await agent.profile.get();
const presence = await agent.presence.get();
updatePresenceBadge(presence.status);

const inbox = await agent.conversations.list({
  status: 'open',
  limit: 20,
});

for (const conversation of inbox.conversations) {
  renderInboxRow({
    id: conversation.conversationId,
    number: conversation.conversationNumber,
    subject: conversation.subject,
    priority: conversation.priority,
    assignedAgentId: conversation.assignedAgentId,
    lastMessageAt: conversation.lastMessageAt,
  });
}

if (inbox.nextCursor) {
  const nextPage = await agent.conversations.list({
    status: 'open',
    cursor: inbox.nextCursor,
  });
}

const conversationId = selectedConversationId;

const thread = await agent.conversations.messages(conversationId, {
  limit: 50,
});

renderThread(thread.messages);

await agent.conversations.reply(conversationId, {
  body: 'Hi, how can I help?',
});

await agent.conversations.reply(conversationId, {
  body: 'Customer asked about billing.',
  messageType: 'internal_note',
});

const lastMessage = thread.messages.at(-1);
if (lastMessage) {
  await agent.conversations.markRead(conversationId, lastMessage.messageId);
}

await agent.connect();

const offConversation = agent.on('conversation.updated', (conversation) => {
  updateInboxRow(conversation);
});

const offMessage = agent.on('chat.message.created', (message) => {
  appendMessage(message);
});

const offError = agent.on('error', (error) => {
  showWorkspaceError(error.code, error.message);
});

await agent.conversations.subscribe(selectedConversationId);

// When the CRM page or tab closes:
offConversation();
offMessage();
offError();
agent.disconnect();

await agent.calls.goOnline({
  accepts: 'voice',
});

// For video-capable queues:
await agent.calls.goOnline({
  accepts: 'video',
  video: true,
});

// When the agent takes a break:
await agent.calls.goOffline();

agent.calls.onIncomingCall((call) => {
  showIncomingCallPopup({
    customerName: call.customer.name ?? 'Customer',
    type: call.type,
    onAccept: async () => {
      await call.accept({
        video: call.type === 'video',
        view: {
          local: document.querySelector('#agent-video'),
          remote: document.querySelector('#customer-video'),
        },
      });
      showActiveCallPanel(call);
    },
    onReject: () => call.reject('Agent declined'),
  });
});

document.querySelector('#mute').onclick = () => call.mute();
document.querySelector('#unmute').onclick = () => call.unmute();
document.querySelector('#hold').onclick = () => call.hold();
document.querySelector('#resume').onclick = () => call.resume();
document.querySelector('#transfer').onclick = () =>
  call.transfer({ departmentId: selectedDepartmentId });
document.querySelector('#end').onclick = () => call.end();

call.attachView({
  local: document.querySelector('#agent-video'),
  remote: document.querySelector('#customer-video'),
});

document.querySelector('#accept').onclick = () =>
  call.accept({ video: call.type === 'video' });

const { group } = await agent.team.groups.create({
  title: 'Customer Success',
  inviteeAgentIds: ['agent-2', 'agent-3'],
  clientRequestId: crypto.randomUUID(),
});

// In agent-2's authenticated session:
const invitation = (await invitedAgent.team.groups.invitations())[0];
await invitedAgent.team.groups.acceptInvitation(invitation.invitationId);

const capabilities = await agent.team.calls.capabilities();
const call = await agent.team.calls.createRoom({
  sourceConversationId: group.conversationId,
  initialMedia: capabilities.videoEnabled ? 'video' : 'voice',
  audienceScope: 'selected_members',
  inviteeAgentIds: ['agent-2'],
  clientRequestId: crypto.randomUUID(),
});

const media = await agent.team.calls.joinRoom(call.callRoomId, {
  microphoneEnabled: true,
  cameraEnabled: true,
  deviceSessionId,
});
media.attachVideo(call.participants[0].callRoomParticipantId, videoElement);

// Events are hints. Recover active and joinable rooms after startup/reconnect.
const visibleRooms = await agent.team.calls.listRooms();

// Promote an answered direct call to 3+ participants without provider choice.
const upgraded = await agent.team.calls.createRoom({
  sourceConversationId: activeCall.conversationId,
  initialMedia: activeCall.callChannel,
  audienceScope: 'selected_members',
  inviteeAgentIds: ['agent-3'],
  upgradeFromCallSessionId: activeCall.id,
  clientRequestId: crypto.randomUUID(),
});

// Leave only yourself; hosts use endRoom() to end for everyone.
await agent.team.calls.leaveRoom(call.callRoomId);

import { RingnityAgent } from '@ringnity/agent-sdk';

async function fetchAgentSdkToken() {
  const response = await fetch('/ringnity/agent-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    body: JSON.stringify({
      userId: currentCrmUser.id,
      username: currentCrmUser.ringnityUsername,
    }),
  });
  const payload = await response.json();
  return payload.data ?? payload;
}

const agent = await RingnityAgent.create({
  tokenProvider: fetchAgentSdkToken,
});

await agent.connect();

agent.on('chat.message.created', (message) => {
  appendMessage(message);
});

agent.on('conversation.updated', (conversation) => {
  updateInboxRow(conversation);
});

const inbox = await agent.conversations.list({
  status: 'open',
  limit: 20,
});

renderInbox(inbox.conversations);

async function openConversation(conversationId) {
  const thread = await agent.conversations.messages(conversationId);
  renderThread(thread.messages);
  await agent.conversations.subscribe(conversationId);
}

async function sendReply(conversationId, body) {
  await agent.conversations.reply(conversationId, { body });
}

await agent.calls.goOnline();

agent.calls.onIncomingCall((call) => {
  showIncomingCallPopup({
    customerName: call.customer.name ?? 'Customer',
    onAccept: async () => {
      await call.accept({
        video: call.type === 'video',
        view: {
          local: document.querySelector('#agent-video'),
          remote: document.querySelector('#customer-video'),
        },
      });
      showActiveCallPanel(call);
    },
    onReject: () => call.reject('Agent declined'),
  });
});

window.addEventListener('beforeunload', () => {
  agent.disconnect();
});