@elevasis/ui 1.3.1 → 1.3.3

package/dist/chunk-TN3PU2WK.js

@@ -1,748 +0,0 @@
-import { CustomModal } from './chunk-JYSYHVLU.js';
-import { StyledMarkdown } from './chunk-3KMDHCAR.js';
-import { memo, useState, useCallback, cloneElement, useRef, useEffect, useMemo } from 'react';
-import { Stack, Group, Text, Tooltip, ActionIcon, Paper, Textarea, Box, Collapse, Center, Space, Button, Title, TextInput, Alert, Badge, Progress, Loader } from '@mantine/core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { IconCheck, IconCopy, IconSend, IconChevronDown, IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
-import { useClipboard } from '@mantine/hooks';
-import JSONPretty from 'react-json-pretty';
-
-var ConfirmationModal = ({
-  opened,
-  onClose,
-  loading,
-  icon,
-  confirmationHandler,
-  style,
-  title,
-  text,
-  buttonText,
-  buttonColor,
-  centerText
-}) => {
-  const styledIcon = cloneElement(icon, {
-    size: 55,
-    strokeWidth: 1.5
-  });
-  return /* @__PURE__ */ jsxs(CustomModal, { opened, onClose, loading, style, children: [
-    /* @__PURE__ */ jsx(Center, { children: styledIcon }),
-    /* @__PURE__ */ jsx(Space, { h: 16 }),
-    /* @__PURE__ */ jsx(Center, { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Text, { size: "lg", c: "var(--color-text)", children: title }) }),
-    /* @__PURE__ */ jsx(Space, { h: 16 }),
-    text && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-dimmed)", style: { textAlign: centerText ? "center" : "left" }, children: text }),
-      /* @__PURE__ */ jsx(Space, { h: 16 })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { color: buttonColor || "blue", fullWidth: true, onClick: confirmationHandler, loading, children: buttonText || "Confirm" })
-  ] });
-};
-var ConfirmationInputModal = ({
-  opened,
-  onClose,
-  loading,
-  icon,
-  confirmationHandler,
-  style,
-  title,
-  text,
-  buttonText,
-  buttonColor,
-  inputValue,
-  onInputChange,
-  expectedValue,
-  placeholder
-}) => {
-  const styledIcon = cloneElement(icon, {
-    size: 55,
-    strokeWidth: 1.5
-  });
-  return /* @__PURE__ */ jsxs(CustomModal, { opened, onClose, loading, style, children: [
-    /* @__PURE__ */ jsx(Center, { children: styledIcon }),
-    /* @__PURE__ */ jsx(Space, { h: 16 }),
-    /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Title, { order: 3, children: title }) }),
-    /* @__PURE__ */ jsx(Space, { h: 16 }),
-    text && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-dimmed)", children: text }),
-      /* @__PURE__ */ jsx(Space, { h: 8 })
-    ] }),
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        placeholder: placeholder || "Enter confirmation text",
-        value: inputValue,
-        onChange: (event) => onInputChange(event.currentTarget.value)
-      }
-    ),
-    /* @__PURE__ */ jsx(Space, { h: 16 }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        color: buttonColor || "blue",
-        fullWidth: true,
-        onClick: confirmationHandler,
-        loading,
-        disabled: inputValue !== expectedValue,
-        children: buttonText || "Confirm"
-      }
-    )
-  ] });
-};
-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 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 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
-    }
-  );
-}
-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
-        }
-      ) })
-    ] })
-  ] });
-}
-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
-      ]
-    }
-  );
-}
-
-export { ChatHeader, ChatInputArea, ChatInterface, ChatSidebar, ConfirmationInputModal, ConfirmationModal, MessageBubble };