@4djs/assistant 0.0.0

package/src/react/components/chat/ChatInteractivePrompt/choices-prompt.tsx

@@ -0,0 +1,262 @@
+import { Check, ListChecks } from "lucide-react";
+import { useEffect, useState } from "react";
+import type {
+	ChoiceOption,
+	ChoicesToolArgs,
+	ChoicesToolResult,
+} from "../../../../core/interactive-tools/index.ts";
+import { useAssistantActions } from "../../../context.tsx";
+import { cn } from "../../../utils/cn.ts";
+import { InteractivePromptShell } from "./shell.tsx";
+import { isCompactTokenLabel, optionKeyLabel } from "./utils.ts";
+
+function ChoiceOptionCard({
+	option,
+	index,
+	checked,
+	inputType,
+	name,
+	disabled,
+	onSelect,
+}: {
+	option: ChoiceOption;
+	index: number;
+	checked: boolean;
+	inputType: "radio" | "checkbox";
+	name: string;
+	disabled: boolean;
+	onSelect: (checked: boolean) => void;
+}) {
+	const inputId = `${name}-${option.id}`;
+	const keyLabel = optionKeyLabel(index);
+	const compactLabel = isCompactTokenLabel(option.label);
+
+	return (
+		<label
+			htmlFor={inputId}
+			className={cn(
+				"assistant-interactive-choice group",
+				checked && "assistant-interactive-choice--selected",
+				disabled && "assistant-interactive-choice--disabled",
+			)}
+		>
+			<input
+				id={inputId}
+				type={inputType}
+				name={inputType === "radio" ? name : undefined}
+				checked={checked}
+				disabled={disabled}
+				onChange={(event) =>
+					onSelect(inputType === "radio" ? true : event.target.checked)
+				}
+				className="peer sr-only"
+			/>
+
+			<span
+				aria-hidden
+				className={cn(
+					"assistant-interactive-choice__check",
+					checked && "assistant-interactive-choice__check--on",
+				)}
+			>
+				{checked ? <Check className="size-2.5 stroke-[3]" /> : null}
+			</span>
+
+			<span className="assistant-interactive-choice__content">
+				<span
+					className={cn(
+						"assistant-interactive-choice__label",
+						compactLabel && "assistant-interactive-choice__label--mono",
+					)}
+				>
+					{option.label}
+				</span>
+				{option.description ? (
+					<span className="assistant-interactive-choice__description">
+						{option.description}
+					</span>
+				) : null}
+			</span>
+
+			<kbd className="assistant-interactive-kbd">{keyLabel}</kbd>
+		</label>
+	);
+}
+
+export function ChoicesPrompt({
+	args,
+	callId,
+	disabled,
+}: {
+	args: ChoicesToolArgs;
+	callId: string;
+	disabled: boolean;
+}) {
+	const { submitInteractiveToolResult, cancelInteractiveToolResult } =
+		useAssistantActions();
+	const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+	const selectionCount = selectedIds.length;
+	const meetsMinimum = selectionCount >= args.minSelections;
+	const meetsMaximum =
+		args.maxSelections === undefined
+			? true
+			: selectionCount <= args.maxSelections;
+
+	function submitSelection(ids: string[]) {
+		const result: ChoicesToolResult = { selected: ids };
+		submitInteractiveToolResult(callId, result);
+	}
+
+	function toggleOption(optionId: string, checked: boolean) {
+		if (args.allowMultiple) {
+			setSelectedIds((current) => {
+				if (checked) {
+					if (
+						args.maxSelections !== undefined &&
+						current.length >= args.maxSelections
+					) {
+						return current;
+					}
+					return [...new Set([...current, optionId])];
+				}
+				return current.filter((id) => id !== optionId);
+			});
+			return;
+		}
+
+		const next = checked ? [optionId] : [];
+		setSelectedIds(next);
+		if (checked && !disabled) {
+			submitSelection(next);
+		}
+	}
+
+	function handleSubmit() {
+		if (!meetsMinimum || !meetsMaximum) return;
+		submitSelection(selectedIds);
+	}
+
+	useEffect(() => {
+		if (disabled) return;
+
+		function onKeyDown(event: KeyboardEvent) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				cancelInteractiveToolResult(callId);
+				return;
+			}
+
+			if (
+				event.key === "Enter" &&
+				args.allowMultiple &&
+				meetsMinimum &&
+				meetsMaximum
+			) {
+				event.preventDefault();
+				submitInteractiveToolResult(callId, { selected: selectedIds });
+				return;
+			}
+
+			if (!/^[1-9]$/.test(event.key)) return;
+
+			const index = Number(event.key) - 1;
+			const option = args.options[index];
+			if (!option) return;
+
+			event.preventDefault();
+			if (args.allowMultiple) {
+				setSelectedIds((current) => {
+					const isSelected = current.includes(option.id);
+					if (isSelected) {
+						return current.filter((id) => id !== option.id);
+					}
+					if (
+						args.maxSelections !== undefined &&
+						current.length >= args.maxSelections
+					) {
+						return current;
+					}
+					return [...new Set([...current, option.id])];
+				});
+				return;
+			}
+
+			const next = [option.id];
+			setSelectedIds(next);
+			submitInteractiveToolResult(callId, { selected: next });
+		}
+
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		disabled,
+		callId,
+		args.options,
+		args.allowMultiple,
+		args.maxSelections,
+		selectedIds,
+		meetsMinimum,
+		meetsMaximum,
+		cancelInteractiveToolResult,
+		submitInteractiveToolResult,
+	]);
+
+	const title = args.allowMultiple ? "Choose options" : "Choose one";
+
+	return (
+		<InteractivePromptShell
+			icon={ListChecks}
+			title={title}
+			keyboardHint={disabled ? undefined : "1–9 · Enter · Esc"}
+			actions={
+				args.allowMultiple ? (
+					<>
+						<button
+							type="button"
+							className="btn btn-secondary btn-compact"
+							disabled={disabled}
+							onClick={() => cancelInteractiveToolResult(callId)}
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							className="btn btn-primary btn-compact"
+							disabled={disabled || !meetsMinimum || !meetsMaximum}
+							onClick={handleSubmit}
+						>
+							{args.submitLabel}
+							{selectionCount > 0 ? ` (${selectionCount})` : ""}
+						</button>
+					</>
+				) : (
+					<button
+						type="button"
+						className="btn btn-secondary btn-compact"
+						disabled={disabled}
+						onClick={() => cancelInteractiveToolResult(callId)}
+					>
+						Cancel
+					</button>
+				)
+			}
+		>
+			<p className="assistant-interactive-prompt__message">{args.message}</p>
+			<div className="assistant-interactive-choice-list">
+				{args.options.map((option, index) => (
+					<ChoiceOptionCard
+						key={option.id}
+						option={option}
+						index={index}
+						checked={selectedIds.includes(option.id)}
+						inputType={args.allowMultiple ? "checkbox" : "radio"}
+						name={`chat-choice-${callId}`}
+						disabled={disabled}
+						onSelect={(checked) => toggleOption(option.id, checked)}
+					/>
+				))}
+			</div>
+		</InteractivePromptShell>
+	);
+}

package/src/react/components/chat/ChatInteractivePrompt/confirmation-prompt.tsx

@@ -0,0 +1,97 @@
+import { AlertTriangle, ShieldCheck } from "lucide-react";
+import { useEffect } from "react";
+import type { ConfirmationToolArgs } from "../../../../core/interactive-tools/index.ts";
+import { useAssistantActions } from "../../../context.tsx";
+import { cn } from "../../../utils/cn.ts";
+import { InteractivePromptShell } from "./shell.tsx";
+import { isDestructiveAction } from "./utils.ts";
+
+export function ConfirmationPrompt({
+	args,
+	callId,
+	disabled,
+}: {
+	args: ConfirmationToolArgs;
+	callId: string;
+	disabled: boolean;
+}) {
+	const { submitInteractiveToolResult, cancelInteractiveToolResult } =
+		useAssistantActions();
+
+	const destructive = isDestructiveAction(args.action);
+
+	function handleConfirm() {
+		submitInteractiveToolResult(callId, { confirmed: true });
+	}
+
+	function handleCancel() {
+		cancelInteractiveToolResult(callId);
+	}
+
+	useEffect(() => {
+		if (disabled) return;
+
+		function onKeyDown(event: KeyboardEvent) {
+			if (event.key === "Enter" && !event.shiftKey) {
+				event.preventDefault();
+				submitInteractiveToolResult(callId, { confirmed: true });
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				cancelInteractiveToolResult(callId);
+			}
+		}
+
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		disabled,
+		callId,
+		submitInteractiveToolResult,
+		cancelInteractiveToolResult,
+	]);
+
+	return (
+		<InteractivePromptShell
+			icon={destructive ? AlertTriangle : ShieldCheck}
+			title={destructive ? "Confirm deletion" : "Confirm"}
+			tone={destructive ? "caution" : "default"}
+			keyboardHint={disabled ? undefined : "Enter · Esc"}
+			actions={
+				<>
+					<button
+						type="button"
+						className="btn btn-secondary btn-compact"
+						disabled={disabled}
+						onClick={handleCancel}
+					>
+						{args.cancelLabel}
+					</button>
+					<button
+						type="button"
+						className={cn(
+							"btn btn-compact",
+							destructive ? "btn-danger btn-danger--solid" : "btn-primary",
+						)}
+						disabled={disabled}
+						onClick={handleConfirm}
+					>
+						{args.confirmLabel}
+					</button>
+				</>
+			}
+		>
+			<p className="assistant-interactive-prompt__message">{args.message}</p>
+			{args.action ? (
+				<p
+					className={cn(
+						"assistant-interactive-prompt__action",
+						destructive && "assistant-interactive-prompt__action--caution",
+					)}
+				>
+					{args.action}
+				</p>
+			) : null}
+		</InteractivePromptShell>
+	);
+}

package/src/react/components/chat/ChatInteractivePrompt/index.tsx

@@ -0,0 +1,60 @@
+import {
+	parseChoicesArgs,
+	parseConfirmationArgs,
+	REQUEST_CHOICES_TOOL,
+	REQUEST_CONFIRMATION_TOOL,
+} from "../../../../core/interactive-tools/index.ts";
+import { useAssistant } from "../../../context.tsx";
+import { ChoicesPrompt } from "./choices-prompt.tsx";
+import { ConfirmationPrompt } from "./confirmation-prompt.tsx";
+
+export function ChatInteractivePrompt({
+	toolName,
+	args,
+	callId,
+	active,
+}: {
+	toolName: string;
+	args: Record<string, unknown>;
+	callId?: string;
+	active: boolean;
+}) {
+	const chatLoading = useAssistant((state) => state.chatLoading);
+	const disabled = !chatLoading;
+
+	if (!active || !callId) {
+		return null;
+	}
+
+	try {
+		if (toolName === REQUEST_CONFIRMATION_TOOL) {
+			return (
+				<ConfirmationPrompt
+					args={parseConfirmationArgs(args)}
+					callId={callId}
+					disabled={disabled}
+				/>
+			);
+		}
+
+		if (toolName === REQUEST_CHOICES_TOOL) {
+			return (
+				<ChoicesPrompt
+					args={parseChoicesArgs(args)}
+					callId={callId}
+					disabled={disabled}
+				/>
+			);
+		}
+	} catch (error) {
+		return (
+			<p className="text-[11px] text-[var(--text-danger)]">
+				{error instanceof Error
+					? error.message
+					: "Invalid interactive tool arguments"}
+			</p>
+		);
+	}
+
+	return null;
+}

package/src/react/components/chat/ChatInteractivePrompt/shell.tsx

@@ -0,0 +1,60 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../../../utils/cn.ts";
+
+type InteractivePromptShellProps = {
+	icon: LucideIcon;
+	title: string;
+	tone?: "default" | "caution";
+	children: ReactNode;
+	actions?: ReactNode;
+	keyboardHint?: string;
+};
+
+export function InteractivePromptShell({
+	icon: Icon,
+	title,
+	tone = "default",
+	children,
+	actions,
+	keyboardHint,
+}: InteractivePromptShellProps) {
+	return (
+		<div
+			className={cn(
+				"assistant-interactive-prompt",
+				tone === "caution" && "assistant-interactive-prompt--caution",
+			)}
+		>
+			<div className="assistant-interactive-prompt__main">
+				<span
+					className={cn(
+						"assistant-interactive-prompt__icon",
+						tone === "caution" && "assistant-interactive-prompt__icon--caution",
+					)}
+					aria-hidden
+				>
+					<Icon size={13} strokeWidth={2.25} />
+				</span>
+
+				<div className="assistant-interactive-prompt__content min-w-0 flex-1">
+					<p className="assistant-interactive-prompt__title">{title}</p>
+					{children ? (
+						<div className="assistant-interactive-prompt__body">{children}</div>
+					) : null}
+				</div>
+			</div>
+
+			{actions ? (
+				<div className="assistant-interactive-prompt__bar">
+					{keyboardHint ? (
+						<p className="assistant-interactive-prompt__hint">{keyboardHint}</p>
+					) : (
+						<span aria-hidden />
+					)}
+					<div className="assistant-interactive-prompt__actions">{actions}</div>
+				</div>
+			) : null}
+		</div>
+	);
+}

package/src/react/components/chat/ChatInteractivePrompt/utils.ts

@@ -0,0 +1,14 @@
+export function isDestructiveAction(action?: string): boolean {
+	if (!action) return false;
+	return /\b(delete|remove|disable|destroy|clear|reset|drop|purge|unlink|permanently)\b/i.test(
+		action,
+	);
+}
+
+export function optionKeyLabel(index: number): string {
+	return String(index + 1);
+}
+
+export function isCompactTokenLabel(label: string): boolean {
+	return label.length >= 16 && !/\s/.test(label);
+}

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

@@ -0,0 +1,150 @@
+import { Bot, User } from "lucide-react";
+import { SUGGEST_REPLIES_TOOL } from "../../../core/interactive-tools/index.ts";
+import { isLlmUnavailableMessage } from "../../../core/llm-config.ts";
+import type { AssistantMessage } from "../../../core/types.ts";
+import { MarkdownContent } from "../MarkdownContent.tsx";
+import { AssistantErrorCallout } from "./AssistantErrorCallout.tsx";
+import { ChatActivity } from "./ChatActivity.tsx";
+import { ChatReplySuggestions } from "./ChatReplySuggestions.tsx";
+import { LlmSetupPrompt } from "./LlmSetupPrompt.tsx";
+
+function TypingIndicator() {
+	return (
+		<output className="assistant-typing" aria-live="polite">
+			{[0, 1, 2].map((index) => (
+				<span
+					key={index}
+					className="assistant-typing-dot"
+					style={{ animationDelay: `${index * 160}ms` }}
+				/>
+			))}
+			<span className="sr-only">Assistant is thinking</span>
+		</output>
+	);
+}
+
+interface ChatMessageViewProps {
+	message: AssistantMessage;
+	onSuggestionSelect?: (reply: string) => void;
+	onOpenLlmSettings?: () => void;
+	onRetryError?: () => void;
+	retryErrorLoading?: boolean;
+}
+
+export function ChatMessageView({
+	message,
+	onSuggestionSelect,
+	onOpenLlmSettings,
+	onRetryError,
+	retryErrorLoading,
+}: ChatMessageViewProps) {
+	const isUser = message.role === "user";
+	const streaming = Boolean(message.streaming);
+	const activity = message.activity ?? [];
+	const visibleActivity =
+		message.replySuggestions && !streaming
+			? activity.filter((step) => step.name !== SUGGEST_REPLIES_TOOL)
+			: activity;
+	const hasActivity = visibleActivity.length > 0;
+	const hasActiveStep = visibleActivity.some(
+		(step) => step.status === "active",
+	);
+	const showTyping =
+		!isUser &&
+		streaming &&
+		!message.content.trim() &&
+		!hasActivity &&
+		!message.isError;
+	const showCard =
+		!isUser &&
+		(Boolean(message.content.trim()) ||
+			showTyping ||
+			hasActivity ||
+			message.isError ||
+			Boolean(message.replySuggestions));
+
+	if (isUser) {
+		return (
+			<article className="assistant-message assistant-message--user">
+				<div className="assistant-user-row">
+					<div className="assistant-user-bubble">
+						<p className="assistant-user-bubble__text">{message.content}</p>
+					</div>
+					<div className="assistant-user-avatar" aria-hidden>
+						<User size={14} strokeWidth={2.25} />
+					</div>
+				</div>
+			</article>
+		);
+	}
+
+	if (isLlmUnavailableMessage(message) && onOpenLlmSettings) {
+		return (
+			<article className="assistant-message assistant-message--assistant">
+				<div className="assistant-assistant-row">
+					<div className="assistant-bot-avatar" aria-hidden>
+						<Bot size={14} strokeWidth={2.25} />
+					</div>
+					<LlmSetupPrompt variant="inline" onConfigure={onOpenLlmSettings} />
+				</div>
+			</article>
+		);
+	}
+
+	return (
+		<article className="assistant-message assistant-message--assistant">
+			<div className="assistant-assistant-row">
+				<div className="assistant-bot-avatar" aria-hidden>
+					<Bot size={14} strokeWidth={2.25} />
+				</div>
+				{showCard ? (
+					<div
+						className={`assistant-assistant-card${message.isError ? " assistant-assistant-card--error" : ""}`}
+					>
+						<header className="assistant-assistant-card__meta">
+							<span className="assistant-role-label">Assistant</span>
+						</header>
+
+						{message.isError ? (
+							<div className="assistant-assistant-card__error">
+								<AssistantErrorCallout
+									error={message.content}
+									context="chat"
+									variant="embedded"
+									onRetry={onRetryError}
+									retryLoading={retryErrorLoading}
+								/>
+							</div>
+						) : message.content.trim() ? (
+							<div className="assistant-markdown">
+								<MarkdownContent
+									content={message.content}
+									streaming={streaming}
+								/>
+								{streaming && !hasActiveStep ? (
+									<span className="assistant-markdown__cursor" aria-hidden />
+								) : null}
+							</div>
+						) : showTyping ? (
+							<div className="assistant-assistant-card__typing">
+								<TypingIndicator />
+							</div>
+						) : null}
+
+						{hasActivity ? (
+							<ChatActivity steps={visibleActivity} streaming={streaming} />
+						) : null}
+
+						{message.replySuggestions && !streaming && onSuggestionSelect ? (
+							<ChatReplySuggestions
+								suggestions={message.replySuggestions}
+								disabled={streaming}
+								onSelect={onSuggestionSelect}
+							/>
+						) : null}
+					</div>
+				) : null}
+			</div>
+		</article>
+	);
+}