@agentuity/workbench 0.0.86 → 0.0.88

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

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

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

@@ -1,238 +0,0 @@
-'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/ui/alert.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../lib/utils';
-
-const alertVariants = cva(
-	'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-	{
-		variants: {
-			variant: {
-				default: 'bg-card text-card-foreground',
-				destructive:
-					'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-		},
-	}
-);
-
-function Alert({
-	className,
-	variant,
-	...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-	return (
-		<div
-			data-slot="alert"
-			role="alert"
-			className={cn(alertVariants({ variant }), className)}
-			{...props}
-		/>
-	);
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot="alert-title"
-			className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-			{...props}
-		/>
-	);
-}
-
-function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot="alert-description"
-			className={cn(
-				'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/badge.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../lib/utils';
-
-const badgeVariants = cva(
-	'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-	{
-		variants: {
-			variant: {
-				default:
-					'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-				secondary:
-					'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-				destructive:
-					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-		},
-	}
-);
-
-function Badge({
-	className,
-	variant,
-	asChild = false,
-	...props
-}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : 'span';
-
-	return (
-		<Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
-	);
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/card.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-			{...props}
-		/>
-	);
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
-	return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
-}
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-	return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
-	return (
-		<h3
-			className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
-			{...props}
-		/>
-	);
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
-	return <p className={cn('text-sm text-muted-foreground', className)} {...props} />;
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-	return <div className={cn('p-6 pt-0', className)} {...props} />;
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-	return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />;
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };