@4djs/assistant 0.0.0 → 0.1.0

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

@@ -1,348 +0,0 @@
-import {
-	ChevronDown,
-	Loader2,
-	PlugZap,
-	RotateCcw,
-	Settings2,
-	X,
-} from "lucide-react";
-import { type FormEvent, useCallback, useEffect, useState } from "react";
-import type { LlmSettingsFormState } from "../../../core/llm-settings-storage.ts";
-import { isLlmSettingsFormDirty } from "../../../core/llm-settings-storage.ts";
-import { useAssistantActions } from "../../context.tsx";
-import { SystemPromptField } from "./SystemPromptField.tsx";
-
-interface LlmSettingsStripProps {
-	open: boolean;
-	onClose: () => void;
-}
-
-export function LlmSettingsStrip({ open, onClose }: LlmSettingsStripProps) {
-	const {
-		getLlmSettingsForm,
-		saveLlmSettings,
-		clearLlmSettings,
-		testLlmSettings,
-		llmSettingsHasOverrides,
-	} = useAssistantActions();
-
-	const [form, setForm] = useState<LlmSettingsFormState | null>(null);
-	const [savedForm, setSavedForm] = useState<LlmSettingsFormState | null>(null);
-	const [loading, setLoading] = useState(false);
-	const [testing, setTesting] = useState(false);
-	const [saving, setSaving] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [testResult, setTestResult] = useState<string | null>(null);
-	const [hasOverrides, setHasOverrides] = useState(false);
-	const [advancedOpen, setAdvancedOpen] = useState(false);
-
-	const loadForm = useCallback(async () => {
-		setLoading(true);
-		setError(null);
-		setTestResult(null);
-		try {
-			const next = await getLlmSettingsForm();
-			setForm(next);
-			setSavedForm(next);
-			setHasOverrides(await llmSettingsHasOverrides());
-			setAdvancedOpen(false);
-		} catch (loadError) {
-			setError(
-				loadError instanceof Error
-					? loadError.message
-					: "Failed to load LLM settings",
-			);
-		} finally {
-			setLoading(false);
-		}
-	}, [getLlmSettingsForm, llmSettingsHasOverrides]);
-
-	useEffect(() => {
-		if (open) {
-			void loadForm();
-		}
-	}, [open, loadForm]);
-
-	if (!open) return null;
-
-	function updateField<K extends keyof LlmSettingsFormState>(
-		key: K,
-		value: LlmSettingsFormState[K],
-	) {
-		setForm((current) => (current ? { ...current, [key]: value } : current));
-		setTestResult(null);
-		setError(null);
-	}
-
-	async function handleTest() {
-		if (!form) return;
-		setTesting(true);
-		setError(null);
-		setTestResult(null);
-		try {
-			const result = await testLlmSettings(form);
-			if (result.ok) {
-				setTestResult(`Connected · ${result.model}`);
-			} else {
-				setError(result.error);
-			}
-		} finally {
-			setTesting(false);
-		}
-	}
-
-	async function handleSave() {
-		if (!form || saving) return;
-		setSaving(true);
-		setError(null);
-		try {
-			await saveLlmSettings(form);
-			onClose();
-		} catch (saveError) {
-			setError(
-				saveError instanceof Error
-					? saveError.message
-					: "Failed to save LLM settings",
-			);
-		} finally {
-			setSaving(false);
-		}
-	}
-
-	async function handleSubmit(event: FormEvent) {
-		event.preventDefault();
-		await handleSave();
-	}
-
-	async function handleReset() {
-		if (!form) return;
-		setSaving(true);
-		setError(null);
-		setTestResult(null);
-		try {
-			if (hasOverrides) {
-				await clearLlmSettings();
-			}
-			await loadForm();
-		} catch (resetError) {
-			setError(
-				resetError instanceof Error
-					? resetError.message
-					: "Failed to reset LLM settings",
-			);
-		} finally {
-			setSaving(false);
-		}
-	}
-
-	const isDirty =
-		form && savedForm ? isLlmSettingsFormDirty(form, savedForm) : false;
-	const canReset = Boolean(hasOverrides || isDirty);
-
-	const statusMessage = error ?? testResult;
-	const statusTone = error ? "error" : testResult ? "success" : null;
-
-	return (
-		<section className="assistant-llm-settings-strip" aria-label="LLM settings">
-			<div className="assistant-llm-settings-strip__header">
-				<div className="assistant-llm-settings-strip__title">
-					<Settings2 size={14} aria-hidden />
-					<span>LLM settings</span>
-				</div>
-				<div className="assistant-llm-settings-strip__header-actions">
-					<button
-						type="button"
-						className="assistant-btn assistant-btn--ghost assistant-llm-settings-strip__header-btn"
-						onClick={() => void handleTest()}
-						disabled={!form || saving || testing}
-						aria-label="Test connection"
-						title="Test connection"
-					>
-						{testing ? (
-							<Loader2 size={14} className="assistant-icon-spin" aria-hidden />
-						) : (
-							<PlugZap size={14} aria-hidden />
-						)}
-					</button>
-					{canReset ? (
-						<button
-							type="button"
-							className="assistant-btn assistant-btn--ghost assistant-llm-settings-strip__header-btn"
-							onClick={() => void handleReset()}
-							disabled={saving || testing}
-							aria-label="Reset all settings"
-							title="Reset all settings"
-						>
-							<RotateCcw size={14} aria-hidden />
-						</button>
-					) : null}
-					<button
-						type="button"
-						className="assistant-btn assistant-btn--ghost assistant-llm-settings-strip__header-btn"
-						onClick={onClose}
-						aria-label="Close LLM settings"
-					>
-						<X size={14} aria-hidden />
-					</button>
-				</div>
-			</div>
-
-			{loading ? (
-				<div className="assistant-llm-settings-strip__loading" role="status">
-					<Loader2 size={16} className="assistant-icon-spin" aria-hidden />
-					Loading…
-				</div>
-			) : form ? (
-				<form
-					className="assistant-llm-settings-strip__form"
-					onSubmit={handleSubmit}
-				>
-					<div className="assistant-llm-settings-strip__fields">
-						<label className="assistant-llm-settings-strip__field">
-							<span className="assistant-llm-settings-strip__label">
-								Base URL
-							</span>
-							<input
-								className="assistant-input assistant-llm-settings-strip__input assistant-llm-settings-strip__input--mono"
-								type="url"
-								value={form.baseUrl}
-								onChange={(event) => updateField("baseUrl", event.target.value)}
-								placeholder="https://api.openai.com/v1"
-								autoComplete="off"
-								spellCheck={false}
-							/>
-						</label>
-
-						<label className="assistant-llm-settings-strip__field">
-							<span className="assistant-llm-settings-strip__label">
-								API key
-							</span>
-							<input
-								className="assistant-input assistant-llm-settings-strip__input"
-								type="password"
-								value={form.apiKey}
-								onChange={(event) => updateField("apiKey", event.target.value)}
-								placeholder={
-									form.hasStoredApiKey
-										? "Configured — leave blank to keep"
-										: "sk-…"
-								}
-								autoComplete="off"
-								spellCheck={false}
-							/>
-						</label>
-
-						<label className="assistant-llm-settings-strip__field">
-							<span className="assistant-llm-settings-strip__label">Model</span>
-							<input
-								className="assistant-input assistant-llm-settings-strip__input"
-								type="text"
-								value={form.model}
-								onChange={(event) => updateField("model", event.target.value)}
-								placeholder="gpt-4o-mini"
-								autoComplete="off"
-								spellCheck={false}
-							/>
-						</label>
-
-						<button
-							type="button"
-							className="assistant-llm-settings-strip__advanced-toggle"
-							onClick={() => setAdvancedOpen((value) => !value)}
-							aria-expanded={advancedOpen}
-							aria-controls="assistant-llm-settings-advanced"
-						>
-							<ChevronDown
-								size={14}
-								className={`assistant-llm-settings-strip__chevron ${advancedOpen ? "assistant-llm-settings-strip__chevron--open" : ""}`.trim()}
-								aria-hidden
-							/>
-							Advanced
-						</button>
-
-						{advancedOpen ? (
-							<div
-								id="assistant-llm-settings-advanced"
-								className="assistant-llm-settings-strip__advanced"
-							>
-								<label className="assistant-llm-settings-strip__field">
-									<span className="assistant-llm-settings-strip__label">
-										Model list
-									</span>
-									<input
-										className="assistant-input assistant-llm-settings-strip__input"
-										type="text"
-										value={form.modelsText}
-										onChange={(event) =>
-											updateField("modelsText", event.target.value)
-										}
-										placeholder="Optional — comma-separated"
-										autoComplete="off"
-										spellCheck={false}
-									/>
-								</label>
-
-								<SystemPromptField
-									value={form.systemPrompt}
-									defaultPrompt={form.defaultSystemPrompt}
-									onChange={(next) => updateField("systemPrompt", next)}
-									onReset={() => updateField("systemPrompt", "")}
-									disabled={saving || testing}
-								/>
-							</div>
-						) : null}
-
-						{statusMessage ? (
-							<p
-								className={`assistant-llm-settings-strip__status assistant-llm-settings-strip__status--${statusTone}`.trim()}
-								role={error ? "alert" : "status"}
-							>
-								{statusMessage}
-							</p>
-						) : null}
-					</div>
-
-					<div className="assistant-llm-settings-strip__footer">
-						{canReset ? (
-							<button
-								type="button"
-								className="assistant-btn assistant-btn--ghost assistant-llm-settings-strip__footer-btn assistant-llm-settings-strip__footer-btn--reset"
-								onClick={() => void handleReset()}
-								disabled={saving || testing}
-							>
-								<RotateCcw size={14} aria-hidden />
-								Reset all
-							</button>
-						) : null}
-						<button
-							type="button"
-							className="assistant-btn assistant-btn--ghost assistant-llm-settings-strip__footer-btn"
-							onClick={onClose}
-							disabled={saving}
-						>
-							Cancel
-						</button>
-						<button
-							type="submit"
-							className="assistant-btn assistant-btn--primary assistant-llm-settings-strip__footer-btn"
-							disabled={saving || testing}
-						>
-							{saving ? (
-								<>
-									<Loader2
-										size={14}
-										className="assistant-icon-spin"
-										aria-hidden
-									/>
-									Saving
-								</>
-							) : (
-								"Save"
-							)}
-						</button>
-					</div>
-				</form>
-			) : null}
-		</section>
-	);
-}

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

@@ -1,58 +0,0 @@
-import { Settings2, Sparkles } from "lucide-react";
-
-interface LlmSetupPromptProps {
-	variant: "banner" | "inline";
-	onConfigure: () => void;
-}
-
-export function LlmSetupPrompt({ variant, onConfigure }: LlmSetupPromptProps) {
-	if (variant === "inline") {
-		return (
-			<div
-				className="assistant-llm-setup assistant-llm-setup--inline"
-				role="status"
-			>
-				<p className="assistant-llm-setup__copy">
-					<span className="assistant-llm-setup__label">LLM not connected.</span>{" "}
-					Add a cloud or local provider in{" "}
-					<button
-						type="button"
-						className="assistant-llm-setup__action"
-						onClick={onConfigure}
-					>
-						LLM settings
-					</button>
-					.
-				</p>
-			</div>
-		);
-	}
-
-	return (
-		<div
-			className="assistant-llm-setup assistant-llm-setup--banner"
-			role="status"
-		>
-			<div className="assistant-llm-setup__row">
-				<span className="assistant-llm-setup__badge" aria-hidden>
-					<Sparkles size={12} strokeWidth={2} />
-				</span>
-				<p className="assistant-llm-setup__copy">
-					<strong>Connect an LLM</strong>
-					<span className="assistant-llm-setup__sep" aria-hidden>
-						·
-					</span>
-					OpenAI-compatible endpoint — cloud or local
-				</p>
-				<button
-					type="button"
-					className="assistant-llm-setup__chip"
-					onClick={onConfigure}
-				>
-					<Settings2 size={12} strokeWidth={2} aria-hidden />
-					Configure
-				</button>
-			</div>
-		</div>
-	);
-}

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

@@ -1,11 +0,0 @@
-import { LlmSetupPrompt } from "./LlmSetupPrompt.tsx";
-
-interface LlmUnavailableBannerProps {
-	onConfigure: () => void;
-}
-
-export function LlmUnavailableBanner({
-	onConfigure,
-}: LlmUnavailableBannerProps) {
-	return <LlmSetupPrompt variant="banner" onConfigure={onConfigure} />;
-}

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

@@ -1,121 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { DEFAULT_PROMPT_ICON } from "../../lib/prompt-icons.ts";
-import type { AssistantSuggestedPromptWithIcon } from "../../types.ts";
-import { AssistantErrorCallout } from "./AssistantErrorCallout.tsx";
-
-function PromptSkeleton({
-	index,
-	compact,
-}: {
-	index: number;
-	compact?: boolean;
-}) {
-	return (
-		<div
-			className={`assistant-empty-state__prompt assistant-empty-state__prompt--skeleton ${compact ? "assistant-empty-state__prompt--compact" : ""}`.trim()}
-			style={{ animationDelay: `${index * 45}ms` }}
-			aria-hidden
-		>
-			<span className="assistant-empty-state__icon assistant-empty-state__icon--skeleton" />
-			<span className="assistant-empty-state__prompt-text">
-				<span className="assistant-empty-state__skeleton-line assistant-empty-state__skeleton-line--title" />
-				<span className="assistant-empty-state__skeleton-line assistant-empty-state__skeleton-line--hint" />
-			</span>
-		</div>
-	);
-}
-
-interface SuggestedPromptsListProps {
-	prompts: AssistantSuggestedPromptWithIcon[];
-	loading?: boolean;
-	error?: string | null;
-	onSelect: (prompt: string) => void;
-	onRetry?: () => void;
-	retryLoading?: boolean;
-	className?: string;
-	compact?: boolean;
-}
-
-export function SuggestedPromptsList({
-	prompts,
-	loading,
-	error,
-	onSelect,
-	onRetry,
-	retryLoading,
-	className,
-	compact,
-}: SuggestedPromptsListProps) {
-	if (loading) {
-		return (
-			<div
-				className={`assistant-empty-state__grid ${compact ? "assistant-empty-state__grid--compact" : ""} ${className ?? ""}`.trim()}
-				role="status"
-				aria-live="polite"
-				aria-busy="true"
-			>
-				<span className="sr-only">Loading suggestions</span>
-				{(compact ? ["a", "b", "c"] : ["a", "b", "c", "d", "e", "f"]).map(
-					(key, index) => (
-						<PromptSkeleton key={key} index={index} compact={compact} />
-					),
-				)}
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<AssistantErrorCallout
-				error={error}
-				context="suggestions"
-				variant="panel"
-				onRetry={onRetry}
-				retryLoading={retryLoading}
-				retryLabel="Regenerate"
-			/>
-		);
-	}
-
-	if (prompts.length === 0) {
-		return null;
-	}
-
-	return (
-		<div
-			className={`assistant-empty-state__grid ${compact ? "assistant-empty-state__grid--compact" : ""} ${className ?? ""}`.trim()}
-		>
-			{prompts.map(({ id, icon: Icon, label, hint, prompt }, index) => {
-				const PromptIcon = Icon ?? DEFAULT_PROMPT_ICON;
-				return (
-					<button
-						key={id}
-						type="button"
-						className={`assistant-empty-state__prompt ${compact ? "assistant-empty-state__prompt--compact" : ""}`.trim()}
-						style={{ animationDelay: `${index * 45}ms` }}
-						onClick={() => onSelect(prompt)}
-					>
-						<span className="assistant-empty-state__icon" aria-hidden>
-							<PromptIcon size={14} strokeWidth={2} />
-						</span>
-						<span className="assistant-empty-state__prompt-text">
-							<span className="assistant-empty-state__prompt-label">
-								{label}
-							</span>
-							{hint ? (
-								<span className="assistant-empty-state__prompt-hint">
-									{hint}
-								</span>
-							) : null}
-						</span>
-						<ChevronRight
-							size={14}
-							className="assistant-empty-state__prompt-arrow"
-							aria-hidden
-						/>
-					</button>
-				);
-			})}
-		</div>
-	);
-}

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

@@ -1,72 +0,0 @@
-import { Loader2, Sparkles, X } from "lucide-react";
-import type { useSuggestedPrompts } from "../../hooks/use-suggested-prompts.ts";
-import { SuggestedPromptsList } from "./SuggestedPromptsList.tsx";
-
-interface SuggestedPromptsStripProps {
-	open: boolean;
-	onClose: () => void;
-	onRefresh: () => void;
-	onSelect: (prompt: string) => void;
-	suggestions: ReturnType<typeof useSuggestedPrompts>;
-}
-
-export function SuggestedPromptsStrip({
-	open,
-	onClose,
-	onRefresh,
-	onSelect,
-	suggestions,
-}: SuggestedPromptsStripProps) {
-	if (!open) return null;
-
-	const { prompts, loading, error, hasFetched } = suggestions;
-
-	return (
-		<section
-			className="assistant-suggestions-strip"
-			aria-label="Suggested prompts"
-		>
-			<div className="assistant-suggestions-strip__header">
-				<div className="assistant-suggestions-strip__title">
-					<Sparkles size={14} aria-hidden />
-					<span>Suggestions</span>
-				</div>
-				<div className="assistant-suggestions-strip__actions">
-					<button
-						type="button"
-						className="assistant-btn assistant-btn--ghost assistant-suggestions-strip__refresh"
-						onClick={onRefresh}
-						disabled={loading}
-					>
-						{loading ? (
-							<Loader2 size={14} className="assistant-icon-spin" aria-hidden />
-						) : (
-							<Sparkles size={14} aria-hidden />
-						)}
-						{hasFetched ? "Regenerate" : "Generate"}
-					</button>
-					<button
-						type="button"
-						className="assistant-btn assistant-btn--ghost assistant-suggestions-strip__close"
-						onClick={onClose}
-						aria-label="Close suggestions"
-					>
-						<X size={14} aria-hidden />
-					</button>
-				</div>
-			</div>
-			<SuggestedPromptsList
-				prompts={prompts}
-				loading={loading}
-				error={error}
-				onRetry={onRefresh}
-				retryLoading={loading}
-				onSelect={(prompt) => {
-					onSelect(prompt);
-					onClose();
-				}}
-				compact
-			/>
-		</section>
-	);
-}