import { Stack, Textarea, Group, Text, Tooltip, ActionIcon, Paper, Card, Box, Collapse, Code, Title, Badge, Progress, Alert, Center, Loader } from '@mantine/core';
import { jsx, jsxs, Fragment } 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';
import Markdown from 'react-markdown';
import { Prism } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';

// src/components/chat/ChatSidebar.tsx
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 customCodeTheme = Object.fromEntries(
  Object.entries(oneDark).map(([key, value]) => [
    key,
    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
  ])
);
var defaultComponents = {
  h1: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 3, c: "var(--color-primary)", mb: "xs", mt: "md", children }),
  h2: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 4, c: "var(--color-primary)", mb: "xs", mt: "sm", children }),
  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
  li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.25rem", fontSize: "var(--mantine-font-size-sm)" }, children }),
  code: ({ className, children, ...props }) => {
    const match = /language-(\w+)/.exec(className || "");
    const codeString = String(children).replace(/\n$/, "");
    if (match) {
      return /* @__PURE__ */ jsx(
        Prism,
        {
          style: customCodeTheme,
          language: match[1],
          PreTag: "div",
          customStyle: {
            margin: "0.5rem 0",
            borderRadius: "var(--mantine-radius-default)",
            fontSize: "0.8rem"
          },
          children: codeString
        }
      );
    }
    return /* @__PURE__ */ jsx(Code, { ...props, children });
  },
  pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
  blockquote: ({ children }) => /* @__PURE__ */ jsx(Box, { pl: "sm", my: "xs", style: { borderLeft: "2px solid var(--color-border)" }, children }),
  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children }),
  strong: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fw: 700, children }),
  em: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fs: "italic", children })
};
function StyledMarkdown({ children, components, className, style }) {
  const mergedComponents = components ? { ...defaultComponents, ...components } : defaultComponents;
  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(Markdown, { components: mergedComponents, children }) });
}
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(
    Card,
    {
      p: "xs",
      withBorder: true,
      style: {
        backgroundColor: "var(--color-elevated)",
        borderColor: "var(--color-border)",
        boxShadow: "var(--card-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 })
            }
          ) })
        ] }),
        isUser ? /* @__PURE__ */ jsx(
          Paper,
          {
            p: "xs",
            c: "var(--color-primary-contrast)",
            style: {
              backgroundColor: "var(--color-primary)",
              border: "none",
              boxShadow: "0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent)"
            },
            children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.55 }, children: message.text })
          }
        ) : /* @__PURE__ */ jsx(
          Card,
          {
            p: "sm",
            withBorder: true,
            c: "var(--color-text)",
            style: {
              backgroundColor: "var(--color-elevated)",
              borderColor: "var(--color-border)",
              boxShadow: "var(--card-shadow)"
            },
            children: /* @__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
        ))
      ]
    }
  );
}
var TEXT_MESSAGE_TYPES = /* @__PURE__ */ new Set(["user_message", "assistant_message"]);
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,
  className,
  style,
  isProcessing = false,
  isConnected = true,
  error,
  onClearError,
  emptyStateText = "No messages yet",
  emptyStateSubtext = "Send a message to start the conversation",
  placeholder = "Message the agent...",
  messageAreaVariant = "grid",
  showAgentActivity = true
}) {
  const scrollRef = useRef(null);
  const scrollContainerRef = useRef(null);
  const visibleMessages = useMemo(
    () => showAgentActivity ? messages : messages.filter((message) => TEXT_MESSAGE_TYPES.has(message.messageType)),
    [messages, showAgentActivity]
  );
  useEffect(() => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
    }
  }, [visibleMessages.length, isConnected, isProcessing]);
  return /* @__PURE__ */ jsxs(Stack, { className, gap: 0, style: { height: "100%", overflow: "hidden", ...style }, children: [
    /* @__PURE__ */ jsx(ScrollableContainer, { containerRef: scrollContainerRef, variant: messageAreaVariant, children: /* @__PURE__ */ jsx(
      MessageAreaContent,
      {
        isConnected,
        isProcessing,
        error,
        messages: visibleMessages,
        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,
  variant
}) {
  const isGrid = variant === "grid";
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: containerRef,
      style: {
        flex: 1,
        display: "flex",
        flexDirection: "column",
        overflowY: "auto",
        overflowX: "hidden",
        scrollBehavior: "smooth",
        backgroundColor: isGrid ? "var(--color-background)" : "transparent",
        backgroundImage: isGrid ? [
          "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(", ") : void 0,
        backgroundSize: isGrid ? "40px 40px, 40px 40px, 100% 100%" : void 0,
        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, StyledMarkdown };
