tool-trigger.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. 'use client'
  2. import React from 'react'
  3. import { useTranslation } from 'react-i18next'
  4. import {
  5. RiArrowDownSLine,
  6. RiEqualizer2Line,
  7. } from '@remixicon/react'
  8. import BlockIcon from '@/app/components/workflow/block-icon'
  9. import { BlockEnum } from '@/app/components/workflow/types'
  10. import type { ToolWithProvider } from '@/app/components/workflow/types'
  11. import cn from '@/utils/classnames'
  12. type Props = {
  13. open: boolean
  14. provider?: ToolWithProvider
  15. value?: {
  16. provider_name: string
  17. tool_name: string
  18. }
  19. isConfigure?: boolean
  20. }
  21. const ToolTrigger = ({
  22. open,
  23. provider,
  24. value,
  25. isConfigure,
  26. }: Props) => {
  27. const { t } = useTranslation()
  28. return (
  29. <div className={cn(
  30. 'group flex cursor-pointer items-center rounded-lg bg-components-input-bg-normal p-2 pl-3 hover:bg-state-base-hover-alt',
  31. open && 'bg-state-base-hover-alt',
  32. value?.provider_name && 'py-1.5 pl-1.5',
  33. )}>
  34. {value?.provider_name && provider && (
  35. <div className='mr-1 shrink-0 rounded-lg border border-components-panel-border bg-components-panel-bg p-px'>
  36. <BlockIcon
  37. className='!h-4 !w-4'
  38. type={BlockEnum.Tool}
  39. toolIcon={provider.icon}
  40. />
  41. </div>
  42. )}
  43. {value?.tool_name && (
  44. <div className='system-sm-medium grow text-components-input-text-filled'>{value.tool_name}</div>
  45. )}
  46. {!value?.provider_name && (
  47. <div className='system-sm-regular grow text-components-input-text-placeholder'>
  48. {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
  49. </div>
  50. )}
  51. {isConfigure && (
  52. <RiEqualizer2Line className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
  53. )}
  54. {!isConfigure && (
  55. <RiArrowDownSLine className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
  56. )}
  57. </div>
  58. )
  59. }
  60. export default ToolTrigger