From 1e4167427c5e07dad95c236dc7841cb32459bf42 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 26 Nov 2024 16:56:27 +0800
Subject: [PATCH] refactor: update processing status UI and add new CSS
 variables for success and error states

---
 .../documents/detail/segment-add/index.tsx    | 40 ++++++++++++-------
 web/tailwind.config.js                        |  2 +
 web/themes/manual-dark.css                    |  2 +
 web/themes/manual-light.css                   |  2 +
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index c1cb0629ed..17ddc86f74 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -26,7 +26,6 @@ export enum ProcessStatus {
   ERROR = 'error',
 }
 
-// todo: Modify processing status
 const SegmentAdd: FC<ISegmentAddProps> = ({
   importStatus,
   clearProcessStatus,
@@ -39,25 +38,36 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
     return (
       <>
         {(importStatus === ProcessStatus.WAITING || importStatus === ProcessStatus.PROCESSING) && (
-          <div className='relative overflow-hidden inline-flex items-center mr-2 px-3 py-[6px] text-blue-700 bg-[#F5F8FF] rounded-lg border border-black/5'>
-            {importStatus === ProcessStatus.WAITING && <div className='absolute left-0 top-0 w-3/12 h-full bg-[#D1E0FF] z-0' />}
-            {importStatus === ProcessStatus.PROCESSING && <div className='absolute left-0 top-0 w-2/3 h-full bg-[#D1E0FF] z-0' />}
-            <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
-            <span className='font-medium text-[13px] leading-[18px] z-10'>{t('datasetDocuments.list.batchModal.processing')}</span>
+          <div className='relative overflow-hidden inline-flex items-center mr-2 px-2.5 py-2 text-components-button-secondary-accent-text
+            bg-components-progress-bar-border rounded-lg border-[0.5px] border-components-progress-bar-border
+            shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
+            <div className={cn('absolute left-0 top-0 h-full bg-components-progress-bar-progress border-r-[1.5px] border-r-components-progress-bar-progress-highlight z-0', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
+            <RiLoader2Line className='animate-spin mr-1 w-4 h-4' />
+            <span className='system-sm-medium z-10 pr-0.5'>{t('datasetDocuments.list.batchModal.processing')}</span>
           </div>
         )}
         {importStatus === ProcessStatus.COMPLETED && (
-          <div className='inline-flex items-center mr-2 px-3 py-[6px] text-gray-700 bg-[#F6FEF9] rounded-lg border border-black/5'>
-            <CheckCircle className='mr-2 w-4 h-4 text-[#039855]' />
-            <span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.completed')}</span>
-            <span className='pl-2 font-medium text-[13px] leading-[18px] text-text-accent cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+          <div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
+            <div className='inline-flex items-center px-2.5 py-2 text-text-success border-r border-r-divider-subtle'>
+              <CheckCircle className='mr-1 w-4 h-4' />
+              <span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.completed')}</span>
+            </div>
+            <div className='m-1 inline-flex items-center'>
+              <span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+            </div>
+            <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-success-bg opacity-40 -z-10' />
           </div>
         )}
         {importStatus === ProcessStatus.ERROR && (
-          <div className='inline-flex items-center mr-2 px-3 py-[6px] text-red-600 bg-red-100 rounded-lg border border-black/5'>
-            <RiErrorWarningFill className='mr-2 w-4 h-4 text-[#D92D20]' />
-            <span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.error')}</span>
-            <span className='pl-2 font-medium text-[13px] leading-[18px] text-text-accent cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+          <div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
+            <div className='inline-flex items-center px-2.5 py-2 text-text-destructive border-r border-r-divider-subtle'>
+              <RiErrorWarningFill className='mr-1 w-4 h-4' />
+              <span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.error')}</span>
+            </div>
+            <div className='m-1 inline-flex items-center'>
+              <span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
+            </div>
+            <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-error-bg opacity-40 -z-10' />
           </div>
         )}
       </>
@@ -68,7 +78,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
     <div className='flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border
       bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] relative z-20'>
       <div
-        className='inline-flex items-center px-2.5 py-2 border-r-[1px] border-r-divider-subtle cursor-pointer'
+        className='inline-flex items-center px-2.5 py-2 rounded-l-lg border-r-[1px] border-r-divider-subtle cursor-pointer hover:bg-state-base-hover'
         onClick={showNewSegmentModal}
       >
         <RiAddLine className='w-4 h-4 text-components-button-secondary-accent-text' />
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 014af3f840..956cfb66f5 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -97,6 +97,8 @@ module.exports = {
         'chatbot-bg': 'var(--color-chatbot-bg)',
         'chat-bubble-bg': 'var(--color-chat-bubble-bg)',
         'workflow-process-bg': 'var(--color-workflow-process-bg)',
+        'dataset-chunk-process-success-bg': 'var(--color-dataset-chunk-process-success-bg)',
+        'dataset-chunk-process-error-bg': 'var(--color-dataset-chunk-process-error-bg)',
       },
     },
   },
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 047554f4b4..26604370c4 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -2,4 +2,6 @@ html[data-theme="dark"] {
   --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
   --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
   --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
+  --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+  --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
 }
\ No newline at end of file
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 09b9338184..2113ef7fc0 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -2,4 +2,6 @@ html[data-theme="light"] {
   --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
   --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
   --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
+  --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
+  --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
 }
\ No newline at end of file