Merge branch 'feat/add-image' into develop

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

@@ -60,7 +60,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
       }
     }
     cacheMessageLength.current = chatMessages.length
-  }, [chatMessages.length])
+  }, [chatMessages])
 
   return (
     <div css={previewChatContainerStyle}>

apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/CustomImage/index.tsx

@@ -1,17 +1,16 @@
 import Icon from "@ant-design/icons"
 import { App, Button, Image, ImageProps, Tooltip } from "antd"
-import { FC } from "react"
+import { FC, useState } from "react"
 import { DownloadIcon } from "@illa-public/icon"
+import imageLoadErrSrc from "@/assets/agent/imageLoadErr.svg"
 import { handleDownloadFiles } from "@/utils/drive/download"
-import { MarkdownMessageProps } from "../interface"
-import { downloadIconStyle, imageContainerStyle } from "./style"
+import { downloadIconStyle, imageContainerStyle, imageStyle } from "./style"
 
-const CustomImage: FC<
-  ImageProps & Pick<MarkdownMessageProps, "isOwnMessage">
-> = ({ alt, src, isOwnMessage }) => {
+const CustomImage: FC<ImageProps> = ({ alt, src }) => {
   const { message } = App.useApp()
   const URL = new URLSearchParams(src)
   const fileName = URL.get("fileName")
+  const [isExpired, setIsExpired] = useState(false)
 
   const handleDownload = () => {
     if (!src) {
@@ -25,14 +24,34 @@ const CustomImage: FC<
       name: fileName,
       downloadURL: src,
     }
-    handleDownloadFiles([fileInfo])
+    handleDownloadFiles([fileInfo]).catch((e) => {
+      console.log("download", e)
+    })
   }
   const contentBody = (
     <div css={imageContainerStyle}>
-      <Image src={src} alt={alt} preview={false} width="100%" />
+      <Image
+        src={src}
+        alt={alt}
+        preview={false}
+        style={imageStyle(isExpired)}
+        fallback={imageLoadErrSrc}
+        placeholder={
+          <Image
+            preview={false}
+            src={imageLoadErrSrc}
+            width={120}
+            height={120}
+            style={{
+              borderRadius: "8px",
+            }}
+          />
+        }
+        onError={() => setIsExpired(true)}
+      />
     </div>
   )
-  return isOwnMessage || !fileName ? (
+  return !fileName || isExpired ? (
     contentBody
   ) : (
     <Tooltip

apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/CustomImage/style.ts

@@ -9,3 +9,20 @@ export const imageContainerStyle = css`
 export const downloadIconStyle = css`
   font-size: 14px;
 `
+
+export const imageStyle = (isExpired: boolean) => {
+  if (isExpired) {
+    return {
+      width: "120px",
+      height: "120px",
+      borderRadius: "8px",
+    }
+  } else {
+    return {
+      width: "100%",
+      minWidth: "120px",
+      minHeight: "120px",
+      borderRadius: "12px",
+    }
+  }
+}

apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/index.tsx

@@ -96,9 +96,7 @@ export const MarkdownMessage = memo((props: MarkdownMessageProps) => {
               isReceiving={isReceiving}
             />
           ),
-          img: ({ src, alt }) => (
-            <CustomImage src={src} alt={alt} isOwnMessage={isOwnMessage} />
-          ),
+          img: ({ src, alt }) => <CustomImage src={src} alt={alt} />,
         }}
       >
         {handleParseText(children ?? "", isOwnMessage)}

apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/components/FileContent/index.tsx

@@ -0,0 +1,76 @@
+import Icon from "@ant-design/icons"
+import { Button, Tooltip } from "antd"
+import { FC, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { DownloadIcon, getFileIconByContentType } from "@illa-public/icon"
+import { GCS_OBJECT_TYPE } from "@illa-public/public-types"
+import { handleDownloadFiles } from "@/utils/drive/download"
+import { IFileContentProps } from "./interface"
+import {
+  errorInfoStyle,
+  fileCardContainerStyle,
+  fileInfoStyle,
+  fileNameStyle,
+  fileTypeIconStyle,
+} from "./style"
+
+const FileContent: FC<IFileContentProps> = ({
+  contentType,
+  fileName,
+  downloadURL,
+}) => {
+  const { t } = useTranslation()
+  const [isExpired, setIsExpired] = useState(false)
+  const handleDownload = (downloadURL: string, fileName: string) => {
+    if (!downloadURL || !fileName) {
+      return
+    }
+    const fileInfo = {
+      name: fileName,
+      downloadURL: downloadURL,
+    }
+    handleDownloadFiles([fileInfo]).catch((e) => {
+      console.log("download", e)
+      setIsExpired(true)
+    })
+  }
+  const contentBody = (
+    <div css={fileCardContainerStyle}>
+      {getFileIconByContentType(
+        GCS_OBJECT_TYPE.FILE,
+        contentType,
+        fileTypeIconStyle,
+      )}
+      <span css={fileInfoStyle}>
+        <span css={fileNameStyle}>{fileName}</span>
+        {isExpired && (
+          <span css={errorInfoStyle}>{t("The document has expired.")}</span>
+        )}
+      </span>
+    </div>
+  )
+  return !downloadURL || !fileName || isExpired ? (
+    contentBody
+  ) : (
+    <Tooltip
+      color="transparent"
+      overlayInnerStyle={{
+        padding: 0,
+        height: 24,
+        width: 24,
+        boxShadow: "none",
+      }}
+      title={
+        <Button
+          icon={<Icon component={DownloadIcon} />}
+          onClick={() => handleDownload(downloadURL, fileName)}
+          size="small"
+        />
+      }
+    >
+      {contentBody}
+    </Tooltip>
+  )
+}
+
+export default FileContent

apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/components/FileContent/interface.ts

@@ -0,0 +1,5 @@
+export interface IFileContentProps {
+  contentType: string
+  fileName: string
+  downloadURL: string
+}

apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/components/FileContent/style.ts

@@ -0,0 +1,38 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-public/color-scheme"
+
+export const fileCardContainerStyle = css`
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 16px;
+  border: 1px solid ${getColor("grayBlue", "08")};
+  background: #fafbfc;
+`
+
+export const fileTypeIconStyle = css`
+  width: 24px;
+  height: 30px;
+`
+
+export const fileNameStyle = css`
+  color: ${getColor("grayBlue", "02")};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  flex: 1;
+`
+
+export const fileInfoStyle = css`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`
+
+export const errorInfoStyle = css`
+  color: ${getColor("red", "03")};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+`

apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/index.tsx

@@ -1,25 +1,18 @@
 import Icon from "@ant-design/icons"
-import { App, Button, Tooltip } from "antd"
+import { App, Tooltip } from "antd"
 import { FC, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  CopyIcon,
-  DownIcon,
-  DownloadIcon,
-  UpIcon,
-  getFileIconByContentType,
-} from "@illa-public/icon"
-import { GCS_OBJECT_TYPE } from "@illa-public/public-types"
+import { CopyIcon, DownIcon, UpIcon } from "@illa-public/icon"
 import { copyToClipboard } from "@illa-public/utils"
 import LottieItem from "@/components/LottieItem"
 import {
   IFileMessage,
   MESSAGE_STATUS,
 } from "@/components/PreviewChat/interface"
 import tipiRunLoading from "@/config/lottieConfig/tipiRunLoading.json"
-import { handleDownloadFiles } from "@/utils/drive/download"
 import MarkdownMessage from "../MarkdownMessage"
 import { CODE_STATUS } from "../MarkdownMessage/interface"
+import FileContent from "./components/FileContent"
 import { RUN_REQUEST_TYPE } from "./constants"
 import {
   IImageMessageProps,
@@ -30,9 +23,6 @@ import {
   actionIconStyle,
   containerStyle,
   errorInfoLineStyle,
-  fileCardContainerStyle,
-  fileNameStyle,
-  fileTypeIconStyle,
   headerContainerStyle,
   iconStyle,
   infoContainerStyle,
@@ -208,33 +198,16 @@ export const FileMessageCard: FC<IImageMessageProps> = ({ message }) => {
     fileInfo = JSON.parse(message)
   } catch {}
 
-  const handleDownload = (downloadURL: string, fileName: string) => {
-    if (!downloadURL || !fileName) {
-      return
-    }
-    const fileInfo = {
-      name: fileName,
-      downloadURL: downloadURL,
-    }
-    handleDownloadFiles([fileInfo])
-  }
   if (!message) return null
   return (
     <div css={messageListContainerStyle}>
       {fileInfo.map(({ contentType, fileName, downloadURL }) => (
-        <div css={fileCardContainerStyle} key={fileName}>
-          {getFileIconByContentType(
-            GCS_OBJECT_TYPE.FILE,
-            contentType,
-            fileTypeIconStyle,
-          )}
-          <span css={fileNameStyle}>{fileName}</span>
-          <Button
-            icon={<Icon component={DownloadIcon} />}
-            onClick={() => handleDownload(downloadURL, fileName)}
-            size="small"
-          />
-        </div>
+        <FileContent
+          key={fileName}
+          contentType={contentType}
+          fileName={fileName}
+          downloadURL={downloadURL}
+        />
       ))}
     </div>
   )

apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/style.ts

@@ -223,28 +223,5 @@ export const messageListContainerStyle = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  width: 396px;
-`
-
-export const fileCardContainerStyle = css`
-  display: flex;
-  padding: 16px;
-  align-items: center;
-  gap: 4px;
-  border-radius: 16px;
-  border: 1px solid ${getColor("grayBlue", "08")};
-  background: #fafbfc;
-`
-
-export const fileTypeIconStyle = css`
-  width: 24px;
-  height: 30px;
-`
-
-export const fileNameStyle = css`
-  color: ${getColor("grayBlue", "02")};
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 22px;
-  flex: 1;
+  width: 264px;
 `

apps/agent/src/page/WorkSpace/AI/components/UserMessage/FileContent/index.tsx

@@ -0,0 +1,44 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { getFileIconByContentType } from "@illa-public/icon"
+import { GCS_OBJECT_TYPE, IKnowledgeFile } from "@illa-public/public-types"
+import {
+  errorInfoStyle,
+  fileInfoStyle,
+  fileItemStyle,
+  fileNameStyle,
+  fileTypeIconStyle,
+  iconContainerStyle,
+} from "./style"
+
+interface IFileContentProps
+  extends Pick<IKnowledgeFile, "contentType" | "fileName"> {
+  isExpired?: boolean
+}
+
+const FileContent: FC<IFileContentProps> = ({
+  contentType,
+  fileName,
+  isExpired,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div css={fileItemStyle}>
+      <span css={iconContainerStyle}>
+        {getFileIconByContentType(
+          GCS_OBJECT_TYPE.FILE,
+          contentType,
+          fileTypeIconStyle,
+        )}
+      </span>
+      <span css={fileInfoStyle}>
+        <span css={fileNameStyle}>{fileName}</span>
+        {isExpired && (
+          <span css={errorInfoStyle}>{t("The document has expired.")}</span>
+        )}
+      </span>
+    </div>
+  )
+}
+
+export default FileContent