listpage-next 0.0.168 → 0.0.170

package/dist/features/ChatClient/ui/ConversationList/index.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Avatar, Button, Dropdown, Typography } from "antd";
+import { ListContainer, ListItemContainer, ListText } from "./styles.js";
+import { MessageOutlined, MoreOutlined } from "@ant-design/icons";
+import { InfiniteList } from "../../../../components/InfiniteList/index.js";
+const ConversationList = (props)=>{
+    const { ref, rowKey, request, menus = [], defaultActiveKey, onSelectConversation, onDeleteConversation, onRenameConversation } = props;
+    const [activeKey, setActiveKey] = useState(defaultActiveKey);
+    return /*#__PURE__*/ jsx(ListContainer, {
+        children: /*#__PURE__*/ jsx(InfiniteList, {
+            pageSize: 10,
+            rowKey: rowKey,
+            ref: ref,
+            request: request,
+            renderItem: (item, index, actions)=>{
+                const key = item[rowKey];
+                const items = [
+                    ...menus.map((menu)=>({
+                            ...menu,
+                            onClick: ()=>menu.onClick?.(item, index, actions)
+                        })),
+                    onRenameConversation && {
+                        key: 'rename',
+                        label: '重命名',
+                        onClick: async ()=>{
+                            const newItem = await onRenameConversation?.(item);
+                            if (!newItem) return;
+                            actions.updateItem(key, newItem);
+                        }
+                    },
+                    onDeleteConversation && {
+                        key: 'delete',
+                        danger: true,
+                        label: '删除',
+                        onClick: async ()=>{
+                            await onDeleteConversation?.(item);
+                            setActiveKey('');
+                            actions.deleteItem(key);
+                        }
+                    }
+                ].filter(Boolean);
+                return /*#__PURE__*/ jsxs(ListItemContainer, {
+                    isHover: activeKey === key ? true : void 0,
+                    onClick: ()=>{
+                        if (activeKey === key) return;
+                        setActiveKey?.(key);
+                        onSelectConversation?.(item);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Avatar, {
+                            size: 20,
+                            icon: item.icon || /*#__PURE__*/ jsx(MessageOutlined, {})
+                        }),
+                        /*#__PURE__*/ jsx(ListText, {
+                            children: /*#__PURE__*/ jsx(Typography.Text, {
+                                ellipsis: {
+                                    tooltip: {
+                                        title: item.title,
+                                        placement: 'right'
+                                    }
+                                },
+                                children: item.title
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            onClick: (e)=>e.stopPropagation(),
+                            children: /*#__PURE__*/ jsx(Dropdown, {
+                                menu: {
+                                    items
+                                },
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    type: "text",
+                                    size: "small",
+                                    icon: /*#__PURE__*/ jsx(MoreOutlined, {})
+                                })
+                            })
+                        })
+                    ]
+                });
+            }
+        })
+    });
+};
+export { ConversationList };

package/dist/features/ChatClient/ui/ConversationList/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isHover?: boolean;
+}>> & string;
+export declare const ListText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ChatClient/ui/ConversationList/styles.js

@@ -0,0 +1,30 @@
+import styled_components from "styled-components";
+const ListContainer = styled_components.div`
+  flex: 1;
+  overflow: hidden;
+  padding: 0 2px;
+`;
+const ListItemContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 4px;
+  border-radius: 8px;
+  cursor: pointer;
+  gap: 4px;
+
+  background-color: ${(props)=>props.isHover ? '#0000000a' : 'transparent'};
+
+  &:hover {
+    background-color: #0000000a;
+  }
+`;
+const ListText = styled_components.div`
+  flex: 1;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  word-wrap: break-word;
+`;
+export { ListContainer, ListItemContainer, ListText };

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;

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

@@ -0,0 +1,54 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import component from "./component.js";
+import { ensureTrailingText, keyDownHandlePlugin } from "../plugins.js";
+import { getCustomSlotAttribute } from "../../utils.js";
+const REACT_COMPONENT_NODE_NAME = 'inputSlot';
+const inputSlot = Node.create({
+    name: 'inputSlot',
+    group: 'inline',
+    inline: true,
+    content: 'inline*',
+    atom: false,
+    selectable: true,
+    draggable: false,
+    parseHTML () {
+        return [
+            {
+                tag: 'input-slot',
+                getAttrs: (element)=>({
+                        placeholder: element.getAttribute('placeholder')
+                    })
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes }) {
+        return [
+            'input-slot',
+            mergeAttributes(HTMLAttributes),
+            0
+        ];
+    },
+    addAttributes () {
+        return {
+            placeholder: {
+                default: '',
+                parseHTML: (element)=>element.getAttribute('placeholder') || '',
+                renderHTML: (attributes)=>({
+                        placeholder: attributes.placeholder
+                    })
+            },
+            isCustomSlot: getCustomSlotAttribute()
+        };
+    },
+    addNodeView () {
+        return ReactNodeViewRenderer(component);
+    },
+    addProseMirrorPlugins () {
+        return [
+            ensureTrailingText(this.editor.schema),
+            keyDownHandlePlugin(this.editor.schema)
+        ];
+    }
+});
+export { REACT_COMPONENT_NODE_NAME, inputSlot as default };

package/dist/features/ChatClient/ui/EditorContent/extensions/plugins.d.ts

@@ -0,0 +1,24 @@
+import { EditorState, Plugin, Transaction } from 'prosemirror-state';
+import { EditorView } from '@tiptap/pm/view';
+/**
+ * @param newState
+ * @returns
+ * handleZeroWidthCharLogic 用于插入零宽字符或者删除多余的零宽字符
+ * 为什么需要插入零宽字符？
+ *  1. 保证自定义节点前后的光标高度正常，光标高度和内容相关，解决自定义节点是最后一个节点，
+ *     光标高度会和自定义节点占据高度一致，和文本中光标高度不一致的问题
+ *  2. 保证对于可编辑的 inline 节点（比如 input-slot），为最后一个节点时候，光标可以聚焦到该节点后
+ *  Why do we need to insert zero-width characters?
+ *  1. Ensure that the cursor height before and after the custom node is normal.
+ *  The cursor height is related to the content. Solve the problem that when the custom node is the last node，
+ *  the cursor height will be consistent with the height occupied by the custom node, and inconsistent with the cursor height in the text.
+ *  2. Ensure that for an editable inline node (such as input-slot), when it is the last node, the cursor can focus after the node.
+ */
+export declare function handleZeroWidthCharLogic(newState: EditorState): Transaction | null;
+export declare function ensureTrailingText(schema: any): Plugin;
+export declare function keyDownHandlePlugin(schema: any): Plugin;
+export declare function handlePasteLogic(view: EditorView, event: ClipboardEvent): boolean;
+export declare function removeZeroWidthChar($from: any, tr: Transaction): boolean;
+export declare function removeZeroWidthCharForComposition($from: any, tr: Transaction): Transaction | null;
+export declare function handleCompositionEndLogic(view: EditorView): void;
+export declare function handleTextInputLogic(view: EditorView, from: number, to: number, text: string): boolean;