react-ai-renderer 0.1.2 → 0.1.3

package/dist/{index-fdaa9757.js → index-b78ff7b5.js}

@@ -455,18 +455,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;
@@ -549,7 +537,7 @@ var CodeHighlight = function (_a) {
   if (language === "mermaid") {
     // 动态导入 MermaidRenderer 组件
     var MermaidRenderer = /*#__PURE__*/React__default.lazy(function () {
-      return import('./MermaidRenderer-f6473da3.js').catch(function () {
+      return import('./MermaidRenderer-2f6d93a2.js').catch(function () {
         return {
           default: function () {
             return /*#__PURE__*/jsx("div", {});
@@ -617,57 +605,239 @@ var CodeHighlight = function (_a) {
 var Think = function (_a) {
   var content = _a.content,
     children = _a.children;
+  var _b = __read(useState(true), 2),
+    isExpanded = _b[0],
+    setIsExpanded = _b[1];
   var thinkContent = content || children;
   if (!thinkContent) {
     return /*#__PURE__*/jsx("div", {});
   }
-  return /*#__PURE__*/jsx("div", {
-    style: {
-      marginBottom: 12
-    },
-    children: /*#__PURE__*/jsxs("details", {
-      open: true,
-      children: [/*#__PURE__*/jsx("summary", {
-        style: {
-          fontWeight: 'bold',
-          cursor: 'pointer',
-          padding: '8px',
-          backgroundColor: '#f0f0f0',
-          borderRadius: '4px',
-          marginBottom: '8px'
-        },
-        children: "\uD83E\uDDE0 AI \u601D\u8003\u8FC7\u7A0B"
-      }), /*#__PURE__*/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__*/jsxs("div", {
+    className: "funq-think border rounded-lg p-3 mb-3 bg-blue-50 border-blue-200",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between cursor-pointer",
+      onClick: function () {
+        return setIsExpanded(!isExpanded);
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center",
+          children: /*#__PURE__*/jsx("svg", {
+            className: "w-3 h-3 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/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__*/jsx("span", {
+          className: "font-medium text-sm",
+          children: "AI \u601D\u8003\u8FC7\u7A0B"
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "w-4 h-4 text-muted-foreground",
+        children: isExpanded ? /*#__PURE__*/jsx("svg", {
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /*#__PURE__*/jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            d: "M5 15l7-7 7 7"
+          })
+        }) : /*#__PURE__*/jsx("svg", {
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /*#__PURE__*/jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            d: "M19 9l-7 7-7-7"
+          })
+        })
       })]
-    })
+    }), isExpanded && /*#__PURE__*/jsx("div", {
+      className: "mt-3 pt-3 border-t border-blue-200",
+      children: /*#__PURE__*/jsx("blockquote", {
+        className: "text-sm text-blue-800 bg-blue-100 p-2 rounded",
+        children: typeof thinkContent === 'string' ? decodeURIComponent(thinkContent) : thinkContent
+      })
+    })]
   });
 };
 
-var EncodedContent = function (_a) {
-  var encodedContent = _a.encodedContent,
-    props = __rest(_a, ["encodedContent"]);
-  // 解码内容
-  var decodedContent = React__default.useMemo(function () {
+var ToolCall = function (_a) {
+  var toolCall = _a.toolCall,
+    children = _a.children;
+  var _b = __read(useState(false), 2),
+    isExpanded = _b[0],
+    setIsExpanded = _b[1];
+  var getStateIcon = function () {
+    switch (toolCall.state) {
+      case 'loading':
+        return /*#__PURE__*/jsx("div", {
+          className: "w-4 h-4 animate-spin border-2 border-blue-500 border-t-transparent rounded-full"
+        });
+      case 'done':
+        return /*#__PURE__*/jsx("div", {
+          className: "w-4 h-4 rounded-full bg-green-500 flex items-center justify-center",
+          children: /*#__PURE__*/jsx("svg", {
+            className: "w-3 h-3 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M5 13l4 4L19 7"
+            })
+          })
+        });
+      case 'error':
+        return /*#__PURE__*/jsx("div", {
+          className: "w-4 h-4 rounded-full bg-red-500 flex items-center justify-center",
+          children: /*#__PURE__*/jsx("svg", {
+            className: "w-3 h-3 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          })
+        });
+      default:
+        return /*#__PURE__*/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 {
-      return decodeURIComponent(encodedContent);
+      // 尝试解析为JSON
+      var parsed = JSON.parse(result);
+      return JSON.stringify(parsed, null, 2);
     } catch (e) {
-      console.warn('Failed to decode content:', e);
-      return encodedContent;
+      // 如果不是有效的JSON，直接返回原始字符串
+      return result;
     }
-  }, [encodedContent]);
-  return /*#__PURE__*/jsx("span", {
-    ...props,
-    children: decodedContent
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "funq-tool-call border rounded-lg p-3 mb-3 ".concat(getStateClass()),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between cursor-pointer",
+      onClick: function () {
+        return setIsExpanded(!isExpanded);
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [getStateIcon(), /*#__PURE__*/jsxs("span", {
+          className: "font-medium text-sm",
+          children: ["\u5DE5\u5177\u8C03\u7528: ", toolCall.toolCallName]
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-xs text-muted-foreground",
+          children: getStateText()
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [toolCall.startTime && /*#__PURE__*/jsxs("span", {
+          className: "text-xs text-muted-foreground",
+          children: ["\u5F00\u59CB: ", new Date(toolCall.startTime).toLocaleTimeString()]
+        }), toolCall.endTime && toolCall.executionTime && /*#__PURE__*/jsxs("span", {
+          className: "text-xs text-muted-foreground",
+          children: ["\u8017\u65F6: ", toolCall.executionTime, "ms"]
+        }), /*#__PURE__*/jsx("div", {
+          className: "w-4 h-4 text-muted-foreground",
+          children: isExpanded ? /*#__PURE__*/jsx("svg", {
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M5 15l7-7 7 7"
+            })
+          }) : /*#__PURE__*/jsx("svg", {
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M19 9l-7 7-7-7"
+            })
+          })
+        })]
+      })]
+    }), isExpanded && /*#__PURE__*/jsxs("div", {
+      className: "mt-3 pt-3 border-t border-border",
+      children: [toolCall.toolCallArgs && /*#__PURE__*/jsxs("div", {
+        className: "mb-3",
+        children: [/*#__PURE__*/jsx("h4", {
+          className: "text-sm font-medium mb-1",
+          children: "\u53C2\u6570:"
+        }), /*#__PURE__*/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__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("h4", {
+          className: "text-sm font-medium mb-1",
+          children: "\u7ED3\u679C:"
+        }), /*#__PURE__*/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__*/jsx("pre", {
+            className: "whitespace-pre-wrap break-words overflow-x-auto",
+            children: formatResult(toolCall.delta) || '工具执行出错'
+          }) : /*#__PURE__*/jsx("pre", {
+            className: "whitespace-pre-wrap break-words overflow-x-auto",
+            children: formatResult(toolCall.delta)
+          })
+        })]
+      }), children && /*#__PURE__*/jsx("div", {
+        className: "mt-2",
+        children: children
+      })]
+    })]
   });
 };
 
@@ -808,14 +978,14 @@ var PreComponent = function (props) {
   });
 };
 var BuiltInComponents = {
-  AC_DS_THINK: Think,
+  _THINK: Think,
+  _TOOL_CALL: ToolCall,
   pre: PreComponent,
   code: CodeComponent,
   p: PComponent,
   a: AComponent,
   video: VideoComponent,
-  audio: AudioComponent,
-  EncodedContent: EncodedContent
+  audio: AudioComponent
 };
 
 var ErrorBoundary = /** @class */function (_super) {
@@ -902,6 +1072,15 @@ function remarkThinkUpdate(content) {
     resultContent: resultContent
   };
 }
+/**
+ * 转义流式内容中的特殊字符，防止MDX解析错误
+ * @param content 需要转义的内容
+ * @returns 转义后的内容
+ */
+function escapeContentForStream(content) {
+  if (typeof content !== 'string') return content;
+  return content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/{/g, '&#123;').replace(/}/g, '&#125;');
+}
 
 var renderTimer = null;
 // 辅助函数：格式化props
@@ -923,12 +1102,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();
@@ -936,25 +1114,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*/, compile(mdxContent, {
             outputFormat: "function-body",
             remarkPlugins: [[RemarkMath, {
@@ -967,29 +1126,27 @@ function renderMdx(mdxContent, scope, registeredComponents) {
             }]]
           })];
         case 1:
-          vf = _b.sent();
+          vf = _a.sent();
           return [4 /*yield*/, run(vf, __assign(__assign(__assign({}, runtime), scope), {
             Fragment: MdxLayout
           }))];
         case 2:
-          XComponent = _b.sent().default;
+          XComponent = _a.sent().default;
           return [2 /*return*/, /*#__PURE__*/React.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.createElement('div', {
                 style: {
                   backgroundColor: 'transparent'
                 }
               }, mdxContent));
               clearTimeout(renderTimer); // 清理定时器
-            }, 1000); // 1秒延迟
+            }, 2000); // 1秒延迟
           })];
         case 4:
           return [2 /*return*/];
@@ -1061,14 +1218,7 @@ function parseComponentRecursively(allComponentHandlers, item, scope) {
           parsedChildren_1 = _a.sent();
           item.children.map(function (item, index) {
             if (item.type === 'text') {
-              // 对包含特殊字符的文本进行转义处理，避免MDX解析错误
-              var textContent = parsedChildren_1[index];
-              if (typeof textContent === 'string' && (textContent.includes('{') || textContent.includes('}'))) {
-                // 使用 encodeURIComponent 编码内容，但需要在组件内部解码
-                childrenContent_1 += encodeURIComponent(textContent);
-              } else {
-                childrenContent_1 += textContent;
-              }
+              childrenContent_1 += escapeContentForStream(parsedChildren_1[index]); // encodeURIComponent(parsedChildren[index]);
             } else {
               childrenContent_1 += parsedChildren_1[index];
             }
@@ -1153,11 +1303,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) {
@@ -1177,11 +1328,11 @@ function ReactAIRenderer(_a) {
       selfClosing: selfClosing
     };
   }) : []), false), __read(componentHandlers), false);
-  var _d = __read(useState(null), 2),
-    component = _d[0],
-    setComponent = _d[1];
+  var _e = __read(useState(null), 2),
+    component = _e[0],
+    setComponent = _e[1];
   var parser = new MDXStreamingParser(allComponentHandlers);
-  var mdxContent = content;
+  var mdxContent = content || '';
   useEffect(function () {
     var parseMDX = function () {
       return __awaiter(_this, void 0, void 0, function () {
@@ -1242,72 +1393,7 @@ function ReactAIRenderer(_a) {
   });
 }
 
-var ToolCall = function (_a) {
-  var name = _a.name,
-    args = _a.args,
-    children = _a.children;
-  return /*#__PURE__*/jsxs("div", {
-    style: {
-      border: '1px solid #e0e0e0',
-      borderRadius: '4px',
-      margin: '8px 0',
-      backgroundColor: '#fafafa'
-    },
-    children: [/*#__PURE__*/jsxs("div", {
-      style: {
-        padding: '8px',
-        backgroundColor: '#f5f5f5',
-        borderBottom: '1px solid #e0e0e0',
-        fontWeight: 'bold',
-        display: 'flex',
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/jsx("span", {
-        style: {
-          marginRight: '8px'
-        },
-        children: "\uD83D\uDD27"
-      }), /*#__PURE__*/jsxs("span", {
-        children: ["\u5DE5\u5177\u8C03\u7528: ", name]
-      })]
-    }), args && /*#__PURE__*/jsxs("div", {
-      style: {
-        padding: '8px'
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        style: {
-          fontWeight: 'bold',
-          marginBottom: '4px'
-        },
-        children: "\u53C2\u6570:"
-      }), /*#__PURE__*/jsx("pre", {
-        style: {
-          backgroundColor: '#f0f0f0',
-          padding: '8px',
-          borderRadius: '4px',
-          overflowX: 'auto',
-          fontSize: '12px'
-        },
-        children: JSON.stringify(args, null, 2)
-      })]
-    }), children && /*#__PURE__*/jsxs("div", {
-      style: {
-        padding: '8px'
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        style: {
-          fontWeight: 'bold',
-          marginBottom: '4px'
-        },
-        children: "\u7ED3\u679C:"
-      }), /*#__PURE__*/jsx("div", {
-        children: children
-      })]
-    })]
-  });
-};
-
 // 导出 MDXStreamingParser 类
 
 export { MDXStreamingParser as M, ReactAIRenderer as R, Think as T, __read as _, __awaiter as a, __generator as b, ToolCall as c };
-//# sourceMappingURL=index-fdaa9757.js.map
+//# sourceMappingURL=index-b78ff7b5.js.map