@bysages/react 0.4.3 → 0.5.0

package/dist/ai-B3vbpXlK.mjs

@@ -0,0 +1,309 @@
+import { r as iconNode } from "./icon-C9udWCyz.mjs";
+import { t as withSelfRoot } from "./family-Co1YsN4N.mjs";
+import { n as useComponentMessages } from "./messages-B6n0lVyt.mjs";
+import { Action } from "./components/ai-action/index.mjs";
+import { AiMessage as Message } from "./components/ai-message/index.mjs";
+import { t as PromptInput } from "./ai-prompt-input-k34KssHJ.mjs";
+import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
+import { t as Response } from "./ai-response-DTxdL5rX.mjs";
+import { AiSource as Source, AiSources as Sources } from "./components/ai-source/index.mjs";
+import { AiSuggestion as Suggestion } from "./components/ai-suggestion/index.mjs";
+import { AiTool as Tool } from "./components/ai-tool/index.mjs";
+import { createConversationFollower } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useCallback, useEffect, useRef, useState } from "react";
+// src/components/ai/parts.tsx
+const mediaKind = (mediaType) => {
+	const family = mediaType.split("/")[0];
+	if (family === "image") return "image";
+	if (family === "audio") return "audio";
+	if (family === "video") return "video";
+	return "file";
+};
+function toolPartDisplay(part) {
+	const name = part.type === "dynamic-tool" ? part.toolName : part.type.slice(5);
+	const approval = (() => {
+		if (part.state === "approval-requested") return "required";
+		if (part.state === "approval-responded") return part.approval.approved ? "approved" : "denied";
+		if (part.state === "output-denied") return "denied";
+	})();
+	return {
+		name,
+		status: (() => {
+			if (part.state === "input-streaming") return "pending";
+			if (part.state === "input-available") return "running";
+			if (part.state === "approval-requested") return "running";
+			if (part.state === "approval-responded") return "running";
+			if (part.state === "output-available") return "completed";
+			if (part.state === "output-error") return "error";
+			return "denied";
+		})(),
+		approval,
+		input: part.input,
+		output: part.state === "output-error" ? part.errorText : part.output
+	};
+}
+const fileLabel = (part) => "filename" in part && part.filename ? part.filename : part.mediaType;
+const fileLink = (part) => /* @__PURE__ */ jsxs("a", {
+	"data-scope": "ai",
+	"data-part": "file-link",
+	href: part.url,
+	target: "_blank",
+	rel: "noreferrer",
+	children: [iconNode("file"), /* @__PURE__ */ jsx("span", { children: fileLabel(part) })]
+});
+const slotContent = (content) => content ?? null;
+const isTextPart = (part) => part.type === "text";
+const isCustomPart = (part) => part.type === "custom";
+const isReasoningPart = (part) => part.type === "reasoning";
+const isReasoningFilePart = (part) => part.type === "reasoning-file";
+const isFilePart = (part) => part.type === "file";
+const isSourceUrlPart = (part) => part.type === "source-url";
+const isSourceDocumentPart = (part) => part.type === "source-document";
+const isToolPart = (part) => part.type === "dynamic-tool" || part.type.startsWith("tool-");
+const isDataPart = (part) => part.type.startsWith("data-");
+const isStepStartPart = (part) => part.type === "step-start";
+const AiMedia = withSelfRoot(function AiMedia(props) {
+	injectComponentStyle("ai");
+	const shown = props.part ?? (props.mediaType && props.url ? {
+		type: "file",
+		mediaType: props.mediaType,
+		url: props.url,
+		...props.filename ? { filename: props.filename } : {}
+	} : null);
+	if (!shown) return null;
+	const kind = mediaKind(shown.mediaType);
+	const label = fileLabel(shown);
+	return /* @__PURE__ */ jsx("figure", {
+		"data-scope": "ai",
+		"data-part": "media",
+		"data-kind": kind,
+		children: kind === "image" ? /* @__PURE__ */ jsx("img", {
+			src: shown.url,
+			alt: props.alt ?? (label === shown.mediaType ? "" : label)
+		}) : kind === "audio" ? /* @__PURE__ */ jsx("audio", {
+			src: shown.url,
+			controls: true
+		}) : kind === "video" ? /* @__PURE__ */ jsx("video", {
+			src: shown.url,
+			controls: true
+		}) : fileLink(shown)
+	});
+});
+const source = (part) => "url" in part ? /* @__PURE__ */ jsx(Sources, { children: /* @__PURE__ */ jsx(Source, {
+	href: part.url,
+	children: part.title ?? part.url
+}) }) : /* @__PURE__ */ jsx(Sources, { children: /* @__PURE__ */ jsxs("li", {
+	"data-scope": "ai",
+	"data-part": "document-source",
+	children: [/* @__PURE__ */ jsx("span", { children: part.title }), /* @__PURE__ */ jsx("span", { children: part.mediaType })]
+}) });
+function AiPartsRenderer(props) {
+	injectComponentStyle("ai");
+	const renderPart = (part, index) => {
+		if (isTextPart(part)) {
+			const custom = slotContent(props.slots?.text?.({
+				part,
+				index
+			}));
+			if (custom) return custom;
+			return part.text ? /* @__PURE__ */ jsx(Response, {
+				content: part.text,
+				highlighter: props.highlighter
+			}) : null;
+		}
+		if (isReasoningPart(part)) {
+			const custom = slotContent(props.slots?.reasoning?.({
+				part,
+				index
+			}));
+			if (custom) return custom;
+			return /* @__PURE__ */ jsx(Reasoning, {
+				defaultOpen: part.state === "streaming",
+				children: part.text
+			});
+		}
+		if (isReasoningFilePart(part)) return slotContent(props.slots?.reasoningFile?.({
+			part,
+			index
+		})) ?? /* @__PURE__ */ jsx(AiMedia, { part });
+		if (isFilePart(part)) return slotContent(props.slots?.file?.({
+			part,
+			index
+		})) ?? /* @__PURE__ */ jsx(AiMedia, { part });
+		if (isSourceUrlPart(part)) return slotContent(props.slots?.sourceUrl?.({
+			part,
+			index
+		})) ?? source(part);
+		if (isSourceDocumentPart(part)) return slotContent(props.slots?.sourceDocument?.({
+			part,
+			index
+		})) ?? source(part);
+		if (isToolPart(part)) {
+			const custom = slotContent(props.slots?.tool?.({
+				part,
+				index
+			}));
+			if (custom) return custom;
+			const display = toolPartDisplay(part);
+			return /* @__PURE__ */ jsx(Tool, {
+				name: display.name,
+				status: display.status,
+				approval: display.approval,
+				inputValue: display.input,
+				outputValue: display.output,
+				defaultOpen: display.status === "error" || display.approval === "required",
+				onApprove: () => props.onApprove?.({
+					part,
+					index
+				}),
+				onDeny: () => props.onDeny?.({
+					part,
+					index
+				})
+			});
+		}
+		if (isStepStartPart(part)) return slotContent(props.slots?.stepStart?.({
+			part,
+			index
+		})) ?? /* @__PURE__ */ jsx("hr", {
+			"data-scope": "ai",
+			"data-part": "step-start"
+		});
+		if (isDataPart(part)) return slotContent(props.slots?.data?.({
+			part,
+			index
+		}));
+		if (isCustomPart(part)) return slotContent(props.slots?.custom?.({
+			part,
+			index
+		}));
+		return slotContent(props.slots?.fallback?.({
+			part,
+			index
+		}));
+	};
+	const overriddenMessage = slotContent(props.slots?.default?.({ message: props.message }));
+	if (overriddenMessage) return overriddenMessage;
+	return /* @__PURE__ */ jsx(Fragment, { children: props.message.parts.map((part, index) => /* @__PURE__ */ jsx(Fragment$1, { children: renderPart(part, index) }, index)) });
+}
+const AiParts = withSelfRoot(AiPartsRenderer);
+// src/components/ai/index.tsx
+/** A conversation column: Root is the log, Message carries a role, and
+* the speaking parts — Response, Reasoning, Tool, Sources — part the
+* stream. The interactive folds are the shared Collapsible wearing a
+* `data-ai` marker, so the machine work is never ours. Parts stay
+* agnostic of any client; consumers map their message format (e.g. the
+* `UIMessage` parts re-exported here) onto these primitives. */
+function part(name, tag, extra = {}) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...extra,
+		...rest,
+		"data-scope": "ai",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Ai" + name;
+	return Component;
+}
+/** The log itself: the column every stroke lands in, a landmark to
+* screen readers. While the reply streams, the log follows its growth —
+* but only while the reader rests at the bottom edge. */
+function AiConversation({ autoScroll = true, children, ...rest }) {
+	const messages = useComponentMessages();
+	const ref = useRef(null);
+	useEffect(() => {
+		const node = ref.current;
+		if (!node || !autoScroll) return;
+		return createConversationFollower(node);
+	}, [autoScroll]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...rest,
+		role: "log",
+		"aria-label": rest["aria-label"] ?? messages.ai.conversation,
+		"data-scope": "ai",
+		"data-part": "conversation",
+		children
+	});
+}
+/** The optional jump-to-latest door: an explicit part the caller drops
+* inside the conversation when the log scrolls. It watches the log's
+* distance from the bottom edge and surfaces only while the reader is
+* away — clicking returns to the stream. Nothing renders by default. */
+function AiJumpToLatest({ threshold = 96, onJump, children, ...rest }) {
+	const messages = useComponentMessages();
+	const ref = useRef(null);
+	const [visible, setVisible] = useState(false);
+	const measure = useCallback(() => {
+		const log = ref.current?.closest("[data-scope=\"ai\"][data-part=\"conversation\"]");
+		if (!log) return;
+		setVisible(log.scrollHeight - log.scrollTop - log.clientHeight > threshold);
+	}, [threshold]);
+	useEffect(() => {
+		const log = ref.current?.closest("[data-scope=\"ai\"][data-part=\"conversation\"]");
+		if (!log) return;
+		log.addEventListener("scroll", measure, { passive: true });
+		measure();
+		return () => log.removeEventListener("scroll", measure);
+	}, [measure]);
+	const jump = useCallback(() => {
+		const log = ref.current?.closest("[data-scope=\"ai\"][data-part=\"conversation\"]");
+		if (log) log.scrollTop = log.scrollHeight;
+		onJump?.();
+	}, [onJump]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		...rest,
+		type: "button",
+		"data-scope": "ai",
+		"data-part": "jump-to-latest",
+		"data-visible": visible ? "" : void 0,
+		tabIndex: visible ? 0 : -1,
+		"aria-label": rest["aria-label"] ?? messages.ai.jumpToLatest,
+		onClick: jump,
+		children: children ?? messages.ai.jumpToLatest
+	});
+}
+/** The bubble's inner measure — content that belongs to neither side
+* specifically. */
+const AiContent = withSelfRoot(part("Content", "div"));
+/** The quiet row under a message — copy, retry, feedback. */
+const AiActions = withSelfRoot(part("Actions", "div"));
+/** The while-it-works whisper for the in-flight turns. */
+function AiLoader({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		role: "status",
+		"aria-label": rest["aria-label"] ?? messages.ai.loading,
+		"data-scope": "ai",
+		"data-part": "loader",
+		children
+	});
+}
+/** The whole family under one handle — `Ai.Conversation`,
+* `Ai.Message`, and the rest, exactly as before the split. */
+const Ai = Object.assign(AiConversation, {
+	Root: AiConversation,
+	Conversation: AiConversation,
+	MessageContent: AiContent,
+	Actions: AiActions,
+	Loader: AiLoader,
+	Media: AiMedia,
+	Parts: AiParts,
+	JumpToLatest: AiJumpToLatest,
+	Message,
+	Response,
+	Reasoning,
+	Tool,
+	Sources,
+	Source,
+	Action,
+	Suggestion,
+	PromptInput
+});
+injectComponentStyle("ai");
+export { AiJumpToLatest as a, toolPartDisplay as c, AiConversation as i, AiActions as n, AiMedia as o, AiContent as r, AiParts as s, Ai as t };