@4djs/assistant 0.0.0

package/src/react/components/HighlightedJsonCode.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { formatJsonIfLarge } from "../../core/chat-activity.ts";
+import { cn } from "../utils/cn.ts";
+import { HighlightedCodeBlock } from "./highlighted-code.tsx";
+
+export function HighlightedJsonCode({
+	code,
+	className,
+	...props
+}: {
+	code: string;
+	className?: string;
+} & ComponentPropsWithoutRef<"code">) {
+	const formatted = formatJsonIfLarge(code);
+
+	return (
+		<HighlightedCodeBlock
+			className={cn("language-json", className)}
+			code={formatted}
+			language="json"
+			{...props}
+		/>
+	);
+}

package/src/react/components/MarkdownContent.tsx

@@ -0,0 +1,98 @@
+import { useMemo } from "react";
+import type { Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import { childrenToText } from "../../core/markdown-utils.ts";
+import { prepareMarkdown } from "../../core/prepare-markdown.ts";
+import { cn } from "../utils/cn.ts";
+import { HighlightedCodeBlock } from "./highlighted-code.tsx";
+import { MermaidDiagram } from "./MermaidDiagram.tsx";
+
+import "katex/dist/katex.min.css";
+
+interface MarkdownContentProps {
+	content: string;
+	className?: string;
+	invert?: boolean;
+	streaming?: boolean;
+}
+
+function blockLanguage(className?: string): string | null {
+	const match = /language-([\w-]+)/.exec(className ?? "");
+	return match?.[1] ?? null;
+}
+
+function createMarkdownComponents(streaming: boolean): Components {
+	return {
+		a: ({ href, children }) => (
+			<a href={href} target="_blank" rel="noopener noreferrer">
+				{children}
+			</a>
+		),
+		pre: ({ children }) => <pre className="markdown-pre">{children}</pre>,
+		code: ({ className, children, ...props }) => {
+			const raw = childrenToText(children).replace(/\n$/, "");
+			const language = blockLanguage(className);
+			const isBlock = Boolean(language) || raw.includes("\n");
+
+			if (language === "mermaid") {
+				return <MermaidDiagram chart={raw} streaming={streaming} />;
+			}
+
+			if (isBlock) {
+				return (
+					<HighlightedCodeBlock
+						className={className}
+						code={raw}
+						language={language}
+						{...props}
+					/>
+				);
+			}
+
+			return (
+				<code className="markdown-inline-code" {...props}>
+					{children}
+				</code>
+			);
+		},
+	};
+}
+
+export function MarkdownContent({
+	content,
+	className = "",
+	invert = false,
+	streaming = false,
+}: MarkdownContentProps) {
+	const prepared = useMemo(() => prepareMarkdown(content), [content]);
+	const components = useMemo(
+		() => createMarkdownComponents(streaming),
+		[streaming],
+	);
+
+	return (
+		<div
+			className={cn(
+				"markdown-body",
+				invert && "markdown-body--invert",
+				className,
+			)}
+		>
+			<ReactMarkdown
+				remarkPlugins={[
+					remarkGfm,
+					[remarkMath, { singleDollarTextMath: true }],
+				]}
+				rehypePlugins={[
+					[rehypeKatex, { strict: "ignore", throwOnError: false }],
+				]}
+				components={components}
+			>
+				{prepared}
+			</ReactMarkdown>
+		</div>
+	);
+}

package/src/react/components/MarkdownEditor.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useMemo, useRef } from "react";
+import { highlightNodes } from "./highlighted-code.tsx";
+
+interface MarkdownEditorProps {
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	disabled?: boolean;
+	className?: string;
+	"aria-label"?: string;
+}
+
+export function MarkdownEditor({
+	value,
+	onChange,
+	placeholder,
+	disabled = false,
+	className = "",
+	"aria-label": ariaLabel,
+}: MarkdownEditorProps) {
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const highlightRef = useRef<HTMLPreElement>(null);
+
+	const highlighted = useMemo(() => {
+		if (!value) return null;
+		const source = value.endsWith("\n") ? `${value}\n` : value;
+		return highlightNodes(source, "markdown");
+	}, [value]);
+
+	const syncScroll = useCallback(() => {
+		const textarea = textareaRef.current;
+		const highlight = highlightRef.current;
+		if (!textarea || !highlight) return;
+		highlight.scrollTop = textarea.scrollTop;
+		highlight.scrollLeft = textarea.scrollLeft;
+	}, []);
+
+	return (
+		<div className={`assistant-markdown-editor ${className}`.trim()}>
+			<pre
+				ref={highlightRef}
+				className="assistant-markdown-editor__highlight"
+				aria-hidden
+			>
+				<code className="hljs language-markdown">{highlighted}</code>
+			</pre>
+			<textarea
+				ref={textareaRef}
+				className="assistant-markdown-editor__input"
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+				onScroll={syncScroll}
+				placeholder={placeholder}
+				spellCheck={false}
+				disabled={disabled}
+				aria-label={ariaLabel}
+			/>
+		</div>
+	);
+}

package/src/react/components/MermaidDiagram.tsx

@@ -0,0 +1,139 @@
+import mermaid from "mermaid";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../utils/cn.ts";
+import { HighlightedCodeBlock } from "./highlighted-code.tsx";
+
+const MERMAID_FONT = "ui-sans-serif, system-ui, -apple-system, sans-serif";
+
+function getMermaidTheme(): "dark" | "default" {
+	if (typeof document === "undefined") return "dark";
+	return document.documentElement.dataset.theme === "light"
+		? "default"
+		: "dark";
+}
+
+function buildMermaidConfig(theme: "dark" | "default") {
+	return {
+		startOnLoad: false,
+		theme,
+		securityLevel: "strict" as const,
+		fontFamily: MERMAID_FONT,
+		htmlLabels: false,
+		useMaxWidth: false,
+		class: {
+			useMaxWidth: false,
+		},
+		flowchart: {
+			useMaxWidth: false,
+		},
+		sequence: {
+			useMaxWidth: false,
+		},
+	};
+}
+
+function normalizeMermaidSvg(svg: string): string {
+	return svg.replace(/<svg\b([^>]*)>/, (_match, attrs: string) => {
+		let next = attrs.replace(/\swidth="100%"/, "");
+		next = next.replace(/\sstyle="([^"]*)"/, (_styleMatch, style: string) => {
+			const cleaned = style
+				.replace(/max-width:\s*[^;]+;?/gi, "")
+				.replace(/;\s*;/g, ";")
+				.trim();
+			return cleaned ? ` style="${cleaned}"` : "";
+		});
+		return `<svg${next}>`;
+	});
+}
+
+function MermaidSourceCode({ chart }: { chart: string }) {
+	return (
+		<HighlightedCodeBlock
+			className="language-mermaid"
+			code={chart.trim()}
+			language="mermaid"
+		/>
+	);
+}
+
+interface MermaidDiagramProps {
+	chart: string;
+	streaming?: boolean;
+	className?: string;
+}
+
+export function MermaidDiagram({
+	chart,
+	streaming = false,
+	className,
+}: MermaidDiagramProps) {
+	const reactId = useId();
+	const svgHostRef = useRef<HTMLDivElement>(null);
+	const [svg, setSvg] = useState<string | null>(null);
+	const [theme, setTheme] = useState(getMermaidTheme);
+	const source = chart.trim();
+
+	useEffect(() => {
+		const root = document.documentElement;
+		const observer = new MutationObserver(() => {
+			setTheme(getMermaidTheme());
+		});
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: ["data-theme"],
+		});
+		return () => observer.disconnect();
+	}, []);
+
+	useEffect(() => {
+		if (streaming || !source) {
+			setSvg(null);
+			return;
+		}
+
+		let cancelled = false;
+		setSvg(null);
+
+		const renderId = `mermaid-${reactId.replace(/:/g, "")}-${Math.random().toString(36).slice(2, 8)}`;
+
+		async function render() {
+			try {
+				mermaid.initialize(buildMermaidConfig(theme));
+				const { svg: rendered } = await mermaid.render(renderId, source);
+				if (!cancelled) {
+					setSvg(normalizeMermaidSvg(rendered));
+				}
+			} catch {
+				if (!cancelled) {
+					setSvg(null);
+				}
+			}
+		}
+
+		void render();
+		return () => {
+			cancelled = true;
+		};
+	}, [source, reactId, theme, streaming]);
+
+	useEffect(() => {
+		const host = svgHostRef.current;
+		if (!host) return;
+
+		if (svg) {
+			host.innerHTML = svg;
+		} else {
+			host.textContent = "";
+		}
+
+		return () => {
+			host.textContent = "";
+		};
+	}, [svg]);
+
+	if (streaming || !svg) {
+		return <MermaidSourceCode chart={chart} />;
+	}
+
+	return <div ref={svgHostRef} className={cn("markdown-mermaid", className)} />;
+}

package/src/react/components/ModelSelector.tsx

@@ -0,0 +1,243 @@
+import {
+	type KeyboardEvent,
+	useEffect,
+	useId,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { useAssistant, useAssistantActions } from "../context.tsx";
+
+function filterModels(models: string[], query: string): string[] {
+	const needle = query.trim().toLowerCase();
+	if (!needle) return models;
+	return models.filter((model) => model.toLowerCase().includes(needle));
+}
+
+interface ModelSelectorProps {
+	disabled?: boolean;
+	variant?: "header" | "footer";
+	dropUp?: boolean;
+}
+
+export function ModelSelector({
+	disabled,
+	variant = "header",
+	dropUp = false,
+}: ModelSelectorProps) {
+	const llmModels = useAssistant((s) => s.llmModels);
+	const llmModelsLoading = useAssistant((s) => s.llmModelsLoading);
+	const selectedModel = useAssistant((s) => s.selectedModel);
+	const { setSelectedModel } = useAssistantActions();
+
+	const listboxId = useId();
+	const rootRef = useRef<HTMLDivElement>(null);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const skipBlurCommitRef = useRef(false);
+
+	const [query, setQuery] = useState(selectedModel ?? "");
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+
+	const suggestions = useMemo(() => {
+		const filtered = filterModels(llmModels, query);
+		const trimmed = query.trim();
+		if (
+			trimmed &&
+			!llmModels.some((model) => model.toLowerCase() === trimmed.toLowerCase())
+		) {
+			return [trimmed, ...filtered.filter((model) => model !== trimmed)];
+		}
+		return filtered;
+	}, [llmModels, query]);
+
+	useEffect(() => {
+		setQuery(selectedModel ?? "");
+	}, [selectedModel]);
+
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event: MouseEvent) => {
+			if (!rootRef.current?.contains(event.target as Node)) {
+				setOpen(false);
+			}
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [open]);
+
+	function commitModel(value: string) {
+		const trimmed = value.trim();
+		if (!trimmed) {
+			setQuery(selectedModel ?? "");
+			return;
+		}
+		setSelectedModel(trimmed);
+		setQuery(trimmed);
+		setOpen(false);
+	}
+
+	function selectSuggestion(index: number) {
+		const model = suggestions[index];
+		if (!model) return;
+		skipBlurCommitRef.current = true;
+		commitModel(model);
+		inputRef.current?.blur();
+	}
+
+	function resolveEnterSelection(): string | null {
+		const trimmed = query.trim();
+		if (!trimmed) return null;
+
+		if (open && suggestions.length > 0) {
+			return suggestions[activeIndex] ?? trimmed;
+		}
+
+		const exact = llmModels.find(
+			(model) => model.toLowerCase() === trimmed.toLowerCase(),
+		);
+		if (exact) return exact;
+
+		if (suggestions.length > 0) {
+			return suggestions[0] ?? trimmed;
+		}
+
+		return trimmed;
+	}
+
+	function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			const model = resolveEnterSelection();
+			if (model) {
+				skipBlurCommitRef.current = true;
+				commitModel(model);
+				inputRef.current?.blur();
+			}
+			return;
+		}
+
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) {
+				setOpen(true);
+				return;
+			}
+			setActiveIndex((index) => {
+				if (!suggestions.length) return 0;
+				return event.key === "ArrowDown"
+					? (index + 1) % suggestions.length
+					: (index - 1 + suggestions.length) % suggestions.length;
+			});
+			return;
+		}
+
+		if (!open) return;
+
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				setQuery(selectedModel ?? "");
+				setOpen(false);
+				break;
+			case "Tab":
+				setOpen(false);
+				break;
+		}
+	}
+
+	const showList = open && suggestions.length > 0;
+
+	return (
+		<div
+			ref={rootRef}
+			className={`model-selector ${variant === "footer" ? "model-selector--footer" : ""}`}
+		>
+			<label className="model-selector__label">
+				{variant === "header" ? (
+					<span className="model-selector__label-text">Model</span>
+				) : null}
+				<div className="model-selector__field">
+					<input
+						ref={inputRef}
+						type="text"
+						className="assistant-input model-selector__input"
+						value={query}
+						onChange={(event) => {
+							setQuery(event.target.value);
+							setActiveIndex(0);
+							setOpen(true);
+						}}
+						onFocus={() => setOpen(true)}
+						onBlur={() => {
+							window.setTimeout(() => {
+								if (skipBlurCommitRef.current) {
+									skipBlurCommitRef.current = false;
+									return;
+								}
+								if (!rootRef.current?.contains(document.activeElement)) {
+									commitModel(query);
+								}
+							}, 0);
+						}}
+						onKeyDown={onKeyDown}
+						disabled={disabled || llmModelsLoading}
+						role="combobox"
+						aria-expanded={showList}
+						aria-controls={showList ? listboxId : undefined}
+						aria-autocomplete="list"
+						aria-activedescendant={
+							showList ? `${listboxId}-option-${activeIndex}` : undefined
+						}
+						aria-label="LLM model"
+						aria-busy={llmModelsLoading}
+						placeholder={
+							llmModelsLoading ? "Loading models…" : "Search models…"
+						}
+						autoComplete="off"
+						spellCheck={false}
+					/>
+					{showList && (
+						<div
+							id={listboxId}
+							role="listbox"
+							className={`model-selector__list ${dropUp ? "model-selector__list--drop-up" : ""}`}
+							aria-label="Model suggestions"
+						>
+							{suggestions.map((model, index) => {
+								const isCustom =
+									model === query.trim() &&
+									!llmModels.some(
+										(entry) => entry.toLowerCase() === model.toLowerCase(),
+									);
+
+								return (
+									<button
+										key={isCustom ? `custom:${model}` : model}
+										type="button"
+										id={`${listboxId}-option-${index}`}
+										role="option"
+										aria-selected={index === activeIndex}
+										className={`model-selector__option ${index === activeIndex ? "model-selector__option--active" : ""}`}
+										onMouseDown={(event) => event.preventDefault()}
+										onClick={() => selectSuggestion(index)}
+										onMouseEnter={() => setActiveIndex(index)}
+									>
+										<span className="model-selector__option-label">
+											{model}
+										</span>
+										{isCustom && (
+											<span className="model-selector__option-hint">
+												Custom
+											</span>
+										)}
+									</button>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			</label>
+		</div>
+	);
+}

package/src/react/components/chat/AssistantErrorCallout.tsx

@@ -0,0 +1,79 @@
+import {
+	CircleAlert,
+	Clock3,
+	Gauge,
+	KeyRound,
+	RefreshCw,
+	WifiOff,
+} from "lucide-react";
+import type { ComponentType } from "react";
+import {
+	type AssistantErrorKind,
+	parseAssistantError,
+} from "../../lib/parse-assistant-error.ts";
+
+const ERROR_ICONS: Record<
+	AssistantErrorKind,
+	ComponentType<{ size?: number; strokeWidth?: number }>
+> = {
+	network: WifiOff,
+	auth: KeyRound,
+	timeout: Clock3,
+	"rate-limit": Gauge,
+	unknown: CircleAlert,
+};
+
+interface AssistantErrorCalloutProps {
+	error: string;
+	context?: "chat" | "suggestions";
+	variant?: "embedded" | "panel";
+	onRetry?: () => void;
+	retryLabel?: string;
+	retryLoading?: boolean;
+}
+
+export function AssistantErrorCallout({
+	error,
+	context = "chat",
+	variant = "embedded",
+	onRetry,
+	retryLabel = "Try again",
+	retryLoading = false,
+}: AssistantErrorCalloutProps) {
+	const parsed = parseAssistantError(error, context);
+	const Icon = ERROR_ICONS[parsed.kind];
+
+	return (
+		<div
+			className={`assistant-error-callout assistant-error-callout--${variant}`}
+			role="alert"
+		>
+			<span className="assistant-error-callout__badge" aria-hidden>
+				<Icon size={12} strokeWidth={2.25} />
+			</span>
+			<div className="assistant-error-callout__body">
+				<p className="assistant-error-callout__title">{parsed.title}</p>
+				<p className="assistant-error-callout__detail">{parsed.detail}</p>
+				{parsed.hint ? (
+					<p className="assistant-error-callout__hint">{parsed.hint}</p>
+				) : null}
+			</div>
+			{onRetry ? (
+				<button
+					type="button"
+					className="assistant-error-callout__chip"
+					onClick={onRetry}
+					disabled={retryLoading}
+				>
+					<RefreshCw
+						size={12}
+						strokeWidth={2.25}
+						className={retryLoading ? "assistant-icon-spin" : undefined}
+						aria-hidden
+					/>
+					{retryLabel}
+				</button>
+			) : null}
+		</div>
+	);
+}