listpage-next 0.0.169 → 0.0.170

package/dist/features/ChatClient/components/HistoryConversation/index.d.ts

@@ -1,11 +1,5 @@
-export interface HistoryConversationProps<T = any> {
+export interface HistoryConversationProps {
     rowKey?: string;
-    activeKey?: string;
+    defaultActiveKey?: string;
 }
-export declare const HistoryConversation: <T extends ItemData = any>(props: HistoryConversationProps<T>) => import("react/jsx-runtime").JSX.Element;
-type ItemData = {
-    icon?: React.ReactNode;
-    title: string;
-    key: string;
-};
-export {};
+export declare const HistoryConversation: (props: HistoryConversationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/HistoryConversation/index.js

@@ -1,87 +1,34 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { Avatar, Button, Dropdown, Tooltip, Typography } from "antd";
+import { Button, Tooltip } from "antd";
 import { useHover } from "ahooks";
-import { ClockCircleOutlined, MessageOutlined, MoreOutlined } from "@ant-design/icons";
-import { InfiniteList } from "../../../../components/InfiniteList/index.js";
+import { ClockCircleOutlined } from "@ant-design/icons";
 import { useChatClientContext } from "../../context/index.js";
-import { HeaderContainer, HeaderTitle, HistoryConversationContainer, ListContainer, ListItemContainer, ListText } from "./styles.js";
+import { ConversationList } from "../../ui/ConversationList/index.js";
+import { HeaderContainer, HeaderTitle, HistoryConversationContainer } from "./styles.js";
 const HistoryConversation = (props)=>{
-    const { rowKey = "id", activeKey } = props;
+    const { rowKey = 'id', defaultActiveKey } = props;
     const { showUpdateTitleModal, conversationListRef, action, request } = useChatClientContext();
     const { onClickConversation, onRenameConversation, onDeleteConversation } = action ?? {};
     return /*#__PURE__*/ jsxs(HistoryConversationContainer, {
         children: [
             /*#__PURE__*/ jsx(Header, {}),
-            /*#__PURE__*/ jsx(ListContainer, {
-                children: /*#__PURE__*/ jsx(InfiniteList, {
-                    ref: conversationListRef,
-                    request: request.getConversations,
-                    rowKey: rowKey,
-                    pageSize: 10,
-                    renderItem: (item, index, actions)=>{
-                        const key = item[rowKey];
-                        const items = [
-                            {
-                                key: 'rename',
-                                label: '重命名',
-                                onClick: ()=>{
-                                    showUpdateTitleModal(item.title, async (newTitle)=>{
-                                        const newItem = {
-                                            ...item,
-                                            title: newTitle
-                                        };
-                                        await onRenameConversation?.(key, newItem);
-                                        actions.updateItem(key, newItem);
-                                    });
-                                }
-                            },
-                            {
-                                key: 'delete',
-                                danger: true,
-                                label: '删除',
-                                onClick: async ()=>{
-                                    await onDeleteConversation?.(key, item);
-                                    actions.deleteItem(key);
-                                }
-                            }
-                        ];
-                        return /*#__PURE__*/ jsxs(ListItemContainer, {
-                            isHover: activeKey === key ? true : void 0,
-                            onClick: ()=>onClickConversation?.(key, item),
-                            children: [
-                                /*#__PURE__*/ jsx(Avatar, {
-                                    size: 20,
-                                    icon: item.icon || /*#__PURE__*/ jsx(MessageOutlined, {})
-                                }),
-                                /*#__PURE__*/ jsx(ListText, {
-                                    children: /*#__PURE__*/ jsx(Typography.Text, {
-                                        ellipsis: {
-                                            tooltip: {
-                                                title: item.title,
-                                                placement: 'right'
-                                            }
-                                        },
-                                        children: item.title
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    onClick: (e)=>e.stopPropagation(),
-                                    children: /*#__PURE__*/ jsx(Dropdown, {
-                                        menu: {
-                                            items
-                                        },
-                                        children: /*#__PURE__*/ jsx(Button, {
-                                            type: "text",
-                                            size: "small",
-                                            icon: /*#__PURE__*/ jsx(MoreOutlined, {})
-                                        })
-                                    })
-                                })
-                            ]
+            /*#__PURE__*/ jsx(ConversationList, {
+                rowKey: rowKey,
+                defaultActiveKey: defaultActiveKey,
+                request: request.getConversations,
+                ref: conversationListRef,
+                onSelectConversation: (data)=>onClickConversation?.(data[rowKey], data),
+                onDeleteConversation: (data)=>{
+                    onDeleteConversation?.(data[rowKey], data);
+                },
+                onRenameConversation: (data)=>new Promise((resolve)=>{
+                        showUpdateTitleModal(data.title, async (newTitle)=>{
+                            data.title = newTitle;
+                            await onRenameConversation?.(data[rowKey], data);
+                            resolve(data);
                         });
-                    }
-                })
+                    })
             })
         ]
     });

package/dist/features/ChatClient/components/HistoryConversation/styles.d.ts

@@ -1,8 +1,3 @@
 export declare const HistoryConversationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const HeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    isHover?: boolean;
-}>> & string;
-export declare const ListText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ChatClient/components/HistoryConversation/styles.js

@@ -1,52 +1,24 @@
 import styled_components from "styled-components";
 const HistoryConversationContainer = styled_components.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 `;
 const HeaderContainer = styled_components.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 6px;
 `;
 const HeaderTitle = styled_components.div`
-    align-items: center;
-    display: flex;
-    flex: 1 1;
-    font-size: 12px;
-    font-weight: 600;
-    min-width: 0;
-    color: #0000004d;
-    line-height: 20px;
-    height: 20px;
+  align-items: center;
+  display: flex;
+  flex: 1 1;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 0;
+  color: #0000004d;
+  line-height: 20px;
+  height: 20px;
 `;
-const ListContainer = styled_components.div`
-    flex: 1;
-    overflow: hidden;
-    padding: 0 2px;
-`;
-const ListItemContainer = styled_components.div`
-    display: flex;
-    align-items: center;
-    padding: 8px 4px;
-    border-radius: 8px;
-    cursor: pointer;
-    gap: 4px;
-
-    background-color: ${(props)=>props.isHover ? "#0000000a" : "transparent"};
-
-    &:hover {
-        background-color: #0000000a;
-    }
-`;
-const ListText = styled_components.div`
-    flex: 1;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-    word-wrap: break-word;
-`;
-export { HeaderContainer, HeaderTitle, HistoryConversationContainer, ListContainer, ListItemContainer, ListText };
+export { HeaderContainer, HeaderTitle, HistoryConversationContainer };

package/dist/features/ChatClient/ui/Bubble/BubbleList.d.ts

@@ -2,9 +2,11 @@ import { CSSProperties } from 'react';
 import { BaseMessageInfo, Message } from '../../context';
 export interface BubbleListProps<MessageInfo extends BaseMessageInfo> {
     styles?: {
+        headerPlaceholder?: CSSProperties;
         bottomPlaceholder?: CSSProperties;
         content?: CSSProperties;
     };
+    loading?: boolean;
     messages: Message<MessageInfo>[];
     messageRender: (message: Message<MessageInfo>) => React.ReactNode;
 }

package/dist/features/ChatClient/ui/Bubble/BubbleList.js

@@ -1,24 +1,31 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { styled } from "styled-components";
+import { PageLoading } from "../../../../components/Page/index.js";
 const BubbleList = (props)=>{
-    const { styles, messages, messageRender } = props;
+    const { loading, styles, messages, messageRender } = props;
     const bottomRef = useRef(null);
     const containerRef = useRef(null);
-    return /*#__PURE__*/ jsxs(ContentContainer, {
+    const content = [
+        /*#__PURE__*/ jsx("div", {
+            style: styles?.headerPlaceholder ?? {
+                height: 4
+            }
+        }, "header"),
+        /*#__PURE__*/ jsx("div", {
+            style: styles?.content,
+            children: (messages ?? []).map(messageRender)
+        }, "content"),
+        /*#__PURE__*/ jsx("div", {
+            ref: bottomRef,
+            style: styles?.bottomPlaceholder ?? {
+                height: 60
+            }
+        }, "footer")
+    ];
+    return /*#__PURE__*/ jsx(ContentContainer, {
         ref: containerRef,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                style: styles?.content,
-                children: (messages ?? []).map(messageRender)
-            }),
-            /*#__PURE__*/ jsx("div", {
-                ref: bottomRef,
-                style: styles?.bottomPlaceholder ?? {
-                    height: 60
-                }
-            })
-        ]
+        children: loading ? /*#__PURE__*/ jsx(PageLoading, {}) : content
     });
 };
 const ContentContainer = styled.div`

package/dist/features/ChatClient/ui/ConversationList/index.d.ts

@@ -0,0 +1,21 @@
+import { ItemType } from 'antd/es/menu/interface';
+import { InfiniteListProps, InfiniteListRef, RenderActions } from '../../../../components/InfiniteList';
+export interface ConverstionListProps<T = any> {
+    rowKey: string;
+    ref?: InfiniteListRef<T>;
+    defaultActiveKey?: string;
+    request: InfiniteListProps<T>['request'];
+    menus?: (Omit<ItemType, 'onClick'> & {
+        onClick?: (item: T, index: number, actions: RenderActions<Record<string, any>>) => void;
+    })[];
+    onSelectConversation?: (data: T) => void;
+    onDeleteConversation?: (data: T) => void;
+    onRenameConversation?: (data: T) => T;
+}
+type ItemData = {
+    icon?: React.ReactNode;
+    title: string;
+    key: string;
+};
+export declare const ConversationList: <T extends ItemData = any>(props: ConverstionListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/ChatClient/ui/ConversationList/index.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Avatar, Button, Dropdown, Typography } from "antd";
+import { ListContainer, ListItemContainer, ListText } from "./styles.js";
+import { MessageOutlined, MoreOutlined } from "@ant-design/icons";
+import { InfiniteList } from "../../../../components/InfiniteList/index.js";
+const ConversationList = (props)=>{
+    const { ref, rowKey, request, menus = [], defaultActiveKey, onSelectConversation, onDeleteConversation, onRenameConversation } = props;
+    const [activeKey, setActiveKey] = useState(defaultActiveKey);
+    return /*#__PURE__*/ jsx(ListContainer, {
+        children: /*#__PURE__*/ jsx(InfiniteList, {
+            pageSize: 10,
+            rowKey: rowKey,
+            ref: ref,
+            request: request,
+            renderItem: (item, index, actions)=>{
+                const key = item[rowKey];
+                const items = [
+                    ...menus.map((menu)=>({
+                            ...menu,
+                            onClick: ()=>menu.onClick?.(item, index, actions)
+                        })),
+                    onRenameConversation && {
+                        key: 'rename',
+                        label: '重命名',
+                        onClick: async ()=>{
+                            const newItem = await onRenameConversation?.(item);
+                            if (!newItem) return;
+                            actions.updateItem(key, newItem);
+                        }
+                    },
+                    onDeleteConversation && {
+                        key: 'delete',
+                        danger: true,
+                        label: '删除',
+                        onClick: async ()=>{
+                            await onDeleteConversation?.(item);
+                            setActiveKey('');
+                            actions.deleteItem(key);
+                        }
+                    }
+                ].filter(Boolean);
+                return /*#__PURE__*/ jsxs(ListItemContainer, {
+                    isHover: activeKey === key ? true : void 0,
+                    onClick: ()=>{
+                        if (activeKey === key) return;
+                        setActiveKey?.(key);
+                        onSelectConversation?.(item);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Avatar, {
+                            size: 20,
+                            icon: item.icon || /*#__PURE__*/ jsx(MessageOutlined, {})
+                        }),
+                        /*#__PURE__*/ jsx(ListText, {
+                            children: /*#__PURE__*/ jsx(Typography.Text, {
+                                ellipsis: {
+                                    tooltip: {
+                                        title: item.title,
+                                        placement: 'right'
+                                    }
+                                },
+                                children: item.title
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            onClick: (e)=>e.stopPropagation(),
+                            children: /*#__PURE__*/ jsx(Dropdown, {
+                                menu: {
+                                    items
+                                },
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    type: "text",
+                                    size: "small",
+                                    icon: /*#__PURE__*/ jsx(MoreOutlined, {})
+                                })
+                            })
+                        })
+                    ]
+                });
+            }
+        })
+    });
+};
+export { ConversationList };

package/dist/features/ChatClient/ui/ConversationList/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isHover?: boolean;
+}>> & string;
+export declare const ListText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ChatClient/ui/ConversationList/styles.js

@@ -0,0 +1,30 @@
+import styled_components from "styled-components";
+const ListContainer = styled_components.div`
+  flex: 1;
+  overflow: hidden;
+  padding: 0 2px;
+`;
+const ListItemContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 4px;
+  border-radius: 8px;
+  cursor: pointer;
+  gap: 4px;
+
+  background-color: ${(props)=>props.isHover ? '#0000000a' : 'transparent'};
+
+  &:hover {
+    background-color: #0000000a;
+  }
+`;
+const ListText = styled_components.div`
+  flex: 1;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  word-wrap: break-word;
+`;
+export { ListContainer, ListItemContainer, ListText };

package/dist/features/ChatClient/ui/index.d.ts

@@ -2,3 +2,4 @@ export * from './Bubble';
 export * from './ChatSplitter';
 export * from './ChatDialog';
 export * from './EditorContent';
+export * from './ConversationList';

package/dist/features/ChatClient/ui/index.js

@@ -2,3 +2,4 @@ export * from "./Bubble/index.js";
 export * from "./ChatSplitter/index.js";
 export * from "./ChatDialog/index.js";
 export * from "./EditorContent/index.js";
+export * from "./ConversationList/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.169",
+  "version": "0.0.170",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",
@@ -68,7 +68,6 @@
     "rc-virtual-list": "~3.19.2",
     "react-draggable": "~4.5.0",
     "markdown-it": "~14.1.0",
-    "@douyinfe/semi-ui": "~2.88.0",
     "@tiptap/react": "~3.10.7",
     "@tiptap/extension-document": "~3.10.7",
     "@tiptap/extension-text": "~3.10.7",