✨ feat: 新增加每个单元的自定义渲染按钮配置透出 (#318)

* ✨ feat: add chat item actions render

* ✨ feat: ci pass

Author: ONLY-yours

package.json

@@ -100,7 +100,7 @@
     "commitlint-config-gitmoji": "^2.3.1",
     "conventional-changelog-gitmoji-config": "^1.5.2",
     "cross-env": "^7.0.3",
-    "dumi": "2.2.16",
+    "dumi": "^2.2.16",
     "dumi-theme-antd-style": "latest",
     "eslint": "^8.57.0",
     "father": "4.3.1",

src/ActionIconGroup/index.tsx

@@ -16,9 +16,9 @@ export interface ActionIconGroupItems {
 }
 
 export interface ActionEvent {
-  item: ActionIconGroupItems;
+  item?: ActionIconGroupItems;
   key: string;
-  keyPath: string[];
+  keyPath?: string[];
 }
 
 export interface ActionIconGroupProps extends Omit<DivProps, 'content'> {

src/ChatItem/index.tsx

@@ -19,6 +19,7 @@ const ChatItem = memo<ChatItemProps>((props) => {
     avatarAddon,
     onAvatarClick,
     actions,
+    actionsClick,
     className,
     primary,
     loading,
@@ -121,7 +122,8 @@ const ChatItem = memo<ChatItemProps>((props) => {
         className={`${cx(styles.actions, `${prefixClass}-list-item-actions`)}`}
       />
     );
-    return chatItemRenderConfig?.actionsRender?.(props, dom) || dom;
+
+    return chatItemRenderConfig?.actionsRender?.(props, dom, actionsClick) || dom;
   }, [actions]);
 
   const titleDom = useMemo(() => {

src/ChatItem/type.ts

@@ -1,17 +1,27 @@
 import { ReactNode } from 'react';
 
+import { ActionEvent } from '@/ActionIconGroup';
 import { ActionsProps } from '@/ChatList/ActionsBar';
 import { EditableMessageProps } from '@/EditableMessage';
 import { ChatMessageError, DivProps, MetaData } from '@/types';
 import { MarkdownProps } from '@ant-design/pro-editor';
 
 export type WithFalse<T> = T | false;
 
+export type actionsClickProps = {
+  onStartEdit: () => void;
+  onFinishEdit: () => void;
+  onClick: (actionKey: ActionEvent) => void;
+};
 export interface ChatItemProps<T = Record<string, any>> {
   /**
    * @description Actions to be displayed in the chat item
    */
   actions?: ReactNode;
+  /**
+   * @description Actions click props,only use in render
+   */
+  actionsClick?: actionsClickProps;
   /**
    * @description Metadata for the avatar
    */
@@ -88,7 +98,9 @@ export interface ChatItemProps<T = Record<string, any>> {
   chatItemRenderConfig?: {
     titleRender?: WithFalse<(props: ChatItemProps, defaultDom: ReactNode) => ReactNode>;
     contentRender?: WithFalse<(props: ChatItemProps, defaultDom: ReactNode) => ReactNode>;
-    actionsRender?: WithFalse<(props: ChatItemProps, defaultDom: ReactNode) => ReactNode>;
+    actionsRender?: WithFalse<
+      (props: ChatItemProps, defaultDom: ReactNode, actionsClick: actionsClickProps) => ReactNode
+    >;
     avatarRender?: WithFalse<(props: ChatItemProps, defaultDom: ReactNode) => ReactNode>;
     render?: WithFalse<
       (

src/ChatList/ChatListItem.tsx

@@ -192,7 +192,7 @@ const ChatListItem = (props: ChatListItemProps) => {
   /**
    * 渲染操作按钮的函数。
    * @param data 聊天消息的数据。
-   * @returns 渲染操作按钮的组件。
+   * @returns 渲染操作按钮的配置项。
    */
   const Actions = useRefFunction(({ data }: { data: ChatMessage }) => {
     if (!renderActions || !item?.role) return;
@@ -216,14 +216,21 @@ const ChatListItem = (props: ChatListItemProps) => {
       onActionsClick?.(action, data);
     };
 
-    return (
-      <RenderFunction
-        {...data}
-        onActionClick={(actionKey) => handleActionClick?.(actionKey, data)}
-        text={text}
-        actionsProps={chatItemRenderConfig?.actionsProps?.[item.role]}
-      />
-    );
+    return {
+      click: {
+        onStartEdit: () => setEditing(true),
+        onFinishEdit: () => setEditing(false),
+        onClick: (actionKey) => handleActionClick?.(actionKey, data),
+      },
+      components: (
+        <RenderFunction
+          {...data}
+          onActionClick={(actionKey) => handleActionClick?.(actionKey, data)}
+          text={text}
+          actionsProps={chatItemRenderConfig?.actionsProps?.[item.role]}
+        />
+      ),
+    };
   });
 
   /**
@@ -243,7 +250,8 @@ const ChatListItem = (props: ChatListItemProps) => {
       <ChatItem
         className={chatItemClassName}
         data-id={item.id}
-        actions={<Actions data={item} />}
+        actions={Actions({ data: item }).components}
+        actionsClick={Actions({ data: item }).click}
         avatar={(item as any).meta}
         avatarAddon={groupNav}
         editing={editing}

src/ChatList/index.tsx

@@ -95,6 +95,8 @@ const ChatList = memo<ChatListProps>(
             type,
           };
 
+          console.log('renderItems', renderItems);
+
           const historyLength = data.length;
           const enableHistoryDivider =
             enableHistoryCount &&

src/ProChat/demos/actions-chat-item.tsx

@@ -0,0 +1,43 @@
+/**
+ * compact: true
+ */
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+
+import { Button } from 'antd';
+import { MockResponse } from '../mocks/streamResponse';
+
+export default () => {
+  const theme = useTheme();
+
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        chatItemRenderConfig={{
+          actionsRender: (props, dom, actionsProps) => {
+            if (props?.editing) {
+              return null;
+            }
+            return (
+              <Button
+                type="default"
+                onClick={() => {
+                  actionsProps?.onStartEdit();
+                }}
+              >
+                Start Editing
+              </Button>
+            );
+          },
+        }}
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
+
+          const mockResponse = new MockResponse(mockedData);
+
+          return mockResponse.getResponse();
+        }}
+      />
+    </div>
+  );
+};

src/ProChat/index.en-US.md

@@ -78,6 +78,14 @@ ProChat uses `meta` to represent the avatars, names, and other information of bo
 
 <code src="./demos/actions.tsx"></code>
 
+## Customize Item Actions
+
+You can use the actionsRender parameter under ChatItemConfig to complete the Actions configuration for each Item
+
+> We do not recommend that you modify it. If you do not want it, you can directly delete this function and write it yourself using render.
+
+<code src="./demos/actions-chat-item.tsx"></code>
+
 ## Customize the [Back to Bottom] button
 
 You can customize the [Back to Bottom] button to varying degrees through the backToBottomConfiguration parameter

src/ProChat/index.md

@@ -88,6 +88,14 @@ ProChat 使用 `meta` 来表意会话双方的头像、名称等信息。设定
 
 <code src="./demos/actions.tsx"></code>
 
+## 自定义 Item 的 Actions
+
+你可以使用 ChatItemConfig 下的 actionsRender 参数来完成每一个 Item 的 Actions 配置
+
+> 我们并不建议你去修改，如果不想要可以直接删除这块功能自己用 render 来写
+
+<code src="./demos/actions-chat-item.tsx"></code>
+
 ## 自定义「回到底部」按钮
 
 你可以通过 backToBottomConfig 参数对「回到底部」按钮进行不同程度的自定义