DB-GPT/web/pages/mobile/chat/components/DislikeDrawer.tsx

import { Button, Drawer, Input, Tag } from 'antd';
import React, { useState } from 'react';

interface Tags {
  reason: string;
  reason_type: string;
}
const DislikeDrawer: React.FC<{
  open: boolean;
  setFeedbackOpen: React.Dispatch<React.SetStateAction<boolean>>;
  list: Tags[];
  feedback: (params: { feedback_type: string; reason_types?: string[] | undefined; remark?: string | undefined }) => void;
  loading: boolean;
}> = ({ open, setFeedbackOpen, list, feedback, loading }) => {
  const [selectedTags, setSelectedTags] = useState<Tags[]>([]);
  const [remark, setRemark] = useState<string>('');

  return (
    <Drawer title="你的反馈助我进步" placement="bottom" open={open} onClose={() => setFeedbackOpen(false)} destroyOnClose={true} height={'auto'}>
      <div className="flex flex-col w-full gap-4">
        <div className="flex w-full flex-wrap gap-2">
          {list?.map((item) => {
            const isSelect = selectedTags.findIndex((tag) => tag.reason_type === item.reason_type) > -1;
            return (
              <Tag
                key={item.reason_type}
                className={`text-sm text-[#525964] p-1 px-2 rounded-md cursor-pointer ${isSelect ? 'border-[#0c75fc] text-[#0c75fc]' : ''}`}
                onClick={() => {
                  setSelectedTags((preArr: Tags[]) => {
                    const index = preArr.findIndex((tag) => tag.reason_type === item.reason_type);
                    if (index > -1) {
                      return [...preArr.slice(0, index), ...preArr.slice(index + 1)];
                    }
                    return [...preArr, item];
                  });
                }}
              >
                {item.reason}
              </Tag>
            );
          })}
        </div>
        <Input.TextArea
          placeholder="描述一下具体问题或更优的答案"
          className="h-24 resize-none mb-2"
          value={remark}
          onChange={(e) => setRemark(e.target.value.trim())}
        />
        <div className="flex gap-2 justify-end">
          <Button
            className="w-16 h-8"
            onClick={() => {
              setFeedbackOpen(false);
            }}
          >
            取消
          </Button>
          <Button
            type="primary"
            className="min-w-16 h-8"
            onClick={async () => {
              const reason_types = selectedTags.map((item) => item.reason_type);
              await feedback?.({
                feedback_type: 'unlike',
                reason_types,
                remark,
              });
            }}
            loading={loading}
          >
            确认
          </Button>
        </div>
      </div>
    </Drawer>
  );
};

export default DislikeDrawer;