@alifd/chat 0.3.40-beta.0 → 0.3.40-beta.2

package/es/ai-loading/types.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type CommonProps } from '@alifd/next';
 /**
  * AI Loading 属性
+ * @api
  */
 export interface AILoadingProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
     className?: string;

package/es/button/button.d.ts

@@ -2,8 +2,7 @@
  * @component 按钮
  * @en Button
  * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @remarks [按钮组件] 是一个 [操作类] UI 组件，用于 [触发用户交互动作]，包括点击、悬停等行为，使用户能够 [执行命令、提交表单、切换状态等]。它在卡片中扮演 [核心操作入口] 的角色，通常用于 [表单提交、功能切换、数据操作等场景]。
  * @others
  * ## 无障碍键盘操作指南
  * | 按键    | 说明          |

package/es/button/button.js

@@ -2,8 +2,7 @@
  * @component 按钮
  * @en Button
  * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @remarks [按钮组件] 是一个 [操作类] UI 组件，用于 [触发用户交互动作]，包括点击、悬停等行为，使用户能够 [执行命令、提交表单、切换状态等]。它在卡片中扮演 [核心操作入口] 的角色，通常用于 [表单提交、功能切换、数据操作等场景]。
  * @others
  * ## 无障碍键盘操作指南
  * | 按键    | 说明          |
@@ -24,25 +23,20 @@ import cs from 'classnames';
 import { PREFIX_DEFAULT } from '../utils';
 import { renderCommonIcon } from '../icon';
 const Button = forwardRef((props, ref) => {
-    const { className, size = 'small', icon, type, children } = props, rest = __rest(props, ["className", "size", "icon", "type", "children"]);
-    const iconNode = renderCommonIcon(icon, 'xs');
-    const getChatButtonType = (type) => {
-        if (type === 'secondary') {
-            return 'normal';
-        }
-        if (type === 'normal') {
-            return 'secondary';
-        }
-        return type;
+    const { className, size = 'small', icon, type = 'primary', children, text } = props, rest = __rest(props, ["className", "size", "icon", "type", "children", "text"]);
+    // 根据按钮大小设置对应的图标尺寸
+    const iconSizeMap = {
+        small: 'xs',
+        medium: 'xs',
+        large: 'small'
     };
-    // 目前会把secondary和text都设置为normal， 后续如果需要区分，需要后端配合
-    const validType = getChatButtonType(type);
-    return (React.createElement(NextButton, Object.assign({}, rest, { className: cs(`${PREFIX_DEFAULT}button ${size} ${type}`, className), size: size, type: validType, ref: ref }),
+    const iconNode = renderCommonIcon(icon, iconSizeMap[size]);
+    // 文字按钮，只有 Primary 类型
+    const buttonType = text ? 'primary' : type;
+    return (React.createElement(NextButton, Object.assign({}, rest, { className: cs(`${PREFIX_DEFAULT}button`, size, buttonType, {
+            [`${PREFIX_DEFAULT}button-with-icon`]: !!icon || rest.loading
+        }, className), size: size, type: buttonType, ref: ref, text: text }),
         iconNode,
         children));
 });
-// const ButtonWithSub = assignSubComponent(Button, {
-//     displayName: 'Button',
-// });
-// export * from './types';
 export default ConfigProvider.config(Button);

package/es/button/group.js

@@ -18,26 +18,13 @@
  * | SPACE       | Trigger the onClick event    |
  */
 import { __rest } from "tslib";
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT } from '../utils';
 import Button from './button';
-const ADAPTOR_WIDTH = 600;
 const ButtonGroup = forwardRef((props, ref) => {
     const { className, size = 'small', type = 'row', dataSource, children } = props;
-    const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
-    useEffect(() => {
-        const handleResize = () => {
-            setTimeout(() => {
-                setClientWidth(document.documentElement.clientWidth);
-            }, 100);
-        };
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
     const renderRowButtons = (items) => {
         if (!items || !items.length) {
             return null;
@@ -48,33 +35,9 @@ const ButtonGroup = forwardRef((props, ref) => {
             }
             // Button组件的有些属性不太符合需求， text是一种type
             const _a = button || {}, { buttonType, buttonStatus, label, icon } = _a, others = __rest(_a, ["buttonType", "buttonStatus", "label", "icon"]);
-            return (React.createElement(Button, Object.assign({ className: `single-button ${buttonType + '_' + buttonStatus}`, type: button.buttonType, warning: buttonStatus === 'warning' ? true : false, text: buttonType === 'text' ? true : false, disabled: buttonStatus === 'disabled' ? true : false, loading: buttonStatus === 'loading' ? true : false, icon: icon, size: size }, others), label));
+            return (React.createElement(Button, Object.assign({ className: `single-button ${`${buttonType}_${buttonStatus}`}`, type: buttonType === 'text' ? 'primary' : buttonType, key: button.label, warning: buttonStatus === 'warning', text: buttonType === 'text', disabled: buttonStatus === 'disabled', loading: buttonStatus === 'loading', icon: icon, size: size }, others), label));
         });
     };
-    // 设计稿地址：https://mgdone.alibaba-inc.com/file/141793008176403?fileOpenFrom=home&fileTileSwitch=false&page_id=154%3A8248
-    // 大于600： 1,2,3：1行等距展示； 大于等于4个：每行两个，每行一个或2个
-    // 小于 600， 从上往下排
-    const renderColumnButtons = () => {
-        if (!dataSource || !dataSource.length) {
-            return null;
-        }
-        // const screenWidth = clientWidth;
-        if (clientWidth < ADAPTOR_WIDTH) {
-            return renderRowButtons(dataSource);
-        }
-        // 1,2,3：1行等距展示；
-        if (dataSource.length <= 3) {
-            return renderRowButtons(dataSource);
-        }
-        // 大于等于4个：每行两个
-        const rows = Math.ceil(dataSource.length / 2);
-        const buttonRows = Array.from({ length: rows }, (_, index) => {
-            const start = index * 2;
-            const end = Math.min(start + 2, dataSource.length); // Ensure end does not exceed array length
-            return React.createElement("div", { className: 'button-group sub' }, renderRowButtons(dataSource.slice(start, end)));
-        });
-        return buttonRows;
-    };
     const renderButtons = () => {
         if (React.isValidElement(children)) {
             return children;
@@ -82,10 +45,10 @@ const ButtonGroup = forwardRef((props, ref) => {
         if (!dataSource || !dataSource.length) {
             return null;
         }
-        let actionItems = renderRowButtons(dataSource);
+        const actionItems = renderRowButtons(dataSource);
         return (React.createElement("div", { className: `button-group ${type}` },
-            type == 'row' && actionItems,
-            type == 'column' && renderColumnButtons()));
+            type === 'row' && actionItems,
+            type === 'column' && actionItems));
     };
     return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}button-group ${type}`, className), ref: ref }, renderButtons()));
 });

package/es/button/main.scss

@@ -1,43 +1,42 @@
 @import "../core/variables.scss";
 
 .#{$prefix}button {
+  &.next-btn-text  {
+    line-height: var(--common-text-line-height);
+
+    .next-btn-helper {
+      vertical-align: baseline;
+    }
+  }
+
+  &-with-icon {
+    &.large {
+      padding: 0 var(--btn-size-m-padding, 16px);
+    }
+
+    &.medium {
+      padding: 0 var(--btn-size-s-padding, 12px);
+    }
+
+    &.small {
+      padding: 0 var(--btn-size-xs-padding, 8px);
+    }
+  }
+
   .common-icon {
-    margin-right: 4px;
+    margin-right: var(--s-1, 4px);
+    display: inline-flex;
+    align-items: center;
   }
 
   &-group {
     .single-button {
-      flex: 1 0 calc(50% - 3px); // 修改为50%宽度，每个按钮间隔6px，所以是3px
+      flex: 1 0 calc(50% - 4px); // 修改为50%宽度，每个按钮间隔6px，所以是3px
       text-align: center;
-      margin-right: 6px;
+      margin-right: 0px;
       max-width: 100%;
       overflow: hidden;
-
-      &:nth-child(n+3) {
-        margin-top: 8px;
-      }
-
-      // 使用nth-child选择器处理偶数按钮的右边距
-      &:nth-child(2n) {
-        margin-right: 0;
-      }
-
-      // 最后一个按钮不需要右边距
-      &:last-child {
-        margin-right: 0;
-      }
-
-      // 当按钮数量小于等于3个时，恢复为三等分布局
-      &:first-child:nth-last-child(-n+3),
-      &:first-child:nth-last-child(-n+3) ~ .single-button {
-        flex: 1 0 calc(33.33% - 6px);
-        margin-top: 0;
-
-        // 重置偶数按钮的右边距规则
-        &:nth-child(2n) {
-          margin-right: 6px;
-        }
-      }
+      flex-shrink: 1;
 
       .next-btn-helper {
         max-width: 100%;
@@ -52,57 +51,17 @@
       justify-content: space-between; /* 这里可能不再需要，因为我们通过flex-basis控制每行按钮数 */
       align-items: center;
       width: 100%;
-      margin-bottom: 8px;
-      &:last-child{
-        margin-bottom: 0px;
-      }
-      &.column {
-        .single-button {
-          width: 100%;
-          margin-bottom: 8px;
-          &:last-child {
-            margin-bottom: 0px;
-          }
-        }
-        display: block;
-        // 如果设计调整对应的适配宽度，需要调整这里的值
-        @media (min-width: 600px) {
-          display: flex;
-          .single-button {
-            margin-bottom: 0px;
-            flex: 1 0 calc(33.33% - 6px); /* 每个按钮占据33.33%的宽度减去左右各3px的间隔（总共6px）来保证每行三个 */
-          }
-        }
-      }
-
-      &.sub {
-        .single-button {
-          max-width: calc(50% - 6px);
-          margin-bottom: 0;
-        }
-        @media (max-width: 600px) {
-          display: block;
-        }
-      }
     }
-
-  }
-
-  &.secondary:not[disabled] {
-    border: none !important;
-    background-color: $color-brand1-1 !important;
-    color: $color-brand1-6 !important;
-
-    &:hover {
-      opacity: 0.8;
-      border: none !important;
-      color: $color-brand1-6 !important;
-      background-color: $color-brand1-1 !important;
+    .row {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: var(--s-2, 8px);
     }
 
-    &:focus {
-      color: $color-brand1-8 !important;
-      background-color: $color-brand1-2 !important;
+    .column {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--s-2, 8px);
     }
   }
 }

package/es/card/main.scss

@@ -39,7 +39,7 @@
     &-inner {
         display: flex;
         flex-direction: column;
-        background-color: #fff;
+        background-color: var(--color-bg-1, #ffffff);
         @include size(
             $shadow-2,
             $size-base * 3,

package/es/checkbox-group/main.scss

@@ -4,25 +4,25 @@
   .checkbox-item {
     display: flex;
     align-items: flex-start;
-    padding: 10px;
-    margin-bottom: 8px;
+    padding: var(--s-2, 8px);
+    margin-bottom: var(--s-2, 8px);
     border-radius: 6px;
-    background-color: $color-fill1-1;
+    background-color: var(--color-fill1-1, #F6F8FC);
     cursor: pointer;
 
     &:hover {
-      background-color: $color-fill1-2;
+      background-color: var(--color-fill1-2, #F0F2F5);
     }
 
     &.active {
-      background-color: $color-fill1-2;
+      background-color: var(--color-fill1-2, #F0F2F5);
     }
   }
 
   .checkbox-item-checkbox {
     flex-shrink: 0;
     flex-grow: 0;
-    margin-right: 8px;
+    margin-right: var(--s-2, 8px);
     height: 22px;
     display: flex;
     align-items: center;
@@ -58,6 +58,5 @@
 
   .confirm-button {
     width: 100%;
-    margin-top: 4px;
   }
 }

package/es/checkbox-group/types.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @api
+ */
 export interface CheckboxItem {
     label: string;
     value: string;
     description?: string;
 }
+/**
+ * @api
+ */
 export interface CheckboxGroupProps {
     options: CheckboxItem[];
     value: string[];

package/es/code-view/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @component 代码视图
+ * @en CodeView
+ * @type 展示 - Display
+ * @remarks 用于展示代码块的组件，支持语法高亮和复制功能。
+ */
+import React from 'react';
+import type { CodeViewProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<CodeViewProps & React.RefAttributes<HTMLDivElement>, "key" | keyof CodeViewProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/es/code-view/index.js

@@ -0,0 +1,63 @@
+/**
+ * @component 代码视图
+ * @en CodeView
+ * @type 展示 - Display
+ * @remarks 用于展示代码块的组件，支持语法高亮和复制功能。
+ */
+import React, { forwardRef, useMemo, useRef } from 'react';
+import { ConfigProvider, Icon } from '@alifd/next';
+import classnames from 'classnames';
+import hljs from 'highlight.js';
+import { PREFIX_DEFAULT, defaultCopyText } from '../utils';
+const CodeView = forwardRef((props, ref) => {
+    const { className, code, language = '', showCopyButton, theme = 'light', } = props;
+    const codeRef = useRef(null);
+    // 使用 useMemo 缓存高亮结果，只在 code 或 language 变化时重新计算
+    const highlightedCode = useMemo(() => {
+        if (!code)
+            return '';
+        // 先转义 HTML 特殊字符防止 XSS
+        const escapedCode = code
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+        try {
+            // 创建临时元素进行高亮
+            const tempElement = document.createElement('code');
+            tempElement.className = `language-${language}`;
+            tempElement.innerHTML = escapedCode;
+            // 执行语法高亮
+            hljs.highlightElement(tempElement);
+            return tempElement.innerHTML;
+        }
+        catch (error) {
+            // 降级方案：返回转义后的原始代码
+            return escapedCode;
+        }
+    }, [code, language]);
+    const handleCopy = () => {
+        if (!codeRef.current)
+            return;
+        const content = codeRef.current.innerText;
+        defaultCopyText(content);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleCopy();
+        }
+    };
+    return (React.createElement("div", { className: classnames(`${PREFIX_DEFAULT}code-view`, `${PREFIX_DEFAULT}hljs-${theme}`, className), ref: ref },
+        React.createElement("div", { className: `${PREFIX_DEFAULT}code-view-header` },
+            React.createElement("div", { className: `${PREFIX_DEFAULT}code-view-language` }, language),
+            showCopyButton !== false && (React.createElement("div", { className: `${PREFIX_DEFAULT}code-view-copy`, onClick: handleCopy, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, title: "\u590D\u5236\u4EE3\u7801" },
+                React.createElement(Icon, { size: 'xs', type: "copy" })))),
+        React.createElement("div", { className: `${PREFIX_DEFAULT}code-view-container` },
+            React.createElement("pre", null,
+                React.createElement("code", { ref: codeRef, className: `${PREFIX_DEFAULT}code-view-content hljs language-${language}`, dangerouslySetInnerHTML: { __html: highlightedCode }, "data-highlighted": "yes" })))));
+});
+CodeView.displayName = 'CodeView';
+export * from './types';
+export default ConfigProvider.config(CodeView);

package/es/code-view/main.scss

@@ -0,0 +1,54 @@
+@import '../core/variables.scss';
+
+.#{$prefix}code-view {
+    // border: 4px solid var(--color-bg-1, #ffffff);
+    border-radius: var(--corner-2, 8px);
+    overflow: hidden;
+    background-color: var(--color-fill1-1);
+    position: relative;
+
+    pre {
+      margin: 0;
+
+      code.hljs {
+        padding: var(--s-2, 8px) var(--s-3, 12px);
+
+        &.ct-code-view-content {
+            padding: var(--s-2, 8px) var(--s-3, 12px);
+            background-color: var(--color-fill1-1);
+        }
+      }
+    }
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--s-2, 8px) var(--s-3, 12px);
+        line-height: 22px;
+        background-color: var(--color-fill1-2);
+    }
+
+    &-language {
+        color: var(--color-text1-3);
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    &-copy {
+        cursor: pointer;
+        height: 22px;
+        color: var(--color-text1-2);
+
+        &:hover {
+            color: var(--color-text1-3);
+        }
+    }
+
+    &-container {
+        max-height: 500px;
+        overflow-y: auto;
+    }
+
+    
+}

package/es/code-view/style.d.ts

@@ -0,0 +1,4 @@
+import '@alifd/next/lib/message/style2';
+import '../utils/github.scss';
+import '../utils/github-dark.scss';
+import './main.scss';

package/es/code-view/style.js

@@ -0,0 +1,4 @@
+import '@alifd/next/lib/message/style2';
+import '../utils/github.scss';
+import '../utils/github-dark.scss';
+import './main.scss';

package/es/code-view/types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @api
+ */
+export interface CodeViewProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 代码内容
+     */
+    code: string;
+    /**
+     * 编程语言
+     */
+    language?: string;
+    /**
+     * 是否显示复制按钮
+     * @defaultValue true
+     */
+    showCopyButton?: boolean;
+    /**
+     * 主题模式
+     * @defaultValue 'light'
+     */
+    theme?: 'light' | 'dark';
+}

package/es/code-view/types.js

@@ -0,0 +1 @@
+export {};