@agentuity/workbench 0.0.86 → 0.0.88

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>
-);

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

@@ -1,18 +0,0 @@
-'use client';
-
-import { cn } from '../../lib/utils';
-import { Controls as ControlsPrimitive } from '@xyflow/react';
-import type { ComponentProps } from 'react';
-
-export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
-
-export const Controls = ({ className, ...props }: ControlsProps) => (
-	<ControlsPrimitive
-		className={cn(
-			'gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!',
-			'[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!',
-			className
-		)}
-		{...props}
-	/>
-);

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

@@ -1,131 +0,0 @@
-import {
-	BaseEdge,
-	type EdgeProps,
-	getBezierPath,
-	getSimpleBezierPath,
-	type InternalNode,
-	type Node,
-	Position,
-	useInternalNode,
-} from '@xyflow/react';
-
-const Temporary = ({
-	id,
-	sourceX,
-	sourceY,
-	targetX,
-	targetY,
-	sourcePosition,
-	targetPosition,
-}: EdgeProps) => {
-	const [edgePath] = getSimpleBezierPath({
-		sourceX,
-		sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition,
-	});
-
-	return (
-		<BaseEdge
-			className="stroke-1 stroke-ring"
-			id={id}
-			path={edgePath}
-			style={{
-				strokeDasharray: '5, 5',
-			}}
-		/>
-	);
-};
-
-const getHandleCoordsByPosition = (node: InternalNode<Node>, handlePosition: Position) => {
-	// Choose the handle type based on position - Left is for target, Right is for source
-	const handleType = handlePosition === Position.Left ? 'target' : 'source';
-
-	const handle = node.internals.handleBounds?.[handleType]?.find(
-		(h) => h.position === handlePosition
-	);
-
-	if (!handle) {
-		return [0, 0] as const;
-	}
-
-	let offsetX = handle.width / 2;
-	let offsetY = handle.height / 2;
-
-	// this is a tiny detail to make the markerEnd of an edge visible.
-	// The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
-	// when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
-	switch (handlePosition) {
-		case Position.Left:
-			offsetX = 0;
-			break;
-		case Position.Right:
-			offsetX = handle.width;
-			break;
-		case Position.Top:
-			offsetY = 0;
-			break;
-		case Position.Bottom:
-			offsetY = handle.height;
-			break;
-		default:
-			throw new Error(`Invalid handle position: ${handlePosition}`);
-	}
-
-	const x = node.internals.positionAbsolute.x + handle.x + offsetX;
-	const y = node.internals.positionAbsolute.y + handle.y + offsetY;
-
-	return [x, y] as const;
-};
-
-const getEdgeParams = (source: InternalNode<Node>, target: InternalNode<Node>) => {
-	const sourcePos = Position.Right;
-	const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
-	const targetPos = Position.Left;
-	const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
-
-	return {
-		sx,
-		sy,
-		tx,
-		ty,
-		sourcePos,
-		targetPos,
-	};
-};
-
-const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
-	const sourceNode = useInternalNode(source);
-	const targetNode = useInternalNode(target);
-
-	if (!(sourceNode && targetNode)) {
-		return null;
-	}
-
-	const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
-
-	const [edgePath] = getBezierPath({
-		sourceX: sx,
-		sourceY: sy,
-		sourcePosition: sourcePos,
-		targetX: tx,
-		targetY: ty,
-		targetPosition: targetPos,
-	});
-
-	return (
-		<>
-			<BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />
-			<circle fill="var(--primary)" r="4">
-				<animateMotion dur="2s" path={edgePath} repeatCount="indefinite" />
-			</circle>
-		</>
-	);
-};
-
-export const Edge = {
-	Temporary,
-	Animated,
-};

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

@@ -1,16 +0,0 @@
-import { cn } from '../../lib/utils';
-import type { Experimental_GeneratedImage } from 'ai';
-
-export type ImageProps = Experimental_GeneratedImage & {
-	className?: string;
-	alt?: string;
-};
-
-export const Image = ({ base64, uint8Array, mediaType, ...props }: ImageProps) => (
-	<img
-		{...props}
-		alt={props.alt}
-		className={cn('h-auto max-w-full overflow-hidden rounded-md', props.className)}
-		src={`data:${mediaType};base64,${base64}`}
-	/>
-);