listpage-next 0.0.83 → 0.0.85

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

@@ -13,8 +13,7 @@ const ChatGuidance = (props)=>{
             }),
             /*#__PURE__*/ jsx(ChatSender, {
                 extra: extra,
-                placeholder: placeholder,
-                onSubmit: onSubmit
+                placeholder: placeholder
             })
         ]
     });

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

@@ -1,9 +1,6 @@
 export interface ChatSenderProps {
     extra?: React.ReactNode;
     placeholder?: string;
-    submitting?: boolean;
-    onSubmit?: (value: string) => any;
-    onCancel?: () => Promise<void>;
     style?: React.CSSProperties;
     className?: string;
 }

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

@@ -1,21 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Button, Divider, Input } from "antd";
 import { ChatInputBottom, ChatInputContent, ChatInputPanel } from "./styles.js";
-import { useState } from "react";
 import { ArrowUpOutlined, PauseCircleTwoTone } from "@ant-design/icons";
+import { useMessageContext } from "../../context/useMessageContext.js";
 const ChatSender = (props)=>{
-    const { placeholder, onSubmit, onCancel, submitting, extra, style, className } = props;
+    const { placeholder, extra, style, className } = props;
+    const { isRequesting, sendMessage } = useMessageContext();
     const [inputValue, setInputValue] = useState("");
     const handleClick = async ()=>{
-        if (submitting && !onCancel) return;
-        if (submitting && onCancel) return void await onCancel();
-        onSubmit?.(inputValue);
+        if (isRequesting) return;
+        sendMessage({
+            role: 'user',
+            content: inputValue.trim()
+        });
         setInputValue("");
     };
     const handleKeyDown = (e)=>{
         if ('Enter' === e.key && !e.shiftKey) {
             e.preventDefault();
-            if (!submitting && inputValue) handleClick();
+            if (!isRequesting && inputValue) handleClick();
         }
     };
     return /*#__PURE__*/ jsxs(ChatInputPanel, {
@@ -40,10 +44,10 @@ const ChatSender = (props)=>{
                         type: "vertical"
                     }),
                     /*#__PURE__*/ jsx(Button, {
-                        disabled: !inputValue && !submitting,
-                        loading: submitting,
+                        disabled: !inputValue && !isRequesting,
+                        loading: isRequesting,
                         shape: "circle",
-                        icon: submitting ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(ArrowUpOutlined, {}),
+                        icon: isRequesting ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(ArrowUpOutlined, {}),
                         type: "primary",
                         variant: "filled",
                         onKeyDown: handleKeyDown,

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

@@ -3,9 +3,8 @@ import { HeaderProps } from "./Header";
 export interface ClientContentProps {
     className?: string;
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     headerProps?: HeaderProps;
-    footerProps?: Omit<FooterProps, 'submitting'>;
-    loading?: boolean;
+    footerProps?: FooterProps;
+    children?: React.ReactNode;
 }
 export declare const ClientContent: (props: ClientContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,33 +1,38 @@
 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 { Container } from "./styles.js";
-import { useChatClientContext } from "../../context/index.js";
+import { MessageProvider, useChatClientContext } from "../../context/index.js";
 import { PageLoading } from "../../../../components/Page/components/Loading/index.js";
 const ClientContent = (props)=>{
-    const { style, className, children, headerProps, footerProps, loading } = props;
-    const { submitting } = useChatClientContext();
+    const { style, className, children, headerProps, footerProps } = props;
+    const { request } = useChatClientContext();
+    const { loading, data } = useRequest(request.getMessages);
     if (loading) return /*#__PURE__*/ jsx(Container, {
         style: style,
         className: className,
         children: /*#__PURE__*/ jsx(PageLoading, {})
     });
-    return /*#__PURE__*/ jsxs(Container, {
-        style: style,
-        className: className,
-        children: [
-            /*#__PURE__*/ jsx(Header, {
-                ...headerProps
-            }),
-            /*#__PURE__*/ jsx(Content, {
-                children: children
-            }),
-            /*#__PURE__*/ jsx(Footer, {
-                ...footerProps,
-                submitting: submitting
-            })
-        ]
+    return /*#__PURE__*/ jsx(MessageProvider, {
+        request: request.chat,
+        initialMessages: data || [],
+        children: /*#__PURE__*/ jsxs(Container, {
+            style: style,
+            className: className,
+            children: [
+                /*#__PURE__*/ jsx(Header, {
+                    ...headerProps
+                }),
+                /*#__PURE__*/ jsx(Content, {
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(Footer, {
+                    ...footerProps
+                })
+            ]
+        })
     });
 };
 export { ClientContent };

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

@@ -1,14 +1,14 @@
 import { ReactNode } from "react";
-import { InfiniteListProps } from "../../../../components/InfiniteList";
-export interface ChatPageProps<T = any> {
+import { BaseMessageInfo, ClientRequest } from "../../context";
+export interface ChatPageProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
     logo?: string;
     title?: string;
     children?: ReactNode;
-    request: InfiniteListProps["request"];
-    onClickConversation?: (key: string, item: T) => void;
+    request: ClientRequest<SessionData, MessageInfo>;
+    onClickConversation?: (key: string, item: SessionData) => void;
     onClickNewConversation?: () => void;
     onClickMoreAgent?: () => void;
-    onRenameConversation?: (key: string, item: T) => Promise<void>;
-    onDeleteConversation?: (key: string, item: T) => Promise<void>;
+    onRenameConversation?: (key: string, item: SessionData) => Promise<void>;
+    onDeleteConversation?: (key: string, item: SessionData) => Promise<void>;
 }
 export declare const ChatPage: (props: ChatPageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,37 +5,41 @@ import { HistoryConversation } from "../HistoryConversation/index.js";
 import { NewConversation } from "../NewConversation/index.js";
 import { ChatClientProvider } from "../../context/index.js";
 import { Content, Layout } from "./styles.js";
-const ChatPage = (props)=>{
+const ChatPageComponent = (props)=>{
     const { logo, title, children, request, onClickConversation, onClickNewConversation, onClickMoreAgent, onRenameConversation, onDeleteConversation } = props;
-    return /*#__PURE__*/ jsx(ChatClientProvider, {
-        children: /*#__PURE__*/ jsxs(Layout, {
-            style: {
-                height: '100vh'
-            },
-            children: [
-                /*#__PURE__*/ jsxs(Sider, {
-                    children: [
-                        /*#__PURE__*/ jsx(Logo, {
-                            icon: logo,
-                            title: title || '智能对话'
-                        }),
-                        /*#__PURE__*/ jsx(NewConversation, {
-                            onClickNew: onClickNewConversation,
-                            onClickMoreAgent: onClickMoreAgent
-                        }),
-                        /*#__PURE__*/ jsx(HistoryConversation, {
-                            request: request,
-                            onSelect: onClickConversation,
-                            onRename: onRenameConversation,
-                            onDelete: onDeleteConversation
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(Content, {
-                    children: children
-                })
-            ]
-        })
+    return /*#__PURE__*/ jsxs(Layout, {
+        style: {
+            height: '100vh'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Sider, {
+                children: [
+                    /*#__PURE__*/ jsx(Logo, {
+                        icon: logo,
+                        title: title || '智能对话'
+                    }),
+                    /*#__PURE__*/ jsx(NewConversation, {
+                        onClickNew: onClickNewConversation,
+                        onClickMoreAgent: onClickMoreAgent
+                    }),
+                    /*#__PURE__*/ jsx(HistoryConversation, {
+                        request: request.getConversations,
+                        onSelect: onClickConversation,
+                        onRename: onRenameConversation,
+                        onDelete: onDeleteConversation
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Content, {
+                children: children
+            })
+        ]
     });
 };
+const ChatPage = (props)=>/*#__PURE__*/ jsx(ChatClientProvider, {
+        request: props.request,
+        children: /*#__PURE__*/ jsx(ChatPageComponent, {
+            ...props
+        })
+    });
 export { ChatPage };

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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { InfiniteListProps, InfiniteListRef, RenderActions } from "../../../components/InfiniteList";
+import { BaseMessageInfo, SendMessageRequest } from "./message";
+export type ClientRequest<SessionData = any, MessageInfo extends BaseMessageInfo = any> = {
+    getConversations: InfiniteListProps<SessionData>['request'];
+    getMessages: () => Promise<MessageInfo[]>;
+    chat: SendMessageRequest<MessageInfo>;
+};
+export interface ChatClientContextProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
+    request: ClientRequest<SessionData, MessageInfo>;
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    showUpdateTitleModal: (title: string, onSubmit?: (title: string) => any) => void;
+    conversationListRef: InfiniteListRef<SessionData>;
+    conversationAction: Partial<RenderActions<SessionData>>;
+}
+export interface ChatClientProviderProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
+    children: ReactNode;
+    request: ClientRequest<SessionData, MessageInfo>;
+}
+export declare const ChatClientContext: import("react").Context<ChatClientContextProps<any, any>>;
+export declare const ChatClientProvider: (props: ChatClientProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function useChatClientContext(): ChatClientContextProps<any, any>;

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

@@ -0,0 +1,29 @@
+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, request } = props;
+    const { updateTitleModalEle, showUpdateTitleModal } = useUpdateTitleModal();
+    const [collapsed, setCollapsed] = useState(false);
+    const { conversationListRef, ...conversationActions } = useConversationListRef();
+    return /*#__PURE__*/ jsxs(ChatClientContext.Provider, {
+        value: {
+            request,
+            collapsed,
+            setCollapsed,
+            showUpdateTitleModal,
+            conversationListRef,
+            conversationAction: conversationActions
+        },
+        children: [
+            children,
+            updateTitleModalEle
+        ]
+    });
+};
+function useChatClientContext() {
+    return useContext(ChatClientContext);
+}
+export { ChatClientContext, ChatClientProvider, useChatClientContext };

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

@@ -1,17 +1,2 @@
-import { ReactNode } from "react";
-import { InfiniteListRef, RenderActions } from "../../../components/InfiniteList";
-export interface ChatClientContextProps<ConversationItemData = any> {
-    submitting: boolean;
-    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;
-    submitting?: boolean;
-}
-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<any>;
+export * from './client';
+export * from './message';

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

@@ -1,29 +1,2 @@
-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, submitting = false } = props;
-    const { updateTitleModalEle, showUpdateTitleModal } = useUpdateTitleModal();
-    const [collapsed, setCollapsed] = useState(false);
-    const { conversationListRef, ...conversationActions } = useConversationListRef();
-    return /*#__PURE__*/ jsxs(ChatClientContext.Provider, {
-        value: {
-            submitting,
-            collapsed,
-            setCollapsed,
-            showUpdateTitleModal,
-            conversationListRef,
-            conversationAction: conversationActions
-        },
-        children: [
-            children,
-            updateTitleModalEle
-        ]
-    });
-};
-function useChatClientContext() {
-    return useContext(ChatClientContext);
-}
-export { ChatClientContext, ChatClientProvider, useChatClientContext };
+export * from "./client.js";
+export * from "./message.js";

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export type MessageStatus = 'loading' | 'success' | 'failed';
+export type BaseMessageInfo = {
+    id: string;
+    role: string;
+    content: string;
+    reasoning?: string;
+    [key: string]: any;
+};
+export type Message<MessageInfo extends BaseMessageInfo = any> = {
+    id: string;
+    status: MessageStatus;
+    info: MessageInfo;
+};
+export type MessageContextValue<MessageInfo extends BaseMessageInfo = any> = {
+    messages: Message<MessageInfo>[];
+    sendMessage: (info: MessageInfo) => void;
+    isRequesting: boolean;
+};
+export type SendMessageRequest<MessageInfo extends BaseMessageInfo = any> = (info: MessageInfo, callbacks: {
+    onCreated: (info: MessageInfo) => void;
+    onUpdate: (id: string, info: MessageInfo) => void;
+    onSuccess: (id: string, info: MessageInfo) => void;
+    onError: (id: string, info: MessageInfo) => void;
+}) => Promise<void>;
+export declare const MessageContext: import("react").Context<MessageContextValue<any>>;
+export declare const MessageProvider: <MessageInfo extends BaseMessageInfo = any>({ initialMessages, children, request, }: {
+    children: ReactNode;
+    initialMessages: MessageInfo[];
+    request: SendMessageRequest<MessageInfo>;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,124 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useRef, useState } from "react";
+import { useMount } from "ahooks";
+const MessageContext = /*#__PURE__*/ createContext({});
+const MessageProvider = ({ initialMessages, children, request })=>{
+    const [isRequesting, setIsRequesting] = useState(false);
+    const messagesRef = useRef([]);
+    const [messages, setMessages] = useState([]);
+    useMount(()=>{
+        messagesRef.current = initialMessages.map((info)=>({
+                id: info.id,
+                status: 'success',
+                info
+            }));
+        setMessages([
+            ...messagesRef.current
+        ]);
+    });
+    const createAssistantMessage = useCallback(()=>{
+        const message = {
+            id: 'placeholder',
+            status: 'loading',
+            info: {
+                id: 'placeholder',
+                role: 'assistant',
+                content: ''
+            }
+        };
+        messagesRef.current.push(message);
+    }, []);
+    const createUserMessage = useCallback((info)=>{
+        const message = {
+            id: 'placeholder',
+            status: 'loading',
+            info: {
+                ...info,
+                id: 'placeholder'
+            }
+        };
+        messagesRef.current.push(message);
+    }, []);
+    const completeUserMessage = useCallback((info)=>{
+        const index = messagesRef.current.findIndex((msg)=>'placeholder' === msg.id);
+        if (-1 !== index) {
+            const message = messagesRef.current[index];
+            message.status = 'success';
+            message.info = info;
+            message.id = info.id;
+        }
+    }, []);
+    const completeAssistantMessage = useCallback((id, info)=>{
+        const index = messagesRef.current.findIndex((msg)=>msg.id === id);
+        if (-1 !== index) {
+            const message = messagesRef.current[index];
+            message.status = 'success';
+            message.info = info;
+            message.id = info.id;
+        }
+        setIsRequesting(false);
+    }, []);
+    const updateMessage = useCallback((id, info)=>{
+        const index = messagesRef.current.findIndex((msg)=>msg.id === id);
+        if (-1 !== index) {
+            const message = messagesRef.current[index];
+            message.status = 'loading';
+            message.info = info;
+            message.id = info.id;
+        }
+    }, []);
+    const sendMessage = useCallback((info)=>{
+        setIsRequesting(true);
+        createUserMessage(info);
+        setMessages([
+            ...messagesRef.current
+        ]);
+        request(info, {
+            onCreated: (info)=>{
+                completeUserMessage(info);
+                createAssistantMessage();
+                console.log([
+                    ...messagesRef.current
+                ]);
+                setMessages([
+                    ...messagesRef.current
+                ]);
+            },
+            onUpdate: (id, info)=>{
+                updateMessage(id, info);
+                setMessages([
+                    ...messagesRef.current
+                ]);
+            },
+            onSuccess: (id, info)=>{
+                completeAssistantMessage(id, info);
+                setMessages([
+                    ...messagesRef.current
+                ]);
+            },
+            onError: (id, info)=>{
+                completeAssistantMessage(id, info);
+                setMessages([
+                    ...messagesRef.current
+                ]);
+            }
+        });
+    }, [
+        completeAssistantMessage,
+        completeUserMessage,
+        createAssistantMessage,
+        createUserMessage,
+        request,
+        updateMessage,
+        setMessages
+    ]);
+    return /*#__PURE__*/ jsx(MessageContext.Provider, {
+        value: {
+            messages,
+            sendMessage,
+            isRequesting
+        },
+        children: children
+    });
+};
+export { MessageContext, MessageProvider };

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { BaseMessageInfo, MessageContextValue } from "./message";
+export declare function useMessageContext<MessageInfo extends BaseMessageInfo = any>(): MessageContextValue<MessageInfo>;

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

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { MessageContext } from "./message.js";
+function useMessageContext() {
+    return useContext(MessageContext);
+}
+export { useMessageContext };

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

@@ -1,3 +1,4 @@
 export * from './components/Layout';
 export * from './components/ChatGuidance';
 export * from './components/ClientContent';
+export { useChatContext } from './context/useChatContext';

package/dist/features/ChatClient/index.js

@@ -1,3 +1,5 @@
+import { useChatContext } from "./context/useChatContext.js";
 export * from "./components/Layout/index.js";
 export * from "./components/ChatGuidance/index.js";
 export * from "./components/ClientContent/index.js";
+export { useChatContext };

package/package.json

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