feat(chat): add possibility to open graphic at full screen (Issue #3846)

apps/chat/src/components/Chat/MessageAttachment.tsx

@@ -281,6 +281,9 @@ export const MessageAttachment = ({ attachment, isInner }: Props) => {
         'rounded bg-layer-3 px-1 py-2',
         isExpanded && 'col-span-1 col-start-1 sm:col-span-2 md:col-span-3',
         !isInner && 'border border-secondary',
+        attachment.openFullScreen &&
+          isOpened &&
+          'fixed inset-x-0 top-0 z-40 flex h-full flex-col',
       )}
     >
       <div className="flex items-center gap-3 px-2">
@@ -369,7 +372,12 @@ export const MessageAttachment = ({ attachment, isInner }: Props) => {
       </div>
       {isOpenable && isOpened && (
         <div
-          className="relative mt-2 h-auto w-full overflow-hidden border-t border-tertiary p-3 pt-4 text-sm duration-200"
+          className={classNames(
+            'relative mt-2 w-full border-t border-tertiary p-3 pt-4 text-sm duration-200',
+            attachment.openFullScreen
+              ? 'grow overflow-auto'
+              : 'h-auto overflow-hidden',
+          )}
           ref={anchorRef}
         >
           {attachment.data && (

apps/chat/src/components/Plotly/Plotly.tsx

@@ -16,13 +16,19 @@ export const PlotlyComponent = memo(
   ({ plotlyData: { layout, ...data } }: Props) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
     const [currentLayout, setCurrentLayout] = useState<Partial<Layout>>(layout);
 
     useEffect(() => {
       if (!containerRef.current) {
         return;
       }
 
+      const layoutHeight = Math.max(
+        currentLayout.height ?? 0,
+        containerRef.current.clientHeight,
+      );
+      setHeight(layoutHeight);
       setWidth(containerRef.current.scrollWidth);
     }, []);
 
@@ -35,7 +41,7 @@ export const PlotlyComponent = memo(
       <div ref={containerRef} className="size-full">
         <Plot
           {...data}
-          layout={{ ...currentLayout, width }}
+          layout={{ ...currentLayout, width, height }}
           onRelayout={handleRelayout}
         />
       </div>

libs/shared/src/types/chat.ts

@@ -23,6 +23,7 @@ export interface Attachment {
   url?: string;
   reference_type?: MIMEType;
   reference_url?: string;
+  openFullScreen?: boolean;
 }
 
 export type StageStatus = 'completed' | 'failed' | null;