feat: support GPT-4o #771 and hide the add button when the folder is a knowledge base (#775)

### What problem does this PR solve?

feat: support GPT-4o  #771 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/llmHooks.ts

@@ -67,13 +67,15 @@ export const useSelectLlmOptionsByModelType = () => {
   const groupOptionsByModelType = (modelType: LlmModelType) => {
     return Object.entries(llmInfo)
       .filter(([, value]) =>
-        modelType ? value.some((x) => x.model_type === modelType) : true,
+        modelType ? value.some((x) => x.model_type.includes(modelType)) : true,
       )
       .map(([key, value]) => {
         return {
           label: key,
           options: value
-            .filter((x) => (modelType ? x.model_type === modelType : true))
+            .filter((x) =>
+              modelType ? x.model_type.includes(modelType) : true,
+            )
             .map((x) => ({
               label: x.llm_name,
               value: x.llm_name,

web/src/hooks/logicHooks.ts

@@ -1,7 +1,11 @@
+import { Authorization } from '@/constants/authorization';
 import { LanguageTranslationMap } from '@/constants/common';
 import { Pagination } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import api from '@/utils/api';
+import authorizationUtil from '@/utils/authorizationUtil';
+import { getSearchValue } from '@/utils/commonUtil';
 import { PaginationProps } from 'antd';
 import axios from 'axios';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -133,3 +137,63 @@ export const useFetchAppConf = () => {
 
   return appConf;
 };
+
+export const useConnectWithSse = (url: string) => {
+  const [content, setContent] = useState<string>('');
+
+  const connect = useCallback(() => {
+    const source = new EventSource(
+      url || '/sse/createSseEmitter?clientId=123456',
+    );
+
+    source.onopen = function () {
+      console.log('Connection to the server was opened.');
+    };
+
+    source.onmessage = function (event: any) {
+      setContent(event.data);
+    };
+
+    source.onerror = function (error) {
+      console.error('Error occurred:', error);
+    };
+  }, [url]);
+
+  return { connect, content };
+};
+
+export const useConnectWithSseNext = () => {
+  const [content, setContent] = useState<string>('');
+  const sharedId = getSearchValue('shared_id');
+  const authorization = sharedId
+    ? 'Bearer ' + sharedId
+    : authorizationUtil.getAuthorization();
+  const send = useCallback(
+    async (body: any) => {
+      const response = await fetch(api.completeConversation, {
+        method: 'POST',
+        headers: {
+          [Authorization]: authorization,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+      });
+      const reader = response?.body
+        ?.pipeThrough(new TextDecoderStream())
+        .getReader();
+
+      // const reader = response.body.getReader();
+
+      while (true) {
+        const { value, done } = await reader?.read();
+        console.log('Received', value);
+        setContent(value);
+        if (done) break;
+      }
+      return response;
+    },
+    [authorization],
+  );
+
+  return { send, content };
+};

web/src/pages/chat/hooks.ts

@@ -518,6 +518,7 @@ export const useSendMessage = (
   const completeConversation = useCompleteConversation();
 
   const { handleClickConversation } = useClickConversationCard();
+  // const { send } = useConnectWithSseNext();
 
   const sendMessage = useCallback(
     async (message: string, id?: string) => {