fix(chat-panel): support show file

Author: weareoutman

bricks/ai-portal/src/chat-panel/index.tsx

@@ -121,6 +121,11 @@ class ChatPanel extends ReactNextElement implements ChatPanelProps {
     this.#ref.current?.send(payload);
   }
 
+  @method()
+  showFile(file: FileInfo) {
+    this.#ref.current?.showFile(file);
+  }
+
   render() {
     return (
       <ChatPanelComponent
@@ -146,6 +151,7 @@ interface ChatPanelRef {
   open: () => void;
   close: () => void;
   send: (payload: ChatPayload) => void;
+  showFile: (file: FileInfo) => void;
 }
 
 function LegacyChatPanelComponent(
@@ -275,6 +281,9 @@ function LegacyChatPanelComponent(
       send: (payload: ChatPayload) => {
         handleChatSubmit(payload);
       },
+      showFile: (file: FileInfo) => {
+        setActiveFile(file);
+      },
     }),
     [handleChatSubmit]
   );

bricks/ai-portal/src/shared/FilePreview/FilePreview.tsx

@@ -27,9 +27,10 @@ initializeI18n(NS, locales);
 
 export interface FilePreviewProps {
   file: FileInfo;
+  fromModal?: boolean;
 }
 
-export function FilePreview({ file }: FilePreviewProps) {
+export function FilePreview({ file, fromModal }: FilePreviewProps) {
   const { setActiveFile } = useContext(TaskContext);
   const { bytes, uri, mimeType, name } = file;
   const type = mimeType || getMimeTypeByFilename(name);
@@ -107,7 +108,7 @@ export function FilePreview({ file }: FilePreviewProps) {
   }, [file]);
 
   return (
-    <div className={styles.preview}>
+    <div className={styles.preview} style={fromModal ? { zIndex: 1000 } : {}}>
       <div className={styles.header}>
         <div className={styles.title}>{file.name || t(K.UNTITLED)}</div>
         <div className={styles.toolbar}>

bricks/ai-portal/src/shared/FilePreview/ImagesPreview.tsx

@@ -11,9 +11,13 @@ import floatingStyles from "../FloatingButton.module.css";
 
 export interface ImagesPreviewProps {
   images: ActiveImages;
+  fromModal?: boolean;
 }
 
-export function ImagesPreview({ images: { files, file } }: ImagesPreviewProps) {
+export function ImagesPreview({
+  images: { files, file },
+  fromModal,
+}: ImagesPreviewProps) {
   const [currentFile, setCurrentFile] = useState<FileInfo>(file);
   const { setActiveImages } = useContext(TaskContext);
 
@@ -55,7 +59,7 @@ export function ImagesPreview({ images: { files, file } }: ImagesPreviewProps) {
   }, [go, setActiveImages]);
 
   return (
-    <div className={styles.preview}>
+    <div className={styles.preview} style={fromModal ? { zIndex: 1000 } : {}}>
       <div className={styles.header}>
         <WrappedIconButton
           icon={ICON_DOWNLOAD}