@xpert-ai/chatkit-ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -115,6 +115,9 @@ import "@langchain/core/messages/tool";
 import {
   ChatMessageEventTypeEnum,
   ChatMessageTypeEnum,
+  REQUEST_USER_INPUT_RESULT_PURPOSE_IMPLEMENTATION_CONFIRMATION,
+  REQUEST_USER_INPUT_RESULT_PURPOSE_PLAN_CLARIFICATION,
+  REQUEST_USER_INPUT_RESULT_TYPE,
   REQUEST_USER_INPUT_TOOL_NAME,
   isLangGraphInterruptPayload,
   isClientToolRequest
@@ -1159,6 +1162,9 @@ var en_US_default = {
   },
   markdown: {
     copy: "Copy",
+    plan: {
+      download: "Download Markdown"
+    },
     mermaid: {
       title: "Mermaid",
       diagram: "Diagram",
@@ -1331,6 +1337,9 @@ var zh_CN_default = {
   },
   markdown: {
     copy: "\u590D\u5236",
+    plan: {
+      download: "\u4E0B\u8F7D Markdown"
+    },
     mermaid: {
       title: "Mermaid",
       diagram: "\u56FE\u8868",
@@ -3535,7 +3544,7 @@ import {
   memo,
   useState as useState9
 } from "react";
-import { CheckIcon as CheckIcon2, CopyIcon as CopyIcon2 } from "lucide-react";
+import { CheckIcon as CheckIcon2, CopyIcon as CopyIcon2, DownloadIcon as DownloadIcon2 } from "lucide-react";
 
 // src/components/thread/syntax-highlighter.tsx
 import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
@@ -4108,17 +4117,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) => 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__ */ jsx21(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm, remarkMath],
+      rehypePlugins: [rehypeKatex],
+      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__ */ jsxs12(
+    "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__ */ jsxs12("div", { className: "absolute top-3 right-3 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx21(
+            TooltipIconButton,
+            {
+              tooltip: t("markdown.plan.download"),
+              onClick: onDownload,
+              className: "bg-background/80 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx21(DownloadIcon2, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs12(
+            TooltipIconButton,
+            {
+              tooltip: isCopied ? t("messageActions.copied") : t("markdown.copy"),
+              onClick: onCopy,
+              className: "bg-background/80 text-muted-foreground hover:text-foreground",
+              children: [
+                !isCopied && /* @__PURE__ */ jsx21(CopyIcon2, { className: "size-4" }),
+                isCopied && /* @__PURE__ */ jsx21(CheckIcon2, { className: "size-4" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx21("div", { className: "w-full max-h-[80vh] py-3 pr-4 pl-4 overflow-auto", children: /* @__PURE__ */ jsx21(MarkdownContent, { children: planMarkdown }) })
+      ]
+    }
+  );
+}
 var isMermaidBlockChild = (child) => isValidElement(child) && child.type === MermaidBlock;
 var isMermaidCodeElement = (child) => isValidElement(child) && typeof child.props.className === "string" && child.props.className.includes("language-mermaid");
-var useCopyToClipboard = ({
+function useCopyToClipboard({
   copiedDuration = 3e3
-} = {}) => {
+} = {}) {
   const [isCopied, setIsCopied] = useState9(false);
   const copyToClipboard = (value) => {
     if (!value) return;
@@ -4128,7 +4286,7 @@ var useCopyToClipboard = ({
     });
   };
   return { isCopied, copyToClipboard };
-};
+}
 var CodeHeader = ({ language, code }) => {
   const { t } = useChatkitTranslation();
   const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -4138,85 +4296,78 @@ var CodeHeader = ({ language, code }) => {
   };
   return /* @__PURE__ */ jsxs12("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__ */ jsx21("span", { className: "lowercase [&>span]:text-xs", children: language }),
-    /* @__PURE__ */ jsxs12(
-      TooltipIconButton,
-      {
-        tooltip: t("markdown.copy"),
-        onClick: onCopy,
-        children: [
-          !isCopied && /* @__PURE__ */ jsx21(CopyIcon2, {}),
-          isCopied && /* @__PURE__ */ jsx21(CheckIcon2, {})
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs12(TooltipIconButton, { tooltip: t("markdown.copy"), onClick: onCopy, children: [
+      !isCopied && /* @__PURE__ */ jsx21(CopyIcon2, {}),
+      isCopied && /* @__PURE__ */ jsx21(CheckIcon2, {})
+    ] })
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ jsx21(
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ jsx21(
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "a",
     {
       className: cn(
@@ -4225,50 +4376,44 @@ var defaultComponents = {
       ),
       target: "_blank",
       rel: "noopener noreferrer",
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  blockquote: ({
-    className,
-    node: _node,
-    ...props
-  }) => /* @__PURE__ */ jsx21(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "blockquote",
     {
       className: cn(
         "border-l-4 border-border pl-6 italic text-muted-foreground",
         className
       ),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ jsx21(
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ jsx21(
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "hr",
     {
       className: cn("my-5 border-b", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  table: ({
-    className,
-    node: _node,
-    style,
-    ...props
-  }) => /* @__PURE__ */ jsx21(
+  table: ({ className, style, ...props }) => /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "markdown-table-container",
@@ -4284,17 +4429,12 @@ var defaultComponents = {
             lineHeight: markdownTableLineHeight,
             ...style
           },
-          ...props
+          ...stripMarkdownNode(props)
         }
       )
     }
   ),
-  th: ({
-    className,
-    node: _node,
-    style,
-    ...props
-  }) => /* @__PURE__ */ jsx21(
+  th: ({ className, style, ...props }) => /* @__PURE__ */ jsx21(
     "th",
     {
       className: cn(
@@ -4307,15 +4447,10 @@ var defaultComponents = {
         paddingBlock: markdownTableCellPaddingBlock,
         ...style
       },
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  td: ({
-    className,
-    node: _node,
-    style,
-    ...props
-  }) => /* @__PURE__ */ jsx21(
+  td: ({ className, style, ...props }) => /* @__PURE__ */ jsx21(
     "td",
     {
       className: cn(
@@ -4328,27 +4463,27 @@ var defaultComponents = {
         paddingBlock: markdownTableCellPaddingBlock,
         ...style
       },
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ jsx21(
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "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__ */ jsx21(
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsx21(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
-      ...props
+      ...stripMarkdownNode(props)
     }
   ),
-  pre: ({ className, children, node: _node }) => Children.toArray(children).length === 1 && (isMermaidBlockChild(Children.toArray(children)[0]) || isMermaidCodeElement(Children.toArray(children)[0])) ? /* @__PURE__ */ jsx21(Fragment3, { children }) : /* @__PURE__ */ jsx21(
+  pre: ({ className, children }) => Children.toArray(children).length === 1 && (isMermaidBlockChild(Children.toArray(children)[0]) || isMermaidCodeElement(Children.toArray(children)[0])) ? /* @__PURE__ */ jsx21(Fragment3, { children }) : /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -4361,7 +4496,6 @@ var defaultComponents = {
   code: ({
     className,
     children,
-    node: _node,
     style,
     ...props
   }) => {
@@ -4375,21 +4509,8 @@ var defaultComponents = {
         return /* @__PURE__ */ jsx21(MermaidBlock, { code: normalizedCode });
       }
       return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-        /* @__PURE__ */ jsx21(
-          CodeHeader,
-          {
-            language,
-            code: normalizedCode
-          }
-        ),
-        /* @__PURE__ */ jsx21(
-          SyntaxHighlighter,
-          {
-            language,
-            className,
-            children: normalizedCode
-          }
-        )
+        /* @__PURE__ */ jsx21(CodeHeader, { language, code: normalizedCode }),
+        /* @__PURE__ */ jsx21(SyntaxHighlighter, { language, className, children: normalizedCode })
       ] });
     }
     if (isBlockCode) {
@@ -4400,7 +4521,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$/, "")
         }
       );
@@ -4417,21 +4538,15 @@ var defaultComponents = {
           paddingBlock: markdownInlineCodePaddingBlock,
           ...style
         },
-        ...props,
+        ...stripMarkdownNode(props),
         children
       }
     );
   }
 };
 var MarkdownTextImpl = ({ children }) => {
-  return /* @__PURE__ */ jsx21("div", { className: "markdown-content", children: /* @__PURE__ */ jsx21(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm, remarkMath],
-      rehypePlugins: [rehypeKatex],
-      components: defaultComponents,
-      children
-    }
+  return /* @__PURE__ */ jsx21("div", { className: "markdown-content", children: splitProposedPlanSegments(children).map(
+    (segment, index) => segment.type === "plan" ? /* @__PURE__ */ jsx21(PlanCard, { children: segment.content }, index) : /* @__PURE__ */ jsx21(MarkdownContent, { children: segment.content }, index)
   ) });
 };
 var MarkdownText = memo(MarkdownTextImpl);
@@ -5102,6 +5217,7 @@ function ToolComponentGroup({
 // src/components/thread/messages/request-user-input-result-card.tsx
 import "react";
 import {
+  REQUEST_USER_INPUT_RESULT_TYPE as REQUEST_USER_INPUT_RESULT_TYPE2,
   REQUEST_USER_INPUT_TOOL_NAME as REQUEST_USER_INPUT_TOOL_NAME2
 } from "@xpert-ai/chatkit-types";
 import { CheckCircle2 as CheckCircle23 } from "lucide-react";
@@ -5179,28 +5295,37 @@ function parseResultOutput(output) {
   if (!isRecord2(result) || !Array.isArray(result.answers)) {
     return null;
   }
+  const hasExplicitType = result.type === REQUEST_USER_INPUT_RESULT_TYPE2;
   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({
@@ -6588,10 +6713,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;
+          }
         }
       });
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,
@@ -57,9 +57,9 @@
     "tw-animate-css": "^1.4.0",
     "uuid": "^11.1.0",
     "zod": "^4.1.12",
-    "@xpert-ai/chatkit-types": "~0.2.0",
-    "@xpert-ai/chatkit-web-shared": "~0.1.0",
-    "@xpert-ai/a2ui-react": "~0.1.0"
+    "@xpert-ai/a2ui-react": "~0.1.0",
+    "@xpert-ai/chatkit-web-shared": "~0.1.1",
+    "@xpert-ai/chatkit-types": "~0.2.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/dist/app/assets/channel-QFEl2WH8.js

@@ -1 +0,0 @@
-import{aq as o,ar as n}from"./index-izi7yD-m.js";const t=(r,a)=>o.lang.round(n.parse(r)[a]);export{t as c};

package/dist/app/assets/classDiagram-6PBFFD2Q-CUn8MbgR.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-0tBP8iWY.js";import{_ as i}from"./index-izi7yD-m.js";import"./chunk-FMBD7UC4-C-jb70xY.js";import"./chunk-YZCP3GAM-C9v1WHTx.js";import"./chunk-55IACEB6-C6Of3RNV.js";import"./chunk-EDXVE4YY-D9VnbCF6.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/classDiagram-v2-HSJHXN6E-CUn8MbgR.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-0tBP8iWY.js";import{_ as i}from"./index-izi7yD-m.js";import"./chunk-FMBD7UC4-C-jb70xY.js";import"./chunk-YZCP3GAM-C9v1WHTx.js";import"./chunk-55IACEB6-C6Of3RNV.js";import"./chunk-EDXVE4YY-D9VnbCF6.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/clone-BMPaQ6PL.js

@@ -1 +0,0 @@
-import{b as r}from"./graph-Dr0CyUTm.js";var e=4;function a(o){return r(o,e)}export{a as c};