@4djs/assistant 0.0.0

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

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

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

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

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

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