checklist.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. import {
  2. memo,
  3. useState,
  4. } from 'react'
  5. import { useTranslation } from 'react-i18next'
  6. import {
  7. useEdges,
  8. useNodes,
  9. } from 'reactflow'
  10. import {
  11. RiCloseLine,
  12. RiListCheck3,
  13. } from '@remixicon/react'
  14. import cn from 'classnames'
  15. import BlockIcon from '../block-icon'
  16. import {
  17. useChecklist,
  18. useNodesInteractions,
  19. } from '../hooks'
  20. import type {
  21. CommonEdgeType,
  22. CommonNodeType,
  23. } from '../types'
  24. import {
  25. PortalToFollowElem,
  26. PortalToFollowElemContent,
  27. PortalToFollowElemTrigger,
  28. } from '@/app/components/base/portal-to-follow-elem'
  29. import {
  30. ChecklistSquare,
  31. } from '@/app/components/base/icons/src/vender/line/general'
  32. import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
  33. type WorkflowChecklistProps = {
  34. disabled: boolean
  35. }
  36. const WorkflowChecklist = ({
  37. disabled,
  38. }: WorkflowChecklistProps) => {
  39. const { t } = useTranslation()
  40. const [open, setOpen] = useState(false)
  41. const nodes = useNodes<CommonNodeType>()
  42. const edges = useEdges<CommonEdgeType>()
  43. const needWarningNodes = useChecklist(nodes, edges)
  44. const { handleNodeSelect } = useNodesInteractions()
  45. return (
  46. <PortalToFollowElem
  47. placement='bottom-end'
  48. offset={{
  49. mainAxis: 12,
  50. crossAxis: 4,
  51. }}
  52. open={open}
  53. onOpenChange={setOpen}
  54. >
  55. <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
  56. <div
  57. className={cn(
  58. 'relative flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs',
  59. disabled && 'opacity-50 cursor-not-allowed',
  60. )}
  61. >
  62. <div
  63. className={`
  64. group flex items-center justify-center w-full h-full rounded-md cursor-pointer
  65. hover:bg-primary-50
  66. ${open && 'bg-primary-50'}
  67. `}
  68. >
  69. <RiListCheck3
  70. className={`
  71. w-4 h-4 group-hover:text-primary-600
  72. ${open ? 'text-primary-600' : 'text-gray-500'}`
  73. }
  74. />
  75. </div>
  76. {
  77. !!needWarningNodes.length && (
  78. <div className='absolute -right-1.5 -top-1.5 flex items-center justify-center min-w-[18px] h-[18px] rounded-full border border-gray-100 text-white text-[11px] font-semibold bg-[#F79009]'>
  79. {needWarningNodes.length}
  80. </div>
  81. )
  82. }
  83. </div>
  84. </PortalToFollowElemTrigger>
  85. <PortalToFollowElemContent className='z-[12]'>
  86. <div
  87. className='w-[420px] rounded-2xl bg-white border-[0.5px] border-black/5 shadow-lg overflow-y-auto'
  88. style={{
  89. maxHeight: 'calc(2 / 3 * 100vh)',
  90. }}
  91. >
  92. <div className='sticky top-0 bg-white flex items-center pl-4 pr-3 pt-3 h-[44px] text-md font-semibold text-gray-900 z-[1]'>
  93. <div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div>
  94. <div
  95. className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
  96. onClick={() => setOpen(false)}
  97. >
  98. <RiCloseLine className='w-4 h-4 text-gray-500' />
  99. </div>
  100. </div>
  101. <div className='py-2'>
  102. {
  103. !!needWarningNodes.length && (
  104. <>
  105. <div className='px-4 text-xs text-gray-400'>{t('workflow.panel.checklistTip')}</div>
  106. <div className='px-4 py-2'>
  107. {
  108. needWarningNodes.map(node => (
  109. <div
  110. key={node.id}
  111. className='mb-2 last-of-type:mb-0 border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg cursor-pointer'
  112. onClick={() => {
  113. handleNodeSelect(node.id)
  114. setOpen(false)
  115. }}
  116. >
  117. <div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'>
  118. <BlockIcon
  119. type={node.type}
  120. className='mr-1.5'
  121. toolIcon={node.toolIcon}
  122. />
  123. {node.title}
  124. </div>
  125. <div className='border-t-[0.5px] border-t-black/2'>
  126. {
  127. node.unConnected && (
  128. <div className='px-3 py-2 bg-gray-25 rounded-b-lg'>
  129. <div className='flex text-xs leading-[18px] text-gray-500'>
  130. <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
  131. {t('workflow.common.needConnecttip')}
  132. </div>
  133. </div>
  134. )
  135. }
  136. {
  137. node.errorMessage && (
  138. <div className='px-3 py-2 bg-gray-25 rounded-b-lg'>
  139. <div className='flex text-xs leading-[18px] text-gray-500'>
  140. <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
  141. {node.errorMessage}
  142. </div>
  143. </div>
  144. )
  145. }
  146. </div>
  147. </div>
  148. ))
  149. }
  150. </div>
  151. </>
  152. )
  153. }
  154. {
  155. !needWarningNodes.length && (
  156. <div className='mx-4 mb-3 py-4 rounded-lg bg-gray-50 text-gray-400 text-xs text-center'>
  157. <ChecklistSquare className='mx-auto mb-[5px] w-8 h-8 text-gray-300' />
  158. {t('workflow.panel.checklistResolved')}
  159. </div>
  160. )
  161. }
  162. </div>
  163. </div>
  164. </PortalToFollowElemContent>
  165. </PortalToFollowElem>
  166. )
  167. }
  168. export default memo(WorkflowChecklist)