@alifd/chat 0.2.0-beta.1 → 0.2.0-beta.2

package/es/ImagePreview/main.scss

@@ -0,0 +1,15 @@
+.box {
+  display: inline-block;
+  position: relative;
+  cursor: zoom-in;
+
+  a[href] & {
+    cursor: pointer;
+  }
+}
+
+:global {
+  .PhotoView__Photo {
+    background-color: #fff;
+  }
+}

package/es/ImagePreview/style.d.ts

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

package/es/ImagePreview/style.js

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

package/es/ImagePreview/types.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+/**
+ * @api ImagePreview
+ */
+export interface ImagePreviewProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * 图片的源地址
+     * @en Source URL of the image
+     */
+    src: string;
+    /**
+     * 子元素
+     * @en Child elements
+     */
+    children?: React.ReactElement;
+    /**
+     * 图片的宽度
+     * @en Width of the image
+     */
+    width?: number;
+    /**
+     * 图片的高度
+     * @en Height of the image
+     */
+    height?: number;
+}

package/es/ImagePreview/types.js

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

package/es/feedback/types.d.ts

@@ -8,15 +8,6 @@ export type FeedbackStatus = 'good' | 'stale' | 'bad';
  * @api
  */
 export type FeedbackActiveStatus = 'good' | 'bad';
-export interface TranslateInfo {
-    targetLang?: string;
-    icon?: string;
-    isTranslate?: boolean;
-}
-export interface TranslateConfig {
-    needTranslate?: boolean;
-    translateInfo?: TranslateInfo;
-}
 /**
  * @api Feedback
  */
@@ -57,9 +48,13 @@ export interface FeedbackProps extends HTMLAttributesWeek {
      */
     direction?: 'ver' | 'hoz';
     /**
-     * 底部左侧插槽
+     * 是否需要分享按钮
+     */
+    needShare?: boolean;
+    /**
+     * 是否需要分享按钮
      */
-    renderLeftSlot?: () => ReactNode;
+    onShareClick?: () => void;
 }
 /**
  * @api Feedback.Good

package/es/index.d.ts

@@ -13,5 +13,8 @@ export { default as Message } from './message';
 export { default as Icon } from './icon';
 export { default as Balloon } from './balloon';
 export { default as List } from './list';
+export { default as ImagePreview } from './ImagePreview';
+export { default as HTMLRenderer } from './HTMLRenderer';
+export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
 export declare const version: string;

package/es/index.js

@@ -13,5 +13,8 @@ export { default as Message } from './message';
 export { default as Icon } from './icon';
 export { default as Balloon } from './balloon';
 export { default as List } from './list';
+export { default as ImagePreview } from './ImagePreview';
+export { default as HTMLRenderer } from './HTMLRenderer';
+export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
-export const version = '0.2.0-beta.1';
+export const version = '0.2.0-beta.2';

package/es/markdown/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MarkdownProps } from './types';
+import 'highlight.js/styles/github.css';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MarkdownProps & React.RefAttributes<HTMLDivElement>, "key" | keyof MarkdownProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/es/markdown/index.js

@@ -0,0 +1,138 @@
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import classnames from 'classnames';
+import MarkdownIt from 'markdown-it';
+import HTMLRenderer from '../HTMLRenderer';
+import { ConfigProvider } from '@alifd/next';
+import { assignSubComponent } from '../utils';
+import { init, transformTextWithEmoji } from '@ali/dingtalk-im-emoji';
+import hljs from 'highlight.js'; // 引入 highlight.js
+import 'highlight.js/styles/github.css'; // 引入代码高亮样式
+/**
+ * @component Markdown
+ * @en Markdown
+ * @type 通用 - General
+ * @remarks Markdown 组件用于解析和渲染 Markdown 文本内容。 - Markdown component used to parse and render Markdown text content.
+ * @when 需要解析和渲染 Markdown 文本内容时使用。 - Use when you need to parse and render Markdown text content.
+ */
+const Markdown = forwardRef(({ className, onReady, content }, ref) => {
+    useEffect(() => {
+        // 初始化表情库
+        init();
+        onReady === null || onReady === void 0 ? void 0 : onReady();
+    }, [onReady]);
+    const containerRef = useRef(null);
+    // 处理 HTML 标签
+    const processedContent = useMemo(() => {
+        const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
+        return content.replace(regex, (match, attributes, text) => {
+            let sizeToken = '';
+            let colorTokenV2 = '';
+            // 提取属性
+            const sizeTokenMatch = attributes.match(/sizeToken=([\w_]+)/);
+            const colorTokenV2Match = attributes.match(/colorTokenV2=([\w_]+)/);
+            if (sizeTokenMatch) {
+                sizeToken = sizeTokenMatch[1].replace(/-/g, '_');
+            }
+            if (colorTokenV2Match) {
+                colorTokenV2 = colorTokenV2Match[1].replace(/-/g, '_');
+            }
+            // 生成样式
+            const styleParts = [];
+            if (sizeToken) {
+                styleParts.push(`font-size: var(--${sizeToken})`);
+            }
+            if (colorTokenV2) {
+                styleParts.push(`color: var(--${colorTokenV2})`);
+            }
+            const style = styleParts.join('; ');
+            return `<span style="${style}">${text}</span>`;
+        });
+    }, [content]);
+    // 转换表情符号
+    let transformedContent = useMemo(() => {
+        return transformTextWithEmoji(processedContent, {
+            genFrame: (name, url) => {
+                return {
+                    htmlTag: 'img',
+                    selfClose: true,
+                    attr: {
+                        draggable: 'false',
+                        style: 'vertical-align: text-center; display: inline-block; pointer-events: none;', // 使用相对单位和 inline-block 显示
+                        class: 'emoji',
+                        title: '[' + name + ']',
+                        src: url.url || url.staticURL,
+                        alt: name,
+                    },
+                };
+            },
+        });
+    }, [processedContent]);
+    // 渲染 Markdown
+    const html = useMemo(() => {
+        const md = new MarkdownIt({
+            html: true, // 确保允许解析 HTML 标签
+            xhtmlOut: true,
+            breaks: true,
+            langPrefix: 'language-',
+            linkify: true,
+            typographer: true,
+            highlight: (str, lang) => {
+                if (lang && hljs.getLanguage(lang)) {
+                    try {
+                        return hljs.highlight(lang, str, true).value;
+                    }
+                    catch (__) { }
+                }
+                return '';
+            }
+        });
+        // console.log(transformedContent, processedContent);
+        // 这里的 </ xx> 都被转成了&#x2F ， 所以会font标签的元素 后面都会多一个 </ xx>
+        transformedContent = transformedContent.replace(/<&#x2F;/g, '</');
+        return md.render(transformedContent);
+    }, [transformedContent]);
+    useEffect(() => {
+        if (containerRef.current) {
+            // 清除现有的 .code-block-header 元素
+            const existingHeaders = containerRef.current.querySelectorAll('.code-block-header');
+            existingHeaders.forEach(header => header.remove());
+            const codeBlocks = containerRef.current.querySelectorAll('pre code');
+            codeBlocks.forEach((block) => {
+                var _a;
+                const code = block.textContent || '';
+                const pre = block.parentElement;
+                const lang = block.className.replace('language-', '') || 'plaintext';
+                // 创建代码块头部
+                const header = document.createElement('div');
+                header.className = 'code-block-header';
+                // 创建语言标签
+                const languageSpan = document.createElement('span');
+                languageSpan.className = 'code-block-language';
+                languageSpan.textContent = lang;
+                // 创建复制按钮
+                const copyButton = document.createElement('button');
+                copyButton.className = 'code-block-copy';
+                copyButton.textContent = '复制';
+                copyButton.onclick = () => {
+                    navigator.clipboard.writeText(code).then(() => {
+                        copyButton.textContent = '已复制';
+                        setTimeout(() => {
+                            copyButton.textContent = '复制';
+                        }, 1000);
+                    });
+                };
+                header.appendChild(languageSpan);
+                header.appendChild(copyButton);
+                // 插入头部到代码块前
+                (_a = pre === null || pre === void 0 ? void 0 : pre.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(header, pre);
+            });
+        }
+    }, [html]);
+    return (React.createElement("div", { ref: containerRef, className: classnames(className) },
+        React.createElement(HTMLRenderer, { imagePreview: true }, html)));
+});
+const MarkdownWithSub = assignSubComponent(Markdown, {
+    displayName: 'Markdown',
+});
+export * from './types';
+export default ConfigProvider.config(MarkdownWithSub);

package/es/markdown/main.scss

@@ -0,0 +1,153 @@
+$primaryColor: #0080ff;
+$alternativePrimaryColor: $primaryColor;
+$mistPrimaryColor: fadeout($alternativePrimaryColor,93);
+$mediumTextColor: hsla(230,60%,11%,0.7);
+$subTextColor:  hsla(230,90%,11%,0.45);
+
+@mixin f-single-line() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  
+.box {
+  max-width: 100%;
+}
+
+.box img:only-child, .box video:only-child, .box .image:only-child {
+    display: inline-block;
+    margin: 0;
+    font-size: inherit;
+    vertical-align: inherit;
+}
+
+.emoji {
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+.title {
+  font-size: 16px;
+  font-weight: bolder;
+  margin-bottom: 12px;
+}
+
+.text > div {
+  color:$subTextColor;
+}
+
+.reference {
+  margin-top: 6px;
+  font-size: 12px;
+
+  &-tip {
+    display: flex;
+    margin: 0 -16px 6px 0;
+    justify-content: flex-end;
+
+    &-inner {
+      @include f-single-line();
+      background: linear-gradient(to right, transparent, $mistPrimaryColor);
+      padding: 0 16px 0 32px;
+      color: $mediumTextColor;
+      min-width: 0;
+      flex: 0 1 auto;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+}
+
+.trustworthyRiskAlert {
+  font-size: 12px;
+  line-height: 18px;
+  color: $subTextColor;
+  margin-bottom: 8px;
+}
+.code-block-header {
+    display: flex;
+    height:24px;
+    // margin-top: 8px;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #EAECED;
+    padding: 5px 10px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  .code-block-language {
+    font-weight: bold;
+  }
+  
+  .code-block-copy {
+    color: var(--common_level3_base_color);
+    border: none;
+    border-radius: 4px;
+    height: 20px;
+    cursor: pointer;
+  }
+  
+  pre {
+    background-color: #f8f8f8;
+    border-bottom-left-radius: 14px;
+    border-bottom-right-radius: 14px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .code-block-copy:hover {
+    background-color: #d2d2d2;
+  }
+
+:root {
+    --common_hypertitle_text_style__font_size: 64px;
+    --common_largetitle_text_style__font_size: 32px;
+    --common_h1_text_style__font_size: 24px;
+    --common_h2_text_style__font_size: 20px;
+    --common_h3_text_style__font_size: 18px;
+    --common_h4_text_style__font_size: 16px;
+    --common_h5_text_style__font_size: 15px;
+    --common_body_text_style__font_size: 14px;
+    --common_footnote_text_style__font_size: 12px;
+
+    --common_yellow1_color: #e5c442;
+    --common_orange1_color: #f1a13b;
+    --common_red1_color: #ec6033;
+    --common_pink1_color: #da5388;
+    --common_purple1_color: #af68cd;
+    --common_blue1_color: #387df6;
+    --common_water1_color: #79c6f5;
+    --common_olive1_color: #77912b;
+    --common_green1_color: #4fae51;
+    --common_level1_base_color: #1a1a1f;
+    --common_level2_base_color: #777578;
+    --common_level3_base_color: #a2a3a5;
+    --common_level4_base_color: #c8c8c9;
+    --common_gray1_color: #888f94;
+    --common_gray2_color: #abafb3;
+    --common_gray3_color: #c4c7ca;
+    --common_gray4_color: #696969;
+    --common_gray5_color: #e5e6e8;
+    --common_gray6_color: #f0f1f2;
+  }
+  
+  //暗黑模式的变量设置
+  @media (prefers-color-scheme: dark), (min-width: 0px) {
+    :root {
+        --common_level4_base_color:#47484a;
+        --common_gray1_color:#bebebe;
+        --common_gray2_color:#646464;
+        --common_gray3_color:#4b4b4b;
+        --common_gray4_color:#3a3a3a;
+        --common_gray5_color:#2c2c2c;
+        --common_gray6_color:#1e1e1e;
+        --common_level1_base_color:#D1D1D1;
+        --common_level2_base_color: #8C8C8D;
+        --common_level3_base_color:#757577;
+    }
+  }

package/es/markdown/style.d.ts

@@ -0,0 +1,3 @@
+import '../HTMLRenderer/style';
+import './main.scss';
+import 'highlight.js/styles/github.css';

package/es/markdown/style.js

@@ -0,0 +1,3 @@
+import '../HTMLRenderer/style';
+import './main.scss';
+import 'highlight.js/styles/github.css';

package/es/markdown/types.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+/**
+ * @api Markdown
+ */
+export interface MarkdownProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * 组件准备就绪的回调函数
+     * @en Callback function when the component is ready
+     */
+    onReady?: () => void;
+    /**
+     * Markdown 文本
+     * @en Data object
+     */
+    content: string;
+}

package/es/markdown/types.js

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

package/es/utils/func.d.ts

@@ -1,3 +1,4 @@
 import { type AnyFunction } from './types';
 export declare function debounce<Callback extends AnyFunction>(callback: Callback, delay: number, leading?: boolean): (...args: Parameters<Callback>) => void;
 export declare function throttle<Callback extends AnyFunction>(callback: Callback, delay: number): (...args: Parameters<Callback>) => void;
+export declare function findAncestor(element: HTMLElement | null, where: (e: HTMLElement) => boolean | undefined): HTMLElement | null;

package/es/utils/func.js

@@ -28,3 +28,12 @@ export function throttle(callback, delay) {
     };
     return fn;
 }
+export function findAncestor(element, where) {
+    if (!element || element === document.body) {
+        return null;
+    }
+    if (where(element)) {
+        return element;
+    }
+    return findAncestor(element.parentElement, where);
+}

package/lib/HTMLRenderer/index.d.ts

@@ -0,0 +1,4 @@
+import { HTMLRendererProps } from './types';
+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/HTMLRenderer/index.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/**
+ * @component HTML 渲染器
+ * @en HTML Renderer
+ * @type 通用 - General
+ * @remarks HTML 渲染组件用于解析和渲染 HTML 字符串，同时提供图片预览、链接处理和文本复制等功能。 - HTML renderer component used to parse and render HTML strings, with additional features such as image zoom, link handling, text copying and so on.
+ * @when 需要解析和渲染 HTML 字符串时使用。 - Use when you need to parse and render HTML strings.
+ */
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const sanitize_html_1 = tslib_1.__importDefault(require("sanitize-html"));
+const html_react_parser_1 = tslib_1.__importStar(require("html-react-parser"));
+const react_photo_view_1 = require("react-photo-view");
+const query_string_1 = tslib_1.__importDefault(require("query-string"));
+const ImagePreview_1 = tslib_1.__importDefault(require("../ImagePreview"));
+const next_1 = require("@alifd/next");
+const utils_1 = require("../utils");
+const sanitizeHtmlOptions = {
+    allowedTags: sanitize_html_1.default.defaults.allowedTags.concat([
+        'acronym', 'audio', 'big', 'center', 'del', 'dir', 'font',
+        'img', 'ins', 'source', 'strike', 'track', 'tt', 'video',
+    ]),
+    allowedAttributes: {
+        '*': ['data-*', 'title', 'align', 'bgcolor', 'class', 'style'],
+        a: ['href', 'download'],
+        audio: ['controls', 'crossorigin', 'loop', 'muted', 'preload', 'src'],
+        br: ['clear'],
+        caption: ['align'],
+        col: ['span'],
+        colgroup: ['span'],
+        font: ['color', 'face', 'size'],
+        hr: ['color', 'noshade', 'size'],
+        img: ['alt', 'src', 'crossorigin', 'decoding', 'sizes', 'srcset', 'align', 'width', 'height'],
+        li: ['value', 'type'],
+        ol: ['reversed', 'start', 'type'],
+        source: ['sizes', 'src', 'srcset', 'type', 'media'],
+        table: ['border', 'cellpadding', 'cellspacing', 'frame', 'rules', 'summary'],
+        td: ['headers', 'colspan', 'rowspan'],
+        th: ['headers', 'colspan', 'rowspan'],
+        track: ['default', 'kind', 'label', 'src', 'srclang'],
+        ul: ['type'],
+        video: ['controls', 'crossorigin', 'loop', 'muted', 'preload', 'src', 'poster', 'width', 'height'],
+    },
+    enforceHtmlBoundary: false,
+    disallowedTagsMode: 'discard',
+    allowedSchemes: ['http', 'https', 'ftp', 'mailto', 'tel', 'message', 'copy', 'dingtalk', 'dtmd'],
+    allowedSchemesAppliedToAttributes: ['href', 'src', 'cite'],
+    allowProtocolRelative: false,
+};
+const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, children, imagePreview, loose, handleOpenLink, sendTextMessage, copyText, i18n }) {
+    // 处理钉钉特定链接
+    function handleDingtalkUrl(href) {
+        return () => {
+            const { query } = query_string_1.default.parseUrl(href);
+            const { content, url, _assistant_adaptation, context } = query;
+            if (_assistant_adaptation === 'false') {
+                delete query._assistant_adaptation;
+                const newUrl = query_string_1.default.stringifyUrl({ url: href, query }, { sort: false });
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(newUrl);
+                return;
+            }
+            let contextObj;
+            try {
+                contextObj = JSON.parse(context || '');
+            }
+            catch (e) {
+                contextObj = {};
+            }
+            if (contextObj.allowToDingtalk && contextObj.allowToDingtalk === true) {
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(href);
+            }
+            else if (content) {
+                sendTextMessage === null || sendTextMessage === void 0 ? void 0 : sendTextMessage(`${content}`);
+            }
+            else if (url) {
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(url === null || url === void 0 ? void 0 : url.toString());
+            }
+            else {
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(href);
+            }
+        };
+    }
+    const parserOptions = {
+        replace: domNode => {
+            if (domNode instanceof html_react_parser_1.Element && domNode.attribs) {
+                const { name } = domNode;
+                if (name === 'a') {
+                    const element = ((0, html_react_parser_1.domToReact)([domNode]));
+                    const { props } = element;
+                    if (props.href && props.href.startsWith('message://')) {
+                        const msgValue = decodeURIComponent(props.href.slice(10));
+                        return react_1.default.cloneElement(element, {
+                            onClick: () => sendTextMessage === null || sendTextMessage === void 0 ? void 0 : sendTextMessage(msgValue),
+                            href: undefined
+                        });
+                    }
+                    if (props.href && props.href.startsWith('copy://')) {
+                        const copyValue = decodeURIComponent(props.href.slice(7));
+                        return react_1.default.cloneElement(element, {
+                            onClick: copyText === null || copyText === void 0 ? void 0 : copyText(copyValue, i18n),
+                            href: undefined
+                        });
+                    }
+                    if (props.href && /^dtmd:\/\/dingtalkclient|^dingtalk:\/\/dingtalkclient\/action\/jumprobot|^(https?:)?\/\/qr.dingtalk.com\/action\/jumprobot/.test(props.href)) {
+                        return react_1.default.cloneElement(element, {
+                            onClick: handleDingtalkUrl(props.href),
+                            href: undefined
+                        });
+                    }
+                    return react_1.default.cloneElement(element, {
+                        target: '_blank',
+                    });
+                }
+                if (name === 'img') {
+                    const element = ((0, html_react_parser_1.domToReact)([domNode]));
+                    if (imagePreview) {
+                        return react_1.default.createElement(ImagePreview_1.default, { className: "image", src: element.props.src }, element);
+                    }
+                    else {
+                        return element;
+                    }
+                }
+            }
+        }
+    };
+    const element = (0, react_1.useMemo)(() => {
+        return (0, html_react_parser_1.default)((0, sanitize_html_1.default)(children || '', sanitizeHtmlOptions), parserOptions);
+    }, [children]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('box', className, {
+            'loose': loose,
+        }) }, imagePreview ?
+        react_1.default.createElement(react_photo_view_1.PhotoProvider, null, element)
+        : element));
+});
+const HTMLRendererWithSub = (0, utils_1.assignSubComponent)(HTMLRenderer, {
+    displayName: 'HTMLRenderer',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(HTMLRendererWithSub);