this.gui 1.0.18 → 1.1.0

package/src/components/generics/Chats/FullChatBot.jsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Typography, Paper, TextField, IconButton, Avatar, Divider } from '@mui/material';
+import { useTheme, alpha } from '@mui/material/styles';
+import SendIcon from '@mui/icons-material/Send';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import PersonIcon from '@mui/icons-material/Person';
+
+/**
+ * FullChatBot (this.GUI)
+ * A full-page, theme-aware chat surface.
+ *
+ * Props (all optional):
+ *  - title: string (header title)
+ *  - initialMessages: Array<{ id?: string, role: 'user'|'bot', text: string }>
+ *  - onSend: async (text, history) => Promise<string | { text: string } | Array<{ text: string }>> (required to produce replies).
+ *  - onError: function (error) => void
+ *  - placeholder: string
+ *  - headerIcon: ReactNode (defaults to SmartToy)
+ *  - heightOffset: number|string  // extra space to subtract besides navbar height
+ *  - maxWidth: number|string      // container max width
+ *  - bleedTop: number|string       // optionally pull the chat upward (compensate parent padding)
+ */
+export default function FullChatBot({
+  title = 'SupportBot Example',
+  initialMessages = [ { id: 'b1', role: 'bot', text: "Hi! I'm your Support Bot. How can I help today?" } ],
+  onSend,
+  onError,
+  placeholder = 'Type your message…',
+  headerIcon,
+  heightOffset = 0,
+  maxWidth = 1400,
+  bleedTop = 0,
+}) {
+  const theme = useTheme();
+
+  // Colors and surfaces from theme
+  const mode = theme?.palette?.mode || 'dark';
+  const linkMain = theme?.palette?.link?.main || 'rgb(0,170,150)';
+  const borderColor = theme?.custom?.border || (mode === 'dark' ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.12)');
+  const surface = theme?.palette?.background?.paper || (mode === 'dark' ? 'rgb(24,26,28)' : '#ffffff');
+  const textPrimary = theme?.palette?.text?.primary || (mode === 'dark' ? '#fff' : '#111');
+  const bubbleUserBg = alpha(linkMain, 0.14);
+  const bubbleUserBorder = alpha(linkMain, 0.35);
+  const bubbleBotBg = mode === 'dark' ? alpha('#ffffff', 0.06) : alpha('#000000', 0.04);
+  const bubbleBotBorder = mode === 'dark' ? alpha('#ffffff', 0.12) : alpha('#000000', 0.08);
+
+  const [messages, setMessages] = useState(() => initialMessages);
+  const [input, setInput] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const listRef = useRef(null);
+
+  // Auto-scroll to bottom when messages update
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages, isTyping]);
+
+  const handleSend = async () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    const userMsg = { id: `u-${Date.now()}`, role: 'user', text: trimmed };
+    setMessages((m) => [...m, userMsg]);
+    setInput('');
+
+    setIsTyping(true);
+    try {
+      if (typeof onSend !== 'function') {
+        console.warn('[FullChatBot] onSend prop is required to generate replies.');
+        setIsTyping(false);
+        return;
+      }
+      let next = await onSend(trimmed, [...messages, userMsg]);
+      const toArray = Array.isArray(next) ? next : [next];
+      const prepared = toArray
+        .filter(Boolean)
+        .map((n, idx) => ({ id: `b-${Date.now()}-${idx}`, role: 'bot', text: typeof n === 'string' ? n : (n?.text || '') }));
+      // small UX delay
+      setTimeout(() => {
+        setMessages((m) => [...m, ...prepared]);
+        setIsTyping(false);
+      }, 200);
+    } catch (e) {
+      if (typeof onError === 'function') try { onError(e); } catch (_) {}
+      setMessages((m) => [...m, { id: `b-${Date.now()}`, role: 'bot', text: 'Sorry, something went wrong. Please try again.' }]);
+      setIsTyping(false);
+    }
+  };
+
+  const onKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const bubbleStyles = (role) => {
+    const isUser = role === 'user';
+    return {
+      alignSelf: isUser ? 'flex-end' : 'flex-start',
+      maxWidth: '78%',
+      padding: '10px 12px',
+      borderRadius: 12,
+      background: isUser ? bubbleUserBg : bubbleBotBg,
+      border: `1px solid ${isUser ? bubbleUserBorder : bubbleBotBorder}`,
+      color: 'inherit',
+      wordBreak: 'break-word'
+    };
+  };
+
+  const HeaderIcon = headerIcon || <SmartToyIcon sx={{ color: linkMain }} />;
+
+  // Full height relative to viewport minus navbar and optional offset
+  const topCalc = `calc(97vh - var(--nav-height, 56px) - ${typeof heightOffset === 'number' ? `${heightOffset}px` : String(heightOffset)})`;
+  const mtBleed = bleedTop ? (typeof bleedTop === 'number' ? `${-bleedTop}px` : `calc(0px - ${String(bleedTop)})`) : 0;
+
+  return (
+    <Box sx={{ width: '100%', maxWidth, mx: 'auto', height: topCalc, mt: mtBleed, display: 'flex', flexDirection: 'column', color: textPrimary, colorScheme: mode }}>
+      {/* Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          px: 2,
+          py: 1,
+          border: '1px solid',
+          borderColor: borderColor,
+          borderBottom: 'none',
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          background: surface,
+        }}
+      >
+        {HeaderIcon}
+        <Typography variant="h6" sx={{ fontWeight: 700 }}>{title}</Typography>
+      </Box>
+
+      {/* Chat container fills remaining space */}
+      <Paper elevation={0} sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        border: '1px solid',
+        borderColor: borderColor,
+        borderRadius: 2,
+        background: surface,
+        minHeight: 360
+      }}>
+        {/* Conversation */}
+        <Box ref={listRef} sx={{
+          flex: 1,
+          overflowY: 'auto',
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1.2
+        }}>
+          {messages.map((m) => (
+            <Box key={m.id} sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', flexDirection: m.role === 'user' ? 'row-reverse' : 'row' }}>
+              <Avatar sx={{ width: 28, height: 28, bgcolor: m.role === 'user' ? 'rgba(0,170,150,0.18)' : 'rgba(255,255,255,0.08)', border: '1px solid', borderColor: m.role === 'user' ? 'rgba(0,170,150,0.4)' : 'rgba(255,255,255,0.18)' }}>
+                {m.role === 'user' ? <PersonIcon fontSize="small" /> : <SmartToyIcon fontSize="small" />}
+              </Avatar>
+              <Box sx={bubbleStyles(m.role)}>
+                <Typography variant="body2">{m.text}</Typography>
+              </Box>
+            </Box>
+          ))}
+          {isTyping && (
+            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+              <Avatar sx={{ width: 28, height: 28, bgcolor: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)' }}>
+                <SmartToyIcon fontSize="small" />
+              </Avatar>
+              <Box sx={{ ...bubbleStyles('bot'), display: 'inline-flex', gap: 1 }}>
+                <Dot /> <Dot delay={120} /> <Dot delay={240} />
+              </Box>
+            </Box>
+          )}
+        </Box>
+        <Divider />
+        {/* Composer */}
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 1 }}>
+          <TextField
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            variant="standard"
+            fullWidth
+            InputProps={{ disableUnderline: true }}
+            sx={{
+              mx: 1,
+              px: 1.5,
+              py: 1,
+              borderRadius: 1,
+              border: '1px solid',
+              borderColor: borderColor,
+              background: mode === 'dark' ? alpha('#ffffff', 0.04) : alpha('#000000', 0.03)
+            }}
+          />
+          <IconButton color="primary" onClick={handleSend} aria-label="send">
+            <SendIcon />
+          </IconButton>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
+
+function Dot({ delay = 0 }) {
+  const [on, setOn] = useState(false);
+  useEffect(() => {
+    const id = setInterval(() => setOn((v) => !v), 350);
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <Box component="span" sx={{
+      width: 6, height: 6, borderRadius: 1,
+      display: 'inline-block',
+      background: on ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.35)',
+      transition: 'opacity 200ms ease',
+    }} />
+  );
+}

package/src/components/generics/Code/CodeBlock.jsx

@@ -0,0 +1,33 @@
+// src/components/Pages/CodeBlock.jsx
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useTheme } from '@mui/material/styles';
+
+export default function CodeBlock({ children, language = "javascript" }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  return (
+<SyntaxHighlighter
+  language={language}
+  style={isDark ? oneDark : oneLight}
+  customStyle={{
+    borderRadius: "6px",
+    fontSize: "0.85rem",
+    padding: "1rem",
+    backgroundColor: isDark ? "#1e1e1e" : "#f5f5f5",
+    border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid #ddd",
+    color: isDark ? "#f8f8f2" : "#2d2d2d",
+    textShadow: "none",
+  }}
+  codeTagProps={{
+    style: {
+      textShadow: "none", // Fuerza remover cualquier sombra
+    }
+  }}
+>
+  {children.trim()}
+</SyntaxHighlighter>
+  );
+}

package/src/components/generics/Feedback/Callout.jsx

@@ -0,0 +1,92 @@
+import { useTheme } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+const variantStyles = {
+  warning: {
+    light: {
+      background: '#fff8e1',
+      border: '#f4b400',
+      color: '#f4b400',
+    },
+    dark: {
+      background: '#2c1a00',
+      border: '#f4b400',
+      color: '#f4b400',
+    },
+  },
+  info: {
+    light: {
+      background: '#e3f2fd',
+      border: '#2196f3',
+      color: '#0d47a1',
+    },
+    dark: {
+      background: '#0d2b45',
+      border: '#64b5f6',
+      color: '#90caf9',
+    },
+  },
+  success: {
+    light: {
+      background: '#e8f5e9',
+      border: '#4caf50',
+      color: '#2e7d32',
+    },
+    dark: {
+      background: '#1b3c28',
+      border: '#66bb6a',
+      color: '#a5d6a7',
+    },
+  },
+  alert: {
+    light: {
+      background: '#ffebee',
+      border: '#f44336',
+      color: '#b71c1c',
+    },
+    dark: {
+      background: '#3d0000',
+      border: '#ef5350',
+      color: '#ef9a9a',
+    },
+  },
+  neutral: {
+    light: {
+      background: '#f5f5f5',
+      border: '#9e9e9e',
+      color: '#424242',
+    },
+    dark: {
+      background: '#2c2c2c',
+      border: '#bdbdbd',
+      color: '#e0e0e0',
+    },
+  },
+};
+
+export default function Callout({
+  children = "This repository is in continuous development and may be unstable.",
+  variant = "warning", // default variant
+}) {
+  const theme = useTheme();
+  const mode = theme.palette.mode;
+  const styles = variantStyles[variant]?.[mode] || variantStyles.warning.light;
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: styles.background,
+        border: `1px solid ${styles.border}`,
+        color: styles.color,
+        padding: '10px 16px',
+        borderRadius: '4px',
+        fontWeight: 'bold',
+        marginBottom: '1.5rem',
+        textAlign: 'center',
+        fontSize: '0.9rem',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/generics/Layout/GridX.jsx

@@ -0,0 +1,29 @@
+import { Grid, Box, Typography } from '@mui/material';
+
+/**
+ * PageGrid
+ * Standardized grid container for organizing content in pages.
+ *
+ * Props:
+ * - items: Array of { title, content, xs, md }
+ * - spacing: Grid spacing (default 3)
+ * - sx: Additional styling for the Box wrapper
+ */
+export default function GridX({ items = [], spacing = 3, sx = {} }) {
+  return (
+    <Box sx={{ width: '100%', mt: 2, ...sx }}>
+      <Grid container spacing={spacing}>
+        {items.map((item, index) => (
+          <Grid item xs={item.xs || 12} md={item.md || 6} key={index}>
+            {item.title && (
+              <Typography variant="h6" sx={{ fontWeight: 500, mb: 1 }}>
+                {item.title}
+              </Typography>
+            )}
+            {item.content}
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

package/src/components/generics/Layout/Hero2.jsx

@@ -0,0 +1,132 @@
+// neurons.me — this.GUI
+// Generic Hero2 component with video background, overlay and titles
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Typography } from '@mui/material';
+
+/**
+ * Hero2
+ * A compact hero/cover with background video or image, an opacity layer, and title/subtitle.
+ *
+ * Props:
+ * - videoSrc: string URL for the background video.
+ * - poster: string URL for the poster/fallback image.
+ * - height: CSS size for hero height (e.g., '220px', '30vh'). Default: '220px'.
+ * - title: string | ReactNode, main title text.
+ * - subTitle: string | ReactNode, secondary text.
+ * - overlayOpacity: number [0..1], darkness of overlay. Default: 0.5.
+ * - overlayColor: CSS color of overlay. Default: '#000'.
+ * - overlayBlur: CSS blur amount for overlay backdrop. Default: '8px'.
+ * - overlayGradient: CSS gradient string for overlay background.
+ * - borderRadius: number | string for rounding container. Default: 12.
+ * - textColor: CSS color for text. Default: '#fff'.
+ * - align: 'center' | 'left' | 'right'. Default: 'center'.
+ * - autoPlay, loop, muted, playsInline: booleans for <video>. Defaults true/true/true/true.
+ * - objectFit: how the media covers the box. Default: 'cover'.
+ * - TitleComponent: optional component to render the title (defaults to GUI.TextTitle or 'h1').
+ * - children: extra nodes rendered under the subtitle (e.g., buttons).
+ */
+export default function Hero2({
+  videoSrc = '/apps/neurons1.mp4',
+  poster,
+  height = '220px',
+  title = 'Apps',
+  subTitle,
+  overlayOpacity = 0.5,
+  overlayColor = '#000',
+  overlayBlur = '8px',
+  overlayGradient,
+  borderRadius = 8,
+  textColor = '#fff',
+  align = 'center',
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  objectFit = 'cover',
+  TitleComponent,
+  children,
+}) {
+  const Title = TitleComponent || 'h1';
+  const alignMap = {
+    center: { justifyContent: 'center', alignItems: 'center', textAlign: 'center' },
+    left: { justifyContent: 'center', alignItems: 'flex-start', textAlign: 'left', paddingLeft: '1rem' },
+    right: { justifyContent: 'center', alignItems: 'flex-end', textAlign: 'right', paddingRight: '1rem' },
+  };
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%', height, overflow: 'hidden', borderRadius, mb: '2rem' }}>
+      {/* Background Video */}
+      {videoSrc ? (
+        <Box component="video"
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+          poster={poster}
+          sx={{ width: '100%', height: '100%', objectFit }}>
+          <source src={videoSrc} type="video/mp4" />
+          {/* Fallback text */}
+          Tu navegador no soporta video.
+        </Box>
+      ) : (
+        // If no videoSrc, show poster as background
+        <Box sx={{ width: '100%', height: '100%', backgroundImage: poster ? `url(${poster})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center' }} />
+      )}
+
+      {/* Opacity Layer */}
+      <Box
+        sx={{
+          position: 'absolute', inset: 0, pointerEvents: 'none',
+          background: overlayGradient || overlayColor,
+          opacity: overlayOpacity,
+          backdropFilter: `blur(${overlayBlur})`,
+          WebkitBackdropFilter: `blur(${overlayBlur})`,
+        }}
+      />
+
+      {/* Foreground Content */}
+      <Box sx={{ position: 'absolute', inset: 0, display: 'flex', ...alignMap[align] }}>
+        <Box sx={{ color: textColor, textShadow: '0 2px 10px rgba(0,0,0,.6)' }}>
+          {title && (
+            <Title style={{ margin: 0, fontWeight: 800, fontSize: '2rem' }}>
+              {title}
+            </Title>
+          )}
+          {subTitle && (
+            <Typography variant="subtitle1" sx={{ mt: 0.5, opacity: 0.9 }}>
+              {subTitle}
+            </Typography>
+          )}
+          {children && (
+            <Box sx={{ mt: 1.25 }}>
+              {children}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+Hero2.propTypes = {
+  videoSrc: PropTypes.string,
+  poster: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  overlayOpacity: PropTypes.number,
+  overlayColor: PropTypes.string,
+  overlayBlur: PropTypes.string,
+  overlayGradient: PropTypes.string,
+  borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  textColor: PropTypes.string,
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool,
+  playsInline: PropTypes.bool,
+  objectFit: PropTypes.string,
+  TitleComponent: PropTypes.elementType,
+  children: PropTypes.node,
+};

package/src/components/generics/Layout/PageContainer.jsx

@@ -0,0 +1,29 @@
+//components/Pages/PageContainer.jsx
+import { Box, useTheme, useMediaQuery } from "@mui/material";
+/**
+ * PageContainer
+ * Generic content wrapper for page layouts.
+ * Provides consistent padding and background only.
+ */
+export default function PageContainer({ children }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  return (
+    <Box
+      sx={{
+        px: isMobile ? 2 : 3,
+        pt: 3,
+        maxWidth: "987px",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        backgroundColor: theme.palette.background.default,
+        margin: "0 auto"
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/generics/Layout/PageDivider.jsx

@@ -0,0 +1,20 @@
+import { Divider } from "@mui/material";
+
+/**
+ * PageDivider Component
+ * A standardized divider to visually separate sections or content blocks.
+ *
+ * Props:
+ * - spacing: Adds vertical spacing above and below the divider (default: 2).
+ * - variant: MUI Divider variant, e.g., "fullWidth", "middle" (default: "fullWidth").
+ */
+export default function PageDivider({ spacing = 2, variant = "fullWidth" }) {
+  return (
+    <Divider
+      variant={variant}
+      sx={{
+        my: spacing,
+      }}
+    />
+  );
+}

package/src/components/generics/Layout/Section.jsx

@@ -0,0 +1,43 @@
+import { Box } from "@mui/material";
+
+/**
+ * Section
+ * Minimal container that respects parent width.
+ * Controls: width, padding, margins, background color.
+ */
+export default function Section({
+  children,
+  width = "100%",           // toma el ancho del padre por defecto
+  padding = 1.6,               // padding base (MUI spacing units)
+  paddingX,                  // opcional: override horizontal
+  paddingY,                  // opcional: override vertical
+  marginY = 3,               // separación vertical por defecto
+  marginTop,                 // override superior
+  marginBottom,              // override inferior
+  bgcolor = "background.paper",
+  sx = {},
+  ...props
+}) {
+  const px = paddingX ?? padding;
+  const py = paddingY ?? padding;
+  const mt = marginTop ?? marginY;
+  const mb = marginBottom ?? marginY;
+
+  return (
+    <Box
+      component="section"
+      sx={{
+        width,
+        px,
+        py,
+        mt,
+        mb,
+        bgcolor,
+        ...sx,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/generics/Layout/SectionHeader.jsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+/**
+ * SectionHeader
+ * Heading block to use inside Section (optional).
+ */
+export default function SectionHeader({ title, subtitle, sx = {} }) {
+  return (
+    <>
+      {title && (
+        <Typography variant="h4" sx={{ fontWeight: 600, mb: subtitle ? 0.5 : 1, ...sx }}>
+          {title}
+        </Typography>
+      )}
+      {subtitle && (
+        <Typography variant="body2" sx={{ color: "text.secondary", mb: 1 }}>
+          {subtitle}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/components/generics/Media/Img.jsx

@@ -0,0 +1,58 @@
+import { Box, Typography } from "@mui/material";
+/**
+ * PageImage Component
+ * Displays an image with optional alignment and caption.
+ *
+ * Props:
+ * - src: URL of the image (required).
+ * - alt: Alternative text for accessibility (default: "").
+ * - align: "left" | "center" | "right" (default: "center").
+ * - caption: Optional text displayed below the image.
+ * - maxWidth: Maximum width of the image (default: "100%").
+ */
+export default function Img({
+  src,
+  alt = "",
+  align = "center",
+  caption,
+  maxWidth = "100%",
+}) {
+  const justifyContent =
+    align === "left"
+      ? "flex-start"
+      : align === "right"
+      ? "flex-end"
+      : "center";
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: align }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent,
+          width: "100%",
+          mb: caption ? 1 : 0,
+        }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            maxWidth,
+            height: "auto",
+            borderRadius: "4px",
+          }}
+        />
+      </Box>
+      {caption && (
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ textAlign: align }}
+        >
+          {caption}
+        </Typography>
+      )}
+    </Box>
+  );
+}