feat: agent support file parse message & upload parse file

apps/builder/package.json

@@ -105,6 +105,7 @@
     "klona": "^2.0.6",
     "lodash-es": "^4.17.21",
     "lottie-react": "^2.4.0",
+    "mammoth": "^1.7.0",
     "numbro": "^2.4.0",
     "overlap-area": "^1.1.0",
     "papaparse": "^5.4.1",
@@ -146,7 +147,7 @@
     "toposort": "^2.0.2",
     "ts-key-enum": "^2.0.12",
     "uuid": "^8.3.2",
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
   "devDependencies": {
     "@mdx-js/rollup": "^2.3.0",

apps/builder/src/page/AI/AIAgent/aiagent.tsx

@@ -21,6 +21,7 @@ import {
   AI_AGENT_MODEL,
   AI_AGENT_TYPE,
   Agent,
+  KnowledgeFile,
   MemberInfo,
   USER_ROLE,
   USER_STATUS,
@@ -95,6 +96,7 @@ import { copyToClipboard } from "@/utils/copyToClipboard"
 import { track } from "@/utils/mixpanelHelper"
 import { ChatContext } from "../components/ChatContext"
 import { ErrorText } from "../components/ErrorText"
+import KnowledgeUpload from "../components/KnowledgeUpload"
 import {
   ChatSendRequestPayload,
   SenderType,
@@ -126,6 +128,9 @@ import {
 } from "./style"
 import { agentData2JSONReport } from "./utils"
 
+// TODO: WTF, can edit knowledge file
+const CAN_EDIT_KNOWLEDGE_FILE = false
+
 export const AIAgent: FC = () => {
   const data = useAsyncValue() as {
     agent: Agent
@@ -248,6 +253,7 @@ export const AIAgent: FC = () => {
       model: getValues("model"),
       prompt: getValues("prompt"),
       agentType: getValues("agentType"),
+      // TODO: add knowledge
     } as Agent
   }, [getValues])
 
@@ -315,6 +321,7 @@ export const AIAgent: FC = () => {
             threadID: v4(),
             prompt: getValues("prompt"),
             variables: getValues("variables"),
+            // TODO: add knowledge
             actionID: getValues("aiAgentID"),
             modelConfig: getValues("modelConfig"),
             model: getValues("model"),
@@ -357,29 +364,39 @@ export const AIAgent: FC = () => {
   }
 
   const handleSubmitSave = async (data: Agent) => {
+    let currentData: Agent = { ...data }
+    if (
+      currentData.model !== AI_AGENT_MODEL.GPT_4 &&
+      currentData.knowledge?.length > 0
+    ) {
+      currentData = {
+        ...currentData,
+        knowledge: [],
+      }
+    }
     track(
       ILLA_MIXPANEL_EVENT_TYPE.CLICK,
       ILLA_MIXPANEL_BUILDER_PAGE_NAME.AI_AGENT_EDIT,
       {
         element: "save",
-        parameter1: agentData2JSONReport(data),
-        parameter5: data.aiAgentID || "-1",
+        parameter1: agentData2JSONReport(currentData),
+        parameter5: currentData.aiAgentID || "-1",
       },
     )
     let agentInfo: Agent
     try {
-      let updateIconURL = data.icon
-      if (data.icon !== undefined && data.icon !== "") {
-        const iconURL = new URL(data.icon)
+      let updateIconURL = currentData.icon
+      if (currentData.icon !== undefined && currentData.icon !== "") {
+        const iconURL = new URL(currentData.icon)
         if (iconURL.protocol !== "http:" && iconURL.protocol !== "https:") {
-          updateIconURL = await uploadAgentIcon(data.icon)
+          updateIconURL = await uploadAgentIcon(currentData.icon)
         }
       }
-      if (data.aiAgentID === undefined || data.aiAgentID === "") {
+      if (currentData.aiAgentID === undefined || currentData.aiAgentID === "") {
         const resp = await createAgent({
-          ...data,
+          ...currentData,
           icon: updateIconURL,
-          variables: data.variables.filter(
+          variables: currentData.variables.filter(
             (v) => v.key !== "" && v.value !== "",
           ),
         })
@@ -399,8 +416,8 @@ export const AIAgent: FC = () => {
         })
         agentInfo = resp.data
       } else {
-        const resp = await putAgentDetail(data.aiAgentID, {
-          ...data,
+        const resp = await putAgentDetail(currentData.aiAgentID, {
+          ...currentData,
           icon: updateIconURL,
           variables: data.variables.filter(
             (v) => v.key !== "" && v.value !== "",
@@ -438,6 +455,9 @@ export const AIAgent: FC = () => {
     if (!!errors.prompt) {
       handleScrollToElement(SCROLL_ID.PROMPT)
       validate = false
+    } else if (!!errors.knowledge) {
+      handleScrollToElement(SCROLL_ID.KNOWLEDGE)
+      validate = false
     } else if (!!errors.variables) {
       handleScrollToElement(SCROLL_ID.VARIABLES)
       validate = false
@@ -512,6 +532,18 @@ export const AIAgent: FC = () => {
       })
       handleScrollToElement(SCROLL_ID.VARIABLES)
       return false
+    } else if (
+      Array.isArray(getValues("knowledge")) &&
+      getValues("knowledge").length > 0 &&
+      getValues("knowledge").some((param) => param.value === "")
+    ) {
+      setError("variables", {
+        type: "knowledge",
+        // TODO: WTF i18n
+        message: t("有文件还在解析中"),
+      })
+      handleScrollToElement(SCROLL_ID.KNOWLEDGE)
+      return false
     }
     return true
   }
@@ -722,6 +754,75 @@ export const AIAgent: FC = () => {
                   )}
                 />
 
+                {CAN_EDIT_KNOWLEDGE_FILE &&
+                  getValues("model") === AI_AGENT_MODEL.GPT_4 && (
+                    <Controller
+                      name="knowledge"
+                      control={control}
+                      rules={{
+                        validate: (value) => {
+                          const isValidate =
+                            !value ||
+                            value.length === 0 ||
+                            value.every((param) => param.value !== "")
+                          return isValidate ? isValidate : t("")
+                        },
+                      }}
+                      shouldUnregister={false}
+                      render={({ field }) => (
+                        <AIAgentBlock
+                          title={t("knowledge")}
+                          scrollId={SCROLL_ID.KNOWLEDGE}
+                        >
+                          <KnowledgeUpload
+                            addFile={(
+                              file: KnowledgeFile,
+                              isUpdate?: boolean,
+                            ) => {
+                              const { name, type } = file
+                              const files = field.value || []
+                              const index = files.findIndex(
+                                (item) =>
+                                  item.name === name && item.type === type,
+                              )
+                              if (index !== -1) {
+                                if (isUpdate) {
+                                  let needUpdateFile = files[index]
+                                  files.splice(index, 1, {
+                                    ...needUpdateFile,
+                                    ...file,
+                                  })
+                                } else {
+                                  const fileNamePrefix = `${
+                                    file.name.split(".")[0]
+                                  }(${v4().slice(0, 3)})`
+
+                                  files.push({
+                                    ...file,
+                                    name: `${fileNamePrefix}.${file.name.split(
+                                      ".",
+                                    )?.[1]}`,
+                                  })
+                                }
+                              } else {
+                                files.push(file)
+                              }
+                              field.onChange(files)
+                            }}
+                            removeFile={(name: string) => {
+                              const currentFiles = field.value || []
+                              const files = currentFiles.filter(
+                                (item) => item.name !== name,
+                              )
+                              field.onChange(files)
+                            }}
+                            values={field.value}
+                          />
+                        </AIAgentBlock>
+                      )}
+                    />
+                  )}
+
                 <Controller
                   name="model"
                   control={control}
@@ -1093,30 +1194,30 @@ export const AIAgent: FC = () => {
             </div>
             <form onSubmit={handleSubmit(handleSubmitSave)}>
               <div css={buttonContainerStyle}>
-                <Button
-                  id="save-button"
-                  flex="1"
-                  colorScheme="grayBlue"
-                  onClick={handleVerifyOnSave}
-                  size="large"
-                  loading={isSubmitting}
-                >
-                  {t("editor.ai-agent.save")}
-                </Button>
                 <Button
                   flex="1"
                   size="large"
                   type="button"
                   loading={isConnecting}
-                  ml="8px"
-                  colorScheme={getColor("grayBlue", "02")}
+                  colorScheme="grayBlue"
                   leftIcon={isRunning ? <ResetIcon /> : <PlayFillIcon />}
                   onClick={handleClickStart}
                 >
                   {!isRunning
                     ? t("editor.ai-agent.start")
                     : t("editor.ai-agent.restart")}
                 </Button>
+                <Button
+                  id="save-button"
+                  flex="1"
+                  ml="8px"
+                  onClick={handleVerifyOnSave}
+                  colorScheme={getColor("grayBlue", "02")}
+                  size="large"
+                  loading={isSubmitting}
+                >
+                  {t("editor.ai-agent.save")}
+                </Button>
               </div>
             </form>
           </div>
@@ -1150,6 +1251,7 @@ export const AIAgent: FC = () => {
                             isRunning={isRunning}
                             hasCreated={Boolean(idField.value)}
                             isMobile={false}
+                            model={getValues("model")}
                             editState="EDIT"
                             agentType={field.value}
                             chatMessages={chatMessages}

apps/builder/src/page/AI/AIAgent/interface.ts

@@ -6,6 +6,7 @@ export const AgentInitial: Agent = {
   agentType: AI_AGENT_TYPE.CHAT,
   model: AI_AGENT_MODEL.GPT_3_5,
   variables: [{ key: "", value: "" }],
+  knowledge: [],
   prompt: "",
   modelConfig: {
     stream: true,
@@ -27,6 +28,7 @@ export const AgentInitial: Agent = {
 export enum SCROLL_ID {
   PROMPT = "prompt",
   VARIABLES = "variables",
+  KNOWLEDGE = "knowledge",
   NAME = "name",
   DESCRIPTION = "description",
   ICON = "icon",

apps/builder/src/page/AI/AIAgentRun/AIAgentRunMobile/index.tsx

@@ -535,6 +535,7 @@ export const AIAgentRunMobile: FC = () => {
             hasCreated={true}
             isMobile={true}
             agentType={field.value}
+            model={getValues("model")}
             chatMessages={chatMessages}
             generationMessage={generationMessage}
             isReceiving={isReceiving}

apps/builder/src/page/AI/AIAgentRun/AIAgentRunPC/index.tsx

@@ -841,6 +841,7 @@ export const AIAgentRunPC: FC = () => {
                       isMobile={false}
                       editState="RUN"
                       agentType={field.value}
+                      model={getValues("model")}
                       chatMessages={chatMessages}
                       generationMessage={generationMessage}
                       isReceiving={isReceiving}

apps/builder/src/page/AI/components/KnowledgeUpload/contants.ts

@@ -0,0 +1,20 @@
+import {
+  EXCEL_FILE_TYPE_RULES,
+  PDF_FILE_TYPE_RULES,
+  WORD_FILE_TYPE_RULES,
+} from "@illa-public/utils"
+
+export const JSON_RULES = ["application/json"]
+export const ACCEPT = [
+  WORD_FILE_TYPE_RULES[2],
+  ...EXCEL_FILE_TYPE_RULES,
+  ...PDF_FILE_TYPE_RULES,
+  ".mdx",
+  ".md",
+  ".txt",
+  ".json",
+  // "image/*", // TODO: not support currently
+]
+
+export const MAX_MESSAGE_FILES_LENGTH = 10
+export const MAX_FILE_SIZE = 20971520 // 20MB