70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import { MinusCircleOutlined } from '@ant-design/icons';
|
|
import { Button, Input } from 'antd';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { Roles } from '../config';
|
|
import '../style/message-item.less';
|
|
|
|
const MessageContent: React.FC<{
|
|
message: string;
|
|
role: string;
|
|
isFocus: boolean;
|
|
onDelete: () => void;
|
|
}> = ({ message, role, isFocus, onDelete }) => {
|
|
const [roleType, setRoleType] = useState(role);
|
|
const [messageContent, setMessageContent] = useState(message);
|
|
const inputRef = useRef<any>(null);
|
|
|
|
useEffect(() => {
|
|
if (inputRef.current && isFocus) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, [isFocus]);
|
|
|
|
const handleMessageChange = (e: any) => {
|
|
setMessageContent(e.target.value);
|
|
};
|
|
|
|
const handleRoleChange = () => {
|
|
if (roleType === Roles.User) {
|
|
setRoleType(Roles.Assistant);
|
|
}
|
|
if (roleType === Roles.Assistant) {
|
|
setRoleType(Roles.User);
|
|
}
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
onDelete();
|
|
};
|
|
return (
|
|
<div className="message-item">
|
|
<div className="role-type">
|
|
<Button onClick={handleRoleChange} type="text">
|
|
{roleType}
|
|
</Button>
|
|
</div>
|
|
<div className="message-content-input">
|
|
<Input.TextArea
|
|
ref={inputRef}
|
|
style={{ paddingBlock: '12px' }}
|
|
value={messageContent}
|
|
autoSize={true}
|
|
variant="filled"
|
|
onChange={handleMessageChange}
|
|
></Input.TextArea>
|
|
</div>
|
|
<div className="delete-btn">
|
|
<Button
|
|
type="text"
|
|
shape="circle"
|
|
style={{ color: 'var(--ant-color-primary' }}
|
|
onClick={handleDelete}
|
|
icon={<MinusCircleOutlined />}
|
|
></Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MessageContent;
|