@4djs/assistant 0.0.0 → 0.0.1

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

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

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

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

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

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

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