this.gui 1.3.41 → 1.3.42

package/src/gui/components/atoms/atoms.tsx

@@ -0,0 +1,151 @@
+/* 
+ * This.GUI — primitives
+ * Thin wrappers around MUI components to present a stable, library-owned API.
+ * Internally we use MUI, but components in the design system should import from
+ * "@/gui/primitives" instead of "@mui/material". This lets us swap engines later.
+ * 
+ * La regla estándar en tu wrapper
+ *   • Si MUI lo declaró polimórfico → usa OverridableComponent en tu wrapper.
+ *   • Si no lo es → usa forwardRef normal.
+ *
+ * Así garantizas dos cosas:
+ * ✅ Tu wrapper no pierde nada de lo que MUI ofrece.
+ * ✅ No te complicas agregando polimorfismo donde MUI no lo soporta.
+ */
+import type { SxProps, Theme } from '@mui/material/styles';
+// AppBar is not polymorphic so we wrap it with forwardRef
+import AppBar from './AppBar/AppBar';
+export { default as AppBar } from './AppBar/AppBar';
+// Box is polymorphic so we re-export it directly
+import Box, { type BoxProps } from './Box/Box';
+export { default as Box } from './Box/Box';
+export type { BoxProps } from './Box/Box';
+// Avatar is not polymorphic so we wrap it with forwardRef
+import Avatar, { type AvatarProps } from './Avatar/Avatar';
+export { default as Avatar } from './Avatar/Avatar';
+export type { AvatarProps } from './Avatar/Avatar';
+//Button is polymorphic so we re-export it directly
+import Button from './Button/Button';
+export { default as Button } from './Button/Button';
+export type { GuiButtonProps as ButtonProps } from './Button/Button';
+//Collapse is not polymorphic so we wrap it with forwardRef
+import Collapse, { type CollapseProps } from './Collapse/Collapse';
+export { default as Collapse } from './Collapse/Collapse';
+export type { CollapseProps } from './Collapse/Collapse';
+//IconButton is polymorphic so we re-export it directly
+import IconButton, { type IconButtonProps } from './IconButton/IconButton';
+export { default as IconButton } from './IconButton/IconButton';
+export type { IconButtonProps } from './IconButton/IconButton';
+//Divider is not polymorphic so we wrap it with forwardRef
+import Divider, { type DividerProps } from './Divider/Divider';
+export { default as Divider } from './Divider/Divider';
+export type { DividerProps } from './Divider/Divider';
+//Drawer is not polymorphic so we wrap it with forwardRef
+import Drawer, { type DrawerProps } from './Drawer/Drawer';
+export { default as Drawer } from './Drawer/Drawer';
+export type { DrawerProps } from './Drawer/Drawer';
+//Link is polymorphic so we re-export it directly
+import Link from './Link/Link';
+export { default as Link } from './Link/Link';
+export type { LinkProps } from './Link/Link';
+// List and re lated are not polymorphic so we wrap them with forwardRef
+import List, { type ListProps } from './List/List';
+export { default as List } from './List/List';
+export type { ListProps } from './List/List';
+import ListItem, { type ListItemProps } from './ListItem/ListItem';
+export { default as ListItem } from './ListItem/ListItem';
+export type { ListItemProps } from './ListItem/ListItem';
+import ListItemButton, { type ListItemButtonProps } from './ListItemButton/ListItemButton';
+export { default as ListItemButton } from './ListItemButton/ListItemButton';
+export type { ListItemButtonProps } from './ListItemButton/ListItemButton';
+import ListItemIcon, { type ListItemIconProps } from './ListItemIcon/ListItemIcon';
+export { default as ListItemIcon } from './ListItemIcon/ListItemIcon';
+export type { ListItemIconProps } from './ListItemIcon/ListItemIcon';
+import ListItemText, { type ListItemTextProps } from './ListItemText/ListItemText';
+export { default as ListItemText } from './ListItemText/ListItemText';
+export type { ListItemTextProps } from './ListItemText/ListItemText';
+//Menu and related are polymorphic so we re-export them directly
+import Menu, { type MenuProps } from './Menu/Menu';
+export { default as Menu } from './Menu/Menu';
+export type { MenuProps } from './Menu/Menu';
+import MenuItem, { type MenuItemProps } from './MenuItem/MenuItem';
+export { default as MenuItem } from './MenuItem/MenuItem';
+export type { MenuItemProps } from './MenuItem/MenuItem';
+//Paper is not polymorphic so we wrap it with forwardRef
+import Paper, { type PaperProps } from './Paper/Paper';
+export { default as Paper } from './Paper/Paper';
+export type { PaperProps } from './Paper/Paper';
+//Stack is not polymorphic so we wrap it with forwardRef
+import Stack, { type StackProps } from './Stack/Stack';
+export { default as Stack } from './Stack/Stack';
+export type { StackProps } from './Stack/Stack';
+//Switch is not polymorphic so we wrap it with forwardRef
+import Switch, { type SwitchProps } from './Switch/Switch';
+export { default as Switch } from './Switch/Switch';
+export type { SwitchProps } from './Switch/Switch';
+//Tables
+import Table from './Table/Table';
+export { default as Table } from './Table/Table';
+export type { TableProps } from './Table/Table';
+import TableBody from './Table/Body/TableBody';
+export { default as TableBody } from './Table/Body/TableBody';
+export type { TableBodyProps } from './Table/Body/TableBody';
+import TableCell from './Table/Cell/TableCell';
+export { default as TableCell } from './Table/Cell/TableCell';
+export type { TableCellProps } from './Table/Cell/TableCell';
+import TableHead from './Table/Head/TableHead';
+export { default as TableHead } from './Table/Head/TableHead';
+export type { TableHeadProps } from './Table/Head/TableHead';
+import TableRow from './Table/Row/TableRow';
+export { default as TableRow } from './Table/Row/TableRow';
+export type { TableRowProps } from './Table/Row/TableRow';     
+
+//Toolbar is not polymorphic so we wrap it with forwardRef
+import Toolbar from './Toolbar/Toolbar';
+export { default as Toolbar } from './Toolbar/Toolbar';
+export type { ToolbarProps } from './Toolbar/Toolbar';
+//Tooltip is not polymorphic so we wrap it with forwardRef
+import Tooltip from './Tooltip/Tooltip';
+export { default as Tooltip } from './Tooltip/Tooltip';
+export type { TooltipProps } from './Tooltip/Tooltip';
+//Typography is polymorphic so we re-export it directly
+import Typography, { type TypographyProps } from './Typography/Typography';
+export { default as Typography } from './Typography/Typography';
+export type { TypographyProps } from './Typography/Typography';
+import Section from './Section/Section';
+export { default as Section } from './Section/Section';
+export type { SectionProps } from './Section/Section.types';
+/* -------------------------------------------------------------------------------------------------
+ * GuiSx — re-export of MUI’s SxProps<Theme>
+ * -------------------------------------------------------------------------------------------------*/
+/** Public sx type (kept for now to ease migration). */
+export type GuiSx = SxProps<Theme>;
+/* -------------------------------------------------------------------------------------------------
+ * Named bundle export (optional ergonomic import)
+ * -------------------------------------------------------------------------------------------------*/
+export const Atoms = {
+  Box,
+  Typography,
+  Link,
+  Stack,
+  Divider,
+  AppBar,
+  Toolbar,
+  IconButton,
+  Menu,
+  MenuItem,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Collapse,
+  Button,
+  Tooltip,
+  Switch,
+  Paper,
+  Avatar,
+  Section,
+} as const;
+export default Atoms;

package/src/gui/components/atoms/index.ts

@@ -0,0 +1,2 @@
+export * from "./atoms";
+export { default } from "./atoms";

package/src/gui/components/generics/Cards/Gridme.jsx

@@ -0,0 +1,52 @@
+import { Box } from '@mui/material';
+
+// Gridme is a generic grid layout component based on MUI's Box.
+// It allows you to quickly define a grid layout with customizable number of columns and spacing.
+// You can also control the maximum width of each grid item via the `itemMaxWidth` prop.
+// This wrapper is part of this.GUI's declarative approach to layout construction.
+const Gridme = ({
+  children,
+  columns = 3,
+  columnGap = '0.5rem',
+  rowGap = '1rem',
+  marginTop = '0px',
+  marginBottom = '0px',
+  sx = {},
+}) => {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        columnGap: columnGap,
+        rowGap: rowGap,
+        width: '100%',
+        alignItems: 'stretch',
+        justifyItems: 'stretch',
+        mt: marginTop,
+        mb: marginBottom,
+        '& > *': {
+          width: '100%',
+          height: '100%',
+        },
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Gridme;
+
+// Example usage:
+// 
+// import Gridme from './Gridme';
+// 
+// const Example = () => (
+//   <Gridme columns={3} gap="1rem">
+//     <Box sx={{ backgroundColor: 'red', height: 100 }} />
+//     <Box sx={{ backgroundColor: 'blue', height: 100 }} />
+//     <Box sx={{ backgroundColor: 'green', height: 100 }} />
+//   </Gridme>
+// );

package/src/gui/components/generics/Cards/LilBox.jsx

@@ -0,0 +1,65 @@
+import { Box, Typography } from '@mui/material';
+import * as Icons from 'react-feather';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const LilBox = ({
+  icon,
+  featherIcon,
+  label,
+  href,
+  aspectRatio = '5 / 4',
+}) => {
+  const FeatherIcon = featherIcon && Icons[featherIcon] ? Icons[featherIcon] : null;
+
+  return (
+    <Box
+      component={href ? Link : 'div'}
+      to={href}
+      sx={{
+        width: '100%',
+        aspectRatio,
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark'
+            ? 'rgba(255, 255, 255, 0.05)'
+            : 'rgba(0, 0, 0, 0.03)',
+        border: '1px solid',
+        borderColor: (theme) =>
+          theme.palette.mode === 'dark'
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgba(0, 0, 0, 0.1)',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: (theme) => theme.palette.text.primary,
+        fontSize: '1rem',
+        fontWeight: 300,
+        transition: 'transform 0.2s ease',
+        textDecoration: 'none',
+        cursor: 'pointer',
+        '&:hover': {
+          transform: 'scale(1.05)',
+        },
+      }}
+    >
+      <Box sx={{ fontSize: '1.5rem', mb: 0.5 }}>
+        {icon ? icon : FeatherIcon ? <FeatherIcon size={24} /> : null}
+      </Box>
+      <Typography variant="body2" align="center">
+        {label}
+      </Typography>
+    </Box>
+  );
+};
+
+LilBox.propTypes = {
+  icon: PropTypes.node,
+  featherIcon: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  aspectRatio: PropTypes.string,
+};
+
+export default LilBox;

package/src/gui/components/generics/Cards/ModuleCard.jsx

@@ -0,0 +1,106 @@
+import { Link as RouterLink } from "react-router-dom";
+import { Box, Typography, Card, CardActionArea, CardContent } from "@mui/material";
+
+/**
+ * ModuleCard
+ * Clickable card for modules/features.
+ *
+ * Props:
+ * - title: string (required)
+ * - description: string
+ * - image: string (url to image)
+ * - href?: string  -> preferred navigation prop (internal route or external URL)
+ * - link?: string  -> alias of href for backward compatibility
+ * - target?: string -> optional target for external links (e.g., "_blank")
+ *
+ * Behavior:
+ * - If `href` (or `link`) starts with http/https, renders an <a>.
+ * - Otherwise, renders a React Router <Link> for client-side routing.
+ * - Avoids nested anchors: do NOT wrap ModuleCard with another <Link>.
+ */
+const ModuleCard = ({ title, description, image, href, link, target }) => {
+  const to = href ?? link ?? null;
+  const isExternal = typeof to === "string" && /^https?:\/\//i.test(to);
+
+  // Decide which props to pass to CardActionArea to avoid <a> inside <a>.
+  const navProps = to
+    ? isExternal
+      ? { component: "a", href: to, target: target ?? "_self", rel: "noopener noreferrer" }
+      : { component: RouterLink, to }
+    : {}; // No navigation if no href/link provided
+
+  return (
+    <Card
+      sx={{
+        height: "100%",
+        backgroundColor: "background.paper",
+        boxShadow: 2,
+        borderRadius: 2,
+        "&:hover": {
+          boxShadow: 4,
+          transform: "translateY(-2px)",
+          transition: "0.3s ease-in-out",
+        },
+      }}
+    >
+      <CardActionArea
+        {...navProps}
+        sx={{ height: "100%", display: "flex", flexDirection: "column" }}
+      >
+        <CardContent
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+            padding: 2,
+            height: "100%",
+          }}
+        >
+          {/* Image */}
+          {image && (
+            <Box
+              component="img"
+              src={image}
+              alt={title}
+              sx={{
+                width: "80px",
+                height: "80px",
+                marginBottom: 1,
+                objectFit: "contain",
+              }}
+            />
+          )}
+
+          {/* Title */}
+          <Typography
+            variant="body1"
+            sx={{
+              fontWeight: 600,
+              color: "text.primary",
+              marginBottom: 1,
+            }}
+          >
+            {title}
+          </Typography>
+
+          {/* Description */}
+          {description && (
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "0.85rem",
+                color: "text.secondary",
+              }}
+            >
+              {description}
+            </Typography>
+          )}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default ModuleCard;

package/src/gui/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/gui/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>
+  );
+}