@bysages/solid 0.4.3 → 0.5.0

package/README.md

@@ -37,10 +37,10 @@ Theme the document, then use the components — the component import
 carries the whole token layer in with it:
 
 ```tsx
-// index.tsx
-import { render } from "solid-js/web";
 import { applyTheme } from "@bysages/solid";
 import { Dialog } from "@bysages/solid";
+// index.tsx
+import { render } from "solid-js/web";
 
 applyTheme({ mode: "system", accent: "ink" });
 

package/dist/ai-NX47X8sz.mjs

@@ -0,0 +1,365 @@
+import { n as withSelfRoot } from "./family-B5HtE0on.mjs";
+import { r as iconNode } from "./icon-DQqYA2fO.mjs";
+import { Action } from "./components/ai-action/index.mjs";
+import { AiMessage as Message } from "./components/ai-message/index.mjs";
+import { n as useComponentMessages } from "./use-component-messages-DS9ppb4C.mjs";
+import { t as PromptInput } from "./ai-prompt-input-CEnnpkgi.mjs";
+import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
+import { t as Response } from "./ai-response-BM_DVIDY.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 { createComponent, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, createEffect, createSignal, on, onCleanup, onMount, splitProps } from "solid-js";
+// src/components/ai/parts.tsx
+var _tmpl$$1 = /*#__PURE__*/ template(`<a data-scope=ai data-part=file-link target=_blank rel=noreferrer><span>`);
+var _tmpl$2$1 = /*#__PURE__*/ template(`<figure data-scope=ai data-part=media>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<img>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<audio controls>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<video controls>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<li data-scope=ai data-part=document-source><span></span><span>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<hr data-scope=ai data-part=step-start>`);
+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) => (() => {
+	var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild;
+	insert(_el$, () => iconNode("file"), _el$2);
+	insert(_el$2, () => fileLabel(part));
+	effect(() => setAttribute(_el$, "href", part.url));
+	return _el$;
+})();
+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 (() => {
+		var _el$3 = _tmpl$2$1();
+		setAttribute(_el$3, "data-kind", kind);
+		insert(_el$3, () => kind === "image" ? (() => {
+			var _el$4 = _tmpl$3();
+			effect((_p$) => {
+				var _v$ = shown.url, _v$2 = props.alt ?? (label === shown.mediaType ? "" : label);
+				_v$ !== _p$.e && setAttribute(_el$4, "src", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$4, "alt", _p$.t = _v$2);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$4;
+		})() : kind === "audio" ? (() => {
+			var _el$5 = _tmpl$4();
+			effect(() => setAttribute(_el$5, "src", shown.url));
+			return _el$5;
+		})() : kind === "video" ? (() => {
+			var _el$6 = _tmpl$5();
+			effect(() => setAttribute(_el$6, "src", shown.url));
+			return _el$6;
+		})() : fileLink(shown));
+		return _el$3;
+	})();
+});
+const source = (part) => "url" in part ? createComponent(Sources, { get children() {
+	return createComponent(Source, {
+		get href() {
+			return part.url;
+		},
+		get children() {
+			return part.title ?? part.url;
+		}
+	});
+} }) : createComponent(Sources, { get children() {
+	var _el$7 = _tmpl$6(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+	insert(_el$8, () => part.title);
+	insert(_el$9, () => part.mediaType);
+	return _el$7;
+} });
+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 ? createComponent(Response, {
+				get content() {
+					return part.text;
+				},
+				get highlighter() {
+					return props.highlighter;
+				}
+			}) : null;
+		}
+		if (isReasoningPart(part)) {
+			const custom = slotContent(props.slots?.reasoning?.({
+				part,
+				index
+			}));
+			if (custom) return custom;
+			return createComponent(Reasoning, {
+				get defaultOpen() {
+					return part.state === "streaming";
+				},
+				get children() {
+					return part.text;
+				}
+			});
+		}
+		if (isReasoningFilePart(part)) return slotContent(props.slots?.reasoningFile?.({
+			part,
+			index
+		})) ?? createComponent(AiMedia, { part });
+		if (isFilePart(part)) return slotContent(props.slots?.file?.({
+			part,
+			index
+		})) ?? createComponent(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 createComponent(Tool, {
+				get name() {
+					return display.name;
+				},
+				get status() {
+					return display.status;
+				},
+				get approval() {
+					return display.approval;
+				},
+				get inputValue() {
+					return display.input;
+				},
+				get outputValue() {
+					return display.output;
+				},
+				get defaultOpen() {
+					return 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
+		})) ?? _tmpl$7();
+		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 createComponent(For, {
+		get each() {
+			return props.message.parts;
+		},
+		children: (part, index) => renderPart(part, index())
+	});
+}
+const AiParts = withSelfRoot(AiPartsRenderer);
+// src/components/ai/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<button>`);
+function part(name, extra = {}) {
+	function Component(props) {
+		const messages = useComponentMessages();
+		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
+		return (() => {
+			var _el$ = _tmpl$();
+			spread(_el$, mergeProps(partExtra, props, {
+				"data-scope": "ai",
+				get ["data-part"]() {
+					return name.toLowerCase();
+				}
+			}), false, false);
+			return _el$;
+		})();
+	}
+	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. */
+const AiConversation = function AiConversation(props) {
+	const [own, rest] = splitProps(props, ["autoScroll"]);
+	const messages = useComponentMessages();
+	let node;
+	let stopFollowing;
+	createEffect(on(() => own.autoScroll !== false, (enabled) => {
+		stopFollowing?.();
+		stopFollowing = void 0;
+		if (node && enabled) stopFollowing = createConversationFollower(node);
+	}));
+	onCleanup(() => stopFollowing?.());
+	return (() => {
+		var _el$2 = _tmpl$();
+		use((element) => {
+			node = element;
+		}, _el$2);
+		spread(_el$2, mergeProps(rest, {
+			"role": "log",
+			get ["aria-label"]() {
+				return props["aria-label"] ?? messages().ai.conversation;
+			},
+			"data-scope": "ai",
+			"data-part": "conversation"
+		}), false, false);
+		return _el$2;
+	})();
+};
+const AiJumpToLatest = function AiJumpToLatest(props) {
+	const [own, rest] = splitProps(props, ["threshold", "onJump"]);
+	const messages = useComponentMessages();
+	const [visible, setVisible] = createSignal(false);
+	let button;
+	let log;
+	const measure = () => {
+		if (!log) return;
+		setVisible(log.scrollHeight - log.scrollTop - log.clientHeight > (own.threshold ?? 96));
+	};
+	onMount(() => {
+		log = button?.closest("[data-scope=\"ai\"][data-part=\"conversation\"]") ?? null;
+		log?.addEventListener("scroll", measure, { passive: true });
+		measure();
+		onCleanup(() => log?.removeEventListener("scroll", measure));
+	});
+	createEffect(on(() => own.threshold, measure));
+	const jump = () => {
+		if (log) log.scrollTop = log.scrollHeight;
+		own.onJump?.();
+	};
+	return (() => {
+		var _el$3 = _tmpl$2();
+		use((element) => {
+			button = element;
+		}, _el$3);
+		spread(_el$3, mergeProps(rest, {
+			"type": "button",
+			"data-scope": "ai",
+			"data-part": "jump-to-latest",
+			get ["data-visible"]() {
+				return visible() ? "" : void 0;
+			},
+			get tabIndex() {
+				return visible() ? 0 : -1;
+			},
+			get ["aria-label"]() {
+				return rest["aria-label"] ?? messages().ai.jumpToLatest;
+			},
+			"onClick": jump
+		}), false, true);
+		insert(_el$3, () => rest.children ?? messages().ai.jumpToLatest);
+		return _el$3;
+	})();
+};
+/** The bubble's inner measure — content that belongs to neither side
+* specifically. */
+const AiContent = withSelfRoot(part("Content"));
+/** The quiet row under a message — copy, retry, feedback. */
+const AiActions = withSelfRoot(part("Actions"));
+/** The while-it-works whisper for the in-flight turns. */
+const AiLoader = withSelfRoot(part("Loader", (messages) => ({
+	role: "status",
+	"aria-label": messages.ai.loading
+})));
+/** The whole family under one handle — `Ai.Conversation`,
+* `Ai.MessageContent`, and the rest. */
+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, AiParts as c, AiConversation as i, toolPartDisplay as l, AiActions as n, AiLoader as o, AiContent as r, AiMedia as s, Ai as t };