listpage-next 0.0.176 → 0.0.177

package/dist/demos/demo8.js

@@ -1,52 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { ChatPage, ClientContent } from "../features/ChatClient/index.js";
+import { ChatInput } 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: 'xxxx'
-            },
-            {
-                role: 'assistant',
-                content: 'xxxx'
-            }
-        ]
-};
+import { Select } from "antd";
 const Demo8 = ()=>/*#__PURE__*/ jsx("div", {
         style: {
-            width: 1000
+            height: 200,
+            background: 'transparent'
         },
-        children: /*#__PURE__*/ jsx(ChatPage, {
-            request: request,
-            render: {
-                renderMessage (message) {
-                    return /*#__PURE__*/ jsx("div", {
-                        children: message.info.content
-                    });
+        children: /*#__PURE__*/ jsx(ChatInput, {
+            onSubmit: console.log,
+            skills: [
+                {
+                    label: '生成回复建议',
+                    value: '我是一个<input-slot placeholder="[职业]">程序员</input-slot>'
                 }
-            },
-            action: {
-                onClickConversation: void 0,
-                onClickNewConversation: void 0,
-                onRenameConversation: void 0,
-                onDeleteConversation: void 0
-            },
-            children: /*#__PURE__*/ jsx(ClientContent, {
-                style: {
-                    height: '100%'
-                },
-                title: "搜索海量信息，生成研究报告"
-            })
+            ],
+            actions: [
+                /*#__PURE__*/ jsx(Select, {
+                    style: {
+                        width: 130
+                    },
+                    options: [
+                        {
+                            label: 'DeepSeek V3',
+                            value: 'DeepSeek V3'
+                        },
+                        {
+                            label: 'DeepSeek R1',
+                            value: 'DeepSeek R1'
+                        }
+                    ]
+                }, "model")
+            ]
         })
     });
 export { Demo8 };

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

@@ -3,12 +3,10 @@
  */
 import { ChatBubbleListProps } from './BubbleList';
 import { ChatSenderProps } from '../ChatSender';
-import { ReactNode } from 'react';
 export interface ClientContentBodyProps {
     senderProps?: ChatSenderProps;
     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

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

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

@@ -6,8 +6,6 @@ export interface ClientContentProps {
     className?: string;
     extra?: ReactNode;
     title?: string;
-    header?: ReactNode;
-    sender?: ReactNode;
     onTitleChange?: (title: string) => void;
     onClickNewConversation?: () => void;
     loading?: boolean;

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

@@ -7,19 +7,18 @@ import { ClientContentHeader } from "./ClientContentHeader.js";
 import { MessageProvider, useChatClientContext } from "../../context/index.js";
 import { PageLoading } from "../../../../components/PageLayout/index.js";
 const ClientContentComponent = (props)=>{
-    const { extra, style, header, sender, className, title, onTitleChange, onClickNewConversation, senderProps, bubbleProps } = props;
+    const { extra, style, className, title, onTitleChange, onClickNewConversation, senderProps, bubbleProps } = props;
     return /*#__PURE__*/ jsxs(Container, {
         style: style,
         className: className,
         children: [
-            void 0 === header ? /*#__PURE__*/ jsx(ClientContentHeader, {
+            /*#__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/ChatGuidance/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 export interface ChatGuidanceProps {
     onSubmit?: (value: string) => void;
     greetingText?: string;

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { PureChatSender } from "../ChatSender/index.js";
 import { ChatGuidanceContainer, ChatGuidanceContent, GreetingText, SenderContainer } from "./styles.js";
 import { ClientContentHeader } from "../ChatContent/ClientContentHeader.js";
+import { ChatInput } from "../../ui/index.js";
 const ChatGuidance = (props)=>{
     const { greetingText, extra, style, placeholder, offset, onSubmit } = props;
     return /*#__PURE__*/ jsxs(ChatGuidanceContainer, {
@@ -16,7 +16,7 @@ const ChatGuidance = (props)=>{
                         /*#__PURE__*/ jsx(GreetingText, {
                             children: greetingText
                         }),
-                        /*#__PURE__*/ jsx(PureChatSender, {
+                        /*#__PURE__*/ jsx(ChatInput, {
                             extra: extra,
                             placeholder: placeholder,
                             onSubmit: onSubmit

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

@@ -1,43 +1,43 @@
 import { Tag } from "antd";
 import styled_components from "styled-components";
 const GreetingText = styled_components.div`
-    font-size: 32px;
-    margin-bottom: 32px;
-    min-height: 45px;
+  font-size: 32px;
+  margin-bottom: 32px;
+  min-height: 45px;
 
-    font-family: Montserrat;
-    position: relative;
+  font-family: Montserrat;
+  position: relative;
 
-    color: #000000d9;
-    font-weight: 600;
+  color: #000000d9;
+  font-weight: 600;
 
-    margin-bottom: 32px;
-    text-align: center;
+  margin-bottom: 32px;
+  text-align: center;
 `;
 const SkillTag = styled_components(Tag)`
-    color: #0057ff;
-    margin-right: 4px;
-    padding: 2px 8px;
-    font-weight: 600;
-    line-height: 150%;
+  color: #0057ff;
+  margin-right: 4px;
+  padding: 2px 8px;
+  font-weight: 600;
+  line-height: 150%;
 
-    cursor: pointer;
+  cursor: pointer;
 `;
 const ChatGuidanceContainer = styled_components.div`
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 `;
 const SenderContainer = styled_components.div`
-    position: relative;
-    bottom: ${(props)=>props.offset || "10%"};
+  position: relative;
+  bottom: ${(props)=>props.offset || '10%'};
 `;
 const ChatGuidanceContent = styled_components.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 `;
 export { ChatGuidanceContainer, ChatGuidanceContent, GreetingText, SenderContainer, SkillTag };

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

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { BaseMessageInfo, ChatActionEvent, ChatRender, ChatRequest } from "../../context";
+import { ReactNode } from 'react';
+import { BaseMessageInfo, ChatActionEvent, ChatRender, ChatRequest } from '../../context';
 export interface ChatPageProps<SessionData = any, MessageInfo extends BaseMessageInfo = any> {
     logo?: string;
     title?: string;

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

@@ -34,19 +34,19 @@ const Sider = (props)=>{
     });
 };
 const SiderContainer = styled.div`
-    width: 280px;
-    background: #f3f4f6;
-    border-right: .5px solid #00000014;
+  width: 280px;
+  background: #f3f4f6;
+  border-right: 0.5px solid #00000014;
 
-    transition: width 0.2s ease-in-out;
-    position: relative;
-    overflow: hidden;
+  transition: width 0.2s ease-in-out;
+  position: relative;
+  overflow: hidden;
 
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
 
-    padding: 0 12px;
-    box-sizing: border-box;
+  padding: 0 12px;
+  box-sizing: border-box;
 `;
 export { Sider };

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

@@ -3,11 +3,5 @@ export interface ChatSenderProps {
     placeholder?: string;
     style?: React.CSSProperties;
     className?: string;
-    mode?: 'input' | 'textarea';
 }
 export declare const ChatSender: (props: ChatSenderProps) => import("react/jsx-runtime").JSX.Element;
-export interface PureChatSenderProps extends ChatSenderProps {
-    loading?: boolean;
-    onSubmit?: (message: string) => void;
-}
-export declare const PureChatSender: (props: PureChatSenderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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 { jsx } from "react/jsx-runtime";
+import { ChatInput } from "../../ui/index.js";
 import { useChatClientContext, useMessageContext } from "../../context/index.js";
-import { ChatInputBottom, ChatInputContent, ChatInputPanel, MiniChatInputContent, MiniChatInputPanel } from "./styles.js";
 const ChatSender = (props)=>{
     const { isRequesting, sendMessage } = useMessageContext();
     const { bubbleListRef } = useChatClientContext();
-    const handleClick = async (inputValue)=>{
+    const onSubmit = async (inputValue)=>{
         if (isRequesting) return;
         sendMessage({
             role: 'user',
@@ -18,84 +14,10 @@ const ChatSender = (props)=>{
         });
         bubbleListRef.current?.scrollToBottom('instant');
     };
-    return /*#__PURE__*/ jsx(PureChatSender, {
+    return /*#__PURE__*/ jsx(ChatInput, {
         loading: isRequesting,
-        onSubmit: handleClick,
+        onSubmit: onSubmit,
         ...props
     });
 };
-const PureChatSender = (props)=>{
-    const { style, className, placeholder, extra, loading, onSubmit, mode = 'textarea' } = props;
-    const ref = useRef(null);
-    const [inputValue, setInputValue] = useState('');
-    const handleClick = async ()=>{
-        onSubmit?.(inputValue);
-        setInputValue('');
-        ref.current?.commands.clearContent();
-    };
-    const handleKeyDown = (e)=>{
-        if ('Enter' === e.key && !e.shiftKey) {
-            e.preventDefault();
-            if (!loading && inputValue) handleClick();
-        }
-    };
-    if ('input' === mode) return /*#__PURE__*/ jsxs(MiniChatInputPanel, {
-        style: style,
-        className: className,
-        children: [
-            /*#__PURE__*/ jsx(MiniChatInputContent, {
-                children: /*#__PURE__*/ jsx(Input.TextArea, {
-                    placeholder: placeholder,
-                    value: inputValue,
-                    onChange: (e)=>setInputValue?.(e.target.value),
-                    onKeyDown: handleKeyDown
-                })
-            }),
-            /*#__PURE__*/ jsx(Button, {
-                disabled: !inputValue && !loading,
-                loading: loading,
-                shape: "circle",
-                icon: loading ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(ArrowUpOutlined, {}),
-                type: "primary",
-                variant: "filled",
-                onKeyDown: handleKeyDown,
-                onClick: handleClick
-            })
-        ]
-    });
-    return /*#__PURE__*/ jsxs(ChatInputPanel, {
-        style: style,
-        className: className,
-        children: [
-            /*#__PURE__*/ jsx(ChatInputContent, {
-                children: /*#__PURE__*/ jsx(EditorContent, {
-                    placeholder: placeholder,
-                    editorRef: ref,
-                    onChange: (content)=>setInputValue(content),
-                    onKeyDown: (e)=>handleKeyDown(e)
-                })
-            }),
-            /*#__PURE__*/ jsxs(ChatInputBottom, {
-                children: [
-                    extra,
-                    extra && /*#__PURE__*/ jsx(Divider, {
-                        variant: "solid",
-                        size: "large",
-                        type: "vertical"
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        disabled: !inputValue && !loading,
-                        loading: loading,
-                        shape: "circle",
-                        icon: loading ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(ArrowUpOutlined, {}),
-                        type: "primary",
-                        variant: "filled",
-                        onKeyDown: handleKeyDown,
-                        onClick: handleClick
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { ChatSender, PureChatSender };
+export { ChatSender };

package/dist/features/ChatClient/ui/ChatInput/hooks/useTrigger.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from '@tiptap/core';
+import type { KeyboardEvent } from 'react';
+export interface TriggerOptions {
+    skills?: {
+        label: string;
+        value: string;
+    }[];
+    editor: Editor | null;
+}
+export declare function useTrigger(options: TriggerOptions): {
+    menu: import("antd").MenuProps & {
+        activeKey?: string | undefined;
+    };
+    open: boolean;
+    onOpenChange: (open: boolean, info: {
+        source: "trigger" | "menu";
+    }) => void;
+    placement: "bottom";
+    interceptKeyDown: (e: KeyboardEvent) => boolean | undefined;
+};

package/dist/features/ChatClient/ui/ChatInput/hooks/useTrigger.js

@@ -0,0 +1,45 @@
+import { useState } from "react";
+function useTrigger(options) {
+    const [open, setOpen] = useState(false);
+    const { skills = [], editor } = options;
+    const menu = {
+        title: '技能',
+        items: [
+            {
+                key: 'title',
+                label: '常用技能',
+                disabled: true
+            },
+            ...skills.map((item)=>({
+                    label: item.label,
+                    key: item.value,
+                    onClick: ()=>{
+                        editor?.commands.setContent(item.value);
+                    }
+                }))
+        ]
+    };
+    const onOpenChange = (open, info)=>{
+        setOpen(false);
+    };
+    const interceptKeyDown = (e)=>{
+        const inputValue = editor?.getText() || '';
+        if (inputValue.length || !skills.length) return;
+        if ('@' === e.key) {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+            return true;
+        }
+        return false;
+    };
+    const placement = 'bottom';
+    return {
+        menu,
+        open: Boolean(skills.length) && open,
+        onOpenChange,
+        placement,
+        interceptKeyDown
+    };
+}
+export { useTrigger };

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

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ChatInputProps {
+    loading?: boolean;
+    onSubmit?: (message: string) => void;
+    skills?: any[];
+    style?: CSSProperties;
+    className?: string;
+    placeholder?: string;
+    extra?: ReactNode;
+    actions?: ReactNode;
+}
+export declare const ChatInput: (props: ChatInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button, Divider, Dropdown } from "antd";
+import { ArrowUpOutlined, PauseCircleTwoTone } from "@ant-design/icons";
+import { EditorContent } from "../EditorContent/index.js";
+import { ChatInputBottom, ChatInputContent, ChatInputPanel } from "./styles.js";
+import { useTrigger } from "./hooks/useTrigger.js";
+const ChatInput = (props)=>{
+    const { style, className, placeholder, extra, actions, loading, onSubmit, skills = [] } = props;
+    const ref = useRef(null);
+    const [inputValue, setInputValue] = useState('');
+    const { interceptKeyDown, ...triggerProps } = useTrigger({
+        skills,
+        editor: ref.current
+    });
+    const handleClickSend = async ()=>{
+        onSubmit?.(inputValue);
+        setInputValue('');
+        ref.current?.commands.clearContent();
+    };
+    const handleKeyDown = (e)=>{
+        if (interceptKeyDown(e)) return;
+        if ('Enter' === e.key && !e.shiftKey) {
+            e.preventDefault();
+            if (!loading && inputValue) handleClickSend();
+        }
+    };
+    return /*#__PURE__*/ jsx(Dropdown, {
+        ...triggerProps,
+        children: /*#__PURE__*/ jsxs(ChatInputPanel, {
+            style: style,
+            className: className,
+            children: [
+                /*#__PURE__*/ jsx(ChatInputContent, {
+                    children: /*#__PURE__*/ jsx(EditorContent, {
+                        placeholder: placeholder,
+                        editorRef: ref,
+                        onChange: (content)=>setInputValue(content),
+                        onKeyDown: (e)=>handleKeyDown(e)
+                    })
+                }),
+                /*#__PURE__*/ jsxs(ChatInputBottom, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            children: actions
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            children: [
+                                extra,
+                                extra && /*#__PURE__*/ jsx(Divider, {
+                                    variant: "solid",
+                                    size: "large",
+                                    type: "vertical"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    type: "primary",
+                                    shape: "circle",
+                                    variant: "filled",
+                                    loading: loading,
+                                    onClick: handleClickSend,
+                                    onKeyDown: handleKeyDown,
+                                    disabled: !inputValue && !loading,
+                                    icon: loading ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(ArrowUpOutlined, {})
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { ChatInput };

package/dist/features/ChatClient/{components/ChatSender → ui/ChatInput}/styles.d.ts

@@ -1,5 +1,3 @@
 export declare const ChatInputPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const MiniChatInputPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const MiniChatInputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChatInputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChatInputBottom: 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/ChatInput/styles.js

@@ -0,0 +1,50 @@
+import { styled } from "styled-components";
+const ChatInputPanel = styled.div`
+  position: relative;
+  max-height: 300px;
+  min-height: 120px;
+  padding: 12px;
+  border-radius: 20px;
+  border: 1px solid rgb(107, 164, 238);
+  box-shadow: 0 0 20px 0 #c8efff80;
+  display: flex;
+  flex-direction: column;
+
+  width: 800px;
+`;
+const ChatInputContent = styled.div`
+  outline: none;
+  border: none;
+  flex-grow: 1;
+  max-height: 220px;
+  flex-shrink: 1;
+  overflow: auto;
+  &:focus-visible {
+    outline: none;
+  }
+
+  .ant-input {
+    border: none;
+    outline: none;
+    &:hover {
+      border: none;
+      outline: none;
+      box-shadow: none;
+    }
+    min-height: 60px;
+    max-height: 220px;
+    resize: none;
+    font-size: 16px;
+
+    background-color: transparent;
+    box-shadow: none;
+  }
+`;
+const ChatInputBottom = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-shrink: 0;
+`;
+export { ChatInputBottom, ChatInputContent, ChatInputPanel };

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

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

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

@@ -92,6 +92,34 @@ const EditorContentStyled = styled_components(EditorContent)`
     p {
       margin: 2px 0;
     }
+    .node-inputSlot {
+      display: inline-block;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .input-slot-placeholder {
+      user-select: none;
+      position: absolute;
+      top: 2px;
+      left: 4px;
+      pointer-events: none;
+      white-space: pre;
+      z-index: 1;
+      color: #98cdfd;
+    }
+    .input-slot-content {
+      color: #0064fa;
+    }
+    .input-slot {
+      display: inline-block;
+      background-color: #eaf5ff;
+      border-radius: 4px;
+      padding: 2px 4px;
+      position: relative;
+      margin: 2px;
+      font-weight: 600;
+      min-width: 2px;
+    }
   }
 `;
 export { editor_EditorContent as EditorContent };

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
 import { useLayoutEffect, useRef, useState } from "react";
 import { strings } from "../../constants.js";
+import { styled } from "styled-components";
 const component = (props)=>{
     const isEmpty = props.node.textContent === strings.ZERO_WIDTH_CHAR;
     const placeholder = props.node.attrs.placeholder || '';
@@ -36,9 +37,19 @@ const component = (props)=>{
             }),
             /*#__PURE__*/ jsx(NodeViewContent, {
                 as: "div",
-                className: "content"
+                className: "input-slot-content"
             })
         ]
     });
 };
+styled.span``;
+styled(NodeViewWrapper)`
+  display: inline-block;
+  margin: 2px;
+
+  .ant-tag {
+    margin: 0;
+    display: flex;
+  }
+`;
 export { component as default };

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

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

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

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

package/package.json

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

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

@@ -1,88 +0,0 @@
-import { styled } from "styled-components";
-const ChatInputPanel = styled.div`
-    position: relative;
-    max-height: 300px;
-    min-height: 120px;
-    padding: 12px;
-    border-radius: 20px;
-    border: 1px solid rgb(107, 164, 238);
-    box-shadow: 0 0 20px 0 #c8efff80;
-    display: flex;
-    flex-direction: column;
-
-    width: 800px;
-`;
-const MiniChatInputPanel = styled.div`
-    background-color: #eee;
-    display: flex;
-    border-radius: 20px;
-    height: 48px;
-    padding: 8px 16px;
-    box-sizing: border-box;
-    width: 100%;
-`;
-const MiniChatInputContent = styled.div`
-    outline: none;
-    border: none;
-    flex-grow: 1;
-    max-height: 220px;
-    flex-shrink: 1;
-    overflow: auto;
-    &:focus-visible {
-        outline: none;
-    }
-    .ant-input {
-        border: none;
-        outline: none;
-        &:hover {
-            border: none;
-            outline: none;
-            box-shadow: none;
-        }
-        min-height: 32px;
-        max-height: 32px;
-        line-height: 32px;
-        resize: none;
-        font-size: 16px;
-        padding: 0;
-
-        background-color: transparent;
-        box-shadow: none;
-    }
-`;
-const ChatInputContent = styled.div`
-    outline: none;
-    border: none;
-    flex-grow: 1;
-    max-height: 220px;
-    flex-shrink: 1;
-    overflow: auto;
-    &:focus-visible {
-        outline: none;
-    }
-
-    .ant-input {
-        border: none;
-        outline: none;
-        &:hover {
-            border: none;
-            outline: none;
-            box-shadow: none;
-        }
-        min-height: 60px;
-        max-height: 220px;
-        resize: none;
-        font-size: 16px;
-
-        background-color: transparent;
-        box-shadow: none;
-    }
-`;
-const ChatInputBottom = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    flex-shrink: 0;
-`;
-export { ChatInputBottom, ChatInputContent, ChatInputPanel, MiniChatInputContent, MiniChatInputPanel };