listpage-next 0.0.78 → 0.0.80

package/dist/components/InfiniteList/index.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 export type RenderActions<DataType = any> = {
     updateItem: (key: string, item: DataType) => void;
     deleteItem: (key: string) => void;
@@ -17,4 +18,5 @@ export interface InfiniteListProps<DataType = any> {
     pageSize?: number;
     rowKey?: string;
 }
-export declare const InfiniteList: <DataType = any>(props: InfiniteListProps<DataType>) => import("react/jsx-runtime").JSX.Element;
+export type InfiniteListRef<DataType = any> = Ref<RenderActions<DataType>>;
+export declare const InfiniteList: import("react").ForwardRefExoticComponent<InfiniteListProps<Record<string, any>> & import("react").RefAttributes<RenderActions<Record<string, any>>>>;

package/dist/components/InfiniteList/index.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useRequest } from "ahooks";
-import { List, message } from "antd";
+import { message } from "antd";
 import rc_virtual_list from "rc-virtual-list";
-import styled_components from "styled-components";
-const InfiniteList = (props)=>{
+import { ListContainer } from "./styles.js";
+const InfiniteList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { request, renderItem, pageSize, rowKey = 'id' } = props;
-    const ref = useRef(null);
     const [pagination, setPagination] = useState({
         current: 1,
         pageSize: pageSize ?? 10
     });
+    const containerRef = useRef(null);
     const [list, setList] = useState([]);
     const [hasMore, setHasMore] = useState(true);
     const { loading, run: loadMoreData } = useRequest(()=>request(pagination), {
@@ -48,11 +48,20 @@ const InfiniteList = (props)=>{
             pageSize: pageSize ?? 10
         });
     };
+    useImperativeHandle(ref, ()=>({
+            deleteItem,
+            updateItem,
+            resetPagination
+        }), [
+        deleteItem,
+        updateItem,
+        resetPagination
+    ]);
     useEffect(()=>{
         loadMoreData();
     }, []);
     useEffect(()=>{
-        const innerEle = ref.current?.querySelector?.(".rc-virtual-list-holder-inner");
+        const innerEle = containerRef.current?.querySelector?.(".rc-virtual-list-holder-inner");
         const handleScroll = (e)=>{
             const ele = e.target;
             const isBottom = ele.scrollHeight - ele.scrollTop <= ele.clientHeight;
@@ -67,7 +76,7 @@ const InfiniteList = (props)=>{
     ]);
     return /*#__PURE__*/ jsx(ListContainer, {
         loading: loading,
-        ref: ref,
+        ref: containerRef,
         children: /*#__PURE__*/ jsx(rc_virtual_list, {
             data: list ?? [],
             itemKey: rowKey,
@@ -78,46 +87,5 @@ const InfiniteList = (props)=>{
                 })
         })
     });
-};
-const ListContainer = styled_components(List)`
-  &.ant-list {
-    height: 100%;
-  }
-  .ant-spin-nested-loading {
-    height: 100%;
-    & > div:first-child {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 100%;
-      .ant-spin-spinning {
-        height: 100%;
-      }
-    }
-  }
-  .ant-spin-container {
-    height: 100%;
-    position: relative;
-
-    & > div:first-child {
-      display: none;
-    }
-  }
-  .rc-virtual-list {
-    height: 100%;
-    display: block !important;
-  }
-  .rc-virtual-list-holder {
-    height: 100%;
-
-    & > div {
-      height: 100%;
-      .rc-virtual-list-holder-inner {
-        overflow: auto;
-        height: 100%;
-      }
-    }
-  }
-`;
+});
 export { InfiniteList };

package/dist/components/InfiniteList/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("antd").ListProps<unknown> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}, never>> & string & Omit<(<T>(props: import("antd").ListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<(<T_1>(props: import("antd").ListProps<T_1>, ref: React.ForwardedRef<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>)>) & Pick<import("react").FC<{}>, "displayName"> & {
+    Item: import("antd/es/list/Item").ListItemTypeProps;
+}, keyof import("react").Component<any, {}, any>>;

package/dist/components/InfiniteList/styles.js

@@ -0,0 +1,44 @@
+import { List } from "antd";
+import { styled } from "styled-components";
+const ListContainer = styled(List)`
+  &.ant-list {
+    height: 100%;
+  }
+  .ant-spin-nested-loading {
+    height: 100%;
+    & > div:first-child {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      .ant-spin-spinning {
+        height: 100%;
+      }
+    }
+  }
+  .ant-spin-container {
+    height: 100%;
+    position: relative;
+
+    & > div:first-child {
+      display: none;
+    }
+  }
+  .rc-virtual-list {
+    height: 100%;
+    display: block !important;
+  }
+  .rc-virtual-list-holder {
+    height: 100%;
+
+    & > div {
+      height: 100%;
+      .rc-virtual-list-holder-inner {
+        overflow: auto;
+        height: 100%;
+      }
+    }
+  }
+`;
+export { ListContainer };

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

@@ -2,9 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Divider, Input } from "antd";
 import { ChatInputBottom, ChatInputContent, ChatInputPanel } from "./styles.js";
 import { useState } from "react";
+import { StopOutlined, ToTopOutlined } from "@ant-design/icons";
 const ChatSender = (props)=>{
     const { placeholder, value, onChange, onSubmit, extra, disabled, style, className } = props;
-    const [lodaing, setLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
     return /*#__PURE__*/ jsxs(ChatInputPanel, {
         style: style,
         className: className,
@@ -26,8 +27,12 @@ const ChatSender = (props)=>{
                         type: "vertical"
                     }),
                     /*#__PURE__*/ jsx(Button, {
-                        disabled: lodaing || disabled,
+                        disabled: loading || disabled,
+                        loading: loading,
+                        shape: "circle",
+                        icon: loading ? /*#__PURE__*/ jsx(StopOutlined, {}) : /*#__PURE__*/ jsx(ToTopOutlined, {}),
                         type: "primary",
+                        variant: "filled",
                         onClick: async ()=>{
                             setLoading(true);
                             try {
@@ -35,8 +40,7 @@ const ChatSender = (props)=>{
                             } finally{
                                 setLoading(false);
                             }
-                        },
-                        children: "发送"
+                        }
                     })
                 ]
             })

package/dist/features/ChatClient/components/ClientContent/Header.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { EditOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
-import { Button, Divider, Input, Modal } from "antd";
+import { Button, Divider } from "antd";
 import { styled } from "styled-components";
 import { useChatClientContext } from "../../context/index.js";
 const Header = (props)=>{
@@ -19,12 +19,15 @@ const Header = (props)=>{
 };
 const HeaderLeft = (props)=>{
     const { onClickNewConversation, onTitleChange } = props;
-    const { collapsed, setCollapsed } = useChatClientContext();
-    const [open, setOpen] = useState(false);
+    const { collapsed, setCollapsed, showUpdateTitleModal } = useChatClientContext();
     const [title, setTitle] = useState(props.defaultTitle);
     const onCollapsed = ()=>{
         setCollapsed(!collapsed);
     };
+    const onSubmitTitleChange = async (newTitle)=>{
+        await onTitleChange?.(newTitle);
+        setTitle(newTitle);
+    };
     const showActions = !!collapsed;
     const showTitle = !!title;
     return /*#__PURE__*/ jsxs(Left, {
@@ -58,7 +61,7 @@ const HeaderLeft = (props)=>{
                 children: [
                     /*#__PURE__*/ jsx(NameText, {
                         children: /*#__PURE__*/ jsx(Button, {
-                            onClick: ()=>setOpen(true),
+                            onClick: ()=>showUpdateTitleModal(title, onSubmitTitleChange),
                             size: "small",
                             type: "text",
                             iconPosition: "end",
@@ -70,43 +73,10 @@ const HeaderLeft = (props)=>{
                         children: "内容由 AI 生成"
                     })
                 ]
-            }),
-            /*#__PURE__*/ jsx(UpdateTitleModal, {
-                defaultName: title,
-                open: open,
-                onClose: ()=>setOpen(false),
-                onSubmit: async (value)=>{
-                    await onTitleChange?.(value);
-                    setTitle(value);
-                }
             })
         ]
     });
 };
-const UpdateTitleModal = (props)=>{
-    const { defaultName, open, onSubmit, onClose } = props;
-    const [name, setName] = useState(defaultName);
-    useEffect(()=>{
-        if (open) setName(defaultName);
-    }, [
-        open
-    ]);
-    return /*#__PURE__*/ jsx(Modal, {
-        title: "编辑对话名称",
-        open: open,
-        okText: "确定",
-        cancelText: "取消",
-        onCancel: ()=>onClose?.(),
-        onOk: async ()=>{
-            await onSubmit?.(name);
-            onClose?.();
-        },
-        children: /*#__PURE__*/ jsx(Input, {
-            value: name,
-            onChange: (e)=>setName(e.target.value)
-        })
-    });
-};
 const ActionContainer = styled.div`
     display: flex;
     align-items: center;

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

@@ -4,7 +4,7 @@ export interface ClientContentProps {
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
-    headerProps: HeaderProps;
+    headerProps?: HeaderProps;
     footerProps?: FooterProps;
     loading?: boolean;
 }

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

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Spin } from "antd";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
-import { Container } from "./styles.js";
 import { Content } from "./Content.js";
+import { Container } from "./styles.js";
 const ClientContent = (props)=>{
     const { style, className, children, headerProps, footerProps, loading } = props;
     if (loading) return /*#__PURE__*/ jsx(Container, {

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

@@ -1,10 +1,10 @@
-import { InfiniteListProps, RenderActions } from "../../../../components/InfiniteList";
+import { InfiniteListProps } from "../../../../components/InfiniteList";
 export interface HistoryConversationProps<T = any> {
     rowKey?: string;
     request: InfiniteListProps<T>['request'];
     activeKey?: string;
-    onDelete?: (key: string, item: T, actions: RenderActions<T>) => Promise<void>;
-    onRename?: (key: string, item: T, actions: RenderActions<T>) => Promise<void>;
+    onDelete?: (key: string, item: T) => Promise<void>;
+    onRename?: (key: string, item: T) => Promise<void>;
     onSelect?: (key: string, item: T) => void;
 }
 export declare const HistoryConversation: <T extends ItemData = any>(props: HistoryConversationProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,16 +4,17 @@ import { Avatar, Button, Dropdown, Tooltip, Typography } from "antd";
 import { useHover } from "ahooks";
 import { ClockCircleOutlined, MessageOutlined, MoreOutlined } from "@ant-design/icons";
 import { InfiniteList } from "../../../../components/InfiniteList/index.js";
+import { useChatClientContext } from "../../context/index.js";
 import { HeaderContainer, HeaderTitle, HistoryConversationContainer, ListContainer, ListItemContainer, ListText } from "./styles.js";
 const HistoryConversation = (props)=>{
-    const { request, activeKey, rowKey = "id", onDelete, onRename, onSelect } = props;
-    const ref = useRef(null);
+    const { rowKey = "id", request, activeKey, onDelete, onRename, onSelect } = props;
+    const { showUpdateTitleModal, conversationListRef } = useChatClientContext();
     return /*#__PURE__*/ jsxs(HistoryConversationContainer, {
-        ref: ref,
         children: [
             /*#__PURE__*/ jsx(Header, {}),
             /*#__PURE__*/ jsx(ListContainer, {
                 children: /*#__PURE__*/ jsx(InfiniteList, {
+                    ref: conversationListRef,
                     request: request,
                     rowKey: rowKey,
                     pageSize: 10,
@@ -23,13 +24,25 @@ const HistoryConversation = (props)=>{
                             {
                                 key: 'rename',
                                 label: '重命名',
-                                onClick: ()=>onRename?.(key, item, actions)
+                                onClick: ()=>{
+                                    showUpdateTitleModal(item.title, async (newTitle)=>{
+                                        const newItem = {
+                                            ...item,
+                                            title: newTitle
+                                        };
+                                        await onRename?.(key, newItem);
+                                        actions.updateItem(key, newItem);
+                                    });
+                                }
                             },
                             {
                                 key: 'delete',
                                 danger: true,
                                 label: '删除',
-                                onClick: ()=>onDelete?.(key, item, actions)
+                                onClick: async ()=>{
+                                    await onDelete?.(key, item);
+                                    actions.deleteItem(key);
+                                }
                             }
                         ];
                         return /*#__PURE__*/ jsxs(ListItemContainer, {

package/dist/features/ChatClient/components/Layout/ChatPage.d.ts

@@ -8,7 +8,7 @@ export interface ChatPageProps<T = any> {
     onClickConversation?: (key: string, item: T) => void;
     onClickNewConversation?: () => void;
     onClickMoreAgent?: () => void;
-    onRenameConversation?: (key: string, item: T, actions: any) => Promise<void>;
-    onDeleteConversation?: (key: string, item: T, actions: any) => Promise<void>;
+    onRenameConversation?: (key: string, item: T) => Promise<void>;
+    onDeleteConversation?: (key: string, item: T) => Promise<void>;
 }
 export declare const ChatPage: (props: ChatPageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,15 @@
 import { ReactNode } from "react";
-export interface ChatClientContextProps {
+import { InfiniteListRef, RenderActions } from "../../../components/InfiniteList";
+export interface ChatClientContextProps<ConversationItemData = any> {
     collapsed: boolean;
     setCollapsed: (collapsed: boolean) => void;
+    showUpdateTitleModal: (title: string, onSubmit?: (title: string) => any) => void;
+    conversationListRef: InfiniteListRef<ConversationItemData>;
+    conversationAction: Partial<RenderActions<ConversationItemData>>;
 }
 export interface ChatClientProviderProps {
     children: ReactNode;
 }
-export declare const ChatClientContext: import("react").Context<ChatClientContextProps>;
+export declare const ChatClientContext: import("react").Context<ChatClientContextProps<any>>;
 export declare const ChatClientProvider: (props: ChatClientProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare function useChatClientContext(): ChatClientContextProps;
+export declare function useChatClientContext(): ChatClientContextProps<any>;

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

@@ -1,15 +1,25 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
+import { useUpdateTitleModal } from "./useUpdateTitleModal.js";
+import { useConversationListRef } from "./useConversationListRef.js";
 const ChatClientContext = /*#__PURE__*/ createContext({});
 const ChatClientProvider = (props)=>{
     const { children } = props;
+    const { updateTitleModalEle, showUpdateTitleModal } = useUpdateTitleModal();
     const [collapsed, setCollapsed] = useState(false);
-    return /*#__PURE__*/ jsx(ChatClientContext.Provider, {
+    const { conversationListRef, ...conversationActions } = useConversationListRef();
+    return /*#__PURE__*/ jsxs(ChatClientContext.Provider, {
         value: {
             collapsed,
-            setCollapsed
+            setCollapsed,
+            showUpdateTitleModal,
+            conversationListRef,
+            conversationAction: conversationActions
         },
-        children: children
+        children: [
+            children,
+            updateTitleModalEle
+        ]
     });
 };
 function useChatClientContext() {

package/dist/features/ChatClient/context/useConversationListRef.d.ts

@@ -0,0 +1,7 @@
+import { RenderActions } from "../../../components/InfiniteList";
+export declare function useConversationListRef<DataType = any>(): {
+    updateItem?: ((key: string, item: DataType) => void) | undefined;
+    deleteItem?: ((key: string) => void) | undefined;
+    resetPagination?: (() => void) | undefined;
+    conversationListRef: import("react").RefObject<RenderActions<DataType> | null>;
+};

package/dist/features/ChatClient/context/useConversationListRef.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+function useConversationListRef() {
+    const conversationListRef = useRef(null);
+    return {
+        conversationListRef,
+        ...conversationListRef.current ?? {}
+    };
+}
+export { useConversationListRef };

package/dist/features/ChatClient/context/useUpdateTitleModal.d.ts

@@ -0,0 +1,4 @@
+export declare function useUpdateTitleModal(): {
+    updateTitleModalEle: import("react/jsx-runtime").JSX.Element;
+    showUpdateTitleModal: (title: string, onSubmit?: (title: string) => any) => void;
+};

package/dist/features/ChatClient/context/useUpdateTitleModal.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Input, Modal } from "antd";
+import { useRef, useState } from "react";
+function useUpdateTitleModal() {
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const callbackRef = useRef((title)=>{});
+    const updateTitleModalEle = /*#__PURE__*/ jsx(Modal, {
+        title: "编辑对话名称",
+        open: open,
+        okText: "确定",
+        cancelText: "取消",
+        onCancel: ()=>setOpen(false),
+        onOk: async ()=>{
+            await callbackRef.current(title);
+            setOpen(false);
+        },
+        children: /*#__PURE__*/ jsx(Input, {
+            value: title,
+            onChange: (e)=>setTitle(e.target.value)
+        })
+    });
+    const showUpdateTitleModal = (title, onSubmit)=>{
+        setTitle(title);
+        setOpen(true);
+        callbackRef.current = onSubmit || (()=>{});
+    };
+    return {
+        updateTitleModalEle,
+        showUpdateTitleModal
+    };
+}
+export { useUpdateTitleModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",