@agentuity/workbench 0.0.64 → 0.0.65

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

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

@@ -0,0 +1,18 @@
+'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/conversation.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '../ui/button';
+import { cn } from '../../lib/utils';
+import { ArrowDownIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+	<StickToBottom
+		className={cn('relative flex-1 overflow-y-auto', className)}
+		initial="smooth"
+		resize="smooth"
+		role="log"
+		{...props}
+	/>
+);
+
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+
+export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
+	<StickToBottom.Content className={cn('p-4', className)} {...props} />
+);
+
+export type ConversationEmptyStateProps = ComponentProps<'div'> & {
+	title?: string;
+	description?: string;
+	icon?: React.ReactNode;
+};
+
+export const ConversationEmptyState = ({
+	className,
+	title = 'No messages yet',
+	description = 'Start a conversation to see messages here',
+	icon,
+	children,
+	...props
+}: ConversationEmptyStateProps) => (
+	<div
+		className={cn(
+			'flex size-full flex-col items-center justify-center gap-3 p-8 text-center',
+			className
+		)}
+		{...props}
+	>
+		{children ?? (
+			<>
+				{icon && <div className="text-muted-foreground">{icon}</div>}
+				<div className="space-y-1">
+					<h3 className="font-medium text-sm">{title}</h3>
+					{description && <p className="text-muted-foreground text-sm">{description}</p>}
+				</div>
+			</>
+		)}
+	</div>
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+	className,
+	...props
+}: ConversationScrollButtonProps) => {
+	const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+	const handleScrollToBottom = useCallback(() => {
+		scrollToBottom();
+	}, [scrollToBottom]);
+
+	return (
+		!isAtBottom && (
+			<Button
+				className={cn(
+					'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',
+					className
+				)}
+				onClick={handleScrollToBottom}
+				size="icon"
+				type="button"
+				variant="outline"
+				{...props}
+			>
+				<ArrowDownIcon className="size-4" />
+			</Button>
+		)
+	);
+};

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

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

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