feat: real-time notifications + UI fixes for industrial deployment

frontend/src/components/Alert.tsx

@@ -1,3 +1,4 @@
+
 import { cn } from '@/lib/utils';
 import React from 'react';
 
@@ -89,7 +90,8 @@ export const Alert: React.FC<AlertProps> = ({
       <div className="flex">
         <div className={cn('flex-shrink-0', styles.icon)}>{icons[variant]}</div>
         <div className="ml-3">
-          <p className={cn('text-sm', styles.text)}>{children}</p>
+          {/* Correction : Changement de <p> vers <div> pour autoriser les composants block-level comme Skeleton */}
+          <div className={cn('text-sm', styles.text)}>{children}</div>
         </div>
       </div>
     </div>

frontend/src/components/AutoResizeTextarea.tsx

@@ -1,6 +1,6 @@
+
+import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { cn } from '@/lib/utils';
-import { useEffect, useRef, useState } from 'react';
-
 import { Textarea } from '@/components/ui/textarea';
 
 interface Props extends Omit<React.ComponentProps<'textarea'>, 'onPaste'> {
@@ -16,7 +16,7 @@ interface Props extends Omit<React.ComponentProps<'textarea'>, 'onPaste'> {
   ) => void;
 }
 
-const AutoResizeTextarea = ({
+const AutoResizeTextarea = forwardRef<HTMLTextAreaElement, Props>(({
   maxHeight,
   onPaste,
   onEnter,
@@ -26,10 +26,13 @@ const AutoResizeTextarea = ({
   onCompositionStart,
   onCompositionEnd,
   ...props
-}: Props) => {
+}, ref) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isComposing, setIsComposing] = useState(false);
 
+  // Synchronise la ref locale (utilisée pour les calculs de hauteur) avec la ref externe
+  useImperativeHandle(ref, () => textareaRef.current!);
+
   useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || !onPaste) return;
@@ -44,18 +47,18 @@ const AutoResizeTextarea = ({
   useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || !maxHeight) return;
+
+    // Réinitialisation temporaire pour calculer le scrollHeight réel
     textarea.style.height = '40px';
     const newHeight = Math.min(textarea.scrollHeight, maxHeight);
     textarea.style.height = `${newHeight}px`;
   }, [props.value, maxHeight]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Call the parent's onKeyDown first (this is Input's handler)
     if (onKeyDown) {
       onKeyDown(event);
     }
 
-    // Only handle our Enter logic if the event wasn't already handled
     if (
       !event.defaultPrevented &&
       event.key === 'Enter' &&
@@ -88,7 +91,7 @@ const AutoResizeTextarea = ({
 
   return (
     <Textarea
-      ref={textareaRef as any}
+      ref={textareaRef}
       {...props}
       onKeyDown={handleKeyDown}
       onCompositionStart={handleCompositionStart}
@@ -101,6 +104,8 @@ const AutoResizeTextarea = ({
       style={{ maxHeight }}
     />
   );
-};
+});
+
+AutoResizeTextarea.displayName = "AutoResizeTextarea";
 
 export default AutoResizeTextarea;

frontend/src/components/BlinkingCursor.tsx

@@ -6,8 +6,12 @@ interface Props {
   whitespace?: boolean;
 }
 
-export default function BlinkingCursor({ whitespace }: Props) {
+export default function BlinkingCursor({ whitespace }: { whitespace?: boolean }) {
   return (
-    <span className={cn('inline-block loading-cursor', whitespace && 'ml-2')} />
+    <span className={`inline-flex items-center gap-1 py-2 ${whitespace ? 'ml-2' : ''}`}>
+      <span className="h-2 w-2 rounded-full bg-current animate-bounce [animation-delay:0ms]" />
+      <span className="h-2 w-2 rounded-full bg-current animate-bounce [animation-delay:150ms]" />
+      <span className="h-2 w-2 rounded-full bg-current animate-bounce [animation-delay:300ms]" />
+    </span>
   );
 }

frontend/src/components/Elements/CustomElement/index.tsx

@@ -1,4 +1,4 @@
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import {
   memo,
   useCallback,

frontend/src/components/Elements/Dataframe.tsx

@@ -1,3 +1,4 @@
+
 import {
   ColumnDef,
   flexRender,
@@ -30,7 +31,7 @@ import {
   TableRow
 } from '@/components/ui/table';
 
-import { useFetch } from 'hooks/useFetch';
+import { useFetch } from '@/hooks/useFetch';
 
 interface DataframeData {
   index: (string | number)[];
@@ -49,7 +50,7 @@ const _DataframeElement = ({ data }: { data: DataframeData }) => {
           const sort = column.getIsSorted();
           return (
             <div
-              className="flex items-center cursor-pointer"
+              className="flex items-center cursor-pointer select-none"
               onClick={() => column.toggleSorting()}
             >
               {col}
@@ -91,12 +92,15 @@ const _DataframeElement = ({ data }: { data: DataframeData }) => {
         <PaginationLink
           onClick={() => table.setPageIndex(i)}
           isActive={table.getState().pagination.pageIndex === i}
+          // CORRECTION : Ajout de la prop size
+          size="icon" 
+          className="cursor-pointer"
         >
           {i + 1}
         </PaginationLink>
       </PaginationItem>
     ));
-  }, [table.getPageCount(), table.getState().pagination.pageIndex]);
+  }, [table.getPageCount(), table.getState().pagination.pageIndex, table.setPageIndex]);
 
   return (
     <div className="flex flex-col gap-2 h-full overflow-y-auto dataframe">
@@ -150,6 +154,8 @@ const _DataframeElement = ({ data }: { data: DataframeData }) => {
           <PaginationItem>
             <PaginationPrevious
               onClick={() => table.previousPage()}
+              // CORRECTION : Ajout de la prop size
+              size="default"
               className={
                 !table.getCanPreviousPage()
                   ? 'pointer-events-none opacity-50'
@@ -161,6 +167,8 @@ const _DataframeElement = ({ data }: { data: DataframeData }) => {
           <PaginationItem>
             <PaginationNext
               onClick={() => table.nextPage()}
+              // CORRECTION : Ajout de la prop size
+              size="default"
               className={
                 !table.getCanNextPage()
                   ? 'pointer-events-none opacity-50'
@@ -179,11 +187,12 @@ function DataframeElement({ element }: { element: IDataframeElement }) {
 
   const jsonData = useMemo(() => {
     if (data) return JSON.parse(data);
+    return null;
   }, [data]);
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-full w-full bg-muted">
+      <div className="flex items-center justify-center h-full w-full bg-muted rounded-md">
         <Loader />
       </div>
     );
@@ -193,7 +202,9 @@ function DataframeElement({ element }: { element: IDataframeElement }) {
     return <Alert variant="error">{error.message}</Alert>;
   }
 
+  if (!jsonData) return null;
+
   return <_DataframeElement data={jsonData} />;
 }
 
-export default DataframeElement;
+export default DataframeElement;