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/plan/index.tsx

@@ -6,8 +6,10 @@ import { useRouter } from 'next/navigation'
 import {
   RiBook2Line,
   RiFileEditLine,
+  RiFlashlightLine,
   RiGraduationCapLine,
   RiGroupLine,
+  RiSpeedLine,
 } from '@remixicon/react'
 import { Plan, SelfHostedPlan } from '../type'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
@@ -43,6 +45,8 @@ const PlanComp: FC<Props> = ({
     usage,
     total,
   } = plan
+  const perMonthUnit = ` ${t('billing.usagePage.perMonth')}`
+  const triggerEventUnit = plan.type === Plan.sandbox ? undefined : perMonthUnit
 
   const [showModal, setShowModal] = React.useState(false)
   const { mutateAsync } = useEducationVerify()
@@ -119,6 +123,20 @@ const PlanComp: FC<Props> = ({
           usage={usage.annotatedResponse}
           total={total.annotatedResponse}
         />
+        <UsageInfo
+          Icon={RiFlashlightLine}
+          name={t('billing.usagePage.triggerEvents')}
+          usage={usage.triggerEvents}
+          total={total.triggerEvents}
+          unit={triggerEventUnit}
+        />
+        <UsageInfo
+          Icon={RiSpeedLine}
+          name={t('billing.plansCommon.apiRateLimit')}
+          usage={usage.apiRateLimit}
+          total={total.apiRateLimit}
+          unit={perMonthUnit}
+        />
 
       </div>
       <VerifyStateModal