PVS-CHAT/pages/construct/flow/index.tsx

import { ChatContext } from '@/app/chat-context';
import { addFlow, apiInterceptors, deleteFlowById, getFlows, newDialogue } from '@/client/api';
import MyEmpty from '@/components/common/MyEmpty';
import BlurredCard, { ChatButton, InnerDropdown } from '@/new-components/common/blurredCard';
import ConstructLayout from '@/new-components/layout/Construct';
import { IFlow, IFlowUpdateParam } from '@/types/flow';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Avatar, Button, Checkbox, Form, Input, Modal, Pagination, Popconfirm, Spin, Tag, message } from 'antd';
import { t } from 'i18next';
import moment from 'moment';
import { useRouter } from 'next/router';
import qs from 'querystring';
import { useContext, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

function Flow() {
  const router = useRouter();
  const { model } = useContext(ChatContext);
  const [messageApi] = message.useMessage();
  const [form] = Form.useForm<Pick<IFlow, 'label' | 'name'>>();

  const [flowList, setFlowList] = useState<Array<IFlow>>([]);
  const copyFlowTemp = useRef<IFlow>();
  const [showModal, setShowModal] = useState(false);
  const [deploy, setDeploy] = useState(false);
  const [editable, setEditable] = useState(false);

  const totalRef = useRef<{
    current_page: number;
    total_count: number;
    total_page: number;
  }>();

  const scrollRef = useRef<HTMLDivElement>(null);

  // get flow list
  const { run: getFlowListRun, loading } = useRequest(
    async (params: any) =>
      await apiInterceptors(
        getFlows({
          page: 1,
          page_size: 12,
          ...params,
        }),
      ),
    {
      cacheKey: 'query-flow-list',
      onSuccess: data => {
        const [, res] = data;
        // setFlowList((prev) => concat([...prev], res?.items || []));
        setFlowList(res?.items || []);
        totalRef.current = {
          current_page: res?.page || 1,
          total_count: res?.total_count || 0,
          total_page: res?.total_pages || 0,
        };
      },
      throttleWait: 300,
    },
  );

  const { i18n } = useTranslation();

  // 触底加载更多
  // const loadMoreData = useCallback(() => {
  //   const current = totalRef.current;
  //   if (!current) {
  //     return;
  //   }
  //   if (current.current_page < current.total_page) {
  //     getFlowListRun({
  //       page: current.current_page + 1,
  //     });
  //     current.current_page = current.current_page + 1;
  //   }
  // }, [getFlowListRun]);

  // // 滚动事件
  // const handleScroll = debounce((e: Event) => {
  //   const target = e.target as HTMLDivElement;
  //   if (target.scrollHeight - target.scrollTop <= target.clientHeight + 200) {
  //     loadMoreData();
  //   }
  // }, 200);

  // useEffect(() => {
  //   if (loading) {
  //     return;
  //   }
  //   const currentScrollRef = scrollRef.current;
  //   if (currentScrollRef) {
  //     currentScrollRef?.addEventListener('scroll', handleScroll);
  //     if (currentScrollRef.scrollHeight === currentScrollRef.clientHeight) {
  //       loadMoreData();
  //     }
  //   }
  //   return () => {
  //     if (currentScrollRef) {
  //       currentScrollRef?.removeEventListener('scroll', handleScroll);
  //     }
  //   };
  // }, [loading, handleScroll, loadMoreData]);

  const handleChat = async (flow: IFlow) => {
    const [, res] = await apiInterceptors(newDialogue({ chat_mode: 'chat_agent' }));
    if (res) {
      const queryStr = qs.stringify({
        scene: 'chat_flow',
        id: res.conv_uid,
        model: model,
        select_param: flow.uid,
      });
      router.push(`/chat?${queryStr}`);
    }
  };

  async function deleteFlow(flow: IFlow) {
    const [, , res] = await apiInterceptors(deleteFlowById(flow.uid));
    if (res?.success) {
      setFlowList(flows => flows.filter(_flow => _flow.uid !== flow.uid));
    }
  }

  const handleCopy = (flow: IFlow) => {
    copyFlowTemp.current = flow;
    form.setFieldValue('label', `${flow.label} Copy`);
    form.setFieldValue('name', `${flow.name}_copy`);
    setEditable(true);
    setShowModal(true);
  };

  const onFinish = async (val: { name: string; label: string }) => {
    if (!copyFlowTemp.current) return;
    const { source, uid, dag_id, gmt_created, gmt_modified, state, ...params } = copyFlowTemp.current;
    const data: IFlowUpdateParam = {
      ...params,
      editable,
      state: deploy ? 'deployed' : 'developing',
      ...val,
    };
    const [err] = await apiInterceptors(addFlow(data));
    if (!err) {
      messageApi.success(t('save_flow_success'));
      setShowModal(false);
      getFlowListRun({});
    }
  };

  return (
    <ConstructLayout>
      <Spin spinning={loading}>
        <div className='relative h-screen bg-[#fff] pt-0 w-full p-4 overflow-y-auto' ref={scrollRef} >
          <div className='mt-2 rounded-[10px] flex h-16 justify-between  items-center '>
            <Input
              variant='filled'
              prefix={<SearchOutlined />}
              placeholder={t('please_enter_the_keywords')}
              allowClear
              className='w-[400px] h-[40px] 
              border-1 border-[#f1f1f1]
              backdrop-filter 
              backdrop-blur-lg 
              dark:border-[#6f7f95] 
              dark:bg-[#6f7f95] 
              dark:bg-opacity-60'
            />
            <span className='flex gap-2 items-center'>
              <Avatar className='bg-gradient-to-tr from-[#31afff] to-[#1677ff] cursor-pointer'>

              </Avatar>
              <span
              >
                admin
              </span>
            </span>
          </div>
          <div className='flex items-center gap-4 justify-between'>
            <span></span>
            <Button
              className='border-none text-white bg-button-gradient'
              onClick={() => {
                router.push('/construct/flow/canvas');
              }}
            >
              创建工作流
            </Button>
          </div>
          <div className='rounded-[10px] flex flex-col h-full mt-4  relative bg-slate-200 p-4 border-1 mb-2'>
            {flowList.map(flow => (
              <BlurredCard
                description={flow.description}
                name={flow.name}
                key={flow.uid}
                logo='/pictures/flow.png'
                onClick={() => {
                  router.push('/construct/flow/canvas?id=' + flow.uid);
                }}
                RightTop={
                  <InnerDropdown
                    menu={{
                      items: [
                        {
                          key: 'copy',
                          label: (
                            <span
                              onClick={() => {
                                handleCopy(flow);
                              }}
                            >
                              {t('Copy_Btn')}
                            </span>
                          ),
                        },
                        {
                          key: 'del',
                          label: (
                            <Popconfirm title='Are you sure to delete this flow?' onConfirm={() => deleteFlow(flow)}>
                              <span className='text-red-400'>{t('Delete_Btn')}</span>
                            </Popconfirm>
                          ),
                        },
                      ],
                    }}
                  />
                }
                rightTopHover={false}
                Tags={
                  <div>
                    <Tag color={flow.source === 'DBGPT-WEB' ? 'green' : 'blue'}>{flow.source}</Tag>
                    <Tag color={flow.editable ? 'green' : 'gray'}>{flow.editable ? 'Editable' : 'Can not Edit'}</Tag>
                    <Tag color={flow.state === 'load_failed' ? 'red' : flow.state === 'running' ? 'green' : 'blue'}>
                      {flow.state}
                    </Tag>
                  </div>
                }
                LeftBottom={
                  <div key={i18n.language + 'flow'} className='flex gap-2'>
                    <span>{flow?.nick_name}</span>
                    <span>•</span>
                    {flow?.gmt_modified && <span>{moment(flow?.gmt_modified).fromNow() + ' ' + t('update')}</span>}
                  </div>
                }
                RightBottom={
                  <ChatButton
                    onClick={() => {
                      handleChat(flow);
                    }}
                    text={t('start_chat')}
                  />
                }
              />
            ))}
            {flowList.length === 0 && <MyEmpty description='No flow found' />}
            <div className='w-full flex justify-end shrink-0 pb-12'>
              <Pagination
                total={totalRef.current?.total_count || 0}
                pageSize={12}
                current={totalRef.current?.current_page}
                onChange={async (page, page_size) => {
                  await getFlowListRun({ page, page_size });
                }}
              />
            </div>
          </div>
        </div>
      </Spin>

      <Modal
        open={showModal}
        destroyOnClose
        title='Copy AWEL Flow'
        onCancel={() => {
          setShowModal(false);
        }}
        footer={false}
      >
        <Form form={form} onFinish={onFinish} className='mt-6'>
          <Form.Item name='name' label='Name' rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name='label' label='Label' rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label='editable'>
            <Checkbox
              value={editable}
              checked={editable}
              onChange={e => {
                const val = e.target.checked;
                setEditable(val);
              }}
            />
          </Form.Item>
          <Form.Item label='deploy'>
            <Checkbox
              value={deploy}
              checked={deploy}
              onChange={e => {
                const val = e.target.checked;
                setDeploy(val);
              }}
            />
          </Form.Item>
          <div className='flex justify-end'>
            <Button type='primary' htmlType='submit'>
              {t('Submit')}
            </Button>
          </div>
        </Form>
      </Modal>
    </ConstructLayout>
  );
}

export default Flow;