@agentuity/workbench 0.0.86 → 0.0.88

package/dist/hooks/useWorkbenchSchemas.js

@@ -1,63 +0,0 @@
-import { useWorkbench } from '../components/internal/WorkbenchProvider';
-/**
- * Hook to access agent schemas from the WorkbenchProvider context
- * This is preferred over using useAgentSchemas directly in components
- * since the provider manages the schema data centrally
- */
-export function useWorkbenchSchemas() {
-    const { schemas, schemasLoading, schemasError, refetchSchemas } = useWorkbench();
-    return {
-        /** Raw schema data from the API */
-        schemas,
-        /** Whether schemas are currently loading */
-        isLoading: schemasLoading,
-        /** Any error that occurred while fetching schemas */
-        error: schemasError,
-        /** Function to refetch schemas from the API */
-        refetch: refetchSchemas,
-        /** Array of agent names available in schemas */
-        agentNames: schemas ? Object.keys(schemas.agents) : [],
-        /** Number of agents available */
-        agentCount: schemas ? Object.keys(schemas.agents).length : 0,
-    };
-}
-/**
- * Hook to get a specific agent's schema by name
- */
-export function useWorkbenchAgentSchema(agentName) {
-    const { schemas } = useWorkbench();
-    const agentData = schemas?.agents[agentName] || null;
-    return {
-        /** Agent schema data if found */
-        data: agentData,
-        /** Input schema for the agent */
-        inputSchema: agentData?.schema.input || null,
-        /** Output schema for the agent */
-        outputSchema: agentData?.schema.output || null,
-        /** Agent metadata */
-        metadata: agentData?.metadata || null,
-        /** Whether the agent exists in the current schemas */
-        exists: !!agentData,
-    };
-}
-/**
- * Hook to get all agent schemas as an array
- */
-export function useWorkbenchAllAgentSchemas() {
-    const { schemas } = useWorkbench();
-    const allAgents = schemas
-        ? Object.entries(schemas.agents).map(([name, agentData]) => ({
-            name,
-            ...agentData,
-        }))
-        : [];
-    return {
-        /** Array of all agent schema data */
-        agents: allAgents,
-        /** Whether any schemas are available */
-        hasSchemas: allAgents.length > 0,
-        /** Count of available schemas */
-        count: allAgents.length,
-    };
-}
-//# sourceMappingURL=useWorkbenchSchemas.js.map

package/dist/hooks/useWorkbenchSchemas.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWorkbenchSchemas.js","sourceRoot":"","sources":["../../src/hooks/useWorkbenchSchemas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE;;;;GAIG;AACH,MAAM,UAAU,mBAAmB;IAClC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjF,OAAO;QACN,mCAAmC;QACnC,OAAO;QACP,4CAA4C;QAC5C,SAAS,EAAE,cAAc;QACzB,qDAAqD;QACrD,KAAK,EAAE,YAAY;QACnB,+CAA+C;QAC/C,OAAO,EAAE,cAAc;QACvB,gDAAgD;QAChD,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;QACtD,iCAAiC;QACjC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAC5D,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,SAAiB;IACxD,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAEnC,MAAM,SAAS,GAAG,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC;IAErD,OAAO;QACN,iCAAiC;QACjC,IAAI,EAAE,SAAS;QACf,iCAAiC;QACjC,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,IAAI,IAAI;QAC5C,kCAAkC;QAClC,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IAAI,IAAI;QAC9C,qBAAqB;QACrB,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAI,IAAI;QACrC,sDAAsD;QACtD,MAAM,EAAE,CAAC,CAAC,SAAS;KACnB,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,2BAA2B;IAC1C,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAEnC,MAAM,SAAS,GAAG,OAAO;QACxB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;YAC3D,IAAI;YACJ,GAAG,SAAS;SACZ,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEN,OAAO;QACN,qCAAqC;QACrC,MAAM,EAAE,SAAS;QACjB,wCAAwC;QACxC,UAAU,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC;QAChC,iCAAiC;QACjC,KAAK,EAAE,SAAS,CAAC,MAAM;KACvB,CAAC;AACH,CAAC"}

package/src/components/ConnectionStatus.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import type { ConnectionStatus as ConnectionStatusType } from '../types/config';
-
-interface ConnectionStatusProps {
-	status: ConnectionStatusType;
-}
-
-export function ConnectionStatus({ status }: ConnectionStatusProps) {
-	if (status === 'connected') {
-		return null; // Don't show anything when connected normally
-	}
-
-	const getStatusConfig = (status: ConnectionStatusType) => {
-		switch (status) {
-			case 'restarting':
-				return {
-					text: 'Server restarting...',
-					bgColor: 'bg-amber-100',
-					textColor: 'text-amber-800',
-					borderColor: 'border-amber-200',
-					icon: '🔄',
-				};
-			case 'disconnected':
-				return {
-					text: 'Disconnected from server',
-					bgColor: 'bg-red-100',
-					textColor: 'text-red-800',
-					borderColor: 'border-red-200',
-					icon: '⚠️',
-				};
-			case 'connected':
-				return {
-					text: 'Connected',
-					bgColor: 'bg-green-100',
-					textColor: 'text-green-800',
-					borderColor: 'border-green-200',
-					icon: '✅',
-				};
-			default:
-				return {
-					text: 'Unknown status',
-					bgColor: 'bg-gray-100',
-					textColor: 'text-gray-800',
-					borderColor: 'border-gray-200',
-					icon: '❓',
-				};
-		}
-	};
-
-	const config = getStatusConfig(status);
-
-	return (
-		<div
-			className={`
-				fixed top-0 left-0 right-0 z-50
-				px-4 py-2
-				${config.bgColor} ${config.textColor} ${config.borderColor}
-				border-b
-				text-center text-sm font-medium
-				transition-all duration-200 ease-in-out
-			`}
-		>
-			<span className="mr-2">{config.icon}</span>
-			{config.text}
-		</div>
-	);
-}

package/src/components/Inline.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Chat } from './internal/Chat';
-
-export interface InlineProps {
-	className?: string;
-}
-
-/**
- * Inline component - just the chat area
- * Must be used within WorkbenchProvider
- */
-export function Inline({ className }: InlineProps) {
-	return <Chat className={className} />;
-}
-
-export default Inline;

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

@@ -1,118 +0,0 @@
-'use client';
-
-import { Button } from '../ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
-import { cn } from '../../lib/utils';
-import { type LucideIcon, XIcon } from 'lucide-react';
-import type { ComponentProps, HTMLAttributes } from 'react';
-
-export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
-
-export const Artifact = ({ className, ...props }: ArtifactProps) => (
-	<div
-		className={cn(
-			'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
-			className
-		)}
-		{...props}
-	/>
-);
-
-export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
-
-export const ArtifactHeader = ({ className, ...props }: ArtifactHeaderProps) => (
-	<div
-		className={cn('flex items-center justify-between border-b bg-muted/50 px-4 py-3', className)}
-		{...props}
-	/>
-);
-
-export type ArtifactCloseProps = ComponentProps<typeof Button>;
-
-export const ArtifactClose = ({
-	className,
-	children,
-	size = 'sm',
-	variant = 'ghost',
-	...props
-}: ArtifactCloseProps) => (
-	<Button
-		className={cn('size-8 p-0 text-muted-foreground hover:text-foreground', className)}
-		size={size}
-		type="button"
-		variant={variant}
-		{...props}
-	>
-		{children ?? <XIcon className="size-4" />}
-		<span className="sr-only">Close</span>
-	</Button>
-);
-
-export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-	<p className={cn('font-medium text-foreground text-sm', className)} {...props} />
-);
-
-export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const ArtifactDescription = ({ className, ...props }: ArtifactDescriptionProps) => (
-	<p className={cn('text-muted-foreground text-sm', className)} {...props} />
-);
-
-export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
-
-export const ArtifactActions = ({ className, ...props }: ArtifactActionsProps) => (
-	<div className={cn('flex items-center gap-1', className)} {...props} />
-);
-
-export type ArtifactActionProps = ComponentProps<typeof Button> & {
-	tooltip?: string;
-	label?: string;
-	icon?: LucideIcon;
-};
-
-export const ArtifactAction = ({
-	tooltip,
-	label,
-	icon: Icon,
-	children,
-	className,
-	size = 'sm',
-	variant = 'ghost',
-	...props
-}: ArtifactActionProps) => {
-	const button = (
-		<Button
-			className={cn('size-8 p-0 text-muted-foreground hover:text-foreground', className)}
-			size={size}
-			type="button"
-			variant={variant}
-			{...props}
-		>
-			{Icon ? <Icon className="size-4" /> : children}
-			<span className="sr-only">{label || tooltip}</span>
-		</Button>
-	);
-
-	if (tooltip) {
-		return (
-			<TooltipProvider>
-				<Tooltip>
-					<TooltipTrigger asChild>{button}</TooltipTrigger>
-					<TooltipContent>
-						<p>{tooltip}</p>
-					</TooltipContent>
-				</Tooltip>
-			</TooltipProvider>
-		);
-	}
-
-	return button;
-};
-
-export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
-
-export const ArtifactContent = ({ className, ...props }: ArtifactContentProps) => (
-	<div className={cn('flex-1 overflow-auto p-4', className)} {...props} />
-);

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

@@ -1,187 +0,0 @@
-'use client';
-
-import { Button } from '../ui/button';
-import { cn } from '../../lib/utils';
-import type { UIMessage } from 'ai';
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
-import { createContext, useContext, useEffect, useState } from 'react';
-
-type BranchContextType = {
-	currentBranch: number;
-	totalBranches: number;
-	goToPrevious: () => void;
-	goToNext: () => void;
-	branches: ReactElement[];
-	setBranches: (branches: ReactElement[]) => void;
-};
-
-const BranchContext = createContext<BranchContextType | null>(null);
-
-const useBranch = () => {
-	const context = useContext(BranchContext);
-
-	if (!context) {
-		throw new Error('Branch components must be used within Branch');
-	}
-
-	return context;
-};
-
-export type BranchProps = HTMLAttributes<HTMLDivElement> & {
-	defaultBranch?: number;
-	onBranchChange?: (branchIndex: number) => void;
-};
-
-export const Branch = ({ defaultBranch = 0, onBranchChange, className, ...props }: BranchProps) => {
-	const [currentBranch, setCurrentBranch] = useState(defaultBranch);
-	const [branches, setBranches] = useState<ReactElement[]>([]);
-
-	const handleBranchChange = (newBranch: number) => {
-		setCurrentBranch(newBranch);
-		onBranchChange?.(newBranch);
-	};
-
-	const goToPrevious = () => {
-		const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
-		handleBranchChange(newBranch);
-	};
-
-	const goToNext = () => {
-		const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
-		handleBranchChange(newBranch);
-	};
-
-	const contextValue: BranchContextType = {
-		currentBranch,
-		totalBranches: branches.length,
-		goToPrevious,
-		goToNext,
-		branches,
-		setBranches,
-	};
-
-	return (
-		<BranchContext.Provider value={contextValue}>
-			<div className={cn('grid w-full gap-2 [&>div]:pb-0', className)} {...props} />
-		</BranchContext.Provider>
-	);
-};
-
-export type BranchMessagesProps = HTMLAttributes<HTMLDivElement>;
-
-export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
-	const { currentBranch, setBranches, branches } = useBranch();
-	const childrenArray = Array.isArray(children) ? children : [children];
-
-	// Use useEffect to update branches when they change
-	useEffect(() => {
-		if (branches.length !== childrenArray.length) {
-			setBranches(childrenArray);
-		}
-	}, [childrenArray, branches, setBranches]);
-
-	return childrenArray.map((branch, index) => (
-		<div
-			className={cn(
-				'grid gap-2 overflow-hidden [&>div]:pb-0',
-				index === currentBranch ? 'block' : 'hidden'
-			)}
-			key={branch.key}
-			{...props}
-		>
-			{branch}
-		</div>
-	));
-};
-
-export type BranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
-	from: UIMessage['role'];
-};
-
-export const BranchSelector = ({ className, from, ...props }: BranchSelectorProps) => {
-	const { totalBranches } = useBranch();
-
-	// Don't render if there's only one branch
-	if (totalBranches <= 1) {
-		return null;
-	}
-
-	return (
-		<div
-			className={cn(
-				'flex items-center gap-2 self-end px-10',
-				from === 'assistant' ? 'justify-start' : 'justify-end',
-				className
-			)}
-			{...props}
-		/>
-	);
-};
-
-export type BranchPreviousProps = ComponentProps<typeof Button>;
-
-export const BranchPrevious = ({ className, children, ...props }: BranchPreviousProps) => {
-	const { goToPrevious, totalBranches } = useBranch();
-
-	return (
-		<Button
-			aria-label="Previous branch"
-			className={cn(
-				'size-7 shrink-0 rounded-full text-muted-foreground transition-colors',
-				'hover:bg-accent hover:text-foreground',
-				'disabled:pointer-events-none disabled:opacity-50',
-				className
-			)}
-			disabled={totalBranches <= 1}
-			onClick={goToPrevious}
-			size="icon"
-			type="button"
-			variant="ghost"
-			{...props}
-		>
-			{children ?? <ChevronLeftIcon size={14} />}
-		</Button>
-	);
-};
-
-export type BranchNextProps = ComponentProps<typeof Button>;
-
-export const BranchNext = ({ className, children, ...props }: BranchNextProps) => {
-	const { goToNext, totalBranches } = useBranch();
-
-	return (
-		<Button
-			aria-label="Next branch"
-			className={cn(
-				'size-7 shrink-0 rounded-full text-muted-foreground transition-colors',
-				'hover:bg-accent hover:text-foreground',
-				'disabled:pointer-events-none disabled:opacity-50',
-				className
-			)}
-			disabled={totalBranches <= 1}
-			onClick={goToNext}
-			size="icon"
-			type="button"
-			variant="ghost"
-			{...props}
-		>
-			{children ?? <ChevronRightIcon size={14} />}
-		</Button>
-	);
-};
-
-export type BranchPageProps = HTMLAttributes<HTMLSpanElement>;
-
-export const BranchPage = ({ className, ...props }: BranchPageProps) => {
-	const { currentBranch, totalBranches } = useBranch();
-
-	return (
-		<span
-			className={cn('font-medium text-muted-foreground text-xs tabular-nums', className)}
-			{...props}
-		>
-			{currentBranch + 1} of {totalBranches}
-		</span>
-	);
-};

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

@@ -1,24 +0,0 @@
-import { Background, ReactFlow, type ReactFlowProps } from '@xyflow/react';
-import type { ReactNode } from 'react';
-import '@xyflow/react/dist/style.css';
-import { Controls } from './controls';
-
-type CanvasProps = ReactFlowProps & {
-	children?: ReactNode;
-};
-
-export const Canvas = ({ children, ...props }: CanvasProps) => (
-	<ReactFlow
-		deleteKeyCode={['Backspace', 'Delete']}
-		fitView
-		panOnDrag={false}
-		panOnScroll
-		selectionOnDrag={true}
-		zoomOnDoubleClick={false}
-		{...props}
-	>
-		<Background bgColor="var(--sidebar)" />
-		<Controls />
-		{children}
-	</ReactFlow>
-);

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

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