component.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import type { FC } from 'react'
  2. import { useState } from 'react'
  3. import { useTranslation } from 'react-i18next'
  4. import { useSelectOrDelete, useTrigger } from '../../hooks'
  5. import { UPDATE_DATASETS_EVENT_EMITTER } from '../../constants'
  6. import type { Dataset } from './index'
  7. import { DELETE_CONTEXT_BLOCK_COMMAND } from './index'
  8. import { File05, Folder } from '@/app/components/base/icons/src/vender/solid/files'
  9. import { Plus } from '@/app/components/base/icons/src/vender/line/general'
  10. import {
  11. PortalToFollowElem,
  12. PortalToFollowElemContent,
  13. PortalToFollowElemTrigger,
  14. } from '@/app/components/base/portal-to-follow-elem'
  15. import { useEventEmitterContextContext } from '@/context/event-emitter'
  16. type ContextBlockComponentProps = {
  17. nodeKey: string
  18. datasets?: Dataset[]
  19. onAddContext: () => void
  20. canNotAddContext?: boolean
  21. }
  22. const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
  23. nodeKey,
  24. datasets = [],
  25. onAddContext,
  26. canNotAddContext,
  27. }) => {
  28. const { t } = useTranslation()
  29. const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CONTEXT_BLOCK_COMMAND)
  30. const [triggerRef, open, setOpen] = useTrigger()
  31. const { eventEmitter } = useEventEmitterContextContext()
  32. const [localDatasets, setLocalDatasets] = useState<Dataset[]>(datasets)
  33. eventEmitter?.useSubscription((v: any) => {
  34. if (v?.type === UPDATE_DATASETS_EVENT_EMITTER)
  35. setLocalDatasets(v.payload)
  36. })
  37. return (
  38. <div className={`
  39. group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent bg-[#F4F3FF] text-[#6938EF] rounded-[5px] hover:bg-[#EBE9FE]
  40. ${open ? 'bg-[#EBE9FE]' : 'bg-[#F4F3FF]'}
  41. ${isSelected && '!border-[#9B8AFB]'}
  42. `} ref={ref}>
  43. <File05 className='mr-1 w-[14px] h-[14px]' />
  44. <div className='mr-1 text-xs font-medium'>{t('common.promptEditor.context.item.title')}</div>
  45. {!canNotAddContext && (
  46. <PortalToFollowElem
  47. open={open}
  48. onOpenChange={setOpen}
  49. placement='bottom-end'
  50. offset={{
  51. mainAxis: 3,
  52. alignmentAxis: -147,
  53. }}
  54. >
  55. <PortalToFollowElemTrigger ref={triggerRef}>
  56. <div className={`
  57. flex items-center justify-center w-[18px] h-[18px] text-[11px] font-semibold rounded cursor-pointer
  58. ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
  59. `}>{localDatasets.length}</div>
  60. </PortalToFollowElemTrigger>
  61. <PortalToFollowElemContent style={{ zIndex: 100 }}>
  62. <div className='w-[360px] bg-white rounded-xl shadow-lg'>
  63. <div className='p-4'>
  64. <div className='mb-2 text-xs font-medium text-gray-500'>
  65. {t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
  66. </div>
  67. <div className='max-h-[270px] overflow-y-auto'>
  68. {
  69. localDatasets.map(dataset => (
  70. <div key={dataset.id} className='flex items-center h-8'>
  71. <div className='flex items-center justify-center shrink-0 mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#EAECF5]'>
  72. <Folder className='w-4 h-4 text-[#444CE7]' />
  73. </div>
  74. <div className='text-sm text-gray-800 truncate' title=''>{dataset.name}</div>
  75. </div>
  76. ))
  77. }
  78. </div>
  79. <div className='flex items-center h-8 text-[#155EEF] cursor-pointer' onClick={onAddContext}>
  80. <div className='shrink-0 flex justify-center items-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-gray-100'>
  81. <Plus className='w-[14px] h-[14px]' />
  82. </div>
  83. <div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
  84. </div>
  85. </div>
  86. <div className='px-4 py-3 text-xs text-gray-500 bg-gray-50 border-t-[0.5px] border-gray-50 rounded-b-xl'>
  87. {t('common.promptEditor.context.modal.footer')}
  88. </div>
  89. </div>
  90. </PortalToFollowElemContent>
  91. </PortalToFollowElem>
  92. )}
  93. </div>
  94. )
  95. }
  96. export default ContextBlockComponent