@4djs/assistant 0.0.0 → 0.1.0

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

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

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

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