feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/billing/usage-info/index.tsx

@@ -15,6 +15,7 @@ type Props = {
   usage: number
   total: number
   unit?: string
+  unitPosition?: 'inline' | 'suffix'
 }
 
 const LOW = 50
@@ -27,7 +28,8 @@ const UsageInfo: FC<Props> = ({
   tooltip,
   usage,
   total,
-  unit = '',
+  unit,
+  unitPosition = 'suffix',
 }) => {
   const { t } = useTranslation()
 
@@ -41,6 +43,12 @@ const UsageInfo: FC<Props> = ({
 
     return 'bg-components-progress-error-progress'
   })()
+  const isUnlimited = total === NUM_INFINITE
+  let totalDisplay: string | number = isUnlimited ? t('billing.plansCommon.unlimited') : total
+  if (!isUnlimited && unit && unitPosition === 'inline')
+    totalDisplay = `${total}${unit}`
+  const showUnit = !!unit && !isUnlimited && unitPosition === 'suffix'
+
   return (
     <div className={cn('flex flex-col gap-2 rounded-xl bg-components-panel-bg p-4', className)}>
       <Icon className='h-4 w-4 text-text-tertiary' />
@@ -56,10 +64,17 @@ const UsageInfo: FC<Props> = ({
           />
         )}
       </div>
-      <div className='system-md-semibold flex items-center gap-1  text-text-primary'>
-        {usage}
-        <div className='system-md-regular text-text-quaternary'>/</div>
-        <div>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
+      <div className='system-md-semibold flex items-center gap-1 text-text-primary'>
+        <div className='flex items-center gap-1'>
+          {usage}
+          <div className='system-md-regular text-text-quaternary'>/</div>
+          <div>{totalDisplay}</div>
+        </div>
+        {showUnit && (
+          <div className='system-xs-medium ml-auto text-text-tertiary'>
+            {unit}
+          </div>
+        )}
       </div>
       <ProgressBar
         percent={percent}

web/app/components/billing/usage-info/vector-space-info.tsx

@@ -30,6 +30,7 @@ const VectorSpaceInfo: FC<Props> = ({
       usage={usage.vectorSpace}
       total={total.vectorSpace}
       unit='MB'
+      unitPosition='inline'
     />
   )
 }