@alifd/chat 0.3.11-beta.2 → 0.3.11-beta.3

package/es/core/variables.scss

@@ -27,7 +27,7 @@ $s-7: var(---s-7, 28px) !default;
 $s-8: var(---s-8, 32px) !default;
 $s-9: var(---s-9, 36px) !default;
 $s-10: var(---s-10, 40px) !default;
-
+$s-15: var(---s-15, 60px) !default;
 
 $font-size-headline: var(--font-size-headline, 24px) !default;
 $font-size-title: var(--font-size-title, 20px) !default;
@@ -36,6 +36,9 @@ $font-size-body-2: var(--font-size-body-2, 14px) !default;
 $font-size-body-1: var(--font-size-body-1, 14px) !default;
 $font-size-caption: var(--font-size-caption, 12px) !default;
 
+$font-lineheight-2: var(--font-lineheight-2, 1.5) !default;
+
+
 /// 禁用
 $color-text1-1: var(--color-text1-1, #cccccc) !default;
 /// 水印/提示
@@ -86,6 +89,8 @@ $color-data1-9: var(--color-data1-9, #ec4589) !default; // ?
 
 $color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
+$color-link-2: var(--color-link-2, #5584ff) !default; // ?
+
 $color-link-3: var(--color-link-3, #0056ff) !default; // ?
 
 $color-bg-1: var(--color-bg-1, #ffffff) !default; // ?

package/es/index.js

@@ -24,4 +24,4 @@ export { default as Step } from './step';
 export { default as StopGenerate } from './stop-generate';
 export { default as Reference } from './reference';
 export { default as Recommend } from './recommend';
-export const version = '0.3.11-beta.2';
+export const version = '0.3.11-beta.3';

package/es/reference/index.js

@@ -9,36 +9,62 @@ import { ConfigProvider, Icon } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, renderCommonIcon } from '../utils';
 const DEFAULT_REFERENCE_ICON = 'https://img.alicdn.com/imgextra/i3/O1CN01hpxNXz26hRw9Jz4O1_!!6000000007693-55-tps-200-200.svg';
-const Reference = forwardRef(({ className, defaultExpanded = false, header, listItems = [], onToggle, onItemClick }, ref) => {
+const Reference = forwardRef(({ className, defaultExpanded = false, header, listItems = [], onToggle, onItemClick, mode = 'simple', onClose, onDetailClick }, ref) => {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const handleToggle = () => {
         setIsExpanded(!isExpanded);
         onToggle && onToggle(!isExpanded);
     };
     const renderHeader = () => {
+        if (mode === 'detail') {
+            return renderDetailHeader();
+        }
         let headerIcon = (header === null || header === void 0 ? void 0 : header.icon) || DEFAULT_REFERENCE_ICON;
         const iconType = isExpanded ? 'arrow-up' : 'arrow-down';
-        return (React.createElement("div", { className: 'reference-header', onClick: handleToggle },
+        return (React.createElement("div", { className: `reference-header ${mode}`, onClick: handleToggle },
             React.createElement("div", { className: 'reference-name' },
                 renderCommonIcon(headerIcon),
                 React.createElement("div", { className: 'reference-title' }, header === null || header === void 0 ? void 0 : header.title)),
             React.createElement("div", { className: 'reference-operate' },
                 React.createElement(Icon, { type: iconType, size: 'xxs' }))));
     };
+    const renderDetailHeader = () => {
+        return (React.createElement("div", { className: `reference-header ${mode}` },
+            React.createElement("div", { className: 'reference-text' }, "\u5F15\u7528\u4FE1\u606F"),
+            React.createElement("div", { className: 'reference-close', onClick: () => {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                } }, renderCommonIcon('close', 'small'))));
+    };
     const handleReferenceClick = (item, index) => {
         onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index);
         (item === null || item === void 0 ? void 0 : item.url) && window.open(item === null || item === void 0 ? void 0 : item.url, '_blank');
     };
+    const renderDetailList = () => {
+        return listItems.map((item, index) => (React.createElement("div", { key: index, className: 'reference-item', onClick: () => handleReferenceClick(item, index) },
+            React.createElement("div", { className: 'reference-title' },
+                (item === null || item === void 0 ? void 0 : item.sourceIcon) && renderCommonIcon(item === null || item === void 0 ? void 0 : item.sourceIcon),
+                (item === null || item === void 0 ? void 0 : item.modifyTime) && React.createElement("div", { className: 'reference-time' }, item === null || item === void 0 ? void 0 : item.modifyTime)),
+            React.createElement("div", { className: 'reference-name' }, item === null || item === void 0 ? void 0 : item.name),
+            (item === null || item === void 0 ? void 0 : item.content) && React.createElement("div", { className: 'reference-content' }, item === null || item === void 0 ? void 0 : item.content))));
+    };
     const renderList = () => {
-        if (!listItems || listItems.length === 0 || !isExpanded) {
+        if (!listItems || listItems.length === 0) {
+            return null;
+        }
+        if (!isExpanded && mode === 'simple') {
             return null;
         }
-        return (React.createElement("div", { className: 'reference-list' }, listItems.map((item, index) => (React.createElement("div", { key: index, className: 'reference-item', onClick: () => handleReferenceClick(item, index) },
-            renderCommonIcon(item === null || item === void 0 ? void 0 : item.sourceIcon),
-            React.createElement("div", { className: 'reference-text' }, item === null || item === void 0 ? void 0 : item.name))))));
+        return (React.createElement("div", { className: `reference-list ${mode}`, onClick: () => {
+                onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+            } },
+            isExpanded && mode === 'simple' && listItems.map((item, index) => (React.createElement("div", { key: index, className: 'reference-item' },
+                (item === null || item === void 0 ? void 0 : item.sourceIcon) && renderCommonIcon(item === null || item === void 0 ? void 0 : item.sourceIcon),
+                React.createElement("div", { className: 'reference-text', onClick: () => handleReferenceClick(item, index) }, item === null || item === void 0 ? void 0 : item.name),
+                (item === null || item === void 0 ? void 0 : item.modifyTime) && React.createElement("div", { className: 'reference-time' }, item === null || item === void 0 ? void 0 : item.modifyTime)))),
+            mode === 'detail' && renderDetailList()));
     };
     const statusClassName = isExpanded ? 'expand' : '';
-    return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}reference ${statusClassName}`, className), ref: ref },
+    return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}reference ${mode} ${statusClassName}`, className), ref: ref },
         renderHeader(),
         renderList()));
 });

package/es/reference/main.scss

@@ -12,30 +12,50 @@
     width: 100%;
   }
 
+  &.detail {
+    background-color: white;
+  }
+
   .reference-header {
     display: flex;
     justify-content: space-between;
     cursor: pointer;
-    // margin-bottom: $s-1;
+    align-items: center;
+
+    &.detail {
+      border-bottom: solid 1px $color-line1-0;
+      height: $s-15;
+      margin: 0 $s-4;
+
+      .reference-text {
+        line-height: $s-15;
+        font-size: $s-6;
+        font-weight: bold;
+      }
+      .reference-close {
+        width: fit-content;
+      }
+
+    }
 
     .reference-name{
       display: flex;
       align-items: center;
       .reference-title{
         color: $color-text1-4;
-        font-size: 12px;
+        font-size: $font-size-caption;
         font-weight: 600;
-        line-height: 18px;
+        line-height: $font-lineheight-2;
       }
       .common-icon {
-        margin-right: 4px;
+        margin-right: $s-1;
         color: $color-brand1-6;
       }
     }
 
     .reference-operate{
       cursor: pointer;
-      margin: 0px $s-1 0px $s-1;
+      margin: 0 $s-1;
       width: $s-3;
       height: $s-5;
       display: flex;
@@ -49,6 +69,58 @@
   }
 
   .reference-list {
+
+    &.detail {
+      // padding: 0px $s-4;
+      .reference-item {
+        display:block;
+        padding: $s-2 $s-4;
+        
+        &:hover {
+          background: $color-fill1-1;
+        }
+        .reference-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: $s-2;
+
+          .common-icon {
+            img {
+              height: $s-6;
+              width: auto;
+            }
+          }
+
+          .reference-time {
+            margin-left: $s-2;
+            color: $color-text1-1;
+            font-size: $font-size-body-1;
+          }
+        }
+        
+        .reference-name {
+          margin-bottom: $s-2;
+          line-height: $s-6;
+          color: $color-link-3;
+          font-size: $s-4;
+          overflow: hidden; /* 隐藏超出部分 */
+          display: -webkit-box; /* 使其成为弹性盒子 */
+          -webkit-box-orient: vertical; /* 垂直排列 */
+          -webkit-line-clamp: 2; /* 限制显示3行 */
+        }
+
+        .reference-content {
+          font-size: $font-size-body-1;
+          line-height: $font-lineheight-2;
+          color: $color-text1-4;
+          overflow: hidden; /* 隐藏超出部分 */
+          display: -webkit-box; /* 使其成为弹性盒子 */
+          -webkit-box-orient: vertical; /* 垂直排列 */
+          -webkit-line-clamp: 3; /* 限制显示3行 */
+        }
+      }
+    }
+
     margin-top: $s-1;
     .reference-item{
       display: flex;
@@ -60,26 +132,38 @@
         margin-bottom: 0;
       }
       .common-icon {
-        margin-right: 4px;
-        &.svg {
+        margin-right: $s-1;
 
+        &.svg {
         }
 
-        &.img {
-
+        img {
+          height: $s-4;
+          width: auto;
         }
 
         &.node {
 
         }
       }
+
       .reference-text {
-        font-size: $s-3;
+        font-size: $font-size-caption;
         color: $color-link-2;
         white-space: nowrap; /* 禁止换行 */
         overflow: hidden;    /* 超出部分隐藏 */
         text-overflow: ellipsis; /* 以省略号显示溢出文本 */
-        line-height: 18px;
+        line-height: $font-lineheight-2;
+      }
+      
+      .reference-time {
+        font-size: $s-3;
+        color: $color-text1-1;
+        line-height: $font-lineheight-2;
+        margin-left: $s-1;
+        white-space: nowrap; /* 禁止换行 */
+        overflow: hidden;    /* 超出部分隐藏 */
+        text-overflow: ellipsis; /* 以省略号显示溢出文本 */
       }
     }
   }

package/es/reference/types.d.ts

@@ -6,6 +6,8 @@ export interface ReferenceItemProps {
     url?: string;
     sourceIcon?: string;
     sourceCode?: string;
+    modifyTime?: string;
+    content?: string;
 }
 /**
  * 参考来源属性
@@ -39,4 +41,16 @@ export interface ReferenceProps extends React.HTMLAttributes<HTMLElement>, Commo
      * 点击对应参考来源项
      */
     onItemClick?: (item: ReferenceItemProps, index: number) => void;
+    /**
+     * 来源展示的模式
+     */
+    mode?: 'simple' | 'detail';
+    /**
+     * 关闭参考来源点击
+     */
+    onClose?: () => void;
+    /**
+     * 参考来源面板点击回调（区别于每个参考来源项的点击/头部展开点击）
+     */
+    onDetailClick?: () => void;
 }

package/lib/core/variables.scss

@@ -27,7 +27,7 @@ $s-7: var(---s-7, 28px) !default;
 $s-8: var(---s-8, 32px) !default;
 $s-9: var(---s-9, 36px) !default;
 $s-10: var(---s-10, 40px) !default;
-
+$s-15: var(---s-15, 60px) !default;
 
 $font-size-headline: var(--font-size-headline, 24px) !default;
 $font-size-title: var(--font-size-title, 20px) !default;
@@ -36,6 +36,9 @@ $font-size-body-2: var(--font-size-body-2, 14px) !default;
 $font-size-body-1: var(--font-size-body-1, 14px) !default;
 $font-size-caption: var(--font-size-caption, 12px) !default;
 
+$font-lineheight-2: var(--font-lineheight-2, 1.5) !default;
+
+
 /// 禁用
 $color-text1-1: var(--color-text1-1, #cccccc) !default;
 /// 水印/提示
@@ -86,6 +89,8 @@ $color-data1-9: var(--color-data1-9, #ec4589) !default; // ?
 
 $color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
+$color-link-2: var(--color-link-2, #5584ff) !default; // ?
+
 $color-link-3: var(--color-link-3, #0056ff) !default; // ?
 
 $color-bg-1: var(--color-bg-1, #ffffff) !default; // ?

package/lib/index.js

@@ -54,4 +54,4 @@ var reference_1 = require("./reference");
 Object.defineProperty(exports, "Reference", { enumerable: true, get: function () { return tslib_1.__importDefault(reference_1).default; } });
 var recommend_1 = require("./recommend");
 Object.defineProperty(exports, "Recommend", { enumerable: true, get: function () { return tslib_1.__importDefault(recommend_1).default; } });
-exports.version = '0.3.11-beta.2';
+exports.version = '0.3.11-beta.3';

package/lib/reference/index.js

@@ -12,36 +12,62 @@ const next_1 = require("@alifd/next");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const DEFAULT_REFERENCE_ICON = 'https://img.alicdn.com/imgextra/i3/O1CN01hpxNXz26hRw9Jz4O1_!!6000000007693-55-tps-200-200.svg';
-const Reference = (0, react_1.forwardRef)(({ className, defaultExpanded = false, header, listItems = [], onToggle, onItemClick }, ref) => {
+const Reference = (0, react_1.forwardRef)(({ className, defaultExpanded = false, header, listItems = [], onToggle, onItemClick, mode = 'simple', onClose, onDetailClick }, ref) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(defaultExpanded);
     const handleToggle = () => {
         setIsExpanded(!isExpanded);
         onToggle && onToggle(!isExpanded);
     };
     const renderHeader = () => {
+        if (mode === 'detail') {
+            return renderDetailHeader();
+        }
         let headerIcon = (header === null || header === void 0 ? void 0 : header.icon) || DEFAULT_REFERENCE_ICON;
         const iconType = isExpanded ? 'arrow-up' : 'arrow-down';
-        return (react_1.default.createElement("div", { className: 'reference-header', onClick: handleToggle },
+        return (react_1.default.createElement("div", { className: `reference-header ${mode}`, onClick: handleToggle },
             react_1.default.createElement("div", { className: 'reference-name' },
                 (0, utils_1.renderCommonIcon)(headerIcon),
                 react_1.default.createElement("div", { className: 'reference-title' }, header === null || header === void 0 ? void 0 : header.title)),
             react_1.default.createElement("div", { className: 'reference-operate' },
                 react_1.default.createElement(next_1.Icon, { type: iconType, size: 'xxs' }))));
     };
+    const renderDetailHeader = () => {
+        return (react_1.default.createElement("div", { className: `reference-header ${mode}` },
+            react_1.default.createElement("div", { className: 'reference-text' }, "\u5F15\u7528\u4FE1\u606F"),
+            react_1.default.createElement("div", { className: 'reference-close', onClick: () => {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                } }, (0, utils_1.renderCommonIcon)('close', 'small'))));
+    };
     const handleReferenceClick = (item, index) => {
         onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index);
         (item === null || item === void 0 ? void 0 : item.url) && window.open(item === null || item === void 0 ? void 0 : item.url, '_blank');
     };
+    const renderDetailList = () => {
+        return listItems.map((item, index) => (react_1.default.createElement("div", { key: index, className: 'reference-item', onClick: () => handleReferenceClick(item, index) },
+            react_1.default.createElement("div", { className: 'reference-title' },
+                (item === null || item === void 0 ? void 0 : item.sourceIcon) && (0, utils_1.renderCommonIcon)(item === null || item === void 0 ? void 0 : item.sourceIcon),
+                (item === null || item === void 0 ? void 0 : item.modifyTime) && react_1.default.createElement("div", { className: 'reference-time' }, item === null || item === void 0 ? void 0 : item.modifyTime)),
+            react_1.default.createElement("div", { className: 'reference-name' }, item === null || item === void 0 ? void 0 : item.name),
+            (item === null || item === void 0 ? void 0 : item.content) && react_1.default.createElement("div", { className: 'reference-content' }, item === null || item === void 0 ? void 0 : item.content))));
+    };
     const renderList = () => {
-        if (!listItems || listItems.length === 0 || !isExpanded) {
+        if (!listItems || listItems.length === 0) {
+            return null;
+        }
+        if (!isExpanded && mode === 'simple') {
             return null;
         }
-        return (react_1.default.createElement("div", { className: 'reference-list' }, listItems.map((item, index) => (react_1.default.createElement("div", { key: index, className: 'reference-item', onClick: () => handleReferenceClick(item, index) },
-            (0, utils_1.renderCommonIcon)(item === null || item === void 0 ? void 0 : item.sourceIcon),
-            react_1.default.createElement("div", { className: 'reference-text' }, item === null || item === void 0 ? void 0 : item.name))))));
+        return (react_1.default.createElement("div", { className: `reference-list ${mode}`, onClick: () => {
+                onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+            } },
+            isExpanded && mode === 'simple' && listItems.map((item, index) => (react_1.default.createElement("div", { key: index, className: 'reference-item' },
+                (item === null || item === void 0 ? void 0 : item.sourceIcon) && (0, utils_1.renderCommonIcon)(item === null || item === void 0 ? void 0 : item.sourceIcon),
+                react_1.default.createElement("div", { className: 'reference-text', onClick: () => handleReferenceClick(item, index) }, item === null || item === void 0 ? void 0 : item.name),
+                (item === null || item === void 0 ? void 0 : item.modifyTime) && react_1.default.createElement("div", { className: 'reference-time' }, item === null || item === void 0 ? void 0 : item.modifyTime)))),
+            mode === 'detail' && renderDetailList()));
     };
     const statusClassName = isExpanded ? 'expand' : '';
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}reference ${statusClassName}`, className), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}reference ${mode} ${statusClassName}`, className), ref: ref },
         renderHeader(),
         renderList()));
 });

package/lib/reference/main.scss

@@ -12,30 +12,50 @@
     width: 100%;
   }
 
+  &.detail {
+    background-color: white;
+  }
+
   .reference-header {
     display: flex;
     justify-content: space-between;
     cursor: pointer;
-    // margin-bottom: $s-1;
+    align-items: center;
+
+    &.detail {
+      border-bottom: solid 1px $color-line1-0;
+      height: $s-15;
+      margin: 0 $s-4;
+
+      .reference-text {
+        line-height: $s-15;
+        font-size: $s-6;
+        font-weight: bold;
+      }
+      .reference-close {
+        width: fit-content;
+      }
+
+    }
 
     .reference-name{
       display: flex;
       align-items: center;
       .reference-title{
         color: $color-text1-4;
-        font-size: 12px;
+        font-size: $font-size-caption;
         font-weight: 600;
-        line-height: 18px;
+        line-height: $font-lineheight-2;
       }
       .common-icon {
-        margin-right: 4px;
+        margin-right: $s-1;
         color: $color-brand1-6;
       }
     }
 
     .reference-operate{
       cursor: pointer;
-      margin: 0px $s-1 0px $s-1;
+      margin: 0 $s-1;
       width: $s-3;
       height: $s-5;
       display: flex;
@@ -49,6 +69,58 @@
   }
 
   .reference-list {
+
+    &.detail {
+      // padding: 0px $s-4;
+      .reference-item {
+        display:block;
+        padding: $s-2 $s-4;
+        
+        &:hover {
+          background: $color-fill1-1;
+        }
+        .reference-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: $s-2;
+
+          .common-icon {
+            img {
+              height: $s-6;
+              width: auto;
+            }
+          }
+
+          .reference-time {
+            margin-left: $s-2;
+            color: $color-text1-1;
+            font-size: $font-size-body-1;
+          }
+        }
+        
+        .reference-name {
+          margin-bottom: $s-2;
+          line-height: $s-6;
+          color: $color-link-3;
+          font-size: $s-4;
+          overflow: hidden; /* 隐藏超出部分 */
+          display: -webkit-box; /* 使其成为弹性盒子 */
+          -webkit-box-orient: vertical; /* 垂直排列 */
+          -webkit-line-clamp: 2; /* 限制显示3行 */
+        }
+
+        .reference-content {
+          font-size: $font-size-body-1;
+          line-height: $font-lineheight-2;
+          color: $color-text1-4;
+          overflow: hidden; /* 隐藏超出部分 */
+          display: -webkit-box; /* 使其成为弹性盒子 */
+          -webkit-box-orient: vertical; /* 垂直排列 */
+          -webkit-line-clamp: 3; /* 限制显示3行 */
+        }
+      }
+    }
+
     margin-top: $s-1;
     .reference-item{
       display: flex;
@@ -60,26 +132,38 @@
         margin-bottom: 0;
       }
       .common-icon {
-        margin-right: 4px;
-        &.svg {
+        margin-right: $s-1;
 
+        &.svg {
         }
 
-        &.img {
-
+        img {
+          height: $s-4;
+          width: auto;
         }
 
         &.node {
 
         }
       }
+
       .reference-text {
-        font-size: $s-3;
+        font-size: $font-size-caption;
         color: $color-link-2;
         white-space: nowrap; /* 禁止换行 */
         overflow: hidden;    /* 超出部分隐藏 */
         text-overflow: ellipsis; /* 以省略号显示溢出文本 */
-        line-height: 18px;
+        line-height: $font-lineheight-2;
+      }
+      
+      .reference-time {
+        font-size: $s-3;
+        color: $color-text1-1;
+        line-height: $font-lineheight-2;
+        margin-left: $s-1;
+        white-space: nowrap; /* 禁止换行 */
+        overflow: hidden;    /* 超出部分隐藏 */
+        text-overflow: ellipsis; /* 以省略号显示溢出文本 */
       }
     }
   }

package/lib/reference/types.d.ts

@@ -6,6 +6,8 @@ export interface ReferenceItemProps {
     url?: string;
     sourceIcon?: string;
     sourceCode?: string;
+    modifyTime?: string;
+    content?: string;
 }
 /**
  * 参考来源属性
@@ -39,4 +41,16 @@ export interface ReferenceProps extends React.HTMLAttributes<HTMLElement>, Commo
      * 点击对应参考来源项
      */
     onItemClick?: (item: ReferenceItemProps, index: number) => void;
+    /**
+     * 来源展示的模式
+     */
+    mode?: 'simple' | 'detail';
+    /**
+     * 关闭参考来源点击
+     */
+    onClose?: () => void;
+    /**
+     * 参考来源面板点击回调（区别于每个参考来源项的点击/头部展开点击）
+     */
+    onDetailClick?: () => void;
 }

package/package.json

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