@agentuity/workbench 0.0.64 → 0.0.65

package/src/components/ai-elements/inline-citation.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { Badge } from '../ui/badge';
+import { Carousel, type CarouselApi, CarouselContent, CarouselItem } from '../ui/carousel';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card';
+import { cn } from '../../lib/utils';
+import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
+import {
+	type ComponentProps,
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useState,
+} from 'react';
+
+export type InlineCitationProps = ComponentProps<'span'>;
+
+export const InlineCitation = ({ className, ...props }: InlineCitationProps) => (
+	<span className={cn('group inline items-center gap-1', className)} {...props} />
+);
+
+export type InlineCitationTextProps = ComponentProps<'span'>;
+
+export const InlineCitationText = ({ className, ...props }: InlineCitationTextProps) => (
+	<span className={cn('transition-colors group-hover:bg-accent', className)} {...props} />
+);
+
+export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+
+export const InlineCitationCard = (props: InlineCitationCardProps) => (
+	<HoverCard closeDelay={0} openDelay={0} {...props} />
+);
+
+export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+	sources: string[];
+};
+
+export const InlineCitationCardTrigger = ({
+	sources,
+	className,
+	...props
+}: InlineCitationCardTriggerProps) => (
+	<HoverCardTrigger asChild>
+		<Badge className={cn('ml-1 rounded-full', className)} variant="secondary" {...props}>
+			{sources[0] ? (
+				<>
+					{new URL(sources[0]).hostname} {sources.length > 1 && `+${sources.length - 1}`}
+				</>
+			) : (
+				'unknown'
+			)}
+		</Badge>
+	</HoverCardTrigger>
+);
+
+export type InlineCitationCardBodyProps = ComponentProps<'div'>;
+
+export const InlineCitationCardBody = ({ className, ...props }: InlineCitationCardBodyProps) => (
+	<HoverCardContent className={cn('relative w-80 p-0', className)} {...props} />
+);
+
+const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
+
+const useCarouselApi = () => {
+	const context = useContext(CarouselApiContext);
+	return context;
+};
+
+export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+
+export const InlineCitationCarousel = ({
+	className,
+	children,
+	...props
+}: InlineCitationCarouselProps) => {
+	const [api, setApi] = useState<CarouselApi>();
+
+	return (
+		<CarouselApiContext.Provider value={api}>
+			<Carousel className={cn('w-full', className)} setApi={setApi} {...props}>
+				{children}
+			</Carousel>
+		</CarouselApiContext.Provider>
+	);
+};
+
+export type InlineCitationCarouselContentProps = ComponentProps<'div'>;
+
+export const InlineCitationCarouselContent = (props: InlineCitationCarouselContentProps) => (
+	<CarouselContent {...props} />
+);
+
+export type InlineCitationCarouselItemProps = ComponentProps<'div'>;
+
+export const InlineCitationCarouselItem = ({
+	className,
+	...props
+}: InlineCitationCarouselItemProps) => (
+	<CarouselItem className={cn('w-full space-y-2 p-4 pl-8', className)} {...props} />
+);
+
+export type InlineCitationCarouselHeaderProps = ComponentProps<'div'>;
+
+export const InlineCitationCarouselHeader = ({
+	className,
+	...props
+}: InlineCitationCarouselHeaderProps) => (
+	<div
+		className={cn(
+			'flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2',
+			className
+		)}
+		{...props}
+	/>
+);
+
+export type InlineCitationCarouselIndexProps = ComponentProps<'div'>;
+
+export const InlineCitationCarouselIndex = ({
+	children,
+	className,
+	...props
+}: InlineCitationCarouselIndexProps) => {
+	const api = useCarouselApi();
+	const [current, setCurrent] = useState(0);
+	const [count, setCount] = useState(0);
+
+	useEffect(() => {
+		if (!api) {
+			return;
+		}
+
+		setCount(api.scrollSnapList().length);
+		setCurrent(api.selectedScrollSnap() + 1);
+
+		api.on('select', () => {
+			setCurrent(api.selectedScrollSnap() + 1);
+		});
+	}, [api]);
+
+	return (
+		<div
+			className={cn(
+				'flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs',
+				className
+			)}
+			{...props}
+		>
+			{children ?? `${current}/${count}`}
+		</div>
+	);
+};
+
+export type InlineCitationCarouselPrevProps = ComponentProps<'button'>;
+
+export const InlineCitationCarouselPrev = ({
+	className,
+	...props
+}: InlineCitationCarouselPrevProps) => {
+	const api = useCarouselApi();
+
+	const handleClick = useCallback(() => {
+		if (api) {
+			api.scrollPrev();
+		}
+	}, [api]);
+
+	return (
+		<button
+			aria-label="Previous"
+			className={cn('shrink-0', className)}
+			onClick={handleClick}
+			type="button"
+			{...props}
+		>
+			<ArrowLeftIcon className="size-4 text-muted-foreground" />
+		</button>
+	);
+};
+
+export type InlineCitationCarouselNextProps = ComponentProps<'button'>;
+
+export const InlineCitationCarouselNext = ({
+	className,
+	...props
+}: InlineCitationCarouselNextProps) => {
+	const api = useCarouselApi();
+
+	const handleClick = useCallback(() => {
+		if (api) {
+			api.scrollNext();
+		}
+	}, [api]);
+
+	return (
+		<button
+			aria-label="Next"
+			className={cn('shrink-0', className)}
+			onClick={handleClick}
+			type="button"
+			{...props}
+		>
+			<ArrowRightIcon className="size-4 text-muted-foreground" />
+		</button>
+	);
+};
+
+export type InlineCitationSourceProps = ComponentProps<'div'> & {
+	title?: string;
+	url?: string;
+	description?: string;
+};
+
+export const InlineCitationSource = ({
+	title,
+	url,
+	description,
+	className,
+	children,
+	...props
+}: InlineCitationSourceProps) => (
+	<div className={cn('space-y-1', className)} {...props}>
+		{title && <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>}
+		{url && <p className="truncate break-all text-muted-foreground text-xs">{url}</p>}
+		{description && (
+			<p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">{description}</p>
+		)}
+		{children}
+	</div>
+);
+
+export type InlineCitationQuoteProps = ComponentProps<'blockquote'>;
+
+export const InlineCitationQuote = ({
+	children,
+	className,
+	...props
+}: InlineCitationQuoteProps) => (
+	<blockquote
+		className={cn('border-muted border-l-2 pl-3 text-muted-foreground text-sm italic', className)}
+		{...props}
+	>
+		{children}
+	</blockquote>
+);

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

@@ -0,0 +1,88 @@
+import { cn } from '../../lib/utils';
+import type { HTMLAttributes } from 'react';
+
+type LoaderIconProps = {
+	size?: number;
+};
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+	<svg
+		height={size}
+		strokeLinejoin="round"
+		style={{ color: 'currentcolor' }}
+		viewBox="0 0 16 16"
+		width={size}
+	>
+		<title>Loader</title>
+		<g clipPath="url(#clip0_2393_1490)">
+			<path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+			<path d="M8 16V12" opacity="0.5" stroke="currentColor" strokeWidth="1.5" />
+			<path
+				d="M3.29773 1.52783L5.64887 4.7639"
+				opacity="0.9"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M12.7023 1.52783L10.3511 4.7639"
+				opacity="0.1"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M12.7023 14.472L10.3511 11.236"
+				opacity="0.4"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M3.29773 14.472L5.64887 11.236"
+				opacity="0.6"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M15.6085 5.52783L11.8043 6.7639"
+				opacity="0.2"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M0.391602 10.472L4.19583 9.23598"
+				opacity="0.7"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M15.6085 10.4722L11.8043 9.2361"
+				opacity="0.3"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+			<path
+				d="M0.391602 5.52783L4.19583 6.7639"
+				opacity="0.8"
+				stroke="currentColor"
+				strokeWidth="1.5"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_2393_1490">
+				<rect fill="white" height="16" width="16" />
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+	size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+	<div
+		className={cn('inline-flex animate-spin items-center justify-center', className)}
+		{...props}
+	>
+		<LoaderIcon size={size} />
+	</div>
+);

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

@@ -0,0 +1,63 @@
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import { cn } from '../../lib/utils';
+import type { UIMessage } from 'ai';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, HTMLAttributes } from 'react';
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+	from: UIMessage['role'];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+	<div
+		className={cn(
+			'group flex w-full items-end justify-end gap-2 py-4',
+			from === 'user' ? 'is-user' : 'is-assistant flex-row-reverse justify-end',
+			className
+		)}
+		{...props}
+	/>
+);
+
+const messageContentVariants = cva(
+	'is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm',
+	{
+		variants: {
+			variant: {
+				contained: [
+					'max-w-[80%] px-4 py-3',
+					'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
+					'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
+				],
+				flat: [
+					'group-[.is-user]:max-w-[80%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground',
+					'group-[.is-assistant]:text-foreground',
+				],
+			},
+		},
+		defaultVariants: {
+			variant: 'contained',
+		},
+	}
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement> &
+	VariantProps<typeof messageContentVariants>;
+
+export const MessageContent = ({ children, className, variant, ...props }: MessageContentProps) => (
+	<div className={cn(messageContentVariants({ variant, className }))} {...props}>
+		{children}
+	</div>
+);
+
+export type MessageAvatarProps = ComponentProps<typeof Avatar> & {
+	src: string;
+	name?: string;
+};
+
+export const MessageAvatar = ({ src, name, className, ...props }: MessageAvatarProps) => (
+	<Avatar className={cn('size-8 ring-1 ring-border', className)} {...props}>
+		<AvatarImage alt="" className="mt-0 mb-0" src={src} />
+		<AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>
+	</Avatar>
+);

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

@@ -0,0 +1,66 @@
+import {
+	Card,
+	CardAction,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from '../ui/card';
+import { cn } from '../../lib/utils';
+import { Handle, Position } from '@xyflow/react';
+import type { ComponentProps } from 'react';
+
+export type NodeProps = ComponentProps<typeof Card> & {
+	handles: {
+		target: boolean;
+		source: boolean;
+	};
+};
+
+export const Node = ({ handles, className, ...props }: NodeProps) => (
+	<Card
+		className={cn(
+			'node-container relative size-full h-auto w-sm gap-0 rounded-md p-0',
+			className
+		)}
+		{...props}
+	>
+		{handles.target && <Handle position={Position.Left} type="target" />}
+		{handles.source && <Handle position={Position.Right} type="source" />}
+		{props.children}
+	</Card>
+);
+
+export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
+	<CardHeader
+		className={cn('gap-0.5 rounded-t-md border-b bg-secondary p-3!', className)}
+		{...props}
+	/>
+);
+
+export type NodeTitleProps = ComponentProps<typeof CardTitle>;
+
+export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
+
+export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+
+export const NodeDescription = (props: NodeDescriptionProps) => <CardDescription {...props} />;
+
+export type NodeActionProps = ComponentProps<typeof CardAction>;
+
+export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
+
+export type NodeContentProps = ComponentProps<typeof CardContent>;
+
+export const NodeContent = ({ className, ...props }: NodeContentProps) => (
+	<CardContent className={cn('p-3', className)} {...props} />
+);
+
+export type NodeFooterProps = ComponentProps<typeof CardFooter>;
+
+export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
+	<CardFooter className={cn('rounded-b-md border-t bg-secondary p-3!', className)} {...props} />
+);