feat: add CreateFlowModal #918 (#1343)

### What problem does this PR solve?

feat: add CreateFlowModal #918

### Type of change


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

web/src/hooks/flow-hooks.ts

@@ -1,11 +1,12 @@
-import { DSL, IFlow } from '@/interfaces/database/flow';
+import { ResponseType } from '@/interfaces/database/base';
+import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
 import i18n from '@/locales/config';
 import flowService from '@/services/flow-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { message } from 'antd';
 import { useParams } from 'umi';
 
-export const useFetchFlowTemplates = () => {
+export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
   const { data } = useQuery({
     queryKey: ['fetchFlowTemplates'],
     initialData: [],

web/src/hooks/logicHooks.ts

@@ -244,3 +244,28 @@ export const useHandleMessageInputChange = () => {
 };
 
 // #endregion
+
+/**
+ *
+ * @param defaultId
+ * used to switch between different items, similar to radio
+ * @returns
+ */
+export const useSelectItem = (defaultId?: string) => {
+  const [selectedId, setSelectedId] = useState('');
+
+  const handleItemClick = useCallback(
+    (id: string) => () => {
+      setSelectedId(id);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (defaultId) {
+      setSelectedId(defaultId);
+    }
+  }, [defaultId]);
+
+  return { selectedId, handleItemClick };
+};