@4djs/assistant 0.0.0

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

@@ -0,0 +1,274 @@
+import { Check, ChevronRight, Loader2, Wrench } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+	type ChatActivityStep,
+	chatActivityStepLabel,
+	formatActivityJsonValue,
+	isEmptyActivityJson,
+	stepHasDetails,
+} from "../../../core/chat-activity.ts";
+import { isInteractiveChatTool } from "../../../core/interactive-tools/index.ts";
+import { HighlightedJsonCode } from "../HighlightedJsonCode.tsx";
+import { ChatInteractivePrompt } from "./ChatInteractivePrompt/index.tsx";
+
+interface ChatActivityProps {
+	steps: ChatActivityStep[];
+	streaming?: boolean;
+}
+
+const JSON_SCROLL_LINE_THRESHOLD = 10;
+
+function ActivityJsonCode({ value }: { value: string }) {
+	const lineCount = value.split("\n").length;
+	const needsScroll = lineCount > JSON_SCROLL_LINE_THRESHOLD;
+
+	return (
+		<pre
+			className="font-mono text-[11px] leading-snug wrap-break-word whitespace-pre-wrap"
+			style={needsScroll ? { maxHeight: "8rem", overflowY: "auto" } : undefined}
+		>
+			<HighlightedJsonCode code={value} className="text-[11px] leading-snug" />
+		</pre>
+	);
+}
+
+function JsonBlock({ label, value }: { label: string; value: string }) {
+	return (
+		<div className="min-w-0">
+			<p className="assistant-activity-step__json-label">{label}</p>
+			<div className="assistant-activity-step__json-block">
+				<ActivityJsonCode value={value} />
+			</div>
+		</div>
+	);
+}
+
+function StepDetailsBody({ step }: { step: ChatActivityStep }) {
+	const isInteractive =
+		step.kind === "tool" && isInteractiveChatTool(step.name);
+	const isWaiting = isInteractive && step.status === "active";
+
+	if (isInteractive) {
+		const formattedResult = step.error
+			? step.error
+			: formatActivityJsonValue(step.result);
+
+		return (
+			<div
+				className={
+					isWaiting ? "assistant-activity-step-details--interactive" : undefined
+				}
+			>
+				<ChatInteractivePrompt
+					toolName={step.name}
+					args={step.args}
+					callId={step.callId}
+					active={step.status === "active"}
+				/>
+				{formattedResult && step.status !== "active" ? (
+					<JsonBlock
+						label={step.status === "error" ? "Error" : "Result"}
+						value={formattedResult}
+					/>
+				) : null}
+			</div>
+		);
+	}
+
+	const formattedArgs = formatActivityJsonValue(step.args);
+	const formattedResult = step.error
+		? step.error
+		: formatActivityJsonValue(step.result);
+	const showArgs = formattedArgs && !isEmptyActivityJson(step.args);
+
+	return (
+		<div className="space-y-2">
+			{showArgs ? <JsonBlock label="Arguments" value={formattedArgs} /> : null}
+			{step.status === "active" && !isInteractiveChatTool(step.name) ? (
+				<p className="text-[11px] text-[var(--text-chat-tertiary)]">Running…</p>
+			) : formattedResult ? (
+				<JsonBlock
+					label={step.status === "error" ? "Error" : "Result"}
+					value={formattedResult}
+				/>
+			) : null}
+		</div>
+	);
+}
+
+function StepStatusIcon({ step }: { step: ChatActivityStep }) {
+	if (step.status === "active") {
+		return <Loader2 size={12} className="assistant-icon-spin" aria-hidden />;
+	}
+	if (step.status === "error") {
+		return <Wrench size={12} aria-hidden />;
+	}
+	return <Check size={12} strokeWidth={2.5} aria-hidden />;
+}
+
+function stepIconClasses(step: ChatActivityStep): string {
+	if (step.status === "active") {
+		return "assistant-trace-icon assistant-trace-icon--active";
+	}
+	if (step.status === "error") {
+		return "assistant-trace-icon assistant-trace-icon--error";
+	}
+	return "assistant-trace-icon";
+}
+
+function ActivityStepRow({
+	step,
+	expanded,
+	onToggle,
+	isLast,
+}: {
+	step: ChatActivityStep;
+	expanded: boolean;
+	onToggle: () => void;
+	isLast: boolean;
+}) {
+	const isExpandable =
+		stepHasDetails(step) || step.kind === "tool" || step.status === "active";
+	const isWaitingInteractive =
+		step.kind === "tool" &&
+		isInteractiveChatTool(step.name) &&
+		step.status === "active";
+	const label = chatActivityStepLabel(step);
+
+	return (
+		<li
+			className={
+				isWaitingInteractive
+					? "assistant-activity-step assistant-activity-step--waiting"
+					: "assistant-activity-step"
+			}
+		>
+			<div className="assistant-activity-step__rail">
+				<span aria-hidden className={stepIconClasses(step)}>
+					<StepStatusIcon step={step} />
+				</span>
+				{!isLast ? (
+					<span aria-hidden className="assistant-activity-step__connector" />
+				) : null}
+			</div>
+
+			<div className="assistant-activity-step__body">
+				{isExpandable ? (
+					<button
+						type="button"
+						className={`assistant-activity-step__header${step.status === "active" ? " assistant-activity-step__header--active" : ""}`}
+						aria-expanded={expanded}
+						onClick={onToggle}
+					>
+						<ChevronRight
+							size={14}
+							className={`assistant-activity-step__chevron${expanded ? " assistant-activity-step__chevron--open" : ""}`}
+							aria-hidden
+						/>
+						<span className="assistant-activity-step__label">
+							<Wrench
+								size={12}
+								className="assistant-activity-step__tool-icon"
+								aria-hidden
+							/>
+							<span className="assistant-activity-step__label-text">
+								{label}
+							</span>
+						</span>
+					</button>
+				) : (
+					<div className="assistant-activity-step__header assistant-activity-step__header--static">
+						<span className="assistant-activity-step__label">
+							<span className="assistant-activity-step__label-text">
+								{label}
+							</span>
+						</span>
+					</div>
+				)}
+
+				{expanded && isExpandable ? (
+					<div
+						className={`assistant-activity-step__details${isWaitingInteractive ? " assistant-activity-step__details--interactive" : ""}`}
+					>
+						<StepDetailsBody step={step} />
+					</div>
+				) : null}
+			</div>
+		</li>
+	);
+}
+
+function useActivityExpansion(steps: ChatActivityStep[]) {
+	const [expandedStepId, setExpandedStepId] = useState<string | null>(null);
+
+	useEffect(() => {
+		const activeStep = steps.find((step) => step.status === "active");
+		if (!activeStep) return;
+		setExpandedStepId((current) =>
+			current === activeStep.id ? current : activeStep.id,
+		);
+	}, [steps]);
+
+	function toggleStep(stepId: string) {
+		setExpandedStepId((current) => (current === stepId ? null : stepId));
+	}
+
+	return { expandedStepId, toggleStep };
+}
+
+export function ChatActivity({ steps, streaming }: ChatActivityProps) {
+	const [panelCollapsed, setPanelCollapsed] = useState(false);
+	const { expandedStepId, toggleStep } = useActivityExpansion(steps);
+
+	const hasActiveStep = steps.some((step) => step.status === "active");
+
+	useEffect(() => {
+		if (streaming || hasActiveStep) {
+			setPanelCollapsed(false);
+		}
+	}, [streaming, hasActiveStep]);
+
+	if (steps.length === 0) return null;
+
+	return (
+		<div
+			className="assistant-activity assistant-activity--embedded"
+			role="status"
+			aria-live={streaming || hasActiveStep ? "polite" : "off"}
+		>
+			<div className="assistant-activity__header">
+				<button
+					type="button"
+					className="assistant-activity__toggle"
+					aria-expanded={!panelCollapsed}
+					onClick={() => setPanelCollapsed((value) => !value)}
+				>
+					<ChevronRight
+						size={14}
+						className={`assistant-activity__toggle-chevron${panelCollapsed ? "" : " assistant-activity__toggle-chevron--open"}`}
+						aria-hidden
+					/>
+					<span className="assistant-activity__title">Trace</span>
+					<span className="assistant-activity__count">{steps.length}</span>
+				</button>
+				{hasActiveStep ? (
+					<span className="assistant-activity__live">Live</span>
+				) : null}
+			</div>
+
+			{!panelCollapsed ? (
+				<ol className="assistant-activity__steps">
+					{steps.map((step, index) => (
+						<ActivityStepRow
+							key={step.id}
+							step={step}
+							expanded={expandedStepId === step.id}
+							onToggle={() => toggleStep(step.id)}
+							isLast={index === steps.length - 1}
+						/>
+					))}
+				</ol>
+			) : null}
+		</div>
+	);
+}

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

@@ -0,0 +1,189 @@
+import {
+	Loader2,
+	SendHorizontal,
+	Settings2,
+	Sparkles,
+	Square,
+	Trash2,
+} from "lucide-react";
+import type { KeyboardEvent, RefObject } from "react";
+import type { ChatCommandSuggestion } from "../../../core/chat-commands.ts";
+import { listChatCommands } from "../../../core/chat-commands.ts";
+import { ModelSelector } from "../ModelSelector.tsx";
+import { ComposerCommandMenu } from "./ComposerCommandMenu.tsx";
+
+interface ChatComposerToolbar {
+	showLlmSettings?: boolean;
+	onOpenLlmSettings?: () => void;
+	showGenerateSuggestions?: boolean;
+	onGenerateSuggestions?: () => void;
+	suggestionsLoading?: boolean;
+	showClear?: boolean;
+	onClear?: () => void;
+	clearDisabled?: boolean;
+}
+
+interface ChatComposerProps {
+	input: string;
+	onInputChange: (value: string) => void;
+	onSubmit: () => void;
+	onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+	streaming: boolean;
+	onStop: () => void;
+	textareaRef?: RefObject<HTMLTextAreaElement | null>;
+	llmEnabled: boolean;
+	disabled?: boolean;
+	/** When true, only blocks message input and send — toolbar actions stay available. */
+	inputDisabled?: boolean;
+	placeholder?: string;
+	toolbar?: ChatComposerToolbar;
+	commandMenu?: {
+		open: boolean;
+		commands: ChatCommandSuggestion[];
+		selectedIndex: number;
+		onSelect: (command: ChatCommandSuggestion) => void;
+	};
+}
+
+export function ChatComposer({
+	input,
+	onInputChange,
+	onSubmit,
+	onKeyDown,
+	streaming,
+	onStop,
+	textareaRef,
+	llmEnabled,
+	disabled,
+	inputDisabled,
+	placeholder = "Ask the assistant…",
+	toolbar,
+	commandMenu,
+}: ChatComposerProps) {
+	const commandHint = listChatCommands("assistant")
+		.map((command) => `/${command.name}`)
+		.join(" · ");
+
+	const blockInput = inputDisabled ?? disabled ?? false;
+
+	const showToolbar =
+		toolbar?.showLlmSettings ||
+		toolbar?.showGenerateSuggestions ||
+		toolbar?.showClear ||
+		llmEnabled;
+	const showLlmSettings = toolbar?.showLlmSettings === true;
+	const showGenerateSuggestions = toolbar?.showGenerateSuggestions === true;
+	const showClear = toolbar?.showClear === true;
+
+	return (
+		<div>
+			<div className="assistant-composer">
+				{commandMenu?.open ? (
+					<ComposerCommandMenu
+						commands={commandMenu.commands}
+						selectedIndex={commandMenu.selectedIndex}
+						onSelect={commandMenu.onSelect}
+					/>
+				) : null}
+				<div className="assistant-composer__input-row">
+					<textarea
+						ref={textareaRef}
+						className="assistant-composer__textarea"
+						value={input}
+						onChange={(event) => onInputChange(event.target.value)}
+						onKeyDown={onKeyDown}
+						placeholder={placeholder}
+						rows={2}
+						disabled={blockInput || streaming}
+						aria-label="Chat message"
+					/>
+					{streaming ? (
+						<button
+							type="button"
+							className="assistant-btn assistant-btn--secondary assistant-composer__stop"
+							aria-label="Stop"
+							onClick={onStop}
+						>
+							<Square size={14} className="fill-current" aria-hidden />
+						</button>
+					) : (
+						<button
+							type="button"
+							className="assistant-btn assistant-btn--primary assistant-composer__send"
+							aria-label="Send"
+							disabled={blockInput || !input.trim()}
+							onClick={onSubmit}
+						>
+							<SendHorizontal size={16} aria-hidden />
+						</button>
+					)}
+				</div>
+				{showToolbar ? (
+					<div className="assistant-composer__footer">
+						{llmEnabled ? (
+							<ModelSelector
+								disabled={blockInput || streaming}
+								variant="footer"
+								dropUp
+							/>
+						) : null}
+						{showLlmSettings || showGenerateSuggestions || showClear ? (
+							<div className="assistant-composer__tools">
+								{showLlmSettings ? (
+									<button
+										type="button"
+										className="assistant-btn assistant-btn--ghost assistant-composer__tool"
+										onClick={toolbar?.onOpenLlmSettings}
+										disabled={streaming}
+										aria-label="LLM settings"
+										title="LLM settings"
+									>
+										<Settings2 size={16} aria-hidden />
+									</button>
+								) : null}
+								{showGenerateSuggestions ? (
+									<button
+										type="button"
+										className="assistant-btn assistant-btn--ghost assistant-composer__tool"
+										onClick={toolbar?.onGenerateSuggestions}
+										disabled={
+											blockInput || streaming || toolbar?.suggestionsLoading
+										}
+										aria-label="Generate suggestions"
+										title="Generate suggestions"
+									>
+										{toolbar?.suggestionsLoading ? (
+											<Loader2
+												size={16}
+												className="assistant-composer__tool-spinner"
+												aria-hidden
+											/>
+										) : (
+											<Sparkles size={16} aria-hidden />
+										)}
+									</button>
+								) : null}
+								{showClear ? (
+									<button
+										type="button"
+										className="assistant-btn assistant-btn--ghost assistant-composer__tool"
+										onClick={toolbar?.onClear}
+										disabled={streaming || toolbar?.clearDisabled}
+										aria-label="Clear conversation"
+										title="Clear conversation"
+									>
+										<Trash2 size={16} aria-hidden />
+									</button>
+								) : null}
+							</div>
+						) : null}
+					</div>
+				) : null}
+			</div>
+			<p className="assistant-composer__hint">
+				Enter to send · Shift+Enter for new line
+				{commandHint ? <> · {commandHint}</> : null}
+			</p>
+		</div>
+	);
+}

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

@@ -0,0 +1,145 @@
+import {
+	Database,
+	Loader2,
+	RefreshCw,
+	Search,
+	Sparkles,
+	Zap,
+} from "lucide-react";
+import type { useSuggestedPrompts } from "../../hooks/use-suggested-prompts.ts";
+import type { AssistantEmptyStateConfig } from "../../types.ts";
+import { SuggestedPromptsList } from "./SuggestedPromptsList.tsx";
+
+const CAPABILITIES = [
+	{ icon: Database, label: "Catalog" },
+	{ icon: Search, label: "Query" },
+	{ icon: Zap, label: "Mutate" },
+] as const;
+
+interface ChatEmptyStateProps {
+	config: AssistantEmptyStateConfig;
+	suggestions: ReturnType<typeof useSuggestedPrompts>;
+	onSelect: (prompt: string) => void;
+}
+
+export function ChatEmptyState({
+	config,
+	suggestions,
+	onSelect,
+}: ChatEmptyStateProps) {
+	const { prompts, loading, error, useDynamic, refresh, hasFetched } =
+		suggestions;
+
+	function handleFetch() {
+		void refresh();
+	}
+
+	const showStaticPrompts = !useDynamic && prompts.length > 0;
+	const showDynamicFetch = useDynamic && !hasFetched && !loading;
+	const showDynamicResults = useDynamic && (hasFetched || loading);
+
+	return (
+		<div className="assistant-empty-state">
+			<div className="assistant-empty-state__card">
+				<div className="assistant-empty-state__card-glow" aria-hidden />
+				<div className="assistant-empty-state__card-inner">
+					<p className="assistant-empty-state__eyebrow">AI Assistant</p>
+
+					<div className="assistant-empty-state__icon-ring" aria-hidden>
+						<Sparkles size={22} strokeWidth={2} />
+					</div>
+
+					<h3 className="assistant-empty-state__title">{config.title}</h3>
+					<p className="assistant-empty-state__description">
+						{config.description}
+					</p>
+
+					<div className="assistant-empty-state__capabilities">
+						{CAPABILITIES.map(({ icon: Icon, label }) => (
+							<span key={label} className="assistant-empty-state__capability">
+								<Icon size={12} strokeWidth={2} aria-hidden />
+								{label}
+							</span>
+						))}
+					</div>
+
+					{showDynamicFetch ? (
+						<button
+							type="button"
+							className="assistant-empty-state__cta"
+							onClick={handleFetch}
+						>
+							<span className="assistant-empty-state__cta-icon" aria-hidden>
+								<Sparkles size={18} strokeWidth={2} />
+							</span>
+							<span className="assistant-empty-state__cta-text">
+								<span className="assistant-empty-state__cta-label">
+									Generate suggestions
+								</span>
+								<span className="assistant-empty-state__cta-hint">
+									Tailored prompts based on your live catalog
+								</span>
+							</span>
+						</button>
+					) : null}
+				</div>
+			</div>
+
+			{showDynamicResults ? (
+				<section
+					className="assistant-empty-state__section"
+					aria-busy={loading || undefined}
+				>
+					<header className="assistant-empty-state__section-header">
+						<h4 className="assistant-empty-state__section-title">
+							{loading ? (
+								<>
+									<Loader2
+										size={14}
+										className="assistant-empty-state__section-spinner"
+										aria-hidden
+									/>
+									Generating suggestions
+								</>
+							) : (
+								<>
+									<Sparkles size={14} aria-hidden />
+									Suggested for you
+								</>
+							)}
+						</h4>
+						{hasFetched && !loading ? (
+							<button
+								type="button"
+								className="assistant-btn assistant-btn--ghost assistant-empty-state__section-refresh"
+								onClick={handleFetch}
+							>
+								<RefreshCw size={14} aria-hidden />
+								Regenerate
+							</button>
+						) : null}
+					</header>
+					<SuggestedPromptsList
+						prompts={prompts}
+						loading={loading}
+						error={error}
+						onRetry={handleFetch}
+						retryLoading={loading}
+						onSelect={onSelect}
+					/>
+				</section>
+			) : null}
+
+			{showStaticPrompts ? (
+				<section className="assistant-empty-state__section">
+					<header className="assistant-empty-state__section-header">
+						<h4 className="assistant-empty-state__section-title">
+							Quick starts
+						</h4>
+					</header>
+					<SuggestedPromptsList prompts={prompts} onSelect={onSelect} />
+				</section>
+			) : null}
+		</div>
+	);
+}