Perf input guide (#1557)

* perf: input guide code

* perf: input guide ui

* Chat input guide api

* Update app chat config store

* perf: app chat config field

* perf: app context

* perf: params

* fix: ts

* perf: filter private config

* perf: filter private config

* perf: import workflow

* perf: limit max tip amount

packages/web/components/common/EmptyTip/index.tsx

@@ -10,7 +10,7 @@ type Props = FlexProps & {
 const EmptyTip = ({ text, ...props }: Props) => {
   const { t } = useTranslation();
   return (
-    <Flex mt={5} flexDirection={'column'} alignItems={'center'} pt={'10vh'} {...props}>
+    <Flex mt={5} flexDirection={'column'} alignItems={'center'} py={'10vh'} {...props}>
       <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
       <Box mt={2} color={'myGray.500'}>
         {text || t('common.empty.Common Tip')}

packages/web/components/common/Icon/index.tsx

@@ -15,7 +15,7 @@ const MyIcon = ({ name, w = 'auto', h = 'auto', ...props }: { name: IconNameType
       .catch((error) => console.log(error));
   }, [name]);
 
-  return !!name && !!iconPaths[name] ? (
+  return !!IconComponent ? (
     <Icon
       {...IconComponent}
       w={w}

packages/web/components/common/MyBox/index.tsx

@@ -9,7 +9,7 @@ type Props = BoxProps & {
 
 const MyBox = ({ text, isLoading, children, ...props }: Props, ref: any) => {
   return (
-    <Box ref={ref} position={'relative'} {...props}>
+    <Box ref={ref} position={isLoading ? 'relative' : 'unset'} {...props}>
       {isLoading && <Loading fixed={false} text={text} />}
       {children}
     </Box>

packages/web/components/common/MyModal/index.tsx

@@ -11,11 +11,13 @@ import {
   useMediaQuery
 } from '@chakra-ui/react';
 import MyIcon from '../Icon';
+import MyBox from '../MyBox';
 
 export interface MyModalProps extends ModalContentProps {
   iconSrc?: string;
   title?: any;
   isCentered?: boolean;
+  isLoading?: boolean;
   isOpen: boolean;
   onClose?: () => void;
 }
@@ -27,6 +29,7 @@ const MyModal = ({
   title,
   children,
   isCentered,
+  isLoading,
   w = 'auto',
   maxW = ['90vw', '600px'],
   ...props
@@ -39,6 +42,7 @@ const MyModal = ({
       onClose={() => onClose && onClose()}
       autoFocus={false}
       isCentered={isPc ? isCentered : true}
+      blockScrollOnMount={false}
     >
       <ModalOverlay />
       <ModalContent
@@ -78,14 +82,15 @@ const MyModal = ({
           </ModalHeader>
         )}
 
-        <Box
+        <MyBox
+          isLoading={isLoading}
           overflow={props.overflow || 'overlay'}
           h={'100%'}
           display={'flex'}
           flexDirection={'column'}
         >
           {children}
-        </Box>
+        </MyBox>
       </ModalContent>
     </Modal>
   );

packages/web/components/common/String/HighlightText.tsx

@@ -0,0 +1,40 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+const HighlightText = ({
+  rawText,
+  matchText,
+  color = 'primary.600'
+}: {
+  rawText: string;
+  matchText: string;
+  color?: string;
+}) => {
+  const regex = new RegExp(`(${matchText})`, 'gi');
+  const parts = rawText.split(regex);
+
+  return (
+    <Box>
+      {parts.map((part, index) => {
+        let highLight = part.toLowerCase() === matchText.toLowerCase();
+
+        if (highLight) {
+          parts.find((item, i) => {
+            if (i >= index) return;
+            if (item.toLowerCase() === matchText.toLowerCase()) {
+              highLight = false;
+            }
+          });
+        }
+
+        return (
+          <Box as="span" key={index} color={highLight ? color : 'inherit'}>
+            {part}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default HighlightText;