@agentuity/workbench 0.0.64 → 0.0.66

package/src/components/ai-elements/tool.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { Badge } from '../ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+import { cn } from '../../lib/utils';
+import type { ToolUIPart } from 'ai';
+import {
+	CheckCircleIcon,
+	ChevronDownIcon,
+	CircleIcon,
+	ClockIcon,
+	WrenchIcon,
+	XCircleIcon,
+} from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+import { isValidElement } from 'react';
+import { CodeBlock } from './code-block';
+
+export type ToolProps = ComponentProps<typeof Collapsible>;
+
+export const Tool = ({ className, ...props }: ToolProps) => (
+	<Collapsible className={cn('not-prose mb-4 w-full rounded-md border', className)} {...props} />
+);
+
+export type ToolHeaderProps = {
+	title?: string;
+	type: ToolUIPart['type'];
+	state: any;
+	className?: string;
+};
+
+const getStatusBadge = (status: any) => {
+	const labels: Record<string, string> = {
+		'input-streaming': 'Pending',
+		'input-available': 'Running',
+		'approval-requested': 'Awaiting Approval',
+		'approval-responded': 'Responded',
+		'output-available': 'Completed',
+		'output-error': 'Error',
+		'output-denied': 'Denied',
+	};
+
+	const icons: Record<string, ReactNode> = {
+		'input-streaming': <CircleIcon className="size-4" />,
+		'input-available': <ClockIcon className="size-4 animate-pulse" />,
+		'approval-requested': <ClockIcon className="size-4 text-yellow-600" />,
+		'approval-responded': <CheckCircleIcon className="size-4 text-blue-600" />,
+		'output-available': <CheckCircleIcon className="size-4 text-green-600" />,
+		'output-error': <XCircleIcon className="size-4 text-red-600" />,
+		'output-denied': <XCircleIcon className="size-4 text-orange-600" />,
+	};
+
+	return (
+		<Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
+			{icons[status]}
+			{labels[status]}
+		</Badge>
+	);
+};
+
+export const ToolHeader = ({ className, title, type, state, ...props }: ToolHeaderProps) => (
+	<CollapsibleTrigger
+		className={cn('flex w-full items-center justify-between gap-4 p-3', className)}
+		{...props}
+	>
+		<div className="flex items-center gap-2">
+			<WrenchIcon className="size-4 text-muted-foreground" />
+			<span className="font-medium text-sm">{title ?? type.split('-').slice(1).join('-')}</span>
+			{getStatusBadge(state)}
+		</div>
+		<ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+	</CollapsibleTrigger>
+);
+
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const ToolContent = ({ className, ...props }: ToolContentProps) => (
+	<CollapsibleContent
+		className={cn(
+			'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+			className
+		)}
+		{...props}
+	/>
+);
+
+export type ToolInputProps = ComponentProps<'div'> & {
+	input: ToolUIPart['input'];
+};
+
+export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
+	<div className={cn('space-y-2 overflow-hidden p-4', className)} {...props}>
+		<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+			Parameters
+		</h4>
+		<div className="rounded-md bg-muted/50">
+			<CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+		</div>
+	</div>
+);
+
+export type ToolOutputProps = ComponentProps<'div'> & {
+	output: ToolUIPart['output'];
+	errorText: ToolUIPart['errorText'];
+};
+
+export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
+	if (!(output || errorText)) {
+		return null;
+	}
+
+	let Output = <div>{output as ReactNode}</div>;
+
+	if (typeof output === 'object' && !isValidElement(output)) {
+		Output = <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />;
+	} else if (typeof output === 'string') {
+		Output = <CodeBlock code={output} language="json" />;
+	}
+
+	return (
+		<div className={cn('space-y-2 p-4', className)} {...props}>
+			<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+				{errorText ? 'Error' : 'Result'}
+			</h4>
+			<div
+				className={cn(
+					'overflow-x-auto rounded-md text-xs [&_table]:w-full',
+					errorText ? 'bg-destructive/10 text-destructive' : 'bg-muted/50 text-foreground'
+				)}
+			>
+				{errorText && <div>{errorText}</div>}
+				{Output}
+			</div>
+		</div>
+	);
+};

package/src/components/ai-elements/toolbar.tsx

@@ -0,0 +1,13 @@
+import { cn } from '../../lib/utils';
+import { NodeToolbar, Position } from '@xyflow/react';
+import type { ComponentProps } from 'react';
+
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+
+export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+	<NodeToolbar
+		className={cn('flex items-center gap-1 rounded-sm border bg-background p-1.5', className)}
+		position={Position.Bottom}
+		{...props}
+	/>
+);

package/src/components/ai-elements/web-preview.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+import { Button } from '../ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+import { Input } from '../ui/input';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import { cn } from '../../lib/utils';
+import { ChevronDownIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+export type WebPreviewContextValue = {
+	url: string;
+	setUrl: (url: string) => void;
+	consoleOpen: boolean;
+	setConsoleOpen: (open: boolean) => void;
+};
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+
+const useWebPreview = () => {
+	const context = useContext(WebPreviewContext);
+	if (!context) {
+		throw new Error('WebPreview components must be used within a WebPreview');
+	}
+	return context;
+};
+
+export type WebPreviewProps = ComponentProps<'div'> & {
+	defaultUrl?: string;
+	onUrlChange?: (url: string) => void;
+};
+
+export const WebPreview = ({
+	className,
+	children,
+	defaultUrl = '',
+	onUrlChange,
+	...props
+}: WebPreviewProps) => {
+	const [url, setUrl] = useState(defaultUrl);
+	const [consoleOpen, setConsoleOpen] = useState(false);
+
+	const handleUrlChange = (newUrl: string) => {
+		setUrl(newUrl);
+		onUrlChange?.(newUrl);
+	};
+
+	const contextValue: WebPreviewContextValue = {
+		url,
+		setUrl: handleUrlChange,
+		consoleOpen,
+		setConsoleOpen,
+	};
+
+	return (
+		<WebPreviewContext.Provider value={contextValue}>
+			<div
+				className={cn('flex size-full flex-col rounded-lg border bg-card', className)}
+				{...props}
+			>
+				{children}
+			</div>
+		</WebPreviewContext.Provider>
+	);
+};
+
+export type WebPreviewNavigationProps = ComponentProps<'div'>;
+
+export const WebPreviewNavigation = ({
+	className,
+	children,
+	...props
+}: WebPreviewNavigationProps) => (
+	<div className={cn('flex items-center gap-1 border-b p-2', className)} {...props}>
+		{children}
+	</div>
+);
+
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+	tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+	onClick,
+	disabled,
+	tooltip,
+	children,
+	...props
+}: WebPreviewNavigationButtonProps) => (
+	<TooltipProvider>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					className="h-8 w-8 p-0 hover:text-foreground"
+					disabled={disabled}
+					onClick={onClick}
+					size="sm"
+					variant="ghost"
+					{...props}
+				>
+					{children}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>{tooltip}</p>
+			</TooltipContent>
+		</Tooltip>
+	</TooltipProvider>
+);
+
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+
+export const WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }: WebPreviewUrlProps) => {
+	const { url, setUrl } = useWebPreview();
+	const [inputValue, setInputValue] = useState(url);
+
+	// Sync input value with context URL when it changes externally
+	useEffect(() => {
+		setInputValue(url);
+	}, [url]);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(event.target.value);
+		onChange?.(event);
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === 'Enter') {
+			const target = event.target as HTMLInputElement;
+			setUrl(target.value);
+		}
+		onKeyDown?.(event);
+	};
+
+	return (
+		<Input
+			className="h-8 flex-1 text-sm"
+			onChange={onChange ?? handleChange}
+			onKeyDown={handleKeyDown}
+			placeholder="Enter URL..."
+			value={value ?? inputValue}
+			{...props}
+		/>
+	);
+};
+
+export type WebPreviewBodyProps = ComponentProps<'iframe'> & {
+	loading?: ReactNode;
+};
+
+export const WebPreviewBody = ({ className, loading, src, ...props }: WebPreviewBodyProps) => {
+	const { url } = useWebPreview();
+
+	return (
+		<div className="flex-1">
+			<iframe
+				className={cn('size-full', className)}
+				sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+				src={(src ?? url) || undefined}
+				title="Preview"
+				{...props}
+			/>
+			{loading}
+		</div>
+	);
+};
+
+export type WebPreviewConsoleProps = ComponentProps<'div'> & {
+	logs?: Array<{
+		level: 'log' | 'warn' | 'error';
+		message: string;
+		timestamp: Date;
+	}>;
+};
+
+export const WebPreviewConsole = ({
+	className,
+	logs = [],
+	children,
+	...props
+}: WebPreviewConsoleProps) => {
+	const { consoleOpen, setConsoleOpen } = useWebPreview();
+
+	return (
+		<Collapsible
+			className={cn('border-t bg-muted/50 font-mono text-sm', className)}
+			onOpenChange={setConsoleOpen}
+			open={consoleOpen}
+			{...props}
+		>
+			<CollapsibleTrigger asChild>
+				<Button
+					className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
+					variant="ghost"
+				>
+					Console
+					<ChevronDownIcon
+						className={cn(
+							'h-4 w-4 transition-transform duration-200',
+							consoleOpen && 'rotate-180'
+						)}
+					/>
+				</Button>
+			</CollapsibleTrigger>
+			<CollapsibleContent
+				className={cn(
+					'px-4 pb-4',
+					'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in'
+				)}
+			>
+				<div className="max-h-48 space-y-1 overflow-y-auto">
+					{logs.length === 0 ? (
+						<p className="text-muted-foreground">No console output</p>
+					) : (
+						logs.map((log, index) => (
+							<div
+								className={cn(
+									'text-xs',
+									log.level === 'error' && 'text-destructive',
+									log.level === 'warn' && 'text-yellow-600',
+									log.level === 'log' && 'text-foreground'
+								)}
+								key={`${log.timestamp.getTime()}-${index}`}
+							>
+								<span className="text-muted-foreground">
+									{log.timestamp.toLocaleTimeString()}
+								</span>{' '}
+								{log.message}
+							</div>
+						))
+					)}
+					{children}
+				</div>
+			</CollapsibleContent>
+		</Collapsible>
+	);
+};

package/src/components/internal/Chat.tsx

@@ -0,0 +1,183 @@
+import '../../styles.css';
+import React, { useState } from 'react';
+import { ChevronRight, Copy, Loader, RefreshCcw } from 'lucide-react';
+import { Action, Actions } from '../ai-elements/actions';
+import {
+	Conversation,
+	ConversationContent,
+	ConversationScrollButton,
+} from '../ai-elements/conversation';
+import { Message, MessageContent } from '../ai-elements/message';
+import { InputSection } from './InputSection';
+import { Shimmer } from '../ai-elements/shimmer';
+import { cn } from '../../lib/utils';
+import { useWorkbench } from './WorkbenchProvider';
+import { Schema } from './Schema';
+
+export interface ChatProps {
+	className?: string;
+}
+
+/**
+ * Chat component - conversation and input area (everything except header)
+ * Must be used within WorkbenchProvider
+ */
+export function Chat({ className: _className }: ChatProps) {
+	const {
+		agents,
+		suggestions,
+		messages,
+		selectedAgent,
+		setSelectedAgent,
+		isLoading,
+		submitMessage,
+	} = useWorkbench();
+
+	const [value, setValue] = useState('');
+	const [schemaOpen, setSchemaOpen] = useState(false);
+
+	const handleSubmit = async () => {
+		const selectedAgentData = agents[selectedAgent];
+		const hasInputSchema = selectedAgentData?.schema?.input?.json;
+
+		// If agent has no input schema, submit without requiring input
+		if (!hasInputSchema) {
+			await submitMessage('');
+			return;
+		}
+
+		// For agents with input schema, require input
+		if (!value.trim()) return;
+		await submitMessage(value);
+		setValue('');
+	};
+
+	return (
+		<div className="relative flex flex-1 overflow-hidden">
+			<div
+				className={cn(
+					'flex flex-col flex-1 transition-all duration-300 ease-in-out min-w-0',
+					schemaOpen && 'mr-[600px]'
+				)}
+			>
+				<Conversation className="flex-1 overflow-y-auto">
+					<ConversationContent className="pb-0">
+						{messages.map(({ role, parts, id }) => {
+							const isStreaming = parts.some(
+								(part) => part.type === 'text' && part.state === 'streaming'
+							);
+
+							return (
+								<div key={id} className="mb-2">
+									{role === 'assistant' && (
+										<div
+											className={cn(
+												'w-fit flex items-center mb-2 text-muted-foreground text-sm transition-colors',
+												!isStreaming && 'hover:text-foreground cursor-pointer'
+											)}
+										>
+											<Loader
+												className={cn(
+													'size-4 transition-all',
+													isStreaming || isLoading ? 'animate-spin mr-2' : 'w-0 mr-2.5'
+												)}
+											/>
+
+											{isStreaming || isLoading ? (
+												<Shimmer duration={1}>Running...</Shimmer>
+											) : (
+												<>
+													Ran for
+													<span className="mx-1">2.9s</span>
+													and consumed
+													<span className="mx-1">124 tokens</span>
+													<ChevronRight className="size-4" />
+												</>
+											)}
+										</div>
+									)}
+
+									{!(isStreaming || isLoading) && (
+										<>
+											<Message
+												key={id}
+												from={role as 'user' | 'system' | 'assistant'}
+												className="p-0"
+											>
+												<MessageContent>
+													{parts.map((part, index) => {
+														switch (part.type) {
+															case 'text':
+																return (
+																	<div key={`${id}-${part.text}-${index}`}>
+																		{part.text || ''}
+																	</div>
+																);
+														}
+													})}
+												</MessageContent>
+											</Message>
+
+											<Actions
+												className={cn('mt-1 gap-0', role === 'user' && 'justify-end')}
+											>
+												{role === 'user' && (
+													<Action
+														label="Retry"
+														className="size-8 hover:bg-transparent!"
+														onClick={() =>
+															setValue(
+																parts
+																	.filter((part) => part.type === 'text')
+																	.map((part) => part.text)
+																	.join('')
+															)
+														}
+													>
+														<RefreshCcw className="size-4" />
+													</Action>
+												)}
+
+												<Action
+													onClick={() =>
+														navigator.clipboard.writeText(
+															parts
+																.filter((part) => part.type === 'text')
+																.map((part) => part.text)
+																.join('')
+														)
+													}
+													label="Copy"
+													className="size-8 hover:bg-transparent!"
+												>
+													<Copy className="size-4" />
+												</Action>
+											</Actions>
+										</>
+									)}
+								</div>
+							);
+						})}
+					</ConversationContent>
+
+					<ConversationScrollButton />
+				</Conversation>
+				<InputSection
+					value={value}
+					onChange={setValue}
+					onSubmit={handleSubmit}
+					isLoading={isLoading}
+					agents={agents}
+					selectedAgent={selectedAgent}
+					setSelectedAgent={setSelectedAgent}
+					suggestions={suggestions}
+					onSchemaOpen={() => setSchemaOpen(true)}
+				/>
+			</div>
+
+			<Schema open={schemaOpen} onOpenChange={setSchemaOpen} />
+		</div>
+	);
+}
+
+export default Chat;

package/src/components/internal/Header.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Settings } from 'lucide-react';
+import Logo from './logo';
+import { Button } from '../ui/button';
+import { ThemeToggle } from '../ui/theme-toggle';
+import { useWorkbench } from './WorkbenchProvider';
+import type { ConnectionStatus } from '../../types/config';
+
+export interface HeaderProps {
+	className?: string;
+}
+
+function StatusIndicator({ status }: { status: ConnectionStatus }) {
+	if (status === 'connected') {
+		return (
+			<div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">
+				<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+				<span>Connected</span>
+			</div>
+		);
+	}
+
+	if (status === 'restarting') {
+		return (
+			<div className="flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400">
+				<div className="w-2 h-2 rounded-full bg-amber-500 animate-spin"></div>
+				<span>Restarting...</span>
+			</div>
+		);
+	}
+
+	if (status === 'disconnected') {
+		return (
+			<div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
+				<div className="w-2 h-2 rounded-full bg-red-500"></div>
+				<span>Disconnected</span>
+			</div>
+		);
+	}
+
+	return null;
+}
+
+/**
+ * Header component - navigation bar with logo, title, and settings
+ * Must be used within WorkbenchProvider
+ */
+export function Header({ className }: HeaderProps) {
+	const { connectionStatus } = useWorkbench();
+	const LogoComponent = Logo;
+	const title = 'Workbench';
+	const showSettings = true;
+
+	return (
+		<nav
+			className={`flex items-center justify-between gap-6 py-2 px-4 border-b ${className || ''}`}
+		>
+			<div className="flex items-center gap-2.5">
+				<LogoComponent />
+				<h1 className="mt-0.5 text-sm">{title}</h1>
+			</div>
+			<div className="flex items-center gap-3">
+				<StatusIndicator status={connectionStatus} />
+				<div className="flex items-center gap-1">
+					<ThemeToggle />
+					{showSettings && (
+						<Button size="icon" variant="ghost">
+							<Settings />
+						</Button>
+					)}
+				</div>
+			</div>
+		</nav>
+	);
+}
+
+export default Header;