Merge pull request #105 from tipisai/beta

fix: upload store problem

apps/agent/src/components/PreviewChat/index.tsx

@@ -29,7 +29,7 @@ import AIAgentMessage from "@/page/WorkSpace/AI/components/AIAgentMessage"
 import GroupAgentMessage from "@/page/WorkSpace/AI/components/GroupAgentMessage"
 import UserMessage from "@/page/WorkSpace/AI/components/UserMessage"
 import { isGroupMessage } from "@/utils/agent/typeHelper"
-import { chatUploadStore, useUploadFileToDrive } from "@/utils/drive"
+import { UploadFileStore, useUploadFileToDrive } from "@/utils/drive"
 import { multipleFileHandler } from "@/utils/drive/utils"
 import { PreviewChatUseContext } from "./PreviewChatUseContext"
 import { SEND_MESSAGE_WS_TYPE } from "./TipisWebscoketContext/interface"
@@ -67,6 +67,8 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
 
   const { useTo } = useContext(PreviewChatUseContext)
 
+  const chatUploadStoreRef = useRef(new UploadFileStore())
+
   const {
     getReadyState,
     isRunning,
@@ -146,7 +148,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
     })
     const files = knowledgeFiles.filter((file) => file.fileName !== fileName)
     setKnowledgeFiles(files)
-    queryID && chatUploadStore.deleteFileDetailInfo(queryID)
+    queryID && chatUploadStoreRef.current.deleteFileDetailInfo(queryID)
   }
 
   const handleClickUploadFile = () => {
@@ -190,7 +192,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
     const formatFiles = multipleFileHandler(
       inputFiles,
       currentFiles,
-      chatUploadStore,
+      chatUploadStoreRef.current,
     )
     currentFiles.push(
       ...formatFiles.map((item) => ({
@@ -215,14 +217,14 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
           setKnowledgeFiles(
             currentFiles.filter((file) => file.fileName !== item.fileName),
           )
-          chatUploadStore.deleteFileDetailInfo(item.queryID)
+          chatUploadStoreRef.current.deleteFileDetailInfo(item.queryID)
           continue
         }
         const fileID = await uploadChatFile(
           item.queryID,
           file,
           abortController.signal,
-          chatUploadStore,
+          chatUploadStoreRef.current,
         )
 
         if (!!fileID) {
@@ -280,7 +282,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
       } as ChatMessage)
       setTextAreaVal("")
       setKnowledgeFiles([])
-      chatUploadStore.clearStore()
+      chatUploadStoreRef.current.clearStore()
     }
   }, [currentUserInfo?.userID, knowledgeFiles, onSendMessage, textAreaVal])
 
@@ -316,6 +318,13 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
     }
   }
 
+  useEffect(() => {
+    const chatUploadStore = chatUploadStoreRef.current
+    return () => {
+      chatUploadStore.clearStore()
+    }
+  }, [])
+
   return (
     <div css={previewChatContainerStyle}>
       <div ref={chatRef} css={chatContainerStyle}>
@@ -420,7 +429,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
             <UploadKnowledgeFiles
               knowledgeFiles={knowledgeFiles}
               handleDeleteFile={handleDeleteFile}
-              chatUploadStore={chatUploadStore}
+              chatUploadStore={chatUploadStoreRef.current}
             />
           </div>
         ) : (
@@ -438,7 +447,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
               <UploadKnowledgeFiles
                 knowledgeFiles={knowledgeFiles}
                 handleDeleteFile={handleDeleteFile}
-                chatUploadStore={chatUploadStore}
+                chatUploadStore={chatUploadStoreRef.current}
               />
               <div css={sendButtonStyle}>
                 <UploadButton

apps/agent/src/page/WorkSpace/AI/AIAgent/components/KnowledgeEditor/index.tsx

@@ -1,12 +1,12 @@
-import { FC, memo } from "react"
+import { FC, memo, useContext } from "react"
 import { Controller, useFormContext, useFormState } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { IKnowledgeFile } from "@illa-public/public-types"
 import { ErrorText } from "@/Layout/Form/ErrorText"
 import LayoutBlock from "@/Layout/Form/LayoutBlock"
 import { IAgentForm, SCROLL_ID } from "@/page/WorkSpace/AI/AIAgent/interface"
 import KnowledgeUpload from "@/page/WorkSpace/AI/components/KnowledgeUpload"
-import { editPanelUpdateFileDetailStore } from "@/utils/drive"
+import { UploadContext } from "../UploadContext"
 import { descStyle } from "./style"
 
 const KnowledgeEditor: FC = memo(() => {
@@ -16,14 +16,15 @@ const KnowledgeEditor: FC = memo(() => {
   const { errors } = useFormState({
     control: control,
   })
+  const { uploadFileStore } = useContext(UploadContext)
 
   return (
     <Controller
       name="knowledge"
       control={control}
       rules={{
         validate: () => {
-          const isValidate = !editPanelUpdateFileDetailStore.hasPendingFile()
+          const isValidate = !uploadFileStore.hasPendingFile()
           return isValidate
             ? isValidate
             : t("dashboard.message.parsing_file_in_prog")

apps/agent/src/page/WorkSpace/AI/AIAgent/components/SaveButton/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useState } from "react"
+import { memo, useContext, useState } from "react"
 import {
   FieldErrors,
   useFormContext,
@@ -8,9 +8,9 @@ import {
 import { useTranslation } from "react-i18next"
 import { TipisTrack } from "@illa-public/track-utils"
 import BlackButton from "@/components/BlackButton"
-import { editPanelUpdateFileDetailStore } from "@/utils/drive"
 import { IAgentForm, SCROLL_ID } from "../../interface"
 import { handleScrollToElement, useSubmitSaveAgent } from "../../utils"
+import { UploadContext } from "../UploadContext"
 
 const SaveButton = memo(() => {
   const { control, trigger, getValues } = useFormContext<IAgentForm>()
@@ -21,6 +21,7 @@ const SaveButton = memo(() => {
   })
   const { t } = useTranslation()
   const handleSubmitSave = useSubmitSaveAgent()
+  const { uploadFileStore } = useContext(UploadContext)
   const [isLoading, setIsLoading] = useState(false)
 
   const handleVerifyOnSave = async () => {
@@ -59,7 +60,7 @@ const SaveButton = memo(() => {
     if (validate) {
       const agentInfo = getValues()
       await handleSubmitSave(agentInfo)
-      editPanelUpdateFileDetailStore.clearStore()
+      uploadFileStore.clearStore()
     }
     TipisTrack.track("validate_save", {
       parameter1: aiAgentID ? "edit" : "create",

apps/agent/src/page/WorkSpace/AI/AIAgent/components/StartButton/index.tsx

@@ -12,12 +12,12 @@ import {
   EDIT_TIPI_TEMPLATE_PATH,
   WORKSPACE_LAYOUT_PATH,
 } from "@/router/constants"
-import { editPanelUpdateFileDetailStore } from "@/utils/drive"
 import { removeChatMessageAndUIState } from "@/utils/localForage/teamData"
 import { CREATE_TIPIS_ID } from "@/utils/recentTabs/constants"
 import { AgentWSContext } from "../../../context/AgentWSContext"
 import { IAgentForm, SCROLL_ID } from "../../interface"
 import { handleScrollToElement } from "../../utils"
+import { UploadContext } from "../UploadContext"
 import { IStartButtonProps } from "./interface"
 
 const StartButton: FC<IStartButtonProps> = (props) => {
@@ -27,6 +27,7 @@ const StartButton: FC<IStartButtonProps> = (props) => {
     useContext(AgentWSContext)
 
   const { clearErrors, getValues, setError } = useFormContext<IAgentForm>()
+  const { uploadFileStore } = useContext(UploadContext)
 
   const editTipiPathMatch = useMatch(
     `${WORKSPACE_LAYOUT_PATH}/${EDIT_TIPI_TEMPLATE_PATH}`,
@@ -54,7 +55,7 @@ const StartButton: FC<IStartButtonProps> = (props) => {
       })
       handleScrollToElement(SCROLL_ID.VARIABLES)
       return false
-    } else if (editPanelUpdateFileDetailStore.hasPendingFile()) {
+    } else if (uploadFileStore.hasPendingFile()) {
       setError("knowledge", {
         type: "knowledge",
         message: t("dashboard.message.parsing_file_in_prog"),

apps/agent/src/page/WorkSpace/AI/AIAgent/components/UploadContext/index.tsx

@@ -0,0 +1,23 @@
+import { FC, createContext, useRef } from "react"
+import { UploadFileStore } from "@/utils/drive"
+import {
+  IUploadContextInjectProps,
+  IUploadContextProviderProps,
+} from "./interface"
+
+export const UploadContext = createContext({} as IUploadContextInjectProps)
+
+export const UploadContextProvider: FC<IUploadContextProviderProps> = (
+  props,
+) => {
+  const uploadFileStore = useRef(new UploadFileStore())
+  return (
+    <UploadContext.Provider
+      value={{
+        uploadFileStore: uploadFileStore.current,
+      }}
+    >
+      {props.children}
+    </UploadContext.Provider>
+  )
+}

apps/agent/src/page/WorkSpace/AI/AIAgent/components/UploadContext/interface.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react"
+import { UploadFileStore } from "@/utils/drive"
+
+export interface IUploadContextInjectProps {
+  uploadFileStore: UploadFileStore
+}
+
+export interface IUploadContextProviderProps {
+  children: ReactNode
+}

apps/agent/src/page/WorkSpace/AI/AIAgent/createAgent.tsx

@@ -18,6 +18,7 @@ import { AgentWSProvider } from "../context/AgentWSContext"
 import { AIAgent } from "./aiagent"
 import FormContext from "./components/FormContext"
 import HeaderTools from "./components/HeaderTools"
+import { UploadContextProvider } from "./components/UploadContext"
 import { AgentInitial, IAgentForm } from "./interface"
 
 export const CreateAIAgentPage: FC = () => {
@@ -92,15 +93,17 @@ export const CreateAIAgentPage: FC = () => {
       <TipisWebSocketProvider key={CREATE_TIPIS_ID}>
         <AgentWSProvider>
           <FormContext>
-            <LayoutAutoChange
-              desktopPage={
-                <WorkspacePCHeaderLayout
-                  title={t("dashboard.button.blank-agent")}
-                  extra={<HeaderTools />}
-                />
-              }
-            />
-            <AIAgent />
+            <UploadContextProvider>
+              <LayoutAutoChange
+                desktopPage={
+                  <WorkspacePCHeaderLayout
+                    title={t("dashboard.button.blank-agent")}
+                    extra={<HeaderTools />}
+                  />
+                }
+              />
+              <AIAgent />
+            </UploadContextProvider>
           </FormContext>
         </AgentWSProvider>
       </TipisWebSocketProvider>

apps/agent/src/page/WorkSpace/AI/AIAgent/editAgent.tsx

@@ -18,6 +18,7 @@ import { AgentWSProvider } from "../context/AgentWSContext"
 import { AIAgent } from "./aiagent"
 import FormContext from "./components/FormContext"
 import HeaderTools from "./components/HeaderTools"
+import { UploadContextProvider } from "./components/UploadContext"
 import { AgentInitial, IAgentForm } from "./interface"
 
 export const EditAIAgentPage: FC = () => {
@@ -128,15 +129,17 @@ export const EditAIAgentPage: FC = () => {
       <TipisWebSocketProvider key={agentID}>
         <AgentWSProvider>
           <FormContext>
-            <LayoutAutoChange
-              desktopPage={
-                <WorkspacePCHeaderLayout
-                  title={data.name}
-                  extra={<HeaderTools />}
-                />
-              }
-            />
-            <AIAgent />
+            <UploadContextProvider>
+              <LayoutAutoChange
+                desktopPage={
+                  <WorkspacePCHeaderLayout
+                    title={data.name}
+                    extra={<HeaderTools />}
+                  />
+                }
+              />
+              <AIAgent />
+            </UploadContextProvider>
           </FormContext>
         </AgentWSProvider>
       </TipisWebSocketProvider>