listpage-next 0.0.90 → 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/BubbleList.js

@@ -2,23 +2,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
 import { styled } from "styled-components";
 import { useChatClientContext, useMessageContext } from "../../context/index.js";
-import { useMount } from "ahooks";
 const BubbleList = (props)=>{
     const { styles } = props;
     const containerRef = useRef(null);
     const { render, bubbleListRef } = useChatClientContext();
     const { messages } = useMessageContext();
-    const scrollToBottom = ()=>{
+    const scrollToBottom = (behavior = "smooth")=>{
         containerRef.current?.scrollTo({
             top: containerRef.current.scrollHeight,
-            behavior: "smooth"
+            behavior
         });
     };
-    useMount(()=>{
-        scrollToBottom();
-    });
+    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
+            scrollToBottom,
+            scrollToBottomWhenAtBottom
         }), [
         scrollToBottom
     ]);

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

@@ -6,6 +6,7 @@ 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, bubbleProps } = props;
     return /*#__PURE__*/ jsxs(Container, {
@@ -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/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,7 +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: any;
+    bubbleListRef: BubbleListRef;
 }
 export interface ChatClientProviderProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
     children: ReactNode;

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

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

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

@@ -1,7 +1,8 @@
 import { useRef } from "react";
 function useBubbleListRef() {
     const bubbleListRef = useRef({
-        scrollToBottom: ()=>{}
+        scrollToBottom: ()=>{},
+        scrollToBottomWhenAtBottom: ()=>{}
     });
     return {
         bubbleListRef,

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

@@ -1,7 +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: () => any;
+    scrollToBottom: () => void;
 };

package/package.json

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