listpage-next 0.0.89 → 0.0.90

package/dist/features/ChatClient/components/ClientContent/{Content.d.ts → BubbleList.d.ts}

@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
-export interface ContentProps {
+export interface BubbleListProps {
     styles?: {
         topPlaceholder?: CSSProperties;
         bottomPlaceholder?: CSSProperties;
         content?: CSSProperties;
     };
 }
-export declare const Content: (props: ContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BubbleList: (props: BubbleListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ClientContent/{Content.js → BubbleList.js}

@@ -1,11 +1,29 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useRef } from "react";
 import { styled } from "styled-components";
 import { useChatClientContext, useMessageContext } from "../../context/index.js";
-const Content = (props)=>{
+import { useMount } from "ahooks";
+const BubbleList = (props)=>{
     const { styles } = props;
-    const { render } = useChatClientContext();
+    const containerRef = useRef(null);
+    const { render, bubbleListRef } = useChatClientContext();
     const { messages } = useMessageContext();
+    const scrollToBottom = ()=>{
+        containerRef.current?.scrollTo({
+            top: containerRef.current.scrollHeight,
+            behavior: "smooth"
+        });
+    };
+    useMount(()=>{
+        scrollToBottom();
+    });
+    useImperativeHandle(bubbleListRef, ()=>({
+            scrollToBottom
+        }), [
+        scrollToBottom
+    ]);
     return /*#__PURE__*/ jsxs(ContentContainer, {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: styles?.topPlaceholder ?? {
@@ -33,4 +51,4 @@ const ContentContainer = styled.div`
     overflow: auto;
     position: relative;
 `;
-export { Content };
+export { BubbleList };

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

@@ -1,11 +1,11 @@
 import { FooterProps } from "./Footer";
 import { HeaderProps } from "./Header";
-import { ContentProps } from "./Content";
+import { BubbleListProps } from "./BubbleList";
 export interface ClientContentProps {
     className?: string;
     style?: React.CSSProperties;
     headerProps?: HeaderProps;
     footerProps?: FooterProps;
-    contentProps?: ContentProps;
+    bubbleProps?: BubbleListProps;
 }
 export declare const ClientContent: (props: ClientContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,12 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRequest } from "ahooks";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
-import { Content } from "./Content.js";
+import { BubbleList } from "./BubbleList.js";
 import { MessageProvider, useChatClientContext } from "../../context/index.js";
 import { PageLoading } from "../../../../components/Page/components/Loading/index.js";
 import { Container } from "./styles.js";
 const ClientContentComponent = (props)=>{
-    const { style, className, headerProps, footerProps, contentProps } = props;
+    const { style, className, headerProps, footerProps, bubbleProps } = props;
     return /*#__PURE__*/ jsxs(Container, {
         style: style,
         className: className,
@@ -15,8 +15,8 @@ const ClientContentComponent = (props)=>{
             /*#__PURE__*/ jsx(Header, {
                 ...headerProps
             }),
-            /*#__PURE__*/ jsx(Content, {
-                ...contentProps
+            /*#__PURE__*/ jsx(BubbleList, {
+                ...bubbleProps
             }),
             /*#__PURE__*/ jsx(Footer, {
                 ...footerProps

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

@@ -8,5 +8,6 @@ const Layout = styled_components.div`
 `;
 const Content = styled_components.div`
     flex: 1;
+    min-width: 0;
 `;
 export { Content, Layout };

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

@@ -17,6 +17,7 @@ export interface ChatClientContextProps<SessionData = any, MessageInfo extends B
     showUpdateTitleModal: (title: string, onSubmit?: (title: string) => any) => void;
     conversationListRef: InfiniteListRef<SessionData>;
     conversationAction: Partial<RenderActions<SessionData>>;
+    bubbleListRef: any;
 }
 export interface ChatClientProviderProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
     children: ReactNode;

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

@@ -2,12 +2,14 @@ import { jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 import { useUpdateTitleModal } from "./useUpdateTitleModal.js";
 import { useConversationListRef } from "./useConversationListRef.js";
+import { useBubbleListRef } from "./useBubbleListRef.js";
 const ChatClientContext = /*#__PURE__*/ createContext({});
 const ChatClientProvider = (props)=>{
     const { children, request, render } = props;
     const { updateTitleModalEle, showUpdateTitleModal } = useUpdateTitleModal();
     const [collapsed, setCollapsed] = useState(false);
     const { conversationListRef, ...conversationActions } = useConversationListRef();
+    const { bubbleListRef } = useBubbleListRef();
     return /*#__PURE__*/ jsxs(ChatClientContext.Provider, {
         value: {
             render,
@@ -16,6 +18,7 @@ const ChatClientProvider = (props)=>{
             setCollapsed,
             showUpdateTitleModal,
             conversationListRef,
+            bubbleListRef,
             conversationAction: conversationActions
         },
         children: [

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

@@ -0,0 +1,9 @@
+import { Ref } from "react";
+export type BubbleListAction = {
+    scrollToBottom: () => void;
+};
+export type BubbleListRef = Ref<BubbleListAction>;
+export declare function useBubbleListRef(): {
+    scrollToBottom: () => void;
+    bubbleListRef: import("react").RefObject<BubbleListAction>;
+};

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

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+function useBubbleListRef() {
+    const bubbleListRef = useRef({
+        scrollToBottom: ()=>{}
+    });
+    return {
+        bubbleListRef,
+        ...bubbleListRef.current
+    };
+}
+export { useBubbleListRef };

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

@@ -3,4 +3,5 @@ export declare function useChatContext(): {
     sendMessage: (info: any) => void;
     deleteConversation: ((key: string) => void) | undefined;
     updateConversation: ((key: string, item: any) => void) | undefined;
+    scrollToBottom: () => any;
 };

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

@@ -1,14 +1,15 @@
 import { useChatClientContext } from "./client.js";
 import { useMessageContext } from "./message.js";
 function useChatContext() {
-    const { conversationAction } = useChatClientContext();
+    const { conversationAction, bubbleListRef } = useChatClientContext();
     const { messages, sendMessage } = useMessageContext();
     const { deleteItem, updateItem } = conversationAction ?? {};
     return {
         messages,
         sendMessage,
         deleteConversation: deleteItem,
-        updateConversation: updateItem
+        updateConversation: updateItem,
+        scrollToBottom: ()=>bubbleListRef.current?.scrollToBottom()
     };
 }
 export { useChatContext };

package/package.json

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