@ant-design/agentic-ui 2.0.0

package/dist/components/ActionIconBox/style.js

@@ -0,0 +1,117 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/ActionIconBox/style.ts
+import {
+  useEditorStyleRegister
+} from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      minWidth: 28,
+      minHeight: 28,
+      lineHeight: 1,
+      display: "flex",
+      cursor: "pointer",
+      boxSizing: "border-box",
+      padding: 4,
+      alignItems: "center",
+      gap: 8,
+      justifyContent: "center",
+      borderRadius: "var(--radius-control-sm)",
+      fontSize: "1em",
+      color: "var(--color-gray-text-secondary)",
+      transition: "color 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      "&-title": {
+        font: "var(--font-text-body-base)",
+        letterSpacing: "var(--letter-spacing-body-base, normal)",
+        color: "var(--color-gray-text-default)"
+      },
+      "&-light": {
+        "&:hover": {
+          background: "var(--color-gray-control-fill-active)",
+          boxSizing: "border-box"
+        }
+      },
+      "&-dark": {
+        color: "#fff",
+        "&:hover": {
+          background: "#444",
+          boxSizing: "border-box"
+        }
+      },
+      "&-active": {
+        color: "var(--color-gray-a9)"
+      },
+      "&-noPadding": {
+        padding: 0
+      },
+      "&-standalone": {
+        minWidth: "inherit",
+        minHeight: "inherit",
+        maxHeight: "inherit",
+        padding: "8px 12px",
+        color: "#000000",
+        borderRadius: 18,
+        border: "1px solid var(--color-gray-border-light)",
+        background: `radial-gradient(22% 66% at 96% 113%, rgba(255, 255, 245, 0.52) 0%, rgba(230, 238, 255, 0) 100%),radial-gradient(14% 234% at 100% 50%, rgba(162, 255, 255, 0.28) 0%, rgba(153, 202, 255, 0.1193) 13%, rgba(229, 189, 255, 0.0826) 38%, rgba(231, 211, 252, 0.0544) 59%, rgba(235, 255, 245, 0) 100%)`
+      },
+      "&-danger": {
+        "&:hover": {
+          color: token.colorError,
+          background: token.colorErrorBgHover
+        }
+      },
+      "&-primary": {
+        "&:hover": {
+          color: token.colorPrimary,
+          background: token.colorPrimaryBgHover
+        }
+      },
+      "&-border-less": {
+        height: "auto",
+        lineHeight: 1,
+        background: "none!important",
+        "&:hover": {
+          color: token.colorPrimary,
+          background: "none!important"
+        }
+      },
+      "&-transform": {
+        "&:hover": {
+          color: token.colorPrimary,
+          transform: "translateX(8px) scale(1.1)",
+          background: "none"
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("ActionIconBox", (token) => {
+    const proChatToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/components/ActionItemBox/ActionItemBox.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type ActionItemBoxProps = {
+    onClick: () => void;
+    icon?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    iconSize?: number;
+    index?: number;
+    style?: React.CSSProperties;
+    size?: 'small' | 'large' | 'default';
+    onInit?: () => void;
+    standalone?: boolean;
+    compact?: boolean;
+    hoverBg?: boolean;
+    disabled?: boolean;
+};
+export declare const ActionItemBox: {
+    (props: ActionItemBoxProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/ActionItemBox/ActionItemBox.js

@@ -0,0 +1,162 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/components/ActionItemBox/ActionItemBox.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import { motion } from "framer-motion";
+import React, { useContext, useEffect } from "react";
+import { useStyle } from "./style";
+var ActionItemBox = (props) => {
+  var _a, _b;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const basePrefixCls = getPrefixCls("agent-chat-action-item-box");
+  const { wrapSSR, hashId } = useStyle(basePrefixCls);
+  useEffect(() => {
+    var _a2;
+    (_a2 = props == null ? void 0 : props.onInit) == null ? void 0 : _a2.call(props);
+  }, []);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        initial: "hidden",
+        animate: "visible",
+        style: __spreadValues({
+          flex: props.size ? "none" : 1,
+          display: "flex",
+          height: "min-content"
+        }, props.style),
+        variants: {
+          hidden: { x: -10, opacity: 0 },
+          visible: {
+            x: 0,
+            opacity: 1
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${basePrefixCls}-container`,
+            {
+              [`${basePrefixCls}-container-${props.size}`]: props.size,
+              [`${basePrefixCls}-container-hover-bg`]: (_a = props.hoverBg) != null ? _a : true
+            },
+            hashId
+          )
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onClick: props.disabled ? void 0 : props.onClick,
+            className: classNames(basePrefixCls, hashId, {
+              [`${basePrefixCls}-${props.size}`]: props.size,
+              [`${basePrefixCls}-has-icon`]: !!props.icon && !props.compact,
+              [`${basePrefixCls}-standalone`]: props.standalone,
+              [`${basePrefixCls}-compact`]: props.compact,
+              [`${basePrefixCls}-hover-bg`]: (_b = props.hoverBg) != null ? _b : true,
+              [`${basePrefixCls}-disabled`]: props.disabled
+            })
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: props.size === "small" ? 4 : 12,
+                alignItems: "center",
+                maxWidth: "100%",
+                flex: 1,
+                minWidth: 0
+              }
+            },
+            props.icon && !props.compact ? /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  width: props.iconSize || 24,
+                  height: props.iconSize || 24,
+                  minWidth: props.iconSize || 24,
+                  minHeight: props.iconSize || 24
+                },
+                className: classNames(
+                  `${basePrefixCls}-icon`,
+                  {
+                    [`${basePrefixCls}-icon-${props.size}`]: props.size
+                  },
+                  hashId
+                )
+              },
+              props.icon.startsWith("http") ? /* @__PURE__ */ React.createElement(
+                "img",
+                {
+                  src: props.icon,
+                  alt: "action-box-icon",
+                  style: {
+                    height: "100%",
+                    maxWidth: props.iconSize || 24,
+                    maxHeight: props.iconSize || 24
+                  }
+                }
+              ) : /* @__PURE__ */ React.createElement(
+                "span",
+                {
+                  style: {
+                    fontSize: 16,
+                    fontWeight: 500
+                  }
+                },
+                props.icon
+              )
+            ) : null,
+            /* @__PURE__ */ React.createElement("div", { className: classNames(`${basePrefixCls}-content`, hashId) }, /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                className: classNames(
+                  `${basePrefixCls}-content-title`,
+                  hashId,
+                  {
+                    [`${basePrefixCls}-content-title-no-description`]: !props.description
+                  }
+                )
+              },
+              props.title
+            ), props.description && !props.compact ? /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                className: classNames(
+                  `${basePrefixCls}-content-description`,
+                  hashId
+                ),
+                style: {
+                  maxWidth: `310px`
+                }
+              },
+              props.description
+            ) : null)
+          )
+        )
+      )
+    )
+  );
+};
+ActionItemBox.displayName = "ActionItemBox";
+export {
+  ActionItemBox
+};

package/dist/components/ActionItemBox/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionItemBox } from './ActionItemBox';
+export type { ActionItemBoxProps } from './ActionItemBox';
+export { useStyle } from './style';

package/dist/components/ActionItemBox/index.js

@@ -0,0 +1,7 @@
+// src/components/ActionItemBox/index.ts
+import { ActionItemBox } from "./ActionItemBox";
+import { useStyle } from "./style";
+export {
+  ActionItemBox,
+  useStyle
+};

package/dist/components/ActionItemBox/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * ActionItemBox
+ * @param prefixCls
+ * @returns
+ */
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/components/ActionItemBox/style.js

@@ -0,0 +1,373 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/ActionItemBox/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      borderRadius: "11px",
+      display: "flex",
+      alignItems: "center",
+      padding: "8px 12px",
+      width: "100%",
+      cursor: "pointer",
+      gap: "12px",
+      justifyContent: "space-between",
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      backgroundColor: "#FFF",
+      boxShadow: "var(--shadow-border-base)",
+      height: 32,
+      "&-overflow-container": {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        background: "linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, #FFFFFF 100%)",
+        borderRadius: 12,
+        width: 72,
+        height: "100%",
+        // 防止遮挡下部的scrollbar
+        zIndex: 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        "&-placeholder": {
+          width: 40,
+          height: "100%",
+          backgroundColor: "linear-gradient(270deg, #F7F8F9 57%, rgba(255, 255, 255, 0) 100%)"
+        },
+        "&-indicator": {
+          flex: 1,
+          pointerEvents: "auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 32,
+          height: 32,
+          zIndex: 10,
+          background: "linear-gradient(270deg, #FFFFFF 57%, rgba(255, 255, 255, 0) 100%)",
+          border: "none",
+          boxShadow: "none",
+          borderRadius: 0
+        },
+        "&-menu": {
+          width: 32,
+          height: 32,
+          borderRadius: "var(--radius-control-base)",
+          background: "#FFFFFF",
+          boxShadow: "inset 0px 0px 1px 0px rgba(0, 19, 41, 0.15)",
+          color: "var(--color-gray-text-secondary)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          "&:hover": {
+            backgroundColor: "var(--color-gray-control-fill-hover)",
+            backgroundImage: "none"
+          },
+          "&:active": {
+            backgroundColor: "var(--color-gray-control-fill-active)",
+            backgroundImage: "none"
+          },
+          "&-disabled": {
+            backgroundColor: "var(--color-gray-bg-card-white)",
+            color: "var(--color-gray-text-disabled)",
+            cursor: "not-allowed",
+            backgroundImage: "none",
+            boxShadow: "var(--shadow-border-base)"
+          },
+          "&-disabled:hover": {
+            backgroundColor: "var(--color-gray-bg-card-white)",
+            backgroundImage: "none"
+          },
+          "&-disabled:active": {
+            backgroundColor: "var(--color-gray-bg-card-white)",
+            backgroundImage: "none"
+          },
+          "& svg": {
+            width: 16,
+            height: 16
+          }
+        },
+        "&-popup": {
+          position: "relative",
+          maxHeight: 327,
+          overflowY: "auto",
+          overscrollBehaviorX: "contain",
+          overscrollBehaviorY: "contain",
+          touchAction: "pan-y",
+          WebkitOverflowScrolling: "touch",
+          background: "var(--color-gray-bg-card-white)",
+          borderRadius: "var(--radius-card-base)",
+          marginBottom: 8,
+          zIndex: 1e3,
+          padding: 8,
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          boxShadow: "var(--shadow-popover-base)",
+          // Hide scrollbar by default, show on hover
+          scrollbarWidth: "thin",
+          // Firefox - thin scrollbar
+          scrollbarColor: "transparent transparent",
+          // Firefox - hide by default
+          ["&::-webkit-scrollbar"]: {
+            width: 6,
+            // WebKit
+            background: "transparent"
+          },
+          ["&::-webkit-scrollbar-thumb"]: {
+            background: "transparent",
+            borderRadius: 3
+          },
+          // Show scrollbar on hover
+          ["&:hover"]: {
+            scrollbarColor: "rgba(0, 0, 0, 0.2) transparent",
+            // Firefox - show on hover
+            ["&::-webkit-scrollbar-thumb"]: {
+              background: "rgba(0, 0, 0, 0.2)"
+            },
+            ["&::-webkit-scrollbar-thumb:hover"]: {
+              background: "rgba(0, 0, 0, 0.3)"
+            }
+          },
+          "> *": {
+            width: "100%",
+            maxWidth: "100%",
+            boxSizing: "border-box"
+          },
+          "&-item": {
+            display: "flex",
+            alignItems: "stretch",
+            gap: 8,
+            alignSelf: "stretch",
+            width: "100%",
+            minWidth: 0,
+            borderRadius: 8,
+            transition: "background-color 0.2s ease"
+          },
+          // make the wrapper around entry.node fill available width
+          ['&-item > div[draggable="false"]']: {
+            flex: 1,
+            width: "100%",
+            minWidth: 0,
+            display: "flex"
+          },
+          // ensure the immediate child (motion.div) also stretches
+          ['&-item > div[draggable="false"] > div']: {
+            flex: "1 1 auto",
+            width: "100%",
+            minWidth: 0,
+            display: "flex"
+          },
+          // ensure hover background applies regardless of which node captures hover
+          [`&-item:hover ${token.componentCls}`]: {
+            backgroundColor: "var(--color-gray-control-fill-hover);",
+            backgroundImage: "none",
+            boxShadow: "none"
+          },
+          // drag states
+          [`&-item.${token.componentCls.slice(1)}-dragging`]: {
+            opacity: 0.6
+          },
+          [`&-item.${token.componentCls.slice(1)}-drag-over`]: {
+            backgroundColor: "rgba(22, 119, 255, 0.08)",
+            outline: "1px dashed rgba(22, 119, 255, 0.45)"
+          },
+          // ensure the inner ActionItemBox layout inside popup
+          [`${token.componentCls}-container`]: {
+            background: "transparent",
+            padding: 0,
+            width: "100%",
+            boxShadow: "none",
+            border: "none",
+            "&:hover": {
+              backgroundColor: "transparent",
+              backgroundImage: "none"
+            }
+          },
+          [token.componentCls]: {
+            background: "transparent",
+            boxShadow: "none",
+            border: "none",
+            width: "100%",
+            minHeight: 28,
+            height: 28,
+            lineHeight: "28px",
+            borderRadius: 8,
+            padding: "3px 8px",
+            "&:hover": {
+              backgroundColor: "var(--color-gray-control-fill-hover)",
+              backgroundImage: "none"
+            }
+          },
+          [`${token.componentCls}-option`]: {
+            display: "none"
+          },
+          // drag handle visuals
+          [`${token.componentCls}-drag-handle`]: {
+            width: 14,
+            height: 28,
+            lineHeight: 28,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#505C71",
+            opacity: 0.6,
+            cursor: "grab",
+            userSelect: "none"
+          },
+          [`${token.componentCls}-drag-handle:active`]: {
+            cursor: "grabbing",
+            opacity: 1
+          },
+          [`${token.componentCls}-icon`]: {
+            width: 20,
+            height: 20,
+            borderRadius: 6,
+            backgroundColor: "#F7F9FC"
+          },
+          [`${token.componentCls}-content-description`]: {
+            display: "none"
+          },
+          [`${token.componentCls}-content-title`]: {
+            fontSize: "13px",
+            lineHeight: "28px"
+          }
+        }
+      },
+      "&-container": {
+        borderRadius: "var(--radius-control-base)",
+        position: "relative",
+        backgroundColor: "#FFFFFF",
+        alignItems: "center",
+        width: "100%",
+        cursor: "pointer",
+        overflow: "visible"
+      },
+      "&-icon": {
+        width: 40,
+        height: 40,
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        borderRadius: 12,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        "&-small": {
+          backgroundColor: "transparent",
+          borderRadius: 2
+        }
+      },
+      "&-content": {
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0,
+        maxWidth: "100%",
+        "&-title": {
+          lineHeight: "24px",
+          fontSize: "1em",
+          color: "var(--color-gray-text-default)"
+        },
+        "&-title-no-description": {
+          letterSpacing: "var(--letter-spacing-body-base, normal)",
+          font: "var(--font-text-body-base)",
+          color: "var(--color-gray-text-default)",
+          lineHeight: "20px",
+          fontWeight: "normal"
+        }
+      },
+      "&-option": {
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+      },
+      // hover background for item itself when `-hover-bg` class present
+      ["&-hover-bg:hover"]: {
+        backgroundColor: "var(--color-gray-control-fill-hover)",
+        backgroundImage: "none"
+      },
+      // active (pressed) background for item itself when `-hover-bg` class present
+      ["&-hover-bg:active"]: {
+        backgroundColor: "var(--color-gray-control-fill-active)",
+        backgroundImage: "none"
+      },
+      ["&-container-hover-bg:active " + token.componentCls]: {
+        backgroundColor: "var(--color-gray-control-fill-active)",
+        backgroundImage: "none"
+      },
+      // disabled state: base + suppress hover/active
+      "&-disabled": {
+        backgroundColor: "var(--color-gray-bg-card-white)",
+        color: "var(--color-gray-text-disabled)",
+        cursor: "not-allowed",
+        backgroundImage: "none"
+      },
+      ["&-disabled:hover"]: {
+        backgroundColor: "var(--color-gray-bg-card-white)",
+        backgroundImage: "none"
+      },
+      ["&-disabled:active"]: {
+        backgroundColor: "var(--color-gray-bg-card-white)",
+        backgroundImage: "none"
+      },
+      // when container is active but inner item is disabled, keep disabled bg
+      ["&-container-hover-bg:active " + token.componentCls + "-disabled"]: {
+        backgroundColor: "var(--color-gray-bg-card-white)",
+        backgroundImage: "none"
+      },
+      // disabled text color for inner content
+      [`&-disabled ${token.componentCls}-content-title`]: {
+        color: "var(--color-gray-text-disabled)"
+      },
+      [`&-disabled ${token.componentCls}-content-description`]: {
+        color: "var(--color-gray-text-disabled)"
+      },
+      "&-scroll": {
+        // Hide scrollbar visually but keep scrolling enabled
+        scrollbarWidth: "none",
+        // Firefox
+        msOverflowStyle: "none",
+        // IE/Edge Legacy
+        ["&::-webkit-scrollbar"]: {
+          display: "none",
+          // WebKit
+          width: 0,
+          height: 0,
+          background: "transparent"
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("ActionItemBox", (token) => {
+    const proChatToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(proChatToken), genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};