@lobehub/ui/es/chat/MessageInput/MessageInput.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import { KeyMapEnum } from "../../Hotkey/const.mjs";
import { combineKeys } from "../../Hotkey/utils.mjs";
import Tooltip_default from "../../Tooltip/Tooltip.mjs";
import Button_default from "../../Button/Button.mjs";
import CodeEditor_default from "../../CodeEditor/CodeEditor.mjs";
import TextArea_default from "../../Input/TextArea.mjs";
import { styles } from "./style.mjs";
import { memo, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { cx, useResponsive } from "antd-style";
import { useHotkeys } from "react-hotkeys-hook";

//#region src/chat/MessageInput/MessageInput.tsx
const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValue, onConfirm, renderButtons, placeholder, styles: customStyles, style, editButtonSize = "middle", classNames, shortcut, language = "markdown", ...rest }) => {
	const { mobile } = useResponsive();
	const [temporaryValue, setValue] = useState(defaultValue || "");
	const confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);
	const confirmText = text?.confirm || "Confirm";
	const cancelHotkey = combineKeys([KeyMapEnum.Esc]);
	const cancelText = text?.cancel || "Cancel";
	const handleConfirm = () => onConfirm?.(temporaryValue);
	const handleCancel = () => onCancel?.();
	useHotkeys(confirmHotkey, handleConfirm, {
		enableOnFormTags: true,
		enabled: shortcut,
		preventDefault: true
	});
	const confirmButton = /* @__PURE__ */ jsx(Button_default, {
		onClick: handleConfirm,
		size: editButtonSize,
		type: "primary",
		children: confirmText
	});
	const cancllButton = /* @__PURE__ */ jsx(Button_default, {
		onClick: handleCancel,
		size: editButtonSize,
		variant: "filled",
		children: text?.cancel || "Cancel"
	});
	return /* @__PURE__ */ jsxs(FlexBasic_default, {
		gap: 16,
		style: {
			flex: 1,
			width: "100%",
			...style
		},
		...rest,
		children: [mobile ? /* @__PURE__ */ jsx(TextArea_default, {
			autoSize: true,
			className: cx(styles, classNames?.editor),
			onBlur: (e) => setValue(e.target.value),
			onChange: (e) => setValue(e.target.value),
			placeholder,
			style: customStyles?.editor,
			value: temporaryValue,
			variant
		}) : /* @__PURE__ */ jsx(CodeEditor_default, {
			className: cx(styles, classNames?.editor),
			classNames,
			language,
			onBlur: (e) => setValue(e.target.value),
			onValueChange: (e) => setValue(e),
			placeholder,
			style: customStyles?.editor,
			styles: customStyles,
			value: temporaryValue,
			variant
		}), /* @__PURE__ */ jsx(FlexBasic_default, {
			direction: "horizontal-reverse",
			gap: 8,
			children: renderButtons ? renderButtons(temporaryValue).map((buttonProps, index) => /* @__PURE__ */ jsx(Button_default, {
				size: editButtonSize,
				...buttonProps
			}, index)) : /* @__PURE__ */ jsxs(Fragment$1, { children: [shortcut ? /* @__PURE__ */ jsx(Tooltip_default, {
				hotkey: confirmHotkey,
				title: confirmText,
				children: confirmButton
			}) : confirmButton, shortcut ? /* @__PURE__ */ jsx(Tooltip_default, {
				hotkey: cancelHotkey,
				title: cancelText,
				children: cancllButton
			}) : cancllButton] })
		})]
	});
});
var MessageInput_default = MessageInput;

//#endregion
export { MessageInput_default as default };
//# sourceMappingURL=MessageInput.mjs.map