React

npm install @akapulu/react

import { AkapuluProvider, useAkapuluSession } from "@akapulu/react";

function ConversationState() {
  const { status, start, end, transcripts, currentNode } = useAkapuluSession();

  return (
    <div>
      <div>Status: {status}</div>
      <div>Current node: {currentNode?.label ?? "none"}</div>
      <button onClick={() => void start()}>Start</button>
      <button onClick={() => void end()}>End</button>
      <div>{transcripts.length} transcript rows</div>
    </div>
  );
}

export function App() {
  return (
    <AkapuluProvider
      config={{
        endpoints: {
          connectPath: "/api/akapulu/connect",
          updatesPath: "/api/akapulu/updates",
        },
      }}
    >
      <ConversationState />
    </AkapuluProvider>
  );
}

type AkapuluProviderProps = {
  config: AkapuluConfig;
  children: ReactNode;
}

type MaybeAsyncValue<T> = T | (() => T | Promise<T | undefined> | undefined);

interface AkapuluConfig {
  endpoints: {
    connectPath: string;
    updatesPath: string;
  };
  connectBody?: MaybeAsyncValue<Record<string, unknown>>;
  headers?: MaybeAsyncValue<Record<string, string>>;
  updatesPollIntervalMs?: number;
  transport?: AkapuluTransport;
}

const {
  status,
  start,
  end,
  error,
  callIsReady,
  conversationSessionId,
  completionPercent,
  latestUpdateText,
  currentNode,
  transcripts,
  botSpeakingState,
} = useAkapuluSession();

import { useConnectChime } from "@akapulu/react";

useConnectChime();

type AkapuluParticipantRoleOptions = {
  akapuluBotUserId?: string;
};

type AkapuluParticipantRoles = {
  akapuluBotParticipantId: string;
  userParticipantIds: string[];
  remoteParticipantIds: string[];
};

import { useAkapuluParticipantRoles } from "@akapulu/react";
import { DailyVideo } from "@daily-co/daily-react";

function AssistantVideo() {
  const { akapuluBotParticipantId } = useAkapuluParticipantRoles();
  if (!akapuluBotParticipantId) return null;
  return <DailyVideo sessionId={akapuluBotParticipantId} type="video" />;
}

import { useAkapuluParticipantRoles } from "@akapulu/react";
import { DailyVideo, useDaily } from "@daily-co/daily-react";

function VideoLayout() {
  const { akapuluBotParticipantId } = useAkapuluParticipantRoles();
  const daily = useDaily();
  const localParticipantId = daily?.participants().local?.session_id ?? "";

  return (
    <>

      // bot participant
      {akapuluBotParticipantId ? (
        <DailyVideo sessionId={akapuluBotParticipantId} type="video" />
      ) : null}

      // local participant
      {localParticipantId ? (
        <DailyVideo sessionId={localParticipantId} type="video" automirror />
      ) : null}
    </>
  );
}

type AkapuluMediaControls = {
  isMicMuted: boolean;
  isCamOff: boolean;
  canControlMedia: boolean;
  setMicMuted: (muted: boolean) => void;
  setCamOff: (off: boolean) => void;
  toggleMic: () => void;
  toggleCam: () => void;
}

type SessionStatus =
  | "idle"
  | "connecting"
  | "connected"
  | "disconnecting"
  | "ended"
  | "error";

type BotSpeakingState = "idle" | "speaking" | "listening";