@agentuity/workbench 0.0.87 → 0.0.89

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

@@ -1,231 +0,0 @@
-'use client';
-
-import { Button } from '../ui/button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { ScrollArea } from '../ui/scroll-area';
-import { cn } from '../../lib/utils';
-import { ChevronDownIcon, PaperclipIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-
-export type QueueMessagePart = {
-	type: string;
-	text?: string;
-	url?: string;
-	filename?: string;
-	mediaType?: string;
-};
-
-export type QueueMessage = {
-	id: string;
-	parts: QueueMessagePart[];
-};
-
-export type QueueTodo = {
-	id: string;
-	title: string;
-	description?: string;
-	status?: 'pending' | 'completed';
-};
-
-export type QueueItemProps = ComponentProps<'li'>;
-
-export const QueueItem = ({ className, ...props }: QueueItemProps) => (
-	<li
-		className={cn(
-			'group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted',
-			className
-		)}
-		{...props}
-	/>
-);
-
-export type QueueItemIndicatorProps = ComponentProps<'span'> & {
-	completed?: boolean;
-};
-
-export const QueueItemIndicator = ({
-	completed = false,
-	className,
-	...props
-}: QueueItemIndicatorProps) => (
-	<span
-		className={cn(
-			'mt-0.5 inline-block size-2.5 rounded-full border',
-			completed
-				? 'border-muted-foreground/20 bg-muted-foreground/10'
-				: 'border-muted-foreground/50',
-			className
-		)}
-		{...props}
-	/>
-);
-
-export type QueueItemContentProps = ComponentProps<'span'> & {
-	completed?: boolean;
-};
-
-export const QueueItemContent = ({
-	completed = false,
-	className,
-	...props
-}: QueueItemContentProps) => (
-	<span
-		className={cn(
-			'line-clamp-1 grow break-words',
-			completed ? 'text-muted-foreground/50 line-through' : 'text-muted-foreground',
-			className
-		)}
-		{...props}
-	/>
-);
-
-export type QueueItemDescriptionProps = ComponentProps<'div'> & {
-	completed?: boolean;
-};
-
-export const QueueItemDescription = ({
-	completed = false,
-	className,
-	...props
-}: QueueItemDescriptionProps) => (
-	<div
-		className={cn(
-			'ml-6 text-xs',
-			completed ? 'text-muted-foreground/40 line-through' : 'text-muted-foreground',
-			className
-		)}
-		{...props}
-	/>
-);
-
-export type QueueItemActionsProps = ComponentProps<'div'>;
-
-export const QueueItemActions = ({ className, ...props }: QueueItemActionsProps) => (
-	<div className={cn('flex gap-1', className)} {...props} />
-);
-
-export type QueueItemActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'size'>;
-
-export const QueueItemAction = ({ className, ...props }: QueueItemActionProps) => (
-	<Button
-		className={cn(
-			'size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100',
-			className
-		)}
-		size="icon"
-		type="button"
-		variant="ghost"
-		{...props}
-	/>
-);
-
-export type QueueItemAttachmentProps = ComponentProps<'div'>;
-
-export const QueueItemAttachment = ({ className, ...props }: QueueItemAttachmentProps) => (
-	<div className={cn('mt-1 flex flex-wrap gap-2', className)} {...props} />
-);
-
-export type QueueItemImageProps = ComponentProps<'img'>;
-
-export const QueueItemImage = ({ className, ...props }: QueueItemImageProps) => (
-	<img
-		alt=""
-		className={cn('h-8 w-8 rounded border object-cover', className)}
-		height={32}
-		width={32}
-		{...props}
-	/>
-);
-
-export type QueueItemFileProps = ComponentProps<'span'>;
-
-export const QueueItemFile = ({ children, className, ...props }: QueueItemFileProps) => (
-	<span
-		className={cn('flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs', className)}
-		{...props}
-	>
-		<PaperclipIcon size={12} />
-		<span className="max-w-[100px] truncate">{children}</span>
-	</span>
-);
-
-export type QueueListProps = ComponentProps<typeof ScrollArea>;
-
-export const QueueList = ({ children, className, ...props }: QueueListProps) => (
-	<ScrollArea className={cn('-mb-1 mt-2', className)} {...props}>
-		<div className="max-h-40 pr-4">
-			<ul>{children}</ul>
-		</div>
-	</ScrollArea>
-);
-
-// QueueSection - collapsible section container
-export type QueueSectionProps = ComponentProps<typeof Collapsible>;
-
-export const QueueSection = ({ className, defaultOpen = true, ...props }: QueueSectionProps) => (
-	<Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
-);
-
-// QueueSectionTrigger - section header/trigger
-export type QueueSectionTriggerProps = ComponentProps<'button'>;
-
-export const QueueSectionTrigger = ({
-	children,
-	className,
-	...props
-}: QueueSectionTriggerProps) => (
-	<CollapsibleTrigger asChild>
-		<button
-			className={cn(
-				'group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted',
-				className
-			)}
-			type="button"
-			{...props}
-		>
-			{children}
-		</button>
-	</CollapsibleTrigger>
-);
-
-// QueueSectionLabel - label content with icon and count
-export type QueueSectionLabelProps = ComponentProps<'span'> & {
-	count?: number;
-	label: string;
-	icon?: React.ReactNode;
-};
-
-export const QueueSectionLabel = ({
-	count,
-	label,
-	icon,
-	className,
-	...props
-}: QueueSectionLabelProps) => (
-	<span className={cn('flex items-center gap-2', className)} {...props}>
-		<ChevronDownIcon className="group-data-[state=closed]:-rotate-90 size-4 transition-transform" />
-		{icon}
-		<span>
-			{count} {label}
-		</span>
-	</span>
-);
-
-// QueueSectionContent - collapsible content area
-export type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const QueueSectionContent = ({ className, ...props }: QueueSectionContentProps) => (
-	<CollapsibleContent className={cn(className)} {...props} />
-);
-
-export type QueueProps = ComponentProps<'div'>;
-
-export const Queue = ({ className, ...props }: QueueProps) => (
-	<div
-		className={cn(
-			'flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs',
-			className
-		)}
-		{...props}
-	/>
-);

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

@@ -1,163 +0,0 @@
-'use client';
-
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { BrainIcon, ChevronDownIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-import { createContext, memo, useContext, useEffect, useState } from 'react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { cn } from '../../lib/utils';
-import { Response } from './response';
-import { Shimmer } from './shimmer';
-
-type ReasoningContextValue = {
-	isStreaming: boolean;
-	isOpen: boolean;
-	setIsOpen: (open: boolean) => void;
-	duration: number;
-};
-
-const ReasoningContext = createContext<ReasoningContextValue | null>(null);
-
-const useReasoning = () => {
-	const context = useContext(ReasoningContext);
-	if (!context) {
-		throw new Error('Reasoning components must be used within Reasoning');
-	}
-	return context;
-};
-
-export type ReasoningProps = ComponentProps<typeof Collapsible> & {
-	isStreaming?: boolean;
-	open?: boolean;
-	defaultOpen?: boolean;
-	onOpenChange?: (open: boolean) => void;
-	duration?: number;
-};
-
-const AUTO_CLOSE_DELAY = 1000;
-const MS_IN_S = 1000;
-
-export const Reasoning = memo(
-	({
-		className,
-		isStreaming = false,
-		open,
-		defaultOpen = true,
-		onOpenChange,
-		duration: durationProp,
-		children,
-		...props
-	}: ReasoningProps) => {
-		const [isOpen, setIsOpen] = useControllableState({
-			prop: open,
-			defaultProp: defaultOpen,
-			onChange: onOpenChange,
-		});
-		const [duration, setDuration] = useControllableState({
-			prop: durationProp,
-			defaultProp: 0,
-		});
-
-		const [hasAutoClosed, setHasAutoClosed] = useState(false);
-		const [startTime, setStartTime] = useState<number | null>(null);
-
-		// Track duration when streaming starts and ends
-		useEffect(() => {
-			if (isStreaming) {
-				if (startTime === null) {
-					setStartTime(Date.now());
-				}
-			} else if (startTime !== null) {
-				setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-				setStartTime(null);
-			}
-		}, [isStreaming, startTime, setDuration]);
-
-		// Auto-open when streaming starts, auto-close when streaming ends (once only)
-		useEffect(() => {
-			if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
-				// Add a small delay before closing to allow user to see the content
-				const timer = setTimeout(() => {
-					setIsOpen(false);
-					setHasAutoClosed(true);
-				}, AUTO_CLOSE_DELAY);
-
-				return () => clearTimeout(timer);
-			}
-		}, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
-
-		const handleOpenChange = (newOpen: boolean) => {
-			setIsOpen(newOpen);
-		};
-
-		return (
-			<ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>
-				<Collapsible
-					className={cn('not-prose mb-4', className)}
-					onOpenChange={handleOpenChange}
-					open={isOpen}
-					{...props}
-				>
-					{children}
-				</Collapsible>
-			</ReasoningContext.Provider>
-		);
-	}
-);
-
-export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
-
-const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
-	if (isStreaming || duration === 0) {
-		return <Shimmer duration={1}>Thinking...</Shimmer>;
-	}
-	if (duration === undefined) {
-		return <p>Thought for a few seconds</p>;
-	}
-	return <p>Thought for {duration} seconds</p>;
-};
-
-export const ReasoningTrigger = memo(({ className, children, ...props }: ReasoningTriggerProps) => {
-	const { isStreaming, isOpen, duration } = useReasoning();
-
-	return (
-		<CollapsibleTrigger
-			className={cn(
-				'flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
-				className
-			)}
-			{...props}
-		>
-			{children ?? (
-				<>
-					<BrainIcon className="size-4" />
-					{getThinkingMessage(isStreaming, duration)}
-					<ChevronDownIcon
-						className={cn('size-4 transition-transform', isOpen ? 'rotate-180' : 'rotate-0')}
-					/>
-				</>
-			)}
-		</CollapsibleTrigger>
-	);
-});
-
-export type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
-	children: string;
-};
-
-export const ReasoningContent = memo(({ className, children, ...props }: ReasoningContentProps) => (
-	<CollapsibleContent
-		className={cn(
-			'mt-4 text-sm',
-			'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
-			className
-		)}
-		{...props}
-	>
-		<Response className="grid gap-2">{children}</Response>
-	</CollapsibleContent>
-));
-
-Reasoning.displayName = 'Reasoning';
-ReasoningTrigger.displayName = 'ReasoningTrigger';
-ReasoningContent.displayName = 'ReasoningContent';

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

@@ -1,19 +0,0 @@
-'use client';
-
-import { cn } from '../../lib/utils';
-import { type ComponentProps, memo } from 'react';
-import { Streamdown } from 'streamdown';
-
-type ResponseProps = ComponentProps<typeof Streamdown>;
-
-export const Response = memo(
-	({ className, ...props }: ResponseProps) => (
-		<Streamdown
-			className={cn('size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0', className)}
-			{...props}
-		/>
-	),
-	(prevProps, nextProps) => prevProps.children === nextProps.children
-);
-
-Response.displayName = 'Response';

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

@@ -1,53 +0,0 @@
-'use client';
-
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { cn } from '../../lib/utils';
-import { BookIcon, ChevronDownIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-
-export type SourcesProps = ComponentProps<'div'>;
-
-export const Sources = ({ className, ...props }: SourcesProps) => (
-	<Collapsible className={cn('not-prose mb-4 text-primary text-xs', className)} {...props} />
-);
-
-export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-	count: number;
-};
-
-export const SourcesTrigger = ({ className, count, children, ...props }: SourcesTriggerProps) => (
-	<CollapsibleTrigger className={cn('flex items-center gap-2', className)} {...props}>
-		{children ?? (
-			<>
-				<p className="font-medium">Used {count} sources</p>
-				<ChevronDownIcon className="h-4 w-4" />
-			</>
-		)}
-	</CollapsibleTrigger>
-);
-
-export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const SourcesContent = ({ className, ...props }: SourcesContentProps) => (
-	<CollapsibleContent
-		className={cn(
-			'mt-3 flex w-fit flex-col gap-2',
-			'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
-			className
-		)}
-		{...props}
-	/>
-);
-
-export type SourceProps = ComponentProps<'a'>;
-
-export const Source = ({ href, title, children, ...props }: SourceProps) => (
-	<a className="flex items-center gap-2" href={href} rel="noreferrer" target="_blank" {...props}>
-		{children ?? (
-			<>
-				<BookIcon className="h-4 w-4" />
-				<span className="block font-medium">{title}</span>
-			</>
-		)}
-	</a>
-);

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

@@ -1,47 +0,0 @@
-'use client';
-
-import type { ComponentProps } from 'react';
-import { Button } from '../ui/button';
-import { ScrollArea, ScrollBar } from '../ui/scroll-area';
-import { cn } from '../../lib/utils';
-
-export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
-
-export const Suggestions = ({ className, children, ...props }: SuggestionsProps) => (
-	<ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
-		<div className={cn('flex w-max flex-nowrap items-center gap-2', className)}>{children}</div>
-		<ScrollBar className="hidden" orientation="horizontal" />
-	</ScrollArea>
-);
-
-export type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
-	suggestion: string;
-	onClick?: (suggestion: string) => void;
-};
-
-export const Suggestion = ({
-	suggestion,
-	onClick,
-	className,
-	variant = 'outline',
-	size = 'sm',
-	children,
-	...props
-}: SuggestionProps) => {
-	const handleClick = () => {
-		onClick?.(suggestion);
-	};
-
-	return (
-		<Button
-			className={cn('cursor-pointer rounded-full px-4', className)}
-			onClick={handleClick}
-			size={size}
-			type="button"
-			variant={variant}
-			{...props}
-		>
-			{children || suggestion}
-		</Button>
-	);
-};

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

@@ -1,64 +0,0 @@
-'use client';
-
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { cn } from '../../lib/utils';
-import { ChevronDownIcon, SearchIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-
-export type TaskItemFileProps = ComponentProps<'div'>;
-
-export const TaskItemFile = ({ children, className, ...props }: TaskItemFileProps) => (
-	<div
-		className={cn(
-			'inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs',
-			className
-		)}
-		{...props}
-	>
-		{children}
-	</div>
-);
-
-export type TaskItemProps = ComponentProps<'div'>;
-
-export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
-	<div className={cn('text-muted-foreground text-sm', className)} {...props}>
-		{children}
-	</div>
-);
-
-export type TaskProps = ComponentProps<typeof Collapsible>;
-
-export const Task = ({ defaultOpen = true, className, ...props }: TaskProps) => (
-	<Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
-);
-
-export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-	title: string;
-};
-
-export const TaskTrigger = ({ children, className, title, ...props }: TaskTriggerProps) => (
-	<CollapsibleTrigger asChild className={cn('group', className)} {...props}>
-		{children ?? (
-			<div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
-				<SearchIcon className="size-4" />
-				<p className="text-sm">{title}</p>
-				<ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
-			</div>
-		)}
-	</CollapsibleTrigger>
-);
-
-export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const TaskContent = ({ children, className, ...props }: TaskContentProps) => (
-	<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}
-	>
-		<div className="mt-4 space-y-2 border-muted border-l-2 pl-4">{children}</div>
-	</CollapsibleContent>
-);