@stll/chat 0.1.40 → 0.2.0

package/dist/link-detection.d.ts

@@ -0,0 +1,14 @@
+//#region src/link-detection.d.ts
+export type ChatLinkSpan = {
+  start: number;
+  end: number;
+  text: string;
+  href: string;
+  hostname: string;
+};
+export declare const normalizeChatLink: (input: string) => {
+  href: string;
+  hostname: string;
+} | null;
+export declare const detectChatLinks: (text: string) => ChatLinkSpan[];
+//#endregion

package/dist/link-detection.js

@@ -0,0 +1,68 @@
+import { LinkifyIt } from "linkify-it";
+import { parse } from "tldts";
+//#region src/link-detection.ts
+const HTTP_SCHEME = /^https?:\/\//iu;
+const BARE_HOST_LABEL_START = /^[\p{L}\p{N}]/u;
+const UNSAFE_CHARACTERS = /[\s\p{Cc}\p{Cf}\\]/u;
+const SPECIAL_USE_SUFFIX = /(?:^|\.)(?:localhost|local|internal|invalid|test|example|onion)$/iu;
+const AMBIGUOUS_FILE_SUFFIXES = /* @__PURE__ */ new Set([
+	"zip",
+	"mov",
+	"pdf",
+	"doc",
+	"docx",
+	"txt",
+	"js",
+	"ts",
+	"json",
+	"xml",
+	"html"
+]);
+const normalizeChatLink = (input) => {
+	if (!input || UNSAFE_CHARACTERS.test(input)) return null;
+	const explicit = HTTP_SCHEME.test(input);
+	if (!explicit && /^[\w+.-]+:/u.test(input)) return null;
+	if (!explicit && !BARE_HOST_LABEL_START.test(input)) return null;
+	const candidate = explicit ? input : `https://${input}`;
+	if (!URL.canParse(candidate)) return null;
+	const url = new URL(candidate);
+	if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+	if (url.username || url.password || !url.hostname) return null;
+	const domain = parse(url.hostname, { allowPrivateDomains: false });
+	if (!explicit) {
+		if (SPECIAL_USE_SUFFIX.test(url.hostname)) return null;
+		if (!domain.isIcann || !domain.domain || domain.isIp) return null;
+		if (!/^www\./iu.test(input) && domain.publicSuffix && AMBIGUOUS_FILE_SUFFIXES.has(domain.publicSuffix)) return null;
+	}
+	return {
+		href: url.href,
+		hostname: url.hostname
+	};
+};
+const detectChatLinks = (text) => {
+	const suffixes = Array.from(text.matchAll(/\.([\p{L}\p{N}-]+)/gu), (match) => match[1] ?? "");
+	const linkify = new LinkifyIt({
+		fuzzyLink: true,
+		fuzzyEmail: false,
+		fuzzyIP: false,
+		urlAuth: true
+	}).tlds(suffixes).add("ftp:", null).add("mailto:", null).add("//", null);
+	const spans = [];
+	for (const match of linkify.match(text) ?? []) {
+		const explicit = HTTP_SCHEME.test(match.raw);
+		const preceding = text.slice(0, match.index).at(-1);
+		if (!explicit && preceding && /[\p{L}\p{N}_@/\\:.-]/u.test(preceding)) continue;
+		const normalized = normalizeChatLink(match.raw);
+		if (!normalized) continue;
+		spans.push({
+			start: match.index,
+			end: match.lastIndex,
+			text: match.raw,
+			href: normalized.href,
+			hostname: normalized.hostname
+		});
+	}
+	return spans;
+};
+//#endregion
+export { detectChatLinks, normalizeChatLink };

package/dist/link-editor.d.ts

@@ -0,0 +1,5 @@
+import { Extension } from "@tiptap/core";
+//#region src/link-editor.d.ts
+/** View-only links: saved drafts and submitted HTML retain the original bytes. */
+export declare const ChatComposerLinks: Extension<any, any>;
+//#endregion

package/dist/link-editor.js

@@ -0,0 +1,84 @@
+import { detectChatLinks } from "./link-detection.js";
+import { CHAT_LINK_ATTRIBUTES, CHAT_LINK_CLASS_NAME } from "./link.js";
+import { panic } from "better-result";
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+//#region src/link-editor.ts
+const chatLinkPluginKey = new PluginKey("stllChatLinks");
+const decorateChatLinks = (doc) => {
+	const decorations = [];
+	doc.descendants((node, position) => {
+		if (!node.isTextblock) return true;
+		const text = node.textBetween(0, node.content.size, "\n", "\n");
+		for (const link of detectChatLinks(text)) decorations.push(Decoration.inline(position + 1 + link.start, position + 1 + link.end, {
+			nodeName: "a",
+			href: link.href,
+			...CHAT_LINK_ATTRIBUTES,
+			class: CHAT_LINK_CLASS_NAME,
+			"data-chat-composer-link": "",
+			dir: "auto"
+		}));
+		return false;
+	});
+	return DecorationSet.create(doc, decorations);
+};
+const openComposerLink = (view, event) => {
+	if (event.type === "click" ? event.button !== 0 || !(event.metaKey || event.ctrlKey) : event.button !== 1) return false;
+	if (!(event.target instanceof Element)) return false;
+	const anchor = event.target.closest("a[data-chat-composer-link]");
+	if (!(anchor instanceof HTMLAnchorElement) || !view.dom.contains(anchor)) return false;
+	event.preventDefault();
+	window.open(anchor.href, CHAT_LINK_ATTRIBUTES.target, "noopener,noreferrer");
+	return true;
+};
+/** View-only links: saved drafts and submitted HTML retain the original bytes. */
+const ChatComposerLinks = Extension.create({
+	name: "stllChatComposerLinks",
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			key: chatLinkPluginKey,
+			state: {
+				init: (_, state) => ({
+					status: "ready",
+					decorations: decorateChatLinks(state.doc)
+				}),
+				apply: (transaction, current) => {
+					const requestedStatus = transaction.getMeta(chatLinkPluginKey);
+					const status = requestedStatus === "ready" || requestedStatus === "composing" ? requestedStatus : current.status;
+					if (!transaction.docChanged && requestedStatus !== "ready" && requestedStatus !== "composing") return current;
+					switch (status) {
+						case "composing": return {
+							status: "composing",
+							decorations: current.decorations.map(transaction.mapping, transaction.doc)
+						};
+						case "ready": return {
+							status: "ready",
+							decorations: decorateChatLinks(transaction.doc)
+						};
+						default: return panic("Unhandled composer link status");
+					}
+				}
+			},
+			props: {
+				decorations: (state) => chatLinkPluginKey.getState(state)?.decorations,
+				handleDOMEvents: {
+					compositionstart: (view) => {
+						view.dispatch(view.state.tr.setMeta(chatLinkPluginKey, "composing"));
+						return false;
+					},
+					compositionend: (view) => {
+						queueMicrotask(() => {
+							if (!view.isDestroyed) view.dispatch(view.state.tr.setMeta(chatLinkPluginKey, "ready"));
+						});
+						return false;
+					},
+					click: openComposerLink,
+					auxclick: openComposerLink
+				}
+			}
+		})];
+	}
+});
+//#endregion
+export { ChatComposerLinks };

package/dist/link-markdown.d.ts

@@ -0,0 +1,5 @@
+import { Root } from "hast";
+//#region src/link-markdown.d.ts
+/** Run after sanitization and source-offset anchoring; existing links keep their renderer contract. */
+export declare const rehypeChatLinks: () => (tree: Root) => void;
+//#endregion

package/dist/link-markdown.js

@@ -0,0 +1,58 @@
+import { detectChatLinks } from "./link-detection.js";
+import { CHAT_LINK_ATTRIBUTES } from "./link.js";
+//#region src/link-markdown.ts
+const SKIPPED_ELEMENTS = /* @__PURE__ */ new Set([
+	"a",
+	"code",
+	"pre",
+	"stll-anon"
+]);
+/** Run after sanitization and source-offset anchoring; existing links keep their renderer contract. */
+const rehypeChatLinks = () => (tree) => {
+	const visit = (parent) => {
+		if (parent.type === "element" && SKIPPED_ELEMENTS.has(parent.tagName)) return;
+		const children = [];
+		for (const child of parent.children) {
+			if (child.type === "element") visit(child);
+			if (child.type !== "text") {
+				children.push(child);
+				continue;
+			}
+			const links = detectChatLinks(child.value);
+			if (!links.length) {
+				children.push(child);
+				continue;
+			}
+			let offset = 0;
+			for (const link of links) {
+				if (link.start > offset) children.push({
+					type: "text",
+					value: child.value.slice(offset, link.start)
+				});
+				children.push({
+					type: "element",
+					tagName: "a",
+					properties: {
+						href: link.href,
+						target: CHAT_LINK_ATTRIBUTES.target,
+						rel: CHAT_LINK_ATTRIBUTES.rel.split(" ")
+					},
+					children: [{
+						type: "text",
+						value: link.text
+					}]
+				});
+				offset = link.end;
+			}
+			if (offset < child.value.length) children.push({
+				type: "text",
+				value: child.value.slice(offset)
+			});
+		}
+		if (parent.type === "root") parent.children = children;
+		else parent.children = children.filter((child) => child.type !== "doctype");
+	};
+	visit(tree);
+};
+//#endregion
+export { rehypeChatLinks };

package/dist/link.d.ts

@@ -0,0 +1,20 @@
+import { AnchorHTMLAttributes } from "react";
+//#region src/link.d.ts
+export declare const CHAT_LINK_ATTRIBUTES: {
+  readonly target: "_blank";
+  readonly rel: "noopener noreferrer";
+};
+export declare const CHAT_LINK_CLASS_NAME = "text-foreground decoration-border hover:decoration-foreground rounded-xs underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+export declare const hasBundledChatLinkIcon: (hostname: string) => boolean;
+export type ChatLinkIconSource = {
+  type: "proxy";
+  src: string;
+};
+type ChatLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target" | "rel" | "className"> & {
+  href: string;
+  appearance?: "inline" | "tray";
+  iconSource?: ChatLinkIconSource | undefined;
+  newTabLabel?: string;
+};
+export declare const ChatLink: ({ appearance, children, href, iconSource, newTabLabel, title, ...anchorProps }: ChatLinkProps) => import("react").JSX.Element;
+//#endregion

package/dist/link.js

@@ -0,0 +1,104 @@
+import { normalizeChatLink } from "./link-detection.js";
+import { GlobeIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useState } from "react";
+import { GitHubLogoIcon, XLogoIcon } from "@stll/ui/brand-icons";
+//#region src/link.tsx
+const CHAT_LINK_ATTRIBUTES = {
+	target: "_blank",
+	rel: "noopener noreferrer"
+};
+const CHAT_LINK_CLASS_NAME = "text-foreground decoration-border hover:decoration-foreground rounded-xs underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const linkText = (node) => {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(linkText).join("");
+	if (isValidElement(node)) return linkText(node.props.children);
+	return "";
+};
+const ProxyIcon = ({ src }) => {
+	const [failed, setFailed] = useState(false);
+	if (failed || !src.startsWith("blob:")) return /* @__PURE__ */ jsx(GlobeIcon, {
+		"aria-hidden": "true",
+		className: "size-[1em]"
+	});
+	return /* @__PURE__ */ jsx("img", {
+		alt: "",
+		"aria-hidden": "true",
+		className: "size-[1em] object-contain",
+		onError: () => setFailed(true),
+		src
+	});
+};
+const GITHUB_LINK_ICON = /* @__PURE__ */ jsx(GitHubLogoIcon, {
+	"aria-hidden": "true",
+	className: "size-[1em]"
+});
+const X_LINK_ICON = /* @__PURE__ */ jsx(XLogoIcon, {
+	"aria-hidden": "true",
+	className: "size-[1em]"
+});
+const BUNDLED_ICONS = /* @__PURE__ */ new Map([
+	["github.com", GITHUB_LINK_ICON],
+	["www.github.com", GITHUB_LINK_ICON],
+	["x.com", X_LINK_ICON],
+	["www.x.com", X_LINK_ICON],
+	["twitter.com", X_LINK_ICON],
+	["www.twitter.com", X_LINK_ICON]
+]);
+const hasBundledChatLinkIcon = (hostname) => BUNDLED_ICONS.has(hostname);
+const ChatLink = ({ appearance = "inline", children, href, iconSource, newTabLabel, title, ...anchorProps }) => {
+	const className = appearance === "tray" ? "bg-muted/50 hover:bg-muted inline-flex shrink-0 items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" : CHAT_LINK_CLASS_NAME;
+	const labelClassName = appearance === "tray" ? "max-w-[20ch] truncate" : void 0;
+	const target = normalizeChatLink(href);
+	if (!target) {
+		const parsed = URL.canParse(href) ? new URL(href) : null;
+		const safeLocal = href.startsWith("#") || /^(?:\/(?![\\/])|\.{1,2}\/)/u.test(href);
+		const safeMail = parsed?.protocol === "mailto:";
+		if (!safeLocal && !safeMail || /[\p{Cc}\p{Cf}]/u.test(href)) return appearance === "tray" ? /* @__PURE__ */ jsx("span", {
+			className,
+			children: /* @__PURE__ */ jsx("bdi", {
+				className: labelClassName,
+				children: children ?? href
+			})
+		}) : /* @__PURE__ */ jsx("span", { children: children ?? href });
+		return /* @__PURE__ */ jsx("a", {
+			...anchorProps,
+			title: newTabLabel ?? title,
+			className,
+			href,
+			target: CHAT_LINK_ATTRIBUTES.target,
+			rel: CHAT_LINK_ATTRIBUTES.rel,
+			children: /* @__PURE__ */ jsx("bdi", {
+				className: labelClassName,
+				children: children ?? href
+			})
+		});
+	}
+	const text = linkText(children).trim();
+	const label = text && normalizeChatLink(text) === null ? children : target.hostname.replace(/^www\./u, "");
+	let icon = /* @__PURE__ */ jsx(GlobeIcon, {
+		"aria-hidden": "true",
+		className: "size-[1em]"
+	});
+	const bundledIcon = BUNDLED_ICONS.get(target.hostname);
+	if (iconSource) icon = /* @__PURE__ */ jsx(ProxyIcon, { src: iconSource.src }, iconSource.src);
+	else if (bundledIcon) icon = bundledIcon;
+	return /* @__PURE__ */ jsxs("a", {
+		...anchorProps,
+		title: newTabLabel ?? title,
+		className,
+		href: target.href,
+		target: CHAT_LINK_ATTRIBUTES.target,
+		rel: CHAT_LINK_ATTRIBUTES.rel,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: appearance === "tray" ? "inline-block shrink-0" : "me-1 inline-block align-[-0.125em]",
+			children: icon
+		}), /* @__PURE__ */ jsx("bdi", {
+			className: labelClassName,
+			children: label
+		})]
+	});
+};
+//#endregion
+export { CHAT_LINK_ATTRIBUTES, CHAT_LINK_CLASS_NAME, ChatLink, hasBundledChatLinkIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/chat",
-  "version": "0.1.40",
+  "version": "0.2.0",
   "description": "Typed React chat composer, message stream, model selector, and transport runtime primitives.",
   "keywords": [
     "ai",
@@ -52,6 +52,22 @@
     "./resume-contract": {
       "types": "./dist/resume-contract.d.ts",
       "import": "./dist/resume-contract.js"
+    },
+    "./link": {
+      "types": "./dist/link.d.ts",
+      "import": "./dist/link.js"
+    },
+    "./link-detection": {
+      "types": "./dist/link-detection.d.ts",
+      "import": "./dist/link-detection.js"
+    },
+    "./link-editor": {
+      "types": "./dist/link-editor.d.ts",
+      "import": "./dist/link-editor.js"
+    },
+    "./link-markdown": {
+      "types": "./dist/link-markdown.d.ts",
+      "import": "./dist/link-markdown.js"
     }
   },
   "publishConfig": {
@@ -71,17 +87,22 @@
   },
   "dependencies": {
     "@ag-ui/core": "1.0.2",
-    "@stll/ai-catalog": "^0.7.0",
-    "@stll/ui": "^0.45.0",
+    "@stll/ai-catalog": "^0.7.1",
+    "@stll/ui": "^0.46.0",
     "@tanstack/ai-client": "0.38.0",
+    "@types/hast": "^3.0.5",
     "better-result": "3.0.1",
+    "linkify-it": "6.1.0",
+    "tldts": "7.4.18",
     "valibot": "1.5.0",
     "zod": "^4.5.4"
   },
   "devDependencies": {
     "@stll/property-testing": "0.0.0",
     "@stll/typescript-config": "0.0.0",
-    "@types/react": "^19.2.17",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@types/react": "^19.3.0",
     "bun-types": "1.4.3",
     "fast-check": "^4.10.2",
     "react": "^19.3.0",
@@ -89,10 +110,18 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.7.0",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
     "@types/react": ">=19",
     "react": ">=19"
   },
   "peerDependenciesMeta": {
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     }