@agentuity/workbench 0.0.87 → 0.0.88

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

@@ -1,24 +0,0 @@
-import { Background, ReactFlow, type ReactFlowProps } from '@xyflow/react';
-import type { ReactNode } from 'react';
-import '@xyflow/react/dist/style.css';
-import { Controls } from './controls';
-
-type CanvasProps = ReactFlowProps & {
-	children?: ReactNode;
-};
-
-export const Canvas = ({ children, ...props }: CanvasProps) => (
-	<ReactFlow
-		deleteKeyCode={['Backspace', 'Delete']}
-		fitView
-		panOnDrag={false}
-		panOnScroll
-		selectionOnDrag={true}
-		zoomOnDoubleClick={false}
-		{...props}
-	>
-		<Background bgColor="var(--sidebar)" />
-		<Controls />
-		{children}
-	</ReactFlow>
-);

package/src/components/ai-elements/chain-of-thought.tsx

@@ -1,198 +0,0 @@
-'use client';
-
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { Badge } from '../ui/badge';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { cn } from '../../lib/utils';
-import { BrainIcon, ChevronDownIcon, DotIcon, type LucideIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-import { createContext, memo, useContext, useMemo } from 'react';
-
-type ChainOfThoughtContextValue = {
-	isOpen: boolean;
-	setIsOpen: (open: boolean) => void;
-};
-
-const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(null);
-
-const useChainOfThought = () => {
-	const context = useContext(ChainOfThoughtContext);
-	if (!context) {
-		throw new Error('ChainOfThought components must be used within ChainOfThought');
-	}
-	return context;
-};
-
-export type ChainOfThoughtProps = ComponentProps<'div'> & {
-	open?: boolean;
-	defaultOpen?: boolean;
-	onOpenChange?: (open: boolean) => void;
-};
-
-export const ChainOfThought = memo(
-	({
-		className,
-		open,
-		defaultOpen = false,
-		onOpenChange,
-		children,
-		...props
-	}: ChainOfThoughtProps) => {
-		const [isOpen, setIsOpen] = useControllableState({
-			prop: open,
-			defaultProp: defaultOpen,
-			onChange: onOpenChange,
-		});
-
-		const chainOfThoughtContext = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
-
-		return (
-			<ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
-				<div className={cn('not-prose max-w-prose space-y-4', className)} {...props}>
-					{children}
-				</div>
-			</ChainOfThoughtContext.Provider>
-		);
-	}
-);
-
-export type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
-
-export const ChainOfThoughtHeader = memo(
-	({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
-		const { isOpen, setIsOpen } = useChainOfThought();
-
-		return (
-			<Collapsible onOpenChange={setIsOpen} open={isOpen}>
-				<CollapsibleTrigger
-					className={cn(
-						'flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
-						className
-					)}
-					{...props}
-				>
-					<BrainIcon className="size-4" />
-					<span className="flex-1 text-left">{children ?? 'Chain of Thought'}</span>
-					<ChevronDownIcon
-						className={cn('size-4 transition-transform', isOpen ? 'rotate-180' : 'rotate-0')}
-					/>
-				</CollapsibleTrigger>
-			</Collapsible>
-		);
-	}
-);
-
-export type ChainOfThoughtStepProps = ComponentProps<'div'> & {
-	icon?: LucideIcon;
-	label: string;
-	description?: string;
-	status?: 'complete' | 'active' | 'pending';
-};
-
-export const ChainOfThoughtStep = memo(
-	({
-		className,
-		icon: Icon = DotIcon,
-		label,
-		description,
-		status = 'complete',
-		children,
-		...props
-	}: ChainOfThoughtStepProps) => {
-		const statusStyles = {
-			complete: 'text-muted-foreground',
-			active: 'text-foreground',
-			pending: 'text-muted-foreground/50',
-		};
-
-		return (
-			<div
-				className={cn(
-					'flex gap-2 text-sm',
-					statusStyles[status],
-					'fade-in-0 slide-in-from-top-2 animate-in',
-					className
-				)}
-				{...props}
-			>
-				<div className="relative mt-0.5">
-					<Icon className="size-4" />
-					<div className="-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border" />
-				</div>
-				<div className="flex-1 space-y-2">
-					<div>{label}</div>
-					{description && <div className="text-muted-foreground text-xs">{description}</div>}
-					{children}
-				</div>
-			</div>
-		);
-	}
-);
-
-export type ChainOfThoughtSearchResultsProps = ComponentProps<'div'>;
-
-export const ChainOfThoughtSearchResults = memo(
-	({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
-		<div className={cn('flex items-center gap-2', className)} {...props} />
-	)
-);
-
-export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
-
-export const ChainOfThoughtSearchResult = memo(
-	({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
-		<Badge
-			className={cn('gap-1 px-2 py-0.5 font-normal text-xs', className)}
-			variant="secondary"
-			{...props}
-		>
-			{children}
-		</Badge>
-	)
-);
-
-export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const ChainOfThoughtContent = memo(
-	({ className, children, ...props }: ChainOfThoughtContentProps) => {
-		const { isOpen } = useChainOfThought();
-
-		return (
-			<Collapsible open={isOpen}>
-				<CollapsibleContent
-					className={cn(
-						'mt-2 space-y-3',
-						'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}
-				>
-					{children}
-				</CollapsibleContent>
-			</Collapsible>
-		);
-	}
-);
-
-export type ChainOfThoughtImageProps = ComponentProps<'div'> & {
-	caption?: string;
-};
-
-export const ChainOfThoughtImage = memo(
-	({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
-		<div className={cn('mt-2 space-y-2', className)} {...props}>
-			<div className="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
-				{children}
-			</div>
-			{caption && <p className="text-muted-foreground text-xs">{caption}</p>}
-		</div>
-	)
-);
-
-ChainOfThought.displayName = 'ChainOfThought';
-ChainOfThoughtHeader.displayName = 'ChainOfThoughtHeader';
-ChainOfThoughtStep.displayName = 'ChainOfThoughtStep';
-ChainOfThoughtSearchResults.displayName = 'ChainOfThoughtSearchResults';
-ChainOfThoughtSearchResult.displayName = 'ChainOfThoughtSearchResult';
-ChainOfThoughtContent.displayName = 'ChainOfThoughtContent';
-ChainOfThoughtImage.displayName = 'ChainOfThoughtImage';

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

@@ -1,119 +0,0 @@
-'use client';
-
-import { Alert, AlertDescription } from '../ui/alert';
-import { Button } from '../ui/button';
-import { cn } from '../../lib/utils';
-import type { ToolUIPart } from 'ai';
-import { type ComponentProps, createContext, type ReactNode, useContext } from 'react';
-
-type ConfirmationContextValue = {
-	approval: any;
-	state: any;
-};
-
-const ConfirmationContext = createContext<ConfirmationContextValue | null>(null);
-
-const useConfirmation = () => {
-	const context = useContext(ConfirmationContext);
-
-	if (!context) {
-		throw new Error('Confirmation components must be used within Confirmation');
-	}
-
-	return context;
-};
-
-export type ConfirmationProps = ComponentProps<typeof Alert> & {
-	approval?: any;
-	state: any;
-};
-
-export const Confirmation = ({ className, approval, state, ...props }: ConfirmationProps) => {
-	if (!approval || state === 'input-streaming' || state === 'input-available') {
-		return null;
-	}
-
-	return (
-		<ConfirmationContext.Provider value={{ approval, state }}>
-			<Alert className={cn('flex flex-col gap-2', className)} {...props} />
-		</ConfirmationContext.Provider>
-	);
-};
-
-export type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
-
-export const ConfirmationTitle = ({ className, ...props }: ConfirmationTitleProps) => (
-	<AlertDescription className={cn('inline', className)} {...props} />
-);
-
-export type ConfirmationRequestProps = {
-	children?: ReactNode;
-};
-
-export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {
-	const { state } = useConfirmation();
-
-	// Only show when approval is requested
-	if (state !== 'approval-requested') {
-		return null;
-	}
-
-	return children;
-};
-
-export type ConfirmationAcceptedProps = {
-	children?: ReactNode;
-};
-
-export const ConfirmationAccepted = ({ children }: ConfirmationAcceptedProps) => {
-	const { approval, state } = useConfirmation();
-
-	// Only show when approved and in response states
-	if (
-		!approval?.approved ||
-		(state !== 'approval-responded' && state !== 'output-denied' && state !== 'output-available')
-	) {
-		return null;
-	}
-
-	return children;
-};
-
-export type ConfirmationRejectedProps = {
-	children?: ReactNode;
-};
-
-export const ConfirmationRejected = ({ children }: ConfirmationRejectedProps) => {
-	const { approval, state } = useConfirmation();
-
-	// Only show when rejected and in response states
-	if (
-		approval?.approved !== false ||
-		(state !== 'approval-responded' && state !== 'output-denied' && state !== 'output-available')
-	) {
-		return null;
-	}
-
-	return children;
-};
-
-export type ConfirmationActionsProps = ComponentProps<'div'>;
-
-export const ConfirmationActions = ({ className, ...props }: ConfirmationActionsProps) => {
-	const { state } = useConfirmation();
-
-	// Only show when approval is requested
-	if (state !== 'approval-requested') {
-		return null;
-	}
-
-	return (
-		<div className={cn('flex items-center justify-end gap-2 self-end', className)} {...props} />
-	);
-};
-
-export type ConfirmationActionProps = ComponentProps<typeof Button>;
-
-export const ConfirmationAction = (props: ConfirmationActionProps) => (
-	<Button className="h-8 px-3 text-sm" type="button" {...props} />
-);

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

@@ -1,16 +0,0 @@
-import type { ConnectionLineComponent } from '@xyflow/react';
-
-const HALF = 0.5;
-
-export const Connection: ConnectionLineComponent = ({ fromX, fromY, toX, toY }) => (
-	<g>
-		<path
-			className="animated"
-			d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
-			fill="none"
-			stroke="var(--color-ring)"
-			strokeWidth={1}
-		/>
-		<circle cx={toX} cy={toY} fill="#fff" r={3} stroke="var(--color-ring)" strokeWidth={1} />
-	</g>
-);

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

@@ -1,357 +0,0 @@
-'use client';
-
-import { Button } from '../ui/button';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card';
-import { Progress } from '../ui/progress';
-import { cn } from '../../lib/utils';
-import type { LanguageModelUsage } from 'ai';
-import { type ComponentProps, createContext, useContext } from 'react';
-import { getUsage } from 'tokenlens';
-
-const PERCENT_MAX = 100;
-const ICON_RADIUS = 10;
-const ICON_VIEWBOX = 24;
-const ICON_CENTER = 12;
-const ICON_STROKE_WIDTH = 2;
-
-type ModelId = string;
-
-type ContextSchema = {
-	usedTokens: number;
-	maxTokens: number;
-	usage?: LanguageModelUsage;
-	modelId?: ModelId;
-};
-
-const ContextContext = createContext<ContextSchema | null>(null);
-
-const useContextValue = () => {
-	const context = useContext(ContextContext);
-
-	if (!context) {
-		throw new Error('Context components must be used within Context');
-	}
-
-	return context;
-};
-
-export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
-
-export const Context = ({ usedTokens, maxTokens, usage, modelId, ...props }: ContextProps) => (
-	<ContextContext.Provider
-		value={{
-			usedTokens,
-			maxTokens,
-			usage,
-			modelId,
-		}}
-	>
-		<HoverCard closeDelay={0} openDelay={0} {...props} />
-	</ContextContext.Provider>
-);
-
-const ContextIcon = () => {
-	const { usedTokens, maxTokens } = useContextValue();
-	const circumference = 2 * Math.PI * ICON_RADIUS;
-	const usedPercent = usedTokens / maxTokens;
-	const dashOffset = circumference * (1 - usedPercent);
-
-	return (
-		<svg
-			aria-label="Model context usage"
-			height="20"
-			role="img"
-			style={{ color: 'currentcolor' }}
-			viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
-			width="20"
-		>
-			<circle
-				cx={ICON_CENTER}
-				cy={ICON_CENTER}
-				fill="none"
-				opacity="0.25"
-				r={ICON_RADIUS}
-				stroke="currentColor"
-				strokeWidth={ICON_STROKE_WIDTH}
-			/>
-			<circle
-				cx={ICON_CENTER}
-				cy={ICON_CENTER}
-				fill="none"
-				opacity="0.7"
-				r={ICON_RADIUS}
-				stroke="currentColor"
-				strokeDasharray={`${circumference} ${circumference}`}
-				strokeDashoffset={dashOffset}
-				strokeLinecap="round"
-				strokeWidth={ICON_STROKE_WIDTH}
-				style={{ transformOrigin: 'center', transform: 'rotate(-90deg)' }}
-			/>
-		</svg>
-	);
-};
-
-export type ContextTriggerProps = ComponentProps<typeof Button>;
-
-export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
-	const { usedTokens, maxTokens } = useContextValue();
-	const usedPercent = usedTokens / maxTokens;
-	const renderedPercent = new Intl.NumberFormat('en-US', {
-		style: 'percent',
-		maximumFractionDigits: 1,
-	}).format(usedPercent);
-
-	return (
-		<HoverCardTrigger asChild>
-			{children ?? (
-				<Button type="button" variant="ghost" {...props}>
-					<span className="font-medium text-muted-foreground">{renderedPercent}</span>
-					<ContextIcon />
-				</Button>
-			)}
-		</HoverCardTrigger>
-	);
-};
-
-export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
-
-export const ContextContent = ({ className, ...props }: ContextContentProps) => (
-	<HoverCardContent
-		className={cn('min-w-60 divide-y overflow-hidden p-0', className)}
-		{...props}
-	/>
-);
-
-export type ContextContentHeaderProps = ComponentProps<'div'>;
-
-export const ContextContentHeader = ({
-	children,
-	className,
-	...props
-}: ContextContentHeaderProps) => {
-	const { usedTokens, maxTokens } = useContextValue();
-	const usedPercent = usedTokens / maxTokens;
-	const displayPct = new Intl.NumberFormat('en-US', {
-		style: 'percent',
-		maximumFractionDigits: 1,
-	}).format(usedPercent);
-	const used = new Intl.NumberFormat('en-US', {
-		notation: 'compact',
-	}).format(usedTokens);
-	const total = new Intl.NumberFormat('en-US', {
-		notation: 'compact',
-	}).format(maxTokens);
-
-	return (
-		<div className={cn('w-full space-y-2 p-3', className)} {...props}>
-			{children ?? (
-				<>
-					<div className="flex items-center justify-between gap-3 text-xs">
-						<p>{displayPct}</p>
-						<p className="font-mono text-muted-foreground">
-							{used} / {total}
-						</p>
-					</div>
-					<div className="space-y-2">
-						<Progress className="bg-muted" value={usedPercent * PERCENT_MAX} />
-					</div>
-				</>
-			)}
-		</div>
-	);
-};
-
-export type ContextContentBodyProps = ComponentProps<'div'>;
-
-export const ContextContentBody = ({ children, className, ...props }: ContextContentBodyProps) => (
-	<div className={cn('w-full p-3', className)} {...props}>
-		{children}
-	</div>
-);
-
-export type ContextContentFooterProps = ComponentProps<'div'>;
-
-export const ContextContentFooter = ({
-	children,
-	className,
-	...props
-}: ContextContentFooterProps) => {
-	const { modelId, usage } = useContextValue();
-	const costUSD = modelId
-		? getUsage({
-				modelId,
-				usage: {
-					input: usage?.inputTokens ?? 0,
-					output: usage?.outputTokens ?? 0,
-				},
-			}).costUSD?.totalUSD
-		: undefined;
-	const totalCost = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD',
-	}).format(costUSD ?? 0);
-
-	return (
-		<div
-			className={cn(
-				'flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs',
-				className
-			)}
-			{...props}
-		>
-			{children ?? (
-				<>
-					<span className="text-muted-foreground">Total cost</span>
-					<span>{totalCost}</span>
-				</>
-			)}
-		</div>
-	);
-};
-
-export type ContextInputUsageProps = ComponentProps<'div'>;
-
-export const ContextInputUsage = ({ className, children, ...props }: ContextInputUsageProps) => {
-	const { usage, modelId } = useContextValue();
-	const inputTokens = usage?.inputTokens ?? 0;
-
-	if (children) {
-		return children;
-	}
-
-	if (!inputTokens) {
-		return null;
-	}
-
-	const inputCost = modelId
-		? getUsage({
-				modelId,
-				usage: { input: inputTokens, output: 0 },
-			}).costUSD?.totalUSD
-		: undefined;
-	const inputCostText = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD',
-	}).format(inputCost ?? 0);
-
-	return (
-		<div className={cn('flex items-center justify-between text-xs', className)} {...props}>
-			<span className="text-muted-foreground">Input</span>
-			<TokensWithCost costText={inputCostText} tokens={inputTokens} />
-		</div>
-	);
-};
-
-export type ContextOutputUsageProps = ComponentProps<'div'>;
-
-export const ContextOutputUsage = ({ className, children, ...props }: ContextOutputUsageProps) => {
-	const { usage, modelId } = useContextValue();
-	const outputTokens = usage?.outputTokens ?? 0;
-
-	if (children) {
-		return children;
-	}
-
-	if (!outputTokens) {
-		return null;
-	}
-
-	const outputCost = modelId
-		? getUsage({
-				modelId,
-				usage: { input: 0, output: outputTokens },
-			}).costUSD?.totalUSD
-		: undefined;
-	const outputCostText = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD',
-	}).format(outputCost ?? 0);
-
-	return (
-		<div className={cn('flex items-center justify-between text-xs', className)} {...props}>
-			<span className="text-muted-foreground">Output</span>
-			<TokensWithCost costText={outputCostText} tokens={outputTokens} />
-		</div>
-	);
-};
-
-export type ContextReasoningUsageProps = ComponentProps<'div'>;
-
-export const ContextReasoningUsage = ({
-	className,
-	children,
-	...props
-}: ContextReasoningUsageProps) => {
-	const { usage, modelId } = useContextValue();
-	const reasoningTokens = usage?.reasoningTokens ?? 0;
-
-	if (children) {
-		return children;
-	}
-
-	if (!reasoningTokens) {
-		return null;
-	}
-
-	const reasoningCost = modelId
-		? getUsage({
-				modelId,
-				usage: { reasoningTokens },
-			}).costUSD?.totalUSD
-		: undefined;
-	const reasoningCostText = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD',
-	}).format(reasoningCost ?? 0);
-
-	return (
-		<div className={cn('flex items-center justify-between text-xs', className)} {...props}>
-			<span className="text-muted-foreground">Reasoning</span>
-			<TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
-		</div>
-	);
-};
-
-export type ContextCacheUsageProps = ComponentProps<'div'>;
-
-export const ContextCacheUsage = ({ className, children, ...props }: ContextCacheUsageProps) => {
-	const { usage, modelId } = useContextValue();
-	const cacheTokens = usage?.cachedInputTokens ?? 0;
-
-	if (children) {
-		return children;
-	}
-
-	if (!cacheTokens) {
-		return null;
-	}
-
-	const cacheCost = modelId
-		? getUsage({
-				modelId,
-				usage: { cacheReads: cacheTokens, input: 0, output: 0 },
-			}).costUSD?.totalUSD
-		: undefined;
-	const cacheCostText = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD',
-	}).format(cacheCost ?? 0);
-
-	return (
-		<div className={cn('flex items-center justify-between text-xs', className)} {...props}>
-			<span className="text-muted-foreground">Cache</span>
-			<TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
-		</div>
-	);
-};
-
-const TokensWithCost = ({ tokens, costText }: { tokens?: number; costText?: string }) => (
-	<span>
-		{tokens === undefined
-			? '—'
-			: new Intl.NumberFormat('en-US', {
-					notation: 'compact',
-				}).format(tokens)}
-		{costText ? <span className="ml-2 text-muted-foreground">• {costText}</span> : null}
-	</span>
-);