feat: multiple model configuration (#2196)

Co-authored-by: Joel <iamjoel007@gmail.com>
2024-01-25 12:36:55 +08:00
parent 6bfdfab6f3
commit d5361b8d09
56 changed files with 3209 additions and 188 deletions
--- a/web/app/components/base/chat/chat/answer/agent-content.tsx
+++ b/web/app/components/base/chat/chat/answer/agent-content.tsx
@@ -0,0 +1,58 @@
+import type { FC } from 'react'
+import type {
+  ChatItem,
+  VisionFile,
+} from '../../types'
+import { useChatContext } from '../context'
+import { Markdown } from '@/app/components/base/markdown'
+import Thought from '@/app/components/app/chat/thought'
+import ImageGallery from '@/app/components/base/image-gallery'
+
+type AgentContentProps = {
+  item: ChatItem
+}
+const AgentContent: FC<AgentContentProps> = ({
+  item,
+}) => {
+  const { allToolIcons } = useChatContext()
+  const {
+    annotation,
+    agent_thoughts,
+  } = item
+
+  const getImgs = (list?: VisionFile[]) => {
+    if (!list)
+      return []
+    return list.filter(file => file.type === 'image' && file.belongs_to === 'assistant')
+  }
+
+  if (annotation?.logAnnotation)
+    return <Markdown content={annotation?.logAnnotation.content || ''} />
+
+  return (
+    <div>
+      {agent_thoughts?.map((thought, index) => (
+        <div key={index}>
+          {thought.thought && (
+            <Markdown content={thought.thought} />
+          )}
+          {/* {item.tool} */}
+          {/* perhaps not use tool */}
+          {!!thought.tool && (
+            <Thought
+              thought={thought}
+              allToolIcons={allToolIcons || {}}
+              isFinished={!!thought.observation}
+            />
+          )}
+
+          {getImgs(thought.message_files).length > 0 && (
+            <ImageGallery srcs={getImgs(thought.message_files).map(file => file.url)} />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AgentContent
--- a/web/app/components/base/chat/chat/answer/basic-content.tsx
+++ b/web/app/components/base/chat/chat/answer/basic-content.tsx
@@ -0,0 +1,22 @@
+import type { FC } from 'react'
+import type { ChatItem } from '../../types'
+import { Markdown } from '@/app/components/base/markdown'
+
+type BasicContentProps = {
+  item: ChatItem
+}
+const BasicContent: FC<BasicContentProps> = ({
+  item,
+}) => {
+  const {
+    annotation,
+    content,
+  } = item
+
+  if (annotation?.logAnnotation)
+    return <Markdown content={annotation?.logAnnotation.content || ''} />
+
+  return <Markdown content={content} />
+}
+
+export default BasicContent
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -0,0 +1,99 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ChatItem } from '../../types'
+import { useChatContext } from '../context'
+import { useCurrentAnswerIsResponsing } from '../hooks'
+import Operation from './operation'
+import AgentContent from './agent-content'
+import BasicContent from './basic-content'
+import SuggestedQuestions from './suggested-questions'
+import More from './more'
+import { AnswerTriangle } from '@/app/components/base/icons/src/vender/solid/general'
+import LoadingAnim from '@/app/components/app/chat/loading-anim'
+import Citation from '@/app/components/app/chat/citation'
+import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
+
+type AnswerProps = {
+  item: ChatItem
+}
+const Answer: FC<AnswerProps> = ({
+  item,
+}) => {
+  const { t } = useTranslation()
+  const {
+    config,
+    answerIcon,
+  } = useChatContext()
+  const responsing = useCurrentAnswerIsResponsing(item.id)
+  const {
+    content,
+    citation,
+    agent_thoughts,
+    more,
+    annotation,
+  } = item
+  const hasAgentThoughts = !!agent_thoughts?.length
+
+  return (
+    <div className='flex mb-2 last:mb-0'>
+      <div className='shrink-0 relative w-10 h-10'>
+        {
+          answerIcon || (
+            <div className='flex items-center justify-center w-full h-full rounded-full bg-[#d5f5f6] border-[0.5px] border-black/5 text-xl'>
+              🤖
+            </div>
+          )
+        }
+        {
+          responsing && (
+            <div className='absolute -top-[3px] -left-[3px] pl-[6px] flex items-center w-4 h-4 bg-white rounded-full shadow-xs border-[0.5px] border-gray-50'>
+              <LoadingAnim type='avatar' />
+            </div>
+          )
+        }
+      </div>
+      <div className='chat-answer-container grow w-0 group ml-4'>
+        <div className='relative pr-10'>
+          <AnswerTriangle className='absolute -left-2 top-0 w-2 h-3 text-gray-100' />
+          <div className='group relative inline-block px-4 py-3 max-w-full bg-gray-100 rounded-b-2xl rounded-tr-2xl text-sm text-gray-900'>
+            <Operation item={item} />
+            {
+              responsing && !content && !hasAgentThoughts && (
+                <div className='flex items-center justify-center w-6 h-5'>
+                  <LoadingAnim type='text' />
+                </div>
+              )
+            }
+            {
+              content && !hasAgentThoughts && (
+                <BasicContent item={item} />
+              )
+            }
+            {
+              hasAgentThoughts && !content && (
+                <AgentContent item={item} />
+              )
+            }
+            {
+              annotation?.id && !annotation?.logAnnotation && (
+                <EditTitle
+                  className='mt-1'
+                  title={t('appAnnotation.editBy', { author: annotation.authorName })}
+                />
+              )
+            }
+            <SuggestedQuestions item={item} />
+            {
+              !!citation?.length && config?.retriever_resource?.enabled && !responsing && (
+                <Citation data={citation} showHitInfo />
+              )
+            }
+          </div>
+        </div>
+        <More more={more} />
+      </div>
+    </div>
+  )
+}
+
+export default Answer
--- a/web/app/components/base/chat/chat/answer/more.tsx
+++ b/web/app/components/base/chat/chat/answer/more.tsx
@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ChatItem } from '../../types'
+import { formatNumber } from '@/utils/format'
+
+type MoreProps = {
+  more: ChatItem['more']
+}
+const More: FC<MoreProps> = ({
+  more,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center mt-1 h-[18px] text-xs text-gray-400 opacity-0 group-hover:opacity-100'>
+      {
+        more && (
+          <>
+            <div
+              className='mr-2 shrink-0 truncate max-w-[33.3%]'
+              title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
+            >
+              {`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
+            </div>
+            <div
+              className='shrink-0 truncate max-w-[33.3%]'
+              title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
+            >
+              {`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
+            </div>
+            <div className='shrink-0 mx-2'>·</div>
+            <div
+              className='shrink-0 truncate max-w-[33.3%]'
+              title={more.time}
+            >
+              {more.time}
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+export default More
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -0,0 +1,54 @@
+import type { FC } from 'react'
+import type { ChatItem } from '../../types'
+import { useCurrentAnswerIsResponsing } from '../hooks'
+import { useChatContext } from '../context'
+import CopyBtn from '@/app/components/app/chat/copy-btn'
+import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
+import AudioBtn from '@/app/components/base/audio-btn'
+
+type OperationProps = {
+  item: ChatItem
+}
+const Operation: FC<OperationProps> = ({
+  item,
+}) => {
+  const { config } = useChatContext()
+  const responsing = useCurrentAnswerIsResponsing(item.id)
+  const {
+    isOpeningStatement,
+    content,
+    annotation,
+  } = item
+
+  return (
+    <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
+      {
+        !isOpeningStatement && !responsing && (
+          <CopyBtn
+            value={content}
+            className='hidden group-hover:block'
+          />
+        )
+      }
+      {!isOpeningStatement && config?.text_to_speech && (
+        <AudioBtn
+          value={content}
+          className='hidden group-hover:block'
+        />
+      )}
+      {
+        annotation?.id && (
+          <div
+            className='relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-[#444CE7] shadow-md'
+          >
+            <div className='p-1 rounded-lg bg-[#EEF4FF] '>
+              <MessageFast className='w-4 h-4' />
+            </div>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default Operation
--- a/web/app/components/base/chat/chat/answer/suggested-questions.tsx
+++ b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
@@ -0,0 +1,35 @@
+import type { FC } from 'react'
+import type { ChatItem } from '../../types'
+import { useChatContext } from '../context'
+
+type SuggestedQuestionsProps = {
+  item: ChatItem
+}
+const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
+  item,
+}) => {
+  const { onSend } = useChatContext()
+  const {
+    isOpeningStatement,
+    suggestedQuestions,
+  } = item
+
+  if (!isOpeningStatement || !suggestedQuestions?.length)
+    return null
+
+  return (
+    <div className='flex flex-wrap'>
+      {suggestedQuestions.map((question, index) => (
+        <div
+          key={index}
+          className='mt-1 mr-1 max-w-full last:mr-0 shrink-0 py-[5px] leading-[18px] items-center px-4 rounded-lg border border-gray-200 shadow-xs bg-white text-xs font-medium text-primary-600 cursor-pointer'
+          onClick={() => onSend?.(question)}
+        >
+          {question}
+        </div>),
+      )}
+    </div>
+  )
+}
+
+export default SuggestedQuestions
--- a/web/app/components/base/chat/chat/chat-input.tsx
+++ b/web/app/components/base/chat/chat/chat-input.tsx
@@ -0,0 +1,220 @@
+import type { FC } from 'react'
+import {
+  useRef,
+  useState,
+} from 'react'
+import { useContext } from 'use-context-selector'
+import Recorder from 'js-audio-recorder'
+import { useTranslation } from 'react-i18next'
+import Textarea from 'rc-textarea'
+import type {
+  EnableType,
+  OnSend,
+  VisionConfig,
+} from '../types'
+import { TransferMethod } from '../types'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { ToastContext } from '@/app/components/base/toast'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import VoiceInput from '@/app/components/base/voice-input'
+import { Microphone01 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { Microphone01 as Microphone01Solid } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { Send03 } from '@/app/components/base/icons/src/vender/solid/communication'
+import ChatImageUploader from '@/app/components/base/image-uploader/chat-image-uploader'
+import ImageList from '@/app/components/base/image-uploader/image-list'
+import {
+  useClipboardUploader,
+  useDraggableUploader,
+  useImageFiles,
+} from '@/app/components/base/image-uploader/hooks'
+
+type ChatInputProps = {
+  visionConfig?: VisionConfig
+  speechToTextConfig?: EnableType
+  onSend?: OnSend
+}
+const ChatInput: FC<ChatInputProps> = ({
+  visionConfig,
+  speechToTextConfig,
+  onSend,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const [voiceInputShow, setVoiceInputShow] = useState(false)
+  const {
+    files,
+    onUpload,
+    onRemove,
+    onReUpload,
+    onImageLinkLoadError,
+    onImageLinkLoadSuccess,
+    onClear,
+  } = useImageFiles()
+  const { onPaste } = useClipboardUploader({ onUpload, visionConfig, files })
+  const { onDragEnter, onDragLeave, onDragOver, onDrop, isDragActive } = useDraggableUploader<HTMLTextAreaElement>({ onUpload, files, visionConfig })
+  const isUseInputMethod = useRef(false)
+  const [query, setQuery] = useState('')
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value
+    setQuery(value)
+  }
+
+  const handleSend = () => {
+    if (onSend) {
+      onSend(query, files.filter(file => file.progress !== -1).map(fileItem => ({
+        type: 'image',
+        transfer_method: fileItem.type,
+        url: fileItem.url,
+        upload_file_id: fileItem.fileId,
+      })))
+      setQuery('')
+    }
+    if (!files.find(item => item.type === TransferMethod.local_file && !item.fileId)) {
+      if (files.length)
+        onClear()
+    }
+  }
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.code === 'Enter') {
+      e.preventDefault()
+      // prevent send message when using input method enter
+      if (!e.shiftKey && !isUseInputMethod.current)
+        handleSend()
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    isUseInputMethod.current = e.nativeEvent.isComposing
+    if (e.code === 'Enter' && !e.shiftKey) {
+      setQuery(query.replace(/\n$/, ''))
+      e.preventDefault()
+    }
+  }
+
+  const logError = (message: string) => {
+    notify({ type: 'error', message, duration: 3000 })
+  }
+  const handleVoiceInputShow = () => {
+    (Recorder as any).getPermission().then(() => {
+      setVoiceInputShow(true)
+    }, () => {
+      logError(t('common.voiceInput.notAllow'))
+    })
+  }
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const sendBtn = (
+    <div
+      className='group flex items-center justify-center w-8 h-8 rounded-lg hover:bg-[#EBF5FF] cursor-pointer'
+      onClick={handleSend}
+    >
+      <Send03
+        className={`
+          w-5 h-5 text-gray-300 group-hover:text-primary-600
+          ${!!query.trim() && 'text-primary-600'}
+        `}
+      />
+    </div>
+  )
+
+  return (
+    <div
+      className={`
+        relative p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto
+        ${isDragActive && 'border-primary-600'}
+      `}
+    >
+      {
+        visionConfig?.enabled && (
+          <>
+            <div className='absolute bottom-2 left-2 flex items-center'>
+              <ChatImageUploader
+                settings={visionConfig}
+                onUpload={onUpload}
+                disabled={files.length >= visionConfig.number_limits}
+              />
+              <div className='mx-1 w-[1px] h-4 bg-black/5' />
+            </div>
+            <div className='pl-[52px]'>
+              <ImageList
+                list={files}
+                onRemove={onRemove}
+                onReUpload={onReUpload}
+                onImageLinkLoadSuccess={onImageLinkLoadSuccess}
+                onImageLinkLoadError={onImageLinkLoadError}
+              />
+            </div>
+          </>
+        )
+      }
+      <Textarea
+        className={`
+          block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
+          ${visionConfig?.enabled && 'pl-12'}
+        `}
+        value={query}
+        onChange={handleContentChange}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        onPaste={onPaste}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        autoSize
+      />
+      <div className='absolute bottom-[7px] right-2 flex items-center h-8'>
+        <div className='flex items-center px-1 h-5 rounded-md bg-gray-100 text-xs font-medium text-gray-500'>
+          {query.trim().length}
+        </div>
+        {
+          query
+            ? (
+              <div className='flex justify-center items-center ml-2 w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => setQuery('')}>
+                <XCircle className='w-4 h-4 text-[#98A2B3]' />
+              </div>
+            )
+            : speechToTextConfig?.enabled
+              ? (
+                <div
+                  className='group flex justify-center items-center ml-2 w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
+                  onClick={handleVoiceInputShow}
+                >
+                  <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
+                  <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
+                </div>
+              )
+              : null
+        }
+        <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
+        {isMobile
+          ? sendBtn
+          : (
+            <TooltipPlus
+              popupContent={
+                <div>
+                  <div>{t('common.operation.send')} Enter</div>
+                  <div>{t('common.operation.lineBreak')} Shift Enter</div>
+                </div>
+              }
+            >
+              {sendBtn}
+            </TooltipPlus>
+          )}
+      </div>
+      {
+        voiceInputShow && (
+          <VoiceInput
+            onCancel={() => setVoiceInputShow(false)}
+            onConverted={text => setQuery(text)}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default ChatInput
--- a/web/app/components/base/chat/chat/context.tsx
+++ b/web/app/components/base/chat/chat/context.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'use-context-selector'
+import type {
+  ChatConfig,
+  ChatItem,
+  OnSend,
+} from '../types'
+import type { Emoji } from '@/app/components/tools/types'
+
+export type ChatContextValue = {
+  config?: ChatConfig
+  isResponsing?: boolean
+  chatList: ChatItem[]
+  showPromptLog?: boolean
+  questionIcon?: ReactNode
+  answerIcon?: ReactNode
+  allToolIcons?: Record<string, string | Emoji>
+  onSend?: OnSend
+}
+
+const ChatContext = createContext<ChatContextValue>({
+  chatList: [],
+})
+
+type ChatContextProviderProps = {
+  children: ReactNode
+} & ChatContextValue
+
+export const ChatContextProvider = ({
+  children,
+  config,
+  isResponsing,
+  chatList,
+  showPromptLog,
+  questionIcon,
+  answerIcon,
+  allToolIcons,
+  onSend,
+}: ChatContextProviderProps) => {
+  return (
+    <ChatContext.Provider value={{
+      config,
+      isResponsing,
+      chatList: chatList || [],
+      showPromptLog,
+      questionIcon,
+      answerIcon,
+      allToolIcons,
+      onSend,
+    }}>
+      {children}
+    </ChatContext.Provider>
+  )
+}
+
+export const useChatContext = () => useContext(ChatContext)
+
+export default ChatContext
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -0,0 +1,395 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { useGetState } from 'ahooks'
+import dayjs from 'dayjs'
+import type {
+  ChatConfig,
+  ChatItem,
+  Inputs,
+  PromptVariable,
+  VisionFile,
+} from '../types'
+import { useChatContext } from './context'
+import { TransferMethod } from '@/types/app'
+import { useToastContext } from '@/app/components/base/toast'
+import { ssePost } from '@/service/base'
+import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
+
+type GetAbortController = (abortController: AbortController) => void
+type SendCallback = {
+  onGetConvesationMessages: (conversationId: string, getAbortController: GetAbortController) => Promise<any>
+  onGetSuggestedQuestions?: (responseItemId: string, getAbortController: GetAbortController) => Promise<any>
+}
+export const useChat = (
+  config: ChatConfig,
+  promptVariablesConfig?: {
+    inputs: Inputs
+    promptVariables: PromptVariable[]
+  },
+  prevChatList?: ChatItem[],
+  stopChat?: (taskId: string) => void,
+) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const connversationId = useRef('')
+  const hasStopResponded = useRef(false)
+  const [isResponsing, setIsResponsing] = useState(false)
+  const [chatList, setChatList, getChatList] = useGetState<ChatItem[]>(prevChatList || [])
+  const [taskId, setTaskId] = useState('')
+  const [suggestedQuestions, setSuggestQuestions] = useState<string[]>([])
+  const [abortController, setAbortController] = useState<AbortController | null>(null)
+  const [conversationMessagesAbortController, setConversationMessagesAbortController] = useState<AbortController | null>(null)
+  const [suggestedQuestionsAbortController, setSuggestedQuestionsAbortController] = useState<AbortController | null>(null)
+
+  const getIntroduction = (str: string) => {
+    return replaceStringWithValues(str, promptVariablesConfig?.promptVariables || [], promptVariablesConfig?.inputs || {})
+  }
+  useEffect(() => {
+    if (config.opening_statement && !chatList.some(item => !item.isAnswer)) {
+      setChatList([{
+        id: `${Date.now()}`,
+        content: getIntroduction(config.opening_statement),
+        isAnswer: true,
+        isOpeningStatement: true,
+        suggestedQuestions: config.suggested_questions,
+      }])
+    }
+  }, [config.opening_statement, config.suggested_questions, promptVariablesConfig?.inputs])
+
+  const handleStop = () => {
+    if (stopChat && taskId)
+      stopChat(taskId)
+    if (abortController)
+      abortController.abort()
+    if (conversationMessagesAbortController)
+      conversationMessagesAbortController.abort()
+    if (suggestedQuestionsAbortController)
+      suggestedQuestionsAbortController.abort()
+  }
+
+  const handleRestart = () => {
+    handleStop()
+    hasStopResponded.current = true
+    connversationId.current = ''
+    setIsResponsing(false)
+    setChatList(config.opening_statement
+      ? [{
+        id: `${Date.now()}`,
+        content: config.opening_statement,
+        isAnswer: true,
+        isOpeningStatement: true,
+        suggestedQuestions: config.suggested_questions,
+      }]
+      : [])
+    setSuggestQuestions([])
+  }
+  const handleSend = async (
+    url: string,
+    data: any,
+    {
+      onGetConvesationMessages,
+      onGetSuggestedQuestions,
+    }: SendCallback,
+  ) => {
+    setSuggestQuestions([])
+    if (isResponsing) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
+      return false
+    }
+
+    if (promptVariablesConfig?.inputs && promptVariablesConfig?.promptVariables) {
+      const {
+        promptVariables,
+        inputs,
+      } = promptVariablesConfig
+      let hasEmptyInput = ''
+      const requiredVars = promptVariables.filter(({ key, name, required, type }) => {
+        if (type === 'api')
+          return false
+        const res = (!key || !key.trim()) || (!name || !name.trim()) || (required || required === undefined || required === null)
+        return res
+      })
+
+      if (requiredVars?.length) {
+        requiredVars.forEach(({ key, name }) => {
+          if (hasEmptyInput)
+            return
+
+          if (!inputs[key])
+            hasEmptyInput = name
+        })
+      }
+
+      if (hasEmptyInput) {
+        notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
+        return false
+      }
+    }
+
+    const updateCurrentQA = ({
+      responseItem,
+      questionId,
+      placeholderAnswerId,
+      questionItem,
+    }: {
+      responseItem: ChatItem
+      questionId: string
+      placeholderAnswerId: string
+      questionItem: ChatItem
+    }) => {
+      // closesure new list is outdated.
+      const newListWithAnswer = produce(
+        getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+        (draft) => {
+          if (!draft.find(item => item.id === questionId))
+            draft.push({ ...questionItem })
+
+          draft.push({ ...responseItem })
+        })
+      setChatList(newListWithAnswer)
+    }
+
+    const questionId = `question-${Date.now()}`
+    const questionItem = {
+      id: questionId,
+      content: data.query,
+      isAnswer: false,
+      message_files: data.files,
+    }
+
+    const placeholderAnswerId = `answer-placeholder-${Date.now()}`
+    const placeholderAnswerItem = {
+      id: placeholderAnswerId,
+      content: '',
+      isAnswer: true,
+    }
+
+    const newList = [...getChatList(), questionItem, placeholderAnswerItem]
+    setChatList(newList)
+
+    // answer
+    const responseItem: ChatItem = {
+      id: `${Date.now()}`,
+      content: '',
+      agent_thoughts: [],
+      message_files: [],
+      isAnswer: true,
+    }
+
+    setIsResponsing(true)
+    hasStopResponded.current = false
+
+    const bodyParams = {
+      response_mode: 'streaming',
+      conversation_id: connversationId.current,
+      ...data,
+    }
+    if (bodyParams?.files?.length) {
+      bodyParams.files = bodyParams.files.map((item: VisionFile) => {
+        if (item.transfer_method === TransferMethod.local_file) {
+          return {
+            ...item,
+            url: '',
+          }
+        }
+        return item
+      })
+    }
+
+    let isAgentMode = false
+    let hasSetResponseId = false
+
+    ssePost(
+      url,
+      {
+        body: bodyParams,
+      },
+      {
+        getAbortController: (abortController) => {
+          setAbortController(abortController)
+        },
+        onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
+          if (!isAgentMode) {
+            responseItem.content = responseItem.content + message
+          }
+          else {
+            const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+            if (lastThought)
+              lastThought.thought = lastThought.thought + message // need immer setAutoFreeze
+          }
+
+          if (messageId && !hasSetResponseId) {
+            responseItem.id = messageId
+            hasSetResponseId = true
+          }
+
+          if (isFirstMessage && newConversationId)
+            connversationId.current = newConversationId
+
+          setTaskId(taskId)
+          if (messageId)
+            responseItem.id = messageId
+
+          updateCurrentQA({
+            responseItem,
+            questionId,
+            placeholderAnswerId,
+            questionItem,
+          })
+        },
+        async onCompleted(hasError?: boolean) {
+          setIsResponsing(false)
+
+          if (hasError)
+            return
+
+          if (connversationId.current) {
+            const { data }: any = await onGetConvesationMessages(
+              connversationId.current,
+              newAbortController => setConversationMessagesAbortController(newAbortController),
+            )
+            const newResponseItem = data.find((item: any) => item.id === responseItem.id)
+            if (!newResponseItem)
+              return
+
+            setChatList(produce(getChatList(), (draft) => {
+              const index = draft.findIndex(item => item.id === responseItem.id)
+              if (index !== -1) {
+                const requestion = draft[index - 1]
+                draft[index - 1] = {
+                  ...requestion,
+                  log: newResponseItem.message,
+                }
+                draft[index] = {
+                  ...draft[index],
+                  more: {
+                    time: dayjs.unix(newResponseItem.created_at).format('hh:mm A'),
+                    tokens: newResponseItem.answer_tokens + newResponseItem.message_tokens,
+                    latency: newResponseItem.provider_response_latency.toFixed(2),
+                  },
+                }
+              }
+            }))
+          }
+          if (config.suggested_questions_after_answer?.enabled && !hasStopResponded.current && onGetSuggestedQuestions) {
+            const { data }: any = await onGetSuggestedQuestions(
+              responseItem.id,
+              newAbortController => setSuggestedQuestionsAbortController(newAbortController),
+            )
+            setSuggestQuestions(data)
+          }
+        },
+        onFile(file) {
+          const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+          if (lastThought)
+            responseItem.agent_thoughts![responseItem.agent_thoughts!.length - 1].message_files = [...(lastThought as any).message_files, file]
+
+          updateCurrentQA({
+            responseItem,
+            questionId,
+            placeholderAnswerId,
+            questionItem,
+          })
+        },
+        onThought(thought) {
+          isAgentMode = true
+          const response = responseItem as any
+          if (thought.message_id && !hasSetResponseId)
+            response.id = thought.message_id
+          if (response.agent_thoughts.length === 0) {
+            response.agent_thoughts.push(thought)
+          }
+          else {
+            const lastThought = response.agent_thoughts[response.agent_thoughts.length - 1]
+            // thought changed but still the same thought, so update.
+            if (lastThought.id === thought.id) {
+              thought.thought = lastThought.thought
+              thought.message_files = lastThought.message_files
+              responseItem.agent_thoughts![response.agent_thoughts.length - 1] = thought
+            }
+            else {
+              responseItem.agent_thoughts!.push(thought)
+            }
+          }
+          updateCurrentQA({
+            responseItem,
+            questionId,
+            placeholderAnswerId,
+            questionItem,
+          })
+        },
+        onMessageEnd: (messageEnd) => {
+          if (messageEnd.metadata?.annotation_reply) {
+            responseItem.id = messageEnd.id
+            responseItem.annotation = ({
+              id: messageEnd.metadata.annotation_reply.id,
+              authorName: messageEnd.metadata.annotation_reply.account.name,
+            })
+            const newListWithAnswer = produce(
+              getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+              (draft) => {
+                if (!draft.find(item => item.id === questionId))
+                  draft.push({ ...questionItem })
+
+                draft.push({
+                  ...responseItem,
+                })
+              })
+            setChatList(newListWithAnswer)
+            return
+          }
+          responseItem.citation = messageEnd.metadata?.retriever_resources || []
+
+          const newListWithAnswer = produce(
+            getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+            (draft) => {
+              if (!draft.find(item => item.id === questionId))
+                draft.push({ ...questionItem })
+
+              draft.push({ ...responseItem })
+            })
+          setChatList(newListWithAnswer)
+        },
+        onMessageReplace: (messageReplace) => {
+          responseItem.content = messageReplace.answer
+        },
+        onError() {
+          setIsResponsing(false)
+          // role back placeholder answer
+          setChatList(produce(getChatList(), (draft) => {
+            draft.splice(draft.findIndex(item => item.id === placeholderAnswerId), 1)
+          }))
+        },
+      })
+    return true
+  }
+
+  return {
+    chatList,
+    getChatList,
+    setChatList,
+    conversationId: connversationId.current,
+    isResponsing,
+    setIsResponsing,
+    handleSend,
+    suggestedQuestions,
+    handleRestart,
+    handleStop,
+  }
+}
+
+export const useCurrentAnswerIsResponsing = (answerId: string) => {
+  const {
+    isResponsing,
+    chatList,
+  } = useChatContext()
+
+  const isLast = answerId === chatList[chatList.length - 1]?.id
+
+  return isLast && isResponsing
+}
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -0,0 +1,129 @@
+import type {
+  FC,
+  ReactNode,
+} from 'react'
+import {
+  memo,
+  useRef,
+} from 'react'
+import { useThrottleEffect } from 'ahooks'
+import type {
+  ChatConfig,
+  ChatItem,
+  OnSend,
+} from '../types'
+import Question from './question'
+import Answer from './answer'
+import ChatInput from './chat-input'
+import TryToAsk from './try-to-ask'
+import { ChatContextProvider } from './context'
+import type { Emoji } from '@/app/components/tools/types'
+
+export type ChatProps = {
+  config: ChatConfig
+  onSend?: OnSend
+  chatList: ChatItem[]
+  isResponsing: boolean
+  noChatInput?: boolean
+  chatContainerclassName?: string
+  chatFooterClassName?: string
+  suggestedQuestions?: string[]
+  showPromptLog?: boolean
+  questionIcon?: ReactNode
+  answerIcon?: ReactNode
+  allToolIcons?: Record<string, string | Emoji>
+}
+const Chat: FC<ChatProps> = ({
+  config,
+  onSend,
+  chatList,
+  isResponsing,
+  noChatInput,
+  chatContainerclassName,
+  chatFooterClassName,
+  suggestedQuestions,
+  showPromptLog,
+  questionIcon,
+  answerIcon,
+  allToolIcons,
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const chatFooterRef = useRef<HTMLDivElement>(null)
+
+  useThrottleEffect(() => {
+    if (ref.current)
+      ref.current.scrollTop = ref.current.scrollHeight
+  }, [chatList], { wait: 500 })
+
+  const hasTryToAsk = config.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend
+
+  return (
+    <ChatContextProvider
+      config={config}
+      chatList={chatList}
+      isResponsing={isResponsing}
+      showPromptLog={showPromptLog}
+      questionIcon={questionIcon}
+      answerIcon={answerIcon}
+      allToolIcons={allToolIcons}
+      onSend={onSend}
+    >
+      <div className='relative h-full'>
+        <div
+          ref={ref}
+          className={`relative h-full overflow-y-auto ${chatContainerclassName}`}
+        >
+          {
+            chatList.map((item) => {
+              if (item.isAnswer) {
+                return (
+                  <Answer
+                    key={item.id}
+                    item={item}
+                  />
+                )
+              }
+              return (
+                <Question
+                  key={item.id}
+                  item={item}
+                />
+              )
+            })
+          }
+          {
+            (hasTryToAsk || !noChatInput) && (
+              <div
+                className={`sticky bottom-0 w-full backdrop-blur-[20px] ${chatFooterClassName}`}
+                ref={chatFooterRef}
+                style={{
+                  background: 'linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.40) 100%)',
+                }}
+              >
+                {
+                  hasTryToAsk && (
+                    <TryToAsk
+                      suggestedQuestions={suggestedQuestions}
+                      onSend={onSend}
+                    />
+                  )
+                }
+                {
+                  !noChatInput && (
+                    <ChatInput
+                      visionConfig={config?.file_upload?.image}
+                      speechToTextConfig={config.speech_to_text}
+                      onSend={onSend}
+                    />
+                  )
+                }
+              </div>
+            )
+          }
+        </div>
+      </div>
+    </ChatContextProvider>
+  )
+}
+
+export default memo(Chat)
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -0,0 +1,62 @@
+import type { FC } from 'react'
+import { useRef } from 'react'
+import type { ChatItem } from '../types'
+import { useChatContext } from './context'
+import { QuestionTriangle } from '@/app/components/base/icons/src/vender/solid/general'
+import { User } from '@/app/components/base/icons/src/public/avatar'
+import Log from '@/app/components/app/chat/log'
+import { Markdown } from '@/app/components/base/markdown'
+import ImageGallery from '@/app/components/base/image-gallery'
+
+type QuestionProps = {
+  item: ChatItem
+}
+const Question: FC<QuestionProps> = ({
+  item,
+}) => {
+  const ref = useRef(null)
+  const {
+    showPromptLog,
+    isResponsing,
+    questionIcon,
+  } = useChatContext()
+  const {
+    content,
+    message_files,
+  } = item
+
+  const imgSrcs = message_files?.length ? message_files.map(item => item.url) : []
+
+  return (
+    <div className='flex justify-end mb-2 last:mb-0 pl-10' ref={ref}>
+      <div className='group relative mr-4'>
+        <QuestionTriangle className='absolute -right-2 top-0 w-2 h-3 text-[#D1E9FF]/50' />
+        {
+          showPromptLog && !isResponsing && (
+            <Log log={item.log!} containerRef={ref} />
+          )
+        }
+        <div className='px-4 py-3 bg-[#D1E9FF]/50 rounded-b-2xl rounded-tl-2xl text-sm text-gray-900'>
+          {
+            !!imgSrcs.length && (
+              <ImageGallery srcs={imgSrcs} />
+            )
+          }
+          <Markdown content={content} />
+        </div>
+        <div className='mt-1 h-[18px]' />
+      </div>
+      <div className='shrink-0 w-10 h-10'>
+        {
+          questionIcon || (
+            <div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
+              <User className='w-full h-full' />
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default Question
--- a/web/app/components/base/chat/chat/try-to-ask.tsx
+++ b/web/app/components/base/chat/chat/try-to-ask.tsx
@@ -0,0 +1,54 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { OnSend } from '../types'
+import { Star04 } from '@/app/components/base/icons/src/vender/solid/shapes'
+import Button from '@/app/components/base/button'
+
+type TryToAskProps = {
+  suggestedQuestions: string[]
+  onSend: OnSend
+}
+const TryToAsk: FC<TryToAskProps> = ({
+  suggestedQuestions,
+  onSend,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <div className='flex items-center mb-2.5 py-2'>
+        <div
+          className='grow h-[1px]'
+          style={{
+            background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)',
+          }}
+        />
+        <div className='shrink-0 flex items-center px-3 text-gray-500'>
+          <Star04 className='mr-1 w-2.5 h-2.5' />
+          <span className='text-xs text-gray-500 font-medium'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span>
+        </div>
+        <div
+          className='grow h-[1px]'
+          style={{
+            background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
+          }}
+        />
+      </div>
+      <div className='flex flex-wrap'>
+        {
+          suggestedQuestions.map((suggestQuestion, index) => (
+            <Button
+              key={index}
+              className='mb-2 mr-2 last:mr-0 px-3 py-[5px] bg-white text-primary-600 text-xs font-medium'
+              onClick={() => onSend(suggestQuestion)}
+            >
+              {suggestQuestion}
+            </Button>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default TryToAsk
--- a/web/app/components/base/chat/types.ts
+++ b/web/app/components/base/chat/types.ts
@@ -0,0 +1,48 @@
+import type {
+  ModelConfig,
+  VisionFile,
+  VisionSettings,
+} from '@/types/app'
+import type { IChatItem } from '@/app/components/app/chat/type'
+
+export type { VisionFile } from '@/types/app'
+export { TransferMethod } from '@/types/app'
+export type {
+  Inputs,
+  PromptVariable,
+} from '@/models/debug'
+
+export type UserInputForm = {
+  default: string
+  label: string
+  required: boolean
+  variable: string
+}
+
+export type UserInputFormTextInput = {
+  'text-inpput': UserInputForm & {
+    max_length: number
+  }
+}
+
+export type UserInputFormSelect = {
+  'select': UserInputForm & {
+    options: string[]
+  }
+}
+
+export type UserInputFormParagraph = {
+  'paragraph': UserInputForm
+}
+
+export type VisionConfig = VisionSettings
+
+export type EnableType = {
+  enabled: boolean
+}
+
+export type ChatConfig = Omit<ModelConfig, 'model'>
+
+export type ChatItem = IChatItem
+
+export type OnSend = (message: string, files?: VisionFile[]) => void
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -0,0 +1,97 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+export type Item = {
+  value: string
+  text: string
+}
+type DropdownProps = {
+  items: Item[]
+  secondItems?: Item[]
+  onSelect: (item: Item) => void
+  renderTrigger?: (open: boolean) => React.ReactNode
+}
+const Dropdown: FC<DropdownProps> = ({
+  items,
+  onSelect,
+  secondItems,
+  renderTrigger,
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        {
+          renderTrigger
+            ? renderTrigger(open)
+            : (
+              <div
+                className={`
+                  flex items-center justify-center w-6 h-6 cursor-pointer rounded-md
+                  ${open && 'bg-black/5'}
+                `}
+              >
+                <DotsHorizontal className='w-4 h-4 text-gray-500' />
+              </div>
+            )
+        }
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg text-sm text-gray-700'>
+          {
+            !!items.length && (
+              <div className='p-1'>
+                {
+                  items.map(item => (
+                    <div
+                      key={item.value}
+                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-gray-100'
+                      onClick={() => onSelect(item)}
+                    >
+                      {item.text}
+                    </div>
+                  ))
+                }
+              </div>
+            )
+          }
+          {
+            (!!items.length && !!secondItems?.length) && (
+              <div className='h-[1px] bg-gray-100' />
+            )
+          }
+          {
+            !!secondItems?.length && (
+              <div className='p-1'>
+                {
+                  secondItems.map(item => (
+                    <div
+                      key={item.value}
+                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-gray-100'
+                      onClick={() => onSelect(item)}
+                    >
+                      {item.text}
+                    </div>
+                  ))
+                }
+              </div>
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default Dropdown
--- a/web/app/components/base/icons/assets/vender/solid/communication/message-heart-circle.svg
+++ b/web/app/components/base/icons/assets/vender/solid/communication/message-heart-circle.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="message-heart-circle">
+<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.33334 1.3335C4.83554 1.3335 2.00001 4.16903 2.00001 7.66683C2.00001 8.3735 2.116 9.05444 2.33051 9.69084C2.36824 9.80278 2.39045 9.86902 2.40488 9.91786L2.40961 9.93431L2.40711 9.93952C2.38997 9.97486 2.36451 10.0223 2.31687 10.1105L1.21562 12.1489C1.14736 12.2751 1.07614 12.4069 1.02717 12.5214C0.978485 12.6353 0.89963 12.8442 0.93843 13.0919C0.983911 13.3822 1.15477 13.6378 1.40562 13.7908C1.61963 13.9213 1.84282 13.9283 1.96665 13.9269C2.09123 13.9254 2.24018 13.91 2.38296 13.8952L5.8196 13.54C5.87464 13.5343 5.90342 13.5314 5.92449 13.5297L5.92721 13.5295L5.93545 13.5325C5.96135 13.5418 5.99648 13.5553 6.05711 13.5786C6.76441 13.8511 7.53226 14.0002 8.33334 14.0002C11.8311 14.0002 14.6667 11.1646 14.6667 7.66683C14.6667 4.16903 11.8311 1.3335 8.33334 1.3335ZM5.97972 5.72165C6.73124 5.08746 7.73145 5.27376 8.33126 5.96633C8.93106 5.27376 9.91836 5.09414 10.6828 5.72165C11.4472 6.34916 11.5401 7.41616 10.9499 8.16621C10.5843 8.63089 9.66661 9.4796 9.02123 10.0581C8.78417 10.2706 8.66564 10.3769 8.52339 10.4197C8.40136 10.4564 8.26116 10.4564 8.13913 10.4197C7.99688 10.3769 7.87835 10.2706 7.64128 10.0581C6.9959 9.4796 6.0782 8.63089 5.71257 8.16621C5.1224 7.41616 5.22821 6.35583 5.97972 5.72165Z" fill="#DD2590"/>
+</g>
+</svg>
--- a/web/app/components/base/icons/assets/vender/solid/communication/send-03.svg
+++ b/web/app/components/base/icons/assets/vender/solid/communication/send-03.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="send-03">
+<path id="Solid" d="M18.4385 10.5535C18.6111 10.2043 18.6111 9.79465 18.4385 9.44548C18.2865 9.13803 18.0197 8.97682 17.8815 8.89905C17.7327 8.81532 17.542 8.72955 17.3519 8.64403L3.36539 2.35014C3.17087 2.26257 2.97694 2.17526 2.81335 2.11859C2.66315 2.06656 2.36076 1.97151 2.02596 2.06467C1.64761 2.16994 1.34073 2.4469 1.19734 2.81251C1.07045 3.13604 1.13411 3.44656 1.17051 3.60129C1.21017 3.76983 1.27721 3.9717 1.34445 4.17418L2.69818 8.25278C2.80718 8.58118 2.86168 8.74537 2.96302 8.86678C3.05252 8.97399 3.16752 9.05699 3.29746 9.10816C3.44462 9.1661 3.61762 9.1661 3.96363 9.1661H10.0001C10.4603 9.1661 10.8334 9.53919 10.8334 9.99943C10.8334 10.4597 10.4603 10.8328 10.0001 10.8328H3.97939C3.63425 10.8328 3.46168 10.8328 3.3148 10.8905C3.18508 10.9414 3.07022 11.0241 2.98072 11.1309C2.87937 11.2519 2.82459 11.4155 2.71502 11.7428L1.3504 15.8191C1.28243 16.0221 1.21472 16.2242 1.17455 16.3929C1.13773 16.5476 1.07301 16.8587 1.19956 17.1831C1.34245 17.5493 1.64936 17.827 2.02806 17.9327C2.36342 18.0263 2.6665 17.9309 2.81674 17.8789C2.98066 17.8221 3.17507 17.7346 3.37023 17.6467L17.3518 11.355C17.542 11.2695 17.7327 11.1837 17.8815 11.0999C18.0197 11.0222 18.2865 10.861 18.4385 10.5535Z" fill="#D0D5DD"/>
+</g>
+</svg>
--- a/web/app/components/base/icons/assets/vender/solid/general/answer-triangle.svg
+++ b/web/app/components/base/icons/assets/vender/solid/general/answer-triangle.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 1" d="M1.03647 1.5547C0.59343 0.890144 1.06982 0 1.86852 0H8V12L1.03647 1.5547Z" fill="#F2F4F7"/>
+</svg>
--- a/web/app/components/base/icons/assets/vender/solid/general/question-triangle.svg
+++ b/web/app/components/base/icons/assets/vender/solid/general/question-triangle.svg
@@ -0,0 +1,6 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 2">
+<path d="M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z" fill="white"/>
+<path d="M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z" fill="#D1E9FF" fill-opacity="0.5"/>
+</g>
+</svg>
--- a/web/app/components/base/icons/assets/vender/solid/shapes/star-04.svg
+++ b/web/app/components/base/icons/assets/vender/solid/shapes/star-04.svg
@@ -0,0 +1,5 @@
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="star-04">
+<path id="Solid" d="M5.88897 0.683596C5.82708 0.522683 5.67249 0.416504 5.50008 0.416504C5.32768 0.416504 5.17308 0.522683 5.11119 0.683596L4.27287 2.86321C4.1477 3.18865 4.10837 3.28243 4.05457 3.35809C4.00059 3.43401 3.93426 3.50034 3.85834 3.55433C3.78267 3.60813 3.68889 3.64746 3.36346 3.77263L1.18384 4.61094C1.02293 4.67283 0.916748 4.82743 0.916748 4.99984C0.916748 5.17224 1.02293 5.32684 1.18384 5.38873L3.36346 6.22705C3.68889 6.35221 3.78267 6.39155 3.85834 6.44535C3.93426 6.49933 4.00059 6.56566 4.05457 6.64158C4.10837 6.71724 4.1477 6.81102 4.27287 7.13646L5.11119 9.31608C5.17308 9.47699 5.32768 9.58317 5.50008 9.58317C5.67249 9.58317 5.82709 9.47699 5.88898 9.31608L6.72729 7.13646C6.85246 6.81102 6.89179 6.71724 6.94559 6.64158C6.99957 6.56566 7.06591 6.49933 7.14183 6.44535C7.21749 6.39155 7.31127 6.35221 7.6367 6.22705L9.81632 5.38873C9.97723 5.32684 10.0834 5.17224 10.0834 4.99984C10.0834 4.82743 9.97723 4.67283 9.81632 4.61094L7.6367 3.77263C7.31127 3.64746 7.21749 3.60813 7.14183 3.55433C7.06591 3.50034 6.99957 3.43401 6.94559 3.35809C6.89179 3.28243 6.85246 3.18865 6.72729 2.86321L5.88897 0.683596Z" fill="#667085"/>
+</g>
+</svg>
--- a/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.json
+++ b/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.json
@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "message-heart-circle"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M8.33334 1.3335C4.83554 1.3335 2.00001 4.16903 2.00001 7.66683C2.00001 8.3735 2.116 9.05444 2.33051 9.69084C2.36824 9.80278 2.39045 9.86902 2.40488 9.91786L2.40961 9.93431L2.40711 9.93952C2.38997 9.97486 2.36451 10.0223 2.31687 10.1105L1.21562 12.1489C1.14736 12.2751 1.07614 12.4069 1.02717 12.5214C0.978485 12.6353 0.89963 12.8442 0.93843 13.0919C0.983911 13.3822 1.15477 13.6378 1.40562 13.7908C1.61963 13.9213 1.84282 13.9283 1.96665 13.9269C2.09123 13.9254 2.24018 13.91 2.38296 13.8952L5.8196 13.54C5.87464 13.5343 5.90342 13.5314 5.92449 13.5297L5.92721 13.5295L5.93545 13.5325C5.96135 13.5418 5.99648 13.5553 6.05711 13.5786C6.76441 13.8511 7.53226 14.0002 8.33334 14.0002C11.8311 14.0002 14.6667 11.1646 14.6667 7.66683C14.6667 4.16903 11.8311 1.3335 8.33334 1.3335ZM5.97972 5.72165C6.73124 5.08746 7.73145 5.27376 8.33126 5.96633C8.93106 5.27376 9.91836 5.09414 10.6828 5.72165C11.4472 6.34916 11.5401 7.41616 10.9499 8.16621C10.5843 8.63089 9.66661 9.4796 9.02123 10.0581C8.78417 10.2706 8.66564 10.3769 8.52339 10.4197C8.40136 10.4564 8.26116 10.4564 8.13913 10.4197C7.99688 10.3769 7.87835 10.2706 7.64128 10.0581C6.9959 9.4796 6.0782 8.63089 5.71257 8.16621C5.1224 7.41616 5.22821 6.35583 5.97972 5.72165Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "MessageHeartCircle"
+}
--- a/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.tsx
+++ b/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './MessageHeartCircle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'MessageHeartCircle'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/solid/communication/Send03.json
+++ b/web/app/components/base/icons/src/vender/solid/communication/Send03.json
@@ -0,0 +1,36 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "20",
+			"height": "20",
+			"viewBox": "0 0 20 20",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "send-03"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"d": "M18.4385 10.5535C18.6111 10.2043 18.6111 9.79465 18.4385 9.44548C18.2865 9.13803 18.0197 8.97682 17.8815 8.89905C17.7327 8.81532 17.542 8.72955 17.3519 8.64403L3.36539 2.35014C3.17087 2.26257 2.97694 2.17526 2.81335 2.11859C2.66315 2.06656 2.36076 1.97151 2.02596 2.06467C1.64761 2.16994 1.34073 2.4469 1.19734 2.81251C1.07045 3.13604 1.13411 3.44656 1.17051 3.60129C1.21017 3.76983 1.27721 3.9717 1.34445 4.17418L2.69818 8.25278C2.80718 8.58118 2.86168 8.74537 2.96302 8.86678C3.05252 8.97399 3.16752 9.05699 3.29746 9.10816C3.44462 9.1661 3.61762 9.1661 3.96363 9.1661H10.0001C10.4603 9.1661 10.8334 9.53919 10.8334 9.99943C10.8334 10.4597 10.4603 10.8328 10.0001 10.8328H3.97939C3.63425 10.8328 3.46168 10.8328 3.3148 10.8905C3.18508 10.9414 3.07022 11.0241 2.98072 11.1309C2.87937 11.2519 2.82459 11.4155 2.71502 11.7428L1.3504 15.8191C1.28243 16.0221 1.21472 16.2242 1.17455 16.3929C1.13773 16.5476 1.07301 16.8587 1.19956 17.1831C1.34245 17.5493 1.64936 17.827 2.02806 17.9327C2.36342 18.0263 2.6665 17.9309 2.81674 17.8789C2.98066 17.8221 3.17507 17.7346 3.37023 17.6467L17.3518 11.355C17.542 11.2695 17.7327 11.1837 17.8815 11.0999C18.0197 11.0222 18.2865 10.861 18.4385 10.5535Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Send03"
+}
--- a/web/app/components/base/icons/src/vender/solid/communication/Send03.tsx
+++ b/web/app/components/base/icons/src/vender/solid/communication/Send03.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Send03.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Send03'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/solid/communication/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/communication/index.ts
@@ -2,3 +2,5 @@ export { default as AiText } from './AiText'
 export { default as CuteRobote } from './CuteRobote'
 export { default as MessageDotsCircle } from './MessageDotsCircle'
 export { default as MessageFast } from './MessageFast'
+export { default as MessageHeartCircle } from './MessageHeartCircle'
+export { default as Send03 } from './Send03'
--- a/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.json
+++ b/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.json
@@ -0,0 +1,27 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "8",
+			"height": "12",
+			"viewBox": "0 0 8 12",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"id": "Rectangle 1",
+					"d": "M1.03647 1.5547C0.59343 0.890144 1.06982 0 1.86852 0H8V12L1.03647 1.5547Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "AnswerTriangle"
+}
--- a/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.tsx
+++ b/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AnswerTriangle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'AnswerTriangle'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.json
+++ b/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.json
@@ -0,0 +1,45 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "8",
+			"height": "12",
+			"viewBox": "0 0 8 12",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Rectangle 2"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z",
+							"fill": "currentColor",
+							"fill-opacity": "0.5"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "QuestionTriangle"
+}
--- a/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.tsx
+++ b/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './QuestionTriangle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'QuestionTriangle'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/solid/general/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/general/index.ts
@@ -1,3 +1,4 @@
+export { default as AnswerTriangle } from './AnswerTriangle'
 export { default as CheckCircle } from './CheckCircle'
 export { default as CheckDone01 } from './CheckDone01'
 export { default as Download02 } from './Download02'
@@ -5,6 +6,7 @@ export { default as Edit04 } from './Edit04'
 export { default as Eye } from './Eye'
 export { default as MessageClockCircle } from './MessageClockCircle'
 export { default as PlusCircle } from './PlusCircle'
+export { default as QuestionTriangle } from './QuestionTriangle'
 export { default as SearchMd } from './SearchMd'
 export { default as Target04 } from './Target04'
 export { default as Tool03 } from './Tool03'
--- a/web/app/components/base/icons/src/vender/solid/shapes/Star04.json
+++ b/web/app/components/base/icons/src/vender/solid/shapes/Star04.json
@@ -0,0 +1,36 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "11",
+			"height": "10",
+			"viewBox": "0 0 11 10",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "star-04"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"d": "M5.88897 0.683596C5.82708 0.522683 5.67249 0.416504 5.50008 0.416504C5.32768 0.416504 5.17308 0.522683 5.11119 0.683596L4.27287 2.86321C4.1477 3.18865 4.10837 3.28243 4.05457 3.35809C4.00059 3.43401 3.93426 3.50034 3.85834 3.55433C3.78267 3.60813 3.68889 3.64746 3.36346 3.77263L1.18384 4.61094C1.02293 4.67283 0.916748 4.82743 0.916748 4.99984C0.916748 5.17224 1.02293 5.32684 1.18384 5.38873L3.36346 6.22705C3.68889 6.35221 3.78267 6.39155 3.85834 6.44535C3.93426 6.49933 4.00059 6.56566 4.05457 6.64158C4.10837 6.71724 4.1477 6.81102 4.27287 7.13646L5.11119 9.31608C5.17308 9.47699 5.32768 9.58317 5.50008 9.58317C5.67249 9.58317 5.82709 9.47699 5.88898 9.31608L6.72729 7.13646C6.85246 6.81102 6.89179 6.71724 6.94559 6.64158C6.99957 6.56566 7.06591 6.49933 7.14183 6.44535C7.21749 6.39155 7.31127 6.35221 7.6367 6.22705L9.81632 5.38873C9.97723 5.32684 10.0834 5.17224 10.0834 4.99984C10.0834 4.82743 9.97723 4.67283 9.81632 4.61094L7.6367 3.77263C7.31127 3.64746 7.21749 3.60813 7.14183 3.55433C7.06591 3.50034 6.99957 3.43401 6.94559 3.35809C6.89179 3.28243 6.85246 3.18865 6.72729 2.86321L5.88897 0.683596Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Star04"
+}
--- a/web/app/components/base/icons/src/vender/solid/shapes/Star04.tsx
+++ b/web/app/components/base/icons/src/vender/solid/shapes/Star04.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Star04.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Star04'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/solid/shapes/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/shapes/index.ts
@@ -0,0 +1 @@
+export { default as Star04 } from './Star04'
--- a/web/app/components/base/text-generation/hooks.ts
+++ b/web/app/components/base/text-generation/hooks.ts
@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToastContext } from '@/app/components/base/toast'
+import { ssePost } from '@/service/base'
+
+export const useTextGeneration = () => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const [isResponsing, setIsResponsing] = useState(false)
+  const [completion, setCompletion] = useState('')
+  const [messageId, setMessageId] = useState<string | null>(null)
+
+  const handleSend = async (
+    url: string,
+    data: any,
+  ) => {
+    if (isResponsing) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
+      return false
+    }
+
+    setIsResponsing(true)
+    setCompletion('')
+    setMessageId('')
+    let res: string[] = []
+    ssePost(
+      url,
+      {
+        body: {
+          response_mode: 'streaming',
+          ...data,
+        },
+      },
+      {
+        onData: (data: string, _isFirstMessage: boolean, { messageId }) => {
+          res.push(data)
+          setCompletion(res.join(''))
+          setMessageId(messageId)
+        },
+        onMessageReplace: (messageReplace) => {
+          res = [messageReplace.answer]
+          setCompletion(res.join(''))
+        },
+        onCompleted() {
+          setIsResponsing(false)
+        },
+        onError() {
+          setIsResponsing(false)
+        },
+      })
+    return true
+  }
+
+  return {
+    completion,
+    isResponsing,
+    setIsResponsing,
+    handleSend,
+    messageId,
+  }
+}
--- a/web/app/components/base/text-generation/types.ts
+++ b/web/app/components/base/text-generation/types.ts
@@ -0,0 +1,41 @@
+import type {
+  ModelConfig,
+  VisionFile,
+  VisionSettings,
+} from '@/types/app'
+
+export type { VisionFile } from '@/types/app'
+export { TransferMethod } from '@/types/app'
+
+export type UserInputForm = {
+  default: string
+  label: string
+  required: boolean
+  variable: string
+}
+
+export type UserInputFormTextInput = {
+  'text-inpput': UserInputForm & {
+    max_length: number
+  }
+}
+
+export type UserInputFormSelect = {
+  'select': UserInputForm & {
+    options: string[]
+  }
+}
+
+export type UserInputFormParagraph = {
+  'paragraph': UserInputForm
+}
+
+export type VisionConfig = VisionSettings
+
+export type EnableType = {
+  enabled: boolean
+}
+
+export type TextGenerationConfig = Omit<ModelConfig, 'model'>
+
+export type OnSend = (message: string, files?: VisionFile[]) => void
				`@@ -0,0 +1 @@`
				`export { default as Star04 } from './Star04'`