@ash-cloud/ash-ui 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -569,6 +569,61 @@ function LazyMarkdown({ children, fallback, components, className }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { components: markdownComponents, children }) });
 }
+function Mention({ name, color, url }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "ash-mention",
+        "inline-flex items-center",
+        "px-1.5 py-0.5 rounded",
+        "text-[var(--ash-font-size-sm,12px)]",
+        "font-medium"
+      ),
+      style: {
+        backgroundColor: color ? `${color}20` : "var(--ash-mention-bg,rgba(255,255,255,0.1))",
+        color: color || "var(--ash-mention-text,inherit)"
+      },
+      children: [
+        url && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: url,
+            alt: "",
+            className: "w-4 h-4 rounded mr-1 object-cover"
+          }
+        ),
+        "@",
+        name
+      ]
+    }
+  );
+}
+function RichContentRenderer({
+  content,
+  components,
+  className
+}) {
+  const MentionComponent = components?.mention || Mention;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ash-rich-content", className), children: content.map((segment, index) => {
+    if (segment.type === "text") {
+      return /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { components, children: segment.content }, index);
+    }
+    if (segment.type === "mention") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MentionComponent,
+        {
+          name: segment.name,
+          color: segment.color,
+          url: segment.url,
+          data: segment.data
+        },
+        index
+      );
+    }
+    return null;
+  }) });
+}
 var MessageContext = react.createContext(null);
 function useMessage() {
   const context = react.useContext(MessageContext);
@@ -681,10 +736,26 @@ function MessageContent({ children, className }) {
 }
 function MessageResponse({
   content,
+  richContent,
   isStreaming,
   className,
   components
 }) {
+  if (richContent && richContent.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "ash-message-response",
+          "font-[var(--ash-font-size-base,13px)]",
+          "leading-relaxed",
+          isStreaming && "animate-pulse",
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(RichContentRenderer, { content: richContent, components })
+      }
+    );
+  }
   if (!content) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -760,6 +831,7 @@ function MessageTimestamp({ timestamp, className }) {
 }
 function StatusIndicator({ status, size = "sm", className }) {
   const sizeClasses = {
+    xs: "w-1.5 h-1.5",
     sm: "w-2 h-2",
     md: "w-3 h-3",
     lg: "w-4 h-4"
@@ -1138,14 +1210,16 @@ function Tool({
   toolInvocation,
   children,
   className,
-  defaultExpanded = false
+  defaultExpanded = false,
+  variant = "default"
 }) {
   const [isExpanded, setIsExpanded] = react.useState(defaultExpanded);
   const toggleExpanded = () => setIsExpanded((prev) => !prev);
   const contextValue = {
     toolInvocation,
     isExpanded,
-    toggleExpanded
+    toggleExpanded,
+    variant
   };
   const status = toolInvocation.state === "result" ? "success" : "pending";
   const isErrorResult = Boolean(
@@ -1181,25 +1255,28 @@ function ToolHeader({
   icon,
   showToggle = true
 }) {
-  const { toolInvocation, isExpanded, toggleExpanded } = useTool();
+  const { toolInvocation, isExpanded, toggleExpanded, variant } = useTool();
+  const isCompact = variant === "compact";
   const status = toolInvocation.state === "result" ? "success" : "pending";
   const formattedName = formatToolName(toolInvocation.toolName);
   const toolIcon = icon;
+  const canToggle = showToggle && !isCompact;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      onClick: showToggle ? toggleExpanded : void 0,
+      onClick: canToggle ? toggleExpanded : void 0,
       className: cn(
         "ash-tool-header",
         "w-full flex items-center gap-2",
-        "px-3 py-2",
+        isCompact ? "px-2 py-1.5" : "px-3 py-2",
         "text-left",
-        showToggle && "cursor-pointer hover:bg-white/[0.03] transition-colors",
+        canToggle && "cursor-pointer hover:bg-white/[0.03] transition-colors",
+        !canToggle && "cursor-default",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size: "sm" }),
-        toolIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: toolIcon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size: isCompact ? "xs" : "sm" }),
+        toolIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: toolIcon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: isCompact ? "w-3 h-3" : "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
           /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
           /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
         ] }) }),
@@ -1208,7 +1285,7 @@ function ToolHeader({
           {
             className: cn(
               "flex-1 font-medium",
-              "text-[var(--ash-font-size-sm,12px)]",
+              isCompact ? "text-[var(--ash-font-size-xs,10px)]" : "text-[var(--ash-font-size-sm,12px)]",
               "text-[var(--ash-text-primary,rgba(255,255,255,0.9))]"
             ),
             children: formattedName
@@ -1218,14 +1295,14 @@ function ToolHeader({
           "span",
           {
             className: cn(
-              "text-[var(--ash-font-size-xs,10px)]",
+              isCompact ? "text-[9px]" : "text-[var(--ash-font-size-xs,10px)]",
               "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
               "truncate max-w-[200px]"
             ),
             children: Object.keys(toolInvocation.args).length > 0 && `(${Object.keys(toolInvocation.args).join(", ")})`
           }
         ),
-        showToggle && /* @__PURE__ */ jsxRuntime.jsx(
+        canToggle && /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
             className: cn(
@@ -1321,24 +1398,28 @@ function ToolOutput({ className, maxHeight = 300 }) {
 function ToolList({
   toolInvocations,
   className,
-  defaultExpanded = false
+  defaultExpanded = false,
+  variant = "default"
 }) {
   if (!toolInvocations || toolInvocations.length === 0) {
     return null;
   }
+  const isCompact = variant === "compact";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         "ash-tool-list",
-        "flex flex-col gap-2",
+        "flex flex-col",
+        isCompact ? "gap-1" : "gap-2",
         className
       ),
       children: toolInvocations.map((inv) => /* @__PURE__ */ jsxRuntime.jsx(
         Tool,
         {
           toolInvocation: inv,
-          defaultExpanded
+          defaultExpanded,
+          variant
         },
         inv.toolCallId
       ))
@@ -3536,6 +3617,7 @@ function useAgentChat(options) {
   const eventCountRef = react.useRef(0);
   const sessionIdRef = react.useRef(sessionId);
   const streamingEntriesRef = react.useRef([]);
+  const lastSequenceRef = react.useRef(0);
   react.useEffect(() => {
     sessionIdRef.current = sessionId;
   }, [sessionId]);
@@ -3560,6 +3642,12 @@ function useAgentChat(options) {
     setStreamingEntries([]);
   }, []);
   const processEvent = react.useCallback((event, streamEntries) => {
+    if (event.id) {
+      const seq = parseInt(event.id, 10);
+      if (!isNaN(seq)) {
+        lastSequenceRef.current = seq;
+      }
+    }
     const newEntries = [...streamEntries];
     switch (event.type) {
       case "session_start":
@@ -3896,7 +3984,8 @@ function useAgentChat(options) {
     send,
     stop,
     clear,
-    setEntries
+    setEntries,
+    lastSequence: lastSequenceRef.current
   };
 }
 function generateId() {
@@ -4266,6 +4355,7 @@ exports.LoaderIcon = LoaderIcon;
 exports.LoadingDots = LoadingDots;
 exports.LoadingSpinner = LoadingSpinner;
 exports.LogsPanel = LogsPanel;
+exports.Mention = Mention;
 exports.Message = Message;
 exports.MessageAction = MessageAction;
 exports.MessageActions = MessageActions;
@@ -4283,6 +4373,7 @@ exports.PlugIcon = PlugIcon;
 exports.Reasoning = Reasoning;
 exports.ReasoningContent = ReasoningContent;
 exports.ReasoningTrigger = ReasoningTrigger;
+exports.RichContentRenderer = RichContentRenderer;
 exports.SearchIcon = SearchIcon;
 exports.SendIcon = SendIcon;
 exports.Shimmer = Shimmer;