more-compute 0.1.2__py3-none-any.whl → 0.1.3__py3-none-any.whl

frontend/components/ErrorDisplay.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import React, { FC, useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { Output, ErrorOutput } from '@/types/notebook';
+
+/*
+ I would like custom error handling for most general errors
+
+ imagine like user does not know pip is ran with !pip install, and just runs pip install,
+
+ it would be nice just to have a custom error message pointing user to use !pip rather than just fail, etc
+*/
+
+
+interface ErrorDisplayProps {
+  error: Output;
+  maxLines?: number;
+  onFixIndentation?: () => void;
+}
+
+const TypedErrorDisplay: FC<{ error: ErrorOutput; onFixIndentation?: () => void }> = ({ error, onFixIndentation }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const isIndentationError = error.ename === 'IndentationError';
+
+  const copyToClipboard = () => {
+    const errorDetails = `Error: ${error.ename}: ${error.evalue}\n\nTraceback:\n${error.traceback.join('\n')}`;
+    navigator.clipboard.writeText(errorDetails).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    });
+  };
+
+  const getErrorIcon = (errorType?: string) => {
+    switch (errorType) {
+      case 'pip_error':
+        return {
+          text: 'Use !pip install instead of pip install',
+          style: {
+            background: '#fef3c7',
+            color: '#d97706',
+            border: '1px solid #fbbf24'
+          }
+        };
+      case 'import_error':
+        return {
+          text: 'Import Error',
+          style: {
+            background: '#fee2e2',
+            color: '#dc2626',
+            border: '1px solid #f87171'
+          }
+        };
+      case 'file_error':
+        return {
+          text: 'File Error',
+          style: {
+            background: '#fdf4ff',
+            color: '#c026d3',
+            border: '1px solid #e879f9'
+          }
+        };
+      default:
+        return {
+          text: 'Error',
+          style: {
+            background: '#f3f4f6',
+            color: '#6b7280',
+            border: '1px solid #d1d5db'
+          }
+        };
+    }
+  };
+
+  const indicator = getErrorIcon(error.error_type);
+
+  return (
+    <div className="error-output-container">
+      {/* Error Type Indicator */}
+      {error.error_type && (
+        <div
+          style={{
+            padding: '8px 12px',
+            marginBottom: '8px',
+            borderRadius: '4px',
+            fontSize: '12px',
+            fontWeight: 600,
+            letterSpacing: '0.3px',
+            ...indicator.style
+          }}
+        >
+          {indicator.text}
+        </div>
+      )}
+
+      {/* Traceback Section */}
+      <div
+        style={{
+          position: 'relative',
+          background: '#fef2f2',
+          border: '1px solid #fca5a5',
+          borderRadius: '6px',
+          marginTop: '8px'
+        }}
+      >
+        {/* Action Buttons */}
+        <div style={{
+          position: 'absolute',
+          top: '8px',
+          right: '8px',
+          zIndex: 10,
+          display: 'flex',
+          gap: '4px'
+        }}>
+          {/* Fix Indentation Button */}
+          {isIndentationError && onFixIndentation && (
+            <button
+              onClick={onFixIndentation}
+              style={{
+                background: 'rgba(59, 130, 246, 0.1)',
+                border: '1px solid #3b82f6',
+                borderRadius: '4px',
+                padding: '6px 10px',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 0.2s ease',
+                fontSize: '11px',
+                fontWeight: 500,
+                color: '#3b82f6'
+              }}
+              title="Auto-fix indentation"
+            >
+              Fix Indent
+            </button>
+          )}
+          {/* Copy Button */}
+          <button
+            onClick={copyToClipboard}
+            style={{
+              background: 'rgba(255, 255, 255, 0.9)',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              padding: '6px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.2s ease'
+            }}
+            title="Copy error to clipboard"
+          >
+            {isCopied ? <Check size={14} color="#10b981" /> : <Copy size={14} />}
+          </button>
+        </div>
+
+        {/* Truncation Indicator */}
+        {/* The original code had this, but the new TypedErrorDisplay doesn't have it.
+            Assuming it's not needed for the new TypedErrorDisplay or that it's handled differently.
+            For now, removing it as it's not in the new_code. */}
+        {/*
+        {isLimited && (
+          <div
+            style={{
+              padding: '8px 12px',
+              background: '#fee2e2',
+              color: '#b91c1c',
+              fontSize: '11px',
+              borderBottom: '1px solid #fca5a5',
+              fontStyle: 'italic'
+            }}
+          >
+            ... (showing last {maxLines} lines of {tracebackLines.length} total lines - scroll up to see more)
+          </div>
+        )}
+        */}
+
+        {/* Error Content */}
+        <div
+          style={{
+            padding: '12px',
+            fontFamily: "'SF Mono', Monaco, Consolas, monospace",
+            fontSize: '12px',
+            lineHeight: 1.4,
+            color: '#b91c1c',
+            background: 'transparent',
+            whiteSpace: 'pre-wrap',
+            overflowX: 'auto',
+            margin: 0
+          }}
+        >
+          {error.traceback?.join('\n') || ''}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, onFixIndentation }) => {
+  // Type guard to ensure we have an ErrorOutput
+  if (error.output_type !== 'error') {
+    return null;
+  }
+  return <TypedErrorDisplay error={error} onFixIndentation={onFixIndentation} />;
+};
+
+export default ErrorDisplay;

frontend/components/ErrorModal.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { ExternalLink, X } from "lucide-react";
+
+interface ErrorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  message: string;
+  actionLabel?: string;
+  actionUrl?: string;
+}
+
+const ErrorModal: React.FC<ErrorModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  message,
+  actionLabel,
+  actionUrl,
+}) => {
+  if (!isOpen) return null;
+
+  const handleAction = () => {
+    if (actionUrl) {
+      window.open(actionUrl, "_blank");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "#1a1a1a",
+          borderRadius: "8px",
+          padding: "24px",
+          maxWidth: "500px",
+          width: "90%",
+          maxHeight: "80vh",
+          overflow: "auto",
+          border: "2px solid #444",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.8)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+          }}
+        >
+          <h2
+            style={{
+              margin: 0,
+              fontSize: "18px",
+              fontWeight: 600,
+              color: "#ff6b6b",
+            }}
+          >
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "4px",
+              display: "flex",
+              alignItems: "center",
+              color: "#999",
+            }}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div
+          style={{
+            marginBottom: "20px",
+            fontSize: "14px",
+            lineHeight: "1.6",
+            whiteSpace: "pre-line",
+            color: "#e0e0e0",
+          }}
+        >
+          {message}
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            gap: "8px",
+            justifyContent: "flex-end",
+          }}
+        >
+          {actionUrl && actionLabel && (
+            <button
+              onClick={handleAction}
+              style={{
+                padding: "10px 20px",
+                backgroundColor: "#4a9eff",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: 500,
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+              }}
+            >
+              {actionLabel}
+              <ExternalLink size={16} />
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            style={{
+              padding: "10px 20px",
+              backgroundColor: "#2a2a2a",
+              color: "#e0e0e0",
+              border: "1px solid #444",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 500,
+            }}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorModal;

frontend/components/MarkdownRenderer.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React from 'react';
+
+interface MarkdownRendererProps {
+  source: string;
+  onClick?: () => void;
+}
+
+const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ source, onClick }) => {
+  const escapeHtml = (text: string) => {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  const renderMarkdown = (text: string) => {
+    let html = text;
+
+    // Code blocks (must be processed first)
+    html = html.replace(/```([\s\S]*?)```/g, (match, code) => {
+      return `<pre><code>${escapeHtml(code.trim())}</code></pre>`;
+    });
+
+    // Language-specific code blocks
+    html = html.replace(/```(\w+)\n([\s\S]*?)```/g, (match, lang, code) => {
+      return `<pre><code class="language-${lang}">${escapeHtml(code.trim())}</code></pre>`;
+    });
+
+    // Headers
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+
+    // Bold and Italic
+    html = html.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+    // Strikethrough
+    html = html.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+
+    // Unordered lists
+    html = html.replace(/^\s*[-*+] (.+)$/gim, (match, item) => `<li>${item}</li>`);
+    html = html.replace(/(<li>[\s\S]*?<\/li>)/g, '<ul>$1</ul>').replace(/<\/ul>\s*<ul>/g, '');
+
+    // Ordered lists
+    html = html.replace(/^\s*\d+\. (.+)$/gim, (match, item) => `<ol><li>${item}</li></ol>`).replace(/<\/ol>\s*<ol>/g, '');
+
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+    // Blockquotes
+    html = html.replace(/^> (.+)$/gim, '<blockquote>$1</blockquote>');
+    
+    // Handle HTML br tags first - convert them to proper line breaks
+    html = html.replace(/<br\s*\/?>/gi, '\n');
+
+    // Line breaks and paragraphs - handle paragraph separation properly
+    // Split by double newlines to create paragraphs, but preserve single line breaks within paragraphs
+    html = html.replace(/\n\s*\n/g, '</p><p>');  // Paragraph breaks (double newlines with optional whitespace)
+    html = html.replace(/\n(?!<\/p>)/g, '<br>');  // Line breaks within paragraphs (but not paragraph breaks)
+
+    // Ensure content is wrapped in paragraph tags if not already in a block element
+    if (!html.match(/^<(h[1-6]|ul|ol|pre|blockquote|hr|p)/) && html.trim()) {
+        html = '<p>' + html + '</p>';
+    }
+    
+    return html;
+  };
+
+  return (
+    <div 
+      className="markdown-rendered" 
+      onClick={onClick}
+      dangerouslySetInnerHTML={{ __html: renderMarkdown(source) }}
+    />
+  );
+};
+
+export default MarkdownRenderer;