dify-conversation/app/components/chat-with-history/FeedbackModal.tsx

import React, { useState } from 'react';
import { Modal, Checkbox, Input, message } from 'antd';
import { useTranslation } from 'react-i18next'

const { TextArea } = Input;

interface FeedbackModalProps {
  open: boolean;
  onOk: (selectedOption: number | null, feedbackText: string) => Promise<void>;
  onCancel: () => void;
}

const FeedbackModal: React.FC<FeedbackModalProps> = ({ open, onOk, onCancel }) => {
  const [selectedOption, setSelectedOption] = useState<number | null>(null);
  const [feedbackText, setFeedbackText] = useState<string>('');
  const { t } = useTranslation()
  const [confirmLoading, setConfirmLoading] = useState(false);

  const handleOk = async () => {
    if (!feedbackText) {
      message.warning('请填写反馈建议');
      return;
    }
    setConfirmLoading(true)
    try {
      await onOk(selectedOption, feedbackText);
    } finally {
      setConfirmLoading(false)
    }

  };

  return (
    <Modal
      title="反馈"
      open={open}
      onOk={handleOk}
      onCancel={onCancel}
      okText={`${t('common.operation.confirm')}`}
      cancelText={`${t('common.operation.cancel')}`}
      confirmLoading={confirmLoading}
    >
      {/* <div>
        <Checkbox
          checked={selectedOption === 0}
          onChange={() => setSelectedOption(0)}
        >
          新增
        </Checkbox>
        <Checkbox
          checked={selectedOption === 1}
          onChange={() => setSelectedOption(1)}
        >
          修改
        </Checkbox>
      </div> */}
      <TextArea
        rows={4}
        placeholder="请输入您的反馈建议"
        value={feedbackText}
        onChange={(e) => setFeedbackText(e.target.value)}
      />
    </Modal>
  );
};

export default FeedbackModal;