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

package/es/html-render/index.js

@@ -10,11 +10,9 @@ import classnames from 'classnames';
 import sanitizeHtml from 'sanitize-html';
 import parse, { domToReact, Element } from 'html-react-parser';
 import { PhotoProvider } from 'react-photo-view';
-import Img from '../img';
 import { ConfigProvider } from '@alifd/next';
-import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
-import copy from 'copy-to-clipboard';
-import { Message } from '@alifd/next';
+import { PREFIX_DEFAULT, assignSubComponent, defaultCopyText } from '../utils';
+import Img from '../img';
 import Balloon from '../balloon';
 import '../balloon/style';
 const sanitizeHtmlOptions = {
@@ -51,7 +49,7 @@ const sanitizeHtmlOptions = {
     allowProtocolRelative: false,
 };
 const isMobile = /HarmonyOS|ArkWeb|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
-const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePreview, loose, handleOpenLink, sendTextMessage, copyText, i18n, handleImageClick, renderImage, typewriterEffect }) {
+const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePreview, loose, handleOpenLink, sendTextMessage, copyText, handleImageClick, renderImage, typewriterEffect }) {
     // // 处理钉钉特定链接
     // function handleDingtalkUrl(href: string) {
     //   return () => {
@@ -65,14 +63,6 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
         }
         window.open(url);
     };
-    const defaultCopyText = (text) => {
-        if (!text) {
-            return;
-        }
-        copy(text);
-        // TODO 换成 fusion/chat 的 toast
-        Message.success('复制成功');
-    };
     // 暂时不做实现
     const defaultSendMessage = () => {
         return;
@@ -97,99 +87,121 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
                 }, className: "generating-char" }, char));
         })));
     };
-    // 已替换
-    const parserOptionsOld = {
-        // @ts-ignore
-        replace: domNode => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            // 处理文本节点
-            if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
-                return processTextNode(domNode);
-            }
-            if (domNode instanceof Element && domNode.attribs) {
-                const { name } = domNode;
-                if (name === 'link-reference') {
-                    const element = (domToReact([domNode]));
-                    // link-reference 的子元素一定是 a 标签
-                    const aElement = (_a = element.props) === null || _a === void 0 ? void 0 : _a.children;
-                    // a 标签的子元素一定是 span 节点
-                    const spanElement = (_b = aElement === null || aElement === void 0 ? void 0 : aElement.props) === null || _b === void 0 ? void 0 : _b.children;
-                    const handleUrlClick = () => {
-                        var _a;
-                        if (!((_a = aElement === null || aElement === void 0 ? void 0 : aElement.props) === null || _a === void 0 ? void 0 : _a.href)) {
-                            return;
-                        }
-                        if (handleOpenLink) {
-                            handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(aElement.props.href);
-                        }
-                        else {
-                            defaultOpenLink(aElement.props.href);
-                        }
-                    };
-                    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, 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]));
-                    const { props } = element;
-                    if (props.href && props.href.startsWith('message://')) {
-                        const msgValue = decodeURIComponent(props.href.slice(10));
-                        return React.cloneElement(element, {
-                            onClick: () => {
-                                if (sendTextMessage) {
-                                    sendTextMessage(msgValue);
-                                    return;
-                                }
-                                defaultSendMessage();
-                            },
-                            href: undefined
-                        });
-                    }
-                    if (props.href && props.href.startsWith('copy://')) {
-                        const copyValue = decodeURIComponent(props.href.slice(7));
-                        return React.cloneElement(element, {
-                            onClick: () => {
-                                if (copyText) {
-                                    copyText(copyValue);
-                                    return;
-                                }
-                                defaultCopyText(copyValue);
-                            },
-                            href: undefined
-                        });
-                    }
-                    // H5场景和钉协议场景都需要代理Click事件
-                    if (props.href && (/^dtmd:\/\/dingtalkclient|^dingtalk:\/\/dingtalkclient\/action\/jumprobot|^(https?:)?\/\/qr.dingtalk.com\/action\/jumprobot|^https:\/\/applink\.dingtalk\.com\/page\/link/.test(props.href) || isMobile)) {
-                        return React.cloneElement(element, {
-                            onClick: () => {
-                                if (handleOpenLink) {
-                                    handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(props.href);
-                                    return;
-                                }
-                                defaultOpenLink(props.href);
-                            },
-                            href: undefined
-                        });
-                    }
-                    return React.cloneElement(element, {
-                        target: '_blank',
-                    });
-                }
-                if (name === 'img') {
-                    const element = (domToReact([domNode]));
-                    if (renderImage) {
-                        return renderImage(element.props);
-                    }
-                    // 换成统一的图片渲染
-                    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);
-                        } }));
-                }
-            }
-        }
-    };
+    // // 已替换
+    // const parserOptionsOld: HTMLReactParserOptions = {
+    //   // @ts-expect-error html-react-parser 的类型定义不完整
+    //   replace: domNode => {
+    //     // 处理文本节点
+    //     if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
+    //       return processTextNode(domNode as Text);
+    //     }
+    //     if (domNode instanceof Element && domNode.attribs) {
+    //       const { name } = domNode;
+    //       if (name === 'link-reference') {
+    //         const element = (domToReact([domNode])) as JSX.Element;
+    //         // link-reference 的子元素一定是 a 标签
+    //         const aElement = element.props?.children as JSX.Element;
+    //         // a 标签的子元素一定是 span 节点
+    //         const spanElement = aElement?.props?.children as JSX.Element;
+    //         const handleUrlClick = () => {
+    //           if (!aElement?.props?.href) {
+    //             return;
+    //           }
+    //           if (handleOpenLink) {
+    //             handleOpenLink?.(aElement.props.href);
+    //           } else {
+    //             defaultOpenLink(aElement.props.href);
+    //           }
+    //         };
+    //         return (
+    //           <Balloon
+    //             v2
+    //             align="b"
+    //             className="link-reference-balloon"
+    //             closable={false}
+    //             offset={[0, -8]}
+    //             triggerType={['hover']}
+    //             trigger={
+    //               <span className="link-reference-index" onClick={handleUrlClick}>
+    //                 {spanElement?.props?.children}
+    //               </span>
+    //             }
+    //           >
+    //             <div className="link-reference-content">
+    //               <img
+    //                 className="link-reference-source-icon"
+    //                 src={element.props?.['data-source-icon'] || ''}
+    //               />
+    //               <a
+    //                 className="link-reference-title"
+    //                 onClick={handleUrlClick}
+    //                 title={element.props?.['data-title'] || ''}
+    //               >
+    //                 {element.props?.['data-title'] || ''}
+    //               </a>
+    //             </div>
+    //           </Balloon>
+    //         );
+    //       }
+    //       if (name === 'a') {
+    //         const element = (domToReact([domNode])) as JSX.Element;
+    //         const { props } = element;
+    //         if (props.href && props.href.startsWith('message://')) {
+    //           const msgValue = decodeURIComponent(props.href.slice(10));
+    //           return React.cloneElement(element, {
+    //             onClick: () => {
+    //               if(sendTextMessage){
+    //                 sendTextMessage(msgValue);
+    //                 return
+    //               }
+    //               defaultSendMessage();
+    //             },
+    //             href: undefined
+    //           });
+    //         }
+    //         if (props.href && props.href.startsWith('copy://')) {
+    //           const copyValue = decodeURIComponent(props.href.slice(7));
+    //           return React.cloneElement(element, {
+    //             onClick: ()=>{
+    //               if(copyText){
+    //                 copyText(copyValue);
+    //                 return;
+    //               }
+    //               defaultCopyText(copyValue);
+    //             },
+    //             href: undefined
+    //           });
+    //         }
+    //         // H5场景和钉协议场景都需要代理Click事件
+    //         if (props.href && (/^dtmd:\/\/dingtalkclient|^dingtalk:\/\/dingtalkclient\/action\/jumprobot|^(https?:)?\/\/qr.dingtalk.com\/action\/jumprobot|^https:\/\/applink\.dingtalk\.com\/page\/link/.test(props.href) || isMobile)) {
+    //           return React.cloneElement(element, {
+    //             onClick: ()=> {
+    //               if(handleOpenLink){
+    //                 handleOpenLink?.(props.href);
+    //                 return;
+    //               }
+    //               defaultOpenLink(props.href);
+    //             },
+    //             href: undefined
+    //           });
+    //         }
+    //         return React.cloneElement(element, {
+    //           target: '_blank',
+    //         });
+    //       }
+    //       if (name === 'img') {
+    //         const element = (domToReact([domNode])) as JSX.Element;
+    //         if(renderImage){
+    //           return renderImage(element.props);
+    //         }
+    //         // 换成统一的图片渲染
+    //         return <Img {...element.props} imageClassName={element.props?.className} enablePreview={imagePreview} onImageClick={()=>{
+    //           handleImageClick?.(element.props.src)
+    //         }}/>
+    //       }
+    //     }
+    //   }
+    // };
     const element = useMemo(() => {
         indexRef.current = 0;
         // 已替换

package/es/html-render/main.scss

@@ -9,6 +9,11 @@
   font-family: inherit;
   color: $color-text1-4;
 
+  // 最后一个子元素的 margin-bottom 为 0
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
   &.loose {
     font-size: 16px;
     line-height: 1.85;
@@ -55,12 +60,12 @@
   h1, h2, h3, h4, h5, h6 {
     font-weight: bold;
     color: $color-text1-4;
+    margin-bottom: var(--s-1, 4px);
   }
 
   h1 {
     font-size: 18px;
-    line-height: 1.8;
-    margin: 0.5rem 0;
+    line-height: 24px;
 
     &.loose {
       font-size: 28px;
@@ -69,8 +74,7 @@
 
   h2 {
     font-size: 16px;
-    line-height: 1.8;
-    margin: 0.5rem 0;
+    line-height: 24px;
 
     &.loose {
       font-size: 24px;
@@ -79,7 +83,7 @@
 
   h3, h4, h5, h6 {
     font-size: 14px;
-    line-height: 2;
+    line-height: 22px;
   }
 
   h3 {
@@ -94,6 +98,12 @@
     }
   }
 
+  p {
+    line-height: 22px;
+    font-size: 14px;
+    margin-bottom: var(--s-1, 4px);
+  }
+
 
   img, video, .image {
     max-width: 100%;
@@ -157,7 +167,7 @@
 
   table {
     line-height: 1.6;
-    margin: 10px auto;
+    margin: var(--s-2, 8px) auto;
     border-spacing: none;
     border-collapse: collapse;
     empty-cells: show;
@@ -199,10 +209,19 @@
     list-style: revert;
     padding-left: 20px;
     margin: 0;
+    margin-bottom: var(--s-1, 4px);
 
     &.loose {
       padding-left: 30px;
     }
+
+    li {
+      list-style: revert;
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   li {
@@ -230,8 +249,8 @@
     opacity: 0.6;
     font-style: italic;
     position: relative;
-    margin-top: 6px;
-    margin-bottom: 6px;
+    margin-top: var(--s-2, 8px);
+    margin-bottom: var(--s-2, 8px);
 
     &.loose {
       margin-top: 20px;

package/es/html-render/style.d.ts

@@ -1 +1,2 @@
+import '@alifd/next/lib/message/style2';
 import './main.scss';

package/es/html-render/style.js

@@ -1 +1,2 @@
+import '@alifd/next/lib/message/style2';
 import './main.scss';

package/es/icon/index.d.ts

@@ -8,6 +8,6 @@
 import React from 'react';
 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>, {}>;
+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>>, "key" | keyof IconProps> & 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 | null;

package/es/index.d.ts

@@ -32,4 +32,7 @@ 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 { default as Collapse } from './collapse';
+export { default as Table } from './table';
+export { default as CodeView } from './code-view';
 export declare const version: string;

package/es/index.js

@@ -32,4 +32,7 @@ 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.40-beta.0';
+export { default as Collapse } from './collapse';
+export { default as Table } from './table';
+export { default as CodeView } from './code-view';
+export const version = '0.3.40-beta.1';

package/es/input/index.d.ts

@@ -2,7 +2,7 @@
  * @component 输入框
  * @en Input
  * @type 通用 - General
- * @remarks 同 Next Input，按钮用于开始一个即时操作。- Same as Next.Input, Input used to trigger an action.
+ * @remarks [输入器组件] 是一个 [输入类] UI 组件，用于 [接收用户自由文本输入]，包括数字、文本等类型，使用户能够 [动态提供信息并完成数据录入]。它在卡片中扮演 [数据输入与交互入口] 的角色，通常用于 [表单填写、参数配置等场景]。
  * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Inputs are used for emphasizing important functions on your page.
  * @others
  * ## 无障碍键盘操作指南

package/es/input/index.js

@@ -2,7 +2,7 @@
  * @component 输入框
  * @en Input
  * @type 通用 - General
- * @remarks 同 Next Input，按钮用于开始一个即时操作。- Same as Next.Input, Input used to trigger an action.
+ * @remarks [输入器组件] 是一个 [输入类] UI 组件，用于 [接收用户自由文本输入]，包括数字、文本等类型，使用户能够 [动态提供信息并完成数据录入]。它在卡片中扮演 [数据输入与交互入口] 的角色，通常用于 [表单填写、参数配置等场景]。
  * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Inputs are used for emphasizing important functions on your page.
  * @others
  * ## 无障碍键盘操作指南
@@ -22,21 +22,31 @@ import React, { forwardRef } from 'react';
 import { Input as NextInput, ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
-const Input = forwardRef((_a, ref) => {
+import { withLabel } from '../utils/hoc/withLabel';
+// 基础Input组件
+const BaseInput = forwardRef((_a, ref) => {
     var { className, size = 'medium' } = _a, props = __rest(_a, ["className", "size"]);
     return (React.createElement(NextInput, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}input`, className), size: size, ref: ref })));
 });
+BaseInput.displayName = 'BaseInput';
+// 基础TextArea组件
+const BaseTextArea = forwardRef((_a, ref) => {
+    var { className, size = 'medium' } = _a, props = __rest(_a, ["className", "size"]);
+    return (React.createElement(NextInput.TextArea, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}textarea`, className), size: size, ref: ref })));
+});
+BaseTextArea.displayName = 'BaseTextArea';
+// 带Label的Input组件
+const Input = withLabel(BaseInput);
 const InputWithSub = assignSubComponent(Input, {
     displayName: 'Input',
 });
-const InputTextArea = forwardRef((_a, ref) => {
-    var { className, size = 'medium' } = _a, props = __rest(_a, ["className", "size"]);
-    return (React.createElement(NextInput.TextArea, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}input`, className), size: size, ref: ref })));
-});
+// 带Label的TextArea组件
+const InputTextArea = withLabel(BaseTextArea);
 const InputTextAreaWithSub = assignSubComponent(InputTextArea, {
     displayName: 'InputTextArea',
 });
 export * from './types';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Result = ConfigProvider.config(InputWithSub);
 Result.TextArea = ConfigProvider.config(InputTextAreaWithSub);
 export default Result;

package/es/input/main.scss

@@ -1,5 +1,30 @@
 @import "../core/variables.scss";
 
 .#{$prefix}input {
+  &.next-input {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+  }
 
+  .next-input-control {
+    width: auto;
+  }
+}
+
+.#{$prefix}textarea {
+  border: none;
+  position: relative;
+  --input-multiple-font-size: 14px;
+  --input-multiple-padding-tb: var(---s-2, 8px);
+  --input-multiple-padding-lr: var(---s-2, 8px);
+
+  &.next-input:hover {
+    background-color: transparent;
+  }
+
+  textarea {
+    line-height: var(--form-element-medium-line-height, 18px);
+  }
 }

package/es/input/style.d.ts

@@ -1 +1,2 @@
 import '@alifd/next/lib/input/style2';
+import './main.scss';

package/es/input/style.js

@@ -1 +1,2 @@
 import '@alifd/next/lib/input/style2';
+import './main.scss';