react-ai-renderer 0.1.2 → 0.1.4

package/dist/{index-bb96fdaf.js → index-58ab9759.js}

@@ -475,18 +475,6 @@ function __generator(thisArg, body) {
     }
 }
 
-function __values(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-}
-
 function __read(o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -569,7 +557,7 @@ var CodeHighlight = function (_a) {
   if (language === "mermaid") {
     // 动态导入 MermaidRenderer 组件
     var MermaidRenderer = /*#__PURE__*/React.lazy(function () {
-      return Promise.resolve().then(function () { return require('./MermaidRenderer-d7545a7e.js'); }).catch(function () {
+      return Promise.resolve().then(function () { return require('./MermaidRenderer-62cbf217.js'); }).catch(function () {
         return {
           default: function () {
             return /*#__PURE__*/runtime.jsx("div", {});
@@ -637,39 +625,71 @@ var CodeHighlight = function (_a) {
 var Think = function (_a) {
   var content = _a.content,
     children = _a.children;
+  var _b = __read(React.useState(true), 2),
+    isExpanded = _b[0],
+    setIsExpanded = _b[1];
   var thinkContent = content || children;
   if (!thinkContent) {
     return /*#__PURE__*/runtime.jsx("div", {});
   }
-  return /*#__PURE__*/runtime.jsx("div", {
-    style: {
-      marginBottom: 12
-    },
-    children: /*#__PURE__*/runtime.jsxs("details", {
-      open: true,
-      children: [/*#__PURE__*/runtime.jsx("summary", {
-        style: {
-          fontWeight: 'bold',
-          cursor: 'pointer',
-          padding: '8px',
-          backgroundColor: '#f0f0f0',
-          borderRadius: '4px',
-          marginBottom: '8px'
-        },
-        children: "\uD83E\uDDE0 AI \u601D\u8003\u8FC7\u7A0B"
-      }), /*#__PURE__*/runtime.jsx("blockquote", {
-        style: {
-          borderLeft: '3px solid #2196f3',
-          color: '#666',
-          paddingLeft: 12,
-          fontStyle: 'italic',
-          marginBottom: 0,
-          backgroundColor: '#f9f9f9',
-          padding: '8px'
-        },
-        children: typeof thinkContent === 'string' ? decodeURIComponent(thinkContent) : thinkContent
+  return /*#__PURE__*/runtime.jsxs("div", {
+    className: "funq-think border rounded-lg p-3 mb-3 bg-blue-50 border-blue-200",
+    children: [/*#__PURE__*/runtime.jsxs("div", {
+      className: "flex items-center justify-between cursor-pointer",
+      onClick: function () {
+        return setIsExpanded(!isExpanded);
+      },
+      children: [/*#__PURE__*/runtime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/runtime.jsx("div", {
+          className: "w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center",
+          children: /*#__PURE__*/runtime.jsx("svg", {
+            className: "w-3 h-3 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/runtime.jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+            })
+          })
+        }), /*#__PURE__*/runtime.jsx("span", {
+          className: "font-medium text-sm",
+          children: "AI \u601D\u8003\u8FC7\u7A0B"
+        })]
+      }), /*#__PURE__*/runtime.jsx("div", {
+        className: "w-4 h-4 text-muted-foreground",
+        children: isExpanded ? /*#__PURE__*/runtime.jsx("svg", {
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /*#__PURE__*/runtime.jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            d: "M5 15l7-7 7 7"
+          })
+        }) : /*#__PURE__*/runtime.jsx("svg", {
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /*#__PURE__*/runtime.jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            d: "M19 9l-7 7-7-7"
+          })
+        })
       })]
-    })
+    }), isExpanded && /*#__PURE__*/runtime.jsx("div", {
+      className: "mt-3 pt-3 border-t border-blue-200",
+      children: /*#__PURE__*/runtime.jsx("blockquote", {
+        className: "text-sm text-blue-800 bg-blue-100 p-2 rounded",
+        children: typeof thinkContent === 'string' ? decodeURIComponent(thinkContent) : thinkContent
+      })
+    })]
   });
 };
 
@@ -810,7 +830,8 @@ var PreComponent = function (props) {
   });
 };
 var BuiltInComponents = {
-  AC_DS_THINK: Think,
+  _THINK: Think,
+  // _TOOL_CALL: ToolCall,
   pre: PreComponent,
   code: CodeComponent,
   p: PComponent,
@@ -856,7 +877,7 @@ function MdxLayout(_a) {
 
 var THINK_BEGIN_TAG = '<think>';
 var THINK_END_TAG = '</think>';
-var CUSTOMER_THINK_COMPONENT_DISPLAY = 'AC_DS_THINK';
+var CUSTOMER_THINK_COMPONENT_DISPLAY = '_THINK';
 function fixMDXContent(content) {
   // 替换中文括号为英文括号
   return content.replace(/\\\[/g, '$$').replace(/\\\]/g, '$$')
@@ -933,12 +954,11 @@ function formatProps(props) {
 }
 function renderMdx(mdxContent, scope, registeredComponents) {
   return __awaiter(this, void 0, void 0, function () {
-    var componentTagRegex, usedComponents, match, _registeredComponents, usedComponents_1, usedComponents_1_1, component, vf, XComponent, e_1;
-    var e_2, _a;
-    return __generator(this, function (_b) {
-      switch (_b.label) {
+    var componentTagRegex, usedComponents, match, vf, XComponent;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
         case 0:
-          _b.trys.push([0, 3,, 4]);
+          _a.trys.push([0, 3,, 4]);
           renderTimer && clearTimeout(renderTimer);
           componentTagRegex = /<([A-Z][a-zA-Z]*)\b/g;
           usedComponents = new Set();
@@ -946,25 +966,6 @@ function renderMdx(mdxContent, scope, registeredComponents) {
           while ((match = componentTagRegex.exec(mdxContent)) !== null) {
             usedComponents.add(match[1]);
           }
-          _registeredComponents = new Set(Object.keys(registeredComponents));
-          try {
-            for (usedComponents_1 = __values(usedComponents), usedComponents_1_1 = usedComponents_1.next(); !usedComponents_1_1.done; usedComponents_1_1 = usedComponents_1.next()) {
-              component = usedComponents_1_1.value;
-              if (!_registeredComponents.has(component)) {
-                throw new Error("Component ".concat(component, " is used but not registered in the components object."));
-              }
-            }
-          } catch (e_2_1) {
-            e_2 = {
-              error: e_2_1
-            };
-          } finally {
-            try {
-              if (usedComponents_1_1 && !usedComponents_1_1.done && (_a = usedComponents_1.return)) _a.call(usedComponents_1);
-            } finally {
-              if (e_2) throw e_2.error;
-            }
-          }
           return [4 /*yield*/, mdx.compile(mdxContent, {
             outputFormat: "function-body",
             remarkPlugins: [[RemarkMath, {
@@ -977,29 +978,27 @@ function renderMdx(mdxContent, scope, registeredComponents) {
             }]]
           })];
         case 1:
-          vf = _b.sent();
+          vf = _a.sent();
           return [4 /*yield*/, mdx.run(vf, __assign(__assign(__assign({}, runtime__namespace), scope), {
             Fragment: MdxLayout
           }))];
         case 2:
-          XComponent = _b.sent().default;
+          XComponent = _a.sent().default;
           return [2 /*return*/, /*#__PURE__*/React__namespace.createElement(XComponent, {
             components: registeredComponents,
             scope: scope
           })];
         case 3:
-          e_1 = _b.sent();
+          _a.sent();
           return [2 /*return*/, new Promise(function (resolve) {
             renderTimer = setTimeout(function () {
-              console.log(e_1, 'e');
-              console.log(mdxContent, 'mdxContent');
               resolve(/*#__PURE__*/React__namespace.createElement('div', {
                 style: {
                   backgroundColor: 'transparent'
                 }
               }, mdxContent));
               clearTimeout(renderTimer); // 清理定时器
-            }, 1000); // 1秒延迟
+            }, 2000); // 1秒延迟
           })];
         case 4:
           return [2 /*return*/];
@@ -1156,11 +1155,12 @@ function ReactAIRenderer(_a) {
   var content = _a.content,
     _b = _a.scope,
     scope = _b === void 0 ? {} : _b,
-    components = _a.components,
+    _c = _a.components,
+    components = _c === void 0 ? {} : _c,
     children = _a.children,
-    _c = _a.componentHandlers,
-    componentHandlers = _c === void 0 ? [] : _c;
-  content = content || children;
+    _d = _a.componentHandlers,
+    componentHandlers = _d === void 0 ? [] : _d;
+  content = content || children || '';
   var allComponents = __assign(__assign({}, BuiltInComponents), components);
   // 修复：确保 components 是一个对象后再使用 Object.entries
   var allComponentHandlers = __spreadArray(__spreadArray([], __read(components ? Object.entries(components).filter(function (_a) {
@@ -1180,11 +1180,11 @@ function ReactAIRenderer(_a) {
       selfClosing: selfClosing
     };
   }) : []), false), __read(componentHandlers), false);
-  var _d = __read(React.useState(null), 2),
-    component = _d[0],
-    setComponent = _d[1];
+  var _e = __read(React.useState(null), 2),
+    component = _e[0],
+    setComponent = _e[1];
   var parser = new MDXStreamingParser(allComponentHandlers);
-  var mdxContent = content;
+  var mdxContent = content || '';
   React.useEffect(function () {
     var parseMDX = function () {
       return __awaiter(_this, void 0, void 0, function () {
@@ -1246,64 +1246,167 @@ function ReactAIRenderer(_a) {
 }
 
 var ToolCall = function (_a) {
-  var name = _a.name,
-    args = _a.args,
+  var toolCall = _a.toolCall,
     children = _a.children;
+  var _b = __read(React.useState(false), 2),
+    isExpanded = _b[0],
+    setIsExpanded = _b[1];
+  var getStateIcon = function () {
+    switch (toolCall.state) {
+      case 'loading':
+        return /*#__PURE__*/runtime.jsx("div", {
+          className: "w-4 h-4 animate-spin border-2 border-blue-500 border-t-transparent rounded-full"
+        });
+      case 'done':
+        return /*#__PURE__*/runtime.jsx("div", {
+          className: "w-4 h-4 rounded-full bg-green-500 flex items-center justify-center",
+          children: /*#__PURE__*/runtime.jsx("svg", {
+            className: "w-3 h-3 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/runtime.jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M5 13l4 4L19 7"
+            })
+          })
+        });
+      case 'error':
+        return /*#__PURE__*/runtime.jsx("div", {
+          className: "w-4 h-4 rounded-full bg-red-500 flex items-center justify-center",
+          children: /*#__PURE__*/runtime.jsx("svg", {
+            className: "w-3 h-3 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/runtime.jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          })
+        });
+      default:
+        return /*#__PURE__*/runtime.jsx("div", {
+          className: "w-4 h-4 animate-spin border-2 border-blue-500 border-t-transparent rounded-full"
+        });
+    }
+  };
+  var getStateText = function () {
+    switch (toolCall.state) {
+      case 'loading':
+        return '执行中...';
+      case 'done':
+        return '执行完成';
+      case 'error':
+        return '执行出错';
+      default:
+        return '执行中...';
+    }
+  };
+  var getStateClass = function () {
+    switch (toolCall.state) {
+      case 'loading':
+        return 'bg-blue-50 border-blue-200';
+      case 'done':
+        return 'bg-green-50 border-green-200';
+      case 'error':
+        return 'bg-red-50 border-red-200';
+      default:
+        return 'bg-blue-50 border-blue-200';
+    }
+  };
+  // 解析工具调用结果，如果是JSON字符串则格式化显示
+  var formatResult = function (result) {
+    if (!result) return result;
+    try {
+      // 尝试解析为JSON
+      var parsed = JSON.parse(result);
+      return JSON.stringify(parsed, null, 2);
+    } catch (e) {
+      // 如果不是有效的JSON，直接返回原始字符串
+      return result;
+    }
+  };
   return /*#__PURE__*/runtime.jsxs("div", {
-    style: {
-      border: '1px solid #e0e0e0',
-      borderRadius: '4px',
-      margin: '8px 0',
-      backgroundColor: '#fafafa'
-    },
+    className: "funq-tool-call border rounded-lg p-3 mb-3 ".concat(getStateClass()),
     children: [/*#__PURE__*/runtime.jsxs("div", {
-      style: {
-        padding: '8px',
-        backgroundColor: '#f5f5f5',
-        borderBottom: '1px solid #e0e0e0',
-        fontWeight: 'bold',
-        display: 'flex',
-        alignItems: 'center'
+      className: "flex items-center justify-between cursor-pointer",
+      onClick: function () {
+        return setIsExpanded(!isExpanded);
       },
-      children: [/*#__PURE__*/runtime.jsx("span", {
-        style: {
-          marginRight: '8px'
-        },
-        children: "\uD83D\uDD27"
-      }), /*#__PURE__*/runtime.jsxs("span", {
-        children: ["\u5DE5\u5177\u8C03\u7528: ", name]
+      children: [/*#__PURE__*/runtime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [getStateIcon(), /*#__PURE__*/runtime.jsxs("span", {
+          className: "font-medium text-sm",
+          children: ["\u5DE5\u5177\u8C03\u7528: ", toolCall.toolCallName]
+        }), /*#__PURE__*/runtime.jsx("span", {
+          className: "text-xs text-muted-foreground",
+          children: getStateText()
+        })]
+      }), /*#__PURE__*/runtime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [toolCall.startTime && /*#__PURE__*/runtime.jsxs("span", {
+          className: "text-xs text-muted-foreground",
+          children: ["\u5F00\u59CB: ", new Date(toolCall.startTime).toLocaleTimeString()]
+        }), toolCall.endTime && toolCall.executionTime && /*#__PURE__*/runtime.jsxs("span", {
+          className: "text-xs text-muted-foreground",
+          children: ["\u8017\u65F6: ", toolCall.executionTime, "ms"]
+        }), /*#__PURE__*/runtime.jsx("div", {
+          className: "w-4 h-4 text-muted-foreground",
+          children: isExpanded ? /*#__PURE__*/runtime.jsx("svg", {
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/runtime.jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M5 15l7-7 7 7"
+            })
+          }) : /*#__PURE__*/runtime.jsx("svg", {
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/runtime.jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M19 9l-7 7-7-7"
+            })
+          })
+        })]
       })]
-    }), args && /*#__PURE__*/runtime.jsxs("div", {
-      style: {
-        padding: '8px'
-      },
-      children: [/*#__PURE__*/runtime.jsx("div", {
-        style: {
-          fontWeight: 'bold',
-          marginBottom: '4px'
-        },
-        children: "\u53C2\u6570:"
-      }), /*#__PURE__*/runtime.jsx("pre", {
-        style: {
-          backgroundColor: '#f0f0f0',
-          padding: '8px',
-          borderRadius: '4px',
-          overflowX: 'auto',
-          fontSize: '12px'
-        },
-        children: JSON.stringify(args, null, 2)
-      })]
-    }), children && /*#__PURE__*/runtime.jsxs("div", {
-      style: {
-        padding: '8px'
-      },
-      children: [/*#__PURE__*/runtime.jsx("div", {
-        style: {
-          fontWeight: 'bold',
-          marginBottom: '4px'
-        },
-        children: "\u7ED3\u679C:"
-      }), /*#__PURE__*/runtime.jsx("div", {
+    }), isExpanded && /*#__PURE__*/runtime.jsxs("div", {
+      className: "mt-3 pt-3 border-t border-border",
+      children: [toolCall.toolCallArgs && /*#__PURE__*/runtime.jsxs("div", {
+        className: "mb-3",
+        children: [/*#__PURE__*/runtime.jsx("h4", {
+          className: "text-sm font-medium mb-1",
+          children: "\u53C2\u6570:"
+        }), /*#__PURE__*/runtime.jsx("pre", {
+          className: "text-xs bg-muted p-2 rounded overflow-x-auto break-words whitespace-pre-wrap",
+          children: toolCall.toolCallArgs
+        })]
+      }), (toolCall.delta || toolCall.state === 'error') && /*#__PURE__*/runtime.jsxs("div", {
+        children: [/*#__PURE__*/runtime.jsx("h4", {
+          className: "text-sm font-medium mb-1",
+          children: "\u7ED3\u679C:"
+        }), /*#__PURE__*/runtime.jsx("div", {
+          className: "text-sm p-2 rounded ".concat(toolCall.state === 'error' ? 'bg-red-100 text-red-800' : 'bg-muted'),
+          children: toolCall.state === 'error' ? /*#__PURE__*/runtime.jsx("pre", {
+            className: "whitespace-pre-wrap break-words overflow-x-auto",
+            children: formatResult(toolCall.delta) || '工具执行出错'
+          }) : /*#__PURE__*/runtime.jsx("pre", {
+            className: "whitespace-pre-wrap break-words overflow-x-auto",
+            children: formatResult(toolCall.delta)
+          })
+        })]
+      }), children && /*#__PURE__*/runtime.jsx("div", {
+        className: "mt-2",
         children: children
       })]
     })]
@@ -1319,4 +1422,3 @@ exports.ToolCall = ToolCall;
 exports.__awaiter = __awaiter;
 exports.__generator = __generator;
 exports.__read = __read;
-//# sourceMappingURL=index-bb96fdaf.js.map

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React$1 from 'react';
+import React from 'react';
 
 interface ComponentData$1 {
     type: "text" | "component";
@@ -34,19 +34,40 @@ interface ReactMarkdownProps {
     scope?: any;
     [key: string]: any;
 }
+interface ReactAIRendererProps {
+    /** 要渲染的 Markdown/MDX 内容 */
+    content?: string;
+    /** 作用域对象，用于传递变量和函数给组件 */
+    scope?: Record<string, any>;
+    /** 自定义组件映射 */
+    components?: Record<string, React.ComponentType<any>>;
+    /** 子元素，作为 content 的替代方案 */
+    children?: string;
+    /** 组件处理器数组 */
+    componentHandlers?: ComponentHandler[];
+    /** 其他传递给组件的属性 */
+    [key: string]: any;
+}
 
 interface ThinkProps {
     content: string;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
-declare const Think: React$1.FC<ThinkProps>;
+declare const Think: React.FC<ThinkProps>;
 
 interface ToolCallProps {
-    name: string;
-    args?: any;
-    children?: React$1.ReactNode;
+    toolCall: {
+        toolCallName: string;
+        state: 'loading' | 'done' | 'error' | string;
+        startTime?: number;
+        endTime?: number;
+        executionTime?: number;
+        toolCallArgs?: string;
+        delta?: string;
+    };
+    children?: React.ReactNode;
 }
-declare const ToolCall: React$1.FC<ToolCallProps>;
+declare const ToolCall: React.FC<ToolCallProps>;
 
 interface ComponentData {
     type: "text" | "component";
@@ -68,6 +89,6 @@ declare class MDXStreamingParser {
     reset(): void;
 }
 
-declare function ReactAIRenderer({ content, scope, components, children, componentHandlers }: any): React$1.JSX.Element;
+declare function ReactAIRenderer({ content, scope, components, children, componentHandlers }: ReactAIRendererProps): React.JSX.Element;
 
-export { ComponentData$1 as ComponentData, ComponentHandler, MDXStreamingParser, ParseResult, ParserState, ReactMarkdownProps, Think, ThinkProps, ToolCall, ToolCallProps, ReactAIRenderer as default };
+export { ComponentData$1 as ComponentData, ComponentHandler, MDXStreamingParser, ParseResult, ParserState, ReactAIRendererProps, ReactMarkdownProps, Think, ThinkProps, ToolCall, ToolCallProps, ReactAIRenderer as default };

package/dist/index.es.js

@@ -1,4 +1,4 @@
-export { M as MDXStreamingParser, T as Think, c as ToolCall, R as default } from './index-c6ab333d.js';
+export { M as MDXStreamingParser, T as Think, c as ToolCall, R as default } from './index-543584d8.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'remark-math';

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-3de28f18.js');
+var index = require('./index-58ab9759.js');
 require('react');
 require('react/jsx-runtime');
 require('remark-math');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ai-renderer",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",