React and UI bindings

npm install mayura react react-dom

import { useEffect, useState } from 'react';
import { createClient } from 'mayura/client';
import { createHeadlessRunStore, type HeadlessRunStore } from 'mayura/client/headless';
import { useMayuraRun, useMayuraRunActivity } from 'mayura/client-react';
import { z } from 'mayura';

const Reply = z.object({ reply: z.string() });
const client = createClient({ baseUrl: `${window.location.origin}/`, token: () => sessionToken() });

function RunView({ store }: { readonly store: HeadlessRunStore }) {
  const state = useMayuraRun(store);
  const activity = useMayuraRunActivity(state);
  return (
    <section>
      <p>{state.connection === 'reconnecting' ? 'Reconnecting…' : state.snapshot?.status ?? state.connection}</p>
      <ul>
        {activity.items.filter(item => item.kind === 'tool').map(item => <li key={item.id}>{item.label}: {item.status}</li>)}
      </ul>
      {state.streamedOutput && <p>{state.streamedOutput.text}</p>}
    </section>
  );
}

export function Ask() {
  const [store, setStore] = useState<HeadlessRunStore | null>(null);
  const [reply, setReply] = useState<string | null>(null);
  useEffect(() => () => store?.dispose(), [store]);

  async function ask(message: string): Promise<void> {
    const run = await client.submit('support.assistant', { message }, { idempotencyKey: crypto.randomUUID() });
    const next = createHeadlessRunStore({ run });
    setStore(next);
    setReply(null);
    // Follows the run to its end, reconnecting by itself if the stream drops; throws on real failures.
    await next.observe();
    const outcome = await run.result(Reply);
    setReply(outcome?.status === 'succeeded' ? outcome.output.reply : 'Something went wrong.');
  }

  return (
    <div>
      <button onClick={() => void ask('Where is my order?').catch(() => setReply('Something went wrong.'))}>Ask</button>
      {store && <RunView store={store} />}
      {reply && <p>{reply}</p>}
    </div>
  );
}

import { useEffect, useState } from 'react';
import type { MayuraClient, RemoteHumanRequest } from 'mayura/client';
import { createHumanResponseController, defineHumanResponseForm, type HumanResponseController } from 'mayura/client/forms';
import { useMayuraHumanResponseCommand } from 'mayura/client-react';
import { MayuraHumanResponseForm } from 'mayura/client-react/components';

const reviewForm = defineHumanResponseForm({
  schemaId: 'refund-review',
  schemaDigest: REFUND_REVIEW_DIGEST, // the same digest as the workflow's human step
  fields: [
    { kind: 'select', name: 'decision', label: 'Decision', required: true, options: [
      { value: 'approve', label: 'Approve' },
      { value: 'reject', label: 'Reject' },
    ] },
    { kind: 'textarea', name: 'note', label: 'Note for the customer', maxLength: 2_000 },
  ],
});

function ReviewForm({ controller, request }: { readonly controller: HumanResponseController; readonly request: RemoteHumanRequest }) {
  const command = useMayuraHumanResponseCommand(controller);
  const [commandId] = useState(() => crypto.randomUUID()); // reuse it only to retry this same answer
  return (
    <MayuraHumanResponseForm
      request={request}
      definition={reviewForm}
      nowMs={Date.now()}
      commandState={command}
      onSubmit={submission => { void controller.submit(submission, { commandId }).catch(() => undefined); }}
    />
  );
}

export function Review({ client, request }: { readonly client: MayuraClient; readonly request: RemoteHumanRequest }) {
  const [controller, setController] = useState<HumanResponseController | null>(null);
  useEffect(() => {
    const next = createHumanResponseController({ client, request });
    setController(next);
    return () => next.dispose();
  }, [client, request]);
  return controller && <ReviewForm key={request.digest} controller={controller} request={request} />;
}

import { useEffect, useState } from 'react';
import type { MayuraClient } from 'mayura/client';
import { createWorkflowCommandController, type WorkflowCommandController, type WorkflowViewInput } from 'mayura/client/workflows';
import { useMayuraWorkflowCommand } from 'mayura/client-react';
import { MayuraWorkflowGraph, MayuraWorkflowPauseControl } from 'mayura/client-react/components';

function Controls({ controller, view, onChange }: {
  readonly controller: WorkflowCommandController; readonly view: WorkflowViewInput; readonly onChange: (view: WorkflowViewInput) => void;
}) {
  const command = useMayuraWorkflowCommand(controller);
  const send = (action: 'pause' | 'resume') => {
    void controller[action]({ commandId: crypto.randomUUID() }).then(onChange, () => undefined);
  };
  return (
    <>
      <MayuraWorkflowGraph input={view} />
      <MayuraWorkflowPauseControl workflow={view} commandState={command} onPause={() => send('pause')} onResume={() => send('resume')} />
    </>
  );
}

export function WorkflowRun({ client, initial }: { readonly client: MayuraClient; readonly initial: WorkflowViewInput }) {
  const [view, setView] = useState(initial);
  const [controller, setController] = useState<WorkflowCommandController | null>(null);
  useEffect(() => {
    // One controller per revision: after a command applies, the new view gets a fresh controller.
    const next = createWorkflowCommandController({ client, workflow: view });
    setController(next);
    return () => next.dispose();
  }, [client, view]);
  return controller && <Controls key={view.revision} controller={controller} view={view} onChange={setView} />;
}

import { createHeadlessRunStore } from 'mayura/client/headless';

const store = createHeadlessRunStore({ run: client.run(runId) });
const unsubscribe = store.subscribe(() => render(store.getSnapshot()));
await store.refresh();
void store.observe();
// When the view goes away:
unsubscribe();
store.dispose();