Embed SDK de CallSpace

'use client';

import { useRef, useState, useCallback } from 'react';
import { CallspaceFrame } from '@callspace/embed-sdk/react';
import {
	  CALLSPACE_EMBED_EVENTS,
	  getCallspaceAppOrigin,
  sendCallspaceOpenConversation,
  sendCallspaceStartCall,
  type CallspaceEventEnvelope,
} from '@callspace/embed-sdk/core';

	const APP_ORIGIN = getCallspaceAppOrigin();

export function WorkspacePage() {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [ready, setReady] = useState(false);

  const handleEvent = useCallback((event: CallspaceEventEnvelope) => {
    switch (event.event) {
      case CALLSPACE_EMBED_EVENTS.READY:
        setReady(true);
        break;
      case CALLSPACE_EMBED_EVENTS.CALL_ENDED:
        console.log('Llamada finalizada', event.payload.callSid);
        break;
    }
  }, []);

  function startCall() {
    const win = iframeRef.current?.contentWindow;
    if (!win || !ready) return;
    sendCallspaceStartCall(win, APP_ORIGIN, { phoneNumber: '+34600000000' });
  }

  function openConversation() {
    const win = iframeRef.current?.contentWindow;
    if (!win || !ready) return;
    sendCallspaceOpenConversation(win, APP_ORIGIN, {
      phoneNumber: '+34600000000',
    });
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <button onClick={openConversation} disabled={!ready}>
        Abrir conversacion
      </button>
      <button onClick={startCall} disabled={!ready}>
        Llamar
      </button>
      <CallspaceFrame
        ref={iframeRef}
        iframeId="workspace"
        auth={{ loginUrl: '/login' }}
        onCallspaceEvent={handleEvent}
        style={{ flex: 1, border: 'none' }}
      />
    </div>
  );
}

import { PhoneWidget } from '@callspace/embed-sdk/react';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <PhoneWidget
        placement="bottom-right"
        auth={{ loginUrl: '/login' }}
      />
    </>
  );
}

import {
	CALLSPACE_EMBED_EVENTS,
	addCallspaceEventListener,
	buildCallspaceEmbedUrl,
	getCallspaceAppOrigin,
	sendCallspaceOpenConversation,
	sendCallspaceStartCall,
} from '@callspace/embed-sdk/core';

const iframe = document.querySelector('#callspace-frame');
const callButton = document.querySelector('#start-call');
const appOrigin = getCallspaceAppOrigin();

iframe.src = buildCallspaceEmbedUrl({
	iframeId: 'workspace',
	parentOrigin: window.location.origin,
});

const removeListener = addCallspaceEventListener({
	iframe,
	appOrigin,
	onEvent(event) {
		if (event.event === CALLSPACE_EMBED_EVENTS.READY) {
			console.log('Iframe listo', event.payload);
		}
	},
});

callButton?.addEventListener('click', () => {
	const targetWindow = iframe?.contentWindow;
	if (!targetWindow) return;

	sendCallspaceStartCall(targetWindow, appOrigin, {
		phoneNumber: '+34600000000',
	});
});

document
	.querySelector('#open-conversation')
	?.addEventListener('click', () => {
		const targetWindow = iframe?.contentWindow;
		if (!targetWindow) return;

		sendCallspaceOpenConversation(targetWindow, appOrigin, {
			phoneNumber: '+34600000000',
		});
	});

window.addEventListener('beforeunload', removeListener);