create-stylus-ide 1.0.0

package/frontend/components/ai/ChatPanel.tsx

@@ -0,0 +1,292 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Send, Trash2, Loader2, Sparkles, Copy, Check } from 'lucide-react';
+import { useChat, type Message } from '@/hooks/useChats';
+import { QuickActions, type QuickAction } from './QuickActions';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+interface ChatPanelProps {
+  currentCode?: string;
+  compilationErrors?: Array<{ line: number; column: number; message: string }>;
+  onInsertCode?: (code: string) => void;
+}
+
+export function ChatPanel({
+  currentCode,
+  compilationErrors,
+  onInsertCode
+}: ChatPanelProps) {
+  const [input, setInput] = useState('');
+  const [copiedCode, setCopiedCode] = useState<string | null>(null);
+  const { messages, isLoading, error, sendMessage, clearMessages } = useChat();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return;
+
+    // Build context from current state
+    let context = '';
+    if (currentCode) {
+      context += `Current code:\n\`\`\`rust\n${currentCode}\n\`\`\`\n\n`;
+    }
+    if (compilationErrors && compilationErrors.length > 0) {
+      context += `Compilation errors:\n${compilationErrors
+        .map((e) => `Line ${e.line}:${e.column} - ${e.message}`)
+        .join('\n')}\n\n`;
+    }
+
+    await sendMessage(input, context);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleQuickAction = (action: QuickAction) => {
+    const prompt = action.prompt(currentCode);
+    setInput(prompt);
+
+    // Focus textarea and move cursor to end
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(prompt.length, prompt.length);
+      }
+    }, 0);
+  };
+
+  const extractCodeFromMessage = (content: string): string[] => {
+    const codeBlocks: string[] = [];
+    const regex = /```(?:rust|rs)?\n([\s\S]*?)```/g;
+    let match;
+
+    while ((match = regex.exec(content)) !== null) {
+      codeBlocks.push(match[1].trim());
+    }
+
+    return codeBlocks;
+  };
+
+  const handleCopyCode = async (code: string) => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopiedCode(code);
+      setTimeout(() => setCopiedCode(null), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleInsertCode = (code: string) => {
+    if (onInsertCode) {
+      onInsertCode(code);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-card">
+      {/* Header - Responsive */}
+      <div className="p-3 sm:p-4 border-b border-border flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2">
+          <Sparkles className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
+          <h2 className="font-semibold text-sm sm:text-base">AI Assistant</h2>
+        </div>
+        {messages.length > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearMessages}
+            disabled={isLoading}
+            className="h-8 w-8 p-0 sm:h-auto sm:w-auto sm:px-3"
+            aria-label="Clear chat history"
+          >
+            <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline ml-2">Clear</span>
+          </Button>
+        )}
+      </div>
+
+      {/* Messages - Responsive Scrolling */}
+      <div className="flex-1 overflow-hidden">
+        <ScrollArea className="h-full custom-scrollbar">
+          <div className="p-3 sm:p-4 space-y-3 sm:space-y-4">
+            {messages.length === 0 && (
+              <div className="space-y-4">
+                <div className="text-center text-muted-foreground text-sm py-4 space-y-2">
+                  <Sparkles className="h-6 w-6 sm:h-8 sm:w-8 mx-auto mb-3 text-primary" />
+                  <p className="font-medium text-sm sm:text-base">Hi! I'm your Stylus AI assistant.</p>
+                  <p className="text-xs sm:text-sm">Ask me anything about Rust smart contracts!</p>
+                </div>
+
+                {/* Quick Actions - Show when no messages */}
+                <QuickActions
+                  onActionClick={handleQuickAction}
+                  hasCode={!!currentCode}
+                  hasErrors={!!compilationErrors && compilationErrors.length > 0}
+                />
+              </div>
+            )}
+
+            {messages.map((message) => {
+              const codeBlocks = message.role === 'assistant'
+                ? extractCodeFromMessage(message.content)
+                : [];
+
+              return (
+                <div key={message.id} className="space-y-2">
+                  <div
+                    className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'
+                      }`}
+                  >
+                    <div
+                      className={`max-w-[90%] sm:max-w-[85%] rounded-lg p-3 ${message.role === 'user'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted'
+                        }`}
+                    >
+                      {message.role === 'user' ? (
+                        <p className="text-sm whitespace-pre-wrap break-anywhere">{message.content}</p>
+                      ) : (
+                        <div className="prose prose-sm dark:prose-invert max-w-none">
+                          <ReactMarkdown
+                            components={{
+                              code({ node, className, children, ...props }: any) {
+                                const match = /language-(\w+)/.exec(className || '');
+
+                                return match ? (
+                                  <SyntaxHighlighter
+                                    style={vscDarkPlus as any}
+                                    language={match[1]}
+                                    PreTag="div"
+                                    className="rounded-md text-xs overflow-x-auto"
+                                  >
+                                    {String(children).replace(/\n$/, '')}
+                                  </SyntaxHighlighter>
+                                ) : (
+                                  <code className={`${className} wrap-break-words`} {...props}>
+                                    {children}
+                                  </code>
+                                );
+                              },
+                              p: ({ children }) => <p className="wrap-break-words">{children}</p>,
+                            }}
+                          >
+                            {message.content}
+                          </ReactMarkdown>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Code Action Buttons - Responsive */}
+                  {codeBlocks.length > 0 && (
+                    <div className="flex flex-wrap gap-1 sm:gap-2 ml-2">
+                      {codeBlocks.map((code, index) => (
+                        <div key={index} className="flex gap-1">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleCopyCode(code)}
+                            className="h-6 sm:h-7 text-xs px-2 sm:px-3"
+                          >
+                            {copiedCode === code ? (
+                              <>
+                                <Check className="h-3 w-3 sm:mr-1" />
+                                <span className="hidden sm:inline">Copied</span>
+                              </>
+                            ) : (
+                              <>
+                                <Copy className="h-3 w-3 sm:mr-1" />
+                                <span className="hidden sm:inline">Copy</span>
+                              </>
+                            )}
+                          </Button>
+                          {onInsertCode && (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleInsertCode(code)}
+                              className="h-6 sm:h-7 text-xs px-2 sm:px-3"
+                            >
+                              <span className="hidden sm:inline">Insert to Editor</span>
+                              <span className="sm:hidden">Insert</span>
+                            </Button>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-muted rounded-lg p-3 flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <span className="text-sm text-muted-foreground">Thinking...</span>
+                </div>
+              </div>
+            )}
+
+            {error && (
+              <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-3 text-sm text-destructive wrap-break-words">
+                {error}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* Input - Responsive */}
+      <div className="p-3 sm:p-4 border-t border-border space-y-2 shrink-0">
+        <Textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Ask about Stylus contracts... (Enter to send, Shift+Enter for new line)"
+          className="min-h-16 sm:min-h-20 resize-none text-sm"
+          disabled={isLoading}
+        />
+        <Button
+          onClick={handleSend}
+          disabled={isLoading || !input.trim()}
+          className="w-full h-9 sm:h-10"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              <span className="hidden sm:inline">Sending...</span>
+              <span className="sm:hidden">...</span>
+            </>
+          ) : (
+            <>
+              <Send className="h-4 w-4 mr-2" />
+              <span className="hidden sm:inline">Send Message</span>
+              <span className="sm:hidden">Send</span>
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/frontend/components/ai/QuickActions.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Wand2,
+  Bug,
+  Zap,
+  Code2,
+  FileCode,
+  ArrowRightLeft,
+  HelpCircle,
+  Lightbulb
+} from 'lucide-react';
+
+export interface QuickAction {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  prompt: (context?: string) => string;
+  requiresCode?: boolean;
+  requiresErrors?: boolean;
+}
+
+const quickActions: QuickAction[] = [
+  {
+    id: 'generate',
+    label: 'Generate Contract',
+    icon: <Wand2 className="h-4 w-4" />,
+    prompt: () => 'Generate a Stylus smart contract that ',
+    requiresCode: false,
+  },
+  {
+    id: 'explain',
+    label: 'Explain Code',
+    icon: <HelpCircle className="h-4 w-4" />,
+    prompt: (code) => `Explain what this Stylus contract does:\n\`\`\`rust\n${code}\n\`\`\``,
+    requiresCode: true,
+  },
+  {
+    id: 'fix-error',
+    label: 'Fix Error',
+    icon: <Bug className="h-4 w-4" />,
+    prompt: (code) => `Help me fix the compilation errors in this Stylus contract:\n\`\`\`rust\n${code}\n\`\`\``,
+    requiresCode: true,
+    requiresErrors: true,
+  },
+  {
+    id: 'optimize',
+    label: 'Optimize Gas',
+    icon: <Zap className="h-4 w-4" />,
+    prompt: (code) => `Suggest gas optimizations for this Stylus contract:\n\`\`\`rust\n${code}\n\`\`\``,
+    requiresCode: true,
+  },
+  {
+    id: 'add-function',
+    label: 'Add Function',
+    icon: <Code2 className="h-4 w-4" />,
+    prompt: (code) => `Add a new function to this contract that `,
+    requiresCode: true,
+  },
+  {
+    id: 'convert',
+    label: 'Convert Solidity',
+    icon: <ArrowRightLeft className="h-4 w-4" />,
+    prompt: () => 'Convert this Solidity contract to Stylus:\n\`\`\`solidity\n\n\`\`\`',
+    requiresCode: false,
+  },
+  {
+    id: 'add-test',
+    label: 'Add Tests',
+    icon: <FileCode className="h-4 w-4" />,
+    prompt: (code) => `Write unit tests for this Stylus contract:\n\`\`\`rust\n${code}\n\`\`\``,
+    requiresCode: true,
+  },
+  {
+    id: 'best-practices',
+    label: 'Best Practices',
+    icon: <Lightbulb className="h-4 w-4" />,
+    prompt: (code) => `Review this contract and suggest best practices:\n\`\`\`rust\n${code}\n\`\`\``,
+    requiresCode: true,
+  },
+];
+
+interface QuickActionsProps {
+  onActionClick: (action: QuickAction) => void;
+  hasCode: boolean;
+  hasErrors: boolean;
+}
+
+export function QuickActions({ onActionClick, hasCode, hasErrors }: QuickActionsProps) {
+  return (
+    <div className="space-y-3">
+      <div className="px-2 sm:px-4">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+          Quick Actions
+        </h3>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 gap-1.5 sm:gap-2 px-2 sm:px-4">
+        {quickActions.map((action) => {
+          const isDisabled =
+            (action.requiresCode && !hasCode) ||
+            (action.requiresErrors && !hasErrors);
+
+          return (
+            <Button
+              key={action.id}
+              variant="outline"
+              size="sm"
+              onClick={() => onActionClick(action)}
+              disabled={isDisabled}
+              className="h-auto py-2 sm:py-3 flex flex-col items-center gap-1 sm:gap-1.5 hover:bg-primary/10 transition-colors"
+            >
+              <div className="flex-shrink-0">
+                {action.icon}
+              </div>
+              <span className="text-xs leading-tight text-center break-words hyphens-auto">
+                {action.label}
+              </span>
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { quickActions };

package/frontend/components/blockchain/BlockchainContractBanner.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { ExternalLink, Shield, CheckCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface BlockchainContractBannerProps {
+  address: string;
+  name: string;
+  chain: string;
+  verified: boolean;
+  explorerUrl: string;
+  compiler?: string;
+}
+
+export function BlockchainContractBanner({
+  address,
+  name,
+  chain,
+  verified,
+  explorerUrl,
+  compiler,
+}: BlockchainContractBannerProps) {
+  return (
+    <div className="h-10 border-b border-border bg-purple-500/10 flex items-center justify-between px-4 text-xs">
+      <div className="flex items-center gap-3 text-purple-600 dark:text-purple-400">
+        <div className="flex items-center gap-1.5">
+          <Shield className="h-3.5 w-3.5" />
+          <span className="font-medium">{name}</span>
+        </div>
+        
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <span className="font-mono">{address.slice(0, 6)}...{address.slice(-4)}</span>
+        </div>
+        
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <span>on {chain}</span>
+        </div>
+        
+        {verified && (
+          <div className="flex items-center gap-1 text-green-600 dark:text-green-400">
+            <CheckCircle className="h-3 w-3" />
+            <span className="text-xs">Verified</span>
+          </div>
+        )}
+        
+        {compiler && (
+          <div className="hidden md:block text-muted-foreground text-xs">
+            {compiler}
+          </div>
+        )}
+      </div>
+      
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 text-xs gap-1"
+        onClick={() => window.open(explorerUrl, '_blank')}
+      >
+        View on Explorer
+        <ExternalLink className="h-3 w-3" />
+      </Button>
+    </div>
+  );
+}

package/frontend/components/blockchain/BlockchainLoadingDialog.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Progress } from '@/components/ui/progress';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { CheckCircle2, Loader2, XCircle, Shield } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { BlockchainLoadProgress } from '@/lib/blockchain-loader';
+
+interface BlockchainLoadingDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  progress: BlockchainLoadProgress | null;
+  onRetry?: () => void;
+}
+
+export function BlockchainLoadingDialog({
+  open,
+  onOpenChange,
+  progress,
+  onRetry,
+}: BlockchainLoadingDialogProps) {
+  const [dots, setDots] = useState('');
+
+  // Animated dots for loading
+  useEffect(() => {
+    if (progress?.stage === 'fetching' || progress?.stage === 'parsing') {
+      const interval = setInterval(() => {
+        setDots((prev) => (prev.length >= 3 ? '' : prev + '.'));
+      }, 500);
+      return () => clearInterval(interval);
+    }
+  }, [progress?.stage]);
+
+  const getStageIcon = () => {
+    if (!progress) return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
+
+    switch (progress.stage) {
+      case 'complete':
+        return <CheckCircle2 className="h-5 w-5 text-green-500" />;
+      case 'error':
+        return <XCircle className="h-5 w-5 text-red-500" />;
+      default:
+        return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
+    }
+  };
+
+  const getStageTitle = () => {
+    if (!progress) return 'Loading...';
+
+    switch (progress.stage) {
+      case 'validating':
+        return 'Validating Contract';
+      case 'fetching':
+        return 'Fetching Contract Data';
+      case 'parsing':
+        return 'Extracting ABI';
+      case 'complete':
+        return 'Ready to Interact!';
+      case 'error':
+        return 'Error';
+      default:
+        return 'Loading...';
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            {progress?.stage === 'error' ? (
+              getStageIcon()
+            ) : progress?.stage === 'complete' ? (
+              getStageIcon()
+            ) : (
+              <Shield className="h-5 w-5 text-muted-foreground" />
+            )}
+            <DialogTitle>{getStageTitle()}</DialogTitle>
+          </div>
+          <DialogDescription>
+            {progress?.stage === 'complete'
+              ? 'Contract is ready for interaction'
+              : progress?.stage === 'error'
+              ? 'Failed to load contract'
+              : 'Loading contract from blockchain...'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Progress Bar */}
+          {progress && progress.stage !== 'error' && progress.stage !== 'complete' && (
+            <Progress value={progress.progress} className="w-full" />
+          )}
+
+          {/* Status Message */}
+          {progress && (
+            <div className="space-y-2">
+              <p className="text-sm text-muted-foreground">
+                {progress.message}
+                {(progress.stage === 'fetching' || progress.stage === 'parsing') && dots}
+              </p>
+
+              {/* Contract Name Display */}
+              {progress.contractName && progress.stage !== 'complete' && (
+                <div className="text-xs font-medium text-foreground">
+                  Contract: {progress.contractName}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Error Message */}
+          {progress?.stage === 'error' && (
+            <div className="space-y-3">
+              <Alert variant="destructive">
+                <XCircle className="h-4 w-4" />
+                <AlertDescription className="whitespace-pre-wrap">
+                  {progress.message}
+                </AlertDescription>
+              </Alert>
+
+              {/* Help text for common errors */}
+              {progress.message.includes('API key') && (
+                <div className="text-xs text-muted-foreground space-y-1">
+                  <p className="font-semibold">To add an API key:</p>
+                  <ol className="list-decimal list-inside space-y-1">
+                    <li>Get a free API key from the explorer</li>
+                    <li>Add NEXT_PUBLIC_ETHERSCAN_API_KEY to .env.local</li>
+                    <li>Restart your dev server</li>
+                  </ol>
+                </div>
+              )}
+
+              {progress.message.includes('not verified') && (
+                <div className="text-xs text-muted-foreground">
+                  <p>This contract has not been verified on the blockchain explorer.</p>
+                  <p className="mt-1">Only verified contracts can be loaded.</p>
+                </div>
+              )}
+
+              {progress.message.includes('Network error') && (
+                <div className="text-xs text-muted-foreground">
+                  <p>Check your internet connection and try again.</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Success Message */}
+          {progress?.stage === 'complete' && (
+            <Alert>
+              <CheckCircle2 className="h-4 w-4" />
+              <AlertDescription>
+                {progress.contractName || 'Contract'} is ready for interaction
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Actions */}
+          {progress?.stage === 'error' && onRetry && (
+            <div className="flex gap-2">
+              <Button onClick={onRetry} className="flex-1">
+                Retry
+              </Button>
+              <Button onClick={() => onOpenChange(false)} variant="outline" className="flex-1">
+                Cancel
+              </Button>
+            </div>
+          )}
+
+          {progress?.stage === 'complete' && (
+            <Button onClick={() => onOpenChange(false)} className="w-full">
+              Start Interacting
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}