chat-wrapper.tsx 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import { useCallback, useEffect, useMemo } from 'react'
  2. import Chat from '../chat'
  3. import type {
  4. ChatConfig,
  5. ChatItem,
  6. OnSend,
  7. } from '../types'
  8. import { useChat } from '../chat/hooks'
  9. import { getLastAnswer } from '../utils'
  10. import { useChatWithHistoryContext } from './context'
  11. import Header from './header'
  12. import ConfigPanel from './config-panel'
  13. import {
  14. fetchSuggestedQuestions,
  15. getUrl,
  16. stopChatMessageResponding,
  17. } from '@/service/share'
  18. import AnswerIcon from '@/app/components/base/answer-icon'
  19. const ChatWrapper = () => {
  20. const {
  21. appParams,
  22. appPrevChatList,
  23. currentConversationId,
  24. currentConversationItem,
  25. inputsForms,
  26. newConversationInputs,
  27. handleNewConversationCompleted,
  28. isMobile,
  29. isInstalledApp,
  30. appId,
  31. appMeta,
  32. handleFeedback,
  33. currentChatInstanceRef,
  34. appData,
  35. themeBuilder,
  36. } = useChatWithHistoryContext()
  37. const appConfig = useMemo(() => {
  38. const config = appParams || {}
  39. return {
  40. ...config,
  41. file_upload: {
  42. ...(config as any).file_upload,
  43. fileUploadConfig: (config as any).system_parameters,
  44. },
  45. supportFeedback: true,
  46. opening_statement: currentConversationId ? currentConversationItem?.introduction : (config as any).opening_statement,
  47. } as ChatConfig
  48. }, [appParams, currentConversationItem?.introduction, currentConversationId])
  49. const {
  50. chatList,
  51. chatListRef,
  52. handleUpdateChatList,
  53. handleSend,
  54. handleStop,
  55. isResponding,
  56. suggestedQuestions,
  57. } = useChat(
  58. appConfig,
  59. {
  60. inputs: (currentConversationId ? currentConversationItem?.inputs : newConversationInputs) as any,
  61. inputsForm: inputsForms,
  62. },
  63. appPrevChatList,
  64. taskId => stopChatMessageResponding('', taskId, isInstalledApp, appId),
  65. )
  66. useEffect(() => {
  67. if (currentChatInstanceRef.current)
  68. currentChatInstanceRef.current.handleStop = handleStop
  69. // eslint-disable-next-line react-hooks/exhaustive-deps
  70. }, [])
  71. const doSend: OnSend = useCallback((message, files, last_answer) => {
  72. const data: any = {
  73. query: message,
  74. files,
  75. inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
  76. conversation_id: currentConversationId,
  77. parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
  78. }
  79. handleSend(
  80. getUrl('chat-messages', isInstalledApp, appId || ''),
  81. data,
  82. {
  83. onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, isInstalledApp, appId),
  84. onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
  85. isPublicAPI: !isInstalledApp,
  86. },
  87. )
  88. }, [
  89. chatListRef,
  90. currentConversationId,
  91. currentConversationItem,
  92. handleSend,
  93. newConversationInputs,
  94. handleNewConversationCompleted,
  95. isInstalledApp,
  96. appId,
  97. ])
  98. const doRegenerate = useCallback((chatItem: ChatItem) => {
  99. const index = chatList.findIndex(item => item.id === chatItem.id)
  100. if (index === -1)
  101. return
  102. const prevMessages = chatList.slice(0, index)
  103. const question = prevMessages.pop()
  104. const lastAnswer = getLastAnswer(prevMessages)
  105. if (!question)
  106. return
  107. handleUpdateChatList(prevMessages)
  108. doSend(question.content, question.message_files, lastAnswer)
  109. }, [chatList, handleUpdateChatList, doSend])
  110. const chatNode = useMemo(() => {
  111. if (inputsForms.length) {
  112. return (
  113. <>
  114. <Header
  115. isMobile={isMobile}
  116. title={currentConversationItem?.name || ''}
  117. />
  118. {
  119. !currentConversationId && (
  120. <div className={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`}>
  121. <div className='mb-6' />
  122. <ConfigPanel />
  123. <div
  124. className='my-6 h-[1px]'
  125. style={{ background: 'linear-gradient(90deg, rgba(242, 244, 247, 0.00) 0%, #F2F4F7 49.17%, rgba(242, 244, 247, 0.00) 100%)' }}
  126. />
  127. </div>
  128. )
  129. }
  130. </>
  131. )
  132. }
  133. return (
  134. <Header
  135. isMobile={isMobile}
  136. title={currentConversationItem?.name || ''}
  137. />
  138. )
  139. }, [
  140. currentConversationId,
  141. inputsForms,
  142. currentConversationItem,
  143. isMobile,
  144. ])
  145. const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
  146. ? <AnswerIcon
  147. iconType={appData.site.icon_type}
  148. icon={appData.site.icon}
  149. background={appData.site.icon_background}
  150. imageUrl={appData.site.icon_url}
  151. />
  152. : null
  153. return (
  154. <div
  155. className='h-full bg-chatbot-bg overflow-hidden'
  156. >
  157. <Chat
  158. appData={appData}
  159. config={appConfig}
  160. chatList={chatList}
  161. isResponding={isResponding}
  162. chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-[720px] ${isMobile && 'px-4'}`}
  163. chatFooterClassName='pb-4'
  164. chatFooterInnerClassName={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`}
  165. onSend={doSend}
  166. inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
  167. inputsForm={inputsForms}
  168. onRegenerate={doRegenerate}
  169. onStopResponding={handleStop}
  170. chatNode={chatNode}
  171. allToolIcons={appMeta?.tool_icons || {}}
  172. onFeedback={handleFeedback}
  173. suggestedQuestions={suggestedQuestions}
  174. answerIcon={answerIcon}
  175. hideProcessDetail
  176. themeBuilder={themeBuilder}
  177. />
  178. </div>
  179. )
  180. }
  181. export default ChatWrapper