@agentuity/workbench 0.0.105 → 0.0.107

package/src/components/ai-elements/code-block.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { Button } from '../ui/button';
-import { cn } from '../../lib/utils';
+import javascriptLang from '@shikijs/langs/javascript';
+import jsonLang from '@shikijs/langs/json';
+import typescriptLang from '@shikijs/langs/typescript';
+import themeDarkModule from '@shikijs/themes/dark-plus';
+import themeLightModule from '@shikijs/themes/light-plus';
 import type { Element } from 'hast';
 import { CheckIcon, CopyIcon } from 'lucide-react';
 import {
@@ -13,21 +16,19 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import type { ShikiTransformer, ThemeRegistration } from 'shiki';
 import { createHighlighterCore } from 'shiki/core';
 import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
-import type { ShikiTransformer, ThemeRegistration } from 'shiki';
-import oneLightModule from '@shikijs/themes/one-light';
-import oneDarkProModule from '@shikijs/themes/one-dark-pro';
-import jsonLang from '@shikijs/langs/json';
-import javascriptLang from '@shikijs/langs/javascript';
-import typescriptLang from '@shikijs/langs/typescript';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 
 // Extract theme objects from default exports
-const oneLight = (
-	'default' in oneLightModule ? oneLightModule.default : oneLightModule
+const themeLight = (
+	'default' in themeLightModule ? themeLightModule.default : themeLightModule
 ) as ThemeRegistration;
-const oneDarkPro = (
-	'default' in oneDarkProModule ? oneDarkProModule.default : oneDarkProModule
+const themeDark = (
+	'default' in themeDarkModule ? themeDarkModule.default : themeDarkModule
 ) as ThemeRegistration;
 
 type SupportedLanguage = 'json' | 'javascript' | 'typescript';
@@ -52,7 +53,7 @@ let highlighterPromise: ReturnType<typeof createHighlighterCore> | null = null;
 function getHighlighter() {
 	if (!highlighterPromise) {
 		highlighterPromise = createHighlighterCore({
-			themes: [oneLight, oneDarkPro],
+			themes: [themeLight, themeDark],
 			langs: [jsonLang, javascriptLang, typescriptLang],
 			engine: createOnigurumaEngine(import('shiki/wasm')),
 		});
@@ -87,17 +88,18 @@ export async function highlightCode(
 	showLineNumbers = false
 ): Promise<readonly [string, string]> {
 	const highlighter = await getHighlighter();
+
 	const transformers: ShikiTransformer[] = showLineNumbers ? [lineNumberTransformer] : [];
 
 	return [
 		highlighter.codeToHtml(code, {
 			lang: language,
-			theme: oneLight.name ?? 'one-light',
+			theme: themeLight.name ?? 'github-light',
 			transformers,
 		}),
 		highlighter.codeToHtml(code, {
 			lang: language,
-			theme: oneDarkPro.name ?? 'one-dark-pro',
+			theme: themeDark.name ?? 'github-dark',
 			transformers,
 		}),
 	] as const;
@@ -111,14 +113,14 @@ export const CodeBlock = ({
 	children,
 	...props
 }: CodeBlockProps) => {
-	const [html, setHtml] = useState<string>('');
+	const [lightHtml, setLightHtml] = useState<string>('');
 	const [darkHtml, setDarkHtml] = useState<string>('');
 	const mounted = useRef(false);
 
 	useEffect(() => {
 		highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
 			if (!mounted.current) {
-				setHtml(light);
+				setLightHtml(light);
 				setDarkHtml(dark);
 				mounted.current = true;
 			}
@@ -129,6 +131,9 @@ export const CodeBlock = ({
 		};
 	}, [code, language, showLineNumbers]);
 
+	const baseClass =
+		'overflow-hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&>pre]:whitespace-pre-wrap [&_code]:font-mono [&_code]:text-sm';
+
 	return (
 		<CodeBlockContext.Provider value={{ code }}>
 			<div
@@ -139,18 +144,22 @@ export const CodeBlock = ({
 				{...props}
 			>
 				<div className="relative">
+					{/* Light Mode */}
 					<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 }}
+						className={cn(baseClass, 'dark:hidden')}
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: must be added via this method as per the library
+						dangerouslySetInnerHTML={{ __html: lightHtml }}
 					/>
+
+					{/* Dark Mode */}
 					<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."
+						className={cn(baseClass, 'hidden dark:block')}
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: must be added via this method as per the library
 						dangerouslySetInnerHTML={{ __html: darkHtml }}
 					/>
+
 					{children && (
-						<div className="absolute top-2 right-2 flex items-center gap-2">{children}</div>
+						<div className="absolute top-1 right-1 flex items-center gap-2">{children}</div>
 					)}
 				</div>
 			</div>
@@ -194,14 +203,19 @@ export const CodeBlockCopyButton = ({
 	const Icon = isCopied ? CheckIcon : CopyIcon;
 
 	return (
-		<Button
-			className={cn('shrink-0', className)}
-			onClick={copyToClipboard}
-			size="icon"
-			variant="ghost"
-			{...props}
-		>
-			{children ?? <Icon size={14} />}
-		</Button>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					className={cn('size-7 shrink-0 rounded-sm', className)}
+					onClick={copyToClipboard}
+					size="icon"
+					variant="ghost"
+					{...props}
+				>
+					{children ?? <Icon size={14} />}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>Copy to clipboard</TooltipContent>
+		</Tooltip>
 	);
 };

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

@@ -1,11 +1,11 @@
 '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';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
 
 export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
@@ -71,20 +71,21 @@ export const ConversationScrollButton = ({
 	}, [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>
-		)
+		<Button
+			className={cn(
+				'absolute bottom-0 left-[50%] translate-x-[-50%] rounded-full transition-all duration-300',
+				isAtBottom
+					? 'opacity-0 pointer-events-none -translate-y-1/2'
+					: 'opacity-100 translate-y-0',
+				className
+			)}
+			onClick={handleScrollToBottom}
+			size="icon"
+			type="button"
+			variant="outline"
+			{...props}
+		>
+			<ArrowDownIcon className="size-4" />
+		</Button>
 	);
 };

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

@@ -1,8 +1,8 @@
-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';
+import { cn } from '../../lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 
 export type MessageProps = HTMLAttributes<HTMLDivElement> & {
 	from: UIMessage['role'];
@@ -20,18 +20,13 @@ export const Message = ({ className, from, ...props }: MessageProps) => (
 );
 
 const messageContentVariants = cva(
-	'is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm',
+	'is-user:dark flex flex-col gap-2 overflow-hidden rounded-md 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',
-				],
+				contained: ['max-w-[80%] px-4 py-3 bg-input/30 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',
 				],
 			},
 		},

package/src/components/ai-elements/prompt-input.tsx

@@ -34,6 +34,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
 import {
 	Command,
@@ -58,7 +59,6 @@ import {
 	InputGroupTextarea,
 } from '../ui/input-group';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
-import { cn } from '../../lib/utils';
 // ============================================================================
 // Provider Context & Types
 // ============================================================================

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { cn } from '../../lib/utils';
 import { motion } from 'motion/react';
 import { type CSSProperties, type ElementType, type JSX, memo, useMemo } from 'react';
+import { cn } from '../../lib/utils';
 
 export type TextShimmerProps = {
 	children: string;

package/src/components/internal/chat.tsx

@@ -0,0 +1,326 @@
+import { ChevronRight, Copy, Loader, RefreshCcw } from 'lucide-react';
+import { useState } from 'react';
+import { useLogger } from '../../hooks/useLogger';
+import { cn, formatErrorForCopy } from '../../lib/utils';
+import { Action, Actions } from '../ai-elements/actions';
+import { CodeBlock } from '../ai-elements/code-block';
+import {
+	Conversation,
+	ConversationContent,
+	ConversationScrollButton,
+} from '../ai-elements/conversation';
+import { Message, MessageContent } from '../ai-elements/message';
+import { Shimmer } from '../ai-elements/shimmer';
+import { InputSection } from './input-section';
+import { useWorkbench } from './workbench-provider';
+
+export interface ChatProps {
+	className?: string;
+	emptyState?: React.ReactNode;
+	onSchemaToggle?: () => void;
+	onSessionOpen?: (sessionId: string) => void;
+	schemaOpen?: boolean;
+}
+
+export function Chat({
+	className: _className,
+	emptyState,
+	onSchemaToggle,
+	onSessionOpen,
+	schemaOpen,
+}: ChatProps) {
+	const {
+		agents,
+		clearAgentState,
+		connectionStatus,
+		isLoading,
+		messages,
+		selectedAgent,
+		setSelectedAgent,
+		submitMessage,
+	} = useWorkbench();
+	const logger = useLogger('Chat');
+	const [value, setValue] = useState('');
+
+	const handleSubmit = () => {
+		logger.debug('🎯 Chat handleSubmit - selectedAgent:', selectedAgent, 'value:', value);
+
+		const selectedAgentData = Object.values(agents).find(
+			(agent) => agent.metadata.agentId === selectedAgent
+		);
+
+		logger.debug('📊 Chat handleSubmit - selectedAgentData:', selectedAgentData);
+
+		const hasInputSchema = selectedAgentData?.schema?.input?.json;
+
+		logger.debug('📝 Chat handleSubmit - hasInputSchema:', hasInputSchema);
+
+		// If agent has no input schema, submit without requiring input
+		if (!hasInputSchema) {
+			submitMessage('');
+
+			return;
+		}
+
+		// For agents with input schema, require input
+		if (!value.trim()) {
+			return;
+		}
+
+		submitMessage(value);
+		setValue('');
+	};
+
+	return (
+		<div className="relative flex flex-col h-full w-full overflow-hidden">
+			<Conversation
+				className="flex-1 overflow-y-auto [&>div]:overflow-y-auto"
+				id="chat-conversation"
+			>
+				{connectionStatus === 'disconnected' && emptyState ? (
+					<div className="flex flex-col h-full">{emptyState}</div>
+				) : (
+					<ConversationContent>
+						{messages.map((message) => {
+							const { role, parts, id } = message;
+
+							const isStreaming = parts.some(
+								(part) => part.type === 'text' && part.state === 'streaming'
+							);
+
+							const tokens =
+								'tokens' in message ? (message as { tokens?: string }).tokens : undefined;
+
+							const duration =
+								'duration' in message
+									? (message as { duration?: string }).duration
+									: undefined;
+
+							const sessionId =
+								'sessionId' in message
+									? (message as { sessionId?: string }).sessionId
+									: undefined;
+
+							// Check for agent error in text content
+							let errorInfo:
+								| {
+										message: string;
+										stack?: string;
+										code?: string;
+										cause?: unknown;
+								  }
+								| undefined;
+
+							if (parts.length === 1 && parts[0].type === 'text') {
+								const text = parts[0].text;
+
+								if (text.startsWith('{') && text.includes('"__agentError"')) {
+									try {
+										const parsed = JSON.parse(text) as {
+											__agentError?: boolean;
+											message?: string;
+											stack?: string;
+											code?: string;
+											cause?: unknown;
+										};
+
+										if (parsed.__agentError) {
+											errorInfo = {
+												message: parsed.message || 'Unknown error',
+												stack: parsed.stack,
+												code: parsed.code,
+												cause: parsed.cause,
+											};
+										}
+									} catch {
+										// Not valid JSON, ignore
+									}
+								}
+							}
+
+							return (
+								<div key={id} className="mb-2">
+									{role === 'assistant' && (
+										<div className="w-fit flex items-center mb-2 text-muted-foreground text-sm transition-colors">
+											<Loader
+												className={cn(
+													'size-4 transition-all',
+													isStreaming ? 'animate-spin mr-2' : 'w-0 mr-2.5'
+												)}
+											/>
+
+											{isStreaming ? (
+												<Shimmer duration={1}>Running...</Shimmer>
+											) : (
+												<button
+													type="button"
+													className={cn(
+														'flex items-center bg-transparent border-none p-0 text-inherit',
+														sessionId && onSessionOpen
+															? 'hover:text-foreground transition-colors cursor-pointer'
+															: 'cursor-default'
+													)}
+													onClick={() => sessionId && onSessionOpen?.(sessionId)}
+													tabIndex={0}
+													aria-label="Open session"
+													disabled={!sessionId}
+													style={{ background: 'none' }}
+												>
+													{duration ? (
+														<>
+															Ran for
+															<span className="mx-1">{duration}</span>
+														</>
+													) : (
+														<>Finished</>
+													)}
+
+													{duration && tokens && (
+														<>
+															and consumed
+															<span className="mx-1">{tokens}</span> tokens
+														</>
+													)}
+
+													{sessionId && onSessionOpen && (
+														<ChevronRight className="size-4" />
+													)}
+												</button>
+											)}
+										</div>
+									)}
+
+									{(role === 'user' || !isStreaming) && (
+										<>
+											<Message
+												key={id}
+												from={role as 'user' | 'system' | 'assistant'}
+												className="p-0"
+											>
+												<MessageContent
+													className={cn(errorInfo && 'bg-destructive/10')}
+												>
+													{errorInfo ? (
+														errorInfo.stack ? (
+															<pre className="font-mono whitespace-pre-wrap overflow-x-auto text-destructive">
+																{errorInfo.stack}
+															</pre>
+														) : (
+															<p className="font-mono whitespace-pre-wrap overflow-x-auto text-destructive">
+																{errorInfo.message || 'Unknown error'}
+															</p>
+														)
+													) : (
+														parts.map((part, index) => {
+															switch (part.type) {
+																case 'text':
+																	// json?
+																	if (
+																		part.text.startsWith('{') &&
+																		part.text.endsWith('}')
+																	) {
+																		try {
+																			const json = JSON.parse(part.text);
+
+																			// json!
+																			return (
+																				<CodeBlock
+																					key={`${id}-${part.text}-${index}`}
+																					code={JSON.stringify(json, null, 2)}
+																					language="json"
+																					className="bg-transparent border-0 [&>div>div>pre]:bg-transparent! [&_pre]:p-0!"
+																				/>
+																			);
+																		} catch (_error) {
+																			// not json :(
+																			return (
+																				<div
+																					key={`${id}-${part.text}-${index}`}
+																				>
+																					{part.text || ''}
+																				</div>
+																			);
+																		}
+																	}
+
+																	// text/markdown
+																	return (
+																		<div key={`${id}-${part.text}-${index}`}>
+																			{part.text || ''}
+																		</div>
+																	);
+																default:
+																	return null;
+															}
+														})
+													)}
+												</MessageContent>
+											</Message>
+
+											<Actions
+												className={cn('mt-1 gap-0', role === 'user' && 'justify-end')}
+											>
+												{role === 'user' && (
+													<Action
+														tooltip="Re-run"
+														label="Re-run"
+														className="size-8 hover:bg-transparent!"
+														onClick={() =>
+															setValue(
+																parts
+																	.filter((part) => part.type === 'text')
+																	.map((part) => part.text)
+																	.join('')
+															)
+														}
+													>
+														<RefreshCcw className="size-4" />
+													</Action>
+												)}
+
+												<Action
+													tooltip="Copy to clipboard"
+													label="Copy to clipboard"
+													className="size-8 hover:bg-transparent!"
+													onClick={() => {
+														const text = errorInfo
+															? formatErrorForCopy(errorInfo)
+															: parts
+																	.filter((part) => part.type === 'text')
+																	.map((part) => part.text)
+																	.join('');
+
+														navigator.clipboard.writeText(text);
+													}}
+												>
+													<Copy className="size-4" />
+												</Action>
+											</Actions>
+										</>
+									)}
+								</div>
+							);
+						})}
+					</ConversationContent>
+				)}
+
+				<ConversationScrollButton />
+			</Conversation>
+
+			<InputSection
+				agents={agents}
+				clearAgentState={clearAgentState}
+				isLoading={isLoading}
+				isSchemaOpen={schemaOpen}
+				onChange={setValue}
+				onSchemaToggle={onSchemaToggle}
+				onSubmit={handleSubmit}
+				selectedAgent={selectedAgent}
+				setSelectedAgent={setSelectedAgent}
+				value={value}
+			/>
+		</div>
+	);
+}
+
+export default Chat;