index.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. import {
  2. memo,
  3. useRef,
  4. useState,
  5. } from 'react'
  6. import { useKeyPress } from 'ahooks'
  7. import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
  8. import { useTranslation } from 'react-i18next'
  9. import { useNodes } from 'reactflow'
  10. import {
  11. useEdgesInteractions,
  12. useNodesInteractions,
  13. useWorkflowInteractions,
  14. } from '../../hooks'
  15. import { BlockEnum } from '../../types'
  16. import type { StartNodeType } from '../../nodes/start/types'
  17. import ChatWrapper from './chat-wrapper'
  18. import cn from '@/utils/classnames'
  19. import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
  20. import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
  21. import Tooltip from '@/app/components/base/tooltip'
  22. import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
  23. import { useStore } from '@/app/components/workflow/store'
  24. export type ChatWrapperRefType = {
  25. handleRestart: () => void
  26. }
  27. const DebugAndPreview = () => {
  28. const { t } = useTranslation()
  29. const chatRef = useRef({ handleRestart: () => { } })
  30. const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
  31. const { handleNodeCancelRunningStatus } = useNodesInteractions()
  32. const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
  33. const varList = useStore(s => s.conversationVariables)
  34. const [expanded, setExpanded] = useState(true)
  35. const nodes = useNodes<StartNodeType>()
  36. const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
  37. const variables = startNode?.data.variables || []
  38. const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)
  39. const handleRestartChat = () => {
  40. handleNodeCancelRunningStatus()
  41. handleEdgeCancelRunningStatus()
  42. chatRef.current.handleRestart()
  43. }
  44. useKeyPress('shift.r', () => {
  45. handleRestartChat()
  46. }, {
  47. exactMatch: true,
  48. })
  49. return (
  50. <div
  51. className={cn(
  52. 'flex flex-col w-[420px] bg-chatbot-bg rounded-l-2xl h-full border border-components-panel-border border-r-0 shadow-xl',
  53. )}
  54. >
  55. <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
  56. <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
  57. <div className='flex items-center gap-1'>
  58. <Tooltip
  59. popupContent={t('common.operation.refresh')}
  60. >
  61. <ActionButton onClick={() => handleRestartChat()}>
  62. <RefreshCcw01 className='w-4 h-4' />
  63. </ActionButton>
  64. </Tooltip>
  65. {varList.length > 0 && (
  66. <Tooltip
  67. popupContent={t('workflow.chatVariable.panelTitle')}
  68. >
  69. <ActionButton onClick={() => setShowConversationVariableModal(true)}>
  70. <BubbleX className='w-4 h-4' />
  71. </ActionButton>
  72. </Tooltip>
  73. )}
  74. {variables.length > 0 && (
  75. <div className='relative'>
  76. <Tooltip
  77. popupContent={t('workflow.panel.userInputField')}
  78. >
  79. <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
  80. <RiEqualizer2Line className='w-4 h-4' />
  81. </ActionButton>
  82. </Tooltip>
  83. {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
  84. </div>
  85. )}
  86. <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
  87. <div
  88. className='flex items-center justify-center w-6 h-6 cursor-pointer'
  89. onClick={handleCancelDebugAndPreviewPanel}
  90. >
  91. <RiCloseLine className='w-4 h-4 text-gray-500' />
  92. </div>
  93. </div>
  94. </div>
  95. <div className='grow rounded-b-2xl overflow-y-auto'>
  96. <ChatWrapper
  97. ref={chatRef}
  98. showConversationVariableModal={showConversationVariableModal}
  99. onConversationModalHide={() => setShowConversationVariableModal(false)}
  100. showInputsFieldsPanel={expanded}
  101. onHide={() => setExpanded(false)}
  102. />
  103. </div>
  104. </div>
  105. )
  106. }
  107. export default memo(DebugAndPreview)