@lobehub/ui/es/chat/MessageModal/MessageModal.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 Button_default from "../../Button/Button.mjs";
import CodeEditor_default from "../../CodeEditor/CodeEditor.mjs";
import { useTranslation } from "../../i18n/useTranslation.mjs";
import TextArea_default from "../../Input/TextArea.mjs";
import Modal_default from "../../Modal/Modal.mjs";
import Markdown_default from "../../Markdown/Markdown.mjs";
import { styles } from "../MessageInput/style.mjs";
import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
import { memo, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useResponsive } from "antd-style";
import useMergeState from "use-merge-value";

//#region src/chat/MessageModal/MessageModal.tsx
const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenChange, onEditingChange, placeholder, value, language = "markdown", onChange, text, footer, extra }) => {
	const { mobile } = useResponsive();
	const { t } = useTranslation(messageModal_default);
	const [isEdit, setTyping] = useMergeState(false, {
		onChange: onEditingChange,
		value: editing
	});
	const [showModal, setShowModal] = useMergeState(false, {
		onChange: onOpenChange,
		value: open
	});
	const [temporaryValue, setMessage] = useState(value);
	const confirmText = text?.confirm ?? t("messageModal.confirm");
	const cancelText = text?.cancel ?? t("messageModal.cancel");
	const editText = text?.edit ?? t("messageModal.edit");
	return /* @__PURE__ */ jsx(Modal_default, {
		allowFullscreen: true,
		cancelText,
		destroyOnHidden: true,
		footer: isEdit ? /* @__PURE__ */ jsxs(FlexBasic_default, {
			direction: "horizontal-reverse",
			gap: 8,
			children: [/* @__PURE__ */ jsx(Button_default, {
				onClick: () => {
					setTyping(false);
					onChange?.(temporaryValue);
					setMessage(value);
				},
				type: "primary",
				children: confirmText
			}), /* @__PURE__ */ jsx(Button_default, {
				onClick: () => {
					setTyping(false);
					setMessage(value);
				},
				children: cancelText
			})]
		}) : footer,
		height,
		okText: editText,
		onCancel: () => {
			setShowModal(false);
			setTyping(false);
			setMessage(value);
		},
		onOk: () => setTyping(true),
		open: showModal,
		panelRef,
		title: text?.title,
		children: isEdit ? mobile ? /* @__PURE__ */ jsx(TextArea_default, {
			autoSize: true,
			className: styles,
			defaultValue: temporaryValue,
			onBlur: (e) => setMessage(e.target.value),
			onChange: (value$1) => setMessage(value$1.target.value),
			placeholder,
			value: temporaryValue,
			variant: "borderless"
		}) : /* @__PURE__ */ jsx(CodeEditor_default, {
			className: styles,
			defaultValue: temporaryValue,
			language,
			onBlur: (e) => setMessage(e.target.value),
			onValueChange: (value$1) => setMessage(value$1),
			placeholder,
			value: temporaryValue,
			variant: "borderless"
		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [extra, /* @__PURE__ */ jsx(Markdown_default, {
			variant: "chat",
			children: String(value || placeholder)
		})] })
	});
});
MessageModal.displayName = "MessageModal";
var MessageModal_default = MessageModal;

//#endregion
export { MessageModal_default as default };
//# sourceMappingURL=MessageModal.mjs.map