@4djs/assistant 0.0.0

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

@@ -0,0 +1,116 @@
+import { ArrowDown } from "lucide-react";
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+
+const SCROLL_BOTTOM_THRESHOLD = 48;
+
+function isNearBottom(viewport: HTMLDivElement): boolean {
+	return (
+		viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <=
+		SCROLL_BOTTOM_THRESHOLD
+	);
+}
+
+interface ChatMessageScrollProps {
+	children: ReactNode;
+	dependencyKey: string;
+}
+
+export function ChatMessageScroll({
+	children,
+	dependencyKey,
+}: ChatMessageScrollProps) {
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const contentRef = useRef<HTMLDivElement>(null);
+	const stickToBottomRef = useRef(true);
+	const [showScrollDown, setShowScrollDown] = useState(false);
+
+	const updateScrollState = useCallback(() => {
+		const viewport = scrollContainerRef.current;
+		if (!viewport) return;
+		const atBottom = isNearBottom(viewport);
+		setShowScrollDown(!atBottom);
+		stickToBottomRef.current = atBottom;
+	}, []);
+
+	const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+		const viewport = scrollContainerRef.current;
+		if (!viewport) return;
+		viewport.scrollTo({ top: viewport.scrollHeight, behavior });
+		stickToBottomRef.current = true;
+		setShowScrollDown(false);
+	}, []);
+
+	const handleContentResize = useCallback(() => {
+		const viewport = scrollContainerRef.current;
+		if (!viewport) return;
+		if (stickToBottomRef.current) {
+			viewport.scrollTo({ top: viewport.scrollHeight, behavior: "auto" });
+			setShowScrollDown(false);
+			return;
+		}
+		updateScrollState();
+	}, [updateScrollState]);
+
+	useEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		const resizeObserver = new ResizeObserver(handleContentResize);
+		resizeObserver.observe(content);
+		return () => resizeObserver.disconnect();
+	}, [handleContentResize]);
+
+	useEffect(() => {
+		const viewport = scrollContainerRef.current;
+		if (!viewport) return;
+		updateScrollState();
+		viewport.addEventListener("scroll", updateScrollState, { passive: true });
+		return () => viewport.removeEventListener("scroll", updateScrollState);
+	}, [updateScrollState]);
+
+	useEffect(() => {
+		const viewport = scrollContainerRef.current;
+		if (!viewport) return;
+		void dependencyKey;
+		if (!stickToBottomRef.current) {
+			updateScrollState();
+			return;
+		}
+		viewport.scrollTo({
+			top: viewport.scrollHeight,
+			behavior: "auto",
+		});
+		setShowScrollDown(false);
+	}, [dependencyKey, updateScrollState]);
+
+	return (
+		<div className="relative h-0 min-h-0 flex-1">
+			<div
+				ref={scrollContainerRef}
+				className="h-full overflow-x-hidden overflow-y-auto overscroll-contain bg-[var(--overlay-subtle)]"
+				aria-live="polite"
+			>
+				<div ref={contentRef} className="assistant-message-list">
+					{children}
+					<div aria-hidden className="h-px shrink-0" />
+				</div>
+			</div>
+			{showScrollDown ? (
+				<button
+					type="button"
+					className="assistant-scroll-down"
+					aria-label="Scroll to bottom"
+					title="Scroll to bottom"
+					onClick={() => scrollToBottom("smooth")}
+				>
+					<ArrowDown size={16} aria-hidden />
+				</button>
+			) : null}
+		</div>
+	);
+}

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

@@ -0,0 +1,231 @@
+import { ArrowUpRight, PenLine } from "lucide-react";
+import { useEffect } from "react";
+import {
+	type ParsedSuggestion,
+	parseSuggestionText,
+	splitToolValues,
+} from "../../../core/chat-reply-suggestions-parse.ts";
+import type { ReplySuggestions } from "../../../core/interactive-tools/index.ts";
+import { cn } from "../../utils/cn.ts";
+
+type ChatReplySuggestionsProps = {
+	suggestions: ReplySuggestions;
+	disabled?: boolean;
+	onSelect: (reply: string) => void;
+};
+
+function fieldBadgeLabel(label: string): string {
+	switch (label.toLowerCase()) {
+		case "model":
+			return "Model";
+		case "enabled":
+			return "Status";
+		case "tools":
+			return "Tools";
+		case "dataclass":
+			return "Dataclass";
+		case "filter":
+			return "Filter";
+		default:
+			return label;
+	}
+}
+
+function StructuredSuggestionRow({
+	suggestion,
+	index,
+	disabled,
+	onSelect,
+}: {
+	suggestion: Extract<ParsedSuggestion, { kind: "structured" }>;
+	index: number;
+	disabled?: boolean;
+	onSelect: () => void;
+}) {
+	const toolsField = suggestion.fields.find(
+		(field) => field.label.toLowerCase() === "tools",
+	);
+	const metaFields = suggestion.fields.filter(
+		(field) => field.label.toLowerCase() !== "tools",
+	);
+	const toolNames = toolsField ? splitToolValues(toolsField.value) : [];
+
+	return (
+		<button
+			type="button"
+			disabled={disabled}
+			className="assistant-reply-option assistant-reply-option--structured group"
+			onClick={onSelect}
+		>
+			<span className="assistant-reply-option__index" aria-hidden>
+				{index + 1}
+			</span>
+			<span className="assistant-reply-option__body">
+				<span className="assistant-reply-option__label">
+					{suggestion.title}
+				</span>
+				{suggestion.description ? (
+					<span className="assistant-reply-option__meta">
+						{suggestion.description}
+					</span>
+				) : null}
+				{(metaFields.length > 0 || toolNames.length > 0) && (
+					<span className="assistant-reply-option__badges">
+						{metaFields.map((field) => (
+							<span
+								key={`${field.label}-${field.value}`}
+								className="assistant-reply-badge"
+							>
+								<span className="assistant-reply-badge__label">
+									{fieldBadgeLabel(field.label)}
+								</span>
+								<span className="assistant-reply-badge__value">
+									{field.value}
+								</span>
+							</span>
+						))}
+						{toolNames.map((tool) => (
+							<span key={tool} className="assistant-reply-tool">
+								{tool}
+							</span>
+						))}
+					</span>
+				)}
+			</span>
+			<ArrowUpRight
+				className="assistant-reply-option__arrow size-3.5 shrink-0"
+				aria-hidden
+			/>
+		</button>
+	);
+}
+
+function CompactSuggestionRow({
+	text,
+	index,
+	disabled,
+	custom,
+	onSelect,
+}: {
+	text: string;
+	index: number;
+	disabled?: boolean;
+	custom?: boolean;
+	onSelect: () => void;
+}) {
+	return (
+		<button
+			type="button"
+			disabled={disabled}
+			className={cn(
+				"assistant-reply-option group",
+				custom && "assistant-reply-option--custom",
+			)}
+			onClick={onSelect}
+		>
+			<span className="assistant-reply-option__index" aria-hidden>
+				{index + 1}
+			</span>
+			<span className="assistant-reply-option__body">
+				{custom ? (
+					<span className="assistant-reply-option__custom">
+						<PenLine className="size-3 shrink-0" aria-hidden />
+						<span>{text}</span>
+					</span>
+				) : (
+					<span className="assistant-reply-option__label">{text}</span>
+				)}
+			</span>
+			<ArrowUpRight
+				className="assistant-reply-option__arrow size-3.5 shrink-0"
+				aria-hidden
+			/>
+		</button>
+	);
+}
+
+export function ChatReplySuggestions({
+	suggestions,
+	disabled,
+	onSelect,
+}: ChatReplySuggestionsProps) {
+	const parsed = suggestions.suggestions.map((text) => ({
+		raw: text,
+		parsed: parseSuggestionText(text),
+	}));
+
+	useEffect(() => {
+		if (disabled) return;
+
+		function onKeyDown(event: KeyboardEvent) {
+			if (!/^[1-9]$/.test(event.key)) return;
+
+			const index = Number(event.key) - 1;
+			const target = suggestions.suggestions[index];
+			if (!target) return;
+
+			const active = document.activeElement;
+			if (
+				active instanceof HTMLElement &&
+				(active.tagName === "INPUT" ||
+					active.tagName === "TEXTAREA" ||
+					active.isContentEditable)
+			) {
+				return;
+			}
+
+			event.preventDefault();
+			onSelect(target);
+		}
+
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [disabled, onSelect, suggestions.suggestions]);
+
+	return (
+		<fieldset className="assistant-reply-suggestions border-0 p-0 m-0 min-w-0">
+			<legend className="sr-only">Suggested replies</legend>
+			<div className="assistant-reply-suggestions__panel">
+				<div className="assistant-reply-suggestions__list">
+					{parsed.map((entry, index) => {
+						if (entry.parsed.kind === "structured") {
+							return (
+								<StructuredSuggestionRow
+									key={entry.raw}
+									suggestion={
+										entry.parsed as Extract<
+											ParsedSuggestion,
+											{ kind: "structured" }
+										>
+									}
+									index={index}
+									disabled={disabled}
+									onSelect={() => onSelect(entry.raw)}
+								/>
+							);
+						}
+
+						return (
+							<CompactSuggestionRow
+								key={entry.raw}
+								text={entry.raw}
+								index={index}
+								disabled={disabled}
+								custom={entry.parsed.kind === "custom"}
+								onSelect={() => onSelect(entry.raw)}
+							/>
+						);
+					})}
+				</div>
+				<p className="assistant-reply-suggestions__hint">
+					<kbd className="assistant-reply-kbd">1</kbd>
+					<span aria-hidden>–</span>
+					<kbd className="assistant-reply-kbd">
+						{suggestions.suggestions.length}
+					</kbd>
+					<span>to pick · or type below</span>
+				</p>
+			</div>
+		</fieldset>
+	);
+}

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

@@ -0,0 +1,69 @@
+import { Terminal } from "lucide-react";
+import type { ChatCommandSuggestion } from "../../../core/chat-commands.ts";
+import { cn } from "../../utils/cn.ts";
+
+interface ComposerCommandMenuProps {
+	commands: ChatCommandSuggestion[];
+	selectedIndex: number;
+	onSelect: (command: ChatCommandSuggestion) => void;
+	className?: string;
+}
+
+export function ComposerCommandMenu({
+	commands,
+	selectedIndex,
+	onSelect,
+	className,
+}: ComposerCommandMenuProps) {
+	if (commands.length === 0) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cn("composer-command-menu", className)}
+			role="listbox"
+			aria-label="Composer commands"
+		>
+			<div className="composer-command-menu__header">Commands</div>
+			<ul className="composer-command-menu__list">
+				{commands.map((command, index) => {
+					const active = index === selectedIndex;
+
+					return (
+						<li key={command.name} role="presentation">
+							<button
+								type="button"
+								role="option"
+								aria-selected={active}
+								className={cn(
+									"composer-command-menu__item",
+									active && "composer-command-menu__item--active",
+								)}
+								onMouseDown={(event) => {
+									event.preventDefault();
+									onSelect(command);
+								}}
+							>
+								<Terminal
+									className="composer-command-menu__icon"
+									size={14}
+									strokeWidth={2}
+									aria-hidden
+								/>
+								<span className="min-w-0">
+									<span className="composer-command-menu__usage">
+										{command.usage}
+									</span>
+									<span className="composer-command-menu__description">
+										{command.description}
+									</span>
+								</span>
+							</button>
+						</li>
+					);
+				})}
+			</ul>
+		</div>
+	);
+}