fix: can not create empty knowledge (#36336)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css

@@ -1,9 +1,5 @@
 @reference "../../../../styles/globals.css";
 
-.modal {
-  position: relative;
-}
-
 .modalHeader {
   @apply flex items-center place-content-between h-8;
 }
@@ -19,7 +15,7 @@
   background-size: 16px;
 }
 
-.modal .tip {
+.tip {
   @apply mt-1 mb-8 text-text-tertiary;
   font-weight: 400;
   font-size: 13px;

web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx

@@ -53,7 +53,7 @@ const EmptyDatasetCreationModal = ({ show = false, onHide }: IProps) => {
           onHide()
       }}
     >
-      <DialogContent className={cn('w-full overflow-hidden! border-none text-left align-middle', cn(s.modal, '!max-w-[520px]', 'px-8'))}>
+      <DialogContent className="w-full max-w-[520px]! overflow-hidden! border-none px-8 text-left align-middle">
 
         <div className={s.modalHeader}>
           <div className={s.title}>{t('stepOne.modal.title', { ns: 'datasetCreation' })}</div>

web/app/components/datasets/create/stop-embedding-modal/index.module.css

@@ -1,9 +1,6 @@
 @reference "../../../../styles/globals.css";
 
-.modal {
-  position: relative;
-}
-.modal .icon {
+.icon {
   width: 48px;
   height: 48px;
   background: rgba(255, 255, 255, 0.9) center no-repeat url(../assets/annotation-info.svg);
@@ -12,7 +9,7 @@
   box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   border-radius: 12px;
 }
-.modal .close {
+.close {
   position: absolute;
   right: 16px;
   top: 16px;
@@ -23,14 +20,14 @@
   background-size: 16px;
   cursor: pointer;
 }
-.modal .title {
+.title {
   @apply mt-3 mb-1;
   font-weight: 600;
   font-size: 20px;
   line-height: 30px;
   color: #101828;
 }
-.modal .content {
+.content {
   @apply mb-10;
   font-weight: 400;
   font-size: 14px;

web/app/components/datasets/create/stop-embedding-modal/index.tsx

@@ -39,7 +39,7 @@ const StopEmbeddingModal = ({
           onHide()
       }}
     >
-      <AlertDialogContent className={cn(s.modal, 'max-w-[480px]! overflow-hidden! border-none px-8 py-6 text-left align-middle shadow-xl')}>
+      <AlertDialogContent className="max-w-[480px]! overflow-hidden! border-none px-8 py-6 text-left align-middle shadow-xl">
         <div className={s.icon} />
         <button
           type="button"