74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { cn } from '@heroui/react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { mjChatCls } from '@/utils/cls';
|
|
|
|
export type MessageEditAreaProps = {
|
|
isUser: boolean;
|
|
editedMessage: string;
|
|
onEditChange: (content: string) => void;
|
|
onEditAreaShow: () => void;
|
|
};
|
|
|
|
export const MessageEditArea = ({
|
|
isUser,
|
|
editedMessage,
|
|
onEditChange,
|
|
onEditAreaShow,
|
|
}: MessageEditAreaProps) => {
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const [wrapHeight, setWrapHeight] = useState(0);
|
|
|
|
// biome-ignore lint/correctness/useExhaustiveDependencies: useMount
|
|
useEffect(() => {
|
|
const t = textareaRef.current;
|
|
if (t) {
|
|
const parent = t.parentElement;
|
|
|
|
t.style.height = 'auto';
|
|
t.style.height = t.scrollHeight + 'px';
|
|
if (parent) {
|
|
parent.style.height = t?.scrollHeight + 'px';
|
|
}
|
|
|
|
t.focus();
|
|
// 光标移到最后
|
|
const length = t.value.length;
|
|
t.setSelectionRange(length, length);
|
|
onEditAreaShow();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={mjChatCls(
|
|
['msg-edit-textarea-wrapper'],
|
|
'w-full max-h-[70vh] overflow-auto rounded-xl border-2 border-white/30',
|
|
)}
|
|
style={{
|
|
height: wrapHeight,
|
|
}}
|
|
>
|
|
<textarea
|
|
ref={textareaRef}
|
|
className={mjChatCls(
|
|
[
|
|
'msg-edit-textarea',
|
|
isUser ? 'msg-edit-textarea-user' : 'msg-edit-textarea-assistant',
|
|
],
|
|
cn(
|
|
'w-full outline-none resize-none h-fit overflow-hidden p-4 bg-background rounded-xl text-[16px]',
|
|
isUser ? 'rounded-br-sm' : 'rounded-bl-sm',
|
|
),
|
|
)}
|
|
value={editedMessage}
|
|
onChange={(e) => {
|
|
onEditChange(e.target.value);
|
|
e.target.style.height = '5px';
|
|
e.target.style.height = `${e.target.scrollHeight}px`;
|
|
setWrapHeight(e.target.scrollHeight);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|