listpage-next 0.0.89 → 0.0.91

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

@@ -3,18 +3,22 @@ import { useState } from "react";
 import { Button, Divider, Input } from "antd";
 import { ChatInputBottom, ChatInputContent, ChatInputPanel } from "./styles.js";
 import { ArrowUpOutlined, PauseCircleTwoTone } from "@ant-design/icons";
-import { useMessageContext } from "../../context/index.js";
+import { useChatClientContext, useMessageContext } from "../../context/index.js";
 const ChatSender = (props)=>{
     const { placeholder, extra, style, className } = props;
     const { isRequesting, sendMessage } = useMessageContext();
     const [inputValue, setInputValue] = useState("");
+    const { bubbleListRef } = useChatClientContext();
     const handleClick = async ()=>{
         if (isRequesting) return;
         sendMessage({
             role: 'user',
             content: inputValue.trim()
+        }, ()=>{
+            bubbleListRef.current?.scrollToBottom('instant');
         });
         setInputValue("");
+        bubbleListRef.current?.scrollToBottom('instant');
     };
     const handleKeyDown = (e)=>{
         if ('Enter' === e.key && !e.shiftKey) {

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,32 @@
 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)=>{
+const BubbleList = (props)=>{
     const { styles } = props;
-    const { render } = useChatClientContext();
+    const containerRef = useRef(null);
+    const { render, bubbleListRef } = useChatClientContext();
     const { messages } = useMessageContext();
+    const scrollToBottom = (behavior = "smooth")=>{
+        containerRef.current?.scrollTo({
+            top: containerRef.current.scrollHeight,
+            behavior
+        });
+    };
+    const scrollToBottomWhenAtBottom = (behavior = "instant")=>{
+        const ele = containerRef.current;
+        if (ele) {
+            if (Math.abs(ele.scrollHeight - ele.scrollTop - ele.clientHeight) < 10) scrollToBottom(behavior);
+        }
+    };
+    useImperativeHandle(bubbleListRef, ()=>({
+            scrollToBottom,
+            scrollToBottomWhenAtBottom
+        }), [
+        scrollToBottom
+    ]);
     return /*#__PURE__*/ jsxs(ContentContainer, {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: styles?.topPlaceholder ?? {
@@ -33,4 +54,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,13 @@ 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";
+import { useEffect } from "react";
 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 +16,8 @@ const ClientContentComponent = (props)=>{
             /*#__PURE__*/ jsx(Header, {
                 ...headerProps
             }),
-            /*#__PURE__*/ jsx(Content, {
-                ...contentProps
+            /*#__PURE__*/ jsx(BubbleList, {
+                ...bubbleProps
             }),
             /*#__PURE__*/ jsx(Footer, {
                 ...footerProps
@@ -25,8 +26,15 @@ const ClientContentComponent = (props)=>{
     });
 };
 const ClientContent = (props)=>{
-    const { request } = useChatClientContext();
+    const { request, bubbleListRef } = useChatClientContext();
     const { loading, data } = useRequest(request.getMessages);
+    useEffect(()=>{
+        if (false === loading) setTimeout(()=>{
+            bubbleListRef.current?.scrollToBottom();
+        }, 200);
+    }, [
+        loading
+    ]);
     if (loading) return /*#__PURE__*/ jsx(Container, {
         style: props.style,
         className: props.className,

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

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { InfiniteListProps, InfiniteListRef, RenderActions } from "../../../components/InfiniteList";
 import { BaseMessageInfo, Message, SendMessageRequest } from "./message";
+import { BubbleListRef } from "./useBubbleListRef";
 export type ChatRequest<SessionData = any, MessageInfo extends BaseMessageInfo = any> = {
     getConversations: InfiniteListProps<SessionData>['request'];
     getMessages: () => Promise<MessageInfo[]>;
@@ -17,6 +18,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: BubbleListRef;
 }
 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/message.d.ts

@@ -14,7 +14,7 @@ export type Message<MessageInfo extends BaseMessageInfo = any> = {
 };
 export type MessageContextValue<MessageInfo extends BaseMessageInfo = any> = {
     messages: Message<MessageInfo>[];
-    sendMessage: (info: MessageInfo) => void;
+    sendMessage: (info: MessageInfo, callback?: (info: MessageInfo) => void) => void;
     isRequesting: boolean;
 };
 export type SendMessageRequest<MessageInfo extends BaseMessageInfo = any> = (info: MessageInfo, callbacks: {

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

@@ -67,7 +67,7 @@ const MessageProvider = ({ initialMessages, children, request })=>{
             message.id = info.id;
         }
     }, []);
-    const sendMessage = useCallback((info)=>{
+    const sendMessage = useCallback((info, onUpdate)=>{
         setIsRequesting(true);
         createUserMessage(info);
         setMessages([
@@ -89,6 +89,7 @@ const MessageProvider = ({ initialMessages, children, request })=>{
                 setMessages([
                     ...messagesRef.current
                 ]);
+                onUpdate?.(info);
             },
             onSuccess: (id, info)=>{
                 completeAssistantMessage(id, info);

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

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+export type BubbleListAction = {
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    scrollToBottomWhenAtBottom: (behavior?: ScrollBehavior) => void;
+};
+export type BubbleListRef = RefObject<BubbleListAction>;
+export declare function useBubbleListRef(): {
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    scrollToBottomWhenAtBottom: (behavior?: ScrollBehavior) => void;
+    bubbleListRef: RefObject<BubbleListAction>;
+};

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

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

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

@@ -1,6 +1,7 @@
 export declare function useChatContext(): {
     messages: import("./message").Message<any>[];
-    sendMessage: (info: any) => void;
+    sendMessage: (info: any, callback?: ((info: any) => void) | undefined) => void;
     deleteConversation: ((key: string) => void) | undefined;
     updateConversation: ((key: string, item: any) => void) | undefined;
+    scrollToBottom: () => void;
 };

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.91",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",