@scenemesh/entity-engine-aimodule 1.0.0

package/dist/chunk-SXPA6SSD.mjs

@@ -0,0 +1,1621 @@
+// src/components/ChatDialog/ChatDialog.tsx
+import { motion, AnimatePresence } from "framer-motion";
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import {
+  X,
+  Send,
+  Square,
+  Paperclip,
+  AlertCircle,
+  SparklesIcon
+} from "lucide-react";
+import { Box as Box2, Text as Text2, Badge as Badge2, Group as Group2, Paper as Paper2, Stack as Stack2, Title, Button, Textarea, ActionIcon, ScrollArea } from "@mantine/core";
+
+// src/hooks/useChat.ts
+import { useChat as useAIChat } from "@ai-sdk/react";
+var useChat = useAIChat;
+
+// src/components/MessageBubble/MessageBubble.tsx
+import { Box, Text, Badge, Group, Paper, Stack } from "@mantine/core";
+
+// src/components/DynamicUI/EntityEngineDynamicComponents.tsx
+import { EntityViewContainer } from "@scenemesh/entity-engine";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DynamicEntityGridComponent = ({
+  modelName = "",
+  displayMode = "table",
+  toolName,
+  _renderHint
+}) => {
+  if (!modelName) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "1rem",
+      border: "1px solid #e2e8f0",
+      borderRadius: "0.5rem",
+      backgroundColor: "#f8fafc"
+    }, children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "\u26A0\uFE0F ",
+        toolName,
+        " \u9519\u8BEF"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "\u7F3A\u5C11\u5FC5\u9700\u7684 modelName \u53C2\u6570" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    EntityViewContainer,
+    {
+      modelName,
+      viewType: "grid",
+      behavior: { mode: "display" },
+      viewOptions: {
+        mode: displayMode,
+        hideToolbar: false,
+        hideEditColumn: false,
+        hidePagination: false
+      }
+    }
+  ) });
+};
+var DynamicEntityFormComponent = ({
+  modelName = "",
+  baseObjectId,
+  mode = "display",
+  toCreating = false,
+  toolName
+}) => {
+  if (!modelName) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "1rem",
+      border: "1px solid #e2e8f0",
+      borderRadius: "0.5rem",
+      backgroundColor: "#f8fafc"
+    }, children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "\u26A0\uFE0F ",
+        toolName,
+        " \u9519\u8BEF"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "\u7F3A\u5C11\u5FC5\u9700\u7684 modelName \u53C2\u6570" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    EntityViewContainer,
+    {
+      modelName,
+      viewType: "form",
+      baseObjectId,
+      behavior: {
+        mode,
+        toCreating
+      }
+    }
+  ) });
+};
+var DynamicEntityKanbanComponent = ({
+  modelName = "",
+  toolName,
+  _renderHint
+}) => {
+  if (!modelName) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "1rem",
+      border: "1px solid #e2e8f0",
+      borderRadius: "0.5rem",
+      backgroundColor: "#f8fafc"
+    }, children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "\u26A0\uFE0F ",
+        toolName,
+        " \u9519\u8BEF"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "\u7F3A\u5C11\u5FC5\u9700\u7684 modelName \u53C2\u6570" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    EntityViewContainer,
+    {
+      modelName,
+      viewType: "kanban",
+      behavior: { mode: "display" },
+      viewOptions: {
+        hideToolbar: false,
+        hideEditColumn: false,
+        hidePagination: false
+      }
+    }
+  ) });
+};
+var DynamicEntityDashboardComponent = ({
+  modelName = "",
+  toolName,
+  _renderHint
+}) => {
+  if (!modelName) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "1rem",
+      border: "1px solid #e2e8f0",
+      borderRadius: "0.5rem",
+      backgroundColor: "#f8fafc"
+    }, children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "\u26A0\uFE0F ",
+        toolName,
+        " \u9519\u8BEF"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "\u7F3A\u5C11\u5FC5\u9700\u7684 modelName \u53C2\u6570" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    EntityViewContainer,
+    {
+      modelName,
+      viewType: "dashboard",
+      behavior: { mode: "display" },
+      viewOptions: {
+        hideToolbar: false,
+        hideEditColumn: false,
+        hidePagination: false
+      }
+    }
+  ) });
+};
+var DynamicEntityMastailComponent = ({
+  modelName = "",
+  baseObjectId,
+  toolName,
+  _renderHint
+}) => {
+  if (!modelName) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "1rem",
+      border: "1px solid #e2e8f0",
+      borderRadius: "0.5rem",
+      backgroundColor: "#f8fafc"
+    }, children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "\u26A0\uFE0F ",
+        toolName,
+        " \u9519\u8BEF"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "\u7F3A\u5C11\u5FC5\u9700\u7684 modelName \u53C2\u6570" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    EntityViewContainer,
+    {
+      modelName,
+      viewType: "mastail",
+      baseObjectId,
+      behavior: { mode: "display" },
+      viewOptions: {
+        hideToolbar: false,
+        hideEditColumn: false,
+        hidePagination: false
+      }
+    }
+  ) });
+};
+var DynamicErrorDisplayComponent = ({
+  toolName,
+  error,
+  errorDetails,
+  errorType,
+  executedAt,
+  _renderHint
+}) => /* @__PURE__ */ jsxs("div", { style: {
+  padding: "1rem",
+  backgroundColor: "#fee2e2",
+  border: "1px solid #fecaca",
+  borderRadius: "0.5rem",
+  color: "#dc2626",
+  margin: "0.5rem 0"
+}, children: [
+  /* @__PURE__ */ jsxs("div", { style: { fontWeight: "500", marginBottom: "0.5rem" }, children: [
+    "\u274C ",
+    toolName,
+    " \u6267\u884C\u5931\u8D25"
+  ] }),
+  /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "0.875rem" }, children: error }),
+  errorDetails && /* @__PURE__ */ jsxs("details", { style: { marginTop: "0.5rem" }, children: [
+    /* @__PURE__ */ jsx("summary", { style: { cursor: "pointer", fontSize: "0.875rem" }, children: "\u8BE6\u7EC6\u9519\u8BEF\u4FE1\u606F" }),
+    /* @__PURE__ */ jsx("pre", { style: {
+      marginTop: "0.25rem",
+      fontSize: "0.75rem",
+      backgroundColor: "#fef2f2",
+      padding: "0.5rem",
+      borderRadius: "0.25rem",
+      overflow: "auto",
+      whiteSpace: "pre-wrap"
+    }, children: errorDetails })
+  ] }),
+  executedAt && /* @__PURE__ */ jsxs("div", { style: {
+    fontSize: "0.75rem",
+    color: "#991b1b",
+    marginTop: "0.5rem",
+    opacity: 0.8
+  }, children: [
+    "\u6267\u884C\u65F6\u95F4: ",
+    new Date(executedAt).toLocaleString()
+  ] })
+] });
+var ENTITY_DYNAMIC_COMPONENTS = {
+  "DynamicDataTable": DynamicEntityGridComponent,
+  "DynamicDataGrid": DynamicEntityGridComponent,
+  "DynamicDataList": DynamicEntityGridComponent,
+  "DynamicEntityForm": DynamicEntityFormComponent,
+  "DynamicEntityKanban": DynamicEntityKanbanComponent,
+  "DynamicEntityDashboard": DynamicEntityDashboardComponent,
+  "DynamicEntityMastail": DynamicEntityMastailComponent,
+  "DynamicErrorDisplay": DynamicErrorDisplayComponent
+};
+
+// src/components/DynamicUI/DynamicToolRenderer.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DynamicToolRenderer({ toolName, input, output, state }) {
+  switch (state) {
+    case "input-streaming":
+      return /* @__PURE__ */ jsxs2("div", { style: { padding: "0.75rem", background: "#f8fafc", borderRadius: "0.5rem", border: "1px solid #e2e8f0" }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { fontWeight: "500", marginBottom: "0.25rem" }, children: [
+          "\u26A1 ",
+          toolName,
+          " - \u51C6\u5907\u4E2D..."
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: "0.875rem", color: "#64748b" }, children: "\u6B63\u5728\u89E3\u6790\u5DE5\u5177\u53C2\u6570..." })
+      ] });
+    case "input-available":
+      return /* @__PURE__ */ jsxs2("div", { style: { padding: "0.75rem", background: "#fef3c7", borderRadius: "0.5rem", border: "1px solid #f59e0b" }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { fontWeight: "500", marginBottom: "0.25rem" }, children: [
+          "\u{1F527} ",
+          toolName,
+          " - \u6267\u884C\u4E2D"
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: { fontSize: "0.875rem", color: "#92400e" }, children: [
+          input?.modelName && `\u67E5\u8BE2\u6A21\u578B\uFF1A${input.modelName}`,
+          input?.displayMode && ` | \u663E\u793A\u6A21\u5F0F\uFF1A${input.displayMode}`
+        ] })
+      ] });
+    case "output-available":
+      return /* @__PURE__ */ jsx2(
+        DynamicOutputRenderer,
+        {
+          toolName,
+          input,
+          output
+        }
+      );
+    case "output-error":
+      return /* @__PURE__ */ jsxs2("div", { style: {
+        padding: "1rem",
+        background: "#fee2e2",
+        borderRadius: "0.5rem",
+        border: "1px solid #fecaca",
+        color: "#dc2626"
+      }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { fontWeight: "500", marginBottom: "0.5rem" }, children: [
+          "\u274C ",
+          toolName,
+          " \u6267\u884C\u5931\u8D25"
+        ] }),
+        /* @__PURE__ */ jsx2("p", { style: { margin: 0 }, children: output?.error || "\u672A\u77E5\u9519\u8BEF" }),
+        output?.errorDetails && /* @__PURE__ */ jsxs2("details", { style: { marginTop: "0.5rem" }, children: [
+          /* @__PURE__ */ jsx2("summary", { style: { cursor: "pointer" }, children: "\u8BE6\u7EC6\u4FE1\u606F" }),
+          /* @__PURE__ */ jsx2("p", { style: { marginTop: "0.25rem", fontSize: "0.875rem" }, children: output.errorDetails })
+        ] })
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs2("div", { style: { padding: "0.75rem", background: "#f1f5f9", borderRadius: "0.5rem" }, children: [
+        /* @__PURE__ */ jsxs2("h4", { children: [
+          "\u{1F527} ",
+          toolName
+        ] }),
+        /* @__PURE__ */ jsxs2("p", { children: [
+          "\u672A\u77E5\u72B6\u6001: ",
+          state
+        ] })
+      ] });
+  }
+}
+function DynamicOutputRenderer({ toolName, input, output }) {
+  const renderHint = output?._renderHint;
+  const componentType = renderHint?.componentType;
+  const displayMode = input?.displayMode || output?.displayMode;
+  let selectedComponentType;
+  if (componentType && componentType in ENTITY_DYNAMIC_COMPONENTS) {
+    selectedComponentType = componentType;
+  } else {
+    switch (displayMode) {
+      case "table":
+        selectedComponentType = "DynamicDataTable";
+        break;
+      case "list":
+        selectedComponentType = "DynamicDataGrid";
+        break;
+      case "grid":
+        selectedComponentType = "DynamicDataGrid";
+        break;
+      case "form":
+        selectedComponentType = "DynamicEntityForm";
+        break;
+      case "kanban":
+        selectedComponentType = "DynamicEntityKanban";
+        break;
+      case "dashboard":
+        selectedComponentType = "DynamicEntityDashboard";
+        break;
+      case "mastail":
+        selectedComponentType = "DynamicEntityMastail";
+        break;
+      default:
+        if (input?.baseObjectId || output?.baseObjectId) {
+          selectedComponentType = "DynamicEntityForm";
+        } else {
+          selectedComponentType = "DynamicDataGrid";
+        }
+    }
+  }
+  const SelectedComponent = ENTITY_DYNAMIC_COMPONENTS[selectedComponentType];
+  const componentProps = {
+    toolName,
+    modelName: input?.modelName || output?.modelName,
+    displayMode: displayMode || "table",
+    data: output?.data,
+    totalCount: output?.totalCount,
+    pagination: output?.pagination,
+    query: output?.query || {
+      sortBy: input?.sortBy,
+      filters: input?.filters
+    },
+    baseObjectId: input?.baseObjectId,
+    mode: input?.mode === "create" ? "edit" : input?.mode || "display",
+    toCreating: input?.mode === "create",
+    executedAt: output?.executedAt,
+    toolCallId: output?.toolCallId,
+    _renderHint: renderHint
+  };
+  if (selectedComponentType === "DynamicErrorDisplay") {
+    componentProps.error = output?.error || "Unknown error";
+    componentProps.errorDetails = output?.errorDetails || renderHint?.errorDetails;
+    componentProps.errorType = output?.errorType || renderHint?.errorType || "unknown";
+  }
+  return /* @__PURE__ */ jsxs2("div", { style: { margin: "0.5rem 0" }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: {
+      fontWeight: "500",
+      marginBottom: "0.75rem",
+      padding: "0.5rem",
+      background: "#f0f9ff",
+      borderRadius: "0.375rem",
+      border: "1px solid #e0f2fe"
+    }, children: [
+      "\u{1F527} ",
+      toolName,
+      " \u7ED3\u679C",
+      output?.executedAt && /* @__PURE__ */ jsx2("span", { style: {
+        fontSize: "0.75rem",
+        color: "#64748b",
+        marginLeft: "0.5rem"
+      }, children: new Date(output.executedAt).toLocaleString() })
+    ] }),
+    /* @__PURE__ */ jsx2(SelectedComponent, { ...componentProps })
+  ] });
+}
+
+// src/components/GenerativeUI/PrebuiltComponents.tsx
+import { EntityViewContainer as EntityViewContainer2 } from "@scenemesh/entity-engine";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WeatherComponent = ({
+  temperature = 0,
+  weather = "",
+  location = "",
+  humidity,
+  windSpeed
+}) => (
+  // <div style={{ 
+  //   background: 'linear-gradient(135deg, #74b9ff 0%, #0984e3 100%)',
+  //   color: 'white',
+  //   padding: '1.5rem',
+  //   borderRadius: '0.75rem',
+  //   margin: '0.5rem 0',
+  //   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+  // }}>
+  //   <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
+  //     <span style={{ fontSize: '1.5rem', marginRight: '0.5rem' }}>🌤️</span>
+  //     <h3 style={{ margin: 0, fontSize: '1.25rem' }}>{location}</h3>
+  //   </div>
+  //   <p style={{ margin: '0.25rem 0', fontSize: '1rem' }}>{weather}</p>
+  //   <p style={{ margin: '0.25rem 0', fontSize: '1.5rem', fontWeight: 'bold' }}>{temperature}°C</p>
+  //   {humidity && <p style={{ margin: '0.25rem 0', fontSize: '0.875rem' }}>湿度: {humidity}%</p>}
+  //   {windSpeed && <p style={{ margin: '0.25rem 0', fontSize: '0.875rem' }}>风速: {windSpeed} km/h</p>}
+  // </div>
+  /* @__PURE__ */ jsx3(EntityViewContainer2, { modelName: "product", viewType: "grid", behavior: { mode: "edit" } })
+);
+var LocationComponent = ({
+  city = "",
+  country = "",
+  province = "",
+  coordinates,
+  timezone = "",
+  population,
+  area
+}) => /* @__PURE__ */ jsxs3("div", { style: {
+  background: "linear-gradient(135deg, #fd79a8 0%, #e84393 100%)",
+  color: "white",
+  padding: "1.5rem",
+  borderRadius: "0.75rem",
+  margin: "0.5rem 0",
+  boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+}, children: [
+  /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", marginBottom: "0.5rem" }, children: [
+    /* @__PURE__ */ jsx3("span", { style: { fontSize: "1.5rem", marginRight: "0.5rem" }, children: "\u{1F4CD}" }),
+    /* @__PURE__ */ jsx3("h3", { style: { margin: 0, fontSize: "1.25rem" }, children: city })
+  ] }),
+  province && /* @__PURE__ */ jsxs3("p", { style: { margin: "0.25rem 0", fontSize: "1rem" }, children: [
+    province,
+    ", ",
+    country
+  ] }),
+  coordinates && /* @__PURE__ */ jsxs3("p", { style: { margin: "0.25rem 0", fontSize: "0.875rem" }, children: [
+    "\u5750\u6807: ",
+    coordinates.lat.toFixed(4),
+    ", ",
+    coordinates.lng.toFixed(4)
+  ] }),
+  timezone && /* @__PURE__ */ jsxs3("p", { style: { margin: "0.25rem 0", fontSize: "0.875rem" }, children: [
+    "\u65F6\u533A: ",
+    timezone
+  ] }),
+  population && /* @__PURE__ */ jsxs3("p", { style: { margin: "0.25rem 0", fontSize: "0.875rem" }, children: [
+    "\u4EBA\u53E3: ",
+    population.toLocaleString(),
+    "\u4E07\u4EBA"
+  ] }),
+  area && /* @__PURE__ */ jsxs3("p", { style: { margin: "0.25rem 0", fontSize: "0.875rem" }, children: [
+    "\u9762\u79EF: ",
+    area.toLocaleString(),
+    " km\xB2"
+  ] })
+] });
+var CodeExecutionComponent = ({
+  code = "",
+  language = "javascript",
+  output = "",
+  status = "success"
+}) => /* @__PURE__ */ jsxs3("div", { style: {
+  background: "#f8fafc",
+  border: "1px solid #e2e8f0",
+  borderRadius: "0.75rem",
+  margin: "0.5rem 0",
+  overflow: "hidden"
+}, children: [
+  /* @__PURE__ */ jsxs3("div", { style: {
+    background: "#334155",
+    color: "white",
+    padding: "0.75rem 1rem",
+    fontSize: "0.875rem",
+    display: "flex",
+    alignItems: "center"
+  }, children: [
+    /* @__PURE__ */ jsx3("span", { style: { marginRight: "0.5rem" }, children: "\u{1F4BB}" }),
+    /* @__PURE__ */ jsxs3("span", { children: [
+      "\u4EE3\u7801\u6267\u884C (",
+      language,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx3("span", { style: {
+      marginLeft: "auto",
+      fontSize: "0.75rem",
+      color: status === "success" ? "#10b981" : status === "error" ? "#ef4444" : "#f59e0b"
+    }, children: status === "success" ? "\u2705 \u6210\u529F" : status === "error" ? "\u274C \u9519\u8BEF" : "\u23F3 \u8FD0\u884C\u4E2D" })
+  ] }),
+  code && /* @__PURE__ */ jsx3("div", { style: { padding: "1rem" }, children: /* @__PURE__ */ jsx3("pre", { style: {
+    background: "#1e293b",
+    color: "#e2e8f0",
+    padding: "1rem",
+    borderRadius: "0.5rem",
+    fontSize: "0.875rem",
+    overflow: "auto",
+    margin: "0 0 1rem 0"
+  }, children: code }) }),
+  output && /* @__PURE__ */ jsxs3("div", { style: { padding: "0 1rem 1rem" }, children: [
+    /* @__PURE__ */ jsx3("h4", { style: { margin: "0 0 0.5rem 0", fontSize: "0.875rem", color: "#64748b" }, children: "\u8F93\u51FA:" }),
+    /* @__PURE__ */ jsx3("pre", { style: {
+      background: status === "error" ? "#fef2f2" : "#f0f9ff",
+      color: status === "error" ? "#dc2626" : "#0f172a",
+      padding: "1rem",
+      borderRadius: "0.5rem",
+      fontSize: "0.875rem",
+      overflow: "auto",
+      margin: 0,
+      border: `1px solid ${status === "error" ? "#fecaca" : "#e0f2fe"}`
+    }, children: output })
+  ] })
+] });
+
+// src/components/MessageBubble/MessageBubble.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ReasoningDisplay = ({ reasoning, step }) => /* @__PURE__ */ jsxs4(
+  Paper,
+  {
+    p: "sm",
+    withBorder: true,
+    style: {
+      backgroundColor: "var(--mantine-color-yellow-0)",
+      borderColor: "var(--mantine-color-yellow-2)",
+      borderLeft: "3px solid var(--mantine-color-yellow-4)"
+    },
+    children: [
+      /* @__PURE__ */ jsxs4(Text, { size: "xs", fw: 500, c: "var(--mantine-color-yellow-8)", mb: 4, children: [
+        "\u{1F4AD} ",
+        step ? `Step ${step}:` : "Reasoning:"
+      ] }),
+      /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-7)", style: { lineHeight: 1.3 }, children: reasoning })
+    ]
+  }
+);
+var FileDisplay = ({ file }) => {
+  if (!file) return null;
+  return /* @__PURE__ */ jsx4(
+    Paper,
+    {
+      p: "sm",
+      withBorder: true,
+      style: {
+        backgroundColor: "var(--mantine-color-gray-0)",
+        borderColor: "var(--mantine-color-gray-3)"
+      },
+      children: /* @__PURE__ */ jsxs4(Group, { gap: "xs", align: "center", children: [
+        /* @__PURE__ */ jsx4(
+          Box,
+          {
+            w: 24,
+            h: 24,
+            bg: "var(--mantine-color-gray-1)",
+            style: {
+              borderRadius: "4px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "12px"
+            },
+            children: "\u{1F4CE}"
+          }
+        ),
+        /* @__PURE__ */ jsxs4(Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx4(Text, { size: "xs", fw: 500, c: "var(--mantine-color-gray-8)", children: file.name || "File" }),
+          file.size && /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: [
+            Math.round(file.size / 1024),
+            "KB"
+          ] }),
+          file.url && /* @__PURE__ */ jsx4(
+            Text,
+            {
+              size: "xs",
+              component: "a",
+              href: file.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              c: "var(--mantine-color-blue-6)",
+              td: "none",
+              style: { cursor: "pointer" },
+              children: "View File"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+function MessageBubble({
+  message,
+  showAvatar = false,
+  // 不再使用头像
+  showTimestamp = true,
+  onToolResult,
+  enableReasoning = true,
+  enableGenerativeUI = true,
+  showReasoningByDefault = false
+}) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsxs4(Stack, { gap: "xs", mb: "md", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs4(
+      Group,
+      {
+        gap: "xs",
+        align: "center",
+        justify: isUser ? "flex-end" : "flex-start",
+        children: [
+          /* @__PURE__ */ jsx4(
+            Badge,
+            {
+              variant: "light",
+              color: isUser ? "blue" : "gray",
+              size: "xs",
+              radius: "sm",
+              children: isUser ? "You" : "AI"
+            }
+          ),
+          showTimestamp && /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-5)", children: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      Box,
+      {
+        style: {
+          width: "100%",
+          display: "flex",
+          justifyContent: isUser ? "flex-end" : "flex-start"
+        },
+        children: /* @__PURE__ */ jsx4(
+          Box,
+          {
+            style: {
+              maxWidth: "100%",
+              width: isUser ? "fit-content" : "100%"
+            },
+            children: message.parts.map((part, index) => {
+              if (part.type === "text") {
+                return /* @__PURE__ */ jsx4(
+                  Text,
+                  {
+                    size: "sm",
+                    style: {
+                      lineHeight: 1.5,
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
+                      textAlign: isUser ? "right" : "left"
+                    },
+                    c: "var(--mantine-color-text)",
+                    children: part.text
+                  },
+                  index
+                );
+              }
+              if (part.type === "file") {
+                return /* @__PURE__ */ jsx4(FileDisplay, { file: part }, index);
+              }
+              if (part.type === "data") {
+                if (part.data?.type === "reasoning" && enableReasoning) {
+                  return /* @__PURE__ */ jsx4(
+                    ReasoningDisplay,
+                    {
+                      reasoning: part.data.content,
+                      step: part.data.step
+                    },
+                    index
+                  );
+                }
+                return null;
+              }
+              if (part.type === "tool-getWeather") {
+                switch (part.state) {
+                  case "input-streaming":
+                    return /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: "Preparing weather request..." }, index);
+                  case "input-available":
+                    return /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: [
+                      "Getting weather for ",
+                      part.input?.location,
+                      "..."
+                    ] }, index);
+                  case "output-available": {
+                    if (onToolResult) {
+                      onToolResult({
+                        toolName: "getWeather",
+                        input: part.input,
+                        output: part.output,
+                        state: part.state
+                      });
+                    }
+                    const rawData = part.output.data || part.output;
+                    const weatherData = {
+                      ...rawData,
+                      weather: rawData.condition || rawData.weather
+                    };
+                    return /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(WeatherComponent, { ...weatherData }) }, index);
+                  }
+                  case "output-error":
+                    return /* @__PURE__ */ jsx4(Paper, { p: "sm", withBorder: true, style: {
+                      backgroundColor: "var(--mantine-color-red-0)",
+                      borderColor: "var(--mantine-color-red-2)",
+                      borderLeft: "3px solid var(--mantine-color-red-4)"
+                    }, children: /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-red-8)", children: [
+                      "\u274C Weather Error: ",
+                      part.errorText
+                    ] }) }, index);
+                  default:
+                    return null;
+                }
+              }
+              if (part.type === "tool-getLocation") {
+                switch (part.state) {
+                  case "input-streaming":
+                    return /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: "Preparing location request..." }, index);
+                  case "input-available":
+                    return /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: [
+                      "Getting location for ",
+                      part.input?.city,
+                      "..."
+                    ] }, index);
+                  case "output-available": {
+                    if (onToolResult) {
+                      onToolResult({
+                        toolName: "getLocation",
+                        input: part.input,
+                        output: part.output,
+                        state: part.state
+                      });
+                    }
+                    const locationData = part.output.data || part.output;
+                    return /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(LocationComponent, { ...locationData }) }, index);
+                  }
+                  case "output-error":
+                    return /* @__PURE__ */ jsx4(Paper, { p: "sm", withBorder: true, style: {
+                      backgroundColor: "var(--mantine-color-red-0)",
+                      borderColor: "var(--mantine-color-red-2)",
+                      borderLeft: "3px solid var(--mantine-color-red-4)"
+                    }, children: /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-red-8)", children: [
+                      "\u274C Location Error: ",
+                      part.errorText
+                    ] }) }, index);
+                  default:
+                    return null;
+                }
+              }
+              if (part.type === "tool-displayWeather") {
+                switch (part.state) {
+                  case "input-streaming":
+                    return /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: "Preparing weather display..." }, index);
+                  case "input-available":
+                    return /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: [
+                      "Loading weather display for ",
+                      part.input?.location,
+                      "..."
+                    ] }, index);
+                  case "output-available":
+                    return /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(WeatherComponent, { ...part.output }) }, index);
+                  case "output-error":
+                    return /* @__PURE__ */ jsx4(Paper, { p: "sm", withBorder: true, style: {
+                      backgroundColor: "var(--mantine-color-red-0)",
+                      borderColor: "var(--mantine-color-red-2)",
+                      borderLeft: "3px solid var(--mantine-color-red-4)"
+                    }, children: /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-red-8)", children: [
+                      "\u274C Weather Display Error: ",
+                      part.errorText
+                    ] }) }, index);
+                  default:
+                    return null;
+                }
+              }
+              if (part.type === "tool-executeCode") {
+                switch (part.state) {
+                  case "input-streaming":
+                    return /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: "Preparing code execution..." }, index);
+                  case "input-available":
+                    return /* @__PURE__ */ jsx4(Text, { size: "xs", c: "var(--mantine-color-gray-6)", children: "Executing code..." }, index);
+                  case "output-available":
+                    if (onToolResult) {
+                      onToolResult({
+                        toolName: "executeCode",
+                        input: part.input,
+                        output: part.output,
+                        state: part.state
+                      });
+                    }
+                    return /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(CodeExecutionComponent, { ...part.output }) }, index);
+                  case "output-error":
+                    return /* @__PURE__ */ jsx4(Paper, { p: "sm", withBorder: true, style: {
+                      backgroundColor: "var(--mantine-color-red-0)",
+                      borderColor: "var(--mantine-color-red-2)",
+                      borderLeft: "3px solid var(--mantine-color-red-4)"
+                    }, children: /* @__PURE__ */ jsxs4(Text, { size: "xs", c: "var(--mantine-color-red-8)", children: [
+                      "\u274C Code Execution Error: ",
+                      part.errorText
+                    ] }) }, index);
+                  default:
+                    return null;
+                }
+              }
+              if (part.type === "dynamic-tool") {
+                return /* @__PURE__ */ jsx4(
+                  DynamicToolRenderer,
+                  {
+                    toolName: part.toolName,
+                    input: part.input,
+                    output: part.output,
+                    state: part.state
+                  },
+                  index
+                );
+              }
+              if (part.type === "tool-result") {
+                return /* @__PURE__ */ jsxs4(Paper, { p: "sm", withBorder: true, style: {
+                  backgroundColor: "var(--mantine-color-blue-0)",
+                  borderColor: "var(--mantine-color-blue-2)",
+                  borderLeft: "3px solid var(--mantine-color-blue-4)"
+                }, children: [
+                  /* @__PURE__ */ jsx4(Text, { size: "xs", fw: 500, c: "var(--mantine-color-blue-8)", mb: 4, children: "\u{1F527} Tool Result" }),
+                  /* @__PURE__ */ jsx4(Text, { component: "pre", size: "xs", style: {
+                    fontFamily: "monospace",
+                    margin: 0,
+                    lineHeight: 1.3,
+                    overflow: "auto"
+                  }, c: "var(--mantine-color-gray-7)", children: JSON.stringify(part.result, null, 2) })
+                ] }, index);
+              }
+              return null;
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/utils/theme.ts
+var aiThemeColors = {
+  // 主要文本颜色 - 使用 Mantine CSS 变量
+  primaryText: "var(--mantine-color-text)",
+  // 主要文本颜色，自动适配主题
+  secondaryText: "var(--mantine-color-dimmed)",
+  // 次要文本颜色
+  headingText: "var(--mantine-color-text)",
+  // 标题文本颜色
+  // 语义化文本颜色 - 优化深色模式
+  mutedText: "var(--mantine-color-dimmed)",
+  // 静音文本，使用dimmed确保深色模式协调
+  placeholderText: "var(--mantine-color-placeholder)",
+  // 占位符文本
+  // 状态颜色 - 使用 Mantine 预定义颜色
+  success: "var(--mantine-color-green-filled)",
+  warning: "var(--mantine-color-yellow-filled)",
+  error: "var(--mantine-color-red-filled)",
+  info: "var(--mantine-color-blue-filled)",
+  // 浅色状态颜色（用于背景）- 深色模式自动适配
+  successLight: "var(--mantine-color-green-light)",
+  warningLight: "var(--mantine-color-yellow-light)",
+  errorLight: "var(--mantine-color-red-light)",
+  infoLight: "var(--mantine-color-blue-light)",
+  // 背景颜色 - 深色模式自动切换
+  bodyBackground: "var(--mantine-color-body)",
+  // 主体背景
+  cardBackground: "var(--mantine-color-default)",
+  // 卡片背景，使用default确保深色模式协调
+  paperBackground: "var(--mantine-color-default)",
+  // 纸张背景
+  codeBackground: "var(--mantine-color-default)",
+  // 代码背景，深色模式下自动变深
+  // 边框和分隔线 - 深色模式自动适配
+  border: "var(--mantine-color-default-border)",
+  // 默认边框
+  borderLight: "var(--mantine-color-default-border)",
+  // 统一使用default-border
+  divider: "var(--mantine-color-default-border)",
+  // 分隔线
+  // 交互状态 - 深色模式友好
+  hoverBackground: "var(--mantine-color-default-hover)",
+  // 悬浮背景，深色模式自动调整
+  selectedBackground: "var(--mantine-color-blue-light)",
+  // 选中背景 - 使用蓝色，深色模式下更清晰
+  selectedText: "var(--mantine-color-blue-filled)",
+  // 选中文本 - 使用蓝色，深色模式下更清晰
+  // 输入组件 - 深色模式协调
+  inputBackground: "var(--mantine-color-default)",
+  // 输入框背景
+  inputBorder: "var(--mantine-color-default-border)",
+  // 输入框边框
+  inputPlaceholder: "var(--mantine-color-placeholder)"
+  // 输入框占位符
+};
+function getThemedTextProps(variant = "primary") {
+  switch (variant) {
+    case "primary":
+      return { c: aiThemeColors.primaryText };
+    case "secondary":
+      return { c: aiThemeColors.secondaryText };
+    case "heading":
+      return { c: aiThemeColors.headingText, fw: 600 };
+    case "muted":
+      return { c: "var(--mantine-color-gray-6)" };
+    // 深色模式下更清晰
+    case "subtitle":
+      return { c: "var(--mantine-color-gray-7)", fw: 500 };
+    case "caption":
+      return { c: "var(--mantine-color-gray-6)" };
+    case "success":
+      return { c: aiThemeColors.success };
+    case "warning":
+      return { c: aiThemeColors.warning };
+    case "error":
+      return { c: aiThemeColors.error };
+    case "info":
+      return { c: aiThemeColors.info };
+    default:
+      return { c: aiThemeColors.primaryText };
+  }
+}
+var componentStyles = {
+  // 共享基础样式
+  cardBackground: aiThemeColors.cardBackground,
+  // 聊天对话框样式 - 深色模式优化
+  chatDialog: {
+    titleColor: aiThemeColors.headingText,
+    descriptionColor: aiThemeColors.secondaryText,
+    cardBackground: aiThemeColors.cardBackground,
+    border: aiThemeColors.border
+  },
+  // 消息气泡样式
+  messageBubble: {
+    userBackground: "var(--mantine-color-blue-filled)",
+    userText: "var(--mantine-color-white)",
+    aiBackground: aiThemeColors.cardBackground,
+    aiText: aiThemeColors.primaryText,
+    border: aiThemeColors.border
+  },
+  // 文件查看器样式
+  fileViewer: {
+    background: aiThemeColors.cardBackground,
+    border: aiThemeColors.borderLight,
+    text: aiThemeColors.primaryText
+  },
+  // 代码背景
+  codeBackground: aiThemeColors.codeBackground,
+  // 工具栏样式
+  toolbar: {
+    background: aiThemeColors.bodyBackground,
+    border: aiThemeColors.border,
+    text: aiThemeColors.primaryText
+  },
+  // 状态样式配置 - 深色模式完美适配
+  status: {
+    error: {
+      background: "var(--mantine-color-red-light)",
+      border: "var(--mantine-color-red-outline)",
+      text: "var(--mantine-color-red-light-color)",
+      textSecondary: "var(--mantine-color-red-light-color)",
+      textLight: "var(--mantine-color-red-light-color)",
+      icon: "var(--mantine-color-red-light-color)",
+      progressColor: "red"
+    },
+    warning: {
+      background: "var(--mantine-color-yellow-light)",
+      border: "var(--mantine-color-yellow-outline)",
+      text: "var(--mantine-color-yellow-light-color)",
+      textSecondary: "var(--mantine-color-yellow-light-color)",
+      textLight: "var(--mantine-color-yellow-light-color)",
+      icon: "var(--mantine-color-yellow-light-color)",
+      progressColor: "yellow"
+    },
+    success: {
+      background: "var(--mantine-color-green-light)",
+      border: "var(--mantine-color-green-outline)",
+      text: "var(--mantine-color-green-light-color)",
+      textSecondary: "var(--mantine-color-green-light-color)",
+      textLight: "var(--mantine-color-green-light-color)",
+      icon: "var(--mantine-color-green-light-color)",
+      progressColor: "green"
+    },
+    info: {
+      background: "var(--mantine-color-blue-light)",
+      border: "var(--mantine-color-blue-outline)",
+      text: "var(--mantine-color-blue-light-color)",
+      textSecondary: "var(--mantine-color-blue-light-color)",
+      textLight: "var(--mantine-color-blue-light-color)",
+      icon: "var(--mantine-color-blue-light-color)",
+      progressColor: "blue"
+    }
+  },
+  // 文字颜色标准化系统 - 深色模式优化
+  text: {
+    // 主要文字级别
+    primary: aiThemeColors.primaryText,
+    // 主标题、重要内容
+    heading: aiThemeColors.headingText,
+    // 页面标题、section标题
+    subtitle: "var(--mantine-color-gray-7)",
+    // 副标题，清晰但次要
+    // 次要文字级别
+    secondary: aiThemeColors.secondaryText,
+    // 正文内容
+    caption: "var(--mantine-color-gray-6)",
+    // 说明文字，比dimmed更清晰
+    label: "var(--mantine-color-gray-7)",
+    // 标签文字
+    // 弱化文字级别
+    muted: "var(--mantine-color-gray-6)",
+    // 静音文字，深色模式优化
+    placeholder: aiThemeColors.placeholderText,
+    // 占位符文字
+    disabled: "var(--mantine-color-gray-5)",
+    // 禁用状态文字
+    // 状态文字
+    success: aiThemeColors.success,
+    warning: aiThemeColors.warning,
+    error: aiThemeColors.error,
+    info: aiThemeColors.info
+  }
+};
+
+// src/components/ChatDialog/ChatDialog.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatDialog({
+  chatOptions = {},
+  title = "AI Assistant",
+  description = "Chat with your AI assistant",
+  open = false,
+  onOpenChange,
+  placeholder = "Type your message here...",
+  className,
+  showHeader = true,
+  allowFileUpload = true,
+  acceptedFileTypes = ["image/*", "text/*", "application/pdf"],
+  maxFileSize = 10 * 1024 * 1024,
+  // 10MB
+  messageRenderer,
+  theme = "system",
+  // 新增的增强功能选项
+  enableReasoning = true,
+  enableGenerativeUI = true,
+  showReasoningByDefault = false
+}) {
+  const [frontendToolStatus, setFrontendToolStatus] = useState({
+    isProcessing: false,
+    currentTool: void 0,
+    processedTools: /* @__PURE__ */ new Set()
+    // 防止重复处理
+  });
+  const handleError = useCallback((err) => {
+    console.error("ChatDialog useChat error:", err);
+    let friendlyError = err;
+    const originalMessage = err.message || "Unknown occurred";
+    if (originalMessage.includes("<!DOCTYPE") || originalMessage.includes("<html>") || originalMessage.includes("<body>")) {
+      friendlyError = new Error("AI\u670D\u52A1\u8FDE\u63A5\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u670D\u52A1\u5668\u662F\u5426\u6B63\u5728\u8FD0\u884C");
+      friendlyError.name = err.name;
+    } else if (originalMessage.includes("fetch") || originalMessage.includes("NetworkError") || originalMessage.includes("Failed to fetch")) {
+      friendlyError = new Error("AI\u670D\u52A1\u8FDE\u63A5\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u7F51\u7EDC\u8FDE\u63A5");
+      friendlyError.name = err.name;
+    } else if (originalMessage.includes("404") || originalMessage.includes("Not Found")) {
+      friendlyError = new Error("AI API\u7AEF\u70B9\u672A\u627E\u5230\uFF0C\u8BF7\u786E\u4FDDAI\u670D\u52A1\u5668\u6B63\u5728\u8FD0\u884C\u5E76\u4E14\u7AEF\u70B9\u914D\u7F6E\u6B63\u786E");
+      friendlyError.name = err.name;
+    } else if (originalMessage.includes("ECONNREFUSED") || originalMessage.includes("Connection refused")) {
+      friendlyError = new Error("AI\u670D\u52A1\u5668\u8FDE\u63A5\u88AB\u62D2\u7EDD");
+      friendlyError.name = err.name;
+    }
+    chatOptions.onError?.(friendlyError);
+  }, [chatOptions]);
+  const {
+    messages,
+    status,
+    error,
+    sendMessage,
+    stop,
+    clearError,
+    resumeStream,
+    addToolResult,
+    setMessages
+  } = useChat({
+    // Use standard properties from chatOptions
+    ...chatOptions,
+    // Standard onFinish callback
+    onFinish: (options) => {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+      chatOptions.onFinish?.(options);
+    },
+    onError: handleError,
+    // Standard onToolCall - for listening only, no return value
+    onToolCall: chatOptions.onToolCall
+  });
+  useEffect(() => {
+    const handleFrontendToolCall = async (toolName, input2) => {
+      const frontendToolNames = [
+        "recordGetValues",
+        "recordSetValues",
+        "recordGetFieldInfo",
+        "recordResetForm",
+        "recordValidateForm"
+      ];
+      if (!frontendToolNames.includes(toolName)) {
+        return;
+      }
+      setFrontendToolStatus((prev) => ({
+        ...prev,
+        isProcessing: true,
+        currentTool: toolName
+      }));
+      const waitId = `frontend-${toolName}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      try {
+        if (window.__ENTITY_ENGINE_AI_BRIDGE__) {
+          const result = await window.__ENTITY_ENGINE_AI_BRIDGE__.executeViewControllerTool(
+            toolName,
+            input2 || {}
+          );
+          const finalResult = typeof result === "string" ? result : JSON.stringify(result, null, 2);
+          await fetch("/api/ee/servlet/ai/frontend-tool-result", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              waitId: `frontend-${toolName}`,
+              // 简化waitId匹配
+              result: finalResult,
+              timestamp: Date.now()
+            })
+          });
+        }
+      } catch (_error) {
+        await fetch("/api/ee/servlet/ai/frontend-tool-result", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            waitId: `frontend-${toolName}`,
+            error: error.message,
+            timestamp: Date.now()
+          })
+        });
+      } finally {
+        setFrontendToolStatus((prev) => ({
+          ...prev,
+          isProcessing: false,
+          currentTool: void 0
+        }));
+      }
+    };
+    window.__FRONTEND_TOOL_HANDLER__ = handleFrontendToolCall;
+    return () => {
+      if (window.__FRONTEND_TOOL_HANDLER__) {
+        delete window.__FRONTEND_TOOL_HANDLER__;
+      }
+    };
+  }, []);
+  const [input, setInput] = useState("");
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const inputRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, status]);
+  useEffect(() => {
+    if (open && inputRef.current) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [open]);
+  const handleFormSubmit = useCallback((e) => {
+    e.preventDefault();
+    if (!input.trim() && attachedFiles.length === 0) return;
+    if (status === "streaming") return;
+    try {
+      if (attachedFiles.length > 0) {
+        sendMessage({
+          text: input.trim(),
+          files: attachedFiles
+        });
+      } else {
+        sendMessage({
+          text: input.trim()
+        });
+      }
+      setInput("");
+      setAttachedFiles([]);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    } catch (sendError) {
+      console.error("Failed to send message:", sendError);
+    }
+  }, [input, attachedFiles, status, sendMessage]);
+  const handleFileUpload = useCallback((e) => {
+    const files = e.target.files;
+    if (!files) return;
+    const newFiles = [];
+    Array.from(files).forEach((file, index) => {
+      if (file.size > maxFileSize) {
+        return;
+      }
+      const isAccepted = acceptedFileTypes.some((type) => {
+        if (type.endsWith("/*")) {
+          return file.type.startsWith(type.slice(0, -1));
+        }
+        return file.type === type;
+      });
+      if (!isAccepted) {
+        return;
+      }
+      const fileUrl = URL.createObjectURL(file);
+      newFiles.push({
+        type: "file",
+        filename: file.name,
+        mediaType: file.type,
+        url: fileUrl
+      });
+    });
+    setAttachedFiles((prev) => [...prev, ...newFiles]);
+  }, [maxFileSize, acceptedFileTypes]);
+  const removeFile = useCallback((index) => {
+    setAttachedFiles((prev) => {
+      const newFiles = prev.slice();
+      URL.revokeObjectURL(newFiles[index].url);
+      newFiles.splice(index, 1);
+      return newFiles;
+    });
+  }, []);
+  const handleKeyPress = useCallback((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleFormSubmit(e);
+    }
+  }, [handleFormSubmit]);
+  const isLoading = status === "streaming" || status === "submitted";
+  const canSend = !isLoading && (input.trim() || attachedFiles.length > 0);
+  return /* @__PURE__ */ jsxs5(
+    Box2,
+    {
+      style: {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        zIndex: "auto",
+        minHeight: 0,
+        overflow: "hidden",
+        background: `
+          radial-gradient(
+            circle at 85% 85%,
+            rgba(34, 139, 230, 0.18) 0%,
+            rgba(34, 139, 230, 0.09) 25%,
+            rgba(34, 139, 230, 0.03) 50%,
+            rgba(255, 255, 255, 1) 75%
+          )
+        `
+      },
+      children: [
+        showHeader && /* @__PURE__ */ jsx5(
+          Paper2,
+          {
+            p: "lg",
+            bg: "white",
+            radius: 0,
+            style: {
+              position: "sticky",
+              top: 0,
+              zIndex: 100
+            },
+            children: /* @__PURE__ */ jsxs5(Group2, { justify: "space-between", align: "center", style: { width: "100%" }, children: [
+              /* @__PURE__ */ jsxs5(Group2, { gap: "md", style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx5(
+                  Box2,
+                  {
+                    style: {
+                      width: "40px",
+                      height: "40px",
+                      borderRadius: "8px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      boxShadow: "0 2px 8px rgba(25, 118, 210, 0.3)"
+                    },
+                    children: /* @__PURE__ */ jsx5(SparklesIcon, { size: 24, color: "#1976d2" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx5(Title, { order: 4, c: "var(--mantine-color-gray-9)", mb: 2, children: title }),
+                  /* @__PURE__ */ jsxs5(Group2, { gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ jsx5(
+                      Badge2,
+                      {
+                        size: "xs",
+                        color: error ? "red" : "green",
+                        variant: "light",
+                        leftSection: /* @__PURE__ */ jsx5(Box2, { w: 6, h: 6, bg: error ? "red" : "green", style: { borderRadius: "50%" } }),
+                        children: error ? "Offline" : "Online"
+                      }
+                    ),
+                    description && /* @__PURE__ */ jsx5(Text2, { size: "xs", c: "var(--mantine-color-gray-6)", children: description })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx5(
+                ActionIcon,
+                {
+                  variant: "subtle",
+                  color: "gray",
+                  size: "lg",
+                  onClick: () => onOpenChange?.(false),
+                  "aria-label": "\u5173\u95ED\u5BF9\u8BDD\u6846",
+                  style: { flexShrink: 0 },
+                  children: /* @__PURE__ */ jsx5(X, { size: 18 })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx5(ScrollArea, { style: { flex: 1 }, p: "xl", children: /* @__PURE__ */ jsxs5(Stack2, { gap: "md", maw: "none", w: "100%", children: [
+          /* @__PURE__ */ jsx5(AnimatePresence, { mode: "popLayout", children: messages.map((message, index) => /* @__PURE__ */ jsx5(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -20 },
+              transition: { duration: 0.3, delay: index * 0.1 },
+              children: messageRenderer ? React.createElement(messageRenderer, { message }) : /* @__PURE__ */ jsx5(
+                MessageBubble,
+                {
+                  message,
+                  showAvatar: true,
+                  showTimestamp: true,
+                  enableReasoning,
+                  enableGenerativeUI,
+                  showReasoningByDefault
+                }
+              )
+            },
+            message.id
+          )) }),
+          isLoading && /* @__PURE__ */ jsx5(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              children: /* @__PURE__ */ jsxs5(Group2, { gap: "sm", justify: "space-between", children: [
+                /* @__PURE__ */ jsxs5(Group2, { gap: "sm", children: [
+                  /* @__PURE__ */ jsxs5(Group2, { gap: "xs", children: [
+                    /* @__PURE__ */ jsx5(Box2, { w: 8, h: 8, bg: "gray.4", style: { borderRadius: "50%", animation: "bounce 1s infinite" } }),
+                    /* @__PURE__ */ jsx5(Box2, { w: 8, h: 8, bg: "gray.4", style: { borderRadius: "50%", animation: "bounce 1s infinite 0.1s" } }),
+                    /* @__PURE__ */ jsx5(Box2, { w: 8, h: 8, bg: "gray.4", style: { borderRadius: "50%", animation: "bounce 1s infinite 0.2s" } })
+                  ] }),
+                  /* @__PURE__ */ jsx5(Text2, { size: "sm", ...getThemedTextProps("muted"), children: "AI is thinking..." })
+                ] }),
+                /* @__PURE__ */ jsx5(
+                  ActionIcon,
+                  {
+                    variant: "subtle",
+                    color: "red",
+                    onClick: stop,
+                    size: "sm",
+                    children: /* @__PURE__ */ jsx5(Square, { size: 16 })
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
+        ] }) }),
+        error && /* @__PURE__ */ jsx5(
+          motion.div,
+          {
+            initial: { opacity: 0, height: 0 },
+            animate: { opacity: 1, height: "auto" },
+            style: { margin: "1rem" },
+            children: /* @__PURE__ */ jsx5(
+              Paper2,
+              {
+                p: "md",
+                style: {
+                  backgroundColor: componentStyles.status.error.background,
+                  borderLeft: `4px solid ${componentStyles.status.error.border}`
+                },
+                children: /* @__PURE__ */ jsxs5(Group2, { align: "flex-start", gap: "sm", children: [
+                  /* @__PURE__ */ jsx5(AlertCircle, { size: 20, color: componentStyles.status.error.text }),
+                  /* @__PURE__ */ jsxs5(Box2, { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ jsx5(Text2, { size: "sm", fw: 500, c: componentStyles.status.error.text, children: "Connection Error" }),
+                    /* @__PURE__ */ jsx5(Text2, { size: "sm", c: componentStyles.status.error.text, mt: "xs", children: error.message }),
+                    /* @__PURE__ */ jsxs5(Group2, { gap: "sm", mt: "md", children: [
+                      /* @__PURE__ */ jsx5(
+                        Button,
+                        {
+                          size: "xs",
+                          variant: "light",
+                          color: "red",
+                          onClick: () => clearError(),
+                          children: "Dismiss"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5(
+                        Button,
+                        {
+                          size: "xs",
+                          variant: "light",
+                          color: "blue",
+                          onClick: () => resumeStream(),
+                          children: "Retry Connection"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              }
+            )
+          }
+        ),
+        attachedFiles.length > 0 && /* @__PURE__ */ jsxs5(
+          Paper2,
+          {
+            p: "lg",
+            shadow: "xs",
+            style: {
+              borderTop: "1px solid var(--mantine-color-gray-2)",
+              backgroundColor: "var(--mantine-color-gray-0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx5(Text2, { size: "sm", fw: 500, c: "var(--mantine-color-gray-7)", mb: "md", children: "\u{1F4CE} \u9644\u4EF6\u9884\u89C8" }),
+              /* @__PURE__ */ jsx5(Group2, { gap: "md", wrap: "wrap", children: attachedFiles.map((file, index) => /* @__PURE__ */ jsx5(
+                Paper2,
+                {
+                  p: "sm",
+                  shadow: "xs",
+                  withBorder: true,
+                  style: {
+                    maxWidth: "280px",
+                    backgroundColor: "white",
+                    position: "relative"
+                  },
+                  children: /* @__PURE__ */ jsxs5(Group2, { gap: "sm", align: "center", children: [
+                    /* @__PURE__ */ jsx5(
+                      Box2,
+                      {
+                        w: 32,
+                        h: 32,
+                        bg: "var(--mantine-color-blue-light)",
+                        style: {
+                          borderRadius: "6px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        children: /* @__PURE__ */ jsx5(Paperclip, { size: 16, color: "var(--mantine-color-blue-6)" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5(Box2, { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx5(Text2, { size: "sm", fw: 500, truncate: true, c: "var(--mantine-color-gray-8)", children: file.filename }),
+                      /* @__PURE__ */ jsx5(Text2, { size: "xs", c: "var(--mantine-color-gray-6)", children: file.mediaType })
+                    ] }),
+                    /* @__PURE__ */ jsx5(
+                      ActionIcon,
+                      {
+                        variant: "subtle",
+                        color: "red",
+                        size: "sm",
+                        onClick: () => removeFile(index),
+                        style: { flexShrink: 0 },
+                        children: /* @__PURE__ */ jsx5(X, { size: 14 })
+                      }
+                    )
+                  ] })
+                },
+                `${file.filename}-${index}`
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Paper2,
+          {
+            p: "lg",
+            shadow: "md",
+            style: {
+              borderTop: "1px solid var(--mantine-color-gray-2)",
+              backgroundColor: "white",
+              position: "sticky",
+              bottom: 0,
+              zIndex: 50
+            },
+            children: /* @__PURE__ */ jsx5("form", { onSubmit: handleFormSubmit, children: /* @__PURE__ */ jsxs5(Stack2, { gap: "sm", children: [
+              /* @__PURE__ */ jsxs5(Group2, { align: "center", gap: "md", children: [
+                allowFileUpload && /* @__PURE__ */ jsxs5(Box2, { children: [
+                  /* @__PURE__ */ jsx5(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      multiple: true,
+                      accept: acceptedFileTypes.join(","),
+                      onChange: handleFileUpload,
+                      style: { display: "none" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx5(
+                    ActionIcon,
+                    {
+                      variant: "light",
+                      color: "gray",
+                      size: "lg",
+                      onClick: () => fileInputRef.current?.click(),
+                      disabled: isLoading,
+                      style: {
+                        border: "2px solid var(--mantine-color-gray-3)",
+                        backgroundColor: "var(--mantine-color-gray-0)",
+                        transition: "all 0.2s ease"
+                      },
+                      children: /* @__PURE__ */ jsx5(Paperclip, { size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx5(Box2, { style: { flex: 1 }, children: /* @__PURE__ */ jsx5(
+                  Textarea,
+                  {
+                    ref: inputRef,
+                    value: input,
+                    onChange: (e) => setInput(e.target.value),
+                    onKeyDown: handleKeyPress,
+                    placeholder,
+                    disabled: isLoading,
+                    minRows: 1,
+                    maxRows: 4,
+                    autosize: true,
+                    variant: "filled",
+                    styles: {
+                      input: {
+                        backgroundColor: "var(--mantine-color-gray-0)",
+                        border: "2px solid var(--mantine-color-gray-2)",
+                        borderRadius: "12px",
+                        padding: "12px 16px",
+                        fontSize: "14px",
+                        lineHeight: "1.4",
+                        transition: "all 0.2s ease",
+                        "&:focus": {
+                          backgroundColor: "white",
+                          borderColor: "var(--mantine-color-blue-4)",
+                          boxShadow: "0 0 0 3px var(--mantine-color-blue-1)"
+                        },
+                        "&::placeholder": {
+                          color: "var(--mantine-color-gray-5)"
+                        }
+                      }
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx5(
+                  ActionIcon,
+                  {
+                    type: "submit",
+                    disabled: !canSend,
+                    size: "lg",
+                    variant: "filled",
+                    style: {
+                      background: canSend ? "linear-gradient(45deg, var(--mantine-color-blue-6), var(--mantine-color-blue-5))" : "var(--mantine-color-gray-4)",
+                      color: "white",
+                      border: "none",
+                      borderRadius: "12px",
+                      boxShadow: canSend ? "0 4px 12px var(--mantine-color-blue-2)" : "none",
+                      transform: canSend ? "scale(1)" : "scale(0.95)",
+                      transition: "all 0.2s ease",
+                      cursor: canSend ? "pointer" : "not-allowed",
+                      "&:hover": canSend ? {
+                        transform: "scale(1.05)",
+                        boxShadow: "0 6px 16px var(--mantine-color-blue-3)"
+                      } : {}
+                    },
+                    children: /* @__PURE__ */ jsx5(Send, { size: 20 })
+                  }
+                )
+              ] }),
+              input.length > 0 && /* @__PURE__ */ jsxs5(Group2, { justify: "space-between", align: "center", children: [
+                /* @__PURE__ */ jsx5(Text2, { size: "xs", c: "var(--mantine-color-gray-6)", children: isLoading ? "AI\u6B63\u5728\u56DE\u590D..." : "Enter\u53D1\u9001\uFF0CShift+Enter\u6362\u884C" }),
+                /* @__PURE__ */ jsxs5(Text2, { size: "xs", c: "var(--mantine-color-gray-5)", children: [
+                  input.length,
+                  "/2000"
+                ] })
+              ] })
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ChatDialog
+};
+//# sourceMappingURL=chunk-SXPA6SSD.mjs.map