@4djs/assistant 0.0.0 → 0.1.0

package/src/react/components/HighlightedJsonCode.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,243 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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>
-	);
-}