@superxd-studio/adptr 0.5.0

package/examples/web-interactions/src/examples.tsx

@@ -0,0 +1,628 @@
+import { ScenarioPicker } from "@superxd-studio/adptr/ui";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { MessageMarkdown } from "@superxd-studio/adptr/web";
+import * as UI from "@superxd-studio/adptr/ui";
+import * as AI from "@superxd-studio/adptr/interactions";
+import { layerCopy as copy } from "./copy";
+
+function useOwner<T extends { dispose: () => void }>(make: () => T) {
+  const [owner] = useState(make);
+  const lease = useRef(0);
+  useEffect(() => {
+    const state = lease;
+    const current = ++state.current;
+    return () => {
+      queueMicrotask(() => {
+        if (state.current === current) owner.dispose();
+      });
+    };
+  }, [owner]);
+  return owner;
+}
+export function Foundation({ id, mode = "ready" }: { id: string; mode?: string }) {
+  const [value, setValue] = useState("notes"),
+    [checked, setChecked] = useState(false),
+    [number, setNumber] = useState(1),
+    [open, setOpen] = useState(false),
+    [saved, setSaved] = useState(false),
+    [queue] = useState(UI.createNotificationQueue);
+  const disabled = mode === "disabled",
+    error = mode === "invalid" ? copy.error : undefined;
+  let node: ReactNode;
+  switch (id) {
+    case "checkbox":
+      node = (
+        <UI.Checkbox
+          label={copy.consent}
+          description={copy.consentHint}
+          isSelected={checked}
+          onChange={setChecked}
+          isIndeterminate={mode === "mixed"}
+          isDisabled={disabled}
+        />
+      );
+      break;
+    case "checkbox-group":
+      node = (
+        <UI.CheckboxGroup
+          label={copy.priority}
+          options={copy.choices}
+          isDisabled={disabled}
+          error={error}
+        />
+      );
+      break;
+    case "radio-group":
+      node = (
+        <UI.RadioGroup
+          label={copy.priority}
+          options={copy.choices}
+          value={value}
+          onChange={setValue}
+          isDisabled={disabled}
+          error={error}
+        />
+      );
+      break;
+    case "select":
+      node = (
+        <UI.Select
+          label={copy.priority}
+          options={mode === "empty" ? [] : copy.choices}
+          selectedKey={mode === "invalid" ? null : value}
+          onSelectionChange={(key) => setValue(String(key))}
+          isDisabled={disabled}
+          error={error}
+        />
+      );
+      break;
+    case "slider":
+      node = (
+        <UI.Slider
+          label={copy.amount}
+          value={number}
+          minValue={1}
+          maxValue={10}
+          onChange={(v) => setNumber(v as number)}
+          isDisabled={disabled}
+        />
+      );
+      break;
+    case "toggle":
+      node = (
+        <UI.Toggle isSelected={checked} onChange={setChecked} isDisabled={disabled}>
+          {copy.bold}
+        </UI.Toggle>
+      );
+      break;
+    case "form":
+      node = (
+        <UI.Form
+          onSubmit={(event) => {
+            event.preventDefault();
+            setSaved(true);
+          }}
+          validationErrors={mode === "invalid" ? { project: copy.required } : undefined}
+        >
+          <UI.TextField name="project" label={copy.name} isRequired isDisabled={disabled} />
+          <UI.Button type="submit" isDisabled={disabled}>
+            {copy.submit}
+          </UI.Button>
+          <p role="status" className="type-body">
+            {saved ? copy.saved : ""}
+          </p>
+        </UI.Form>
+      );
+      break;
+    case "menu":
+      node = (
+        <>
+          <UI.Menu
+            label={copy.actions}
+            isDisabled={disabled}
+            items={[
+              { id: "open", label: copy.open },
+              { id: "duplicate", label: copy.duplicate },
+              { id: "remove", label: copy.remove, isDisabled: true, isDestructive: true },
+            ]}
+            onAction={setValue}
+          />
+          <p role="status" className="mt-4 type-body">
+            {value !== "notes" ? `${copy.selected}: ${value}` : ""}
+          </p>
+        </>
+      );
+      break;
+    case "accordion":
+      node = (
+        <UI.Accordion
+          label={copy.details}
+          allowsMultipleExpanded
+          items={[
+            { id: "scope", title: copy.scope, content: copy.scopeText },
+            { id: "owner", title: copy.owner, content: copy.ownerText, isDisabled: disabled },
+          ]}
+        />
+      );
+      break;
+    case "tabs":
+      node = (
+        <UI.Tabs
+          label={copy.tabLabel}
+          items={[
+            { id: "overview", label: copy.overview, content: copy.scopeText },
+            {
+              id: "activity",
+              label: copy.activity,
+              content: copy.activityText,
+              isDisabled: disabled,
+            },
+          ]}
+        />
+      );
+      break;
+    case "tooltip":
+      node = (
+        <UI.Tooltip content={copy.helpText} delay={0}>
+          <UI.Button isDisabled={disabled}>{copy.help}</UI.Button>
+        </UI.Tooltip>
+      );
+      break;
+    case "dialog":
+      node = (
+        <UI.ModalDialog
+          title={copy.dialogTitle}
+          isOpen={open}
+          onOpenChange={setOpen}
+          trigger={<UI.Button isDisabled={disabled}>{copy.open}</UI.Button>}
+        >
+          <p className="type-body">{copy.dialogText}</p>
+          <UI.TextField className="mt-4" label={copy.name} />
+        </UI.ModalDialog>
+      );
+      break;
+    case "pagination":
+      node = (
+        <UI.Pagination
+          label={copy.page}
+          total={3}
+          page={number}
+          onChange={setNumber}
+          isDisabled={disabled}
+        />
+      );
+      break;
+    case "breadcrumbs":
+      node = <UI.Breadcrumbs label={copy.page} items={copy.crumbs} />;
+      break;
+    case "card":
+      node = (
+        <UI.Card>
+          <h3 className="type-heading text-fg-emphasis">{copy.cardTitle}</h3>
+          <p className="mt-4 type-body">{copy.cardText}</p>
+        </UI.Card>
+      );
+      break;
+    case "badge":
+      node = (
+        <div className="flex flex-wrap gap-3">
+          {(["neutral", "info", "success", "attention", "error"] as const).map((tone) => (
+            <UI.Badge key={tone} tone={tone}>
+              {copy.badgeText}
+            </UI.Badge>
+          ))}
+        </div>
+      );
+      break;
+    case "progress":
+      node = (
+        <UI.Progress label={copy.progressLabel} value={60} isIndeterminate={mode === "loading"} />
+      );
+      break;
+    case "separator":
+      node = (
+        <div className="flex flex-col gap-4 type-body">
+          <p>{copy.scopeText}</p>
+          <UI.Separator />
+          <p>{copy.ownerText}</p>
+        </div>
+      );
+      break;
+    case "aspect-ratio":
+      node = (
+        <UI.AspectRatio>
+          <div className="flex h-full items-center justify-center bg-surface-subtle type-body">
+            {copy.image}
+          </div>
+        </UI.AspectRatio>
+      );
+      break;
+    case "keyboard-hint":
+      node = (
+        <p className="type-body">
+          {copy.keyLabel} <UI.KeyboardHint>⌘ K</UI.KeyboardHint>
+        </p>
+      );
+      break;
+    case "table":
+      node = (
+        <UI.DataTable
+          label={copy.tableLabel}
+          columns={copy.columns}
+          rows={mode === "empty" ? [] : copy.rows}
+          selectionMode={mode === "selection" ? "multiple" : "none"}
+        />
+      );
+      break;
+    case "toast":
+      node = (
+        <>
+          <UI.Button onPress={() => queue.add(copy.notification)}>{copy.notify}</UI.Button>
+          <UI.ToastRegion queue={queue} />
+        </>
+      );
+      break;
+  }
+  return <div className="mx-auto w-full max-w-xl min-w-0">{node}</div>;
+}
+export function Presentation({ id }: { id: string }) {
+  const [value, setValue] = useState("balanced"),
+    [context, setContext] = useState<string[]>([]),
+    [chosen, setChosen] = useState("");
+  let node: ReactNode;
+  switch (id) {
+    case "reasoning":
+      node = <AI.Reasoning text={copy.explanation} />;
+      break;
+    case "tool-presentation":
+      node = (
+        <AI.ToolCall
+          title={copy.toolTitle}
+          status="completed"
+          input={copy.input}
+          output={copy.output}
+        />
+      );
+      break;
+    case "sources":
+      node = <AI.Sources sources={copy.sources} />;
+      break;
+    case "citation":
+      node = (
+        <p className="type-body">
+          {copy.sources[0].claim} <AI.Citation source={copy.sources[0]} index={1} />
+        </p>
+      );
+      break;
+    case "retrieval-inspection":
+      node = (
+        <AI.RetrievalInspection
+          documents={copy.sources.map((source, index) => ({ ...source, included: index === 0 }))}
+        />
+      );
+      break;
+    case "confidence":
+      node = <AI.Confidence claim={copy.claim} explanation={copy.confidenceText} />;
+      break;
+    case "guardrail":
+      node = (
+        <AI.Guardrail reason={copy.blocked} alternatives={copy.alternatives} onChoose={setChosen} />
+      );
+      break;
+    case "agent-status":
+      node = (
+        <AI.AgentStatus label={copy.toolTitle} status={AI.interactionCopy.agentStates.ready} />
+      );
+      break;
+    case "connection-status":
+      node = (
+        <AI.ConnectionStatus
+          state={chosen ? "connected" : "disconnected"}
+          onReconnect={() => setChosen("connected")}
+        />
+      );
+      break;
+    case "composer-controls":
+      node = (
+        <AI.ComposerTools
+          models={copy.modelChoices}
+          model={value}
+          onModelChange={setValue}
+          contexts={copy.choices}
+          selectedContext={context}
+          onContextChange={setContext}
+          commands={copy.commands}
+          onCommand={setChosen}
+        />
+      );
+      break;
+    case "quoted-reply":
+      node = <AI.QuotedExcerpt quote={copy.quote} onReply={() => setChosen(copy.quoteUsed)} />;
+      break;
+    case "execution-inspector":
+      node = (
+        <AI.ExecutionInspector
+          code={copy.code}
+          files={copy.files}
+          output={copy.output}
+          tests={copy.checks}
+        />
+      );
+      break;
+    case "observability":
+      node = <AI.Observability measurements={copy.measurements} />;
+      break;
+  }
+  return (
+    <div className="mx-auto w-full max-w-2xl min-w-0">
+      {node}
+      {chosen && (
+        <p role="status" className="mt-4 type-body">
+          {chosen}
+        </p>
+      )}
+    </div>
+  );
+}
+const wait = () => new Promise<void>((resolve) => setTimeout(resolve, 150));
+function AgentScenario({ lost = false }: { lost?: boolean }) {
+  const owner = useOwner(() => {
+    const receipts = new Map<string, AI.AgentResult>();
+    return new AI.AgentController(
+      {
+        async execute(request, _signal, progress) {
+          const prior = receipts.get(request.requestId);
+          if (prior) return prior;
+          progress(copy.working);
+          await wait();
+          const result = {
+            requestId: request.requestId,
+            status: "completed" as const,
+            output: copy.stepDone,
+          };
+          receipts.set(request.requestId, result);
+          if (lost && receipts.size === 1) throw new Error("Reply lost");
+          return result;
+        },
+        async lookup(id) {
+          await wait();
+          return receipts.get(id) ?? { requestId: id, status: "not-found" };
+        },
+      },
+      copy.steps,
+    );
+  });
+  return <AI.AgentSupervision controller={owner} />;
+}
+function ArtifactScenario({ mode = "ready" }: { mode?: string }) {
+  const owner = useOwner(() => {
+    let record: AI.ArtifactRecord = {
+      id: "brief",
+      title: copy.artifactTitle,
+      revision: "v1",
+      content: copy.artifactContent,
+      canEdit: mode !== "read-only",
+      history: [],
+    };
+    let first = true;
+    const receipts = new Map<string, AI.ArtifactResult>();
+    return new AI.ArtifactController({
+      async load() {
+        await wait();
+        return record;
+      },
+      async save(request) {
+        const prior = receipts.get(request.requestId);
+        if (prior) return prior;
+        await wait();
+        if (mode === "conflict" && first) {
+          first = false;
+          record = {
+            ...record,
+            revision: "v2",
+            content: copy.draftChange,
+            history: [{ revision: "v1", content: record.content }],
+          };
+        }
+        let result: AI.ArtifactResult;
+        if (request.baseRevision !== record.revision)
+          result = { requestId: request.requestId, status: "conflict", record };
+        else {
+          record = {
+            ...record,
+            revision: `v${record.history.length + 2}`,
+            content: request.content,
+            history: [...record.history, { revision: record.revision, content: record.content }],
+          };
+          result = { requestId: request.requestId, status: "saved", record };
+        }
+        receipts.set(request.requestId, result);
+        if (mode === "lost" && first) {
+          first = false;
+          throw new Error("Reply lost");
+        }
+        return result;
+      },
+      async lookup(id) {
+        await wait();
+        return receipts.get(id) ?? { requestId: id, status: "not-found" };
+      },
+    });
+  });
+  return (
+    <>
+      <UI.Button className="mb-4" onPress={() => owner.open("brief")}>
+        {copy.artifactOpen}
+      </UI.Button>
+      <AI.ArtifactWorkspace controller={owner} />
+    </>
+  );
+}
+function FeedbackScenario({ fails = false }: { fails?: boolean }) {
+  const owner = useOwner(() => {
+    let first = true;
+    return new AI.FeedbackController(
+      {
+        async save(request) {
+          await wait();
+          if (fails && first) {
+            first = false;
+            throw new Error("Storage unavailable");
+          }
+          return { requestId: request.requestId, responseId: request.responseId };
+        },
+      },
+      copy.responseId,
+    );
+  });
+  return (
+    <div className="mx-auto w-full max-w-xl">
+      <p className="mb-6 type-body">{copy.response}</p>
+      <AI.ResponseFeedback controller={owner} />
+    </div>
+  );
+}
+function HistoryScenario({ fails = false }: { fails?: boolean }) {
+  const owner = useOwner(() => {
+    const records = copy.threadTitles.map((title, index) => ({
+      id: `thread-${index}`,
+      title,
+      archived: false,
+      payload: {
+        messages: [{ role: "assistant", text: copy.threadText[index] ?? "" }],
+        branches: [],
+        attachments: [],
+      },
+    }));
+    const findRecord = (id: string) => {
+      const record = records.find((item) => item.id === id);
+      if (!record) throw new Error("Unknown local conversation");
+      return record;
+    };
+    let first = true;
+    return new AI.ThreadController({
+      async list() {
+        await wait();
+        if (fails && first) {
+          first = false;
+          throw new Error("Storage unavailable");
+        }
+        return records.map(({ id, title, archived }) => ({ id, title, archived }));
+      },
+      async load(id) {
+        await wait();
+        return findRecord(id);
+      },
+      async rename(id, title) {
+        await wait();
+        const record = findRecord(id);
+        record.title = title as typeof record.title;
+        return { id, title, archived: record.archived };
+      },
+      async archive(id, archived) {
+        await wait();
+        const record = findRecord(id);
+        record.archived = archived;
+        return { id, title: record.title, archived };
+      },
+    });
+  });
+  return (
+    <div className="mx-auto w-full max-w-2xl">
+      <AI.ConversationHistory
+        controller={owner}
+        renderThread={(thread) => (
+          <UI.Card aria-label={copy.threadView}>
+            <h3 className="type-heading">{thread.title}</h3>
+            <div className="mt-4 flex flex-col gap-4">
+              {typeof thread.payload === "object" &&
+              thread.payload !== null &&
+              !Array.isArray(thread.payload) &&
+              Array.isArray(thread.payload.messages)
+                ? thread.payload.messages.map((message, index) =>
+                    typeof message === "object" &&
+                    message !== null &&
+                    !Array.isArray(message) &&
+                    typeof message.text === "string" ? (
+                      <MessageMarkdown key={index} text={message.text} />
+                    ) : null,
+                  )
+                : null}
+            </div>
+          </UI.Card>
+        )}
+      />
+    </div>
+  );
+}
+export function AgentExample({ lost = false }: { lost?: boolean }) {
+  const [scenario, setScenario] = useState(lost ? "lost" : "ready");
+  return (
+    <div className="flex flex-col gap-6">
+      <ScenarioPicker
+        label={copy.scenario}
+        value={scenario}
+        onChange={setScenario}
+        options={[
+          { id: "ready", label: copy.ready, description: copy.descriptions.agent },
+          { id: "lost", label: copy.lost, description: copy.lostDescription },
+        ]}
+      />
+      <AgentScenario key={scenario} lost={scenario === "lost"} />
+    </div>
+  );
+}
+export function ArtifactExample({ mode = "ready" }: { mode?: string }) {
+  const [scenario, setScenario] = useState(mode);
+  return (
+    <div className="flex flex-col gap-6">
+      <ScenarioPicker
+        label={copy.scenario}
+        value={scenario}
+        onChange={setScenario}
+        options={[
+          { id: "ready", label: copy.ready, description: copy.descriptions.artifact },
+          { id: "conflict", label: copy.conflict, description: copy.conflictDescription },
+          { id: "lost", label: copy.lost, description: copy.lostDescription },
+          { id: "read-only", label: copy.readOnly, description: copy.readOnlyDescription },
+        ]}
+      />
+      <ArtifactScenario key={scenario} mode={scenario} />
+    </div>
+  );
+}
+export function FeedbackExample({ fails = false }: { fails?: boolean }) {
+  const [scenario, setScenario] = useState(fails ? "failed" : "ready");
+  return (
+    <div className="flex flex-col gap-6">
+      <ScenarioPicker
+        label={copy.scenario}
+        value={scenario}
+        onChange={setScenario}
+        options={[
+          { id: "ready", label: copy.ready, description: copy.descriptions.feedback },
+          { id: "failed", label: copy.failed, description: copy.failedDescription },
+        ]}
+      />
+      <FeedbackScenario key={scenario} fails={scenario === "failed"} />
+    </div>
+  );
+}
+
+export function HistoryExample() {
+  const [scenario, setScenario] = useState("ready");
+  return (
+    <div className="flex flex-col gap-6">
+      <ScenarioPicker
+        label={copy.scenario}
+        value={scenario}
+        onChange={setScenario}
+        options={[
+          { id: "ready", label: copy.ready, description: copy.descriptions.history },
+          { id: "failed", label: copy.failed, description: copy.failedDescription },
+        ]}
+      />
+      <HistoryScenario key={scenario} fails={scenario === "failed"} />
+    </div>
+  );
+}