@alifd/chat 0.3.33-beta.0 → 0.3.33-beta.10

package/es/button/main.scss

@@ -7,14 +7,38 @@
 
   &-group {
     .single-button {
-      flex: 1 0 calc(33.33% - 6px); /* 每个按钮占据33.33%的宽度减去左右各3px的间隔（总共6px）来保证每行三个 */
+      flex: 1 0 calc(50% - 3px); // 修改为50%宽度，每个按钮间隔6px，所以是3px
       text-align: center;
-      margin-right: 6px;  
+      margin-right: 6px;
       max-width: 100%;
       overflow: hidden;
-      &:last-child{
-        margin-right: 0px;
+
+      &: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;
+        }
+      }
+
       .next-btn-helper {
         max-width: 100%;
         overflow: hidden;
@@ -50,12 +74,12 @@
           }
         }
       }
-      
+
       &.sub {
         .single-button {
           max-width: calc(50% - 6px);
           margin-bottom: 0;
-        }  
+        }
         @media (max-width: 600px) {
           display: block;
         }

package/es/drawer/index.js

@@ -11,13 +11,13 @@ import { Drawer as NextDrawer, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const Drawer = forwardRef((_a, ref) => {
-    var { className, headerStyle, children, footer, footerClassName } = _a, props = __rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName"]);
+    var { className, headerStyle, children, footer, footerClassName, placement } = _a, props = __rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName", "placement"]);
     // 对齐小蜜现有的底部
     const defaultHeaderStyle = {
         "border-bottom:": "1px solid var(--40gmM)"
     };
-    return (React.createElement(NextDrawer, Object.assign({}, props, { v2: true, ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: cs(`${PREFIX_DEFAULT}drawer`, className) }),
-        React.createElement("div", { className: 'draw-content' }, children),
+    return (React.createElement(NextDrawer, Object.assign({}, props, { v2: true, ref: ref, placement: placement, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: cs(`${PREFIX_DEFAULT}drawer ${placement}`, className) }),
+        children,
         footer && footer.length && React.createElement("div", { className: cs('draw-footer', footerClassName) }, footer)));
 });
 const DrawerWithSub = assignSubComponent(Drawer, {

package/es/drawer/main.scss

@@ -2,8 +2,14 @@
 
 .#{$prefix}drawer {
 
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  &.bottom {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  &.right {
+    border-top-right-radius: 8px;
+  }
 
   .draw-footer {
     width: calc(100% - 40px);

package/es/html-render/index.js

@@ -103,7 +103,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
     const parserOptions = {
         // @ts-ignore
         replace: domNode => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             // 处理文本节点
             if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
                 return processTextNode(domNode);
@@ -131,7 +131,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
                     return (React.createElement(Balloon, { v2: true, align: "b", className: "link-reference-balloon", closable: false, offset: [0, -8], triggerType: ['hover'], trigger: React.createElement("span", { className: "link-reference-index", onClick: handleUrlClick }, (_c = spanElement === null || spanElement === void 0 ? void 0 : spanElement.props) === null || _c === void 0 ? void 0 : _c.children) },
                         React.createElement("div", { className: "link-reference-content" },
                             React.createElement("img", { className: "link-reference-source-icon", src: ((_d = element.props) === null || _d === void 0 ? void 0 : _d['data-source-icon']) || '' }),
-                            React.createElement("a", { className: "link-reference-title", onClick: handleUrlClick }, ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || ''))));
+                            React.createElement("a", { className: "link-reference-title", onClick: handleUrlClick, title: ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || '' }, ((_f = element.props) === null || _f === void 0 ? void 0 : _f['data-title']) || ''))));
                 }
                 if (name === 'a') {
                     const element = (domToReact([domNode]));
@@ -185,7 +185,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
                         return renderImage(element.props);
                     }
                     // 换成统一的图片渲染
-                    return React.createElement(Img, Object.assign({}, element.props, { imageClassName: (_f = element.props) === null || _f === void 0 ? void 0 : _f.className, enablePreview: imagePreview, onImageClick: () => {
+                    return React.createElement(Img, Object.assign({}, element.props, { imageClassName: (_g = element.props) === null || _g === void 0 ? void 0 : _g.className, enablePreview: imagePreview, onImageClick: () => {
                             handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(element.props.src);
                         } }));
                 }

package/es/icon/index.d.ts

@@ -10,4 +10,4 @@ import type { IconProps } from '@alifd/next/types/icon';
 export * from './types';
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<IconProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<IconProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/icon/icon").default>>, keyof IconProps | "key"> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<IconProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/icon/icon").default>, {}>;
 export default _default;
-export declare function renderCommonIcon(icon: any, size?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit'): React.JSX.Element;
+export declare function renderCommonIcon(icon: any, size?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit'): React.JSX.Element | null;

package/es/icon/index.js

@@ -14,7 +14,7 @@ import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const CustomIcon = NextIcon.createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/c/font_3504203_7pbik9jgwl8.js',
 });
-const CustomIconList = ['icon-xiangxiaxianxing', 'icon-xiangxiaxianxing-copy', 'icon-cross', 'icon-fuzhi2'];
+const CustomIconList = ['icon-check', 'icon-xiangxiaxianxing', 'icon-xiangxiaxianxing-copy', 'icon-cross', 'icon-cross1', 'icon-fuzhi2'];
 const TypeMap = {
     'arrow-up': 'icon-xiangxiaxianxing-copy',
     'arrow-down': 'icon-xiangxiaxianxing',
@@ -41,6 +41,9 @@ export default ConfigProvider.config(IconWithSub);
 export function renderCommonIcon(icon, size) {
     let dom = null;
     let iconType = '';
+    if (!icon) {
+        return null;
+    }
     if (React.isValidElement(icon)) {
         dom = icon;
         iconType = 'node';

package/es/index.js

@@ -32,4 +32,4 @@ export { default as CheckboxGroup } from './checkbox-group';
 export { default as Select } from './select';
 export { default as Flip } from './flip';
 export { default as ToolStatus } from './tool-status';
-export const version = '0.3.33-beta.0';
+export const version = '0.3.33-beta.10';

package/es/tool-status/index.js

@@ -9,23 +9,28 @@ import { ConfigProvider } from '@alifd/next';
 import Icon from '../icon';
 import cs from 'classnames';
 import { PREFIX_DEFAULT } from '../utils';
-const SUCCESS_ICON = 'success';
-const ERROR_ICON = 'error';
+const SUCCESS_ICON = 'icon-check'; //'success'
+const ERROR_ICON = 'icon-cross1'; //'error'
 const LOADING_ICON = 'loading';
 const ToolStatus = forwardRef((props, ref) => {
-    const { className, selected = false, status, result = '', onToolClick, extra } = props;
+    const { useText = '使用', name, className, selected = false, status, onToolClick, authInfo, fullWidth } = props;
     const handleClick = (event) => {
         event.stopPropagation();
         onToolClick === null || onToolClick === void 0 ? void 0 : onToolClick(props);
     };
-    const statusClassName = selected ? 'selected' : '';
-    return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}tool-status ${statusClassName} ${status}`, className), ref: ref, onClick: (e) => {
+    let csName = selected ? 'selected' : '';
+    csName = fullWidth ? `${csName} full-width` : `${csName}`;
+    return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}tool-status ${csName} ${status}`, className), ref: ref, onClick: (e) => {
             handleClick(e);
         } },
-        React.createElement("div", { className: 'main-content' },
-            React.createElement(Icon, { size: 'small', type: status === 'error' ? ERROR_ICON : status === 'success' ? SUCCESS_ICON : LOADING_ICON }),
-            React.createElement("div", { className: 'content-result' }, result)),
-        extra && React.createElement("div", { className: 'extra-content' }, extra)));
+        React.createElement(Icon, { size: 'xs', type: status === 'failed' ? ERROR_ICON : status === 'completed' ? SUCCESS_ICON : LOADING_ICON }),
+        authInfo && status === 'auth' && React.createElement("div", { className: 'next-btn-text next-btn-primary', onClick: (event) => {
+                var _a;
+                event.stopPropagation();
+                (_a = authInfo === null || authInfo === void 0 ? void 0 : authInfo.onAuthClick) === null || _a === void 0 ? void 0 : _a.call(authInfo, props);
+            } }, authInfo === null || authInfo === void 0 ? void 0 : authInfo.content),
+        React.createElement("div", { className: 'content-use-tips' }, useText),
+        React.createElement("div", { className: 'content-name' }, name)));
 });
 export * from './types';
 export default ConfigProvider.config(ToolStatus);

package/es/tool-status/main.scss

@@ -3,40 +3,65 @@
 .#{$prefix}tool-status {
   width: fit-content;
   transition: width 0.3s ease-in-out;
-  background-color: $color-fill1-1;//$color-brand1-1;
-  padding: $s-1;
-  border-radius: $s-2;
+  padding: $s-1 $s-3;
+  border-radius: $s-4;
   box-sizing: border-box;
-  border: solid 1px $color-fill1-1;
+  border: solid 1px $color-line1-2;
   align-items: center;
+  display: flex;
+  background-color: transparent;
+  font-size: $font-size-caption;
+  i {
+    margin-right: $s-1;
+  }
+  .next-icon.next-small:before {
+
+  }
+
+  &.full-width {
+    width: 100%;
+  }
 
   &.selected {
     background-color: $color-fill1-2;
+    border: solid 1px transparent;
   }
 
-  &.success {
+  &.completed {
     i {
       color: $color-success-3;
     }
   }
 
-  &.error {
+  &.failed {
     i {
       color: $color-error-3;
     }
   }
 
-  &.loading {
+  &.running, &.auth, &.started {
     i {
       color: $color-brand1-6;
     }
   }
+  
+  .next-btn-text.next-btn-primary{
+    line-height: $s-4;
+    font-size: $font-size-caption;
+    cursor: pointer;
+    margin-right: $s-1;
+  }
 
-  .main-content {
-    display: flex;
-    .content-result {
-      margin-left: 4px;
-    }
+
+  .content-use-tips {
+    color: $color-text1-3;
+    margin-right: $s-1;
+    line-height: $s-4;
+  }
+
+  .content-name {
+    color: $color-text1-4;
+    line-height: $s-4;
   }
 
 }

package/es/tool-status/types.d.ts

@@ -1,5 +1,9 @@
 import React, { type ReactNode } from 'react';
 import { type CommonProps } from '@alifd/next';
+export interface ToolStatusAuthProps {
+    content: string | ReactNode;
+    onAuthClick?: (data: ToolStatusProps) => void;
+}
 /**
  * 参考来源属性
  */
@@ -12,7 +16,7 @@ export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, Comm
     /**
      * 工具调用状态
      */
-    status?: 'loading' | 'success' | 'error';
+    status?: 'started' | 'running' | 'completed' | 'failed' | 'auth';
     /**
      * 工具调用结果
      */
@@ -22,7 +26,19 @@ export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, Comm
      */
     onToolClick?: (data: ToolStatusProps) => void;
     /**
-     * 额外需要渲染的内容
+     * 额外的授权信息
+     */
+    authInfo?: ToolStatusAuthProps;
+    /**
+     * 工具名称
+     */
+    name?: string;
+    /**
+     * 工具详情链接
+     */
+    useText?: string;
+    /**
+     * 是否100%的宽度
      */
-    extra?: string | ReactNode;
+    fullWidth?: boolean;
 }

package/lib/button/main.scss

@@ -7,14 +7,38 @@
 
   &-group {
     .single-button {
-      flex: 1 0 calc(33.33% - 6px); /* 每个按钮占据33.33%的宽度减去左右各3px的间隔（总共6px）来保证每行三个 */
+      flex: 1 0 calc(50% - 3px); // 修改为50%宽度，每个按钮间隔6px，所以是3px
       text-align: center;
-      margin-right: 6px;  
+      margin-right: 6px;
       max-width: 100%;
       overflow: hidden;
-      &:last-child{
-        margin-right: 0px;
+
+      &: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;
+        }
+      }
+
       .next-btn-helper {
         max-width: 100%;
         overflow: hidden;
@@ -50,12 +74,12 @@
           }
         }
       }
-      
+
       &.sub {
         .single-button {
           max-width: calc(50% - 6px);
           margin-bottom: 0;
-        }  
+        }
         @media (max-width: 600px) {
           display: block;
         }

package/lib/drawer/index.js

@@ -13,13 +13,13 @@ const next_1 = require("@alifd/next");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const Drawer = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, headerStyle, children, footer, footerClassName } = _a, props = tslib_1.__rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName"]);
+    var { className, headerStyle, children, footer, footerClassName, placement } = _a, props = tslib_1.__rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName", "placement"]);
     // 对齐小蜜现有的底部
     const defaultHeaderStyle = {
         "border-bottom:": "1px solid var(--40gmM)"
     };
-    return (react_1.default.createElement(next_1.Drawer, Object.assign({}, props, { v2: true, ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}drawer`, className) }),
-        react_1.default.createElement("div", { className: 'draw-content' }, children),
+    return (react_1.default.createElement(next_1.Drawer, Object.assign({}, props, { v2: true, ref: ref, placement: placement, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}drawer ${placement}`, className) }),
+        children,
         footer && footer.length && react_1.default.createElement("div", { className: (0, classnames_1.default)('draw-footer', footerClassName) }, footer)));
 });
 const DrawerWithSub = (0, utils_1.assignSubComponent)(Drawer, {

package/lib/drawer/main.scss

@@ -2,8 +2,14 @@
 
 .#{$prefix}drawer {
 
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  &.bottom {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  &.right {
+    border-top-right-radius: 8px;
+  }
 
   .draw-footer {
     width: calc(100% - 40px);

package/lib/html-render/index.js

@@ -106,7 +106,7 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
     const parserOptions = {
         // @ts-ignore
         replace: domNode => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             // 处理文本节点
             if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
                 return processTextNode(domNode);
@@ -134,7 +134,7 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
                     return (react_1.default.createElement(balloon_1.default, { v2: true, align: "b", className: "link-reference-balloon", closable: false, offset: [0, -8], triggerType: ['hover'], trigger: react_1.default.createElement("span", { className: "link-reference-index", onClick: handleUrlClick }, (_c = spanElement === null || spanElement === void 0 ? void 0 : spanElement.props) === null || _c === void 0 ? void 0 : _c.children) },
                         react_1.default.createElement("div", { className: "link-reference-content" },
                             react_1.default.createElement("img", { className: "link-reference-source-icon", src: ((_d = element.props) === null || _d === void 0 ? void 0 : _d['data-source-icon']) || '' }),
-                            react_1.default.createElement("a", { className: "link-reference-title", onClick: handleUrlClick }, ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || ''))));
+                            react_1.default.createElement("a", { className: "link-reference-title", onClick: handleUrlClick, title: ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || '' }, ((_f = element.props) === null || _f === void 0 ? void 0 : _f['data-title']) || ''))));
                 }
                 if (name === 'a') {
                     const element = ((0, html_react_parser_1.domToReact)([domNode]));
@@ -188,7 +188,7 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
                         return renderImage(element.props);
                     }
                     // 换成统一的图片渲染
-                    return react_1.default.createElement(img_1.default, Object.assign({}, element.props, { imageClassName: (_f = element.props) === null || _f === void 0 ? void 0 : _f.className, enablePreview: imagePreview, onImageClick: () => {
+                    return react_1.default.createElement(img_1.default, Object.assign({}, element.props, { imageClassName: (_g = element.props) === null || _g === void 0 ? void 0 : _g.className, enablePreview: imagePreview, onImageClick: () => {
                             handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(element.props.src);
                         } }));
                 }

package/lib/icon/index.d.ts

@@ -10,4 +10,4 @@ import type { IconProps } from '@alifd/next/types/icon';
 export * from './types';
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<IconProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<IconProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/icon/icon").default>>, keyof IconProps | "key"> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<IconProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/icon/icon").default>, {}>;
 export default _default;
-export declare function renderCommonIcon(icon: any, size?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit'): React.JSX.Element;
+export declare function renderCommonIcon(icon: any, size?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit'): React.JSX.Element | null;

package/lib/icon/index.js

@@ -17,7 +17,7 @@ const utils_1 = require("../utils");
 const CustomIcon = next_1.Icon.createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/c/font_3504203_7pbik9jgwl8.js',
 });
-const CustomIconList = ['icon-xiangxiaxianxing', 'icon-xiangxiaxianxing-copy', 'icon-cross', 'icon-fuzhi2'];
+const CustomIconList = ['icon-check', 'icon-xiangxiaxianxing', 'icon-xiangxiaxianxing-copy', 'icon-cross', 'icon-cross1', 'icon-fuzhi2'];
 const TypeMap = {
     'arrow-up': 'icon-xiangxiaxianxing-copy',
     'arrow-down': 'icon-xiangxiaxianxing',
@@ -44,6 +44,9 @@ exports.default = next_1.ConfigProvider.config(IconWithSub);
 function renderCommonIcon(icon, size) {
     let dom = null;
     let iconType = '';
+    if (!icon) {
+        return null;
+    }
     if (react_1.default.isValidElement(icon)) {
         dom = icon;
         iconType = 'node';

package/lib/index.js

@@ -70,4 +70,4 @@ var flip_1 = require("./flip");
 Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
 var tool_status_1 = require("./tool-status");
 Object.defineProperty(exports, "ToolStatus", { enumerable: true, get: function () { return tslib_1.__importDefault(tool_status_1).default; } });
-exports.version = '0.3.33-beta.0';
+exports.version = '0.3.33-beta.10';

package/lib/tool-status/index.js

@@ -12,23 +12,28 @@ const next_1 = require("@alifd/next");
 const icon_1 = tslib_1.__importDefault(require("../icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
-const SUCCESS_ICON = 'success';
-const ERROR_ICON = 'error';
+const SUCCESS_ICON = 'icon-check'; //'success'
+const ERROR_ICON = 'icon-cross1'; //'error'
 const LOADING_ICON = 'loading';
 const ToolStatus = (0, react_1.forwardRef)((props, ref) => {
-    const { className, selected = false, status, result = '', onToolClick, extra } = props;
+    const { useText = '使用', name, className, selected = false, status, onToolClick, authInfo, fullWidth } = props;
     const handleClick = (event) => {
         event.stopPropagation();
         onToolClick === null || onToolClick === void 0 ? void 0 : onToolClick(props);
     };
-    const statusClassName = selected ? 'selected' : '';
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}tool-status ${statusClassName} ${status}`, className), ref: ref, onClick: (e) => {
+    let csName = selected ? 'selected' : '';
+    csName = fullWidth ? `${csName} full-width` : `${csName}`;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}tool-status ${csName} ${status}`, className), ref: ref, onClick: (e) => {
             handleClick(e);
         } },
-        react_1.default.createElement("div", { className: 'main-content' },
-            react_1.default.createElement(icon_1.default, { size: 'small', type: status === 'error' ? ERROR_ICON : status === 'success' ? SUCCESS_ICON : LOADING_ICON }),
-            react_1.default.createElement("div", { className: 'content-result' }, result)),
-        extra && react_1.default.createElement("div", { className: 'extra-content' }, extra)));
+        react_1.default.createElement(icon_1.default, { size: 'xs', type: status === 'failed' ? ERROR_ICON : status === 'completed' ? SUCCESS_ICON : LOADING_ICON }),
+        authInfo && status === 'auth' && react_1.default.createElement("div", { className: 'next-btn-text next-btn-primary', onClick: (event) => {
+                var _a;
+                event.stopPropagation();
+                (_a = authInfo === null || authInfo === void 0 ? void 0 : authInfo.onAuthClick) === null || _a === void 0 ? void 0 : _a.call(authInfo, props);
+            } }, authInfo === null || authInfo === void 0 ? void 0 : authInfo.content),
+        react_1.default.createElement("div", { className: 'content-use-tips' }, useText),
+        react_1.default.createElement("div", { className: 'content-name' }, name)));
 });
 tslib_1.__exportStar(require("./types"), exports);
 exports.default = next_1.ConfigProvider.config(ToolStatus);

package/lib/tool-status/main.scss

@@ -3,40 +3,65 @@
 .#{$prefix}tool-status {
   width: fit-content;
   transition: width 0.3s ease-in-out;
-  background-color: $color-fill1-1;//$color-brand1-1;
-  padding: $s-1;
-  border-radius: $s-2;
+  padding: $s-1 $s-3;
+  border-radius: $s-4;
   box-sizing: border-box;
-  border: solid 1px $color-fill1-1;
+  border: solid 1px $color-line1-2;
   align-items: center;
+  display: flex;
+  background-color: transparent;
+  font-size: $font-size-caption;
+  i {
+    margin-right: $s-1;
+  }
+  .next-icon.next-small:before {
+
+  }
+
+  &.full-width {
+    width: 100%;
+  }
 
   &.selected {
     background-color: $color-fill1-2;
+    border: solid 1px transparent;
   }
 
-  &.success {
+  &.completed {
     i {
       color: $color-success-3;
     }
   }
 
-  &.error {
+  &.failed {
     i {
       color: $color-error-3;
     }
   }
 
-  &.loading {
+  &.running, &.auth, &.started {
     i {
       color: $color-brand1-6;
     }
   }
+  
+  .next-btn-text.next-btn-primary{
+    line-height: $s-4;
+    font-size: $font-size-caption;
+    cursor: pointer;
+    margin-right: $s-1;
+  }
 
-  .main-content {
-    display: flex;
-    .content-result {
-      margin-left: 4px;
-    }
+
+  .content-use-tips {
+    color: $color-text1-3;
+    margin-right: $s-1;
+    line-height: $s-4;
+  }
+
+  .content-name {
+    color: $color-text1-4;
+    line-height: $s-4;
   }
 
 }

package/lib/tool-status/types.d.ts

@@ -1,5 +1,9 @@
 import React, { type ReactNode } from 'react';
 import { type CommonProps } from '@alifd/next';
+export interface ToolStatusAuthProps {
+    content: string | ReactNode;
+    onAuthClick?: (data: ToolStatusProps) => void;
+}
 /**
  * 参考来源属性
  */
@@ -12,7 +16,7 @@ export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, Comm
     /**
      * 工具调用状态
      */
-    status?: 'loading' | 'success' | 'error';
+    status?: 'started' | 'running' | 'completed' | 'failed' | 'auth';
     /**
      * 工具调用结果
      */
@@ -22,7 +26,19 @@ export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, Comm
      */
     onToolClick?: (data: ToolStatusProps) => void;
     /**
-     * 额外需要渲染的内容
+     * 额外的授权信息
+     */
+    authInfo?: ToolStatusAuthProps;
+    /**
+     * 工具名称
+     */
+    name?: string;
+    /**
+     * 工具详情链接
+     */
+    useText?: string;
+    /**
+     * 是否100%的宽度
      */
-    extra?: string | ReactNode;
+    fullWidth?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.33-beta.0",
+  "version": "0.3.33-beta.10",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",