feat: add optional cache busting for image (#12055)

### What problem does this PR solve?

Add optional cache busting for image

#12003  

### Type of change

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

web/src/components/image/index.tsx

@@ -6,13 +6,14 @@ interface IImage {
   id: string;
   className?: string;
   onClick?(): void;
+  t?: string | number;
 }
 
-const Image = ({ id, className, ...props }: IImage) => {
+const Image = ({ id, t, className, ...props }: IImage) => {
   return (
     <img
       {...props}
-      src={`${api_host}/document/image/${id}`}
+      src={`${api_host}/document/image/${id}${t ? `?_t=${t}` : ''}`}
       alt=""
       className={classNames('max-w-[45vw] max-h-[40wh] block', className)}
     />

web/src/hooks/use-chunk-request.ts

@@ -22,6 +22,7 @@ export interface IChunkListResult {
   setPagination?: (pagination: { page: number; pageSize: number }) => void;
   available: number | undefined;
   handleSetAvailable: (available: number | undefined) => void;
+  dataUpdatedAt?: number; // Timestamp when data was last updated - useful for cache busting
 }
 
 export const useSelectChunkList = () => {
@@ -118,7 +119,11 @@ export const useFetchNextChunkList = (
   const [available, setAvailable] = useState<number | undefined>();
   const debouncedSearchString = useDebounce(searchString, { wait: 500 });
 
-  const { data, isFetching: loading } = useQuery({
+  const {
+    data,
+    isFetching: loading,
+    dataUpdatedAt,
+  } = useQuery({
     queryKey: [
       'fetchChunkList',
       documentId,
@@ -183,6 +188,7 @@ export const useFetchNextChunkList = (
     handleInputChange: onInputChange,
     available,
     handleSetAvailable,
+    dataUpdatedAt, // Timestamp when data was last updated - useful for cache busting
   };
 };
 

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -25,6 +25,7 @@ interface IProps {
   selected: boolean;
   clickChunkCard: (chunkId: string) => void;
   textMode: ChunkTextMode;
+  t?: string | number; // Cache-busting key for images
 }
 
 const ChunkCard = ({
@@ -36,6 +37,7 @@ const ChunkCard = ({
   selected,
   clickChunkCard,
   textMode,
+  t: imageCacheKey,
 }: IProps) => {
   const available = Number(item.available_int);
   const [enabled, setEnabled] = useState(false);
@@ -79,7 +81,11 @@ const ChunkCard = ({
               onMouseLeave={() => setOpen(false)}
             >
               <div>
-                <Image id={item.image_id} className={styles.image}></Image>
+                <Image
+                  t={imageCacheKey}
+                  id={item.image_id}
+                  className={styles.image}
+                />
               </div>
             </PopoverTrigger>
             <PopoverContent
@@ -90,6 +96,7 @@ const ChunkCard = ({
             >
               <div>
                 <Image
+                  t={imageCacheKey}
                   id={item.image_id}
                   className={styles.imagePreview}
                 ></Image>

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -55,6 +55,7 @@ const Chunk = () => {
     handleInputChange,
     available,
     handleSetAvailable,
+    dataUpdatedAt,
   } = useFetchNextChunkList();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
   const isPdf = documentInfo?.type === 'pdf';
@@ -277,6 +278,7 @@ const Chunk = () => {
                         clickChunkCard={handleChunkCardClick}
                         selected={item.chunk_id === selectedChunkId}
                         textMode={textMode}
+                        t={dataUpdatedAt}
                       ></ChunkCard>
                     ))}
                   </div>