@alifd/chat 0.3.35 → 0.3.36

package/es/core/variables.scss

@@ -95,3 +95,7 @@ $color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
 $color-bg-1: var(--color-bg-1, #ffffff) !default; // ?
 
+
+$color-error-3: var(--color-error-3, rgb(255, 82, 25)) !default;
+
+$color-success-3: var(--color-success-3, #00b042) !default;

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/html-render/main.scss

@@ -178,14 +178,14 @@
   }
 
   a {
-    color: $color-link-3;
+    color: $color-link-1;
     text-decoration: none;
     &:hover {
       color: $color-link-2;
       text-decoration: none;
     }
     &:focus, &:visited {
-      color: $color-link-1;
+      color: $color-link-3;
       text-decoration: none;
     }
   }

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/image-preview/index.js

@@ -6,7 +6,7 @@
  * @when 需要展示图片并提供预览功能时使用。 - Use when you need to display images and provide preview functionality.
 
  */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import classnames from 'classnames';
 import { PhotoProvider, PhotoView } from 'react-photo-view';
 import { findAncestor } from '../utils';
@@ -34,26 +34,66 @@ function isInsideLink(e) {
     return !!findAncestor(e.target, (t) => t.tagName === 'A' && !!t.href);
 }
 const ImagePreview = forwardRef(({ className, src, children, width, height }, ref) => {
+    const touchStartRef = useRef({ x: 0, y: 0, time: 0 });
+    const hasMoved = useRef(false);
     let child;
     try {
         child = React.Children.only(children);
     }
     catch (e) { }
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            time: Date.now()
+        };
+        hasMoved.current = false;
+    };
+    const handleTouchMove = (e) => {
+        if (!touchStartRef.current)
+            return;
+        const touch = e.touches[0];
+        const deltaX = Math.abs(touch.clientX - touchStartRef.current.x);
+        const deltaY = Math.abs(touch.clientY - touchStartRef.current.y);
+        // 如果移动距离超过阈值，认为是滚动操作
+        if (deltaX > 10 || deltaY > 10) {
+            hasMoved.current = true;
+        }
+    };
+    const handleTouchEnd = (e, originalHandler) => {
+        // 如果检测到滚动，就不触发图片预览
+        if (!hasMoved.current) {
+            if (isInsideLink(e)) {
+                e.stopPropagation();
+            }
+            else {
+                handleClick(e, src);
+            }
+        }
+        originalHandler === null || originalHandler === void 0 ? void 0 : originalHandler(e);
+    };
     if (child && child.props) {
-        const { onClick, onTouchEnd } = child.props;
+        const { onClick, onTouchEnd, onTouchStart, onTouchMove } = child.props;
         child = React.cloneElement(child, {
+            onTouchStart: (e) => {
+                handleTouchStart(e);
+                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+            },
+            onTouchMove: (e) => {
+                handleTouchMove(e);
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
+            },
             onTouchEnd: (e) => {
-                if (isInsideLink(e)) {
-                    e.stopPropagation();
-                }
-                handleClick(e, src);
-                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+                handleTouchEnd(e, onTouchEnd);
             },
             onClick: (e) => {
                 if (isInsideLink(e)) {
                     e.stopPropagation();
                 }
-                handleClick(e, src);
+                else {
+                    handleClick(e, src);
+                }
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }
         });

package/es/index.d.ts

@@ -31,4 +31,5 @@ export { default as RadioGroup } from './radio-group';
 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 declare const version: string;

package/es/index.js

@@ -31,4 +31,5 @@ export { default as RadioGroup } from './radio-group';
 export { default as CheckboxGroup } from './checkbox-group';
 export { default as Select } from './select';
 export { default as Flip } from './flip';
-export const version = '0.3.35';
+export { default as ToolStatus } from './tool-status';
+export const version = '0.3.36';

package/es/reference/main.scss

@@ -15,7 +15,7 @@ $detail-header-height: $s-12;
   }
 
   &.detail {
-    background-color: $color-fill1-1;
+    // background-color: $color-fill1-1;
     padding: 0px;
     height: 100%;
     overflow: hidden;
@@ -111,7 +111,7 @@ $detail-header-height: $s-12;
         .reference-name {
           // margin-bottom: $s-2;
           line-height: $font-lineheight-2;
-          color: $color-link-3;
+          color: $color-link-1;
           font-size: $font-size-body-2;
           overflow: hidden; /* 隐藏超出部分 */
           display: -webkit-box; /* 使其成为弹性盒子 */
@@ -126,7 +126,7 @@ $detail-header-height: $s-12;
             color: $color-link-2;
           }
           &:focus, &:visited {
-            color: $color-link-1;
+            color: $color-link-3;
           }
         }
 
@@ -185,7 +185,7 @@ $detail-header-height: $s-12;
 
       .reference-text {
         font-size: $font-size-caption;
-        color: $color-link-3;
+        color: $color-link-1;
         white-space: nowrap; /* 禁止换行 */
         overflow: hidden;    /* 超出部分隐藏 */
         text-overflow: ellipsis; /* 以省略号显示溢出文本 */
@@ -195,7 +195,7 @@ $detail-header-height: $s-12;
           color: $color-link-2;
         }
         &:visited, &:focus {
-          color: $color-link-1;
+          color: $color-link-3;
         }
       }
 

package/es/step/main.scss

@@ -102,7 +102,7 @@
         margin-top: 10px;
         cursor: pointer;
         font-size: 12px;
-        color: $color-link-3;
+        color: $color-link-1;
         &:hover {
             color: $color-link-2;
         }

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

@@ -0,0 +1,11 @@
+/**
+ * @component ToolStatus
+ * @en ToolStatus
+ * @type 通用 - ToolStatus
+ * @when ToolStatus
+ */
+import React from 'react';
+import { ToolStatusProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<ToolStatusProps & React.RefAttributes<HTMLDivElement>, "key" | keyof ToolStatusProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/es/tool-status/index.js

@@ -0,0 +1,37 @@
+/**
+ * @component ToolStatus
+ * @en ToolStatus
+ * @type 通用 - ToolStatus
+ * @when ToolStatus
+ */
+import React, { forwardRef } from 'react';
+import { ConfigProvider } from '@alifd/next';
+import Icon from '../icon';
+import cs from 'classnames';
+import { PREFIX_DEFAULT } from '../utils';
+const SUCCESS_ICON = 'icon-check'; //'success'
+const ERROR_ICON = 'icon-cross1'; //'error'
+const LOADING_ICON = 'loading';
+const ToolStatus = forwardRef((props, ref) => {
+    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);
+    };
+    let csName = selected ? 'selected' : '';
+    csName = fullWidth ? `${csName} full-width` : `${csName}`;
+    csName = onToolClick ? `${csName} enable-click` : `${csName}`;
+    return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}tool-status ${csName} ${status}`, className), ref: ref, onClick: (e) => {
+            handleClick(e);
+        } },
+        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

@@ -0,0 +1,75 @@
+@import "../core/variables.scss";
+
+.#{$prefix}tool-status {
+  width: fit-content;
+  transition: width 0.3s ease-in-out;
+  padding: $s-1 $s-3;
+  border-radius: $s-4;
+  box-sizing: border-box;
+  border: solid 1px $color-line1-2;
+  align-items: center;
+  display: flex;
+  background-color: transparent;
+  font-size: $font-size-caption;
+  max-width: 100%;
+
+  i {
+    margin-right: $s-1;
+  }
+  .next-icon.next-small:before {
+
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+  &.enable-click {
+    cursor: pointer;
+  }
+
+  &.selected {
+    background-color: $color-fill1-2;
+    border: solid 1px transparent;
+  }
+
+  &.completed {
+    i {
+      color: $color-success-3;
+    }
+  }
+
+  &.failed {
+    i {
+      color: $color-error-3;
+    }
+  }
+
+  &.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;
+  }
+
+  .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;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+}

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

@@ -0,0 +1,2 @@
+import '../icon/style';
+import './main.scss';

package/es/tool-status/style.js

@@ -0,0 +1,2 @@
+import '../icon/style';
+import './main.scss';

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

@@ -0,0 +1,44 @@
+import React, { type ReactNode } from 'react';
+import { type CommonProps } from '@alifd/next';
+export interface ToolStatusAuthProps {
+    content: string | ReactNode;
+    onAuthClick?: (data: ToolStatusProps) => void;
+}
+/**
+ * 参考来源属性
+ */
+export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    className?: string;
+    /**
+     * 是否被选中
+     */
+    selected?: boolean;
+    /**
+     * 工具调用状态
+     */
+    status?: 'started' | 'running' | 'completed' | 'failed' | 'auth';
+    /**
+     * 工具调用结果
+     */
+    result?: string | ReactNode;
+    /**
+     *  工具点击
+     */
+    onToolClick?: (data: ToolStatusProps) => void;
+    /**
+     * 额外的授权信息
+     */
+    authInfo?: ToolStatusAuthProps;
+    /**
+     * 工具名称
+     */
+    name?: string;
+    /**
+     * 工具详情链接
+     */
+    useText?: string;
+    /**
+     * 是否100%的宽度
+     */
+    fullWidth?: boolean;
+}

package/es/tool-status/types.js

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

package/lib/core/variables.scss

@@ -95,3 +95,7 @@ $color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
 $color-bg-1: var(--color-bg-1, #ffffff) !default; // ?
 
+
+$color-error-3: var(--color-error-3, rgb(255, 82, 25)) !default;
+
+$color-success-3: var(--color-success-3, #00b042) !default;

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/html-render/main.scss

@@ -178,14 +178,14 @@
   }
 
   a {
-    color: $color-link-3;
+    color: $color-link-1;
     text-decoration: none;
     &:hover {
       color: $color-link-2;
       text-decoration: none;
     }
     &:focus, &:visited {
-      color: $color-link-1;
+      color: $color-link-3;
       text-decoration: none;
     }
   }

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/image-preview/index.js

@@ -37,26 +37,66 @@ function isInsideLink(e) {
     return !!(0, utils_1.findAncestor)(e.target, (t) => t.tagName === 'A' && !!t.href);
 }
 const ImagePreview = (0, react_1.forwardRef)(({ className, src, children, width, height }, ref) => {
+    const touchStartRef = (0, react_1.useRef)({ x: 0, y: 0, time: 0 });
+    const hasMoved = (0, react_1.useRef)(false);
     let child;
     try {
         child = react_1.default.Children.only(children);
     }
     catch (e) { }
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            time: Date.now()
+        };
+        hasMoved.current = false;
+    };
+    const handleTouchMove = (e) => {
+        if (!touchStartRef.current)
+            return;
+        const touch = e.touches[0];
+        const deltaX = Math.abs(touch.clientX - touchStartRef.current.x);
+        const deltaY = Math.abs(touch.clientY - touchStartRef.current.y);
+        // 如果移动距离超过阈值，认为是滚动操作
+        if (deltaX > 10 || deltaY > 10) {
+            hasMoved.current = true;
+        }
+    };
+    const handleTouchEnd = (e, originalHandler) => {
+        // 如果检测到滚动，就不触发图片预览
+        if (!hasMoved.current) {
+            if (isInsideLink(e)) {
+                e.stopPropagation();
+            }
+            else {
+                handleClick(e, src);
+            }
+        }
+        originalHandler === null || originalHandler === void 0 ? void 0 : originalHandler(e);
+    };
     if (child && child.props) {
-        const { onClick, onTouchEnd } = child.props;
+        const { onClick, onTouchEnd, onTouchStart, onTouchMove } = child.props;
         child = react_1.default.cloneElement(child, {
+            onTouchStart: (e) => {
+                handleTouchStart(e);
+                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+            },
+            onTouchMove: (e) => {
+                handleTouchMove(e);
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
+            },
             onTouchEnd: (e) => {
-                if (isInsideLink(e)) {
-                    e.stopPropagation();
-                }
-                handleClick(e, src);
-                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+                handleTouchEnd(e, onTouchEnd);
             },
             onClick: (e) => {
                 if (isInsideLink(e)) {
                     e.stopPropagation();
                 }
-                handleClick(e, src);
+                else {
+                    handleClick(e, src);
+                }
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }
         });

package/lib/index.d.ts

@@ -31,4 +31,5 @@ export { default as RadioGroup } from './radio-group';
 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 declare const version: string;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.Flip = exports.Select = exports.CheckboxGroup = exports.RadioGroup = exports.Img = exports.AILoading = exports.RichTextInput = exports.Recommend = exports.Reference = exports.StopGenerate = exports.Step = exports.Drawer = exports.Loading = exports.Origin = exports.CardLoading = exports.Markdown = exports.HtmlRender = exports.ImagePreview = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
+exports.version = exports.ToolStatus = exports.Flip = exports.Select = exports.CheckboxGroup = exports.RadioGroup = exports.Img = exports.AILoading = exports.RichTextInput = exports.Recommend = exports.Reference = exports.StopGenerate = exports.Step = exports.Drawer = exports.Loading = exports.Origin = exports.CardLoading = exports.Markdown = exports.HtmlRender = exports.ImagePreview = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
 const tslib_1 = require("tslib");
 var button_1 = require("./button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return tslib_1.__importDefault(button_1).default; } });
@@ -68,4 +68,6 @@ var select_1 = require("./select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return tslib_1.__importDefault(select_1).default; } });
 var flip_1 = require("./flip");
 Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
-exports.version = '0.3.35';
+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.36';

package/lib/reference/main.scss

@@ -15,7 +15,7 @@ $detail-header-height: $s-12;
   }
 
   &.detail {
-    background-color: $color-fill1-1;
+    // background-color: $color-fill1-1;
     padding: 0px;
     height: 100%;
     overflow: hidden;
@@ -111,7 +111,7 @@ $detail-header-height: $s-12;
         .reference-name {
           // margin-bottom: $s-2;
           line-height: $font-lineheight-2;
-          color: $color-link-3;
+          color: $color-link-1;
           font-size: $font-size-body-2;
           overflow: hidden; /* 隐藏超出部分 */
           display: -webkit-box; /* 使其成为弹性盒子 */
@@ -126,7 +126,7 @@ $detail-header-height: $s-12;
             color: $color-link-2;
           }
           &:focus, &:visited {
-            color: $color-link-1;
+            color: $color-link-3;
           }
         }
 
@@ -185,7 +185,7 @@ $detail-header-height: $s-12;
 
       .reference-text {
         font-size: $font-size-caption;
-        color: $color-link-3;
+        color: $color-link-1;
         white-space: nowrap; /* 禁止换行 */
         overflow: hidden;    /* 超出部分隐藏 */
         text-overflow: ellipsis; /* 以省略号显示溢出文本 */
@@ -195,7 +195,7 @@ $detail-header-height: $s-12;
           color: $color-link-2;
         }
         &:visited, &:focus {
-          color: $color-link-1;
+          color: $color-link-3;
         }
       }
 

package/lib/step/main.scss

@@ -102,7 +102,7 @@
         margin-top: 10px;
         cursor: pointer;
         font-size: 12px;
-        color: $color-link-3;
+        color: $color-link-1;
         &:hover {
             color: $color-link-2;
         }

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

@@ -0,0 +1,11 @@
+/**
+ * @component ToolStatus
+ * @en ToolStatus
+ * @type 通用 - ToolStatus
+ * @when ToolStatus
+ */
+import React from 'react';
+import { ToolStatusProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<ToolStatusProps & React.RefAttributes<HTMLDivElement>, "key" | keyof ToolStatusProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/lib/tool-status/index.js

@@ -0,0 +1,40 @@
+"use strict";
+/**
+ * @component ToolStatus
+ * @en ToolStatus
+ * @type 通用 - ToolStatus
+ * @when ToolStatus
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+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 = 'icon-check'; //'success'
+const ERROR_ICON = 'icon-cross1'; //'error'
+const LOADING_ICON = 'loading';
+const ToolStatus = (0, react_1.forwardRef)((props, ref) => {
+    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);
+    };
+    let csName = selected ? 'selected' : '';
+    csName = fullWidth ? `${csName} full-width` : `${csName}`;
+    csName = onToolClick ? `${csName} enable-click` : `${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(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

@@ -0,0 +1,75 @@
+@import "../core/variables.scss";
+
+.#{$prefix}tool-status {
+  width: fit-content;
+  transition: width 0.3s ease-in-out;
+  padding: $s-1 $s-3;
+  border-radius: $s-4;
+  box-sizing: border-box;
+  border: solid 1px $color-line1-2;
+  align-items: center;
+  display: flex;
+  background-color: transparent;
+  font-size: $font-size-caption;
+  max-width: 100%;
+
+  i {
+    margin-right: $s-1;
+  }
+  .next-icon.next-small:before {
+
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+  &.enable-click {
+    cursor: pointer;
+  }
+
+  &.selected {
+    background-color: $color-fill1-2;
+    border: solid 1px transparent;
+  }
+
+  &.completed {
+    i {
+      color: $color-success-3;
+    }
+  }
+
+  &.failed {
+    i {
+      color: $color-error-3;
+    }
+  }
+
+  &.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;
+  }
+
+  .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;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+}

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

@@ -0,0 +1,2 @@
+import '../icon/style';
+import './main.scss';

package/lib/tool-status/style.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../icon/style");
+require("./main.scss");

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

@@ -0,0 +1,44 @@
+import React, { type ReactNode } from 'react';
+import { type CommonProps } from '@alifd/next';
+export interface ToolStatusAuthProps {
+    content: string | ReactNode;
+    onAuthClick?: (data: ToolStatusProps) => void;
+}
+/**
+ * 参考来源属性
+ */
+export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    className?: string;
+    /**
+     * 是否被选中
+     */
+    selected?: boolean;
+    /**
+     * 工具调用状态
+     */
+    status?: 'started' | 'running' | 'completed' | 'failed' | 'auth';
+    /**
+     * 工具调用结果
+     */
+    result?: string | ReactNode;
+    /**
+     *  工具点击
+     */
+    onToolClick?: (data: ToolStatusProps) => void;
+    /**
+     * 额外的授权信息
+     */
+    authInfo?: ToolStatusAuthProps;
+    /**
+     * 工具名称
+     */
+    name?: string;
+    /**
+     * 工具详情链接
+     */
+    useText?: string;
+    /**
+     * 是否100%的宽度
+     */
+    fullWidth?: boolean;
+}

package/lib/tool-status/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.35",
+  "version": "0.3.36",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -453,6 +453,18 @@
     "./flip/style.js": {
       "import": "./es/flip/style.js",
       "require": "./lib/flip/style.js"
+    },
+    "./tool-status": {
+      "import": "./es/tool-status/index.js",
+      "require": "./lib/tool-status/index.js"
+    },
+    "./tool-status/style": {
+      "import": "./es/tool-status/style.js",
+      "require": "./lib/tool-status/style.js"
+    },
+    "./tool-status/style.js": {
+      "import": "./es/tool-status/style.js",
+      "require": "./lib/tool-status/style.js"
     }
   },
   "files": [