listpage-next 0.0.168 → 0.0.170

package/dist/features/ChatClient/ui/EditorContent/extensions/plugins.js

@@ -0,0 +1,331 @@
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { strings } from "../constants.js";
+function handleZeroWidthCharLogic(newState) {
+    let todoPositions = [];
+    let { tr } = newState;
+    newState.doc.descendants((node, pos, parent)=>{
+        if ('paragraph' === node.type.name && node.childCount > 0) {
+            const { lastChild, firstChild } = node;
+            if (firstChild && firstChild.attrs.isCustomSlot) todoPositions.push(pos + 1);
+            if (lastChild && lastChild.attrs.isCustomSlot) {
+                const paragraphEndPos = pos + node.nodeSize - 1;
+                const prevChar = tr.doc.textBetween(paragraphEndPos - 1, paragraphEndPos, '', '');
+                if (prevChar !== strings.ZERO_WIDTH_CHAR) todoPositions.push(paragraphEndPos);
+            }
+            if (lastChild === firstChild && lastChild?.isText && lastChild.text === strings.ZERO_WIDTH_CHAR) todoPositions.push([
+                'remove',
+                pos + 1
+            ]);
+        }
+        if ('inputSlot' === node.type.name && 0 === node.content.size) todoPositions.push(pos + 1);
+        if (node.attrs.isCustomSlot) {
+            let nodeIndex = -1;
+            if (parent) {
+                parent.forEach((child, offset, i)=>{
+                    if (child === node) nodeIndex = i;
+                });
+                if (nodeIndex > -1 && nodeIndex < parent.childCount - 1) {
+                    const nextSibling = parent.child(nodeIndex + 1);
+                    if (nextSibling.attrs.isCustomSlot) todoPositions.push(pos + node.nodeSize);
+                }
+            }
+        }
+    });
+    if (todoPositions.length > 0) {
+        todoPositions.sort((a, b)=>{
+            const aOrder = Array.isArray(a) ? a[1] : a;
+            const bOrder = Array.isArray(b) ? b[1] : b;
+            return bOrder - aOrder;
+        }).forEach((insertPos)=>{
+            tr = Array.isArray(insertPos) && 'remove' === insertPos[0] ? tr.delete(insertPos[1], insertPos[1] + 1) : tr.insertText(strings.ZERO_WIDTH_CHAR, insertPos, insertPos);
+        });
+        return tr;
+    }
+    return null;
+}
+function ensureTrailingText(schema) {
+    return new Plugin({
+        appendTransaction (transactions, oldState, newState) {
+            const docChanged = transactions.some((tr)=>tr.docChanged);
+            if (!docChanged) return null;
+            return handleZeroWidthCharLogic(newState);
+        }
+    });
+}
+function keyDownHandlePlugin(schema) {
+    return new Plugin({
+        key: new PluginKey('prevent-empty-inline-node'),
+        props: {
+            handleKeyDown (view, event) {
+                const { state, dispatch } = view;
+                const { selection } = state;
+                const { $from, $to } = selection;
+                const node = $from.node();
+                if ('ArrowLeft' === event.key && 'inputSlot' !== node.type.name) {
+                    if ($from.nodeBefore && $from.nodeBefore.isText && $from.nodeBefore.text) {
+                        if ($from.nodeBefore.text === strings.ZERO_WIDTH_CHAR) {
+                            const parent = $from.parent;
+                            const index = $from.index();
+                            if (index >= 2) {
+                                const secondBeforeCursorNode = parent.child(index - 2);
+                                if (secondBeforeCursorNode.attrs.isCustomSlot) {
+                                    const nextCursorPos = $from.pos - 2;
+                                    dispatch(state.tr.setSelection(TextSelection.create(state.doc, nextCursorPos)));
+                                    event.preventDefault();
+                                    return true;
+                                }
+                            } else if (1 === index && 0 !== $from.pos) {
+                                const nextCursorPos = $from.before() - 1;
+                                nextCursorPos > 0 && dispatch(state.tr.setSelection(TextSelection.create(state.doc, nextCursorPos)));
+                                event.preventDefault();
+                                return true;
+                            }
+                        } else if ($from.nodeBefore.text.endsWith(strings.ZERO_WIDTH_CHAR)) {
+                            const nextCursorPos = $from.pos - 2;
+                            dispatch(state.tr.setSelection(TextSelection.create(state.doc, nextCursorPos)));
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                }
+                if ('ArrowRight' === event.key && 'inputSlot' !== node.type.name) {
+                    if ($from.nodeAfter && $from.nodeAfter.isText) {
+                        if ($from.nodeAfter.text === strings.ZERO_WIDTH_CHAR) {
+                            const parent = $from.parent;
+                            const index = $from.index();
+                            if (index < parent.children.length - 1) {
+                                const secondAfterCursorNode = parent.child(index + 1);
+                                if (secondAfterCursorNode.attrs.isCustomSlot) {
+                                    const newPos = $from.pos + 2;
+                                    dispatch(state.tr.setSelection(TextSelection.create(state.doc, newPos)));
+                                    event.preventDefault();
+                                    return true;
+                                }
+                            } else if (index === parent.children.length - 1 && state.doc.lastChild !== node) {
+                                const nextCursorPos = $from.after() + 1;
+                                dispatch(state.tr.setSelection(TextSelection.create(state.doc, nextCursorPos)));
+                                event.preventDefault();
+                                return true;
+                            }
+                        } else if ($from.nodeBefore && $from.nodeBefore.isText && $from.nodeBefore.text?.startsWith(strings.ZERO_WIDTH_CHAR)) {
+                            const nextCursorPos = $from.pos + 2;
+                            dispatch(state.tr.setSelection(TextSelection.create(state.doc, nextCursorPos)));
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                }
+                if ('Backspace' === event.key && selection.empty) {
+                    const beforeNode = $from.nodeBefore;
+                    const afterNode = $from.nodeAfter;
+                    if ($from.nodeBefore && $from.nodeBefore.isText && $from.nodeBefore.text?.length === 1 && $from.nodeBefore.text !== strings.ZERO_WIDTH_CHAR && $from.nodeAfter && $from.nodeAfter.attrs.isCustomSlot) {
+                        const begin = $from.pos - $from.nodeBefore.nodeSize;
+                        const end = $from.pos;
+                        let tr = state.tr.delete(begin, end);
+                        tr = tr.insertText(strings.ZERO_WIDTH_CHAR, begin, begin);
+                        dispatch(tr);
+                        event.preventDefault();
+                        return true;
+                    }
+                    if (beforeNode && beforeNode.attrs.isCustomSlot) {
+                        const parent = $from.parent;
+                        const index = $from.index();
+                        const initalStart = $from.pos - beforeNode.nodeSize;
+                        const intialEnd = $from.pos;
+                        let deleteStart = initalStart;
+                        let deleteEnd = intialEnd;
+                        if (index > 1) {
+                            const prevPrevNode = parent.child(index - 2);
+                            if (prevPrevNode && prevPrevNode.isText && prevPrevNode.text.endsWith(strings.ZERO_WIDTH_CHAR)) deleteStart -= 1;
+                        }
+                        if (afterNode && afterNode.isText && afterNode.text.startsWith(strings.ZERO_WIDTH_CHAR)) deleteEnd += 1;
+                        if (deleteStart !== initalStart || deleteEnd !== intialEnd) {
+                            const tr = state.tr.delete(deleteStart, deleteEnd);
+                            dispatch(tr);
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                    if (afterNode && afterNode.isText && afterNode.text === strings.ZERO_WIDTH_CHAR) {
+                        const index = $from.index();
+                        if (0 === index && 1 !== $from.pos) {
+                            const startPos = selection.from - 2;
+                            const tr = state.tr.delete(startPos, selection.to + 1);
+                            dispatch(tr);
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                    if (beforeNode && beforeNode.isText && beforeNode.text === strings.ZERO_WIDTH_CHAR) {
+                        const parent = $from.parent;
+                        const index = $from.index();
+                        if (index > 1) {
+                            const prevPrevNode = parent.child(index - 2);
+                            if (prevPrevNode.attrs.isCustomSlot) {
+                                const deleteStart = $from.pos - beforeNode.nodeSize - prevPrevNode.nodeSize;
+                                const tr = state.tr.delete(deleteStart, $from.pos);
+                                dispatch(tr);
+                                event.preventDefault();
+                                return true;
+                            }
+                        } else if (1 === index && 'inputSlot' !== node.type.name) {
+                            if (1 !== $from.pos) {
+                                const startPos = selection.from - 1 - 2;
+                                const tr = state.tr.delete(startPos, selection.to);
+                                dispatch(tr);
+                                event.preventDefault();
+                                return true;
+                            }
+                        }
+                    } else if ('inputSlot' === node.type.name && $from.pos === $from.start()) {
+                        const grandParent = $from.node($from.depth - 1);
+                        let parentPrevNode = null;
+                        const parentIndex = $from.index($from.depth - 1);
+                        if (parentIndex > 0) {
+                            parentPrevNode = grandParent.child(parentIndex - 1);
+                            if (parentPrevNode && parentPrevNode.isText && parentPrevNode.text.endsWith(strings.ZERO_WIDTH_CHAR)) {
+                                const pos = $from.pos - 2;
+                                dispatch(state.tr.setSelection(TextSelection.create(state.doc, pos)));
+                                event.preventDefault();
+                                return true;
+                            }
+                        }
+                        const pos = $from.pos - 1;
+                        let tr = state.tr.insertText(strings.ZERO_WIDTH_CHAR, pos, pos + 1);
+                        tr = tr.setSelection(TextSelection.create(tr.doc, pos));
+                        dispatch(tr);
+                        event.preventDefault();
+                        return true;
+                    }
+                }
+                if ('Backspace' === event.key && !selection.empty) {
+                    let startPos = selection.from;
+                    let endPos = selection.to;
+                    const nodeBefore = $from.nodeBefore;
+                    const nodeAfter = $from.nodeAfter;
+                    if (nodeBefore && nodeBefore.isText && nodeBefore.text?.endsWith(strings.ZERO_WIDTH_CHAR)) startPos -= 1;
+                    if (nodeAfter && nodeAfter.isText && nodeAfter.text?.startsWith(strings.ZERO_WIDTH_CHAR)) endPos += 1;
+                    if (startPos !== selection.from || endPos !== selection.to) {
+                        let tr = state.tr.delete(startPos, endPos);
+                        dispatch(tr);
+                        event.preventDefault();
+                        return true;
+                    }
+                }
+                if ('inputSlot' === node.type.name) {
+                    if (node.textContent === strings.ZERO_WIDTH_CHAR && ('ArrowLeft' === event.key || 'ArrowRight' === event.key)) {
+                        const pos = 'ArrowLeft' === event.key ? $from.before() : $from.after();
+                        if (selection.from - pos !== 1 && selection.from - pos !== -1) {
+                            dispatch(state.tr.setSelection(TextSelection.create(state.doc, pos)));
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                    if ($from.pos === $from.end() && 1 === node.textContent.length && node.textContent !== strings.ZERO_WIDTH_CHAR && 'Backspace' === event.key) {
+                        const pos = $from.pos - 1;
+                        dispatch(state.tr.insertText(strings.ZERO_WIDTH_CHAR, pos, pos + 1));
+                        event.preventDefault();
+                        return true;
+                    }
+                    if (!selection.empty && $from.parent === node && selection.from === $from.start() && selection.to >= $from.end() && 'Backspace' === event.key) {
+                        const tr = state.tr;
+                        if (selection.to > $from.end()) tr.delete($from.end(), selection.to);
+                        tr.insertText(strings.ZERO_WIDTH_CHAR, $from.start(), $from.end());
+                        const pos = $from.start() + 1;
+                        tr.setSelection(TextSelection.create(tr.doc, pos));
+                        dispatch(tr);
+                        event.preventDefault();
+                        return true;
+                    }
+                    if (node.textContent === strings.ZERO_WIDTH_CHAR && 'Backspace' === event.key) {
+                        const pos = $from.before();
+                        dispatch(state.tr.delete(pos, pos + node.nodeSize));
+                        event.preventDefault();
+                        return true;
+                    }
+                }
+                return false;
+            }
+        }
+    });
+}
+function handlePasteLogic(view, event) {
+    const types = event.clipboardData?.types || [];
+    const html = event.clipboardData?.getData('text/html');
+    if (types.includes('text/html') && [
+        '<input-slot',
+        '<select-slot',
+        '<skill-slot'
+    ].some((slot)=>html?.includes(slot)) || types.includes('application/x-prosemirror-slice')) return false;
+    const text = event.clipboardData?.getData('text/plain');
+    if (text) {
+        const { state, dispatch } = view;
+        const $from = state.selection.$from;
+        let tr = state.tr;
+        removeZeroWidthChar($from, tr);
+        const lines = text.split('\n');
+        let finalCursorPos = null;
+        if (1 === lines.length) {
+            tr = tr.insertText(lines[0], tr.selection.from, tr.selection.to);
+            finalCursorPos = tr.selection.$to.pos;
+        } else {
+            tr = tr.insertText(lines[0], tr.selection.from, tr.selection.to);
+            let pos = tr.selection.$to.pos;
+            for(let i = 1; i < lines.length; i++){
+                const paragraph = state.schema.nodes.paragraph.create({}, lines[i] ? state.schema.text(lines[i]) : null);
+                tr = tr.insert(pos, paragraph);
+                pos += paragraph.nodeSize;
+            }
+            finalCursorPos = pos;
+        }
+        if (null !== finalCursorPos) tr = tr.setSelection(TextSelection.create(tr.doc, finalCursorPos));
+        tr = tr.scrollIntoView();
+        dispatch(tr);
+        event.preventDefault();
+        return true;
+    }
+    return false;
+}
+function removeZeroWidthChar($from, tr) {
+    if ($from.nodeBefore && $from.nodeBefore.isText && $from.nodeBefore.text === strings.ZERO_WIDTH_CHAR) {
+        tr = tr.delete($from.pos - $from.nodeBefore.nodeSize, $from.pos);
+        return true;
+    }
+    if ($from.nodeAfter && $from.nodeAfter.isText && $from.nodeAfter.text === strings.ZERO_WIDTH_CHAR) {
+        tr = tr.delete($from.pos, $from.pos + $from.nodeAfter.nodeSize);
+        return true;
+    }
+    return false;
+}
+function removeZeroWidthCharForComposition($from, tr) {
+    if ($from.nodeBefore && $from.nodeBefore.isText) {
+        const text = $from.nodeBefore.text;
+        if (text?.startsWith(strings.ZERO_WIDTH_CHAR)) {
+            const removeStart = $from.pos - $from.nodeBefore.nodeSize;
+            const removeEnd = removeStart + 1;
+            tr = tr.delete(removeStart, removeEnd);
+            return tr;
+        }
+    }
+    return null;
+}
+function handleCompositionEndLogic(view) {
+    const { state, dispatch } = view;
+    const $from = state.selection.$from;
+    let tr = state.tr;
+    let modified = removeZeroWidthCharForComposition($from, tr);
+    if (modified) dispatch(tr);
+}
+function handleTextInputLogic(view, from, to, text) {
+    const { state, dispatch } = view;
+    const $from = state.selection.$from;
+    let tr = state.tr;
+    let modified = removeZeroWidthChar($from, tr);
+    if (modified) {
+        tr = tr.insertText(text, tr.selection.from, tr.selection.to);
+        dispatch(tr);
+        return true;
+    }
+    return false;
+}
+export { ensureTrailingText, handleCompositionEndLogic, handlePasteLogic, handleTextInputLogic, handleZeroWidthCharLogic, keyDownHandlePlugin, removeZeroWidthChar, removeZeroWidthCharForComposition };

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

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+declare const SkillSlot: Node<any, any>;
+export default SkillSlot;

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

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Tag } from "antd";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { styled } from "styled-components";
+import { getCustomSlotAttribute } from "../../utils.js";
+function SkillSlotComponent(props) {
+    const { node, editor } = props;
+    const value = node.attrs.label ?? node.attrs.value ?? '';
+    const onRemove = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        editor?.commands.clearContent();
+    };
+    if ('' === value) return null;
+    return /*#__PURE__*/ jsx(NodeViewWrapperStyled, {
+        children: /*#__PURE__*/ jsx(Tag, {
+            closable: true,
+            color: "blue",
+            onClose: onRemove,
+            children: value
+        })
+    });
+}
+const SkillSlot = Node.create({
+    name: 'skillSlot',
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: false,
+    addAttributes () {
+        return {
+            value: {
+                default: '',
+                parseHTML: (element)=>element.getAttribute('data-value'),
+                renderHTML: (attributes)=>({
+                        'data-value': attributes.value
+                    })
+            },
+            label: {
+                parseHTML: (element)=>element.getAttribute('data-label'),
+                renderHTML: (attributes)=>({
+                        'data-label': attributes.label
+                    })
+            },
+            hasTemplate: {
+                parseHTML: (element)=>element.getAttribute('data-template'),
+                renderHTML: (attributes)=>({
+                        'data-template': attributes.hasTemplate
+                    })
+            },
+            isCustomSlot: getCustomSlotAttribute()
+        };
+    },
+    parseHTML () {
+        return [
+            {
+                tag: 'skill-slot'
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes: htmlAttributes }) {
+        return [
+            'skill-slot',
+            mergeAttributes(htmlAttributes)
+        ];
+    },
+    addNodeView () {
+        return ReactNodeViewRenderer(SkillSlotComponent);
+    }
+});
+const skillSlot = SkillSlot;
+const NodeViewWrapperStyled = styled(NodeViewWrapper)`
+  display: inline-block;
+  margin: 2px;
+
+  .ant-tag {
+    margin: 0;
+    display: flex;
+  }
+`;
+export { skillSlot as default };

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

@@ -0,0 +1,2 @@
+export { EditorContent } from './editor';
+export type { EditorContentProps } from './editor';

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

@@ -0,0 +1,2 @@
+import { EditorContent } from "./editor.js";
+export { EditorContent };

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

@@ -0,0 +1,7 @@
+export declare function getCustomSlotAttribute(): {
+    default: boolean;
+    parseHTML: (element: any) => boolean;
+    renderHTML: (attributes: any) => {
+        'data-custom-slot': boolean | undefined;
+    };
+};

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

@@ -0,0 +1,10 @@
+function getCustomSlotAttribute() {
+    return {
+        default: true,
+        parseHTML: (element)=>true,
+        renderHTML: (attributes)=>({
+                'data-custom-slot': attributes.isCustomSlot ? true : void 0
+            })
+    };
+}
+export { getCustomSlotAttribute };

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

@@ -0,0 +1,5 @@
+export * from './Bubble';
+export * from './ChatSplitter';
+export * from './ChatDialog';
+export * from './EditorContent';
+export * from './ConversationList';

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

@@ -0,0 +1,5 @@
+export * from "./Bubble/index.js";
+export * from "./ChatSplitter/index.js";
+export * from "./ChatDialog/index.js";
+export * from "./EditorContent/index.js";
+export * from "./ConversationList/index.js";

package/dist/features/ChatClient/utils/parseSse.d.ts

@@ -1,5 +1,5 @@
 export type Callbacks<Event = string, Data = any> = {
-    onCompelet?: () => void;
+    onComplete?: () => void;
     onError?: (error: any) => void;
     onMessage?: (type: Event, data: Data) => void;
 };

package/dist/features/ChatClient/utils/parseSse.js

@@ -20,7 +20,7 @@ async function parseSubjectStream(stream, callbacks) {
                 }
             }
         }
-        callbacks.onCompelet?.();
+        callbacks.onComplete?.();
     } catch (error) {
         callbacks.onError?.(error);
     } finally{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",
@@ -67,6 +67,15 @@
     "mobx-react-lite": "~4.1.1",
     "rc-virtual-list": "~3.19.2",
     "react-draggable": "~4.5.0",
-    "markdown-it": "~14.1.0"
+    "markdown-it": "~14.1.0",
+    "@tiptap/react": "~3.10.7",
+    "@tiptap/extension-document": "~3.10.7",
+    "@tiptap/extension-text": "~3.10.7",
+    "@tiptap/extensions": "~3.10.7",
+    "@tiptap/extension-paragraph": "~3.10.7",
+    "@tiptap/extension-hard-break": "~3.10.7",
+    "@tiptap/core": "~3.10.7",
+    "@tiptap/pm": "~3.10.7",
+    "prosemirror-state": "~1.4.4"
   }
 }

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import react_draggable from "react-draggable";
 import { useMemo, useRef } from "react";
 import { useExtra } from "./useExtra.js";
 import { CardBody, CardExtra, CardHeader, CardTitle, Container } from "./styles.js";
-import react_draggable from "react-draggable";
 const ChatDialog = (props)=>{
     const { style, children, title, draggable = true } = props;
     const containerRef = useRef(null);