feat: Phase 2 - LLM Integration for Canvas
- Add canvas.ts MCP tool with validate_canvas_intent, execute_canvas_intent, interpret_canvas_intent - Add useCanvasChat.ts bridge hook connecting canvas to chat system - Update context_builder.py with canvas tool instructions - Add ExecuteDialog for study name input - Add ChatPanel for canvas-integrated Claude responses - Connect AtomizerCanvas to Claude via useCanvasChat Canvas workflow now: 1. Build graph visually 2. Click Validate/Analyze/Execute 3. Claude processes intent via MCP tools 4. Response shown in integrated chat panel Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Chat Panel for Canvas - Displays messages from Claude
|
||||
*/
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { Message, ChatMessage } from '../../chat/ChatMessage';
|
||||
import { ThinkingIndicator } from '../../chat/ThinkingIndicator';
|
||||
|
||||
interface ChatPanelProps {
|
||||
messages: Message[];
|
||||
isThinking: boolean;
|
||||
}
|
||||
|
||||
export function ChatPanel({ messages, isThinking }: ChatPanelProps) {
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-scroll to bottom when new messages arrive
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages, isThinking]);
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
|
||||
{/* Welcome message if no messages */}
|
||||
{messages.length === 0 && !isThinking && (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">🧠</span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm max-w-xs mx-auto">
|
||||
Use <strong>Validate</strong>, <strong>Analyze</strong>, or <strong>Execute</strong> to interact with Claude about your optimization workflow.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages */}
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
|
||||
{/* Thinking indicator */}
|
||||
{isThinking && <ThinkingIndicator />}
|
||||
|
||||
{/* Scroll anchor */}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Execute Dialog - Prompts for study name before executing canvas intent
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ExecuteDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onExecute: (studyName: string, autoRun: boolean) => void;
|
||||
isExecuting: boolean;
|
||||
}
|
||||
|
||||
export function ExecuteDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onExecute,
|
||||
isExecuting,
|
||||
}: ExecuteDialogProps) {
|
||||
const [studyName, setStudyName] = useState('');
|
||||
const [autoRun, setAutoRun] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate study name
|
||||
const trimmed = studyName.trim();
|
||||
if (!trimmed) {
|
||||
setError('Study name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for valid snake_case
|
||||
if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
|
||||
setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
onExecute(trimmed, autoRun);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setStudyName('');
|
||||
setAutoRun(false);
|
||||
setError(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
|
||||
<h2 className="text-xl font-semibold text-gray-800 mb-4">
|
||||
Execute with Claude
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="study-name"
|
||||
className="block text-sm font-medium text-gray-600 mb-1"
|
||||
>
|
||||
Study Name
|
||||
</label>
|
||||
<input
|
||||
id="study-name"
|
||||
type="text"
|
||||
value={studyName}
|
||||
onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
|
||||
placeholder="my_optimization_study"
|
||||
className="w-full px-3 py-2 border rounded-lg font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={isExecuting}
|
||||
autoFocus
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRun}
|
||||
onChange={(e) => setAutoRun(e.target.checked)}
|
||||
disabled={isExecuting}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">
|
||||
Start optimization immediately after creation
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={isExecuting}
|
||||
className="px-4 py-2 text-gray-600 hover:text-gray-800 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isExecuting}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{isExecuting ? (
|
||||
<>
|
||||
<span className="animate-spin">⏳</span>
|
||||
Executing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Send to Claude
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user