@agentuity/workbench 0.0.64 → 0.0.66

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

@@ -0,0 +1,198 @@
+'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/code-block.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { Button } from '../ui/button';
+import { cn } from '../../lib/utils';
+import type { Element } from 'hast';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import {
+	type ComponentProps,
+	createContext,
+	type HTMLAttributes,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { type BundledLanguage, codeToHtml, type ShikiTransformer } from 'shiki';
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+	code: string;
+	language: BundledLanguage;
+	showLineNumbers?: boolean;
+};
+
+type CodeBlockContextType = {
+	code: string;
+};
+
+const CodeBlockContext = createContext<CodeBlockContextType>({
+	code: '',
+});
+
+const lineNumberTransformer: ShikiTransformer = {
+	name: 'line-numbers',
+	line(node: Element, line: number) {
+		node.children.unshift({
+			type: 'element',
+			tagName: 'span',
+			properties: {
+				className: [
+					'inline-block',
+					'min-w-10',
+					'mr-4',
+					'text-right',
+					'select-none',
+					'text-muted-foreground',
+				],
+			},
+			children: [{ type: 'text', value: String(line) }],
+		});
+	},
+};
+
+export async function highlightCode(
+	code: string,
+	language: BundledLanguage,
+	showLineNumbers = false
+) {
+	const transformers: ShikiTransformer[] = showLineNumbers ? [lineNumberTransformer] : [];
+
+	return await Promise.all([
+		codeToHtml(code, {
+			lang: language,
+			theme: 'one-light',
+			transformers,
+		}),
+		codeToHtml(code, {
+			lang: language,
+			theme: 'one-dark-pro',
+			transformers,
+		}),
+	]);
+}
+
+export const CodeBlock = ({
+	code,
+	language,
+	showLineNumbers = false,
+	className,
+	children,
+	...props
+}: CodeBlockProps) => {
+	const [html, setHtml] = useState<string>('');
+	const [darkHtml, setDarkHtml] = useState<string>('');
+	const mounted = useRef(false);
+
+	useEffect(() => {
+		highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+			if (!mounted.current) {
+				setHtml(light);
+				setDarkHtml(dark);
+				mounted.current = true;
+			}
+		});
+
+		return () => {
+			mounted.current = false;
+		};
+	}, [code, language, showLineNumbers]);
+
+	return (
+		<CodeBlockContext.Provider value={{ code }}>
+			<div
+				className={cn(
+					'group relative w-full overflow-hidden rounded-md border bg-background text-foreground',
+					className
+				)}
+				{...props}
+			>
+				<div className="relative">
+					<div
+						className="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+						dangerouslySetInnerHTML={{ __html: html }}
+					/>
+					<div
+						className="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+						dangerouslySetInnerHTML={{ __html: darkHtml }}
+					/>
+					{children && (
+						<div className="absolute top-2 right-2 flex items-center gap-2">{children}</div>
+					)}
+				</div>
+			</div>
+		</CodeBlockContext.Provider>
+	);
+};
+
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+	onCopy?: () => void;
+	onError?: (error: Error) => void;
+	timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+	onCopy,
+	onError,
+	timeout = 2000,
+	children,
+	className,
+	...props
+}: CodeBlockCopyButtonProps) => {
+	const [isCopied, setIsCopied] = useState(false);
+	const { code } = useContext(CodeBlockContext);
+
+	const copyToClipboard = async () => {
+		if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
+			onError?.(new Error('Clipboard API not available'));
+			return;
+		}
+
+		try {
+			await navigator.clipboard.writeText(code);
+			setIsCopied(true);
+			onCopy?.();
+			setTimeout(() => setIsCopied(false), timeout);
+		} catch (error) {
+			onError?.(error as Error);
+		}
+	};
+
+	const Icon = isCopied ? CheckIcon : CopyIcon;
+
+	return (
+		<Button
+			className={cn('shrink-0', className)}
+			onClick={copyToClipboard}
+			size="icon"
+			variant="ghost"
+			{...props}
+		>
+			{children ?? <Icon size={14} />}
+		</Button>
+	);
+};

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

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

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