@agentuity/workbench 0.0.79 → 0.0.84

package/src/components/internal/Chat.tsx

@@ -12,6 +12,7 @@ import { InputSection } from './InputSection';
 import { Shimmer } from '../ai-elements/shimmer';
 import { cn } from '../../lib/utils';
 import { useWorkbench } from './WorkbenchProvider';
+import { useLogger } from '../../hooks/useLogger';
 import { Schema } from './Schema';
 
 export interface ChatProps {
@@ -23,6 +24,7 @@ export interface ChatProps {
  * Must be used within WorkbenchProvider
  */
 export function Chat({ className: _className }: ChatProps) {
+	const logger = useLogger('Chat');
 	const {
 		agents,
 		suggestions,
@@ -37,8 +39,13 @@ export function Chat({ className: _className }: ChatProps) {
 	const [schemaOpen, setSchemaOpen] = useState(false);
 
 	const handleSubmit = async () => {
-		const selectedAgentData = agents[selectedAgent];
+		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) {

package/src/components/internal/InputSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
 	CheckIcon,
 	ChevronsUpDownIcon,
@@ -7,8 +7,7 @@ import {
 	Loader2Icon,
 	Sparkles,
 } from 'lucide-react';
-import { init } from 'modern-monaco';
-import type * as Monaco from 'modern-monaco/editor-core';
+import { MonacoJsonEditor } from './MonacoJsonEditor';
 import {
 	PromptInput,
 	PromptInputBody,
@@ -28,6 +27,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '../ui/select';
 import { cn } from '../../lib/utils';
 import type { AgentSchemaData } from '../../hooks/useAgentSchemas';
+import { useLogger } from '../../hooks/useLogger';
 import type { JSONSchema7 } from 'ai';
 import { convertJsonSchemaToZod } from 'zod-from-json-schema';
 import { zocker } from 'zocker';
@@ -67,15 +67,24 @@ export function InputSection({
 	suggestions,
 	onSchemaOpen,
 }: InputSectionProps) {
+	const logger = useLogger('InputSection');
 	const [agentSelectOpen, setAgentSelectOpen] = useState(false);
-	const monacoEditorRef = useRef<HTMLDivElement>(null);
-	const editorInstanceRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
 
-	const selectedAgentData = agents[selectedAgent];
+	const selectedAgentData = Object.values(agents).find(
+		(agent) => agent.metadata.agentId === selectedAgent
+	);
 
 	// Determine input type for switch case
 	const inputType = useMemo(() => {
 		const schema = selectedAgentData?.schema?.input?.json;
+		logger.debug(
+			'🎛️ InputSection - selectedAgent:',
+			selectedAgent,
+			'selectedAgentData:',
+			selectedAgentData,
+			'schema:',
+			schema
+		);
 		if (!schema) {
 			return 'none'; // Agent has no input schema
 		}
@@ -101,171 +110,11 @@ export function InputSection({
 			const sampleData = zocker(zodSchema).generate();
 			const sampleJson = JSON.stringify(sampleData, null, 2);
 			onChange(sampleJson);
-
-			// Update Monaco editor directly if it exists
-			if (editorInstanceRef.current) {
-				editorInstanceRef.current.setValue(sampleJson);
-				editorInstanceRef.current.layout();
-			}
 		} catch (error) {
 			console.error('Failed to generate sample JSON:', error);
 		}
 	};
 
-	useEffect(() => {
-		if (!isObjectSchema || !monacoEditorRef.current) {
-			if (editorInstanceRef.current) {
-				editorInstanceRef.current.dispose();
-				editorInstanceRef.current = null;
-			}
-			return;
-		}
-
-		let isMounted = true;
-		let disposed = false;
-		let resizeObserver: ResizeObserver | null = null;
-
-		init({
-			theme: 'vitesse-dark',
-			langs: ['json'],
-		}).then((monaco) => {
-			if (!isMounted || !monacoEditorRef.current) return;
-
-			if (editorInstanceRef.current) {
-				editorInstanceRef.current.dispose();
-			}
-
-			// Configure JSON schema if available
-			const jsonSchema = selectedAgentData?.schema.input?.json;
-			if (jsonSchema) {
-				// Parse schema if it's a string, otherwise use directly
-				const schemaObject =
-					typeof jsonSchema === 'string' ? JSON.parse(jsonSchema) : jsonSchema;
-
-				// Access json namespace directly from monaco
-				if ('json' in monaco && typeof monaco.json === 'object' && monaco.json !== null) {
-					const jsonModule = monaco.json;
-					if (
-						'jsonDefaults' in jsonModule &&
-						typeof jsonModule.jsonDefaults === 'object' &&
-						jsonModule.jsonDefaults !== null
-					) {
-						const jsonDefaults = jsonModule.jsonDefaults;
-						if (
-							'setDiagnosticsOptions' in jsonDefaults &&
-							typeof jsonDefaults.setDiagnosticsOptions === 'function'
-						) {
-							jsonDefaults.setDiagnosticsOptions({
-								validate: true,
-								schemas: [
-									{
-										// URI is just an identifier, doesn't need to be a real URL
-										uri: `agentuity://schema/${selectedAgentData.metadata.id}/input`,
-										fileMatch: ['*'],
-										schema: schemaObject,
-									},
-								],
-							});
-						}
-					}
-				}
-			}
-
-			// Set initial height
-			const container = monacoEditorRef.current;
-			container.style.height = '64px'; // min-h-16 = 4rem = 64px
-
-			const editor = monaco.editor.create(container, {
-				value: value || '{}',
-				language: 'json',
-				minimap: { enabled: false },
-				fontSize: 14,
-				lineNumbers: 'off',
-				scrollBeyondLastLine: false,
-				wordWrap: 'on',
-				automaticLayout: true,
-				scrollbar: {
-					vertical: 'auto',
-					horizontal: 'auto',
-				},
-				padding: { top: 12, bottom: 12 },
-			});
-
-			// Make background transparent
-			setTimeout(() => {
-				if (disposed) return;
-				const editorElement = container.querySelector('.monaco-editor');
-				if (editorElement) {
-					(editorElement as HTMLElement).style.backgroundColor = 'transparent';
-				}
-
-				const backgroundElement = container.querySelector(
-					'.monaco-editor .monaco-editor-background'
-				);
-				if (backgroundElement) {
-					(backgroundElement as HTMLElement).style.backgroundColor = 'transparent';
-				}
-
-				const viewLines = container.querySelector('.monaco-editor .view-lines');
-				if (viewLines) {
-					(viewLines as HTMLElement).style.backgroundColor = 'transparent';
-				}
-			}, 0);
-
-			editor.onDidChangeModelContent(() => {
-				const newValue = editor.getValue();
-				onChange(newValue);
-
-				// Auto-resize based on content
-				if (container) {
-					const contentHeight = editor.getContentHeight();
-					const maxHeight = 192; // max-h-48 = 12rem = 192px
-					const minHeight = 64; // min-h-16 = 4rem = 64px
-					const newHeight = Math.min(Math.max(contentHeight + 24, minHeight), maxHeight);
-					container.style.height = `${newHeight}px`;
-					editor.layout();
-				}
-			});
-
-			// Resize observer for container size changes
-			resizeObserver = new ResizeObserver(() => {
-				if (!disposed && editor && isMounted) {
-					editor.layout();
-				}
-			});
-			resizeObserver.observe(container);
-
-			// Force layout update after creation
-			setTimeout(() => {
-				if (disposed) return;
-				editor.layout();
-			}, 0);
-
-			editorInstanceRef.current = editor;
-		});
-
-		return () => {
-			isMounted = false;
-			disposed = true;
-			if (resizeObserver) {
-				resizeObserver.disconnect();
-			}
-			if (editorInstanceRef.current) {
-				editorInstanceRef.current.dispose();
-				editorInstanceRef.current = null;
-			}
-		};
-	}, [isObjectSchema, onChange, selectedAgentData]);
-
-	useEffect(() => {
-		if (isObjectSchema && editorInstanceRef.current) {
-			const currentValue = editorInstanceRef.current.getValue();
-			if (currentValue !== value) {
-				editorInstanceRef.current.setValue(value || '{}');
-			}
-		}
-	}, [value, isObjectSchema]);
-
 	return (
 		<>
 			<div className="flex items-center gap-2 py-2 px-3">
@@ -277,7 +126,9 @@ export function InputSection({
 							variant="outline"
 							size="sm"
 						>
-							{agents[selectedAgent]?.metadata.name || 'Select agent'}
+							{Object.values(agents).find(
+								(agent) => agent.metadata.agentId === selectedAgent
+							)?.metadata.name || 'Select agent'}
 							<ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" />
 						</Button>
 					</PopoverTrigger>
@@ -287,26 +138,44 @@ export function InputSection({
 							<CommandList>
 								<CommandEmpty>No agents found.</CommandEmpty>
 								<CommandGroup>
-									{Object.values(agents).map((agent) => (
-										<CommandItem
-											key={agent.metadata.identifier}
-											value={agent.metadata.identifier}
-											onSelect={(currentValue) => {
-												setSelectedAgent(currentValue);
-												setAgentSelectOpen(false);
-											}}
-										>
-											<CheckIcon
-												className={cn(
-													'size-4 text-green-500',
-													selectedAgent === agent.metadata.identifier
-														? 'opacity-100'
-														: 'opacity-0'
-												)}
-											/>
-											{agent.metadata.name}
-										</CommandItem>
-									))}
+									{Object.values(agents)
+										.sort((a, b) => a.metadata.name.localeCompare(b.metadata.name))
+										.map((agent) => {
+											const isSelected = selectedAgent === agent.metadata.agentId;
+											// Use name for search but include agentId to ensure uniqueness
+											const searchValue = `${agent.metadata.name}|${agent.metadata.agentId}`;
+											return (
+												<CommandItem
+													key={agent.metadata.agentId}
+													value={searchValue}
+													onSelect={(currentValue) => {
+														// Extract agentId from the compound value
+														const agentId = currentValue.split('|')[1];
+														const selectedAgentData = Object.values(agents).find(
+															(a) => a.metadata.agentId === agentId
+														);
+														if (selectedAgentData) {
+															logger.debug(
+																'🎯 Agent selected by name:',
+																agent.metadata.name,
+																'agentId:',
+																agentId
+															);
+															setSelectedAgent(agentId);
+														}
+														setAgentSelectOpen(false);
+													}}
+												>
+													<CheckIcon
+														className={cn(
+															'size-4 text-green-500',
+															isSelected ? 'opacity-100' : 'opacity-0'
+														)}
+													/>
+													{agent.metadata.name}
+												</CommandItem>
+											);
+										})}
 								</CommandGroup>
 							</CommandList>
 						</Command>
@@ -360,10 +229,11 @@ export function InputSection({
 						switch (inputType) {
 							case 'object':
 								return (
-									<div
-										ref={monacoEditorRef}
-										className="w-full rounded-md bg-transparent overflow-hidden"
-										style={{ minHeight: '64px', maxHeight: '192px', height: '64px' }}
+									<MonacoJsonEditor
+										value={value}
+										onChange={onChange}
+										schema={selectedAgentData?.schema.input?.json}
+										schemaUri={`agentuity://schema/${selectedAgentData?.metadata.id}/input`}
 									/>
 								);
 
@@ -380,7 +250,7 @@ export function InputSection({
 									<div className="flex flex-col items-center justify-center py-8 px-4 text-center ">
 										<p className="text-sm text-muted-foreground">
 											<span className="font-medium">
-												This agent has not input schema.{' '}
+												This agent has no input schema.{' '}
 											</span>
 										</p>
 										<Button
@@ -410,7 +280,15 @@ export function InputSection({
 							size="icon"
 							variant="default"
 							disabled={isLoading || (inputType === 'string' && !value.trim())}
-							onClick={onSubmit}
+							onClick={() => {
+								logger.debug(
+									'🔥 Submit button clicked! inputType:',
+									inputType,
+									'value:',
+									value
+								);
+								onSubmit();
+							}}
 							className="ml-auto"
 						>
 							{isLoading ? (