@4djs/assistant 0.0.0 → 0.0.1

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

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

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

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