feat: multiple model configuration (#2196)

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

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,
+  }
+}

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