@alifd/chat 0.3.0-beta.0 → 0.3.0-beta.2

package/es/HTMLRenderer/index.less

@@ -1,5 +1,3 @@
-@import '../../var.less';
-
 .box {
   font-size: 14px;
   // color: hsla(230, 10%, 11%, 0.9);

package/es/core/variables.scss

@@ -32,4 +32,5 @@ $color-line1-3: var(--color-line1-3, #c4c6cf) !default;
 /// 重
 $color-line1-4: var(--color-line1-4, #a0a2ad) !default;
 
+$color-brand1-1: var(--color-brand1-1, #DEE8FF) !default;
 

package/es/index.d.ts

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

package/es/index.js

@@ -17,4 +17,5 @@ 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.3.0-beta.0';
+export { default as Origin } from './origin';
+export const version = '0.3.0-beta.2';

package/es/markdown/index.js

@@ -23,6 +23,18 @@ const Markdown = forwardRef(({ className, onReady, content }, ref) => {
     const containerRef = useRef(null);
     // 处理 HTML 标签
     const processedContent = useMemo(() => {
+        // 使用 Record 类型来定义映射关系
+        const sizeTokenToTagMap = {
+            common_hypertitle_text_style__font_size: 'h1',
+            common_largetitle_text_style__font_size: 'h1',
+            common_h1_text_style__font_size: 'h1',
+            common_h2_text_style__font_size: 'h2',
+            common_h3_text_style__font_size: 'h3',
+            common_h4_text_style__font_size: 'h4',
+            common_h5_text_style__font_size: 'h5',
+            common_body_text_style__font_size: 'span',
+            common_footnote_text_style__font_size: 'span'
+        };
         const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
         return content.replace(regex, (match, attributes, text) => {
             let sizeToken = '';
@@ -45,7 +57,10 @@ const Markdown = forwardRef(({ className, onReady, content }, ref) => {
                 styleParts.push(`color: var(--${colorTokenV2})`);
             }
             const style = styleParts.join('; ');
-            return `<span style="${style}">${text}</span>`;
+            // 根据 sizeToken 选择适当的标签
+            const tag = sizeTokenToTagMap[sizeToken] || 'span';
+            return `<${tag} style="${style}" class="markdownFont">${text}</${tag}>`;
+            // return `<span style="${style}">${text}</span>`;
         });
     }, [content]);
     // 转换表情符号
@@ -114,12 +129,34 @@ const Markdown = forwardRef(({ className, onReady, content }, ref) => {
                 copyButton.className = 'code-block-copy';
                 copyButton.textContent = '复制';
                 copyButton.onclick = () => {
-                    navigator.clipboard.writeText(code).then(() => {
-                        copyButton.textContent = '已复制';
-                        setTimeout(() => {
-                            copyButton.textContent = '复制';
-                        }, 1000);
-                    });
+                    if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+                        navigator.clipboard.writeText(code).then(() => {
+                            copyButton.textContent = '已复制';
+                            setTimeout(() => {
+                                copyButton.textContent = '复制';
+                            }, 1000);
+                        }).catch(() => {
+                            copyButton.textContent = '复制失败';
+                        });
+                    }
+                    else {
+                        //有些环境还不支持navigator.clipboard，降级使用document.execCommand
+                        const textArea = document.createElement('textarea');
+                        textArea.value = code;
+                        document.body.appendChild(textArea);
+                        textArea.select();
+                        try {
+                            document.execCommand('copy');
+                            copyButton.textContent = '已复制';
+                            setTimeout(() => {
+                                copyButton.textContent = '复制';
+                            }, 1000);
+                        }
+                        catch (err) {
+                            copyButton.textContent = '复制失败';
+                        }
+                        document.body.removeChild(textArea);
+                    }
                 };
                 header.appendChild(languageSpan);
                 header.appendChild(copyButton);

package/es/markdown/main.scss

@@ -1,8 +1,10 @@
-$primaryColor: #0080ff;
+@import "../core/variables.scss";
+
+$primaryColor: $color-brand1-6;
 $alternativePrimaryColor: $primaryColor;
-$mistPrimaryColor: fadeout($alternativePrimaryColor,93);
-$mediumTextColor: hsla(230,60%,11%,0.7);
-$subTextColor:  hsla(230,90%,11%,0.45);
+$mistPrimaryColor: $color-brand1-1;
+$mediumTextColor: $color-text1-3;
+$subTextColor: $color-text1-2;
 
 @mixin f-single-line() {
     overflow: hidden;

package/es/origin/index.d.ts

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

package/es/origin/index.js

@@ -0,0 +1,19 @@
+/**
+ * @component Origin
+ * @en Origin
+ * @type 通用 - Origin
+ * @when Origin
+ */
+import React, { forwardRef } from 'react';
+import { ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Origin = forwardRef(({ className, text }, ref) => {
+    return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}origin`, className) },
+        React.createElement("div", { className: 'origin-tip-inner' }, text)));
+});
+const OriginWithSub = assignSubComponent(Origin, {
+    displayName: 'Origin',
+});
+export * from './types';
+export default ConfigProvider.config(OriginWithSub);

package/es/origin/main.scss

@@ -0,0 +1,18 @@
+@import "../core/variables.scss";
+
+.#{$prefix}origin {
+  display: flex;
+  justify-content: flex-end;
+  .origin-tip-inner {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background: linear-gradient(90deg, transparent, $color-brand1-1);
+    padding: 0 16px 0 32px;
+    color: $color-text1-3;
+    min-width: 0;
+    flex: 0 1 auto;
+    font-size: 12px;
+    line-height: 20px;
+  }
+}

package/es/origin/style.d.ts

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

package/es/origin/style.js

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

package/es/origin/types.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from 'react';
+import { type CommonProps } from '@alifd/next';
+/**
+ * @api
+ */
+export interface OriginProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    className?: string;
+    /**
+     * 来源的文案或者dom内容
+    */
+    text?: string | ReactNode;
+}

package/es/origin/types.js

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

package/lib/HTMLRenderer/index.less

@@ -1,5 +1,3 @@
-@import '../../var.less';
-
 .box {
   font-size: 14px;
   // color: hsla(230, 10%, 11%, 0.9);

package/lib/core/variables.scss

@@ -32,4 +32,5 @@ $color-line1-3: var(--color-line1-3, #c4c6cf) !default;
 /// 重
 $color-line1-4: var(--color-line1-4, #a0a2ad) !default;
 
+$color-brand1-1: var(--color-brand1-1, #DEE8FF) !default;
 

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.CardLoading = exports.Markdown = exports.HTMLRenderer = 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.Origin = exports.CardLoading = exports.Markdown = exports.HTMLRenderer = 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; } });
@@ -40,4 +40,6 @@ var markdown_1 = require("./markdown");
 Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return tslib_1.__importDefault(markdown_1).default; } });
 var card_loading_1 = require("./card-loading");
 Object.defineProperty(exports, "CardLoading", { enumerable: true, get: function () { return tslib_1.__importDefault(card_loading_1).default; } });
-exports.version = '0.3.0-beta.0';
+var origin_1 = require("./origin");
+Object.defineProperty(exports, "Origin", { enumerable: true, get: function () { return tslib_1.__importDefault(origin_1).default; } });
+exports.version = '0.3.0-beta.2';

package/lib/markdown/index.js

@@ -26,6 +26,18 @@ const Markdown = (0, react_1.forwardRef)(({ className, onReady, content }, ref)
     const containerRef = (0, react_1.useRef)(null);
     // 处理 HTML 标签
     const processedContent = (0, react_1.useMemo)(() => {
+        // 使用 Record 类型来定义映射关系
+        const sizeTokenToTagMap = {
+            common_hypertitle_text_style__font_size: 'h1',
+            common_largetitle_text_style__font_size: 'h1',
+            common_h1_text_style__font_size: 'h1',
+            common_h2_text_style__font_size: 'h2',
+            common_h3_text_style__font_size: 'h3',
+            common_h4_text_style__font_size: 'h4',
+            common_h5_text_style__font_size: 'h5',
+            common_body_text_style__font_size: 'span',
+            common_footnote_text_style__font_size: 'span'
+        };
         const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
         return content.replace(regex, (match, attributes, text) => {
             let sizeToken = '';
@@ -48,7 +60,10 @@ const Markdown = (0, react_1.forwardRef)(({ className, onReady, content }, ref)
                 styleParts.push(`color: var(--${colorTokenV2})`);
             }
             const style = styleParts.join('; ');
-            return `<span style="${style}">${text}</span>`;
+            // 根据 sizeToken 选择适当的标签
+            const tag = sizeTokenToTagMap[sizeToken] || 'span';
+            return `<${tag} style="${style}" class="markdownFont">${text}</${tag}>`;
+            // return `<span style="${style}">${text}</span>`;
         });
     }, [content]);
     // 转换表情符号
@@ -117,12 +132,34 @@ const Markdown = (0, react_1.forwardRef)(({ className, onReady, content }, ref)
                 copyButton.className = 'code-block-copy';
                 copyButton.textContent = '复制';
                 copyButton.onclick = () => {
-                    navigator.clipboard.writeText(code).then(() => {
-                        copyButton.textContent = '已复制';
-                        setTimeout(() => {
-                            copyButton.textContent = '复制';
-                        }, 1000);
-                    });
+                    if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+                        navigator.clipboard.writeText(code).then(() => {
+                            copyButton.textContent = '已复制';
+                            setTimeout(() => {
+                                copyButton.textContent = '复制';
+                            }, 1000);
+                        }).catch(() => {
+                            copyButton.textContent = '复制失败';
+                        });
+                    }
+                    else {
+                        //有些环境还不支持navigator.clipboard，降级使用document.execCommand
+                        const textArea = document.createElement('textarea');
+                        textArea.value = code;
+                        document.body.appendChild(textArea);
+                        textArea.select();
+                        try {
+                            document.execCommand('copy');
+                            copyButton.textContent = '已复制';
+                            setTimeout(() => {
+                                copyButton.textContent = '复制';
+                            }, 1000);
+                        }
+                        catch (err) {
+                            copyButton.textContent = '复制失败';
+                        }
+                        document.body.removeChild(textArea);
+                    }
                 };
                 header.appendChild(languageSpan);
                 header.appendChild(copyButton);

package/lib/markdown/main.scss

@@ -1,8 +1,10 @@
-$primaryColor: #0080ff;
+@import "../core/variables.scss";
+
+$primaryColor: $color-brand1-6;
 $alternativePrimaryColor: $primaryColor;
-$mistPrimaryColor: fadeout($alternativePrimaryColor,93);
-$mediumTextColor: hsla(230,60%,11%,0.7);
-$subTextColor:  hsla(230,90%,11%,0.45);
+$mistPrimaryColor: $color-brand1-1;
+$mediumTextColor: $color-text1-3;
+$subTextColor: $color-text1-2;
 
 @mixin f-single-line() {
     overflow: hidden;

package/lib/origin/index.d.ts

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

package/lib/origin/index.js

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * @component Origin
+ * @en Origin
+ * @type 通用 - Origin
+ * @when Origin
+ */
+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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const Origin = (0, react_1.forwardRef)(({ className, text }, ref) => {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}origin`, className) },
+        react_1.default.createElement("div", { className: 'origin-tip-inner' }, text)));
+});
+const OriginWithSub = (0, utils_1.assignSubComponent)(Origin, {
+    displayName: 'Origin',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(OriginWithSub);

package/lib/origin/main.scss

@@ -0,0 +1,18 @@
+@import "../core/variables.scss";
+
+.#{$prefix}origin {
+  display: flex;
+  justify-content: flex-end;
+  .origin-tip-inner {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background: linear-gradient(90deg, transparent, $color-brand1-1);
+    padding: 0 16px 0 32px;
+    color: $color-text1-3;
+    min-width: 0;
+    flex: 0 1 auto;
+    font-size: 12px;
+    line-height: 20px;
+  }
+}

package/lib/origin/style.d.ts

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

package/lib/origin/style.js

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

package/lib/origin/types.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from 'react';
+import { type CommonProps } from '@alifd/next';
+/**
+ * @api
+ */
+export interface OriginProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    className?: string;
+    /**
+     * 来源的文案或者dom内容
+    */
+    text?: string | ReactNode;
+}

package/lib/origin/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.0-beta.0",
+  "version": "0.3.0-beta.2",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -265,6 +265,18 @@
     "./card-loading/style.js": {
       "import": "./es/card-loading/style.js",
       "require": "./lib/card-loading/style.js"
+    },
+    "./origin": {
+      "import": "./es/origin/index.js",
+      "require": "./lib/origin/index.js"
+    },
+    "./origin/style": {
+      "import": "./es/origin/style.js",
+      "require": "./lib/origin/style.js"
+    },
+    "./origin/style.js": {
+      "import": "./es/origin/style.js",
+      "require": "./lib/origin/style.js"
     }
   },
   "files": [