feat: add description text to operators and extract the useFetchModelId to logicHooks.ts and drag the operator to the canvas and initialize the form data #918 (#1379)

### What problem does this PR solve?

feat: add description text to operators #918 
feat: drag the operator to the canvas and initialize the form data #918
feat: extract the useFetchModelId to logicHooks.ts
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/flow-sider/index.tsx

@@ -1,6 +1,7 @@
-import { Card, Flex, Layout, Space, Typography } from 'antd';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Card, Flex, Layout, Space, Tooltip } from 'antd';
 import classNames from 'classnames';
-
+import lowerFirst from 'lodash/lowerFirst';
 import { componentMenuList } from '../constant';
 import { useHandleDrag } from '../hooks';
 import OperatorIcon from '../operator-icon';
@@ -8,8 +9,6 @@ import styles from './index.less';
 
 const { Sider } = Layout;
 
-const { Text } = Typography;
-
 interface IProps {
   setCollapsed: (width: boolean) => void;
   collapsed: boolean;
@@ -17,6 +16,7 @@ interface IProps {
 
 const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
   const { handleDragStart } = useHandleDrag();
+  const { t } = useTranslate('flow');
 
   return (
     <Sider
@@ -40,13 +40,9 @@ const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
                 <Space size={15}>
                   <OperatorIcon name={x.name}></OperatorIcon>
                   <section>
-                    <b>{x.name}</b>
-                    <Text
-                      ellipsis={{ tooltip: x.description }}
-                      style={{ width: 130 }}
-                    >
-                      {x.description}
-                    </Text>
+                    <Tooltip title={t(`${lowerFirst(x.name)}Description`)}>
+                      <b>{x.name}</b>
+                    </Tooltip>
                   </section>
                 </Space>
               </Flex>