@xpert-ai/chatkit-ui 0.5.3 → 0.5.4

package/dist/index.cjs

@@ -2342,6 +2342,14 @@ var en_US_default = {
     },
     hitl: {
       title: "Action review",
+      mcpElicitationTitle: "MCP Elicitation",
+      fieldProgress: "Field {{current}}/{{total}}",
+      requiredUnanswered: "1 required unanswered",
+      requiredAnswered: "All required fields answered",
+      true: "True",
+      false: "False",
+      cancel: "Cancel",
+      elicitationSubmit: "Submit",
       actionProgress: "{{current}} of {{total}}",
       previousAction: "Previous action",
       nextAction: "Next action",
@@ -2834,6 +2842,14 @@ var zh_CN_default = {
     },
     hitl: {
       title: "\u64CD\u4F5C\u5BA1\u6838",
+      mcpElicitationTitle: "MCP Elicitation",
+      fieldProgress: "\u5B57\u6BB5 {{current}}/{{total}}",
+      requiredUnanswered: "1 \u4E2A\u5FC5\u586B\u9879\u5F85\u56DE\u7B54",
+      requiredAnswered: "\u5FC5\u586B\u9879\u5DF2\u56DE\u7B54",
+      true: "\u662F",
+      false: "\u5426",
+      cancel: "\u53D6\u6D88",
+      elicitationSubmit: "\u63D0\u4EA4",
       actionProgress: "{{current}} / {{total}}",
       previousAction: "\u4E0A\u4E00\u4E2A\u64CD\u4F5C",
       nextAction: "\u4E0B\u4E00\u4E2A\u64CD\u4F5C",
@@ -6109,6 +6125,199 @@ function HITLApprovalPanel({
   onDismiss,
   attachToComposer = true,
   className
+}) {
+  if (request?.request.elicitation?.kind === "mcp_elicitation" && request.request.actionRequests.length === 1 && request.request.actionRequests[0]?.name === request.request.elicitation.actionName) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      MCPBooleanElicitationPanel,
+      {
+        request,
+        onSubmit,
+        onDismiss,
+        attachToComposer,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    ActionReviewPanel,
+    {
+      request,
+      onSubmit,
+      onDismiss,
+      attachToComposer,
+      className
+    }
+  );
+}
+function MCPBooleanElicitationPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses4();
+  const [decision, setDecision] = React19.useState(
+    null
+  );
+  const elicitation = request?.request.elicitation;
+  const action = request?.request.actionRequests.find(
+    (candidate) => candidate.name === elicitation?.actionName
+  );
+  React19.useEffect(() => {
+    setDecision(null);
+  }, [request?.id]);
+  React19.useEffect(() => {
+    if (!request || !onDismiss) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      if (event.key !== "Escape" && event.key !== "Esc") return;
+      event.preventDefault();
+      onDismiss();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onDismiss, request]);
+  if (!request || !elicitation || !action) return null;
+  const fieldTitle = elicitation.field.title ?? action.name;
+  const options = [
+    {
+      decision: "approve",
+      label: t("composer.hitl.true")
+    },
+    {
+      decision: "reject",
+      label: t("composer.hitl.false")
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "section",
+    {
+      "aria-label": t("composer.hitl.mcpElicitationTitle"),
+      "aria-live": "polite",
+      className: cn(
+        "mx-2 border border-border bg-background/95 shadow-sm",
+        rounded.density.section,
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5 font-medium text-muted-foreground",
+              rounded.density.eyebrow
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.ShieldCheck, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: t("composer.hitl.mcpElicitationTitle") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("space-y-2.5", rounded.density.body), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: t("composer.hitl.fieldProgress", { current: 1, total: 1 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: decision ? t("composer.hitl.requiredAnswered") : t("composer.hitl.requiredUnanswered") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "h3",
+              {
+                className: cn(
+                  "font-semibold text-foreground",
+                  rounded.density.title
+                ),
+                children: fieldTitle
+              }
+            ),
+            action.description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 whitespace-pre-wrap text-sm leading-5 text-muted-foreground", children: action.description }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "radiogroup", "aria-label": fieldTitle, className: "grid gap-1.5", children: options.map((option) => {
+            const selected = decision === option.decision;
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": selected,
+                onClick: () => setDecision(option.decision),
+                className: cn(
+                  "flex w-full items-center gap-2.5 border px-3 py-2 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  rounded.control,
+                  selected ? "border-primary/50 bg-primary/10 text-foreground" : "border-border bg-background text-foreground/85 hover:bg-muted/70"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                        selected ? "border-primary" : "border-muted-foreground/45"
+                      ),
+                      children: selected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-2 w-2 rounded-full bg-primary" }) : null
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: option.label })
+                ]
+              },
+              option.decision
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "div",
+          {
+            className: cn("flex items-center justify-end", rounded.density.footer),
+            children: [
+              onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDismiss,
+                  className: cn(
+                    "inline-flex items-center justify-center font-medium text-muted-foreground hover:text-foreground",
+                    rounded.control,
+                    rounded.density.dismissButton
+                  ),
+                  children: t("composer.hitl.cancel")
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  disabled: !decision,
+                  onClick: () => {
+                    if (decision) onSubmit([{ type: decision }]);
+                  },
+                  className: cn(
+                    "inline-flex shrink-0 items-center justify-center gap-1.5 bg-primary font-semibold text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-45",
+                    rounded.control,
+                    rounded.density.continueButton
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.CornerDownLeft, { className: rounded.density.continueIcon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: t("composer.hitl.elicitationSubmit") })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionReviewPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
 }) {
   const { t } = useChatkitTranslation();
   const rounded = useRoundedClasses4();

package/dist/index.js

@@ -2344,6 +2344,14 @@ var en_US_default = {
     },
     hitl: {
       title: "Action review",
+      mcpElicitationTitle: "MCP Elicitation",
+      fieldProgress: "Field {{current}}/{{total}}",
+      requiredUnanswered: "1 required unanswered",
+      requiredAnswered: "All required fields answered",
+      true: "True",
+      false: "False",
+      cancel: "Cancel",
+      elicitationSubmit: "Submit",
       actionProgress: "{{current}} of {{total}}",
       previousAction: "Previous action",
       nextAction: "Next action",
@@ -2836,6 +2844,14 @@ var zh_CN_default = {
     },
     hitl: {
       title: "\u64CD\u4F5C\u5BA1\u6838",
+      mcpElicitationTitle: "MCP Elicitation",
+      fieldProgress: "\u5B57\u6BB5 {{current}}/{{total}}",
+      requiredUnanswered: "1 \u4E2A\u5FC5\u586B\u9879\u5F85\u56DE\u7B54",
+      requiredAnswered: "\u5FC5\u586B\u9879\u5DF2\u56DE\u7B54",
+      true: "\u662F",
+      false: "\u5426",
+      cancel: "\u53D6\u6D88",
+      elicitationSubmit: "\u63D0\u4EA4",
       actionProgress: "{{current}} / {{total}}",
       previousAction: "\u4E0A\u4E00\u4E2A\u64CD\u4F5C",
       nextAction: "\u4E0B\u4E00\u4E2A\u64CD\u4F5C",
@@ -6153,6 +6169,199 @@ function HITLApprovalPanel({
   onDismiss,
   attachToComposer = true,
   className
+}) {
+  if (request?.request.elicitation?.kind === "mcp_elicitation" && request.request.actionRequests.length === 1 && request.request.actionRequests[0]?.name === request.request.elicitation.actionName) {
+    return /* @__PURE__ */ jsx22(
+      MCPBooleanElicitationPanel,
+      {
+        request,
+        onSubmit,
+        onDismiss,
+        attachToComposer,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx22(
+    ActionReviewPanel,
+    {
+      request,
+      onSubmit,
+      onDismiss,
+      attachToComposer,
+      className
+    }
+  );
+}
+function MCPBooleanElicitationPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses4();
+  const [decision, setDecision] = React19.useState(
+    null
+  );
+  const elicitation = request?.request.elicitation;
+  const action = request?.request.actionRequests.find(
+    (candidate) => candidate.name === elicitation?.actionName
+  );
+  React19.useEffect(() => {
+    setDecision(null);
+  }, [request?.id]);
+  React19.useEffect(() => {
+    if (!request || !onDismiss) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      if (event.key !== "Escape" && event.key !== "Esc") return;
+      event.preventDefault();
+      onDismiss();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onDismiss, request]);
+  if (!request || !elicitation || !action) return null;
+  const fieldTitle = elicitation.field.title ?? action.name;
+  const options = [
+    {
+      decision: "approve",
+      label: t("composer.hitl.true")
+    },
+    {
+      decision: "reject",
+      label: t("composer.hitl.false")
+    }
+  ];
+  return /* @__PURE__ */ jsxs14(
+    "section",
+    {
+      "aria-label": t("composer.hitl.mcpElicitationTitle"),
+      "aria-live": "polite",
+      className: cn(
+        "mx-2 border border-border bg-background/95 shadow-sm",
+        rounded.density.section,
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5 font-medium text-muted-foreground",
+              rounded.density.eyebrow
+            ),
+            children: [
+              /* @__PURE__ */ jsx22(ShieldCheck, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx22("span", { children: t("composer.hitl.mcpElicitationTitle") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs14("div", { className: cn("space-y-2.5", rounded.density.body), children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsx22("span", { children: t("composer.hitl.fieldProgress", { current: 1, total: 1 }) }),
+            /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ jsx22("span", { children: decision ? t("composer.hitl.requiredAnswered") : t("composer.hitl.requiredUnanswered") })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx22(
+              "h3",
+              {
+                className: cn(
+                  "font-semibold text-foreground",
+                  rounded.density.title
+                ),
+                children: fieldTitle
+              }
+            ),
+            action.description ? /* @__PURE__ */ jsx22("p", { className: "mt-1 whitespace-pre-wrap text-sm leading-5 text-muted-foreground", children: action.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx22("div", { role: "radiogroup", "aria-label": fieldTitle, className: "grid gap-1.5", children: options.map((option) => {
+            const selected = decision === option.decision;
+            return /* @__PURE__ */ jsxs14(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": selected,
+                onClick: () => setDecision(option.decision),
+                className: cn(
+                  "flex w-full items-center gap-2.5 border px-3 py-2 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  rounded.control,
+                  selected ? "border-primary/50 bg-primary/10 text-foreground" : "border-border bg-background text-foreground/85 hover:bg-muted/70"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx22(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                        selected ? "border-primary" : "border-muted-foreground/45"
+                      ),
+                      children: selected ? /* @__PURE__ */ jsx22("span", { className: "h-2 w-2 rounded-full bg-primary" }) : null
+                    }
+                  ),
+                  /* @__PURE__ */ jsx22("span", { children: option.label })
+                ]
+              },
+              option.decision
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: cn("flex items-center justify-end", rounded.density.footer),
+            children: [
+              onDismiss ? /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDismiss,
+                  className: cn(
+                    "inline-flex items-center justify-center font-medium text-muted-foreground hover:text-foreground",
+                    rounded.control,
+                    rounded.density.dismissButton
+                  ),
+                  children: t("composer.hitl.cancel")
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs14(
+                "button",
+                {
+                  type: "button",
+                  disabled: !decision,
+                  onClick: () => {
+                    if (decision) onSubmit([{ type: decision }]);
+                  },
+                  className: cn(
+                    "inline-flex shrink-0 items-center justify-center gap-1.5 bg-primary font-semibold text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-45",
+                    rounded.control,
+                    rounded.density.continueButton
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx22(CornerDownLeft2, { className: rounded.density.continueIcon }),
+                    /* @__PURE__ */ jsx22("span", { children: t("composer.hitl.elicitationSubmit") })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionReviewPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
 }) {
   const { t } = useChatkitTranslation();
   const rounded = useRoundedClasses4();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,
@@ -60,8 +60,8 @@
     "uuid": "^11.1.0",
     "zod": "^4.1.12",
     "@xpert-ai/a2ui-react": "~0.1.0",
-    "@xpert-ai/chatkit-web-shared": "~0.4.3",
-    "@xpert-ai/chatkit-types": "~0.5.2"
+    "@xpert-ai/chatkit-types": "~0.5.3",
+    "@xpert-ai/chatkit-web-shared": "~0.4.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

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

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

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-59Kj6DwN.js";import{_ as i}from"./index-Wv8qdZGD.js";import"./chunk-FMBD7UC4-DHgDQnYu.js";import"./chunk-YZCP3GAM-BsCgIURb.js";import"./chunk-55IACEB6-M7fxqf0U.js";import"./chunk-EDXVE4YY-Bk0s3eDs.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-DK7Wbhmk.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-59Kj6DwN.js";import{_ as i}from"./index-Wv8qdZGD.js";import"./chunk-FMBD7UC4-DHgDQnYu.js";import"./chunk-YZCP3GAM-BsCgIURb.js";import"./chunk-55IACEB6-M7fxqf0U.js";import"./chunk-EDXVE4YY-Bk0s3eDs.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-BurOzDBp.js

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

package/dist/app/assets/stateDiagram-v2-QKLJ7IA2-WTCPU8pQ.js

@@ -1 +0,0 @@
-import{s as t,b as r,a,S as s}from"./chunk-OYMX7WX6-DId-EsyC.js";import{_ as i}from"./index-Wv8qdZGD.js";import"./chunk-55IACEB6-M7fxqf0U.js";import"./chunk-EDXVE4YY-Bk0s3eDs.js";var l={parser:a,get db(){return new s(2)},renderer:r,styles:t,init:i(e=>{e.state||(e.state={}),e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};export{l as diagram};