@camelai/agent-runtime-react 0.0.0 → 0.10.0

package/dist/ui/tool.js

@@ -0,0 +1,127 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId, useState } from "react";
+import { useAgent, useToolRendererFor } from "../index.js";
+import { useUI } from "./context.js";
+/** A tool's name without its source's prefix (`shop__get_price` is `get_price`). */
+const localName = (name) => name.includes("__") ? name.slice(name.lastIndexOf("__") + 2) : name;
+const clip = (text, max = 4000) => text.length > max ? `${text.slice(0, max)}…` : text;
+const pretty = (value) => { try {
+    return JSON.stringify(value, null, 2);
+}
+catch {
+    return String(value);
+} };
+/** A tool call: its renderer (generative UI) if it has one, what it waits on, or the default card. */
+export const ToolView = memo(function ToolView({ part }) {
+    const ui = useUI();
+    const chat = useAgent();
+    const exact = useToolRendererFor(part.name, ui.tools);
+    const local = useToolRendererFor(localName(part.name), ui.tools);
+    const Renderer = exact ?? local;
+    if (Renderer) {
+        const answer = (value) => part.input ? chat.answer(part.input, value) : Promise.reject(new Error(`${part.name} is not waiting for an answer`));
+        return _jsx(Renderer, { part: part, name: part.name, args: part.args, state: part.state, result: part.result, progress: part.progress, input: part.input, answer: answer });
+    }
+    if (part.input)
+        return _jsx(ui.components.InputCard, { input: part.input });
+    return _jsx(ui.components.ToolFallback, { part: part });
+});
+/** The default card for a tool call: what it was called with, its progress, and its result. */
+export function ToolCard({ part }) {
+    const { labels } = useUI();
+    const name = localName(part.name);
+    const label = part.state === "done" ? labels.toolDone(name) : part.state === "error" ? labels.toolFailed(name) : part.state === "input_required" ? labels.toolWaiting(name) : labels.toolRunning(name);
+    const code = typeof part.args.code === "string" ? part.args.code : null;
+    const progress = part.progress;
+    return (_jsxs("details", { className: "agent-chat__tool", "data-state": part.state, children: [_jsxs("summary", { children: [_jsx("span", { className: "agent-chat__tool-icon", "aria-hidden": "true" }), _jsx("span", { className: "agent-chat__tool-label", children: label }), progress?.message && _jsx("span", { className: "agent-chat__tool-progress-text", children: progress.message })] }), _jsxs("div", { className: "agent-chat__tool-body", children: [progress?.total ? _jsx("progress", { max: progress.total, value: progress.progress ?? 0, "aria-label": label }) : null, _jsxs("div", { className: "agent-chat__tool-section", children: [_jsx("div", { className: "agent-chat__tool-heading", children: labels.arguments }), _jsx("pre", { children: _jsx("code", { children: code ?? pretty(part.args) }) })] }), progress?.text && part.state !== "done" && _jsx("pre", { className: "agent-chat__tool-output", children: _jsx("code", { children: clip(progress.text) }) }), part.result && (_jsxs("div", { className: "agent-chat__tool-section", children: [_jsx("div", { className: "agent-chat__tool-heading", children: labels.result }), _jsx("pre", { children: _jsx("code", { children: clip(part.result.data !== undefined && typeof part.result.data === "object" ? pretty(part.result.data) : part.result.text) }) })] }))] })] }));
+}
+/** What the agent waits on: an approval, questions, a form, or a page to visit. */
+export const InputCard = memo(function InputCard({ input }) {
+    const chat = useAgent();
+    const { labels } = useUI();
+    const busy = input.answering;
+    const answer = (value) => { void chat.answer(input, value); };
+    const body = (() => {
+        switch (input.kind) {
+            case "approval": {
+                // The call's arguments, or where they are long, the start of their JSON.
+                const shown = input.detail.argumentsPreview ?? (input.detail.arguments ? JSON.stringify(input.detail.arguments, null, 2) : undefined);
+                return (_jsxs(_Fragment, { children: [_jsx("p", { className: "agent-chat__input-message", children: input.message }), shown && _jsx("pre", { children: _jsx("code", { children: clip(shown, 2000) }) }), _jsxs("div", { className: "agent-chat__input-actions", children: [_jsx("button", { type: "button", className: "agent-chat__button agent-chat__button--primary", disabled: busy, onClick: () => answer(true), children: labels.approve }), _jsx("button", { type: "button", className: "agent-chat__button", disabled: busy, onClick: () => answer(false), children: labels.deny })] })] }));
+            }
+            case "question": return _jsx(Questions, { input: input, questions: (input.detail.questions ?? []), onAnswer: answer });
+            case "form": return _jsx(Form, { input: input, onAnswer: answer });
+            case "url": {
+                const detail = input.detail;
+                return (_jsxs(_Fragment, { children: [_jsx("p", { className: "agent-chat__input-message", children: input.message }), _jsxs("div", { className: "agent-chat__input-actions", children: [detail.url && /^https:\/\//.test(detail.url) && _jsxs("a", { className: "agent-chat__button agent-chat__button--primary", href: detail.url, target: "_blank", rel: "noopener noreferrer", children: [labels.open, detail.origin ? ` ${detail.origin}` : ""] }), _jsx("button", { type: "button", className: "agent-chat__button", disabled: busy, onClick: () => answer(true), children: labels.done }), _jsx("button", { type: "button", className: "agent-chat__button", disabled: busy, onClick: () => answer(false), children: labels.cancel })] })] }));
+            }
+            default: return _jsx("p", { className: "agent-chat__input-message", children: input.message });
+        }
+    })();
+    return (_jsxs("div", { className: "agent-chat__input", "data-kind": input.kind, "aria-busy": busy || undefined, children: [body, input.error && _jsx("p", { className: "agent-chat__input-error", role: "alert", children: input.error.message })] }));
+});
+function Questions({ input, questions, onAnswer }) {
+    const { labels } = useUI();
+    const id = useId();
+    const [chosen, setChosen] = useState({});
+    const [other, setOther] = useState({});
+    const valueOf = (question) => {
+        const own = other[question.question]?.trim();
+        const picked = (chosen[question.question] ?? []).filter(label => label !== OTHER);
+        if (question.multiSelect)
+            return [...picked, ...own && chosen[question.question]?.includes(OTHER) ? [own] : []];
+        if (chosen[question.question]?.[0] === OTHER || !question.options?.length)
+            return own || undefined;
+        return picked[0];
+    };
+    const complete = questions.every(question => { const value = valueOf(question); return Array.isArray(value) ? value.length > 0 : !!value; });
+    const submit = (event) => {
+        event.preventDefault();
+        if (!complete)
+            return;
+        onAnswer(Object.fromEntries(questions.map(question => [question.question, valueOf(question)])));
+    };
+    const pick = (question, label, checked) => setChosen(current => {
+        const now = current[question.question] ?? [];
+        return { ...current, [question.question]: question.multiSelect ? checked ? [...now, label] : now.filter(item => item !== label) : [label] };
+    });
+    return (_jsxs("form", { onSubmit: submit, className: "agent-chat__questions", children: [questions.map((question, index) => {
+                const name = `${id}-${index}`;
+                const options = question.options ?? [];
+                const otherChosen = chosen[question.question]?.includes(OTHER) || !options.length;
+                return (_jsxs("fieldset", { disabled: input.answering, children: [_jsx("legend", { children: question.header ? _jsxs(_Fragment, { children: [_jsx("span", { className: "agent-chat__question-header", children: question.header }), " ", question.question] }) : question.question }), options.map(option => (_jsxs("label", { className: "agent-chat__option", children: [_jsx("input", { type: question.multiSelect ? "checkbox" : "radio", name: name, value: option.label, checked: chosen[question.question]?.includes(option.label) ?? false, onChange: event => pick(question, option.label, event.currentTarget.checked) }), _jsxs("span", { children: [option.label, option.description && _jsx("span", { className: "agent-chat__option-description", children: option.description })] })] }, option.label))), question.allowOther !== false && options.length > 0 && (_jsxs("label", { className: "agent-chat__option", children: [_jsx("input", { type: question.multiSelect ? "checkbox" : "radio", name: name, value: OTHER, checked: chosen[question.question]?.includes(OTHER) ?? false, onChange: event => pick(question, OTHER, event.currentTarget.checked) }), _jsx("span", { children: labels.other })] })), otherChosen && (question.allowOther !== false || !options.length) && (_jsx("input", { type: "text", className: "agent-chat__text-input", "aria-label": options.length ? `${labels.other}: ${question.question}` : question.question, value: other[question.question] ?? "", onChange: event => { const value = event.currentTarget.value; setOther(current => ({ ...current, [question.question]: value })); } }))] }, question.question));
+            }), _jsx("div", { className: "agent-chat__input-actions", children: _jsx("button", { type: "submit", className: "agent-chat__button agent-chat__button--primary", disabled: !complete || input.answering, children: labels.submit }) })] }));
+}
+const OTHER = "\u0000other";
+function Form({ input, onAnswer }) {
+    const { labels } = useUI();
+    const id = useId();
+    const schema = (input.detail.requestedSchema ?? {});
+    const fields = Object.entries(schema.properties ?? {});
+    const [values, setValues] = useState(() => Object.fromEntries(fields.flatMap(([name, field]) => field.default !== undefined ? [[name, field.default]] : field.type === "boolean" ? [[name, false]] : [])));
+    const set = (name, value) => setValues(current => ({ ...current, [name]: value }));
+    const submit = (event) => {
+        event.preventDefault();
+        const out = {};
+        for (const [name, field] of fields) {
+            const value = values[name];
+            if (value === undefined || value === "")
+                continue;
+            out[name] = field.type === "number" || field.type === "integer" ? Number(value) : value;
+        }
+        onAnswer(out);
+    };
+    return (_jsxs("form", { onSubmit: submit, className: "agent-chat__form", children: [_jsx("p", { className: "agent-chat__input-message", children: input.message }), _jsx("fieldset", { disabled: input.answering, children: fields.map(([name, field]) => {
+                    const fieldId = `${id}-${name}`;
+                    const required = schema.required?.includes(name);
+                    const title = field.title ?? name;
+                    const described = field.description ? `${fieldId}-description` : undefined;
+                    let control;
+                    if (field.type === "boolean")
+                        control = _jsx("input", { id: fieldId, type: "checkbox", checked: !!values[name], onChange: event => set(name, event.currentTarget.checked), "aria-describedby": described });
+                    else if (field.enum)
+                        control = (_jsxs("select", { id: fieldId, required: required, value: String(values[name] ?? ""), onChange: event => set(name, event.currentTarget.value), "aria-describedby": described, children: [_jsx("option", { value: "", disabled: true, children: "\u2014" }), field.enum.map(option => _jsx("option", { value: String(option), children: String(option) }, String(option)))] }));
+                    else
+                        control = _jsx("input", { id: fieldId, className: "agent-chat__text-input", required: required, "aria-describedby": described, type: field.type === "number" || field.type === "integer" ? "number" : field.format === "email" ? "email" : field.format === "uri" ? "url" : field.format === "date" ? "date" : "text", step: field.type === "integer" ? 1 : undefined, value: String(values[name] ?? ""), onChange: event => set(name, event.currentTarget.value) });
+                    return (_jsxs("div", { className: "agent-chat__field", children: [_jsxs("label", { htmlFor: fieldId, children: [title, required ? " *" : ""] }), control, field.description && _jsx("span", { id: described, className: "agent-chat__field-description", children: field.description })] }, name));
+                }) }), _jsxs("div", { className: "agent-chat__input-actions", children: [_jsx("button", { type: "submit", className: "agent-chat__button agent-chat__button--primary", disabled: input.answering, children: labels.submit }), _jsx("button", { type: "button", className: "agent-chat__button", disabled: input.answering, onClick: () => onAnswer({ action: "decline" }), children: labels.skip })] })] }));
+}

package/package.json

@@ -1 +1,48 @@
-{ "name": "@camelai/agent-runtime-react", "version": "0.0.0", "description": "Placeholder: the first real release (0.10.0) is coming from github.com/qaml-ai/agent-runtime.", "license": "MIT", "publishConfig": { "access": "public" } }
+{
+  "name": "@camelai/agent-runtime-react",
+  "version": "0.10.0",
+  "description": "React hooks and components for chatting with agents on the camelAI agent runtime.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qaml-ai/agent-runtime.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://agents.camelai.dev",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "default": "./dist/ui/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./shadcn.css": "./dist/shadcn.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/ui/styles.css src/ui/shadcn.css dist/",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@camelai/agent-runtime": "0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  }
+}