@ash-cloud/ash-ui 0.0.8 → 0.1.0

package/dist/index.cjs

@@ -1315,6 +1315,56 @@ function LazyMarkdown({ children, fallback, className }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { children }) });
 }
+function DefaultMentionBadge({ segment }) {
+  const bgColor = segment.color ? `${segment.color}20` : "rgba(34, 197, 94, 0.2)";
+  const textColor = segment.color || "#22c55e";
+  const borderColor = segment.color ? `${segment.color}40` : "rgba(34, 197, 94, 0.4)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium mx-0.5",
+      style: {
+        backgroundColor: bgColor,
+        color: textColor,
+        border: `1px solid ${borderColor}`
+      },
+      title: segment.id ? `ID: ${segment.id}` : void 0,
+      children: [
+        "@",
+        segment.name
+      ]
+    }
+  );
+}
+function RichContentRenderer({
+  content,
+  renderers,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rich-content", className), children: content.map((segment, index) => {
+    const key = `segment-${index}`;
+    switch (segment.type) {
+      case "text":
+        return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: segment.content }) }, key);
+      case "mention":
+        if (renderers?.renderMention) {
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderers.renderMention({ segment }) }, key);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(DefaultMentionBadge, { segment }, key);
+      case "component":
+        if (renderers?.renderComponent) {
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderers.renderComponent({ segment }) }, key);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs text-orange-400", children: [
+          "[component: ",
+          segment.componentType,
+          "]"
+        ] }, key);
+      default:
+        return null;
+    }
+  }) });
+}
 function OptionCards({ options, onSelect, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
     gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
@@ -1399,18 +1449,35 @@ function UserMessage({ entry, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
   ] });
 }
-function AssistantMessage({ entry, onOptionSelect, className }) {
-  const parsedOptions = parseOptionsFromContent(entry.content);
+function AssistantMessage({
+  entry,
+  onOptionSelect,
+  richContentRenderers,
+  className
+}) {
+  const parsedOptions = !entry.richContent ? parseOptionsFromContent(entry.content) : null;
   const handleOptionSelect = (option) => {
     if (onOptionSelect) {
       onOptionSelect(`Option ${option.id}: ${option.label}`);
     }
   };
+  const renderContent = (textContent) => {
+    if (entry.richContent && entry.richContent.length > 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RichContentRenderer,
+        {
+          content: entry.richContent,
+          renderers: richContentRenderers
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: textContent || entry.content });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-w-[85%]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        parsedOptions.preamble && /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: parsedOptions.preamble }),
+        parsedOptions.preamble && renderContent(parsedOptions.preamble),
         /* @__PURE__ */ jsxRuntime.jsx(
           OptionCards,
           {
@@ -1418,7 +1485,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
             onSelect: handleOptionSelect
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: entry.content }) }) }),
+      ] }) : renderContent() }) }),
       entry.timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
     ] })
   ] });
@@ -1453,12 +1520,26 @@ function ErrorMessage({ entry, className }) {
     ] }) })
   ] });
 }
-function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }) {
+function MessageEntry({
+  entry,
+  onOptionSelect,
+  defaultExpanded,
+  richContentRenderers,
+  className
+}) {
   switch (entry.entryType.type) {
     case "user_message":
       return /* @__PURE__ */ jsxRuntime.jsx(UserMessage, { entry, className });
     case "assistant_message":
-      return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { entry, onOptionSelect, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AssistantMessage,
+        {
+          entry,
+          onOptionSelect,
+          richContentRenderers,
+          className
+        }
+      );
     case "thinking":
       return /* @__PURE__ */ jsxRuntime.jsx(ThinkingMessage, { entry, className });
     case "tool_call":
@@ -2135,6 +2216,7 @@ function MessageList({
   renderWidget,
   onWidgetAction,
   autoScroll = true,
+  richContentRenderers,
   className
 }) {
   const contextConfig = useDisplayConfig();
@@ -2185,7 +2267,16 @@ function MessageList({
             return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
           }
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry, onOptionSelect, defaultExpanded: config.defaultExpanded }, entry.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          MessageEntry,
+          {
+            entry,
+            onOptionSelect,
+            defaultExpanded: config.defaultExpanded,
+            richContentRenderers
+          },
+          entry.id
+        );
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -3747,6 +3838,7 @@ exports.MoonIcon = MoonIcon;
 exports.OptionCards = OptionCards;
 exports.PaperclipIcon = PaperclipIcon;
 exports.PlugIcon = PlugIcon;
+exports.RichContentRenderer = RichContentRenderer;
 exports.SearchIcon = SearchIcon;
 exports.SendIcon = SendIcon;
 exports.SparklesIcon = SparklesIcon;