* feat: [Chat] support RenderDivider API for custom render divider li…

…ne (#2474) * feat: [Chat] support RenderDivider API for custom render divider line * docs: add support version for renderDivider --------- Co-authored-by: pointhalo <[email protected]>
DouyinFE · Sep 14, 2024 · 39a54a5 · 39a54a5
1 parent 14d8c1a
commit 39a54a5
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 9 deletions.
diff --git a/content/plus/chat/index-en-US.md b/content/plus/chat/index-en-US.md
@@ -1539,6 +1539,7 @@ render(DefaultChat);
 | sendHotKey | Keyboard shortcut for sending content, supports `enter` \| `shift+enter`. The former will send the message in the input box when you press enter alone. When the shift and enter keys are pressed at the same time, it will only wrap the line and not send it. The latter is the opposite | string | `enter` |
 | mode | Conversation mode, support `bubble` \| `noBubble` \| `userBubble` | string | `bubble` |
 | roleConfig | Role information configuration, see[RoleConfig](#RoleConfig) | RoleConfig | - |
+| renderDivider | Custom render divider, supported since v2.67.0 | (message?: Message) => ReactNode | - |
 | renderHintBox | Custom rendering prompt information | (props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode| - |
 | onChatsChange | Triggered when the conversation list changes | (chats: Message[]) => void | - |
 | onClear | Triggered when context message is cleared | () => void | - |

diff --git a/content/plus/chat/index.md b/content/plus/chat/index.md
@@ -1542,6 +1542,7 @@ render(DefaultChat);
 | sendHotKey | 发送输入内容的键盘快捷键，支持 `enter` \| `shift+enter`。前者在单独按下 enter 将发送输入框中的消息， shift 和 enter 按键同时按下时，仅换行，不发送。后者相反 | string | `enter` |
 | mode | 对话模式，支持 `bubble` \| `noBubble` \| `userBubble` | string | `bubble` |
 | roleConfig | 角色信息配置，具体见[RoleConfig](#RoleConfig) | RoleConfig | - |
+| renderDivider | 自定义渲染分割线, 自 v2.67.0 支持 | (message?: Message) => ReactNode | - |
 | renderHintBox | 自定义渲染提示信息 | (props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode| - |
 | onChatsChange | 对话列表变化时触发 | (chats: Message[]) => void | - |
 | onClear | 清除上下文消息时候触发 | () => void | - |

diff --git a/packages/semi-foundation/chat/variables.scss b/packages/semi-foundation/chat/variables.scss
@@ -11,7 +11,7 @@ $radius-chat_dropArea: 16px; // 拖拽上传区域圆角
 //color
 $color-chat_action_content-bg: var(--semi-color-bg-0); // 返回按钮/停止生成内容按钮背景颜色
 $color-chat_action_content-border: var(--semi-color-border); // 返回按钮/停止生成按钮描边颜色
-$color-chat_divider: var(--semi-color-text-2); // 分割线颜色
+$color-chat_divider: var(--semi-color-text-2); // 分割线文字颜色
 $color-chat_chatBox_title: var(--semi-color-text-0); //聊天框标题颜色
 $color-chat_chatBox_action_icon: var(--semi-color-text-2); // 聊天框操作区域按钮图标颜色
 $color-chat_chatBox_action_icon-hover: var(--semi-color-text-0); // 聊天框操作区域按钮图标hover颜色

diff --git a/packages/semi-ui/chat/_story/chat.stories.jsx b/packages/semi-ui/chat/_story/chat.stories.jsx
@@ -1,10 +1,10 @@
 import { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';
 import Chat from '../index';
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { Form, Button, Avatar, Dropdown, Radio, RadioGroup, Switch, Collapsible, AvatarGroup} from '@douyinfe/semi-ui';
+import { Form, Button, Avatar, Dropdown, Radio, RadioGroup, Switch, Collapsible, AvatarGroup, Divider } from '@douyinfe/semi-ui';
 import { IconUpload, IconForward, IconMoreStroked, IconArrowRight, IconChevronUp } from '@douyinfe/semi-icons';
 import MarkdownRender from '../../markdownRender';
-import { initMessage, roleInfo, commonOuterStyle, hintsExample, infoWithAttachment, simpleInitMessage, semiCode } from './constant';
+import { initMessage, roleInfo, commonOuterStyle, hintsExample, infoWithAttachment, simpleInitMessage, semiCode, infoWithDivider } from './constant';
 
 export default {
  title: 'Chat',
@@ -826,3 +826,26 @@ export const CustomRenderHint = () => {
  />
  </div>
 }
+
+export const CustomRenderDivider = () => {
+ const [message, setMessage] = useState(infoWithDivider);
+
+ const renderDivider = useCallback((message) => (
+ <Divider key={message.id} >
+ <span style={{fontSize: '14px', lineHeight: '14px', fontWeight: 400, margin: '0 8px'}}>以下为新消息</span>
+ </Divider>
+ ), []);
+
+ return (
+ <div style={{ height: 600 }}>
+ <Chat 
+ placeholder={'不处理输入信息，仅用于展示附件'}
+ style={commonOuterStyle}
+ chats={message}
+ roleConfig={roleInfo}
+ uploadProps={uploadProps}
+ renderDivider={renderDivider}
+ />
+ </div>
+ );
+}
diff --git a/packages/semi-ui/chat/_story/constant.js b/packages/semi-ui/chat/_story/constant.js
@@ -56,6 +56,26 @@ const initMessage = [
  },
 ];
 
+const infoWithDivider = [
+ {
+ role: 'user',
+ id: '1',
+ createAt: 1715676751919,
+ content: "介绍一下 semi design",
+ },
+ {
+ role: 'divider',
+ id: '2',
+ createAt: 1715676751919,
+ },
+ {
+ role: 'assistant',
+ id: '3',
+ createAt: 1715676751919,
+ content: "test",
+ },
+]
+
 const infoWithAttachment = [
  {
  role: 'user',
@@ -143,5 +163,6 @@ export {
  hintsExample,
  infoWithAttachment,
  simpleInitMessage,
- semiCode
+ semiCode, 
+ infoWithDivider
 };
diff --git a/packages/semi-ui/chat/chatContent.tsx b/packages/semi-ui/chat/chatContent.tsx
@@ -16,7 +16,7 @@ const ChatContent = React.memo((props: ChatContentProps) => {
  const { chats, onMessageBadFeedback, onMessageCopy, mode,
  onChatsChange, onMessageDelete, onMessageGoodFeedback,
  onMessageReset, roleConfig, chatBoxRenderConfig, align,
- customMarkDownComponents,
+ customMarkDownComponents, renderDivider,
  } = props;
 
  const [toast, contextHolder] = Toast.useToast();
@@ -25,12 +25,13 @@ const ChatContent = React.memo((props: ChatContentProps) => {
  <>
  {chats.map((item, index) => {
  const lastMessage = index === chats.length - 1;
- return item.role === ROLE.DIVIDER ? 
+ return item.role === ROLE.DIVIDER ? (
+ renderDivider ? renderDivider(item) :
  <Divider key={item.id} className={PREFIX_DIVIDER}>
  <LocaleConsumer<Locale["Chat"]> componentName="Chat" >
  {(locale: Locale["Chat"]) => locale['clearContext']}
  </LocaleConsumer>
- </Divider> :
+ </Divider>) :
  <ChatBox
  previousMessage={index ? chats[index - 1] : undefined}
  toast={toast}

diff --git a/packages/semi-ui/chat/index.tsx b/packages/semi-ui/chat/index.tsx
@@ -285,7 +285,7 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
  customMarkDownComponents, mode, showClearContext,
  placeholder, inputBoxCls, inputBoxStyle,
  hintStyle, hintCls, uploadProps, uploadTipProps,
- sendHotKey,
+ sendHotKey, renderDivider
  } = this.props;
  const { backBottomVisible, chats, wheelScroll, uploadAreaVisible } = this.state;
  let showStopGenerateFlag = false;
@@ -340,6 +340,7 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
  onMessageReset={this.foundation.resetMessage}
  onMessageCopy={onMessageCopy}
  chatBoxRenderConfig={chatBoxRenderConfig}
+ renderDivider={renderDivider}
  />
  {/* hint area */}
  {!!hints?.length && <Hint

diff --git a/packages/semi-ui/chat/interface.ts b/packages/semi-ui/chat/interface.ts
@@ -18,7 +18,8 @@ export interface CommonChatsProps {
  onMessageReset?: (message?: Message) => void;
  onMessageCopy?: (message?: Message) => void;
  chatBoxRenderConfig?: ChatBoxRenderConfig;
- customMarkDownComponents?: MDXProps['components']
+ customMarkDownComponents?: MDXProps['components'];
+ renderDivider?: (message?: Message) => ReactNode;
 }
 
 export interface ChatProps extends CommonChatsProps {