feat: multiple model configuration (#2196)

Co-authored-by: Joel <iamjoel007@gmail.com>

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

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

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

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

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

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