listpage-next 0.0.167 → 0.0.169

package/dist/demos/demo8.js

@@ -1,31 +1,52 @@
 import { jsx } from "react/jsx-runtime";
-import "../features/ChatClient/index.js";
-import { SimplifyChatPage } from "../features/ChatClient/components/ChatPage/SimplifyChatPage.js";
-const Demo8 = ()=>/*#__PURE__*/ jsx(SimplifyChatPage, {
-        style: {
-            height: '100%'
-        },
-        initialMessages: [
+import { ChatPage, ClientContent } from "../features/ChatClient/index.js";
+import "../features/ChatClient/components/ChatPage/SimplifyChatPage.js";
+const request = {
+    chat: async ()=>{},
+    getConversations: async ()=>({
+            list: [
+                {
+                    id: '11',
+                    title: 'xxxxxxx'
+                }
+            ]
+        }),
+    getMessages: ()=>[
             {
                 role: 'user',
-                content: '你是谁？'
+                content: 'xxxx'
             },
             {
                 role: 'assistant',
-                content: '我是一个AI'
-            }
-        ],
-        request: {
-            chat: function(info, callbacks) {
-                throw new Error('Function not implemented.');
+                content: 'xxxx'
             }
+        ]
+};
+const Demo8 = ()=>/*#__PURE__*/ jsx("div", {
+        style: {
+            width: 1000
         },
-        render: {
-            renderMessage: function(message) {
-                return /*#__PURE__*/ jsx("div", {
-                    children: message.info.content
-                });
-            }
-        }
+        children: /*#__PURE__*/ jsx(ChatPage, {
+            request: request,
+            render: {
+                renderMessage (message) {
+                    return /*#__PURE__*/ jsx("div", {
+                        children: message.info.content
+                    });
+                }
+            },
+            action: {
+                onClickConversation: void 0,
+                onClickNewConversation: void 0,
+                onRenameConversation: void 0,
+                onDeleteConversation: void 0
+            },
+            children: /*#__PURE__*/ jsx(ClientContent, {
+                style: {
+                    height: '100%'
+                },
+                title: "搜索海量信息，生成研究报告"
+            })
+        })
     });
 export { Demo8 };

package/dist/features/ChatClient/components/ChatContent/BubbleList.d.ts

@@ -1,8 +1,4 @@
-import { CSSProperties } from 'react';
-export interface BubbleListProps {
-    styles?: {
-        bottomPlaceholder?: CSSProperties;
-        content?: CSSProperties;
-    };
-}
-export declare const BubbleList: (props: BubbleListProps) => import("react/jsx-runtime").JSX.Element;
+import { BaseMessageInfo } from '../../context';
+import { BubbleListProps } from '../../ui';
+export type ChatBubbleListProps<MessageInfo extends BaseMessageInfo = any> = Pick<BubbleListProps<MessageInfo>, 'styles'>;
+export declare const ChatBubbleList: (props: ChatBubbleListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ChatContent/BubbleList.js

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
-import { styled } from "styled-components";
 import { useChatClientContext, useMessageContext } from "../../context/index.js";
-const BubbleList = (props)=>{
+import { BubbleList } from "../../ui/index.js";
+const ChatBubbleList = (props)=>{
     const { styles } = props;
     const bottomRef = useRef(null);
     const containerRef = useRef(null);
@@ -25,30 +25,10 @@ const BubbleList = (props)=>{
         }), [
         scrollToBottom
     ]);
-    return /*#__PURE__*/ jsxs(ContentContainer, {
-        ref: containerRef,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                style: styles?.content,
-                children: (ctx.messages ?? []).map((msg)=>render.renderMessage(msg, ctx))
-            }),
-            /*#__PURE__*/ jsx("div", {
-                ref: bottomRef,
-                style: styles?.bottomPlaceholder ?? {
-                    height: 60
-                }
-            })
-        ]
+    return /*#__PURE__*/ jsx(BubbleList, {
+        styles: styles,
+        messages: ctx.messages,
+        messageRender: (message)=>render.renderMessage(message, ctx)
     });
 };
-const ContentContainer = styled.div`
-  min-height: 100px;
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: auto;
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 calc((100% - 800px) / 2);
-`;
-export { BubbleList };
+export { ChatBubbleList };

package/dist/features/ChatClient/components/ChatContent/ClientContentBody.d.ts

@@ -1,12 +1,14 @@
 /**
  * 极简版对话内容
  */
-import { BubbleListProps } from './BubbleList';
+import { ChatBubbleListProps } from './BubbleList';
 import { ChatSenderProps } from '../ChatSender';
+import { ReactNode } from 'react';
 export interface ClientContentBodyProps {
     senderProps?: ChatSenderProps;
-    bubbleProps?: BubbleListProps;
+    bubbleProps?: ChatBubbleListProps;
     style?: React.CSSProperties;
+    sender?: ReactNode;
 }
 export declare const ClientContentBody: (props: ClientContentBodyProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SimplifyClientContentBody: (props: ClientContentBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ChatContent/ClientContentBody.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BubbleList } from "./BubbleList.js";
+import { ChatBubbleList } from "./BubbleList.js";
 import { ChatSender } from "../ChatSender/index.js";
 import { styled } from "styled-components";
 const ClientContentBody = (props)=>{
-    const { senderProps, bubbleProps, style } = props;
+    const { senderProps, bubbleProps, style, sender } = props;
     return /*#__PURE__*/ jsxs(Content, {
         style: style,
         children: [
-            /*#__PURE__*/ jsx(BubbleList, {
+            /*#__PURE__*/ jsx(ChatBubbleList, {
                 ...bubbleProps
             }),
-            /*#__PURE__*/ jsx(SenderContainer, {
+            void 0 === sender ? /*#__PURE__*/ jsx(SenderContainer, {
                 children: /*#__PURE__*/ jsx(ChatSender, {
                     ...senderProps
                 })
-            })
+            }) : sender
         ]
     });
 };
@@ -23,7 +23,7 @@ const SimplifyClientContentBody = (props)=>{
     return /*#__PURE__*/ jsxs(Content, {
         style: style,
         children: [
-            /*#__PURE__*/ jsx(BubbleList, {
+            /*#__PURE__*/ jsx(ChatBubbleList, {
                 ...bubbleProps
             }),
             /*#__PURE__*/ jsx(ChatSender, {

package/dist/features/ChatClient/components/ChatContent/ClientContentHeader.js

@@ -78,41 +78,46 @@ const HeaderLeft = (props)=>{
     });
 };
 const ActionContainer = styled.div`
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    gap: 4px;
+  gap: 4px;
 `;
 const NameContainer = styled.div`
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
 `;
 const NameText = styled.span`
-    font-size: 14px;
-    font-weight: 500;
-    color: #000000;
+  font-size: 14px;
+  font-weight: 500;
+  color: #000000;
 
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 `;
 const AiTipText = styled.span`
-    font-size: 11px;
-    color: #00000080;
-    padding: 0 8px;
+  font-size: 11px;
+  color: #00000080;
+  padding: 0 8px;
 `;
 const Left = styled.div`
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 `;
 const Right = styled.div`
-    
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 `;
 const HeaderContainer = styled.div`
-    height: 60px;
-    flex-shrink: 0;
-    flex-grow: 0;
-    display: flex;
-    padding: 12.5px 0px;
-    box-sizing: border-box;
+  height: 60px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  display: flex;
+  padding: 12.5px 0px;
+  box-sizing: border-box;
 `;
 export { ClientContentHeader };

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

@@ -1,15 +1,17 @@
 import { CSSProperties, ReactNode } from 'react';
-import { BubbleListProps } from './BubbleList';
-import { ChatSenderProps } from '../ChatSender';
+import { ChatBubbleListProps } from './BubbleList';
+import { ClientContentBodyProps } from './ClientContentBody';
 export interface ClientContentProps {
     style?: CSSProperties;
     className?: string;
     extra?: ReactNode;
     title?: string;
+    header?: ReactNode;
+    sender?: ReactNode;
     onTitleChange?: (title: string) => void;
     onClickNewConversation?: () => void;
     loading?: boolean;
-    senderProps?: ChatSenderProps;
-    bubbleProps?: BubbleListProps;
+    senderProps?: ClientContentBodyProps['senderProps'];
+    bubbleProps?: ChatBubbleListProps;
 }
 export declare const ClientContent: ({ loading, ...props }: ClientContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,18 +7,19 @@ import { ClientContentHeader } from "./ClientContentHeader.js";
 import { MessageProvider, useChatClientContext } from "../../context/index.js";
 import { PageLoading } from "../../../../components/Page/components/Loading/index.js";
 const ClientContentComponent = (props)=>{
-    const { extra, style, className, title, onTitleChange, onClickNewConversation, senderProps, bubbleProps } = props;
+    const { extra, style, header, sender, className, title, onTitleChange, onClickNewConversation, senderProps, bubbleProps } = props;
     return /*#__PURE__*/ jsxs(Container, {
         style: style,
         className: className,
         children: [
-            /*#__PURE__*/ jsx(ClientContentHeader, {
+            void 0 === header ? /*#__PURE__*/ jsx(ClientContentHeader, {
                 defaultTitle: title,
                 onTitleChange: onTitleChange,
                 onClickNewConversation: onClickNewConversation,
                 extra: extra
-            }),
+            }) : header,
             /*#__PURE__*/ jsx(ClientContentBody, {
+                sender: sender,
                 senderProps: senderProps,
                 bubbleProps: bubbleProps
             })

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Button, Divider, Input } from "antd";
 import { ArrowUpOutlined, PauseCircleTwoTone } from "@ant-design/icons";
+import { EditorContent } from "../../ui/index.js";
 import { useChatClientContext, useMessageContext } from "../../context/index.js";
 import { ChatInputBottom, ChatInputContent, ChatInputPanel, MiniChatInputContent, MiniChatInputPanel } from "./styles.js";
 const ChatSender = (props)=>{
@@ -25,10 +26,12 @@ const ChatSender = (props)=>{
 };
 const PureChatSender = (props)=>{
     const { style, className, placeholder, extra, loading, onSubmit, mode = 'textarea' } = props;
-    const [inputValue, setInputValue] = useState("");
+    const ref = useRef(null);
+    const [inputValue, setInputValue] = useState('');
     const handleClick = async ()=>{
         onSubmit?.(inputValue);
-        setInputValue("");
+        setInputValue('');
+        ref.current?.commands.clearContent();
     };
     const handleKeyDown = (e)=>{
         if ('Enter' === e.key && !e.shiftKey) {
@@ -65,12 +68,11 @@ const PureChatSender = (props)=>{
         className: className,
         children: [
             /*#__PURE__*/ jsx(ChatInputContent, {
-                children: /*#__PURE__*/ jsx(Input.TextArea, {
+                children: /*#__PURE__*/ jsx(EditorContent, {
                     placeholder: placeholder,
-                    value: inputValue,
-                    autoSize: false,
-                    onChange: (e)=>setInputValue?.(e.target.value),
-                    onKeyDown: handleKeyDown
+                    editorRef: ref,
+                    onChange: (content)=>setInputValue(content),
+                    onKeyDown: (e)=>handleKeyDown(e)
                 })
             }),
             /*#__PURE__*/ jsxs(ChatInputBottom, {

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 export interface LogoProps {
     icon: ReactNode;
     title: string;

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

@@ -9,7 +9,7 @@ const Logo = (props)=>{
                 size: 36,
                 shape: "circle",
                 src: icon,
-                icon: "AI"
+                icon: 'AI'
             }),
             /*#__PURE__*/ jsx(LogoTitle, {
                 children: title
@@ -18,15 +18,15 @@ const Logo = (props)=>{
     });
 };
 const LogoContainer = styled.div`
-    height: 36px;
-    margin: 12px 0px 0px 0px;
-    display: flex;
-    gap: 8px;
-    align-items: center;
+  height: 36px;
+  margin: 12px 0px 0px 0px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
 `;
 const LogoTitle = styled.div`
-    color: #000000d9;
-    font-weight: 600;
-    font-size: 16px;
+  color: #000000d9;
+  font-weight: 600;
+  font-size: 16px;
 `;
 export { Logo };

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

@@ -1,11 +1,8 @@
 export * from './components/ChatPage';
 export * from './components/ChatGuidance';
 export * from './components/ChatContent';
-export * from './components/Bubble';
 export { SimplifyChatPage, type SimplifyChatPageProps, } from './components/ChatPage/SimplifyChatPage';
-export * from './components/ChatDialog';
-export * from './components/ChatSplitter';
-export * from './components/Bubble/Markdown';
 export { useChatContext } from './context/useChatContext';
 export * from './context/types';
 export * from './utils/parseSse';
+export * from './ui';

package/dist/features/ChatClient/index.js

@@ -3,10 +3,7 @@ import { useChatContext } from "./context/useChatContext.js";
 export * from "./components/ChatPage/index.js";
 export * from "./components/ChatGuidance/index.js";
 export * from "./components/ChatContent/index.js";
-export * from "./components/Bubble/index.js";
-export * from "./components/ChatDialog/index.js";
-export * from "./components/ChatSplitter/index.js";
-export * from "./components/Bubble/Markdown.js";
 export * from "./context/types.js";
 export * from "./utils/parseSse.js";
+export * from "./ui/index.js";
 export { SimplifyChatPage, useChatContext };

package/dist/features/ChatClient/ui/Bubble/BubbleList.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { BaseMessageInfo, Message } from '../../context';
+export interface BubbleListProps<MessageInfo extends BaseMessageInfo> {
+    styles?: {
+        bottomPlaceholder?: CSSProperties;
+        content?: CSSProperties;
+    };
+    messages: Message<MessageInfo>[];
+    messageRender: (message: Message<MessageInfo>) => React.ReactNode;
+}
+export declare const BubbleList: <MessageInfo extends BaseMessageInfo = any>(props: BubbleListProps<MessageInfo>) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/ui/Bubble/BubbleList.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { styled } from "styled-components";
+const BubbleList = (props)=>{
+    const { styles, messages, messageRender } = props;
+    const bottomRef = useRef(null);
+    const containerRef = useRef(null);
+    return /*#__PURE__*/ jsxs(ContentContainer, {
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: styles?.content,
+                children: (messages ?? []).map(messageRender)
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: bottomRef,
+                style: styles?.bottomPlaceholder ?? {
+                    height: 60
+                }
+            })
+        ]
+    });
+};
+const ContentContainer = styled.div`
+  min-height: 100px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 calc((100% - 800px) / 2);
+`;
+export { BubbleList };

package/dist/features/ChatClient/{components → ui}/Bubble/index.d.ts

@@ -3,3 +3,5 @@ export * from './Reasoning';
 export * from './ReferenceList';
 export * from './SuggestMessageList';
 export * from './LinkCard';
+export * from './BubbleList';
+export * from './Markdown';

package/dist/features/ChatClient/{components → ui}/Bubble/index.js

@@ -3,3 +3,5 @@ export * from "./Reasoning.js";
 export * from "./ReferenceList.js";
 export * from "./SuggestMessageList.js";
 export * from "./LinkCard.js";
+export * from "./BubbleList.js";
+export * from "./Markdown.js";

package/dist/features/ChatClient/ui/EditorContent/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const strings: {
+    ZERO_WIDTH_CHAR: string;
+};

package/dist/features/ChatClient/ui/EditorContent/constants.js

@@ -0,0 +1,4 @@
+const strings = {
+    ZERO_WIDTH_CHAR: '\u200B'
+};
+export { strings };

package/dist/features/ChatClient/ui/EditorContent/editor.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from '@tiptap/react';
+import { RefObject } from 'react';
+export interface EditorContentProps {
+    placeholder?: string;
+    editorRef?: RefObject<Editor | null>;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onChange?: (content: string) => void;
+    handleKeyDown?: (view: any, event: KeyboardEvent) => boolean;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    handleCreate?: () => void;
+}
+export declare const EditorContent: (props: EditorContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/ui/EditorContent/editor.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import extension_document from "@tiptap/extension-document";
+import extension_text from "@tiptap/extension-text";
+import { Placeholder, UndoRedo } from "@tiptap/extensions";
+import extension_paragraph from "@tiptap/extension-paragraph";
+import extension_hard_break from "@tiptap/extension-hard-break";
+import styled_components from "styled-components";
+import { handleCompositionEndLogic, handlePasteLogic, handleTextInputLogic, handleZeroWidthCharLogic } from "./extensions/plugins.js";
+import inputSlot from "./extensions/inputSlot/index.js";
+import skillSlot from "./extensions/skillSlot/index.js";
+const editor_EditorContent = (props)=>{
+    const { editorRef, onKeyDown, onChange, placeholder, handleKeyDown, onFocus, onBlur, handleCreate } = props;
+    const isComposing = useRef(false);
+    const handleCompositionStart = useCallback((view)=>{
+        isComposing.current = true;
+    }, []);
+    const handleCompositionEnd = useCallback((view)=>{
+        isComposing.current = false;
+        handleCompositionEndLogic(view);
+    }, []);
+    const handleTextInput = useCallback((view, from, to, text)=>{
+        if (isComposing.current) return false;
+        return handleTextInputLogic(view, from, to, text);
+    }, []);
+    const allExtensions = useMemo(()=>[
+            extension_document,
+            extension_paragraph,
+            extension_text,
+            UndoRedo,
+            extension_hard_break,
+            inputSlot,
+            skillSlot,
+            Placeholder.configure({
+                placeholder: placeholder
+            })
+        ], [
+        placeholder
+    ]);
+    const editorProps = useMemo(()=>({
+            handleKeyDown: handleKeyDown,
+            handlePaste: handlePasteLogic,
+            handleTextInput,
+            handleDOMEvents: {
+                compositionstart: handleCompositionStart,
+                compositionend: handleCompositionEnd
+            }
+        }), [
+        handleKeyDown,
+        handleTextInput,
+        handleCompositionStart,
+        handleCompositionEnd
+    ]);
+    const onCreate = useCallback(({ editor })=>{
+        const { state, view } = editor;
+        const tr = handleZeroWidthCharLogic(state);
+        if (tr) view.dispatch(tr);
+        handleCreate?.();
+    }, [
+        handleCreate
+    ]);
+    const onUpdate = useCallback(({ editor })=>{
+        const content = editor.getText();
+        onChange?.(content);
+    }, [
+        onChange
+    ]);
+    const editor = useEditor({
+        extensions: allExtensions,
+        content: "",
+        editorProps: editorProps,
+        onCreate,
+        onUpdate
+    });
+    useEffect(()=>{
+        if (editorRef) editorRef.current = editor;
+    }, [
+        editor,
+        editorRef
+    ]);
+    return /*#__PURE__*/ jsx(EditorContentStyled, {
+        editor: editor,
+        onKeyDown: onKeyDown,
+        onFocus: onFocus,
+        onBlur: onBlur
+    });
+};
+const EditorContentStyled = styled_components(EditorContent)`
+  .ProseMirror {
+    outline: none;
+    p {
+      margin: 2px 0;
+    }
+  }
+`;
+export { editor_EditorContent as EditorContent };

package/dist/features/ChatClient/ui/EditorContent/extensions/inputSlot/component.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/features/ChatClient/ui/EditorContent/extensions/inputSlot/component.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { strings } from "../../constants.js";
+const component = (props)=>{
+    const isEmpty = props.node.textContent === strings.ZERO_WIDTH_CHAR;
+    const placeholder = props.node.attrs.placeholder || '';
+    const placeholderRef = useRef(null);
+    const [placeholderWidth, setPlaceholderWidth] = useState(void 0);
+    useLayoutEffect(()=>{
+        if (isEmpty && placeholderRef.current) {
+            const timer = setTimeout(()=>{
+                setPlaceholderWidth(placeholderRef.current?.offsetWidth);
+            });
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        isEmpty,
+        placeholder
+    ]);
+    return /*#__PURE__*/ jsxs(NodeViewWrapper, {
+        as: "span",
+        className: "input-slot",
+        style: {
+            minWidth: isEmpty && placeholderWidth ? `${placeholderWidth}px` : void 0
+        },
+        children: [
+            isEmpty && /*#__PURE__*/ jsx("span", {
+                ref: placeholderRef,
+                "data-placeholder": true,
+                contentEditable: false,
+                className: "input-slot-placeholder",
+                children: placeholder
+            }),
+            /*#__PURE__*/ jsx(NodeViewContent, {
+                as: "div",
+                className: "content"
+            })
+        ]
+    });
+};
+export { component as default };

package/dist/features/ChatClient/ui/EditorContent/extensions/inputSlot/index.d.ts

@@ -0,0 +1,4 @@
+import { Node } from '@tiptap/core';
+export declare const REACT_COMPONENT_NODE_NAME = "inputSlot";
+declare const _default: Node<any, any>;
+export default _default;