@xpert-ai/chatkit-ui 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -1180,6 +1180,9 @@ var en_US_default = {
   },
   markdown: {
     copy: "Copy",
+    plan: {
+      download: "Download Markdown"
+    },
     mermaid: {
       title: "Mermaid",
       diagram: "Diagram",
@@ -1352,6 +1355,9 @@ var zh_CN_default = {
   },
   markdown: {
     copy: "\u590D\u5236",
+    plan: {
+      download: "\u4E0B\u8F7D Markdown"
+    },
     mermaid: {
       title: "Mermaid",
       diagram: "\u56FE\u8868",
@@ -4090,17 +4096,166 @@ var markdownTableCellPaddingBlock = "max(0.5rem, calc(var(--density-padding, 1re
 var markdownTableLineHeight = "max(1.375rem, calc(1.5rem * var(--density-spacing, 1)))";
 var markdownInlineCodePaddingInline = "max(0.25rem, calc(var(--density-gap, 0.5rem) * 0.75))";
 var markdownInlineCodePaddingBlock = "max(0.125rem, calc(var(--density-gap, 0.5rem) * 0.5))";
+var proposedPlanOpenPattern = /^\s*<proposed_plan>\s*$/;
+var proposedPlanClosePattern = /^\s*<\/proposed_plan>\s*$/;
+var markdownFencePattern = /^ {0,3}(`{3,}|~{3,})/;
+var planMarkdownFencePattern = /^\s*(`{3,}|~{3,})[ \t]*(?:markdown|md)[^\n]*\r?\n([\s\S]*?)\r?\n\1[ \t]*\s*$/i;
+var stripMarkdownNode = (props) => {
+  const elementProps = { ...props };
+  delete elementProps.node;
+  return elementProps;
+};
 var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
   if (typeof child === "string" || typeof child === "number") {
     return String(child);
   }
   return "";
 }).join("");
+var getFenceMarker = (line) => {
+  const match = markdownFencePattern.exec(line);
+  if (!match) return null;
+  return {
+    char: match[1][0],
+    length: match[1].length
+  };
+};
+var updateFenceMarker = (currentFence, line) => {
+  const marker = getFenceMarker(line);
+  if (!marker) return currentFence;
+  if (!currentFence) {
+    return marker;
+  }
+  if (marker.char === currentFence.char && marker.length >= currentFence.length) {
+    return null;
+  }
+  return currentFence;
+};
+var normalizePlanMarkdown = (markdown) => {
+  const trimmed = markdown.trim();
+  const match = planMarkdownFencePattern.exec(trimmed);
+  return match ? match[2].trim() : trimmed;
+};
+var downloadMarkdown = (markdown) => {
+  if (!markdown) return;
+  const content = markdown.endsWith("\n") ? markdown : `${markdown}
+`;
+  const blob = new Blob([content], {
+    type: "text/markdown;charset=utf-8"
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = "plan.md";
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+};
+var splitProposedPlanSegments = (markdown) => {
+  const segments = [];
+  const markdownLines = [];
+  let planLines = null;
+  let fence = null;
+  const flushMarkdown = () => {
+    if (markdownLines.length === 0) return;
+    segments.push({
+      type: "markdown",
+      content: markdownLines.join("\n")
+    });
+    markdownLines.length = 0;
+  };
+  const flushPlan = () => {
+    if (!planLines) return;
+    segments.push({
+      type: "plan",
+      content: planLines.join("\n")
+    });
+    planLines = null;
+  };
+  for (const line of markdown.split(/\r?\n/)) {
+    if (!fence && !planLines && proposedPlanOpenPattern.test(line)) {
+      flushMarkdown();
+      planLines = [];
+      continue;
+    }
+    if (!fence && planLines && proposedPlanClosePattern.test(line)) {
+      flushPlan();
+      continue;
+    }
+    if (planLines) {
+      planLines.push(line);
+    } else {
+      markdownLines.push(line);
+    }
+    fence = updateFenceMarker(fence, line);
+  }
+  flushPlan();
+  flushMarkdown();
+  return segments;
+};
+function MarkdownContent({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
+      rehypePlugins: [import_rehype_katex.default],
+      components: defaultComponents,
+      children
+    }
+  );
+}
+function PlanCard({ children }) {
+  const { t } = useChatkitTranslation();
+  const planMarkdown = normalizePlanMarkdown(children);
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!planMarkdown || isCopied) return;
+    copyToClipboard(planMarkdown);
+  };
+  const onDownload = () => {
+    downloadMarkdown(planMarkdown);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "section",
+    {
+      "data-slot": "markdown-plan-card",
+      className: cn(
+        "relative my-5 max-w-4xl rounded-2xl border border-border bg-muted/25 shadow-lg"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "absolute top-3 right-3 flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            TooltipIconButton,
+            {
+              tooltip: t("markdown.plan.download"),
+              onClick: onDownload,
+              className: "bg-background/80 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.DownloadIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            TooltipIconButton,
+            {
+              tooltip: isCopied ? t("messageActions.copied") : t("markdown.copy"),
+              onClick: onCopy,
+              className: "bg-background/80 text-muted-foreground hover:text-foreground",
+              children: [
+                !isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CopyIcon, { className: "size-4" }),
+                isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CheckIcon, { className: "size-4" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full max-h-[80vh] py-3 pr-4 pl-4 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownContent, { children: planMarkdown }) })
+      ]
+    }
+  );
+}
 var isMermaidBlockChild = (child) => (0, import_react6.isValidElement)(child) && child.type === MermaidBlock;
 var isMermaidCodeElement = (child) => (0, import_react6.isValidElement)(child) && typeof child.props.className === "string" && child.props.className.includes("language-mermaid");
-var useCopyToClipboard = ({
+function useCopyToClipboard({
   copiedDuration = 3e3
-} = {}) => {
+} = {}) {
   const [isCopied, setIsCopied] = (0, import_react6.useState)(false);
   const copyToClipboard = (value) => {
     if (!value) return;
@@ -4110,7 +4265,7 @@ var useCopyToClipboard = ({
     });
   };
   return { isCopied, copyToClipboard };
-};
+}
 var CodeHeader = ({ language, code }) => {
   const { t } = useChatkitTranslation();
   const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -4120,85 +4275,78 @@ var CodeHeader = ({ language, code }) => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      TooltipIconButton,
-      {
-        tooltip: t("markdown.copy"),
-        onClick: onCopy,
-        children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CopyIcon, {}),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CheckIcon, {})
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TooltipIconButton, { tooltip: t("markdown.copy"), onClick: onCopy, children: [
+      !isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CopyIcon, {}),
+      isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CheckIcon, {})
+    ] })
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h1",
     {
       className: cn(
         "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h2",
     {
       className: cn(
         "mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h3",
     {
       className: cn(
         "mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h4",
     {
       className: cn(
         "mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h5",
     {
       className: cn(
         "my-4 text-lg font-semibold first:mt-0 last:mb-0",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "p",
     {
       className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "a",
     {
       className: cn(
@@ -4207,50 +4355,44 @@ var defaultComponents = {
       ),
       target: "_blank",
       rel: "noopener noreferrer",
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  blockquote: ({
-    className,
-    node: _node,
-    ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "blockquote",
     {
       className: cn(
         "border-l-4 border-border pl-6 italic text-muted-foreground",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "ol",
     {
-      className: cn("my-5 list-outside list-decimal pl-8 [&>li]:mt-2", className),
-      ...props
+      className: cn(
+        "my-5 list-outside list-decimal pl-8 [&>li]:mt-2",
+        className
+      ),
+      ...stripMarkdownNode(props)
     }
   ),
-  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "hr",
     {
       className: cn("my-5 border-b", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  table: ({
-    className,
-    node: _node,
-    style,
-    ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  table: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "markdown-table-container",
@@ -4266,17 +4408,12 @@ var defaultComponents = {
             lineHeight: markdownTableLineHeight,
             ...style
           },
-          ...props
+          ...stripMarkdownNode(props)
         }
       )
     }
   ),
-  th: ({
-    className,
-    node: _node,
-    style,
-    ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  th: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "th",
     {
       className: cn(
@@ -4289,15 +4426,10 @@ var defaultComponents = {
         paddingBlock: markdownTableCellPaddingBlock,
         ...style
       },
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  td: ({
-    className,
-    node: _node,
-    style,
-    ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  td: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "td",
     {
       className: cn(
@@ -4310,27 +4442,27 @@ var defaultComponents = {
         paddingBlock: markdownTableCellPaddingBlock,
         ...style
       },
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "tr",
     {
       className: cn(
         "m-0 p-0 even:bg-muted/30 [&:last-child>td:first-child]:rounded-bl-xl [&:last-child>td:last-child]:rounded-br-xl",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  pre: ({ className, children, node: _node }) => import_react6.Children.toArray(children).length === 1 && (isMermaidBlockChild(import_react6.Children.toArray(children)[0]) || isMermaidCodeElement(import_react6.Children.toArray(children)[0])) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  pre: ({ className, children }) => import_react6.Children.toArray(children).length === 1 && (isMermaidBlockChild(import_react6.Children.toArray(children)[0]) || isMermaidCodeElement(import_react6.Children.toArray(children)[0])) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       className: cn(
@@ -4343,7 +4475,6 @@ var defaultComponents = {
   code: ({
     className,
     children,
-    node: _node,
     style,
     ...props
   }) => {
@@ -4357,21 +4488,8 @@ var defaultComponents = {
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MermaidBlock, { code: normalizedCode });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          CodeHeader,
-          {
-            language,
-            code: normalizedCode
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          SyntaxHighlighter,
-          {
-            language,
-            className,
-            children: normalizedCode
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CodeHeader, { language, code: normalizedCode }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SyntaxHighlighter, { language, className, children: normalizedCode })
       ] });
     }
     if (isBlockCode) {
@@ -4382,7 +4500,7 @@ var defaultComponents = {
             "block min-w-full whitespace-pre px-4 py-4 font-mono text-inherit",
             className
           ),
-          ...props,
+          ...stripMarkdownNode(props),
           children: code.replace(/\n$/, "")
         }
       );
@@ -4399,21 +4517,15 @@ var defaultComponents = {
           paddingBlock: markdownInlineCodePaddingBlock,
           ...style
         },
-        ...props,
+        ...stripMarkdownNode(props),
         children
       }
     );
   }
 };
 var MarkdownTextImpl = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_markdown.default,
-    {
-      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
-      rehypePlugins: [import_rehype_katex.default],
-      components: defaultComponents,
-      children
-    }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "markdown-content", children: splitProposedPlanSegments(children).map(
+    (segment, index) => segment.type === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlanCard, { children: segment.content }, index) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownContent, { children: segment.content }, index)
   ) });
 };
 var MarkdownText = (0, import_react6.memo)(MarkdownTextImpl);
@@ -5152,28 +5264,37 @@ function parseResultOutput(output) {
   if (!isRecord2(result) || !Array.isArray(result.answers)) {
     return null;
   }
+  const hasExplicitType = result.type === import_chatkit_types4.REQUEST_USER_INPUT_RESULT_TYPE;
   const answers = result.answers.map(normalizeAnswer);
   if (answers.some((answer) => answer === null)) {
     return null;
   }
-  return answers;
+  return {
+    answers,
+    hasExplicitType
+  };
 }
 function getRequestUserInputResultCardData(content, messages) {
   const data = isRecord2(content.data) ? content.data : null;
   if (data?.status !== "success") {
     return null;
   }
-  const toolCall = findRequestUserInputClientToolCallById(messages, content.id);
-  if (!toolCall) {
+  const result = parseResultOutput(data.output);
+  if (!result || result.answers.length === 0) {
     return null;
   }
-  const answers = parseResultOutput(data.output);
-  if (!answers || answers.length === 0) {
-    return null;
+  if (!result.hasExplicitType) {
+    const toolCall = findRequestUserInputClientToolCallById(
+      messages,
+      content.id
+    );
+    if (!toolCall) {
+      return null;
+    }
   }
   return {
     toolCallId: content.id,
-    answers
+    answers: result.answers
   };
 }
 function RequestUserInputResultCard({
@@ -6552,10 +6673,15 @@ function Chat({
           if (!force && !shouldAutoScrollRef.current) {
             return;
           }
-          viewport.scrollTo({
-            top: viewport.scrollHeight,
-            behavior: smooth ? "smooth" : "instant"
-          });
+          const top = viewport.scrollHeight;
+          if (typeof viewport.scrollTo === "function") {
+            viewport.scrollTo({
+              top,
+              behavior: smooth ? "smooth" : "instant"
+            });
+          } else {
+            viewport.scrollTop = top;
+          }
         }
       });
     },