@lobehub/editor 4.15.0 → 4.15.2

package/es/plugins/toolbar/utils/getDOMRangeRect.js

@@ -0,0 +1,20 @@
+//#region src/plugins/toolbar/utils/getDOMRangeRect.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+function getDOMRangeRect(nativeSelection, rootElement) {
+	const domRange = nativeSelection.getRangeAt(0);
+	let rect;
+	if (nativeSelection.anchorNode === rootElement) {
+		let inner = rootElement;
+		while (inner.firstElementChild !== null) inner = inner.firstElementChild;
+		rect = inner.getBoundingClientRect();
+	} else rect = domRange.getBoundingClientRect();
+	return rect;
+}
+//#endregion
+export { getDOMRangeRect };

package/es/plugins/toolbar/utils/setFloatingElemPosition.js

@@ -0,0 +1,50 @@
+//#region src/plugins/toolbar/utils/setFloatingElemPosition.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const VERTICAL_GAP = 4;
+const HORIZONTAL_OFFSET = 0;
+function getScrollParent(element) {
+	let parent = element.parentElement;
+	while (parent) {
+		const { overflow, overflowY, overflowX } = window.getComputedStyle(parent);
+		if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+function setFloatingElemPosition(targetRect, floatingElem, anchorElem, isLink = false, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+	const scrollerElem = getScrollParent(anchorElem);
+	if (targetRect === null || !scrollerElem) {
+		floatingElem.style.opacity = "0";
+		floatingElem.style.transform = "translate(-10000px, -10000px)";
+		return;
+	}
+	const floatingElemRect = floatingElem.getBoundingClientRect();
+	const anchorElementRect = anchorElem.getBoundingClientRect();
+	const editorScrollerRect = scrollerElem.getBoundingClientRect();
+	let top = targetRect.top - floatingElemRect.height - verticalGap;
+	let left = targetRect.left - horizontalOffset;
+	const selection = window.getSelection();
+	if (selection && selection.rangeCount > 0) {
+		const textNode = selection.getRangeAt(0).startContainer;
+		if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
+			const textElement = textNode.nodeType === Node.ELEMENT_NODE ? textNode : textNode.parentElement;
+			const textAlign = window.getComputedStyle(textElement).textAlign;
+			if (textAlign === "right" || textAlign === "end") left = targetRect.right - floatingElemRect.width + horizontalOffset;
+		}
+	}
+	if (top < editorScrollerRect.top) top += floatingElemRect.height + targetRect.height + verticalGap * (isLink ? 9 : 2);
+	if (left + floatingElemRect.width > editorScrollerRect.right) left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+	if (left < editorScrollerRect.left) left = editorScrollerRect.left + horizontalOffset;
+	top -= anchorElementRect.top + 12;
+	left -= anchorElementRect.left;
+	floatingElem.style.opacity = "1";
+	floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+//#endregion
+export { setFloatingElemPosition };

package/es/plugins/upload/index.d.ts

@@ -0,0 +1,2 @@
+import { UploadPlugin, UploadPluginOptions } from "./plugin/index.js";
+import { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM } from "./service/i-upload-service.js";

package/es/plugins/upload/plugin/index.d.ts

@@ -0,0 +1,6 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/upload/plugin/index.d.ts
+interface UploadPluginOptions {}
+declare const UploadPlugin: IEditorPluginConstructor<UploadPluginOptions>;
+//#endregion
+export { UploadPlugin, UploadPluginOptions };

package/es/plugins/upload/plugin/index.js

@@ -0,0 +1,47 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { IUploadService, UploadService } from "../service/i-upload-service.js";
+import { getDragSelection } from "../utils/index.js";
+import { COMMAND_PRIORITY_HIGH, DROP_COMMAND } from "lexical";
+import { DRAG_DROP_PASTE } from "@lexical/rich-text";
+//#region src/plugins/upload/plugin/index.ts
+init_plugin();
+init_debug();
+const UploadPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "UploadPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.logger = createDebugLogger("plugin", "upload");
+		kernel.registerService(IUploadService, new UploadService());
+	}
+	onInit(editor) {
+		this.register(editor.registerCommand(DROP_COMMAND, (event) => {
+			const dataTransfer = event.dataTransfer;
+			if (dataTransfer && dataTransfer.files.length > 0) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				const file = dataTransfer.files[0];
+				const uploadService = this.kernel.requireService(IUploadService);
+				if (uploadService) uploadService.uploadFile(file, "drop", getDragSelection(event)).catch((error) => {
+					this.logger.error("Upload failed:", error);
+				});
+			}
+			return true;
+		}, COMMAND_PRIORITY_HIGH));
+		this.register(editor.registerCommand(DRAG_DROP_PASTE, (files) => {
+			for (const file of files) {
+				const uploadService = this.kernel.requireService(IUploadService);
+				if (uploadService) uploadService.uploadFile(file, "drag-drop-paste", null).catch((error) => {
+					this.logger.error("Upload failed:", error);
+				});
+			}
+			return true;
+		}, COMMAND_PRIORITY_HIGH));
+	}
+};
+//#endregion
+export { UploadPlugin };

package/es/plugins/upload/service/i-upload-service.d.ts

@@ -0,0 +1,13 @@
+import { IServiceID } from "../../../types/kernel.js";
+//#region src/plugins/upload/service/i-upload-service.d.ts
+declare const UPLOAD_PRIORITY_LOW = 2;
+declare const UPLOAD_PRIORITY_MEDIUM = 1;
+declare const UPLOAD_PRIORITY_HIGH = 0;
+type UPLOAD_PRIORITY = typeof UPLOAD_PRIORITY_LOW | typeof UPLOAD_PRIORITY_MEDIUM | typeof UPLOAD_PRIORITY_HIGH;
+interface IUploadService {
+  registerUpload(handler: (file: File, from: string, range: Range | null | undefined) => Promise<boolean | null>, priority?: UPLOAD_PRIORITY): void;
+  uploadFile(file: File, from: string, range: Range | null | undefined): Promise<boolean>;
+}
+declare const IUploadService: IServiceID<IUploadService>;
+//#endregion
+export { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM };

package/es/plugins/upload/service/i-upload-service.js

@@ -0,0 +1,30 @@
+import { genServiceId } from "../../../editor-kernel/utils.js";
+//#region src/plugins/upload/service/i-upload-service.ts
+const UPLOAD_PRIORITY_LOW = 2;
+const UPLOAD_PRIORITY_MEDIUM = 1;
+const UPLOAD_PRIORITY_HIGH = 0;
+const IUploadService = genServiceId("UploadService");
+var UploadService = class {
+	constructor() {
+		this.uploadHandlers = [
+			[],
+			[],
+			[]
+		];
+	}
+	registerUpload(handler, priority = 2) {
+		this.uploadHandlers[priority].push(handler);
+	}
+	async uploadFile(file, from, range) {
+		for (const uploadHandlers of this.uploadHandlers) {
+			if (uploadHandlers.length === 0) continue;
+			for (const handler of uploadHandlers) {
+				const result = await handler(file, from, range);
+				if (result) return result;
+			}
+		}
+		throw new Error("No upload handler registered for this file type: " + file.type);
+	}
+};
+//#endregion
+export { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM, UploadService };

package/es/plugins/upload/utils/index.js

@@ -0,0 +1,15 @@
+import { getDOMSelectionFromTarget } from "lexical";
+//#region src/plugins/upload/utils/index.ts
+function getDragSelection(event) {
+	if (typeof document === "undefined") return null;
+	let range;
+	const domSelection = getDOMSelectionFromTarget(event.target);
+	if (document.caretRangeFromPoint) range = document.caretRangeFromPoint(event.clientX, event.clientY);
+	else if (event.rangeParent && domSelection !== null) {
+		domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+		range = domSelection.getRangeAt(0);
+	} else throw new Error(`Cannot get the selection when dragging`);
+	return range;
+}
+//#endregion
+export { getDragSelection };

package/es/plugins/virtual-block/index.d.ts

@@ -0,0 +1,2 @@
+import { VirtualBlockPlugin, VirtualBlockPluginOptions } from "./plugin/index.js";
+import { ReactVirtualBlockPlugin } from "./react/ReactVirtualBlock.js";

package/es/plugins/virtual-block/plugin/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/virtual-block/plugin/index.d.ts
+interface VirtualBlockPluginOptions {
+  theme?: string;
+}
+declare const VirtualBlockPlugin: IEditorPluginConstructor<VirtualBlockPluginOptions>;
+//#endregion
+export { VirtualBlockPlugin, VirtualBlockPluginOptions };

package/es/plugins/virtual-block/plugin/index.js

@@ -0,0 +1,19 @@
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { registerRichKeydown } from "./register.js";
+//#region src/plugins/virtual-block/plugin/index.ts
+init_plugin();
+const VirtualBlockPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "VirtualBlockPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		kernel.registerThemes({ virtualBlock: config?.theme || "" });
+	}
+	onInit(editor) {
+		this.register(registerRichKeydown(editor, this.kernel));
+	}
+};
+//#endregion
+export { VirtualBlockPlugin };

package/es/plugins/virtual-block/plugin/register.js

@@ -0,0 +1,150 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { $closest } from "../../../editor-kernel/utils.js";
+import { SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "../../codemirror-block/command/index.js";
+import { $createParagraphNode, $getNodeByKey, $getRoot, $getSelection, $isDecoratorNode, $isNodeSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, COMMAND_PRIORITY_NORMAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, ParagraphNode } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+import "@lexical/code-core";
+//#region src/plugins/virtual-block/plugin/register.ts
+init_debug();
+const logger = createDebugLogger("plugin", "virtual-block");
+function toRootElement(node) {
+	let currentNode = node;
+	let parent = currentNode.getParent();
+	while (parent !== null && !$isRootOrShadowRoot(parent)) {
+		currentNode = parent;
+		parent = currentNode.getParent();
+	}
+	return currentNode;
+}
+function $isEmptyNode(node) {
+	if (node.getChildrenSize() === 0) return true;
+	for (const child of node.getChildren()) if ($isTextNode(child)) {
+		if (child.getTextContent().trim().length > 0) return false;
+	} else if (!$isEmptyNode(child)) return false;
+	return true;
+}
+function registerRichKeydown(editor, kernel) {
+	let needRemoveOnFocusNode = null;
+	return mergeRegister(editor.registerUpdateListener((payload) => {
+		const { mutatedNodes } = payload;
+		if (needRemoveOnFocusNode) {
+			if (mutatedNodes?.get(ParagraphNode)?.get(needRemoveOnFocusNode.getKey()) === "destroyed") {
+				console.info("Virtual block node was removed externally", needRemoveOnFocusNode);
+				needRemoveOnFocusNode = null;
+				return;
+			}
+			editor.update(() => {
+				try {
+					const selection = $getSelection();
+					if ($isRangeSelection(selection)) {
+						const focusNode = selection.focus.getNode();
+						if (needRemoveOnFocusNode && !$closest(focusNode, (node) => node === needRemoveOnFocusNode)) {
+							if ($isEmptyNode(needRemoveOnFocusNode)) {
+								logger.info("Removing virtual block node after focus moved away", needRemoveOnFocusNode);
+								needRemoveOnFocusNode?.remove();
+								needRemoveOnFocusNode = null;
+							} else needRemoveOnFocusNode = null;
+							return;
+						}
+					} else if ($isNodeSelection(selection) && needRemoveOnFocusNode) {
+						if ($isEmptyNode(needRemoveOnFocusNode)) {
+							needRemoveOnFocusNode?.remove();
+							needRemoveOnFocusNode = null;
+						} else needRemoveOnFocusNode = null;
+						return;
+					}
+				} catch (error) {
+					console.error("Error during virtual block cleanup", error);
+				}
+			});
+		}
+	}), kernel.registerHighCommand(KEY_ARROW_UP_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (event.shiftKey) return false;
+		if ($isNodeSelection(selection)) {
+			const nodes = selection.getNodes();
+			if (nodes.length > 0) {
+				const elementNode = toRootElement(nodes[0]);
+				event.preventDefault();
+				const p = $createParagraphNode();
+				needRemoveOnFocusNode = p;
+				elementNode.insertBefore(p);
+				p.selectEnd();
+				return true;
+			}
+		} else if ($isRangeSelection(selection)) {
+			const possibleNode = toRootElement(selection.focus.getNode());
+			if (possibleNode === needRemoveOnFocusNode || $isEmptyNode(possibleNode)) return false;
+			if ($getRoot().getFirstChild() === possibleNode) {
+				event.preventDefault();
+				const p = $createParagraphNode();
+				possibleNode.insertBefore(p);
+				needRemoveOnFocusNode = p;
+				p.selectStart();
+				return true;
+			} else if ($isDecoratorNode(possibleNode.getPreviousSibling())) {
+				event.preventDefault();
+				const p = $createParagraphNode();
+				possibleNode.insertBefore(p);
+				needRemoveOnFocusNode = p;
+				p.selectStart();
+				return true;
+			}
+		}
+		return false;
+	}, COMMAND_PRIORITY_NORMAL), kernel.registerHighCommand(KEY_ARROW_DOWN_COMMAND, (event) => {
+		const selection = $getSelection();
+		if ($isNodeSelection(selection)) {
+			const nodes = selection.getNodes();
+			if (nodes.length > 0) {
+				const node = nodes[0];
+				const blockNode = toRootElement(node);
+				event.preventDefault();
+				const p = $createParagraphNode();
+				needRemoveOnFocusNode = p;
+				blockNode.insertAfter(p);
+				p.selectStart();
+				return true;
+			}
+		} else if ($isRangeSelection(selection)) {
+			if (!selection.isCollapsed()) return false;
+			const possibleNode = toRootElement(selection.focus.getNode());
+			if (possibleNode === needRemoveOnFocusNode || $isEmptyNode(possibleNode)) return false;
+			if ($getRoot().getLastChild() === possibleNode) {
+				event.preventDefault();
+				const p = $createParagraphNode();
+				possibleNode.insertAfter(p);
+				needRemoveOnFocusNode = p;
+				p.selectStart();
+			}
+			return true;
+		}
+		return false;
+	}, COMMAND_PRIORITY_NORMAL), editor.registerCommand(SELECT_BEFORE_CODEMIRROR_COMMAND, (payload) => {
+		editor.update(() => {
+			const node = $getNodeByKey(payload.key);
+			if (!node) return;
+			const p = $createParagraphNode();
+			needRemoveOnFocusNode = p;
+			node.insertBefore(p);
+			p.selectEnd();
+			editor.focus();
+			return true;
+		});
+		return true;
+	}, COMMAND_PRIORITY_NORMAL), editor.registerCommand(SELECT_AFTER_CODEMIRROR_COMMAND, (payload) => {
+		editor.update(() => {
+			const node = $getNodeByKey(payload.key);
+			if (!node) return;
+			const p = $createParagraphNode();
+			needRemoveOnFocusNode = p;
+			node.insertAfter(p);
+			p.selectEnd();
+			editor.focus();
+			return true;
+		});
+		return true;
+	}, COMMAND_PRIORITY_NORMAL));
+}
+//#endregion
+export { registerRichKeydown };

package/es/plugins/virtual-block/react/ReactVirtualBlock.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+
+//#region src/plugins/virtual-block/react/ReactVirtualBlock.d.ts
+declare const ReactVirtualBlockPlugin: FC;
+//#endregion
+export { ReactVirtualBlockPlugin };

package/es/plugins/virtual-block/react/ReactVirtualBlock.js

@@ -0,0 +1,15 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { VirtualBlockPlugin } from "../plugin/index.js";
+import { useLayoutEffect } from "react";
+//#region src/plugins/virtual-block/react/ReactVirtualBlock.tsx
+const ReactVirtualBlockPlugin = () => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(VirtualBlockPlugin);
+	}, []);
+	return null;
+};
+ReactVirtualBlockPlugin.displayName = "ReactVirtualBlockPlugin";
+//#endregion
+export { ReactVirtualBlockPlugin as default };

package/es/plugins/virtual-block/react/index.d.ts

@@ -0,0 +1 @@
+import { ReactVirtualBlockPlugin } from "./ReactVirtualBlock.js";

package/es/react/ChatInput/ChatInput.d.ts

@@ -0,0 +1,7 @@
+import { ChatInputProps } from "./type.js";
+import { FC } from "react";
+
+//#region src/react/ChatInput/ChatInput.d.ts
+declare const ChatInput: FC<ChatInputProps>;
+//#endregion
+export { ChatInput };

package/es/react/ChatInput/ChatInput.js

@@ -0,0 +1,91 @@
+"use client";
+import { useHeight } from "../hooks/useSize.js";
+import { styles } from "./style.js";
+import { Flexbox } from "@lobehub/ui";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { Resizable } from "re-resizable";
+import useMergeState from "use-merge-value";
+//#region src/react/ChatInput/ChatInput.tsx
+const ChatInput = (props) => {
+	const { defaultHeight = props.defaultHeight || props.minHeight || 64, height, maxHeight = 320, minHeight = 64, resizeMaxHeightOffset = 120, resize = true, onSizeChange, onSizeDragging, className, children, footer, header, style, slashMenuRef, classNames, fullscreen, showResizeHandle, onBodyClick, styles: customStyles, ...rest } = props;
+	const { isDarkMode } = useThemeMode();
+	const { ref: headerRef, height: headerHeight = 0 } = useHeight();
+	const [currentHeight, setCurrentHeight] = useMergeState(defaultHeight, {
+		defaultValue: defaultHeight,
+		onChange: onSizeChange,
+		value: height
+	});
+	const handleResizeStop = useCallback((e, direction, ref) => {
+		setCurrentHeight(ref.style.height ? parseInt(ref.style.height) : defaultHeight);
+	}, [setCurrentHeight, defaultHeight]);
+	const handleResize = useCallback((e, direction, ref) => {
+		const newHeight = ref.style.height ? parseInt(ref.style.height) : defaultHeight;
+		onSizeDragging?.(newHeight);
+	}, [onSizeDragging, defaultHeight]);
+	const bodyNode = /* @__PURE__ */ jsx("div", {
+		className: cx(styles.editor, styles.bodyEditor, classNames?.body),
+		draggable: false,
+		onClick: onBodyClick,
+		style: {
+			...customStyles?.body,
+			maxHeight: fullscreen ? "100%" : maxHeight,
+			minHeight: resize ? currentHeight : minHeight
+		},
+		children
+	});
+	return /* @__PURE__ */ jsxs(Flexbox, {
+		className: cx(isDarkMode ? styles.containerDark : styles.containerLight, styles.root, className),
+		height: fullscreen ? "100%" : void 0,
+		style,
+		width: "100%",
+		...rest,
+		children: [
+			slashMenuRef && /* @__PURE__ */ jsx("div", { ref: slashMenuRef }),
+			/* @__PURE__ */ jsx("div", {
+				className: cx(styles.header, classNames?.header),
+				ref: headerRef,
+				style: customStyles?.header,
+				children: header
+			}),
+			resize ? /* @__PURE__ */ jsx(Resizable, {
+				className: styles.resizableContainer,
+				enable: fullscreen ? false : { top: true },
+				handleClasses: { top: showResizeHandle ? styles.resizeHandle : void 0 },
+				handleStyles: { top: {
+					backgroundColor: "transparent",
+					borderRadius: "4px",
+					cursor: "ns-resize",
+					height: "8px",
+					left: "50%",
+					top: !!header ? -3 - headerHeight : -3,
+					transform: "translateX(-50%)",
+					width: "100%"
+				} },
+				maxHeight: fullscreen ? void 0 : maxHeight + resizeMaxHeightOffset,
+				minHeight: fullscreen ? void 0 : minHeight,
+				onResize: handleResize,
+				onResizeStop: handleResizeStop,
+				size: {
+					height: fullscreen ? void 0 : "auto",
+					width: "100%"
+				},
+				style: fullscreen ? {
+					flex: 1,
+					overflow: "hidden",
+					position: "relative"
+				} : void 0,
+				children: bodyNode
+			}) : bodyNode,
+			/* @__PURE__ */ jsx("div", {
+				className: cx(styles.footer, classNames?.footer),
+				style: customStyles?.footer,
+				children: footer
+			})
+		]
+	});
+};
+ChatInput.displayName = "ChatInput";
+//#endregion
+export { ChatInput as default };

package/es/react/ChatInput/index.d.ts

@@ -0,0 +1,2 @@
+import { ChatInputProps } from "./type.js";
+import { ChatInput } from "./ChatInput.js";

package/es/react/ChatInput/style.js

@@ -0,0 +1,115 @@
+import { createStaticStyles } from "antd-style";
+//#region src/react/ChatInput/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	bodyEditor: css`
+    z-index: 0;
+    flex: 1;
+  `,
+	containerDark: css`
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    border: 1px solid ${cssVar.colorFillSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background-color: ${cssVar.colorBgElevated};
+    box-shadow: 0 4px 4px color-mix(in srgb, #000 40%, transparent);
+  `,
+	containerLight: css`
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    border: 1px solid ${cssVar.colorFill};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background-color: ${cssVar.colorBgElevated};
+    box-shadow: 0 4px 4px color-mix(in srgb, #000 4%, transparent);
+  `,
+	editor: css`
+    cursor: text;
+
+    overflow: hidden auto;
+    flex: 1;
+
+    width: 100%;
+    padding-block: 8px 0;
+    padding-inline: 12px;
+  `,
+	footer: css`
+    z-index: 1;
+    width: 100%;
+  `,
+	header: css`
+    z-index: 1;
+    width: 100%;
+  `,
+	resizableContainer: css`
+    position: relative;
+
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-self: flex-end;
+
+    width: 100%;
+
+    &:hover .resize-handle {
+      opacity: 1;
+    }
+  `,
+	resizeHandle: css`
+    position: absolute;
+    inset-block-start: -4px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    width: 100%;
+    height: 8px;
+
+    opacity: 0;
+
+    transition: opacity 0.2s ease-in-out;
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+
+      width: 32px;
+      height: 4px;
+      border-radius: 4px;
+
+      background-color: ${cssVar.colorPrimary};
+      box-shadow: 0 1px 2px color-mix(in srgb, ${cssVar.colorTextSecondary} 12.5%, transparent);
+    }
+
+    &:hover {
+      opacity: 1 !important;
+
+      &::before {
+        background-color: ${cssVar.colorPrimaryHover};
+        box-shadow: 0 2px 4px color-mix(in srgb, ${cssVar.colorTextSecondary} 25%, transparent);
+      }
+    }
+
+    &:active {
+      &::before {
+        background-color: ${cssVar.colorPrimaryActive};
+      }
+    }
+  `,
+	root: css`
+    position: relative;
+  `
+}));
+//#endregion
+export { styles };

package/es/react/ChatInput/type.d.ts

@@ -0,0 +1,32 @@
+import { FlexboxProps } from "@lobehub/ui";
+import { CSSProperties, ReactNode, Ref } from "react";
+
+//#region src/react/ChatInput/type.d.ts
+interface ChatInputProps extends Omit<FlexboxProps, 'height'> {
+  classNames?: {
+    body?: string;
+    footer?: string;
+    header?: string;
+  };
+  defaultHeight?: number;
+  footer?: ReactNode;
+  fullscreen?: boolean;
+  header?: ReactNode;
+  height?: number;
+  maxHeight?: number;
+  minHeight?: number;
+  onBodyClick?: FlexboxProps['onClick'];
+  onSizeChange?: (height: number) => void;
+  onSizeDragging?: (height: number) => void;
+  resize?: boolean;
+  resizeMaxHeightOffset?: number;
+  showResizeHandle?: boolean;
+  slashMenuRef?: Ref<HTMLDivElement>;
+  styles?: {
+    body?: CSSProperties;
+    footer?: CSSProperties;
+    header?: CSSProperties;
+  };
+}
+//#endregion
+export { ChatInputProps };

package/es/react/ChatInputActionBar/ChatInputActionBar.d.ts

@@ -0,0 +1,7 @@
+import { ChatInputActionBarProps } from "./type.js";
+import { FC } from "react";
+
+//#region src/react/ChatInputActionBar/ChatInputActionBar.d.ts
+declare const ChatInputActionBar: FC<ChatInputActionBarProps>;
+//#endregion
+export { ChatInputActionBar };