feat: playground rerank

2024-10-14 10:27:46 +08:00
parent ecc683a6bd
commit 4c3dddc486
31 changed files with 1579 additions and 140 deletions
@@ -0,0 +1,109 @@
+import RowTextarea from '@/components/seal-form/row-textarea';
+import {
+  MinusCircleOutlined,
+  PlusCircleOutlined,
+  PlusOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import React, { useRef } from 'react';
+import '../style/input-list.less';
+
+interface InputListProps {
+  textList: { text: string; uid: number | string; name: string }[];
+  onChange?: (
+    textList: { text: string; uid: number | string; name: string }[]
+  ) => void;
+}
+
+const InputList: React.FC<InputListProps> = ({ textList, onChange }) => {
+  const intl = useIntl();
+  const messageId = useRef(0);
+
+  const setMessageId = () => {
+    messageId.current = messageId.current + 1;
+  };
+
+  const handleAdd = () => {
+    setMessageId();
+    const dataList = [...textList];
+    dataList.push({
+      text: '',
+      uid: messageId.current,
+      name: `Text ${dataList.length + 1}`
+    });
+    onChange?.(dataList);
+  };
+
+  const handleDelete = (text: { text: string; uid: number | string }) => {
+    const dataList = [...textList];
+    const index = dataList.findIndex((item) => item.uid === text.uid);
+    dataList.splice(index, 1);
+    onChange?.(dataList);
+  };
+
+  const handleTextChange = (
+    value: string,
+    text: { text: string; uid: number | string }
+  ) => {
+    const dataList = [...textList];
+    const index = dataList.findIndex((item) => item.uid === text.uid);
+    dataList[index].text = value;
+    onChange?.(dataList);
+  };
+
+  return (
+    <div className="input-list">
+      {textList.length === 0 && (
+        <Button
+          block
+          onClick={handleAdd}
+          type="text"
+          style={{ backgroundColor: 'var(--ant-color-fill-secondary)' }}
+        >
+          <PlusOutlined />
+          Add Text
+        </Button>
+      )}
+      {textList.map((text, index) => {
+        return (
+          <div key={text.uid} className="input-item">
+            <div className="input-wrap">
+              <RowTextarea
+                label={`Text ${index + 1}`}
+                value={text.text}
+                onChange={(e) => handleTextChange(e.target.value, text)}
+              ></RowTextarea>
+            </div>
+            <span className="btn-group">
+              <Tooltip
+                title={intl.formatMessage({ id: 'common.button.delete' })}
+              >
+                <Button
+                  size="small"
+                  type="text"
+                  icon={<MinusCircleOutlined />}
+                  onClick={() => handleDelete(text)}
+                ></Button>
+              </Tooltip>
+              {index === textList.length - 1 && (
+                <Tooltip
+                  title={intl.formatMessage({ id: 'common.button.add' })}
+                >
+                  <Button
+                    size="small"
+                    type="text"
+                    icon={<PlusCircleOutlined />}
+                    onClick={handleAdd}
+                  ></Button>
+                </Tooltip>
+              )}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default React.memo(InputList);