@elevasis/ui 1.20.1 → 1.22.0

package/dist/chunk-ROSMICXG.js

@@ -0,0 +1,668 @@
+import { StyledMarkdown } from './chunk-3KMDHCAR.js';
+import { Stack, Textarea, Group, Text, Tooltip, ActionIcon, Paper, Box, Collapse, Title, Badge, Progress, Alert, Center, Loader } from '@mantine/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { IconSend, IconCheck, IconCopy, IconChevronDown, IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
+import { useClipboard } from '@mantine/hooks';
+import JSONPrettyRaw from 'react-json-pretty';
+
+function ChatSidebar({ isOpen, title = "Details", children, width = 320, zIndex = 10 }) {
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      withBorder: isOpen,
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: `${width}px`,
+        transform: isOpen ? "translateX(0)" : "translateX(100%)",
+        opacity: isOpen ? 1 : 0,
+        transition: "transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing)",
+        background: "var(--glass-background)",
+        zIndex,
+        display: "flex",
+        flexDirection: "column",
+        margin: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx(Group, { justify: "space-between", p: "sm", style: { borderBottom: "1px solid var(--color-border)" }, children: /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: title }) }),
+        children
+      ]
+    }
+  );
+}
+function ChatHeader({
+  title,
+  status,
+  contextUsage,
+  sidebarIcon,
+  onToggleSidebar,
+  isSidebarOpen = false,
+  sidebarTooltip
+}) {
+  const percentage = contextUsage ? Math.round(contextUsage.used / contextUsage.total * 100) : 0;
+  const progressColor = percentage > 90 ? "red" : percentage > 75 ? "orange" : "blue";
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: title }),
+      status && /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: status.color, children: status.label })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { children: [
+      contextUsage && /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          label: `${contextUsage.used.toLocaleString()} / ${contextUsage.total.toLocaleString()} tokens used`,
+          position: "bottom",
+          children: /* @__PURE__ */ jsx("div", { style: { width: "180px" }, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Context" }),
+              /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 600, c: progressColor, children: [
+                percentage,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Progress, { value: percentage, color: progressColor, size: "sm" })
+          ] }) })
+        }
+      ),
+      sidebarIcon && onToggleSidebar && /* @__PURE__ */ jsx(Tooltip, { label: sidebarTooltip || (isSidebarOpen ? "Close sidebar" : "Open sidebar"), position: "left", children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          variant: "subtle",
+          size: "lg",
+          onClick: onToggleSidebar,
+          style: {
+            transform: isSidebarOpen ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "transform var(--duration-normal) var(--easing)",
+            color: "var(--color-text-subtle)",
+            marginRight: 4
+          },
+          children: sidebarIcon
+        }
+      ) })
+    ] })
+  ] });
+}
+var ChatInputArea = memo(function ChatInputArea2({
+  input,
+  onInputChange,
+  onSend,
+  isDisabled = false,
+  isProcessing = false,
+  isConnected = true,
+  placeholder = "Message the agent..."
+}) {
+  const [focused, setFocused] = useState(false);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onSend();
+      }
+    },
+    [onSend]
+  );
+  const canSend = isConnected && !isDisabled && !isProcessing && input.trim();
+  return /* @__PURE__ */ jsx(Stack, { gap: 4, pt: 6, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "10px",
+        alignItems: "flex-end",
+        background: "var(--color-surface)",
+        border: focused ? "1px solid color-mix(in srgb, var(--color-primary) 50%, var(--color-border))" : "1px solid var(--color-border)",
+        borderRadius: "14px",
+        padding: "6px 6px 6px 16px",
+        transition: "border-color 180ms, box-shadow 180ms",
+        boxShadow: focused ? "0 0 0 1px color-mix(in srgb, var(--color-primary) 15%, transparent), 0 0 12px color-mix(in srgb, var(--color-primary) 10%, transparent), inset 0 0 8px color-mix(in srgb, var(--color-primary) 4%, transparent)" : "var(--standard-box-shadow)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            placeholder,
+            value: input,
+            onChange: (e) => onInputChange(e.currentTarget.value),
+            onKeyDown: handleKeyDown,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            autosize: true,
+            minRows: 1,
+            maxRows: 6,
+            style: { flex: 1 },
+            disabled: !isConnected || isProcessing || isDisabled,
+            styles: {
+              input: {
+                border: "none",
+                background: "transparent",
+                fontSize: "14px",
+                padding: "6px 0",
+                color: "var(--color-text)",
+                "&:focus": {
+                  outline: "none"
+                },
+                "&::placeholder": {
+                  color: "var(--color-text-subtle)",
+                  fontWeight: 400,
+                  opacity: 0.6
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onSend,
+            disabled: !canSend,
+            "aria-label": "Send message",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 36,
+              height: 36,
+              flexShrink: 0,
+              border: "none",
+              borderRadius: "10px",
+              cursor: canSend ? "pointer" : "default",
+              background: canSend ? "linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, black))" : "var(--color-surface-hover)",
+              boxShadow: canSend ? "0 2px 8px color-mix(in srgb, var(--color-primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.1)" : "none",
+              transition: "all 180ms",
+              transform: canSend ? "scale(1)" : "scale(0.92)",
+              opacity: canSend ? 1 : 0.35
+            },
+            children: /* @__PURE__ */ jsx(IconSend, { size: 16, color: "white", style: { marginLeft: -1 } })
+          }
+        )
+      ]
+    }
+  ) });
+});
+var JSONPretty = JSONPrettyRaw;
+var jsonTheme = {
+  main: "line-height:1.3;color:var(--color-text);background:transparent;overflow:auto;",
+  error: "line-height:1.3;color:var(--color-error);background:transparent;overflow:auto;",
+  key: "color:var(--color-text-dimmed);",
+  string: "color:var(--color-success);",
+  value: "color:var(--color-warning);",
+  boolean: "color:var(--color-text-dimmed);"
+};
+var ENTRANCE_DURATION = "0.35s";
+var ENTRANCE_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+var slideFromLeft = {
+  animation: `assistantSlideIn ${ENTRANCE_DURATION} ${ENTRANCE_EASING} both`
+};
+var slideFromRight = {
+  animation: `assistantSlideInRight ${ENTRANCE_DURATION} ${ENTRANCE_EASING} both`
+};
+var keyframesInjected = false;
+function ensureKeyframes() {
+  if (keyframesInjected || typeof document === "undefined") return;
+  keyframesInjected = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes assistantSlideIn {
+      from { opacity: 0; transform: translateX(-12px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes assistantSlideInRight {
+      from { opacity: 0; transform: translateX(12px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+var monoMeta = {
+  fontFamily: "var(--mantine-font-family-monospace)",
+  fontSize: "0.65rem",
+  letterSpacing: "0.06em"
+};
+function AgentActivityBubble({
+  icon,
+  title,
+  color,
+  collapsible = false,
+  expanded = false,
+  onToggle,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Box, { style: { alignSelf: "flex-start", width: "100%", maxWidth: "75%", ...slideFromLeft }, children: /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      p: "xs",
+      withBorder: false,
+      style: {
+        backgroundColor: "var(--color-surface)",
+        border: "none",
+        boxShadow: "var(--standard-box-shadow)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Group,
+          {
+            gap: "xs",
+            onClick: collapsible ? onToggle : void 0,
+            style: {
+              cursor: collapsible ? "pointer" : "default",
+              userSelect: collapsible ? "none" : "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Text, { size: "sm", c: color, ff: "monospace", style: { letterSpacing: "0.04em" }, children: [
+                icon,
+                " ",
+                title
+              ] }),
+              collapsible && /* @__PURE__ */ jsx(
+                IconChevronDown,
+                {
+                  size: 14,
+                  style: {
+                    transform: expanded ? "rotate(180deg)" : "none",
+                    transition: "transform var(--duration-fast)"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        collapsible ? /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsx(Box, { mt: "xs", p: "xs", children }) }) : /* @__PURE__ */ jsx(Box, { mt: "xs", p: "xs", children })
+      ]
+    }
+  ) });
+}
+var MessageBubble = memo(function MessageBubble2({ message }) {
+  ensureKeyframes();
+  const [expanded, setExpanded] = useState(false);
+  switch (message.messageType) {
+    case "user_message":
+    case "assistant_message":
+      return /* @__PURE__ */ jsx(TextMessage, { message });
+    case "agent:started":
+    case "agent:completed":
+      return null;
+    // Don't render system lifecycle messages
+    case "agent:reasoning": {
+      const event = message.metadata;
+      return /* @__PURE__ */ jsx(
+        ReasoningMessage,
+        {
+          iteration: event.iteration,
+          reasoning: event.reasoning,
+          expanded,
+          onToggle: () => setExpanded(!expanded)
+        }
+      );
+    }
+    case "agent:tool_call": {
+      const event = message.metadata;
+      return /* @__PURE__ */ jsx(
+        ToolCallMessage,
+        {
+          toolName: event.toolName,
+          args: event.args,
+          expanded,
+          onToggle: () => setExpanded(!expanded)
+        }
+      );
+    }
+    case "agent:tool_result": {
+      const event = message.metadata;
+      return /* @__PURE__ */ jsx(
+        ToolResultMessage,
+        {
+          success: event.success,
+          result: event.result,
+          error: event.error,
+          expanded,
+          onToggle: () => setExpanded(!expanded)
+        }
+      );
+    }
+    case "agent:error": {
+      const event = message.metadata;
+      return /* @__PURE__ */ jsx(ErrorMessage, { error: event.error, expanded, onToggle: () => setExpanded(!expanded) });
+    }
+    default:
+      return null;
+  }
+});
+function TextMessage({ message }) {
+  const isUser = message.role === "user";
+  const clipboard = useClipboard({ timeout: 2e3 });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: 4,
+      style: {
+        alignSelf: isUser ? "flex-end" : "flex-start",
+        maxWidth: "75%",
+        ...isUser ? slideFromRight : slideFromLeft
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, justify: isUser ? "flex-end" : "flex-start", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              fw: 600,
+              c: isUser ? "var(--color-primary)" : "var(--color-text-subtle)",
+              tt: "uppercase",
+              style: { ...monoMeta, fontWeight: 600 },
+              children: isUser ? "USER" : "AGENT"
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: monoMeta, children: message.createdAt.toLocaleTimeString() }),
+          /* @__PURE__ */ jsx(Tooltip, { label: clipboard.copied ? "Copied!" : "Copy message", position: "top", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              size: "xs",
+              variant: "subtle",
+              color: "gray",
+              onClick: () => clipboard.copy(message.text),
+              style: { opacity: 0.5, transition: "opacity var(--duration-fast)" },
+              onMouseEnter: (e) => e.currentTarget.style.opacity = "1",
+              onMouseLeave: (e) => e.currentTarget.style.opacity = "0.5",
+              children: clipboard.copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Paper,
+          {
+            p: "xs",
+            c: isUser ? "var(--color-primary-contrast)" : "var(--color-text)",
+            style: {
+              backgroundColor: isUser ? "var(--color-primary)" : "var(--color-surface)",
+              borderLeft: isUser ? "none" : "2px solid color-mix(in srgb, var(--color-primary) 30%, transparent)",
+              border: isUser ? "none" : void 0,
+              boxShadow: isUser ? "0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent)" : "var(--standard-box-shadow)"
+            },
+            children: isUser ? /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.55 }, children: message.text }) : /* @__PURE__ */ jsx(
+              StyledMarkdown,
+              {
+                components: {
+                  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.55, margin: "0.25rem 0" }, component: "p", children })
+                },
+                children: message.text
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ReasoningMessage({
+  iteration,
+  reasoning,
+  expanded,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    AgentActivityBubble,
+    {
+      icon: "\u{1F4AD}",
+      title: `Reasoning (Iteration ${iteration})`,
+      color: "var(--color-primary)",
+      collapsible: true,
+      expanded,
+      onToggle,
+      children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text)", style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: reasoning })
+    }
+  );
+}
+function ToolCallMessage({
+  toolName,
+  args,
+  expanded,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    AgentActivityBubble,
+    {
+      icon: "\u{1F527}",
+      title: `Tool: ${toolName}`,
+      color: "var(--mantine-color-cyan-6)",
+      collapsible: true,
+      expanded,
+      onToggle,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: "0.75rem",
+            fontFamily: "var(--mantine-font-family-monospace)",
+            padding: "0.5rem",
+            overflow: "auto",
+            background: "var(--color-background)",
+            borderRadius: "var(--mantine-radius-sm)"
+          },
+          children: /* @__PURE__ */ jsx(JSONPretty, { data: args, theme: jsonTheme })
+        }
+      )
+    }
+  );
+}
+function ToolResultMessage({
+  success,
+  result,
+  error,
+  expanded,
+  onToggle
+}) {
+  const color = success ? "green" : "orange";
+  const icon = success ? "\u2705" : "\u26A0\uFE0F";
+  return /* @__PURE__ */ jsx(
+    AgentActivityBubble,
+    {
+      icon,
+      title: "Tool Result",
+      color: `var(--mantine-color-${color}-6)`,
+      collapsible: true,
+      expanded,
+      onToggle,
+      children: success ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: "0.75rem",
+            fontFamily: "var(--mantine-font-family-monospace)",
+            padding: "0.5rem",
+            overflow: "auto",
+            background: "var(--color-background)",
+            borderRadius: "var(--mantine-radius-sm)"
+          },
+          children: /* @__PURE__ */ jsx(JSONPretty, { data: result, theme: jsonTheme })
+        }
+      ) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text)", style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: error })
+    }
+  );
+}
+function ErrorMessage({ error, expanded, onToggle }) {
+  return /* @__PURE__ */ jsx(
+    AgentActivityBubble,
+    {
+      icon: "\u274C",
+      title: "Agent Error",
+      color: "var(--color-error)",
+      collapsible: true,
+      expanded,
+      onToggle,
+      children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text)", style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: error })
+    }
+  );
+}
+var TEXT = "PROCESSING...";
+var STREAK_DURATION = 1.8;
+var BRIGHT_WIDTH = 3;
+function ProcessingIndicator() {
+  const letters = useMemo(
+    () => TEXT.split("").map((char, i) => ({
+      char,
+      delay: i / TEXT.length * STREAK_DURATION
+    })),
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: "monospace",
+        fontSize: "var(--mantine-font-size-xs)",
+        letterSpacing: "0.06em",
+        paddingLeft: "var(--mantine-spacing-xs)",
+        paddingRight: "var(--mantine-spacing-xs)",
+        display: "inline-flex"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes processing-streak {
+          0%, 100% {
+            color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+            text-shadow: none;
+          }
+          ${Math.round(BRIGHT_WIDTH / TEXT.length * 50)}% {
+            color: color-mix(in srgb, var(--color-primary) 100%, white);
+            text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 60%, transparent);
+          }
+        }
+      ` }),
+        letters.map((letter, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: "color-mix(in srgb, var(--color-primary) 40%, transparent)",
+              animation: `processing-streak ${STREAK_DURATION}s ease-in-out ${letter.delay}s infinite`
+            },
+            children: letter.char
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+function MessageAreaContent({
+  isConnected,
+  isProcessing,
+  error,
+  messages,
+  emptyStateText,
+  emptyStateSubtext,
+  scrollRef
+}) {
+  if (!isConnected) {
+    return /* @__PURE__ */ jsx(Center, { style: { flex: 1, width: "100%", marginTop: "auto", marginBottom: "auto" }, children: error ? /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
+      /* @__PURE__ */ jsx(IconAlertTriangle, { size: 40, color: "var(--mantine-color-red-6)" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", children: error })
+    ] }) : /* @__PURE__ */ jsx(Loader, { size: "lg" }) });
+  }
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsx(Center, { style: { flex: 1, width: "100%", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxs(Stack, { align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { c: "dimmed", children: emptyStateText }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: emptyStateSubtext })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { pb: 4, pr: "sm", style: { marginTop: "auto" }, children: [
+    messages.map((msg) => /* @__PURE__ */ jsx(MessageBubble, { message: msg }, msg.id)),
+    isProcessing && /* @__PURE__ */ jsx(ProcessingIndicator, {}),
+    /* @__PURE__ */ jsx("div", { ref: scrollRef })
+  ] });
+}
+function ChatInterface({
+  messages,
+  input,
+  onInputChange,
+  onSendMessage,
+  isProcessing = false,
+  isConnected = true,
+  error,
+  onClearError,
+  emptyStateText = "No messages yet",
+  emptyStateSubtext = "Send a message to start the conversation",
+  placeholder = "Message the agent..."
+}) {
+  const scrollRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+    }
+  }, [messages.length, isConnected, isProcessing]);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { height: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(ScrollableContainer, { containerRef: scrollContainerRef, children: /* @__PURE__ */ jsx(
+      MessageAreaContent,
+      {
+        isConnected,
+        isProcessing,
+        error,
+        messages,
+        emptyStateText,
+        emptyStateSubtext,
+        scrollRef
+      }
+    ) }),
+    isConnected && error && onClearError && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }),
+        color: "red",
+        variant: "light",
+        withCloseButton: true,
+        onClose: onClearError,
+        radius: 0,
+        style: { flexShrink: 0 },
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChatInputArea,
+      {
+        input,
+        onInputChange,
+        onSend: onSendMessage,
+        isProcessing,
+        isConnected,
+        placeholder
+      }
+    )
+  ] });
+}
+function ScrollableContainer({
+  children,
+  containerRef
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        overflowY: "auto",
+        overflowX: "hidden",
+        scrollBehavior: "smooth",
+        backgroundColor: "var(--color-background)",
+        backgroundImage: [
+          "linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px)",
+          "linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px)",
+          "radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, transparent 70%)"
+        ].join(", "),
+        backgroundSize: "40px 40px, 40px 40px, 100% 100%",
+        borderRadius: "var(--mantine-radius-sm)",
+        padding: "8px",
+        // Custom scrollbar styling
+        scrollbarWidth: "thin",
+        scrollbarColor: "color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border)) transparent"
+      },
+      children
+    }
+  );
+}
+
+export { ChatHeader, ChatInputArea, ChatInterface, ChatSidebar, MessageBubble, ProcessingIndicator };