@alifd/chat 0.3.31 → 0.3.32-beta.2

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

@@ -1,4 +1,5 @@
 import { HTMLRendererProps } from './types';
+import '../balloon/style';
 export * from './types';
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<HTMLRendererProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, unknown, {}>;
 export default _default;

package/es/html-render/index.js

@@ -15,12 +15,15 @@ import { ConfigProvider } from '@alifd/next';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 import copy from 'copy-to-clipboard';
 import { Message } from '@alifd/next';
+import Balloon from '../balloon';
+import '../balloon/style';
 const IMAGE_MAX_HEIGHT = 222;
 const IMAGE_MAX_WIDTH = 372;
 const sanitizeHtmlOptions = {
     allowedTags: sanitizeHtml.defaults.allowedTags.concat([
         'acronym', 'audio', 'big', 'center', 'del', 'dir', 'font',
         'img', 'ins', 'source', 'strike', 'track', 'tt', 'video',
+        'link-reference',
     ]),
     allowedAttributes: {
         '*': ['data-*', 'title', 'align', 'bgcolor', 'class', 'style'],
@@ -100,13 +103,36 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
     const parserOptions = {
         // @ts-ignore
         replace: domNode => {
-            var _a;
+            var _a, _b, _c, _d, _e, _f;
             // 处理文本节点
             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 }, ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || ''))));
+                }
                 if (name === 'a') {
                     const element = (domToReact([domNode]));
                     const { props } = element;
@@ -159,7 +185,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
                         return renderImage(element.props);
                     }
                     // 换成统一的图片渲染
-                    return React.createElement(Img, Object.assign({}, element.props, { imageClassName: (_a = element.props) === null || _a === void 0 ? void 0 : _a.className, enablePreview: imagePreview, onImageClick: () => {
+                    return React.createElement(Img, Object.assign({}, element.props, { imageClassName: (_f = element.props) === null || _f === void 0 ? void 0 : _f.className, enablePreview: imagePreview, onImageClick: () => {
                             handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(element.props.src);
                         } }));
                 }

package/es/html-render/main.scss

@@ -256,4 +256,86 @@
       opacity: 1;
     }
   }
+  .link-reference-index {
+    display: inline-block;
+    font-size: 10px;
+    height: 16px;
+    vertical-align: text-bottom;
+    border-radius: 4px;
+    color: $color-text1-3;
+    background-color: $color-fill1-2;
+    margin: 0 4px;
+    padding: 0 4px;
+    cursor: pointer;
+    user-select: none;
+    --web-kit-user-select: none;
+    transition: color 0.3s, background-color 0.3s;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: $color-brand1-6;
+        color: $color-bg-1;
+      }
+    }
+
+    // 移动端触摸反馈
+    &:active {
+      background-color: $color-brand1-6;
+      color: $color-bg-1;
+    }
+  }
+}
+
+.link-reference-balloon {
+  max-width: 168px !important;
+  background-color: $color-bg-1 !important;
+  border-radius: 6px !important;
+  padding: 8px !important;
+
+  .link-reference-source-icon {
+    flex: none;
+    width: 28px;
+    height: 16px;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      display: none;
+    }
+  }
+
+  .link-reference-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .link-reference-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .next-balloon-arrow {
+    display: none !important;
+  }
+  a {
+    cursor: pointer;
+    color: $color-link-1;
+    text-decoration: none;
+    &:hover {
+      color: $color-link-2;
+      text-decoration: none;
+    }
+    &:focus, &:visited {
+      color: $color-link-3;
+      text-decoration: none;
+    }
+  }
 }

package/es/index.js

@@ -31,4 +31,4 @@ 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.31';
+export const version = '0.3.32-beta.2';

package/lib/html-render/index.d.ts

@@ -1,4 +1,5 @@
 import { HTMLRendererProps } from './types';
+import '../balloon/style';
 export * from './types';
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<HTMLRendererProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, unknown, {}>;
 export default _default;

package/lib/html-render/index.js

@@ -18,12 +18,15 @@ const next_1 = require("@alifd/next");
 const utils_1 = require("../utils");
 const copy_to_clipboard_1 = tslib_1.__importDefault(require("copy-to-clipboard"));
 const next_2 = require("@alifd/next");
+const balloon_1 = tslib_1.__importDefault(require("../balloon"));
+require("../balloon/style");
 const IMAGE_MAX_HEIGHT = 222;
 const IMAGE_MAX_WIDTH = 372;
 const sanitizeHtmlOptions = {
     allowedTags: sanitize_html_1.default.defaults.allowedTags.concat([
         'acronym', 'audio', 'big', 'center', 'del', 'dir', 'font',
         'img', 'ins', 'source', 'strike', 'track', 'tt', 'video',
+        'link-reference',
     ]),
     allowedAttributes: {
         '*': ['data-*', 'title', 'align', 'bgcolor', 'class', 'style'],
@@ -103,13 +106,36 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
     const parserOptions = {
         // @ts-ignore
         replace: domNode => {
-            var _a;
+            var _a, _b, _c, _d, _e, _f;
             // 处理文本节点
             if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
                 return processTextNode(domNode);
             }
             if (domNode instanceof html_react_parser_1.Element && domNode.attribs) {
                 const { name } = domNode;
+                if (name === 'link-reference') {
+                    const element = ((0, html_react_parser_1.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_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']) || ''))));
+                }
                 if (name === 'a') {
                     const element = ((0, html_react_parser_1.domToReact)([domNode]));
                     const { props } = element;
@@ -162,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: (_a = element.props) === null || _a === void 0 ? void 0 : _a.className, enablePreview: imagePreview, onImageClick: () => {
+                    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: () => {
                             handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(element.props.src);
                         } }));
                 }

package/lib/html-render/main.scss

@@ -256,4 +256,86 @@
       opacity: 1;
     }
   }
+  .link-reference-index {
+    display: inline-block;
+    font-size: 10px;
+    height: 16px;
+    vertical-align: text-bottom;
+    border-radius: 4px;
+    color: $color-text1-3;
+    background-color: $color-fill1-2;
+    margin: 0 4px;
+    padding: 0 4px;
+    cursor: pointer;
+    user-select: none;
+    --web-kit-user-select: none;
+    transition: color 0.3s, background-color 0.3s;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: $color-brand1-6;
+        color: $color-bg-1;
+      }
+    }
+
+    // 移动端触摸反馈
+    &:active {
+      background-color: $color-brand1-6;
+      color: $color-bg-1;
+    }
+  }
+}
+
+.link-reference-balloon {
+  max-width: 168px !important;
+  background-color: $color-bg-1 !important;
+  border-radius: 6px !important;
+  padding: 8px !important;
+
+  .link-reference-source-icon {
+    flex: none;
+    width: 28px;
+    height: 16px;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      display: none;
+    }
+  }
+
+  .link-reference-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .link-reference-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .next-balloon-arrow {
+    display: none !important;
+  }
+  a {
+    cursor: pointer;
+    color: $color-link-1;
+    text-decoration: none;
+    &:hover {
+      color: $color-link-2;
+      text-decoration: none;
+    }
+    &:focus, &:visited {
+      color: $color-link-3;
+      text-decoration: none;
+    }
+  }
 }

package/lib/index.js

@@ -68,4 +68,4 @@ 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.31';
+exports.version = '0.3.32-beta.2';

package/package.json

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