From 82fffbc54499530d3c575f01bd2ae04170991b29 Mon Sep 17 00:00:00 2001
From: Somi <zineb.baqili@enim.ac.ma>
Date: Thu, 11 Jun 2026 21:50:54 +0100
Subject: [PATCH 1/4] feat: real-time notifications + UI fixes for industrial
 deployment

New features:
- Add useNotifications hook: real-time Socket.io notifications with Chainlit native auth
- Add NotificationBell component: unread badge, popover list, type indicators
- Add LeftSidebar/Search: thread history search functionality

Bug fixes:
- Fix Alert: use div instead of p to allow block-level children (Skeleton)
- Fix AutoResizeTextarea: add forwardRef + useImperativeHandle to expose ref externally
- Fix BlinkingCursor: replace static cursor with animated 3-dot typing indicator
- Fix Logo/Avatar: resolve absolute URLs for reverse-proxy/standalone deployments
- Fix ThreadList: use SidebarMenuAction to avoid invalid HTML nesting
- Fix ThreadList: track active thread from URL params for correct highlight state
- Fix ThreadList: add stopPropagation on delete/rename/share actions

Compatibility:
- Update shadcn/ui components to latest API (data-slot, React.ComponentProps)
- Fix react-markdown PluggableList import for newer versions

Tested in production: Chainlit + Next.js 14 + Nginx reverse proxy
PFE ENSMR 2026 - Copilote Industriel OCP Jorf Lasfar
---
 frontend/src/components/Alert.tsx             |   4 +-
 .../src/components/AutoResizeTextarea.tsx     |  21 +-
 frontend/src/components/BlinkingCursor.tsx    |   8 +-
 .../Elements/CustomElement/index.tsx          |   2 +-
 .../src/components/Elements/Dataframe.tsx     |  21 +-
 frontend/src/components/Elements/PDF.tsx      | 317 +----------------
 frontend/src/components/Elements/Plotly.tsx   |  73 ++--
 frontend/src/components/Elements/Text.tsx     |   2 +-
 frontend/src/components/Elements/Video.tsx    |  36 +-
 .../src/components/LeftSidebar/Search.tsx     | 150 ++++++--
 .../components/LeftSidebar/ThreadHistory.tsx  |  81 ++++-
 .../src/components/LeftSidebar/ThreadList.tsx | 256 ++++++--------
 .../components/LeftSidebar/ThreadOptions.tsx  |  50 ++-
 frontend/src/components/LeftSidebar/index.tsx |  15 +-
 frontend/src/components/Logo.tsx              |  13 +-
 frontend/src/components/Markdown.tsx          | 327 +++++++-----------
 frontend/src/components/ThemeProvider.tsx     |  47 ++-
 .../chat/MessageComposer/Attachment.tsx       | 105 +++---
 .../chat/MessageComposer/Attachments.tsx      |  16 +-
 .../MessageComposer/CommandPopoverButton.tsx  |   8 +-
 .../chat/MessageComposer/Mcp/AddForm.tsx      |   2 +-
 .../chat/MessageComposer/Mcp/List.tsx         |   2 +-
 .../chat/MessageComposer/Mcp/index.tsx        |  26 +-
 .../chat/MessageComposer/SubmitButton.tsx     |   2 +-
 .../chat/MessageComposer/UploadButton.tsx     | 102 +++---
 .../chat/MessageComposer/VoiceButton.tsx      |   4 +-
 .../components/chat/MessageComposer/index.tsx | 110 +++---
 .../Messages/Message/AskActionButtons.tsx     |   2 +-
 .../chat/Messages/Message/AskFileButton.tsx   |   4 +-
 .../chat/Messages/Message/Avatar.tsx          |  20 +-
 .../Message/Buttons/Actions/ActionButton.tsx  |   2 +-
 .../Message/Buttons/FeedbackButtons.tsx       |   2 +-
 .../InlinedElements/InlinedImageList.tsx      |   2 +-
 .../InlinedElements/InlinedVideoList.tsx      |   2 +-
 .../components/chat/Messages/Message/Step.tsx |   2 +-
 .../chat/Messages/Message/UserMessage.tsx     |   4 +-
 .../chat/Messages/Message/index.tsx           |  52 +--
 .../src/components/chat/Messages/index.tsx    |  43 ++-
 .../chat/MessagesContainer/index.tsx          |  23 +-
 frontend/src/components/chat/index.tsx        |  50 ++-
 frontend/src/components/header/NewChat.tsx    |   2 +-
 .../components/header/NotificationBell.tsx    | 110 ++++++
 .../src/components/header/SidebarTrigger.tsx  |  79 ++---
 .../src/components/header/ThemeToggle.tsx     |   2 +-
 frontend/src/components/header/index.tsx      |   2 +-
 frontend/src/components/i18n/Translator.tsx   | 203 +++++++++--
 frontend/src/components/ui/alert-dialog.tsx   |   6 +-
 frontend/src/components/ui/button.tsx         |  79 +++--
 frontend/src/components/ui/calendar.tsx       |   2 +-
 frontend/src/components/ui/card.tsx           | 162 +++++----
 frontend/src/components/ui/dialog.tsx         | 127 ++++---
 frontend/src/components/ui/dropdown-menu.tsx  |   2 +-
 frontend/src/components/ui/input.tsx          |  36 +-
 frontend/src/components/ui/label.tsx          |  40 +--
 frontend/src/components/ui/resizable.tsx      |  27 +-
 frontend/src/components/ui/skeleton.tsx       |  14 +-
 frontend/src/components/ui/tabs.tsx           | 131 ++++---
 frontend/src/contexts/MessageContext.tsx      |   2 +-
 frontend/src/hooks/useNotifications.tsx       |  81 +++++
 frontend/src/hooks/useUpload.tsx              |   2 +-
 frontend/src/lib/message.ts                   |   2 +-
 frontend/src/lib/utils.ts                     |   6 +-
 frontend/src/state/chat.ts                    |   2 +-
 63 files changed, 1676 insertions(+), 1451 deletions(-)
 create mode 100644 frontend/src/components/header/NotificationBell.tsx
 create mode 100644 frontend/src/hooks/useNotifications.tsx

diff --git a/frontend/src/components/Alert.tsx b/frontend/src/components/Alert.tsx
index 8eb6e2d2d8..9b177b02df 100644
--- a/frontend/src/components/Alert.tsx
+++ b/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>
diff --git a/frontend/src/components/AutoResizeTextarea.tsx b/frontend/src/components/AutoResizeTextarea.tsx
index e585a5201d..c4b96383f9 100644
--- a/frontend/src/components/AutoResizeTextarea.tsx
+++ b/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;
diff --git a/frontend/src/components/BlinkingCursor.tsx b/frontend/src/components/BlinkingCursor.tsx
index dd9b7df511..f7423364d0 100644
--- a/frontend/src/components/BlinkingCursor.tsx
+++ b/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>
   );
 }
diff --git a/frontend/src/components/Elements/CustomElement/index.tsx b/frontend/src/components/Elements/CustomElement/index.tsx
index 53eb2e43bd..640db26763 100644
--- a/frontend/src/components/Elements/CustomElement/index.tsx
+++ b/frontend/src/components/Elements/CustomElement/index.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import {
   memo,
   useCallback,
diff --git a/frontend/src/components/Elements/Dataframe.tsx b/frontend/src/components/Elements/Dataframe.tsx
index 4f68a85312..8d27e864b2 100644
--- a/frontend/src/components/Elements/Dataframe.tsx
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/Elements/PDF.tsx b/frontend/src/components/Elements/PDF.tsx
index 6ce02b9e47..2159ba7960 100644
--- a/frontend/src/components/Elements/PDF.tsx
+++ b/frontend/src/components/Elements/PDF.tsx
@@ -1,309 +1,18 @@
-import {
-  ChevronLeft,
-  ChevronRight,
-  Download,
-  Maximize2,
-  Printer,
-  X,
-  ZoomIn,
-  ZoomOut
-} from 'lucide-react';
-import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
-import { useEffect, useRef, useState } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
+
 
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle
-} from '@/components/ui/dialog';
 
-import { type IPdfElement } from 'client-types/';
-
-import 'react-pdf/dist/Page/AnnotationLayer.css';
-import 'react-pdf/dist/Page/TextLayer.css';
-
-pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
-
-interface PDFViewerProps {
-  url: string;
-  className?: string;
-  startPage?: number;
-  persistentToolbar?: boolean;
-}
-
-export function PDFViewer({
-  url,
-  className,
-  startPage = 1,
-  persistentToolbar = false
-}: PDFViewerProps) {
-  const [numPages, setNumPages] = useState<number>();
-  const [pageNumber, setPageNumber] = useState(Math.max(1, startPage || 1));
-  const [scale, setScale] = useState(1.0);
-  const [isHovered, setIsHovered] = useState(false);
-
-  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
-    setNumPages(numPages);
-    setPageNumber(
-      startPage && startPage >= 1 && startPage <= numPages ? startPage : 1
-    );
-  }
-
-  const zoomIn = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setScale((prev) => Math.min(prev + 0.25, 3));
-  };
-  const zoomOut = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setScale((prev) => Math.max(prev - 0.25, 0.5));
-  };
-  const prevPage = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setPageNumber((prev) => Math.max(prev - 1, 1));
-  };
-  const nextPage = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setPageNumber((prev) => Math.min(prev + 1, numPages || 1));
-  };
-  const handlePrint = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    window.open(url, '_blank', 'noopener,noreferrer');
-  };
-
-  return (
-    <div
-      className={`flex flex-col bg-muted/20 border border-border rounded-md min-h-[50vh] ${
-        className || ''
-      }`}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onTouchStart={() => setIsHovered(true)}
-    >
-      {/* Sticky toolbar — lives in the normal flex flow so it never overlaps content */}
-      <div
-        className={`sticky top-0 z-10 shrink-0 flex flex-wrap items-center justify-between p-2 gap-2 bg-background/80 backdrop-blur-sm border-b border-border rounded-t-md transition-opacity duration-200 ${
-          persistentToolbar || isHovered ? 'opacity-100' : 'opacity-0'
-        }`}
-      >
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={prevPage}
-            disabled={pageNumber <= 1}
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-          <span className="text-xs text-muted-foreground w-16 text-center shadow-sm">
-            {pageNumber} / {numPages || '?'}
-          </span>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={nextPage}
-            disabled={pageNumber >= (numPages || 1)}
-          >
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={zoomOut}
-            disabled={scale <= 0.5}
-          >
-            <ZoomOut className="h-4 w-4" />
-          </Button>
-          <span className="text-xs text-muted-foreground w-12 text-center shadow-sm">
-            {Math.round(scale * 100)}%
-          </span>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={zoomIn}
-            disabled={scale >= 3}
-          >
-            <ZoomIn className="h-4 w-4" />
-          </Button>
-          <div className="w-px h-4 bg-border mx-1" />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 hidden md:flex"
-            onClick={handlePrint}
-            title="Print/Open PDF"
-          >
-            <Printer className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            asChild
-            title="Download PDF"
-          >
-            <a
-              href={url}
-              download
-              rel="noopener noreferrer"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <Download className="h-4 w-4" />
-            </a>
-          </Button>
-        </div>
-      </div>
-
-      <div className="flex-1 min-h-0 overflow-auto w-full bg-muted/10">
-        <div className="w-fit min-w-full flex justify-center p-2 md:p-4">
-          <Document
-            file={url}
-            onLoadSuccess={onDocumentLoadSuccess}
-            loading={
-              <div className="flex items-center justify-center p-8 text-muted-foreground">
-                Loading PDF...
-              </div>
-            }
-          >
-            <Page
-              pageNumber={pageNumber}
-              scale={scale}
-              renderTextLayer={true}
-              renderAnnotationLayer={true}
-              className="shadow-md bg-white max-w-full"
-            />
-          </Document>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-interface Props {
-  element: IPdfElement;
-}
-
-const PDFElement = ({ element }: Props) => {
-  const [modalOpen, setModalOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [previewWidth, setPreviewWidth] = useState(0);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const update = () => setPreviewWidth(el.clientWidth - 16);
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  if (!element.url) {
-    return null;
+// On force Next.js à charger le moteur PDF uniquement côté navigateur (ssr: false)
+const PDFElement = React.lazy(
+  () => import('./PDFClient').then((mod) => mod.PDFElement),
+  { 
+    ssr: false, 
+    loading: () => <p className="text-xs text-muted-foreground p-2">Chargement du lecteur PDF...</p> 
   }
+);
 
-  // A standalone page or sidebar display
-  if (element.display === 'side' || element.display === 'page') {
-    return (
-      <PDFViewer
-        url={element.url}
-        startPage={element.page}
-        className={`${element.display}-pdf w-full h-[80vh] flex-1`}
-      />
-    );
-  }
-
-  // Inline display
-  return (
-    <>
-      <div
-        ref={containerRef}
-        role="button"
-        tabIndex={0}
-        aria-label="Open PDF in a larger view"
-        className="inline-pdf relative group cursor-pointer border border-border rounded-md overflow-hidden bg-muted/20 w-full max-w-xs h-auto min-h-[160px] flex items-center justify-center hover:border-primary/50 transition-all p-2"
-        onClick={() => setModalOpen(true)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            setModalOpen(true);
-          }
-        }}
-      >
-        <div className="absolute top-2 right-2 p-1.5 bg-background/80 backdrop-blur-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity z-10 shadow-sm">
-          <Maximize2 className="h-4 w-4 text-foreground" />
-        </div>
-
-        <div className="flex flex-col items-center justify-center pointer-events-none">
-          <Document
-            file={element.url}
-            loading={
-              <div className="text-xs text-muted-foreground">
-                Loading preview...
-              </div>
-            }
-          >
-            <Page
-              pageNumber={element.page || 1}
-              width={previewWidth > 0 ? previewWidth : undefined}
-              renderTextLayer={false}
-              renderAnnotationLayer={false}
-              className="shadow-sm border border-border rounded-sm bg-white"
-            />
-          </Document>
-          <div className="text-center mt-2">
-            <span className="text-xs font-medium text-muted-foreground truncate w-full px-2 max-w-[200px] inline-block">
-              {element.name || 'PDF Document'}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogPortal>
-          <DialogOverlay className="bg-black/80 z-50" />
-          <DialogContent className="border-none bg-transparent shadow-none max-w-none p-2 md:p-4 w-[100vw] h-[100vh] md:w-[95vw] md:h-[95vh] flex flex-col [&>button]:hidden z-[60]">
-            <DialogTitle className="sr-only">View PDF</DialogTitle>
-            <DialogDescription className="sr-only">
-              A modal with a larger view of the PDF.
-            </DialogDescription>
-            <div className="flex justify-end mb-2">
-              <DialogClose asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="bg-background/80 backdrop-blur-sm hover:bg-background"
-                  aria-label="Close"
-                >
-                  <X className="h-5 w-5" />
-                </Button>
-              </DialogClose>
-            </div>
-            <div className="flex-1 w-full bg-background rounded-lg overflow-hidden flex flex-col">
-              <PDFViewer
-                url={element.url}
-                startPage={element.page}
-                persistentToolbar
-                className="w-full h-full"
-              />
-            </div>
-          </DialogContent>
-        </DialogPortal>
-      </Dialog>
-    </>
-  );
-};
+const PDFViewer = React.lazy(
+  () => import('./PDFClient').then((mod) => mod.PDFViewer),
+  { ssr: false }
+);
 
-export { PDFElement };
+export { PDFElement, PDFViewer };
\ No newline at end of file
diff --git a/frontend/src/components/Elements/Plotly.tsx b/frontend/src/components/Elements/Plotly.tsx
index 02f8a5503c..98721b25fe 100644
--- a/frontend/src/components/Elements/Plotly.tsx
+++ b/frontend/src/components/Elements/Plotly.tsx
@@ -1,58 +1,61 @@
-import { Suspense, lazy, useMemo } from 'react';
+
+
+import { Suspense, useMemo } from 'react';
 
 import { ErrorBoundary } from '@/components/ErrorBoundary';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useFetch } from '@/hooks/useFetch';
+import { type IPlotlyElement } from '@chainlit/react-client';
 
-import { useFetch } from 'hooks/useFetch';
-
-import { type IPlotlyElement } from 'client-types/';
-
-const Plot = lazy(() => import('react-plotly.js'));
+// Chargement dynamique SANS rendu serveur pour éviter l'erreur "window is not defined"
+const Plot = React.lazy(() => import('react-plotly.js'), { 
+  ssr: false,
+  loading: () => <Skeleton className="h-full w-full rounded-md" />
+});
 
 interface Props {
   element: IPlotlyElement;
 }
 
 const _PlotlyElement = ({ element }: Props) => {
-  const { data, error, isLoading } = useFetch(element.url || null);
+  const { data: rawData, error, isLoading } = useFetch(element.url || null);
 
-  // deep-clone SWR data so Plotly.js mutations don't corrupt the cache.
-  // keyed on the data reference so clones stay stable between re-renders,
-  // preserving react-plotly.js's prevProps === this.props skip check.
   const plotly = useMemo(() => {
-    if (!data) return null;
+    if (!rawData) return null;
+    
+    // Si useFetch retourne une string (JSON), on la parse
+    const data = typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
+
     return {
-      data: structuredClone(data.data),
-      layout: structuredClone(data.layout),
+      data: structuredClone(data.data || []),
+      layout: structuredClone(data.layout || {}),
       frames: data.frames ? structuredClone(data.frames) : undefined,
       config: data.config ? structuredClone(data.config) : undefined,
       height: data.layout?.height || 400
     };
-  }, [data]);
+  }, [rawData]);
 
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>An error occurred</div>;
+  if (isLoading) return <Skeleton className="h-[400px] w-full" />;
+  if (error) return <div className="text-destructive">Une erreur est survenue lors du chargement du graphique.</div>;
   if (!plotly) return null;
 
   return (
-    <Suspense fallback={<Skeleton className="h-full rounded-md" />}>
-      <div style={{ width: '100%', height: `${plotly.height}px` }}>
-        <Plot
-          className={`${element.display}-plotly`}
-          data={plotly.data}
-          layout={plotly.layout}
-          frames={plotly.frames}
-          config={plotly.config}
-          style={{
-            width: '100%',
-            height: '100%',
-            borderRadius: '1rem',
-            overflow: 'hidden'
-          }}
-          useResizeHandler={true}
-        />
-      </div>
-    </Suspense>
+    <div style={{ width: '100%', height: `${plotly.height}px` }}>
+      <Plot
+        className={`${element.display}-plotly`}
+        data={plotly.data}
+        layout={plotly.layout}
+        frames={plotly.frames}
+        config={plotly.config}
+        style={{
+          width: '100%',
+          height: '100%',
+          borderRadius: '1rem',
+          overflow: 'hidden'
+        }}
+        useResizeHandler={true}
+      />
+    </div>
   );
 };
 
@@ -64,4 +67,4 @@ const PlotlyElement = (props: Props) => {
   );
 };
 
-export { PlotlyElement };
+export { PlotlyElement };
\ No newline at end of file
diff --git a/frontend/src/components/Elements/Text.tsx b/frontend/src/components/Elements/Text.tsx
index e4afadb3cf..ce7056c7c8 100644
--- a/frontend/src/components/Elements/Text.tsx
+++ b/frontend/src/components/Elements/Text.tsx
@@ -4,7 +4,7 @@ import Alert from '@/components/Alert';
 import { Markdown } from '@/components/Markdown';
 import { Skeleton } from '@/components/ui/skeleton';
 
-import { useFetch } from 'hooks/useFetch';
+import { useFetch } from '@/hooks/useFetch';
 
 interface TextElementProps {
   element: ITextElement;
diff --git a/frontend/src/components/Elements/Video.tsx b/frontend/src/components/Elements/Video.tsx
index 711110938b..f9f6ea9128 100644
--- a/frontend/src/components/Elements/Video.tsx
+++ b/frontend/src/components/Elements/Video.tsx
@@ -1,21 +1,39 @@
-import ReactPlayer from 'react-player';
+
 
+import { Skeleton } from '@/components/ui/skeleton';
 import { type IVideoElement } from '@chainlit/react-client';
 
+// On utilise 'any' ici pour le type du composant dynamique.
+// C'est la solution la plus stable pour react-player dans Next.js
+// car les exports de types de cette lib sont souvent inconsistants.
+const ReactPlayer = React.lazy(
+  () => import('react-player').then((mod) => mod.default),
+  {
+    ssr: false,
+    loading: () => <Skeleton className="w-full aspect-video rounded-xl" />
+  }
+) as any;
+
 const VideoElement = ({ element }: { element: IVideoElement }) => {
   if (!element.url) {
     return null;
   }
 
   return (
-    <ReactPlayer
-      className={`${element.display}-video`}
-      width="100%"
-      controls
-      url={element.url}
-      config={element.playerConfig || {}}
-    />
+    <div className="w-full aspect-video rounded-xl overflow-hidden border bg-zinc-950 shadow-sm">
+      <ReactPlayer
+        className={`${element.display}-video`}
+        width="100%"
+        height="100%"
+        controls={true}
+        url={element.url}
+        // On s'assure que config est au moins un objet vide
+        config={element.playerConfig || {}}
+        // Optionnel : évite les problèmes de lecture automatique sur certains navigateurs
+        playsinline={true}
+      />
+    </div>
   );
 };
 
-export { VideoElement };
+export { VideoElement };
\ No newline at end of file
diff --git a/frontend/src/components/LeftSidebar/Search.tsx b/frontend/src/components/LeftSidebar/Search.tsx
index a598401d1d..1816461e17 100644
--- a/frontend/src/components/LeftSidebar/Search.tsx
+++ b/frontend/src/components/LeftSidebar/Search.tsx
@@ -1,11 +1,10 @@
+
 import _ from 'lodash';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
-
 import { ChainlitContext, IThread } from '@chainlit/react-client';
-
 import { Loader } from '@/components/Loader';
 import { Search } from '@/components/icons/Search';
 import { Button } from '@/components/ui/button';
@@ -24,13 +23,45 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
-import { Translator } from 'components/i18n';
-
+import { Translator } from '@/components/i18n';
 import { Kbd } from '../Kbd';
 
+// ── NOUVEAU : badge tag ───────────────────────────────────────────────────────
+function TagBadge({ tag }: { tag: string }) {
+  return (
+    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs
+                     bg-primary text-primary-foreground
+                     font-mono mr-1">
+      {tag}
+    </span>
+  );
+}
+
+// ── NOUVEAU : parser les tags d'un thread ─────────────────────────────────────
+function parseTags(thread: IThread): string[] {
+  const raw = (thread as any).tags;
+  if (!raw || typeof raw !== 'string') return [];
+  return raw.split(',').map((t: string) => t.trim()).filter(Boolean);
+}
+
+// ── NOUVEAU : vérifier si un thread correspond à la recherche ────────────────
+function threadMatchesQuery(thread: IThread, query: string): boolean {
+  if (!query) return true;
+  const q = query.toLowerCase();
+
+  // Cherche dans le nom
+  if ((thread.name || '').toLowerCase().includes(q)) return true;
+
+  // Cherche dans les tags
+  const tags = parseTags(thread);
+  if (tags.some(tag => tag.toLowerCase().includes(q))) return true;
+
+  return false;
+}
+
 export default function SearchChats() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const router = useNavigate();
   const [open, setOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [threads, setThreads] = useState<IThread[]>([]);
@@ -38,15 +69,18 @@ export default function SearchChats() {
 
   const apiClient = useContext(ChainlitContext);
 
-  // Debounced search function
+  // ── MODIFIÉ : charge TOUS les threads puis filtre côté client ────────────
+  // Raison : l'API Chainlit filtre sur thread.name uniquement,
+  //          pas sur thread.tags. On filtre nous-mêmes.
   const debouncedSearch = useMemo(
     () =>
       _.debounce(async (query: string) => {
         setLoading(true);
         try {
+          // Charger tous les threads (sans filtre serveur)
           const { data } = await apiClient.listThreads(
-            { first: 20, cursor: undefined },
-            { search: query || undefined }
+            { first: 100, cursor: undefined },
+            {}   // ← pas de filtre search côté serveur
           );
           setThreads(data || []);
         } catch (error) {
@@ -58,16 +92,21 @@ export default function SearchChats() {
     [apiClient]
   );
 
-  // Group threads by month and year
+  // ── NOUVEAU : filtrage côté client sur name + tags ────────────────────────
+  const filteredThreads = useMemo(() => {
+    if (!searchQuery) return threads;
+    return threads.filter(t => threadMatchesQuery(t, searchQuery));
+  }, [threads, searchQuery]);
+
+  // ── Groupement par mois (inchangé) ───────────────────────────────────────
   const groupedThreads = useMemo(() => {
-    return _.groupBy(threads, (thread) => {
+    return _.groupBy(filteredThreads, (thread) => {
       const date = new Date(thread.createdAt);
-      return `${date.toLocaleString('default', {
-        month: 'long'
-      })} ${date.getFullYear()}`;
+      return `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`;
     });
-  }, [threads]);
+  }, [filteredThreads]);
 
+  // Raccourci clavier Ctrl+K (inchangé)
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
@@ -75,18 +114,21 @@ export default function SearchChats() {
         setOpen((open) => !open);
       }
     };
-
     document.addEventListener('keydown', down);
     return () => document.removeEventListener('keydown', down);
   }, []);
 
+  // Déclencher la recherche à l'ouverture ET quand la query change
   useEffect(() => {
     debouncedSearch(searchQuery);
-    return () => {
-      debouncedSearch.cancel();
-    };
+    return () => { debouncedSearch.cancel(); };
   }, [searchQuery, debouncedSearch]);
 
+  // Charger les threads à l'ouverture du dialog
+  useEffect(() => {
+    if (open) debouncedSearch(searchQuery);
+  }, [open]);
+
   return (
     <>
       <TooltipProvider>
@@ -110,23 +152,27 @@ export default function SearchChats() {
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
+
       <CommandDialog open={open} onOpenChange={setOpen}>
         <DialogTitle className="sr-only">
           {t('threadHistory.sidebar.filters.search')}
         </DialogTitle>
         <CommandInput
-          placeholder={t('threadHistory.sidebar.filters.placeholder')}
+          placeholder="Rechercher une conversation..."
           value={searchQuery}
           onValueChange={setSearchQuery}
         />
-        <CommandList className="h-[300px] overflow-y-auto">
+        <CommandList className="h-[400px] overflow-y-auto">
           {loading ? (
             <CommandEmpty className="p-4 flex items-center justify-center">
               <Loader />
             </CommandEmpty>
           ) : Object.keys(groupedThreads).length === 0 ? (
             <CommandEmpty>
-              <Translator path="threadHistory.sidebar.empty" />
+              {searchQuery
+                ? `Aucune conversation pour "${searchQuery}"`
+                : <Translator path="threadHistory.sidebar.empty" />
+              }
             </CommandEmpty>
           ) : (
             Object.entries(groupedThreads).map(([monthYear, monthThreads]) => (
@@ -134,26 +180,56 @@ export default function SearchChats() {
                 key={`${searchQuery}-${monthYear}`}
                 heading={monthYear}
               >
-                {monthThreads.map((thread) => (
-                  <CommandItem
-                    className="cursor-pointer"
-                    key={`${searchQuery}-${thread.id}`}
-                    value={`${searchQuery}-${thread.id}`}
-                    onSelect={() => {
-                      setOpen(false);
-                      navigate(`/thread/${thread.id}`);
-                    }}
-                  >
-                    <div className="line-clamp-2">
-                      {thread.name || 'Untitled Conversation'}
-                    </div>
-                  </CommandItem>
-                ))}
+                {monthThreads.map((thread) => {
+                  const tags = parseTags(thread);
+                  // Tags correspondant à la recherche mis en évidence
+                  const matchingTags = searchQuery
+                    ? tags.filter(t =>
+                        t.toLowerCase().includes(searchQuery.toLowerCase())
+                      )
+                    : tags.slice(0, 3); // Afficher max 3 tags si pas de recherche
+
+                  return (
+                    <CommandItem
+                      className="cursor-pointer flex flex-col items-start gap-1 py-2"
+                      key={`${searchQuery}-${thread.id}`}
+                      value={`${searchQuery}-${thread.id}`}
+                      onSelect={() => {
+                        setOpen(false);
+                        navigate(`/thread/${thread.id}`);
+                      }}
+                    >
+                      {/* Titre de la conversation */}
+                      <div className="line-clamp-1 font-medium">
+                        {thread.name || 'Untitled Conversation'}
+                      </div>
+
+                      {/* Tags affichés sous le titre */}
+                      {matchingTags.length > 0 && (
+                        <div className="flex flex-wrap gap-1">
+                          {matchingTags.map(tag => (
+                            <TagBadge key={tag} tag={tag} />
+                          ))}
+                        </div>
+                      )}
+                    </CommandItem>
+                  );
+                })}
               </CommandGroup>
             ))
           )}
         </CommandList>
+
+        {/* ── NOUVEAU : hint sur la recherche par tags ── 
+        {!searchQuery && (
+          <div className="px-3 py-2 text-xs text-muted-foreground border-t">
+            💡 Cherchez par équipement OCP : <code className="bg-muted px-1 rounded">107DAM03</code>,
+            {' '}<code className="bg-muted px-1 rounded">Sécheur</code>,
+            {' '}<code className="bg-muted px-1 rounded">AM01</code>
+          </div>
+        )}
+          */}
       </CommandDialog>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/LeftSidebar/ThreadHistory.tsx b/frontend/src/components/LeftSidebar/ThreadHistory.tsx
index b1c6ded7ff..ab45a9ef5c 100644
--- a/frontend/src/components/LeftSidebar/ThreadHistory.tsx
+++ b/frontend/src/components/LeftSidebar/ThreadHistory.tsx
@@ -1,12 +1,14 @@
+
 import { uniqBy } from 'lodash';
-import { useContext, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
 import {
   ChainlitContext,
   threadHistoryState,
-  useChatMessages
+  useChatMessages,
+  ThreadHistory as TThreadHistory
 } from '@chainlit/react-client';
 
 import {
@@ -20,8 +22,49 @@ import { ThreadList } from './ThreadList';
 const BATCH_SIZE = 35;
 let _scrollTop = 0;
 
+// Re-groupe les threads par date en heure locale
+function groupThreadsByLocalDate(threads: any[]): Record<string, any[]> {
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfYesterday = new Date(startOfToday);
+  startOfYesterday.setDate(startOfYesterday.getDate() - 1);
+  const startOf7Days = new Date(startOfToday);
+  startOf7Days.setDate(startOf7Days.getDate() - 7);
+  const startOf30Days = new Date(startOfToday);
+  startOf30Days.setDate(startOf30Days.getDate() - 30);
+
+  const groups: Record<string, any[]> = {};
+
+  for (const thread of threads) {
+    const date = new Date(thread.createdAt);
+    let group: string;
+
+    if (date >= startOfToday) {
+      group = 'Today';
+    } else if (date >= startOfYesterday) {
+      group = 'Yesterday';
+    } else if (date >= startOf7Days) {
+      group = 'Previous 7 days';
+    } else if (date >= startOf30Days) {
+      group = 'Previous 30 days';
+    } else {
+      // Grouper par mois/année pour les plus anciens
+      group = date.toLocaleDateString(navigator.language, {
+        month: 'long',
+        year: 'numeric'
+      });
+    }
+
+    if (!groups[group]) groups[group] = [];
+    groups[group].push(thread);
+  }
+
+  return groups;
+}
+
 export function ThreadHistory() {
-  const navigate = useNavigate();
+  const router = useNavigate();
+  const pathname = useLocation().pathname;
   const scrollRef = useRef<HTMLDivElement>(null);
   const apiClient = useContext(ChainlitContext);
   const { firstInteraction, messages, threadId } = useChatMessages();
@@ -32,6 +75,16 @@ export function ThreadHistory() {
   const [shouldLoadMore, setShouldLoadMore] = useState(false);
   const prevMessageCountRef = useRef(0);
 
+  // Re-grouper avec l'heure locale et injecter dans threadHistory
+  const localThreadHistory = useMemo<TThreadHistory | undefined>(() => {
+    if (!threadHistory?.threads) return threadHistory;
+    const localGroups = groupThreadsByLocalDate(threadHistory.threads);
+    return {
+      ...threadHistory,
+      timeGroupedThreads: localGroups,
+    };
+  }, [threadHistory]);
+
   // Restore scroll position
   useEffect(() => {
     if (scrollRef.current) {
@@ -52,16 +105,15 @@ export function ThreadHistory() {
 
       await fetchThreads(undefined, true);
 
-      const currentPage = new URL(window.location.href);
-      if (threadId && currentPage.pathname === '/') {
+      if (threadId && pathname === '/chat') {
         navigate(`/thread/${threadId}`);
       }
     };
 
     handleFirstInteraction();
-  }, [firstInteraction]);
+  }, [firstInteraction, threadId, pathname, router]);
 
-  // Reorder thread to top when a new message is sent in the current thread
+  // Reorder thread to top when a new message is sent
   useEffect(() => {
     const currentCount = messages.length;
     const prevCount = prevMessageCountRef.current;
@@ -78,7 +130,7 @@ export function ThreadHistory() {
         setThreadHistory((prev) => {
           if (!prev?.threads) return prev;
           const threadIndex = prev.threads.findIndex((t) => t.id === threadId);
-          if (threadIndex <= 0) return prev; // Already at top or not found
+          if (threadIndex <= 0) return prev;
           const updatedThreads = [...prev.threads];
           updatedThreads[threadIndex] = {
             ...updatedThreads[threadIndex],
@@ -94,7 +146,6 @@ export function ThreadHistory() {
     if (!scrollRef.current) return;
     const { scrollHeight, clientHeight, scrollTop } = scrollRef.current;
     const atBottom = scrollTop + clientHeight >= scrollHeight - 10;
-
     _scrollTop = scrollTop;
     setShouldLoadMore(atBottom);
   };
@@ -114,7 +165,6 @@ export function ThreadHistory() {
 
       setError(undefined);
 
-      // Prevent duplicate threads
       const allThreads = uniqBy(
         cursor ? threadHistory?.threads?.concat(data) : data,
         'id'
@@ -143,11 +193,10 @@ export function ThreadHistory() {
     }
   }, [isFetching, threadHistory, error]);
 
-  // Handle infinite scroll
+  // Infinite scroll
   useEffect(() => {
     if (threadHistory?.pageInfo) {
       const { hasNextPage, endCursor } = threadHistory.pageInfo;
-
       if (shouldLoadMore && !isLoadingMore && hasNextPage && endCursor) {
         fetchThreads(endCursor);
       }
@@ -158,10 +207,10 @@ export function ThreadHistory() {
     <SidebarContent onScroll={handleScroll} ref={scrollRef}>
       <SidebarGroup>
         <SidebarMenu>
-          {threadHistory ? (
+          {localThreadHistory ? (
             <div id="thread-history" className="flex-grow">
               <ThreadList
-                threadHistory={threadHistory}
+                threadHistory={localThreadHistory}
                 error={error}
                 isFetching={isFetching}
                 isLoadingMore={isLoadingMore}
@@ -172,4 +221,4 @@ export function ThreadHistory() {
       </SidebarGroup>
     </SidebarContent>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/LeftSidebar/ThreadList.tsx b/frontend/src/components/LeftSidebar/ThreadList.tsx
index 764d983db2..688ed9c232 100644
--- a/frontend/src/components/LeftSidebar/ThreadList.tsx
+++ b/frontend/src/components/LeftSidebar/ThreadList.tsx
@@ -3,14 +3,14 @@ import { size } from 'lodash';
 import { Share2 } from 'lucide-react';
 import { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { toast } from 'sonner';
 
 import {
   ChainlitContext,
   ClientError,
-  ThreadHistory, // sessionIdState,
+  ThreadHistory,
   threadHistoryState,
   useChatInteract,
   useChatMessages,
@@ -47,6 +47,7 @@ import {
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarMenu,
+  SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem
 } from '@/components/ui/sidebar';
@@ -75,6 +76,9 @@ export function ThreadList({
 }: ThreadListProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  // Fix: track active thread from URL params for correct highlight
+  const params = useParams<{ id?: string }>();
+  const activeThreadId = params?.id;
   const { idToResume } = useChatSession();
   const { clear } = useChatInteract();
   const { threadId: currentThreadId } = useChatMessages();
@@ -86,18 +90,14 @@ export function ThreadList({
   const { config } = useConfig();
   const dataPersistence = config?.dataPersistence;
   const threadSharingReady = Boolean((config as any)?.threadSharing);
-  // sessionId not needed here
 
-  // Share thread state
   const [threadIdToShare, setThreadIdToShare] = useState<string | undefined>();
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
-  // Share dialog state is centralized in ShareDialog; we only track which thread to share
 
   const handleShareThread = (threadId: string) => {
     if (!threadSharingReady) return;
     setThreadIdToShare(threadId);
     setIsShareDialogOpen(true);
-    // ShareDialog handles its own internal state; we just open it
   };
 
   type ParsedGroupLabel = {
@@ -111,14 +111,11 @@ export function ThreadList({
   ): { map: Record<string, number>; monthRegex: RegExp } => {
     const map: Record<string, number> = {};
     const monthNames: string[] = [];
-
     for (let i = 0; i < 12; i++) {
       const d = new Date(2020, i, 1);
-
       const long = d
         .toLocaleDateString(locale, { month: 'long' })
         .toLocaleLowerCase(locale);
-
       map[long] = i;
       monthNames.push(long);
     }
@@ -133,43 +130,29 @@ export function ThreadList({
 
   const parseGroupLabel = (label: string): ParsedGroupLabel | null => {
     const locale = navigator.language;
-
     const matchMonth = label.toLocaleLowerCase(locale).match(monthRegex);
     if (!matchMonth) return null;
     const month = matchMonth[0];
-
     const matchYear = label.match(/\d{4}/);
     if (!matchYear) return null;
     const year = Number(matchYear[0]);
-
     if (isNaN(year)) return null;
-
     return { month, year, raw: label };
   };
 
   const sortGroupsByDate = (a: string, b: string): number => {
     const aParsed = parseGroupLabel(a);
     const bParsed = parseGroupLabel(b);
-
     if (!aParsed || !bParsed) return a.localeCompare(b);
-
-    if (aParsed.year !== bParsed.year) {
-      return bParsed.year - aParsed.year;
-    }
+    if (aParsed.year !== bParsed.year) return bParsed.year - aParsed.year;
     const aMonth = monthMap[aParsed.month] ?? -1;
     const bMonth = monthMap[bParsed.month] ?? -1;
-
     return bMonth - aMonth;
   };
 
   const sortedTimeGroupKeys = useMemo(() => {
     if (!threadHistory?.timeGroupedThreads) return [];
-    const fixedOrder = [
-      'Today',
-      'Yesterday',
-      'Previous 7 days',
-      'Previous 30 days'
-    ];
+    const fixedOrder = ['Today', 'Yesterday', 'Previous 7 days', 'Previous 30 days'];
     return Object.keys(threadHistory.timeGroupedThreads).sort((a, b) => {
       const aIndex = fixedOrder.indexOf(a);
       const bIndex = fixedOrder.indexOf(b);
@@ -206,76 +189,51 @@ export function ThreadList({
 
   const handleDeleteThread = async () => {
     if (!threadIdToDelete) return;
-    if (
+    const isDeletingActiveThread =
+      threadIdToDelete === activeThreadId ||
       threadIdToDelete === idToResume ||
-      threadIdToDelete === currentThreadId
-    ) {
+      threadIdToDelete === currentThreadId;
+    if (isDeletingActiveThread) {
       clear();
       await new Promise((resolve) => setTimeout(resolve, 300));
     }
-
     toast.promise(apiClient.deleteThread(threadIdToDelete), {
-      loading: (
-        <Translator path="threadHistory.thread.actions.delete.inProgress" />
-      ),
+      loading: <Translator path="threadHistory.thread.actions.delete.inProgress" />,
       success: () => {
         setThreadHistory((prev) => ({
           ...prev,
           threads: prev?.threads?.filter((t) => t.id !== threadIdToDelete)
         }));
-        navigate('/');
-        return (
-          <Translator path="threadHistory.thread.actions.delete.success" />
-        );
+        setThreadIdToDelete(undefined);
+        if (isDeletingActiveThread) navigate('/');
+        return <Translator path="threadHistory.thread.actions.delete.success" />;
       },
       error: (err) => {
-        if (err instanceof ClientError) {
-          return <span>{err.message}</span>;
-        } else {
-          return <span></span>;
-        }
+        setThreadIdToDelete(undefined);
+        return err instanceof ClientError ? <span>{err.message}</span> : <span>Error</span>;
       }
     });
   };
 
   const handleRenameThread = () => {
     if (!threadIdToRename || !threadNewName) return;
-
     toast.promise(apiClient.renameThread(threadIdToRename, threadNewName), {
-      loading: (
-        <Translator path="threadHistory.thread.actions.rename.inProgress" />
-      ),
+      loading: <Translator path="threadHistory.thread.actions.rename.inProgress" />,
       success: () => {
         setThreadNewName(undefined);
         setThreadIdToRename(undefined);
         setThreadHistory((prev) => {
-          const next = {
-            ...prev,
-            threads: prev?.threads ? [...prev.threads] : undefined
-          };
-          const threadIndex = next.threads?.findIndex(
-            (t) => t.id === threadIdToRename
-          );
+          const next = { ...prev, threads: prev?.threads ? [...prev.threads] : undefined };
+          const threadIndex = next.threads?.findIndex((t) => t.id === threadIdToRename);
           if (typeof threadIndex === 'number' && next.threads) {
-            next.threads[threadIndex] = {
-              ...next.threads[threadIndex],
-              name: threadNewName
-            };
+            next.threads[threadIndex] = { ...next.threads[threadIndex], name: threadNewName };
           }
           return next;
         });
-        return (
-          <div>
-            <Translator path="threadHistory.thread.actions.rename.success" />
-          </div>
-        );
+        return <div><Translator path="threadHistory.thread.actions.rename.success" /></div>;
       },
       error: (err) => {
-        if (err instanceof ClientError) {
-          return <span>{err.message}</span>;
-        } else {
-          return <span></span>;
-        }
+        return err instanceof ClientError ? <span>{err.message}</span> : <span></span>;
       }
     });
   };
@@ -283,21 +241,16 @@ export function ThreadList({
   const getTimeGroupLabel = (group: string) => {
     const labels = {
       Today: <Translator path="threadHistory.sidebar.timeframes.today" />,
-      Yesterday: (
-        <Translator path="threadHistory.sidebar.timeframes.yesterday" />
-      ),
-      'Previous 7 days': (
-        <Translator path="threadHistory.sidebar.timeframes.previous7days" />
-      ),
-      'Previous 30 days': (
-        <Translator path="threadHistory.sidebar.timeframes.previous30days" />
-      )
+      Yesterday: <Translator path="threadHistory.sidebar.timeframes.yesterday" />,
+      'Previous 7 days': <Translator path="threadHistory.sidebar.timeframes.previous7days" />,
+      'Previous 30 days': <Translator path="threadHistory.sidebar.timeframes.previous30days" />
     };
     return labels[group as keyof typeof labels] || group;
   };
 
   return (
     <>
+      {/* 1. Delete Dialog */}
       <AlertDialog
         open={!!threadIdToDelete}
         onOpenChange={() => setThreadIdToDelete(undefined)}
@@ -307,20 +260,27 @@ export function ThreadList({
             <AlertDialogTitle>
               <Translator path="threadHistory.thread.actions.delete.title" />
             </AlertDialogTitle>
-            <AlertDialogDescription>
-              <Translator path="threadHistory.thread.actions.delete.description" />
+            <AlertDialogDescription asChild>
+              <div className="text-sm text-muted-foreground">
+                <Translator path="threadHistory.thread.actions.delete.description" />
+              </div>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="flex-row gap-2 sm:gap-0">
             <AlertDialogCancel className="mt-0">
               <Translator path="common.actions.cancel" />
             </AlertDialogCancel>
-            <AlertDialogAction onClick={handleDeleteThread}>
+            <AlertDialogAction
+              onClick={handleDeleteThread}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
               <Translator path="common.actions.confirm" />
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* 2. Rename Dialog */}
       <Dialog
         open={!!threadIdToRename}
         onOpenChange={() => setThreadIdToRename(undefined)}
@@ -330,31 +290,27 @@ export function ThreadList({
             <DialogTitle>
               <Translator path="threadHistory.thread.actions.rename.title" />
             </DialogTitle>
-            <DialogDescription>
-              <Translator path="threadHistory.thread.actions.rename.description" />
+            <DialogDescription asChild>
+              <div className="text-sm text-muted-foreground">
+                <Translator path="threadHistory.thread.actions.rename.description" />
+              </div>
             </DialogDescription>
           </DialogHeader>
           <div className="my-6">
-            <Label htmlFor="name" className="text-right">
+            <Label htmlFor="name" className="text-right mb-2 block">
               <Translator path="threadHistory.thread.actions.rename.form.name.label" />
             </Label>
             <Input
               id="name"
               required
-              value={threadNewName}
+              value={threadNewName || ''}
               onChange={(e) => setThreadNewName(e.target.value)}
-              placeholder={t(
-                'threadHistory.thread.actions.rename.form.name.placeholder'
-              )}
+              placeholder={t('threadHistory.thread.actions.rename.form.name.placeholder')}
               autoFocus
             />
           </div>
           <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setThreadIdToRename(undefined)}
-            >
+            <Button type="button" variant="outline" onClick={() => setThreadIdToRename(undefined)}>
               <Translator path="common.actions.cancel" />
             </Button>
             <Button type="button" onClick={handleRenameThread}>
@@ -363,86 +319,91 @@ export function ThreadList({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* 3. Share Dialog */}
       <ShareDialog
         open={isShareDialogOpen}
         onOpenChange={(open) => {
           setIsShareDialogOpen(open);
-          if (!open) {
-            setThreadIdToShare(undefined);
-          }
+          if (!open) setThreadIdToShare(undefined);
         }}
         threadId={threadIdToShare || null}
       />
+
+      {/* 4. Thread list grouped by date */}
       <TooltipProvider delayDuration={300}>
         {sortedTimeGroupKeys.map((group) => {
           const items = threadHistory!.timeGroupedThreads![group];
           return (
             <SidebarGroup key={group}>
-              <SidebarGroupLabel>{getTimeGroupLabel(group)}</SidebarGroupLabel>
+              <SidebarGroupLabel className="px-2 py-4 text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                {getTimeGroupLabel(group)}
+              </SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
                   {items.map((thread) => {
-                    const isResumed =
-                      idToResume === thread.id &&
-                      !threadHistory!.currentThreadId;
+                    const isResumed = idToResume === thread.id && !threadHistory!.currentThreadId;
+                    // Fix: also check activeThreadId from URL for correct highlight
                     const isSelected =
-                      isResumed || threadHistory!.currentThreadId === thread.id;
+                      isResumed ||
+                      threadHistory!.currentThreadId === thread.id ||
+                      activeThreadId === thread.id;
                     return (
-                      <SidebarMenuItem
-                        key={thread.id}
-                        id={`thread-${thread.id}`}
-                      >
+                      <SidebarMenuItem key={thread.id} className="group/sidebar-item">
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <Link to={isResumed ? '' : `/thread/${thread.id}`}>
-                              <SidebarMenuButton
-                                isActive={isSelected}
-                                className="relative h-9 group/thread"
-                              >
+                            {/* Fix: use SidebarMenuButton as Link to avoid nested <a> HTML error */}
+                            <SidebarMenuButton
+                              asChild
+                              isActive={isSelected}
+                              className="h-9 transition-colors pr-8"
+                            >
+                              <Link to={isResumed ? '' : `/thread/${thread.id}`}>
                                 <span className="flex min-w-0 items-center gap-2">
-                                  {thread.metadata?.is_shared ? (
-                                    <Share2
-                                      className="h-4 w-4 shrink-0 text-muted-foreground"
-                                      aria-hidden="true"
-                                    />
-                                  ) : null}
-                                  <span className="truncate">
-                                    {thread.name || (
-                                      <Translator path="threadHistory.thread.untitled" />
-                                    )}
+                                  {thread.metadata?.is_shared && (
+                                    <Share2 className="h-4 w-4 shrink-0 text-muted-foreground" />
+                                  )}
+                                  <span className="truncate font-medium">
+                                    {thread.name || <Translator path="threadHistory.thread.untitled" />}
                                   </span>
                                 </span>
-                                <div
-                                  className={cn(
-                                    'absolute w-10 bottom-0 top-0 right-0 bg-gradient-to-l from-[hsl(var(--sidebar-background))] to-transparent'
-                                  )}
-                                />
-                                <ThreadOptions
-                                  onDelete={() =>
-                                    setThreadIdToDelete(thread.id)
-                                  }
-                                  onRename={() => {
-                                    setThreadIdToRename(thread.id);
-                                    setThreadNewName(thread.name);
-                                  }}
-                                  onShare={
-                                    dataPersistence && threadSharingReady
-                                      ? () => handleShareThread(thread.id)
-                                      : undefined
-                                  }
-                                  className={cn(
-                                    'absolute z-20 bottom-0 top-0 right-0 bg-sidebar-accent hover:bg-sidebar-accent hover:text-primary flex opacity-0 group-hover/thread:opacity-100',
-                                    isSelected &&
-                                      'bg-sidebar-accent opacity-100'
-                                  )}
-                                />
-                              </SidebarMenuButton>
-                            </Link>
+                              </Link>
+                            </SidebarMenuButton>
                           </TooltipTrigger>
                           <TooltipContent side="right" align="center">
-                            <p>{thread.name}</p>
+                            <div className="text-xs">{thread.name}</div>
                           </TooltipContent>
                         </Tooltip>
+
+                        {/* Fix: use SidebarMenuAction instead of SidebarMenuButton to avoid invalid HTML nesting */}
+                        <SidebarMenuAction asChild>
+                          <ThreadOptions
+                            onDelete={(e) => {
+                              e?.preventDefault();
+                              e?.stopPropagation();
+                              setThreadIdToDelete(thread.id);
+                            }}
+                            onRename={(e) => {
+                              e?.preventDefault();
+                              e?.stopPropagation();
+                              setThreadIdToRename(thread.id);
+                              setThreadNewName(thread.name);
+                            }}
+                            onShare={
+                              dataPersistence && threadSharingReady
+                                ? (e) => {
+                                    e?.preventDefault();
+                                    e?.stopPropagation();
+                                    handleShareThread(thread.id);
+                                  }
+                                : undefined
+                            }
+                            className={cn(
+                              'opacity-0 group-hover/sidebar-item:opacity-100 transition-opacity',
+                              isSelected && 'opacity-100'
+                            )}
+                          />
+                        </SidebarMenuAction>
                       </SidebarMenuItem>
                     );
                   })}
@@ -452,11 +413,12 @@ export function ThreadList({
           );
         })}
       </TooltipProvider>
-      {isLoadingMore ? (
-        <div className="flex items-center justify-center p-2">
+
+      {isLoadingMore && (
+        <div className="flex items-center justify-center p-4">
           <Loader />
         </div>
-      ) : null}
+      )}
     </>
   );
 }
diff --git a/frontend/src/components/LeftSidebar/ThreadOptions.tsx b/frontend/src/components/LeftSidebar/ThreadOptions.tsx
index 6c22d676c9..d017376d5c 100644
--- a/frontend/src/components/LeftSidebar/ThreadOptions.tsx
+++ b/frontend/src/components/LeftSidebar/ThreadOptions.tsx
@@ -1,3 +1,4 @@
+
 import { cn } from '@/lib/utils';
 import { Ellipsis, Share2, Trash2 } from 'lucide-react';
 
@@ -13,9 +14,10 @@ import {
 import { Translator } from '../i18n';
 
 interface Props {
-  onDelete: () => void;
-  onRename: () => void;
-  onShare?: () => void;
+  // Changement ici : on accepte l'événement pour stopper la propagation
+  onDelete: (e: React.MouseEvent) => void;
+  onRename: (e: React.MouseEvent) => void;
+  onShare?: (e: React.MouseEvent) => void;
   className?: string;
 }
 
@@ -28,56 +30,68 @@ export default function ThreadOptions({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <div
+        {/* Changement : Utilisation d'un bouton réel pour l'accessibilité */}
+        <button
+          type="button"
+          id="thread-options"
           onClick={(e) => {
             e.stopPropagation();
-            e.preventDefault();
+            e.preventDefault(); // Indispensable pour ne pas activer le <Link> parent
           }}
-          id="thread-options"
           className={cn(
             buttonVariants({ variant: 'ghost', size: 'icon' }),
-            'focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-muted-foreground',
+            'h-8 w-8 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-muted-foreground',
             className
           )}
         >
-          <Ellipsis />
-        </div>
+          <Ellipsis className="h-4 w-4" />
+          <span className="sr-only">Options</span>
+        </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-20" align="start" forceMount>
+      
+      {/* Note : Assurez-vous que DropdownMenuContent n'utilise pas cl_shadowRootElement */}
+      <DropdownMenuContent className="w-40" align="end">
         <DropdownMenuItem
           id="rename-thread"
           onClick={(e) => {
             e.stopPropagation();
-            onRename();
+            e.preventDefault();
+            onRename(e);
           }}
+          className="cursor-pointer"
         >
+          <Pencil className="mr-2 h-4 w-4" />
           <Translator path="threadHistory.thread.menu.rename" />
-          <Pencil className="ml-auto" />
         </DropdownMenuItem>
+
         {onShare && (
           <DropdownMenuItem
             id="share-thread"
             onClick={(e) => {
               e.stopPropagation();
-              onShare();
+              e.preventDefault();
+              onShare(e);
             }}
+            className="cursor-pointer"
           >
+            <Share2 className="mr-2 h-4 w-4" />
             <Translator path="threadHistory.thread.menu.share" />
-            <Share2 className="ml-auto" />
           </DropdownMenuItem>
         )}
+
         <DropdownMenuItem
           id="delete-thread"
           onClick={(e) => {
             e.stopPropagation();
-            onDelete();
+            e.preventDefault();
+            onDelete(e);
           }}
-          className="text-red-500 focus:text-red-500"
+          className="text-red-500 focus:text-red-500 cursor-pointer"
         >
+          <Trash2 className="mr-2 h-4 w-4" />
           <Translator path="threadHistory.thread.menu.delete" />
-          <Trash2 className="ml-auto" />
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/LeftSidebar/index.tsx b/frontend/src/components/LeftSidebar/index.tsx
index 74ccfad8ae..c18dc19039 100644
--- a/frontend/src/components/LeftSidebar/index.tsx
+++ b/frontend/src/components/LeftSidebar/index.tsx
@@ -1,24 +1,25 @@
+
 import { useNavigate } from 'react-router-dom';
-
-import SidebarTrigger from '@/components/header/SidebarTrigger';
 import { Sidebar, SidebarHeader, SidebarRail } from '@/components/ui/sidebar';
-
-import NewChatButton from '../header/NewChat';
+import NewChatButton from '@/components/header/NewChat';
 import SearchChats from './Search';
 import { ThreadHistory } from './ThreadHistory';
+import SidebarTrigger from '@/components/header/SidebarTrigger';
 
 export default function LeftSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
-  const navigate = useNavigate();
+  const router = useNavigate();
+  
   return (
     <Sidebar {...props} className="border-none">
       <SidebarHeader className="py-3">
         <div className="flex items-center justify-between">
+          {/* ✅ Trigger à gauche dans la sidebar quand elle est ouverte */}
           <SidebarTrigger />
           <div className="flex items-center">
             <SearchChats />
-            <NewChatButton navigate={navigate} />
+            <NewChatButton navigate={router.push} />
           </div>
         </div>
       </SidebarHeader>
@@ -26,4 +27,4 @@ export default function LeftSidebar({
       <SidebarRail />
     </Sidebar>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
index 833e51a8dd..0018a46488 100644
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -1,8 +1,6 @@
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import { useContext } from 'react';
-
 import { ChainlitContext, useConfig } from '@chainlit/react-client';
-
 import { useTheme } from './ThemeProvider';
 
 interface Props {
@@ -12,11 +10,14 @@ interface Props {
 export const Logo = ({ className }: Props) => {
   const { variant } = useTheme();
   const { config } = useConfig();
-  const apiClient = useContext(ChainlitContext);
-
+  const chainlit = useContext(ChainlitContext);
+  const rawUrl = chainlit.getLogoEndpoint(variant, config?.ui?.logo_file_url);
+  // Fix: resolve absolute URL for standalone/reverse-proxy deployments
+  const baseUrl = chainlit.httpEndpoint ?? '';
+  const logoUrl = rawUrl?.startsWith('http') ? rawUrl : `${baseUrl}${rawUrl}`;
   return (
     <img
-      src={apiClient.getLogoEndpoint(variant, config?.ui?.logo_file_url)}
+      src={logoUrl}
       alt="logo"
       className={cn('logo', className)}
     />
diff --git a/frontend/src/components/Markdown.tsx b/frontend/src/components/Markdown.tsx
index aad12e248e..e2db8d4822 100644
--- a/frontend/src/components/Markdown.tsx
+++ b/frontend/src/components/Markdown.tsx
@@ -1,14 +1,15 @@
+
 import { cn } from '@/lib/utils';
 import { omit } from 'lodash';
 import { useContext, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { PluggableList } from 'react-markdown/lib';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import remarkDirective from 'remark-directive';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import { visit } from 'unist-util-visit';
+import 'katex/dist/katex.min.css';
 
 import { ChainlitContext, type IMessageElement } from '@chainlit/react-client';
 
@@ -99,236 +100,150 @@ const Markdown = ({
 }: Props) => {
   const apiClient = useContext(ChainlitContext);
 
-  if (renderMarkdown === false) {
-    return (
-      <pre
-        className={cn('whitespace-pre-wrap break-words', className)}
-        style={{ fontFamily: 'inherit' }}
-      >
-        {children}
-      </pre>
-    );
-  }
-
   const rehypePlugins = useMemo(() => {
-    let rehypePlugins: PluggableList = [];
+    let plugins: any[] = [];
     if (allowHtml) {
-      rehypePlugins = [rehypeRaw as any, ...rehypePlugins];
+      plugins = [rehypeRaw, ...plugins];
     }
     if (latex) {
-      rehypePlugins = [rehypeKatex as any, ...rehypePlugins];
+      plugins = [rehypeKatex, ...plugins];
     }
-    return rehypePlugins;
+    return plugins;
   }, [allowHtml, latex]);
 
   const remarkPlugins = useMemo(() => {
-    let remarkPlugins: PluggableList = [
+    let plugins: any[] = [
       cursorPlugin,
-      remarkGfm as any,
-      remarkDirective as any,
+      remarkGfm,
+      remarkDirective,
       MarkdownAlert
     ];
 
     if (latex) {
-      remarkPlugins = [...remarkPlugins, remarkMath as any];
+      plugins = [...plugins, remarkMath];
     }
-    return remarkPlugins;
+    return plugins;
   }, [latex]);
 
+  if (renderMarkdown === false) {
+    return (
+      <pre
+        className={cn('whitespace-pre-wrap break-words', className)}
+        style={{ fontFamily: 'inherit' }}
+      >
+        {children}
+      </pre>
+    );
+  }
+
   return (
-    <ReactMarkdown
-      className={cn('prose lg:prose-xl', className)}
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={{
-        ...alertComponents, // add alert components
-        code(props) {
-          return (
-            <code
-              {...omit(props, ['node'])}
-              className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
-            />
-          );
-        },
-        pre({ children, ...props }: any) {
-          return <CodeSnippet {...props} />;
-        },
-        a({ children, ...props }) {
-          const name = children as string;
-          const element = refElements?.find((e) => e.name === name);
-          if (element) {
-            return <ElementRef element={element} />;
-          } else {
+    /* CORRECTION: On applique les classes de style sur une div parente 
+      car react-markdown n'accepte plus className depuis la v9.
+    */
+    <div className={cn('prose lg:prose-xl max-w-none dark:prose-invert', className)}>
+      <ReactMarkdown
+        remarkPlugins={remarkPlugins}
+        rehypePlugins={rehypePlugins}
+        components={{
+          ...alertComponents,
+          code(props) {
             return (
-              <a
-                {...props}
-                className="text-primary hover:underline"
-                target="_blank"
-              >
-                {children}
-              </a>
+              <code
+                {...omit(props, ['node'])}
+                className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-white"
+              />
+            );
+          },
+          pre({ children, ...props }: any) {
+            return <CodeSnippet {...props} />;
+          },
+          a({ children, ...props }) {
+            const name = children as string;
+            const element = refElements?.find((e) => e.name === name);
+            if (element) {
+              return <ElementRef element={element} />;
+            } else {
+              return (
+                <a
+                  {...props}
+                  className="text-primary hover:underline"
+                  target="_blank"
+                >
+                  {children}
+                </a>
+              );
+            }
+          },
+          img: (image: any) => {
+            const src = image.src.startsWith('/public')
+              ? apiClient.buildEndpoint(image.src)
+              : image.src;
+
+            const videoExtensions = ['.mp4', '.webm', '.mov', '.avi', '.ogv', '.m4v'];
+            const isVideo = videoExtensions.some((ext) =>
+              src.toLowerCase().split(/[?#]/)[0].endsWith(ext)
             );
-          }
-        },
-        img: (image: any) => {
-          // Check if the image source is actually a video file
-          const src = image.src.startsWith('/public')
-            ? apiClient.buildEndpoint(image.src)
-            : image.src;
 
-          const videoExtensions = [
-            '.mp4',
-            '.webm',
-            '.mov',
-            '.avi',
-            '.ogv',
-            '.m4v'
-          ];
-          const isVideo = videoExtensions.some((ext) =>
-            src.toLowerCase().split(/[?#]/)[0].endsWith(ext)
-          );
+            if (isVideo) {
+              return (
+                <div className="my-4">
+                  <video
+                    src={src}
+                    controls
+                    className="w-full h-auto rounded-md"
+                    style={{ maxWidth: '100%' }}
+                  >
+                    Your browser does not support the video tag.
+                  </video>
+                </div>
+              );
+            }
 
-          if (isVideo) {
             return (
-              <div className="sm:max-w-sm md:max-w-md">
-                <video
-                  src={src}
-                  controls
-                  className="w-full h-auto rounded-md"
-                  style={{ maxWidth: '100%' }}
-                >
-                  Your browser does not support the video tag.
-                </video>
+              <div className="my-4">
+                <AspectRatio ratio={16 / 9} className="bg-muted rounded-md overflow-hidden">
+                  <img
+                    src={src}
+                    alt={image.alt}
+                    className="h-full w-full object-contain"
+                  />
+                </AspectRatio>
               </div>
             );
+          },
+          blockquote(props) {
+            return (
+              <blockquote
+                {...omit(props, ['node'])}
+                className="mt-6 border-l-2 pl-6 italic border-primary/50"
+              />
+            );
+          },
+          ul(props) {
+            return <ul {...omit(props, ['node'])} className="my-3 ml-3 list-disc pl-2" />;
+          },
+          ol(props) {
+            return <ol {...omit(props, ['node'])} className="my-3 ml-3 list-decimal pl-2" />;
+          },
+          table({ children, ...props }) {
+            return (
+              <Card className="my-4 overflow-hidden">
+                <Table {...(props as any)}>{children}</Table>
+              </Card>
+            );
+          },
+          // @ts-expect-error custom plugin
+          blinkingCursor: () => <BlinkingCursor whitespace />,
+          alert: ({ type, children, ...props }: AlertProps & { type?: string }) => {
+            const alertType = normalizeAlertType(type || props.variant || 'info');
+            return alertComponents.Alert({ variant: alertType, children });
           }
-
-          return (
-            <div className="sm:max-w-sm md:max-w-md">
-              <AspectRatio
-                ratio={16 / 9}
-                className="bg-muted rounded-md overflow-hidden"
-              >
-                <img
-                  src={src}
-                  alt={image.alt}
-                  className="h-full w-full object-contain"
-                />
-              </AspectRatio>
-            </div>
-          );
-        },
-        blockquote(props) {
-          return (
-            <blockquote
-              {...omit(props, ['node'])}
-              className="mt-6 border-l-2 pl-6 italic"
-            />
-          );
-        },
-        em(props) {
-          return <span {...omit(props, ['node'])} className="italic" />;
-        },
-        strong(props) {
-          return <span {...omit(props, ['node'])} className="font-bold" />;
-        },
-        hr() {
-          return <Separator />;
-        },
-        ul(props) {
-          return (
-            <ul
-              {...omit(props, ['node'])}
-              className="my-3 ml-3 list-disc pl-2 [&>li]:mt-1"
-            />
-          );
-        },
-        ol(props) {
-          return (
-            <ol
-              {...omit(props, ['node'])}
-              className="my-3 ml-3 list-decimal pl-2 [&>li]:mt-1"
-            />
-          );
-        },
-        h1(props) {
-          return (
-            <h1
-              {...omit(props, ['node'])}
-              className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mt-8 first:mt-0"
-            />
-          );
-        },
-        h2(props) {
-          return (
-            <h2
-              {...omit(props, ['node'])}
-              className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight mt-8 first:mt-0"
-            />
-          );
-        },
-        h3(props) {
-          return (
-            <h3
-              {...omit(props, ['node'])}
-              className="scroll-m-20 text-2xl font-semibold tracking-tight mt-6 first:mt-0"
-            />
-          );
-        },
-        h4(props) {
-          return (
-            <h4
-              {...omit(props, ['node'])}
-              className="scroll-m-20 text-xl font-semibold tracking-tight mt-6 first:mt-0"
-            />
-          );
-        },
-        p(props) {
-          return (
-            <div
-              {...omit(props, ['node'])}
-              className="leading-7 [&:not(:first-child)]:mt-4 whitespace-pre-wrap break-words"
-              role="article"
-            />
-          );
-        },
-        table({ children, ...props }) {
-          return (
-            <Card className="[&:not(:first-child)]:mt-2 [&:not(:last-child)]:mb-2">
-              <Table {...(props as any)}>{children}</Table>
-            </Card>
-          );
-        },
-        thead({ children, ...props }) {
-          return <TableHeader {...(props as any)}>{children}</TableHeader>;
-        },
-        tr({ children, ...props }) {
-          return <TableRow {...(props as any)}>{children}</TableRow>;
-        },
-        th({ children, ...props }) {
-          return <TableHead {...(props as any)}>{children}</TableHead>;
-        },
-        td({ children, ...props }) {
-          return <TableCell {...(props as any)}>{children}</TableCell>;
-        },
-        tbody({ children, ...props }) {
-          return <TableBody {...(props as any)}>{children}</TableBody>;
-        },
-        // @ts-expect-error custom plugin
-        blinkingCursor: () => <BlinkingCursor whitespace />,
-        alert: ({
-          type,
-          children,
-          ...props
-        }: AlertProps & { type?: string }) => {
-          const alertType = normalizeAlertType(type || props.variant || 'info');
-          return alertComponents.Alert({ variant: alertType, children });
-        }
-      }}
-    >
-      {children}
-    </ReactMarkdown>
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
   );
 };
 
-export { Markdown };
+export { Markdown };
\ No newline at end of file
diff --git a/frontend/src/components/ThemeProvider.tsx b/frontend/src/components/ThemeProvider.tsx
index 948c2d120d..db2d5c6f0c 100644
--- a/frontend/src/components/ThemeProvider.tsx
+++ b/frontend/src/components/ThemeProvider.tsx
@@ -1,3 +1,4 @@
+
 import { createContext, useContext, useEffect, useState } from 'react';
 
 type Theme = 'dark' | 'light' | 'system';
@@ -21,8 +22,13 @@ const initialState: ThemeProviderState = {
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 function applyThemeVariables(variant: 'dark' | 'light') {
+  // Protection SSR
+  if (typeof window === 'undefined') return;
+
+  // @ts-ignore - window.theme est injecté par Chainlit
   if (!window.theme) return;
 
+  // @ts-ignore
   const variables = window.theme[variant];
   if (!variables) return;
 
@@ -30,7 +36,7 @@ function applyThemeVariables(variant: 'dark' | 'light') {
 
   // Apply new theme variables
   Object.entries(variables).forEach(([key, value]) => {
-    root.style.setProperty(key, value);
+    root.style.setProperty(key, value as string);
   });
 }
 
@@ -40,10 +46,22 @@ export function ThemeProvider({
   storageKey = 'vite-ui-theme',
   ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  );
+  // 1. Initialisation sûre pour le SSR (sans localStorage immédiat)
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+
+  // 2. Récupération du thème depuis localStorage uniquement côté client (après le montage)
   useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(storageKey) as Theme;
+      if (stored) {
+        setTheme(stored);
+      }
+    }
+  }, [storageKey]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
     const root = window.document.documentElement;
 
     root.classList.remove('light', 'dark');
@@ -66,9 +84,11 @@ export function ThemeProvider({
 
   const value = {
     theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
+    setTheme: (newTheme: Theme) => {
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(storageKey, newTheme);
+      }
+      setTheme(newTheme);
     }
   };
 
@@ -85,11 +105,16 @@ export const useTheme = () => {
   if (context === undefined)
     throw new Error('useTheme must be used within a ThemeProvider');
 
-  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light';
+  // 3. Protection SSR pour matchMedia
+  let systemTheme: 'dark' | 'light' = 'light'; // Valeur par défaut pour le serveur
+
+  if (typeof window !== 'undefined') {
+    systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  }
 
   const variant = context.theme === 'system' ? systemTheme : context.theme;
 
   return { ...context, variant };
-};
+};
\ No newline at end of file
diff --git a/frontend/src/components/chat/MessageComposer/Attachment.tsx b/frontend/src/components/chat/MessageComposer/Attachment.tsx
index d5087044e2..adfa41391a 100644
--- a/frontend/src/components/chat/MessageComposer/Attachment.tsx
+++ b/frontend/src/components/chat/MessageComposer/Attachment.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo } from 'react';
+
+import React, { useEffect, useState, useMemo } from 'react';
 import { DefaultExtensionType, FileIcon, defaultStyles } from 'react-file-icon';
 
 import { Card } from '@/components/ui/card';
@@ -22,78 +23,66 @@ const Attachment: React.FC<AttachmentProps> = ({
   children,
   file
 }) => {
-  const isImage = useMemo(() => mime.startsWith('image/'), [mime]);
-  const imageUrl = useMemo(() => {
-    if (isImage && file) {
-      return URL.createObjectURL(file);
-    }
-    return undefined;
-  }, [isImage, file]);
+  const [imageUrl, setImageUrl] = useState<string | undefined>();
+  const isImage = mime.startsWith('image/');
 
-  // Cleanup Object URL on unmount or when imageUrl changes
   useEffect(() => {
-    return () => {
-      if (imageUrl) {
-        URL.revokeObjectURL(imageUrl);
-      }
-    };
-  }, [imageUrl]);
+    if (isImage && file) {
+      const url = URL.createObjectURL(file);
+      setImageUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [file, isImage]);
 
-  let extension: DefaultExtensionType;
-  if (name.includes('.')) {
-    extension = name.split('.').pop()!.toLowerCase() as DefaultExtensionType;
-  } else {
-    extension = mime
-      ? ((mime.split('/').pop() || 'txt') as DefaultExtensionType)
-      : ('txt' as DefaultExtensionType);
-  }
+  // Extraction propre de l'extension pour react-file-icon
+  const extension = useMemo(() => {
+    const ext = name.includes('.') 
+      ? name.split('.').pop()?.toLowerCase() 
+      : (mime?.split('/').pop() || 'txt');
+    return ext as DefaultExtensionType;
+  }, [name, mime]);
 
-  if (isImage && imageUrl) {
-    return (
-      <TooltipProvider delayDuration={100}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="relative h-[58px] w-[58px]">
-              {children}
-              <Card className="h-full p-1 flex items-center justify-center rounded-lg border overflow-hidden">
-                <img
-                  src={imageUrl}
-                  alt={name}
-                  className="h-full w-full object-cover"
-                />
-              </Card>
-            </div>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>{name}</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }
+  const renderContent = () => (
+    <div className="relative h-[58px] w-full flex items-center justify-center">
+      {children}
+      {isImage && imageUrl ? (
+        <Card className="h-[58px] w-[58px] p-1 flex items-center justify-center rounded-lg border overflow-hidden">
+          <img
+            src={imageUrl}
+            alt={name}
+            className="h-full w-full object-cover"
+          />
+        </Card>
+      ) : (
+        <Card className="h-full p-2 flex flex-row items-center gap-3 rounded-lg w-full max-w-[200px] border bg-card">
+          <div className="w-8 shrink-0">
+            <FileIcon 
+              extension={extension} 
+              {...(defaultStyles[extension] || defaultStyles.txt)} 
+            />
+          </div>
+          <span className="truncate flex-1 font-medium text-xs">
+            {name}
+          </span>
+        </Card>
+      )}
+    </div>
+  );
 
   return (
     <TooltipProvider delayDuration={100}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className="relative h-[58px]">
-            {children}
-            <Card className="h-full p-2 flex flex-row items-center gap-3 rounded-lg w-full max-w-[200px] border">
-              <div className="w-10">
-                <FileIcon {...defaultStyles[extension]} extension={extension} />
-              </div>
-              <span className="truncate w-[80%] font-medium text-sm font-medium">
-                {name}
-              </span>
-            </Card>
+          <div className={isImage ? "w-[58px]" : "w-fit"}>
+            {renderContent()}
           </div>
         </TooltipTrigger>
         <TooltipContent>
-          <p>{name}</p>
+          <div className="text-xs font-sans">{name}</div>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
 };
 
-export { Attachment };
+export { Attachment };
\ No newline at end of file
diff --git a/frontend/src/components/chat/MessageComposer/Attachments.tsx b/frontend/src/components/chat/MessageComposer/Attachments.tsx
index a9418d8005..ae93354412 100644
--- a/frontend/src/components/chat/MessageComposer/Attachments.tsx
+++ b/frontend/src/components/chat/MessageComposer/Attachments.tsx
@@ -77,8 +77,8 @@ const Attachments = () => {
 
   if (attachments.length === 0) return null;
 
-  return (
-    <div id="attachments" className="flex flex-row flex-wrap gap-4 w-fit">
+return (
+    <div id="attachments" className="flex flex-row flex-wrap gap-4 w-fit p-1">
       {attachments.map((attachment) => {
         const showProgress = !attachment.uploaded && attachment.cancel;
 
@@ -86,7 +86,7 @@ const Attachments = () => {
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <div className="absolute -right-2 -top-2">
+                <div className="absolute -right-2 -top-2 z-10">
                   <CircularProgressButton
                     progress={attachment.uploadProgress || 0}
                     onClick={() => attachment.cancel?.()}
@@ -96,7 +96,8 @@ const Attachments = () => {
                 </div>
               </TooltipTrigger>
               <TooltipContent>
-                {t('chat.fileUpload.actions.cancelUpload')}
+                {/* CORRECTION : div au lieu de p */}
+                <div className="text-xs">{String(t('chat.fileUpload.actions.cancelUpload'))}</div>
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
@@ -107,10 +108,10 @@ const Attachments = () => {
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <div className="absolute -right-2 -top-2">
+                  <div className="absolute -right-2 -top-2 z-10">
                     <Button
                       size="icon"
-                      className="w-6 h-6 shadow-sm rounded-full border-4 bg-card hover:bg-card text-foreground light:border-muted"
+                      className="w-6 h-6 shadow-sm rounded-full border-2 bg-card hover:bg-muted text-foreground"
                       onClick={attachment.remove}
                     >
                       <X className="!size-3" />
@@ -118,7 +119,8 @@ const Attachments = () => {
                   </div>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {t('chat.fileUpload.actions.removeAttachment')}
+                   {/* CORRECTION : div au lieu de p */}
+                  <div className="text-xs">{String(t('chat.fileUpload.actions.removeAttachment'))}</div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
diff --git a/frontend/src/components/chat/MessageComposer/CommandPopoverButton.tsx b/frontend/src/components/chat/MessageComposer/CommandPopoverButton.tsx
index 9d35d4834d..7f5a2a140a 100644
--- a/frontend/src/components/chat/MessageComposer/CommandPopoverButton.tsx
+++ b/frontend/src/components/chat/MessageComposer/CommandPopoverButton.tsx
@@ -26,7 +26,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
-import { useTranslation } from 'components/i18n/Translator';
+import { useTranslation } from '@/components/i18n/Translator';
 
 import { useCommandNavigation } from '@/hooks/useCommandNavigation';
 
@@ -175,7 +175,7 @@ export const CommandPopoverButton = ({
                   />
                   {!hasSelectedNonButtonCommand && (
                     <span className="overflow-hidden transition-all duration-300 opacity-100 w-auto max-w-[100px]">
-                      {t('chat.commands.button')}
+                      {String(t('chat.commands.button'))}
                     </span>
                   )}
                 </Button>
@@ -184,8 +184,8 @@ export const CommandPopoverButton = ({
             <TooltipContent>
               <p>
                 {hasSelectedNonButtonCommand
-                  ? t('chat.commands.changeTool')
-                  : t('chat.commands.availableTools')}
+                  ? String(t('chat.commands.changeTool'))
+                  : String(t('chat.commands.availableTools'))}
               </p>
             </TooltipContent>
           </Tooltip>
diff --git a/frontend/src/components/chat/MessageComposer/Mcp/AddForm.tsx b/frontend/src/components/chat/MessageComposer/Mcp/AddForm.tsx
index adb9e81918..78a7810998 100644
--- a/frontend/src/components/chat/MessageComposer/Mcp/AddForm.tsx
+++ b/frontend/src/components/chat/MessageComposer/Mcp/AddForm.tsx
@@ -18,7 +18,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 interface McpAddFormProps {
   onSuccess: () => void;
diff --git a/frontend/src/components/chat/MessageComposer/Mcp/List.tsx b/frontend/src/components/chat/MessageComposer/Mcp/List.tsx
index 4a451a4dbb..ebcfc415c3 100644
--- a/frontend/src/components/chat/MessageComposer/Mcp/List.tsx
+++ b/frontend/src/components/chat/MessageComposer/Mcp/List.tsx
@@ -25,7 +25,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 interface McpListProps {
   onAddNewClick: () => void;
diff --git a/frontend/src/components/chat/MessageComposer/Mcp/index.tsx b/frontend/src/components/chat/MessageComposer/Mcp/index.tsx
index eaf1d4dbfe..429c64c141 100644
--- a/frontend/src/components/chat/MessageComposer/Mcp/index.tsx
+++ b/frontend/src/components/chat/MessageComposer/Mcp/index.tsx
@@ -1,5 +1,6 @@
+
 import { Plug } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { mcpState, useConfig } from '@chainlit/react-client';
@@ -28,8 +29,10 @@ interface Props {
   disabled?: boolean;
 }
 
-const McpButton = ({ disabled }: Props) => {
+// Composant interne contenant la logique métier
+const McpButtonContent = ({ disabled }: Props) => {
   const { config } = useConfig();
+  // useRecoilState(mcpState) provoque l'erreur localStorage sur le serveur
   const [mcps] = useRecoilState(mcpState);
 
   const [open, setOpen] = useState(false);
@@ -43,12 +46,11 @@ const McpButton = ({ disabled }: Props) => {
   if (!allowMcp || (!allowSse && !allowStdio && !allowHttp)) return null;
 
   const connectedMcps = mcps.filter((mcp) => mcp.status === 'connected');
-
   const mcpLoading = mcps.find((mcp) => mcp.status === 'connecting');
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -111,4 +113,18 @@ const McpButton = ({ disabled }: Props) => {
   );
 };
 
-export default McpButton;
+// Composant principal avec garde de montage pour Next.js
+const McpButton = (props: Props) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Ne rien rendre sur le serveur pour éviter l'accès prématuré à localStorage
+  if (!mounted) return null;
+
+  return <McpButtonContent {...props} />;
+};
+
+export default McpButton;
\ No newline at end of file
diff --git a/frontend/src/components/chat/MessageComposer/SubmitButton.tsx b/frontend/src/components/chat/MessageComposer/SubmitButton.tsx
index fb5a7da7aa..f0948e7e4c 100644
--- a/frontend/src/components/chat/MessageComposer/SubmitButton.tsx
+++ b/frontend/src/components/chat/MessageComposer/SubmitButton.tsx
@@ -13,7 +13,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 interface SubmitButtonProps {
   disabled?: boolean;
diff --git a/frontend/src/components/chat/MessageComposer/UploadButton.tsx b/frontend/src/components/chat/MessageComposer/UploadButton.tsx
index b61be44f9b..2a0b57a836 100644
--- a/frontend/src/components/chat/MessageComposer/UploadButton.tsx
+++ b/frontend/src/components/chat/MessageComposer/UploadButton.tsx
@@ -1,6 +1,6 @@
+
+import React, { forwardRef } from 'react';
 import { FileSpec, useConfig } from '@chainlit/react-client';
-
-import { Translator } from '@/components/i18n';
 import { PaperClip } from '@/components/icons/PaperClip';
 import { Button } from '@/components/ui/button';
 import {
@@ -9,7 +9,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
-
+import { Translator } from '@/components/i18n';
 import { useUpload } from '@/hooks/useUpload';
 
 interface UploadButtonProps {
@@ -19,55 +19,53 @@ interface UploadButtonProps {
   onFileUploadError: (error: string) => void;
 }
 
-export const UploadButton = ({
-  disabled = false,
-  fileSpec,
-  onFileUpload,
-  onFileUploadError
-}: UploadButtonProps) => {
-  const { config } = useConfig();
-  const upload = useUpload({
-    spec: fileSpec,
-    onResolved: (payloads: File[]) => onFileUpload(payloads),
-    onError: onFileUploadError,
-    options: { noDrag: true }
-  });
-
-  if (!upload) return null;
-  const { getRootProps, getInputProps } = upload;
+export const UploadButton = forwardRef<HTMLSpanElement, UploadButtonProps>(
+  ({ disabled = false, fileSpec, onFileUpload, onFileUploadError }, ref) => {
+    const { config } = useConfig();
+    const upload = useUpload({
+      spec: fileSpec,
+      onResolved: (payloads: File[]) => onFileUpload(payloads),
+      onError: onFileUploadError,
+      options: { noDrag: true }
+    });
 
-  if (!config?.features.spontaneous_file_upload?.enabled) return null;
+    if (!upload || !config?.features.spontaneous_file_upload?.enabled) return null;
+    const { getRootProps, getInputProps } = upload;
 
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="inline-block">
-            <input
-              id="upload-button-input"
-              className="hidden"
-              {...getInputProps()}
-            />
-            <Button
-              id={disabled ? 'upload-button-loading' : 'upload-button'}
-              variant="ghost"
-              size="icon"
-              className="hover:bg-muted"
-              disabled={disabled}
-              {...getRootProps()}
-            >
-              <PaperClip className="!size-6" />
-            </Button>
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>
-            <Translator path="chat.input.actions.attachFiles" />
-          </p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span ref={ref} className="inline-block">
+              <input
+                id="upload-button-input"
+                className="hidden"
+                {...getInputProps()}
+              />
+              <Button
+                id={disabled ? 'upload-button-loading' : 'upload-button'}
+                variant="ghost"
+                size="icon"
+                className="hover:bg-muted"
+                disabled={disabled}
+                {...getRootProps()}
+                type="button"
+              >
+                <PaperClip className="!size-6" />
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            {/* CORRECTION : On utilise <div> au lieu de <p> ici */}
+            <div className="text-sm">
+              <Translator path="chat.input.actions.attachFiles" />
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
 
-export default UploadButton;
+UploadButton.displayName = 'UploadButton';
+export default UploadButton;
\ No newline at end of file
diff --git a/frontend/src/components/chat/MessageComposer/VoiceButton.tsx b/frontend/src/components/chat/MessageComposer/VoiceButton.tsx
index 9d4c4ac1bc..16236cf8a7 100644
--- a/frontend/src/components/chat/MessageComposer/VoiceButton.tsx
+++ b/frontend/src/components/chat/MessageComposer/VoiceButton.tsx
@@ -10,10 +10,10 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 import { Loader } from '../../Loader';
-import { VoiceLines } from '../../icons/VoiceLines';
+import { VoiceLines } from '@/components/icons/VoiceLines';
 import { Button } from '../../ui/button';
 
 interface Props {
diff --git a/frontend/src/components/chat/MessageComposer/index.tsx b/frontend/src/components/chat/MessageComposer/index.tsx
index cbfb4c9a1d..48eb23ca36 100644
--- a/frontend/src/components/chat/MessageComposer/index.tsx
+++ b/frontend/src/components/chat/MessageComposer/index.tsx
@@ -1,3 +1,4 @@
+
 import {
   MutableRefObject,
   useCallback,
@@ -7,6 +8,7 @@ import {
 } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
+import { useSearchParams } from 'react-router-dom';
 
 import {
   FileSpec,
@@ -22,15 +24,7 @@ import { modesState } from '@chainlit/react-client';
 
 import { Settings } from '@/components/icons/Settings';
 import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
-import { useTranslation } from 'components/i18n/Translator';
-
-import { useQuery } from '@/hooks/query';
+import { useTranslation } from '@/components/i18n/Translator';
 import { useIsMobile } from '@/hooks/use-mobile';
 
 import { chatSettingsOpenState } from '@/state/project';
@@ -38,7 +32,7 @@ import {
   IAttachment,
   attachmentsState,
   persistentCommandState
-} from 'state/chat';
+} from '@/state/chat';
 
 import { Attachments } from './Attachments';
 import CommandButtons from './CommandButtons';
@@ -71,14 +65,6 @@ export default function MessageComposer({
   );
   const commands = useRecoilValue(commandsState);
   const setChatSettingsOpen = useSetRecoilState(chatSettingsOpenState);
-
-  // Pre-select the command marked as selected by the backend
-  useEffect(() => {
-    const defaultSelected = commands.find((c) => c.selected);
-    if (defaultSelected && !selectedCommand) {
-      setSelectedCommand(defaultSelected);
-    }
-  }, [commands]);
   const [attachments, setAttachments] = useRecoilState(attachmentsState);
   const { t } = useTranslation();
 
@@ -86,6 +72,18 @@ export default function MessageComposer({
   const { sendMessage, replyMessage } = useChatInteract();
   const { askUser, chatSettingsInputs, disabled: _disabled } = useChatData();
 
+  // Next.js: Extraction du prompt depuis l'URL
+  const searchParams = useSearchParams();
+  const promptValue = searchParams?.get('prompt') || '';
+  const [promptUsed, setPromptUsed] = useState(false);
+
+  useEffect(() => {
+    const defaultSelected = commands.find((c) => c.selected);
+    if (defaultSelected && !selectedCommand) {
+      setSelectedCommand(defaultSelected);
+    }
+  }, [commands, selectedCommand, setSelectedCommand]);
+
   const disabled = _disabled || !!attachments.find((a) => !a.uploaded);
 
   const { config } = useConfig();
@@ -95,7 +93,6 @@ export default function MessageComposer({
 
   const isMobile = useIsMobile();
 
-  // Get/set available modes from state - selections are tracked via the 'default' flag on options
   const [modes, setModes] = useRecoilState(modesState);
 
   const handleModeSelect = useCallback(
@@ -116,22 +113,11 @@ export default function MessageComposer({
     [setModes]
   );
 
-  // Helper to get selected option for a mode (the one with default=true, or first option)
   const getSelectedOptionId = useCallback((mode: IMode): string | undefined => {
     const defaultOpt = mode.options.find((opt) => opt.default);
     return defaultOpt?.id || mode.options[0]?.id;
   }, []);
 
-  let promptValue = '';
-  try {
-    const query = useQuery();
-    promptValue = query.get('prompt') || '';
-  } catch {
-    console.warn('Could not parse query parameters');
-  }
-
-  const [promptUsed, setPromptUsed] = useState(false);
-
   const onFavoriteSelect = useCallback((content: string) => {
     setValue(content);
     if (inputRef.current) {
@@ -143,8 +129,6 @@ export default function MessageComposer({
     (event: ClipboardEvent) => {
       if (event.clipboardData && event.clipboardData.items) {
         const items = Array.from(event.clipboardData.items);
-
-        // If no text data, check for files (e.g., images)
         items.forEach((item) => {
           if (item.kind === 'file') {
             const file = item.getAsFile();
@@ -162,9 +146,8 @@ export default function MessageComposer({
     async (
       msg: string,
       attachments?: IAttachment[],
-      selectedCommand?: string
+      commandId?: string // Renommé pour éviter le conflit avec selectedCommand (objet)
     ) => {
-      // Build modes dict: only include modes that have selections
       const modesDict: Record<string, string> = {};
       modes.forEach((mode) => {
         const selectedId = getSelectedOptionId(mode);
@@ -175,14 +158,17 @@ export default function MessageComposer({
 
       const message: IStep = {
         threadId: '',
-        command: selectedCommand,
+        command: commandId,
         modes: Object.keys(modesDict).length > 0 ? modesDict : undefined,
         id: uuidv4(),
         name: user?.identifier || 'User',
         type: 'user_message',
         output: msg,
         createdAt: new Date().toISOString(),
-        metadata: { location: window.location.href }
+        metadata: { 
+          // Protection SSR pour window.location
+          location: typeof window !== 'undefined' ? window.location.href : '' 
+        }
       };
 
       const fileReferences = attachments
@@ -206,7 +192,9 @@ export default function MessageComposer({
         type: 'user_message',
         output: msg,
         createdAt: new Date().toISOString(),
-        metadata: { location: window.location.href }
+        metadata: { 
+          location: typeof window !== 'undefined' ? window.location.href : '' 
+        }
       };
 
       replyMessage(message);
@@ -232,7 +220,7 @@ export default function MessageComposer({
     }
 
     setAttachments([]);
-    setValue(''); // Clear the value state
+    setValue('');
     inputRef.current?.reset();
   }, [
     value,
@@ -248,14 +236,12 @@ export default function MessageComposer({
   useEffect(() => {
     if (inputRef.current && promptValue && !promptUsed) {
       const prompt = promptValue;
-      if (prompt) {
-        if (prompt.length > 1000) {
-          inputRef.current?.setValueExtern(prompt.slice(0, 1000));
-        } else {
-          inputRef.current?.setValueExtern(prompt);
-        }
-        setPromptUsed(true);
+      if (prompt.length > 1000) {
+        inputRef.current?.setValueExtern(prompt.slice(0, 1000));
+      } else {
+        inputRef.current?.setValueExtern(prompt);
       }
+      setPromptUsed(true);
     }
   }, [promptValue, promptUsed]);
 
@@ -278,7 +264,7 @@ export default function MessageComposer({
         onChange={setValue}
         onPaste={onPaste}
         onEnter={submit}
-        placeholder={t('chat.input.placeholder')}
+        placeholder={String(t('chat.input.placeholder'))}
       />
       <div className="flex items-center justify-between">
         <div className="flex items-center -ml-1.5">
@@ -290,25 +276,16 @@ export default function MessageComposer({
             onFileUpload={onFileUpload}
           />
           {showSettingsInComposer && (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    id="chat-settings-open-modal"
-                    disabled={disabled}
-                    onClick={() => setChatSettingsOpen(true)}
-                    className="hover:bg-muted rounded-full"
-                    variant="ghost"
-                    size="icon"
-                  >
-                    <Settings className="!size-6" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{t('navigation.user.menu.settings')}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <Button
+              id="chat-settings-open-modal"
+              disabled={disabled}
+              onClick={() => setChatSettingsOpen(true)}
+              className="hover:bg-muted rounded-full"
+              variant="ghost"
+              size="icon"
+            >
+              <Settings className="!size-6" />
+            </Button>
           )}
           <McpButton disabled={disabled} />
           {modes.map((mode) => (
@@ -330,7 +307,6 @@ export default function MessageComposer({
             selectedCommandId={selectedCommand?.id}
             onCommandSelect={setSelectedCommand}
           />
-
           <FavoriteButton disabled={disabled} onSelect={onFavoriteSelect} />
         </div>
         <div className="flex items-center gap-1">
@@ -345,4 +321,4 @@ export default function MessageComposer({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/chat/Messages/Message/AskActionButtons.tsx b/frontend/src/components/chat/Messages/Message/AskActionButtons.tsx
index 5293f436ff..54a1871ccb 100644
--- a/frontend/src/components/chat/Messages/Message/AskActionButtons.tsx
+++ b/frontend/src/components/chat/Messages/Message/AskActionButtons.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { useContext, useMemo } from 'react';
 
 import { type IAction } from '@chainlit/react-client';
diff --git a/frontend/src/components/chat/Messages/Message/AskFileButton.tsx b/frontend/src/components/chat/Messages/Message/AskFileButton.tsx
index bcbef1e3ee..bc87704f5f 100644
--- a/frontend/src/components/chat/Messages/Message/AskFileButton.tsx
+++ b/frontend/src/components/chat/Messages/Message/AskFileButton.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { Upload } from 'lucide-react';
 import { useContext, useState } from 'react';
 
@@ -9,7 +9,7 @@ import { useTranslation } from '@/components/i18n/Translator';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 
-import { useUpload } from 'hooks/useUpload';
+import { useUpload } from '@/hooks/useUpload';
 
 interface UploadState {
   progress: number;
diff --git a/frontend/src/components/chat/Messages/Message/Avatar.tsx b/frontend/src/components/chat/Messages/Message/Avatar.tsx
index 5b5285dbcb..ada4a2f56c 100644
--- a/frontend/src/components/chat/Messages/Message/Avatar.tsx
+++ b/frontend/src/components/chat/Messages/Message/Avatar.tsx
@@ -17,6 +17,9 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
+import { apiClient } from '@/lib/axios';
+
+const BACKEND_URL = apiClient.defaults.baseURL as string;
 
 interface Props {
   author?: string;
@@ -26,7 +29,7 @@ interface Props {
 }
 
 const MessageAvatar = ({ author, hide, isError, iconName }: Props) => {
-  const apiClient = useContext(ChainlitContext);
+  const chainlit = useContext(ChainlitContext);
   const { chatProfile } = useChatSession();
   const { config } = useConfig();
 
@@ -35,14 +38,16 @@ const MessageAvatar = ({ author, hide, isError, iconName }: Props) => {
   }, [config, chatProfile]);
 
   const avatarUrl = useMemo(() => {
-    if (config?.ui?.default_avatar_file_url)
-      return config?.ui?.default_avatar_file_url;
+    if (config?.ui?.default_avatar_file_url) {
+      const url = config.ui.default_avatar_file_url;
+      return url.startsWith('http') ? url : `${BACKEND_URL}${url}`;
+    }
     const isAssistant = !author || author === config?.ui.name;
     if (isAssistant && selectedChatProfile?.icon) {
       return selectedChatProfile.icon;
     }
-    return apiClient?.buildEndpoint(`/avatars/${author || 'default'}`);
-  }, [apiClient, selectedChatProfile, config, author]);
+    return chainlit?.buildEndpoint(`/avatars/${author || 'default'}`);
+  }, [chainlit, selectedChatProfile, config, author]);
 
   const avatarSize = config?.ui?.avatar_size;
   const sizeStyle = avatarSize
@@ -57,10 +62,9 @@ const MessageAvatar = ({ author, hide, isError, iconName }: Props) => {
     );
   }
 
-  // Render icon or avatar based on iconName
   const avatarContent = iconName ? (
     <span className="inline-flex mt-[3px]">
-      <Icon name={iconName} size={avatarSize ?? 20} /> {/* 20 => h-5 w-5 */}
+      <Icon name={iconName} size={avatarSize ?? 20} />
     </span>
   ) : (
     <Avatar
@@ -92,4 +96,4 @@ const MessageAvatar = ({ author, hide, isError, iconName }: Props) => {
   );
 };
 
-export { MessageAvatar };
+export { MessageAvatar };
\ No newline at end of file
diff --git a/frontend/src/components/chat/Messages/Message/Buttons/Actions/ActionButton.tsx b/frontend/src/components/chat/Messages/Message/Buttons/Actions/ActionButton.tsx
index 33ad82aa20..3c116139e5 100644
--- a/frontend/src/components/chat/Messages/Message/Buttons/Actions/ActionButton.tsx
+++ b/frontend/src/components/chat/Messages/Message/Buttons/Actions/ActionButton.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { toast } from 'sonner';
diff --git a/frontend/src/components/chat/Messages/Message/Buttons/FeedbackButtons.tsx b/frontend/src/components/chat/Messages/Message/Buttons/FeedbackButtons.tsx
index de8c752c1b..a5c3360a76 100644
--- a/frontend/src/components/chat/Messages/Message/Buttons/FeedbackButtons.tsx
+++ b/frontend/src/components/chat/Messages/Message/Buttons/FeedbackButtons.tsx
@@ -179,7 +179,7 @@ export function FeedbackButtons({ message }: FeedbackButtonsProps) {
           <Textarea
             value={commentInput}
             onChange={(e) => setCommentInput(e.target.value || undefined)}
-            placeholder={t('chat.messages.feedback.dialog.yourFeedback')}
+            
             className="min-h-[100px]"
           />
 
diff --git a/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedImageList.tsx b/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedImageList.tsx
index 1a7c672c5b..f5fdc82c2c 100644
--- a/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedImageList.tsx
+++ b/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedImageList.tsx
@@ -1,7 +1,7 @@
 import { ImageElement } from '@/components/Elements/Image';
 import { QuiltedGrid } from '@/components/QuiltedGrid';
 
-import type { IImageElement } from 'client-types/';
+import type { IImageElement } from '@chainlit/react-client';
 
 interface Props {
   items: IImageElement[];
diff --git a/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedVideoList.tsx b/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedVideoList.tsx
index 1094bece12..1f8b1d95da 100644
--- a/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedVideoList.tsx
+++ b/frontend/src/components/chat/Messages/Message/Content/InlinedElements/InlinedVideoList.tsx
@@ -1,6 +1,6 @@
 import { VideoElement } from '@/components/Elements/Video';
 
-import type { IVideoElement } from 'client-types/';
+import type { IVideoElement } from '@chainlit/react-client';
 
 interface Props {
   items: IVideoElement[];
diff --git a/frontend/src/components/chat/Messages/Message/Step.tsx b/frontend/src/components/chat/Messages/Message/Step.tsx
index 96432437bc..19b2226819 100644
--- a/frontend/src/components/chat/Messages/Message/Step.tsx
+++ b/frontend/src/components/chat/Messages/Message/Step.tsx
@@ -9,7 +9,7 @@ import {
   AccordionItem,
   AccordionTrigger
 } from '@/components/ui/accordion';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 interface Props {
   step: IStep;
diff --git a/frontend/src/components/chat/Messages/Message/UserMessage.tsx b/frontend/src/components/chat/Messages/Message/UserMessage.tsx
index ded29d011f..3f64c9de03 100644
--- a/frontend/src/components/chat/Messages/Message/UserMessage.tsx
+++ b/frontend/src/components/chat/Messages/Message/UserMessage.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils';
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { Star } from 'lucide-react';
 import { memo, useContext, useMemo, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
@@ -15,7 +15,7 @@ import {
 import AutoResizeTextarea from '@/components/AutoResizeTextarea';
 import { Pencil } from '@/components/icons/Pencil';
 import { Button } from '@/components/ui/button';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 import { InlinedElements } from './Content/InlinedElements';
 
diff --git a/frontend/src/components/chat/Messages/Message/index.tsx b/frontend/src/components/chat/Messages/Message/index.tsx
index a7ffe81ea4..67c68c5eac 100644
--- a/frontend/src/components/chat/Messages/Message/index.tsx
+++ b/frontend/src/components/chat/Messages/Message/index.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils';
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { memo, useContext, useMemo, useRef } from 'react';
 
 import {
@@ -8,7 +8,7 @@ import {
   type IStep
 } from '@chainlit/react-client';
 
-import { useLayoutMaxWidth } from 'hooks/useLayoutMaxWidth';
+import { useLayoutMaxWidth } from '@/hooks/useLayoutMaxWidth';
 
 import { Messages } from '..';
 import { AskActionButtons } from './AskActionButtons';
@@ -18,7 +18,7 @@ import { MessageButtons } from './Buttons';
 import { MessageContent } from './Content';
 import Step from './Step';
 import UserMessage from './UserMessage';
-
+import BlinkingCursor from '@/components/BlinkingCursor';
 interface Props {
   message: IStep;
   elements: IMessageElement[];
@@ -159,30 +159,32 @@ const Message = memo(
                   ) : (
                     // Display an assistant message
                     <div className="flex flex-col items-start min-w-[150px] flex-grow gap-2">
-                      <MessageContent
-                        ref={contentRef}
-                        elements={elements}
-                        message={message}
-                        allowHtml={allowHtml}
-                        latex={latex}
-                        renderMarkdown={true}
-                      />
+  {isRunning && !message.output?.trim() ? (
+    <BlinkingCursor />
+  ) : (
+    <MessageContent
+      ref={contentRef}
+      elements={elements}
+      message={message}
+      allowHtml={allowHtml}
+      latex={latex}
+      renderMarkdown={true}
+    />
+  )}
 
-                      <AskFileButton messageId={message.id} onError={onError} />
-                      <AskActionButtons
-                        actions={actions}
-                        messageId={message.id}
-                      />
+  <AskFileButton messageId={message.id} onError={onError} />
+  <AskActionButtons
+    actions={actions}
+    messageId={message.id}
+  />
 
-                      <MessageButtons
-                        message={message}
-                        actions={actions}
-                        run={
-                          scorableRun && isScorable ? scorableRun : undefined
-                        }
-                        contentRef={contentRef}
-                      />
-                    </div>
+  <MessageButtons
+    message={message}
+    actions={actions}
+    run={scorableRun && isScorable ? scorableRun : undefined}
+    contentRef={contentRef}
+  />
+</div>
                   )}
                 </div>
               )}
diff --git a/frontend/src/components/chat/Messages/index.tsx b/frontend/src/components/chat/Messages/index.tsx
index 369157aa67..0738ecc6e8 100644
--- a/frontend/src/components/chat/Messages/index.tsx
+++ b/frontend/src/components/chat/Messages/index.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from 'contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import React, { memo, useContext, useMemo } from 'react';
 
 import {
@@ -41,6 +41,16 @@ const hasAssistantMessage = (step: IStep): boolean => {
   );
 };
 
+const hasNonEmptyAssistantMessage = (step: IStep): boolean => {
+  return (
+    step.steps?.some(
+      (s) =>
+        (s.type === 'assistant_message' && s.output?.trim()) ||
+        hasNonEmptyAssistantMessage(s)
+    ) || false
+  );
+};
+
 const Messages = memo(
   ({ messages, elements, actions, indent, isRunning, scorableRun }: Props) => {
     const messageContext = useContext(MessageContext);
@@ -61,6 +71,7 @@ const Messages = memo(
           // Handle chainlit runs
           if (CL_RUN_NAMES.includes(m.name)) {
             const isRunning = !m.end && !m.isError && messageContext.loading;
+//console.log('isRunning:', isRunning, 'm.name:', m.name, 'm.end:', m.end, 'loading:', messageContext.loading);
             const isToolCallCoT =
               messageContext.cot === 'tool_call' ||
               messageContext.cot === 'full';
@@ -77,23 +88,19 @@ const Messages = memo(
             const scorableRun =
               !isRunning && m.name !== 'on_chat_start' ? m : undefined;
             return (
-              <React.Fragment key={m.id}>
-                {m.steps?.length ? (
-                  <Messages
-                    messages={m.steps}
-                    elements={elements}
-                    actions={actions}
-                    indent={indent}
-                    isRunning={isRunning}
-                    scorableRun={scorableRun}
-                  />
-                ) : null}
-                {(showToolCoTLoader || showHiddenCoTLoader) &&
-                m.name !== 'on_chat_start' ? (
-                  <BlinkingCursor />
-                ) : null}
-              </React.Fragment>
-            );
+  <React.Fragment key={m.id}>
+    {m.steps?.length ? (
+      <Messages
+        messages={m.steps}
+        elements={elements}
+        actions={actions}
+        indent={indent}
+        isRunning={isRunning}
+        scorableRun={scorableRun}
+      />
+    ) : null}
+  </React.Fragment>
+);
           } else {
             // Score the current run
             const _scorableRun = m.type === 'run' ? m : scorableRun;
diff --git a/frontend/src/components/chat/MessagesContainer/index.tsx b/frontend/src/components/chat/MessagesContainer/index.tsx
index 18899fec92..78cbbd526c 100644
--- a/frontend/src/components/chat/MessagesContainer/index.tsx
+++ b/frontend/src/components/chat/MessagesContainer/index.tsx
@@ -19,7 +19,7 @@ import {
 } from '@chainlit/react-client';
 
 import { Messages } from '@/components/chat/Messages';
-import { useTranslation } from 'components/i18n/Translator';
+import { useTranslation } from '@/components/i18n/Translator';
 
 interface Props {
   navigate?: (to: string) => void;
@@ -44,11 +44,11 @@ const MessagesContainer = ({ navigate }: Props) => {
     [_uploadFile]
   );
 
-  const onFeedbackUpdated = useCallback(
+const onFeedbackUpdated = useCallback(
     async (message: IStep, onSuccess: () => void, feedback: IFeedback) => {
       toast.promise(apiClient.setFeedback(feedback, sessionId), {
-        loading: t('chat.messages.feedback.status.updating'),
-        success: (res) => {
+        loading: String(t('chat.messages.feedback.status.updating')),
+        success: (res: { feedbackId: string }) => { // Typage explicite du résultat
           setMessages((prev) =>
             updateMessageById(prev, message.id, {
               ...message,
@@ -59,20 +59,22 @@ const MessagesContainer = ({ navigate }: Props) => {
             })
           );
           onSuccess();
-          return t('chat.messages.feedback.status.updated');
+          // CORRECTION : On s'assure que le retour est une string pour satisfaire TypeScript
+          return String(t('chat.messages.feedback.status.updated'));
         },
         error: (err) => {
           return <span>{err.message}</span>;
         }
       });
     },
-    []
+    [sessionId, t, setMessages] // N'oubliez pas d'ajouter les dépendances ici
   );
 
-  const onFeedbackDeleted = useCallback(
+const onFeedbackDeleted = useCallback(
     async (message: IStep, onSuccess: () => void, feedbackId: string) => {
       toast.promise(apiClient.deleteFeedback(feedbackId), {
-        loading: t('chat.messages.feedback.status.updating'),
+        // Correction : On force la conversion en string pour le chargement
+        loading: String(t('chat.messages.feedback.status.updating')),
         success: () => {
           setMessages((prev) =>
             updateMessageById(prev, message.id, {
@@ -81,14 +83,15 @@ const MessagesContainer = ({ navigate }: Props) => {
             })
           );
           onSuccess();
-          return t('chat.messages.feedback.status.updated');
+          // Correction : On force la conversion en string pour le succès
+          return String(t('chat.messages.feedback.status.updated'));
         },
         error: (err) => {
           return <span>{err.message}</span>;
         }
       });
     },
-    []
+    [apiClient, setMessages, t] // Dépendances ajoutées pour éviter les bugs de closure
   );
 
   const knownSideElementsRef = useRef<Map<string, IMessageElement>>(new Map());
diff --git a/frontend/src/components/chat/index.tsx b/frontend/src/components/chat/index.tsx
index 991e5d8f23..06ed4cae7d 100644
--- a/frontend/src/components/chat/index.tsx
+++ b/frontend/src/components/chat/index.tsx
@@ -1,5 +1,6 @@
+
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { toast } from 'sonner';
 import { v4 as uuidv4 } from 'uuid';
@@ -15,13 +16,13 @@ import {
 
 import Alert from '@/components/Alert';
 import { TaskList } from '@/components/Tasklist';
-import { Translator } from 'components/i18n';
-import { useTranslation } from 'components/i18n/Translator';
+import { Translator } from '@/components/i18n';
+import { useTranslation } from '@/components/i18n/Translator';
 
 import { useUpload } from '@/hooks/useUpload';
-import { useLayoutMaxWidth } from 'hooks/useLayoutMaxWidth';
+import { useLayoutMaxWidth } from '@/hooks/useLayoutMaxWidth';
 
-import { IAttachment, attachmentsState } from 'state/chat';
+import { IAttachment, attachmentsState } from '@/state/chat';
 
 import { ErrorBoundary } from '../ErrorBoundary';
 import ChatFooter from './Footer';
@@ -39,27 +40,23 @@ const Chat = () => {
   const { error, disabled, callFn } = useChatData();
   const { uploadFile } = useChatInteract();
   const uploadFileRef = useRef(uploadFile);
-  const navigate = useNavigate();
+  
+  // <-- Implémentation Next.js
+  const router = useNavigate();
+  const pathname = useLocation().pathname;
+  const navigate = router.push; 
 
-  // Update file upload MIME types to use standard format following Mozilla's guidelines: @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-  // Instead of using '*/*' which may cause MIME type warnings, we specify exact MIME type categories:
-  // - 'application/*' - for general files
-  // - 'audio/*' - for audio files
-  // - 'image/*' - for image files
-  // - 'text/*' - for text files
-  // - 'video/*' - for video files
-  // This provides better type safety and clearer file type expectations.
   const fileSpec = useMemo(
     () => ({
       max_size_mb:
         config?.features?.spontaneous_file_upload?.max_size_mb || 500,
       max_files: config?.features?.spontaneous_file_upload?.max_files || 20,
       accept: config?.features?.spontaneous_file_upload?.accept || {
-        'application/*': [], // All application files
-        'audio/*': [], // All audio files
-        'image/*': [], // All image files
-        'text/*': [], // All text files
-        'video/*': [] // All video files
+        'application/*': [], 
+        'audio/*': [], 
+        'image/*': [], 
+        'text/*': [], 
+        'video/*': [] 
       }
     }),
     [config]
@@ -107,7 +104,6 @@ const Chat = () => {
                 if (attachment.id === id) {
                   return {
                     ...attachment,
-                    // Update with the server ID
                     serverId: res.id,
                     uploaded: true,
                     uploadProgress: 100,
@@ -154,12 +150,12 @@ const Chat = () => {
       });
       setAttachments((prev) => prev.concat(attachements));
     },
-    [uploadFile]
+    [uploadFile, setAttachments, t]
   );
 
   const onFileUploadError = useCallback(
     (error: string) => toast.error(error),
-    [toast]
+    []
   );
 
   const upload = useUpload({
@@ -172,12 +168,12 @@ const Chat = () => {
   const { threadId } = useChatMessages();
 
   useEffect(() => {
-    const currentPage = new URL(window.location.href);
+    // <-- Adapté pour Next.js : utilisation de pathname au lieu de window.location.href
     if (
       user &&
       config?.dataPersistence &&
       threadId &&
-      currentPage.pathname === '/'
+      (pathname === '/' || pathname === '/chat')
     ) {
       navigate(`/thread/${threadId}`);
     } else {
@@ -186,16 +182,16 @@ const Chat = () => {
         currentThreadId: threadId
       }));
     }
-  }, []);
+  }, [user, config, threadId, pathname, navigate, setThreads]);
 
   const enableAttachments =
     !disabled && config?.features?.spontaneous_file_upload?.enabled;
+    
   return (
     <div
       {...(enableAttachments
         ? upload.getRootProps({ className: 'dropzone' })
         : {})}
-      // Disable the onFocus and onBlur events in react-dropzone to avoid interfering with child trigger events
       onBlur={undefined}
       onFocus={undefined}
       className="flex w-full h-full flex-col relative"
@@ -253,4 +249,4 @@ const Chat = () => {
   );
 };
 
-export default Chat;
+export default Chat;
\ No newline at end of file
diff --git a/frontend/src/components/header/NewChat.tsx b/frontend/src/components/header/NewChat.tsx
index 73acf17f97..f2b5c7ff4b 100644
--- a/frontend/src/components/header/NewChat.tsx
+++ b/frontend/src/components/header/NewChat.tsx
@@ -94,7 +94,7 @@ const NewChatButton = ({ navigate, onConfirm, ...buttonProps }: Props) => {
       onConfirm();
     } else {
       clear();
-      navigate?.('/');
+      navigate?.('/chat');
     }
     handleClose();
   };
diff --git a/frontend/src/components/header/NotificationBell.tsx b/frontend/src/components/header/NotificationBell.tsx
new file mode 100644
index 0000000000..d55b198c5a
--- /dev/null
+++ b/frontend/src/components/header/NotificationBell.tsx
@@ -0,0 +1,110 @@
+import { Bell } from "lucide-react";
+import { useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { Notification } from "@/hooks/useNotifications";
+
+interface NotificationBellProps {
+  notifications: Notification[];
+  unreadCount: number;
+  onOpen: () => void;
+}
+
+export function NotificationBell({
+  notifications,
+  unreadCount,
+  onOpen,
+}: NotificationBellProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen) onOpen();
+  };
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts * 1000);
+    return d.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative h-9 w-9 rounded-full"
+          aria-label="Notifications"
+        >
+          <Bell className="h-4 w-4" />
+          {unreadCount > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500 text-[10px] font-bold text-white animate-pulse">
+              {unreadCount > 9 ? "9+" : unreadCount}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" className="w-80 p-0 shadow-xl" sideOffset={8}>
+        {/* Header */}
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <span className="text-sm font-semibold">Notifications</span>
+          {notifications.length > 0 && (
+            <Badge variant="secondary" className="text-xs">
+              {notifications.length}
+            </Badge>
+          )}
+        </div>
+
+        {/* List */}
+        <ScrollArea className="max-h-72">
+          {notifications.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
+              <Bell className="h-8 w-8 opacity-20" />
+              <span className="text-xs">No notifications</span>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {notifications.map((notif) => (
+                <div
+                  key={notif.id}
+                  className="flex gap-3 px-4 py-3 hover:bg-muted/40 transition-colors"
+                >
+                  {/* Type indicator */}
+                  <div
+                    className={cn(
+                      "mt-0.5 h-2 w-2 shrink-0 rounded-full",
+                      notif.type === "success" && "bg-emerald-500",
+                      notif.type === "error" && "bg-red-500",
+                      notif.type === "info" && "bg-blue-500"
+                    )}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-medium leading-snug">
+                      {notif.title}
+                    </p>
+                    {notif.message && (
+                      <p className="mt-0.5 text-xs text-muted-foreground leading-snug line-clamp-2">
+                        {notif.message}
+                      </p>
+                    )}
+                    <p className="mt-1 text-[10px] text-muted-foreground/60">
+                      {formatTime(notif.timestamp)}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/frontend/src/components/header/SidebarTrigger.tsx b/frontend/src/components/header/SidebarTrigger.tsx
index 0b28d8775a..e3c82f5500 100644
--- a/frontend/src/components/header/SidebarTrigger.tsx
+++ b/frontend/src/components/header/SidebarTrigger.tsx
@@ -1,44 +1,45 @@
+
+import React, { forwardRef } from 'react';
 import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
-import { Translator } from 'components/i18n';
-
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Translator } from '@/components/i18n';
 import { Sidebar } from '../icons/Sidebar';
 import { useSidebar } from '../ui/sidebar';
 
-export default function SidebarTrigger() {
-  const { setOpen, open, openMobile, setOpenMobile, isMobile } = useSidebar();
+const SidebarTrigger = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  (props, ref) => {
+    const { setOpen, open, openMobile, setOpenMobile, isMobile } = useSidebar();
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              {...props}
+              ref={ref} // Transmission de la ref ici
+              id="sidebar-trigger-button"
+              onClick={() => (isMobile ? setOpenMobile(!openMobile) : setOpen(!open))}
+              size="icon"
+              variant="ghost"
+              className="text-muted-foreground hover:text-muted-foreground"
+            >
+              <Sidebar className="!size-6" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>
+              {open ? (
+                <Translator path="threadHistory.sidebar.actions.close" />
+              ) : (
+                <Translator path="threadHistory.sidebar.actions.open" />
+              )}
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
 
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            id="sidebar-trigger-button"
-            onClick={() =>
-              isMobile ? setOpenMobile(!openMobile) : setOpen(!open)
-            }
-            size="icon"
-            variant="ghost"
-            className="text-muted-foreground hover:text-muted-foreground"
-          >
-            <Sidebar className="!size-6" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>
-            {open ? (
-              <Translator path="threadHistory.sidebar.actions.close" />
-            ) : (
-              <Translator path="threadHistory.sidebar.actions.open" />
-            )}
-          </p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
+SidebarTrigger.displayName = 'SidebarTrigger';
+export default SidebarTrigger;
\ No newline at end of file
diff --git a/frontend/src/components/header/ThemeToggle.tsx b/frontend/src/components/header/ThemeToggle.tsx
index 7db0a3e073..dd3660d3b2 100644
--- a/frontend/src/components/header/ThemeToggle.tsx
+++ b/frontend/src/components/header/ThemeToggle.tsx
@@ -9,7 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
-import { Translator } from 'components/i18n';
+import { Translator } from '@/components/i18n';
 
 interface Props {
   className?: string;
diff --git a/frontend/src/components/header/index.tsx b/frontend/src/components/header/index.tsx
index 15ddac0407..9ca39b7885 100644
--- a/frontend/src/components/header/index.tsx
+++ b/frontend/src/components/header/index.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 
diff --git a/frontend/src/components/i18n/Translator.tsx b/frontend/src/components/i18n/Translator.tsx
index 8681f88f86..88d8cfab16 100644
--- a/frontend/src/components/i18n/Translator.tsx
+++ b/frontend/src/components/i18n/Translator.tsx
@@ -1,46 +1,201 @@
-import { TOptions } from 'i18next';
-import { $Dictionary } from 'i18next/typescript/helpers';
-import { useTranslation as usei18nextTranslation } from 'react-i18next';
-
-import { Skeleton } from '@/components/ui/skeleton';
-
-type options = TOptions<$Dictionary>;
+
+import i18n, { TOptions } from 'i18next';
+import { initReactI18next, useTranslation as usei18nextTranslation } from 'react-i18next';
 
+type TranslatorOptions = TOptions;
 type TranslatorProps = {
   path: string | string[];
   suffix?: string;
-  options?: options;
+  options?: TranslatorOptions;
 };
 
-const Translator = ({ path, options, suffix }: TranslatorProps) => {
-  const { t, i18n } = usei18nextTranslation();
-
-  if (!i18n.exists(path, options)) {
-    return <Skeleton className="h-4 w-10" />;
+const translations = {
+  auth: {
+    login: {
+      title: "Connexion",
+      form: {
+        email: { label: "Email" },
+        password: { label: "Mot de passe" },
+        actions: { signin: "Se connecter" },
+        alternativeText: { or: "Ou" },
+      }
+    }
+  },
+  chat: {
+    input: {
+      placeholder: "Posez votre question à Copilote OCP...",
+      actions: {
+        attachFiles: "Joindre des fichiers",
+        send: "Envoyer",
+        stop: "Arrêter",
+      }
+    },
+    fileUpload: {
+      browse: "Parcourir",
+      dragDrop: "Glissez-déposez vos fichiers ici",
+      sizeLimit: "Taille maximale : {{size}}",
+    },
+    messages: {
+      feedback: {
+        positive: "Utile",
+        negative: "Pas utile",
+        edit: "Modifier le feedback",
+        dialog: {
+          title: "Votre feedback",
+          submit: "Envoyer",
+        }
+      },
+      status: {
+        used: "Utilisé",
+        using: "En cours d'utilisation",
+      },
+      // ✅ NOUVEAU : Ajout des actions pour les messages
+      actions: {
+        copy: {
+          button: "Copier"
+        }
+      }
+    },
+    // ✅ NOUVEAU : Ajout du watermark en bas de page
+    watermark: "Propulsé par Copilote OCP",
+    settings: {
+      title: "Paramètres",
+    }
+  },
+  common: {
+    actions: {
+      cancel: "Annuler",
+      confirm: "Confirmer",
+    },
+    status: {
+      error: {
+        serverConnection: "Impossible de se connecter au serveur",
+      }
+    }
+  },
+  navigation: {
+    header: {
+      readme: "Readme",
+      theme: {
+        dark: "Sombre",
+        light: "Clair",
+        system: "Système",
+      }
+    },
+    newChat: {
+      dialog: {
+        title: "Nouvelle conversation",
+        description: "Commencer une nouvelle conversation ?",
+        tooltip: "Nouvelle conversation",
+      }
+    },
+    user: {
+      menu: {
+        apiKeys: "Clés API",
+        logout: "Déconnexion",
+      }
+    }
+  },
+  threadHistory: {
+    sidebar: {
+      empty: "Aucune conversation",
+      filters: {
+        search: "Rechercher...",
+        placeholder: "Rechercher une conversation...",
+      },
+      actions: {
+        open: "Ouvrir l'historique",
+        close: "Fermer l'historique",
+      },
+      timeframes: {
+        today: "Aujourd'hui",
+        yesterday: "Hier",
+        previous7days: "7 derniers jours",
+        previous30days: "30 derniers jours",
+      }
+    },
+    thread: {
+      untitled: "Sans titre",
+      menu: {
+        delete: "Supprimer",
+        rename: "Renommer",
+        share: "Partager",
+      },
+      actions: {
+        delete: {
+          title: "Supprimer la conversation",
+          description: "Cette action est irréversible. La conversation sera définitivement supprimée.",
+          inProgress: "Suppression en cours...",
+          success: "Conversation supprimée",
+        },
+        rename: {
+          title: "Renommer la conversation",
+          description: "Entrez un nouveau nom pour cette conversation.",
+          inProgress: "Renommage en cours...",
+          success: "Conversation renommée",
+          form: {
+            name: {
+              label: "Nom",
+              placeholder: "Nouveau nom...",
+            }
+          }
+        },
+        share: {
+          title: "Partager la conversation",
+          button: "Partager",
+          status: {
+            created: "Lien créé",
+            copied: "Lien copié !",
+            unshared: "Partage annulé",
+          },
+          error: {
+            create: "Erreur lors de la création du lien",
+            unshare: "Erreur lors de l'annulation du partage",
+          }
+        }
+      }
+    }
   }
+};
 
+if (!i18n.isInitialized) {
+  i18n
+    .use(initReactI18next)
+    .init({
+      fallbackLng: 'fr',
+      lng: 'fr',
+      interpolation: { escapeValue: false },
+      react: { useSuspense: false },
+      resources: {
+        fr: { translation: translations },
+        en: { translation: translations },
+      }
+    })
+    .catch((err) => console.error('[i18n] Erreur initialisation', err));
+} else {
+  i18n.addResourceBundle('fr', 'translation', translations, true, true);
+  i18n.addResourceBundle('en', 'translation', translations, true, true);
+}
+
+const Translator = ({ path, options, suffix }: TranslatorProps) => {
+  const { t } = usei18nextTranslation();
   return (
     <span>
-      {t(path, options)}
+      {String(t(path as any, options as any))}
       {suffix}
     </span>
   );
 };
 
 export const useTranslation = () => {
-  const { t, ready, i18n } = usei18nextTranslation();
-
+  const { t, ready, i18n: i18nInstance } = usei18nextTranslation();
   return {
-    t: (path: string | string[], options?: options) => {
-      if (!i18n.exists(path, options)) {
-        return '...';
-      }
-
-      return t(path, options);
+    t: (path: string | string[], options?: TranslatorOptions): string => {
+      return t(path as any, options as any) as string;
     },
     ready,
-    i18n
+    i18n: i18nInstance
   };
 };
 
-export default Translator;
+export default Translator;
\ No newline at end of file
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index e19abacf3e..dcc3e75e33 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -29,7 +29,7 @@ const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPortal container={window.cl_shadowRootElement}>
+  <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
@@ -91,10 +91,10 @@ const AlertDialogDescription = React.forwardRef<
     ref={ref}
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
+    // On s'assure que Radix accepte de devenir une div si on lui demande
   />
 ));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 84612e4230..dfeb9af5bf 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -1,56 +1,67 @@
-import { cn } from '@/lib/utils';
-import { Slot } from '@radix-ui/react-slot';
-import { type VariantProps, cva } from 'class-variance-authority';
-import * as React from 'react';
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-9 w-9'
-      }
+        default: "h-8 gap-1.5 px-2.5",
+        xs: "h-6 gap-1 px-2 text-xs",
+        sm: "h-7 gap-1 px-2.5 text-[0.8rem]",
+        lg: "h-9 gap-1.5 px-2.5",
+        icon: "size-8",
+        "icon-xs": "size-6",
+        "icon-sm": "size-7",
+        "icon-lg": "size-9",
+      },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
+      variant: "default",
+      size: "default",
+    },
   }
-);
+)
 
-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
+// ✅ FIX: Export du type ButtonProps pour pagination.tsx et autres composants
+export type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
+  ({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        data-slot="button"
+        data-variant={variant}
+        data-size={size}
+        className={cn(buttonVariants({ variant, size, className }))}
         {...props}
       />
-    );
+    )
   }
-);
-Button.displayName = 'Button';
+)
+
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
\ No newline at end of file
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
index f3e0f1d08e..24ecdc582b 100644
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -82,7 +82,7 @@ function Calendar({
             : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5',
           defaultClassNames.caption_label
         ),
-        table: 'w-full border-collapse',
+        month_grid: 'w-full border-collapse',
         weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
           'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index bc3ac0e43a..40cac5f98d 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,85 +1,103 @@
-import { cn } from '@/lib/utils';
-import * as React from 'react';
+import * as React from "react"
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'rounded-lg border bg-card text-card-foreground shadow-sm',
-      className
-    )}
-    {...props}
-  />
-));
-Card.displayName = 'Card';
+import { cn } from "@/lib/utils"
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    {...props}
-  />
-));
-CardHeader.displayName = 'CardHeader';
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
-      className
-    )}
-    {...props}
-  />
-));
-CardTitle.displayName = 'CardTitle';
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-CardDescription.displayName = 'CardDescription';
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
-CardContent.displayName = 'CardContent';
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
-    {...props}
-  />
-));
-CardFooter.displayName = 'CardFooter';
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
 export {
   Card,
   CardHeader,
   CardFooter,
   CardTitle,
+  CardAction,
   CardDescription,
-  CardContent
-};
+  CardContent,
+}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 067953ab30..d9d789a9e4 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,82 +1,97 @@
-import { cn } from '@/lib/utils';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import * as React from 'react';
+
+import * as React from "react"
+// Correction de l'import pour utiliser le vrai package Radix
+import * as DialogPrimitive from "@radix-ui/react-dialog" 
+import { XIcon } from "lucide-react"
 
-const Dialog = DialogPrimitive.Root;
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
-    ref={ref}
+    ref={ref} // CRUCIAL : C'est ce qui répare l'erreur "cannot be given refs"
+    data-slot="dialog-overlay"
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
       className
     )}
     {...props}
   />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal container={window.cl_shadowRootElement}>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
+  <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
-      ref={ref}
+      ref={ref} // CRUCIAL
+      data-slot="dialog-content"
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {showCloseButton && (
+        <DialogPrimitive.Close data-slot="dialog-close" asChild>
+          <Button
+            variant="ghost"
+            className="absolute top-2 right-2 h-6 w-6 p-0"
+          >
+            <XIcon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      className
-    )}
+    data-slot="dialog-header"
+    className={cn("flex flex-col gap-2", className)}
     {...props}
   />
-);
-DialogHeader.displayName = 'DialogHeader';
+)
+DialogHeader.displayName = "DialogHeader"
 
 const DialogFooter = ({
   className,
+  showCloseButton = false,
+  children,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> & { showCloseButton?: boolean }) => (
   <div
+    data-slot="dialog-footer"
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
       className
     )}
     {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
+  >
+    {children}
+    {showCloseButton && (
+      <DialogPrimitive.Close asChild>
+        <Button variant="outline">Close</Button>
+      </DialogPrimitive.Close>
+    )}
+  </div>
+)
+DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -84,14 +99,12 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className
-    )}
+    data-slot="dialog-title"
+    className={cn("font-heading text-base leading-none font-medium", className)}
     {...props}
   />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -99,21 +112,25 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    data-slot="dialog-description"
+    className={cn(
+      "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+      className
+    )}
     {...props}
   />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription
-};
+  DialogTrigger,
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index ff88a197b3..9a97b30ceb 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -57,7 +57,7 @@ const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPortal container={window.cl_shadowRootElement}>
+  <DropdownMenuPortal container={typeof window !== 'undefined' ? window.cl_shadowRootElement : undefined}>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 7de85cea2d..d763cd9ab0 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,21 +1,19 @@
-import { cn } from '@/lib/utils';
-import * as React from 'react';
+import * as React from "react"
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = 'Input';
+import { cn } from "@/lib/utils"
 
-export { Input };
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
index 9f59318700..6e538ed4e7 100644
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -1,23 +1,23 @@
-import { cn } from '@/lib/utils';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { type VariantProps, cva } from 'class-variance-authority';
-import * as React from 'react';
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
 
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-);
+import { cn } from "@/lib/utils"
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-export { Label };
+export { Label }
diff --git a/frontend/src/components/ui/resizable.tsx b/frontend/src/components/ui/resizable.tsx
index 5bd02778e3..c400096464 100644
--- a/frontend/src/components/ui/resizable.tsx
+++ b/frontend/src/components/ui/resizable.tsx
@@ -1,32 +1,41 @@
+
 import { cn } from '@/lib/utils';
 import { GripVertical } from 'lucide-react';
+import * as React from 'react';
+// ✅ FIX v4: Group = PanelGroup, Panel = Panel, Separator = PanelResizeHandle
 import * as ResizablePrimitive from 'react-resizable-panels';
 
 const ResizablePanelGroup = ({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
+}: React.ComponentProps<typeof ResizablePrimitive.Group>) => (
+  <ResizablePrimitive.Group
+    data-slot="resizable-panel-group"
     className={cn(
-      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      'flex h-full w-full aria-[orientation=vertical]:flex-col',
       className
     )}
     {...props}
   />
 );
 
-const ResizablePanel = ResizablePrimitive.Panel;
+const ResizablePanel = ({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) => (
+  <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+);
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
   withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+  <ResizablePrimitive.Separator
+    data-slot="resizable-handle"
     className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:-translate-y-1/2 aria-[orientation=vertical]:after:translate-x-0 [&[aria-orientation=vertical]>div]:rotate-90',
       className
     )}
     {...props}
@@ -36,7 +45,7 @@ const ResizableHandle = ({
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </ResizablePrimitive.Separator>
 );
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
\ No newline at end of file
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
index a626d9baa6..0118624f6e 100644
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -1,15 +1,13 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 4257a4619b..2100f9af48 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,52 +1,89 @@
-import { cn } from '@/lib/utils';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
 
-const Tabs = TabsPrimitive.Root;
+import { cn } from "@/lib/utils"
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      className
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
 
-export { Tabs, TabsContent, TabsList, TabsTrigger };
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/frontend/src/contexts/MessageContext.tsx b/frontend/src/contexts/MessageContext.tsx
index 45735b61f2..90498213dc 100644
--- a/frontend/src/contexts/MessageContext.tsx
+++ b/frontend/src/contexts/MessageContext.tsx
@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import { IMessageContext } from 'types/messageContext';
+import { IMessageContext } from '@/types/messageContext';
 
 const defaultMessageContext = {
   highlightedMessage: null,
diff --git a/frontend/src/hooks/useNotifications.tsx b/frontend/src/hooks/useNotifications.tsx
new file mode 100644
index 0000000000..6e2cec1ecb
--- /dev/null
+++ b/frontend/src/hooks/useNotifications.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState, useCallback, useRef, useContext } from "react";
+import { toast } from "sonner";
+import { io, Socket } from "socket.io-client";
+import { ChainlitContext } from "@chainlit/react-client";
+
+export interface Notification {
+  id: string;
+  type: "success" | "error" | "info";
+  title: string;
+  message?: string;
+  timestamp: number;
+}
+
+export function useNotifications() {
+  // Use Chainlit's native auth token instead of Clerk
+  const chainlit = useContext(ChainlitContext);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const socketRef = useRef<Socket | null>(null);
+
+  const markAllRead = useCallback(() => {
+    setUnreadCount(0);
+    if (socketRef.current?.connected) {
+      socketRef.current.emit("clear_notifications");
+    }
+  }, []);
+
+  useEffect(() => {
+    let isActive = true;
+
+    const initSocket = async () => {
+      // Get token from Chainlit's native session
+      const token = chainlit?.authConfig?.token;
+      const backendUrl = chainlit?.httpEndpoint ?? window.location.origin;
+      if (!isActive) return;
+
+      const socket = io(backendUrl, {
+        auth: token ? { token } : undefined,
+        transports: ['websocket'],
+      });
+
+      socketRef.current = socket;
+
+      socket.on("connect", () => {
+        console.log("Socket.io connected successfully");
+      });
+
+      socket.on("new_notification", (notif: Notification) => {
+        setNotifications((prev) => {
+          if (prev.some((n) => n.id === notif.id)) return prev;
+          return [notif, ...prev].slice(0, 19);
+        });
+
+        setUnreadCount((n) => n + 1);
+
+        if (notif.type === "success") {
+          toast.success(notif.title, { description: notif.message, duration: 6000 });
+        } else if (notif.type === "error") {
+          toast.error(notif.title, { description: notif.message, duration: 8000 });
+        } else {
+          toast.info(notif.title, { description: notif.message, duration: 5000 });
+        }
+      });
+
+      socket.on("connect_error", (err) => {
+        console.error("Socket.io connection error:", err.message);
+      });
+    };
+
+    initSocket();
+
+    return () => {
+      isActive = false;
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+      }
+    };
+  }, [chainlit]);
+
+  return { notifications, unreadCount, markAllRead };
+}
diff --git a/frontend/src/hooks/useUpload.tsx b/frontend/src/hooks/useUpload.tsx
index 0fbf5208f6..45c062a104 100644
--- a/frontend/src/hooks/useUpload.tsx
+++ b/frontend/src/hooks/useUpload.tsx
@@ -6,7 +6,7 @@ import {
   useDropzone
 } from 'react-dropzone';
 
-import type { FileSpec } from 'client-types/';
+import type { FileSpec } from '@chainlit/react-client';
 
 interface useUploadProps {
   onError?: (error: string) => void;
diff --git a/frontend/src/lib/message.ts b/frontend/src/lib/message.ts
index 1fa943ea93..93492ba284 100644
--- a/frontend/src/lib/message.ts
+++ b/frontend/src/lib/message.ts
@@ -1,4 +1,4 @@
-import type { IMessageElement } from 'client-types/';
+import type { IMessageElement } from '@chainlit/react-client';
 
 const toSafeLinkTarget = (name: string) =>
   encodeURIComponent(name.replace(/\s+/g, '_'))
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 8bad968ef2..46c25a1f59 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,12 +1,13 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-
 import { IStep } from '@chainlit/react-client';
 
+// 1. Fonction utilitaire pour Tailwind (fusionnée, une seule fois)
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+// 2. Fonction utilitaire pour vérifier si un message est valide (issue de Chainlit)
 export const hasMessage = (messages: IStep[]): boolean => {
   const validTypes = ['user_message', 'assistant_message', 'tool'];
   return messages.some(
@@ -15,6 +16,7 @@ export const hasMessage = (messages: IStep[]): boolean => {
   );
 };
 
+// 3. Fonction utilitaire pour convertir les couleurs (issue de Chainlit)
 export function hslToHex(hslStr: string): string {
   // Parse HSL string
   const values = hslStr
@@ -58,4 +60,4 @@ export function hslToHex(hslStr: string): string {
   };
 
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/state/chat.ts b/frontend/src/state/chat.ts
index 0510db82f9..95f8d8c9ad 100644
--- a/frontend/src/state/chat.ts
+++ b/frontend/src/state/chat.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { ICommand } from 'client-types/*';
+import { ICommand } from '@chainlit/react-client';
 
 export interface IAttachment {
   id: string;

From 110bcc1d8f25d5fc4e9924d61298df84996ed918 Mon Sep 17 00:00:00 2001
From: Somi <zineb.baqili@enim.ac.ma>
Date: Fri, 12 Jun 2026 13:05:54 +0100
Subject: [PATCH 2/4] fix: address code review issues from cubic bot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix P0: chat/index.tsx — correct useNavigate usage (router.push undefined)
- Fix P1: alert-dialog.tsx — restore shadow-root portal container
- Fix P1: ThreadOptions.tsx — remove static duplicate id
- Fix P1: Video.tsx — wrap ReactPlayer in Suspense boundary
- Fix P1: Messages/index.tsx — restore BlinkingCursor for running state
- Fix P2: Attachments.tsx — remove unnecessary String() coercion
- Fix P2: Attachment.tsx — use isImage && imageUrl for container width
- Fix P2: MessagesContainer — add apiClient to useCallback deps
- Fix P2: Plotly.tsx — wrap JSON.parse in try/catch
- Fix P3: ThreadOptions.tsx — fix BOM and UTF-8 encoding artifacts
---
 frontend/src/components/Elements/Plotly.tsx            |  2 +-
 frontend/src/components/Elements/Video.tsx             |  3 +--
 frontend/src/components/LeftSidebar/ThreadOptions.tsx  |  6 +++---
 .../src/components/chat/MessageComposer/Attachment.tsx |  2 +-
 .../components/chat/MessageComposer/Attachments.tsx    |  5 ++---
 frontend/src/components/chat/Messages/index.tsx        |  7 +++++--
 .../src/components/chat/MessagesContainer/index.tsx    | 10 +++++-----
 frontend/src/components/chat/index.tsx                 |  5 +----
 frontend/src/components/ui/alert-dialog.tsx            |  4 ++--
 9 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Elements/Plotly.tsx b/frontend/src/components/Elements/Plotly.tsx
index 98721b25fe..39ae3a727e 100644
--- a/frontend/src/components/Elements/Plotly.tsx
+++ b/frontend/src/components/Elements/Plotly.tsx
@@ -24,7 +24,7 @@ const _PlotlyElement = ({ element }: Props) => {
     if (!rawData) return null;
     
     // Si useFetch retourne une string (JSON), on la parse
-    const data = typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
+    let data; try { data = typeof rawData === 'string' ? JSON.parse(rawData) : rawData; } catch { return null; }
 
     return {
       data: structuredClone(data.data || []),
diff --git a/frontend/src/components/Elements/Video.tsx b/frontend/src/components/Elements/Video.tsx
index f9f6ea9128..336bc13f71 100644
--- a/frontend/src/components/Elements/Video.tsx
+++ b/frontend/src/components/Elements/Video.tsx
@@ -20,8 +20,7 @@ const VideoElement = ({ element }: { element: IVideoElement }) => {
   }
 
   return (
-    <div className="w-full aspect-video rounded-xl overflow-hidden border bg-zinc-950 shadow-sm">
-      <ReactPlayer
+    <React.Suspense fallback={<div className="w-full aspect-video bg-zinc-950 rounded-xl" />}><div className="w-full aspect-video rounded-xl overflow-hidden border bg-zinc-950 shadow-sm"><ReactPlayer
         className={`${element.display}-video`}
         width="100%"
         height="100%"
diff --git a/frontend/src/components/LeftSidebar/ThreadOptions.tsx b/frontend/src/components/LeftSidebar/ThreadOptions.tsx
index d017376d5c..c794302248 100644
--- a/frontend/src/components/LeftSidebar/ThreadOptions.tsx
+++ b/frontend/src/components/LeftSidebar/ThreadOptions.tsx
@@ -14,7 +14,7 @@ import {
 import { Translator } from '../i18n';
 
 interface Props {
-  // Changement ici : on accepte l'événement pour stopper la propagation
+  // Changement ici : on accepte l'événement pour stopper la propagation
   onDelete: (e: React.MouseEvent) => void;
   onRename: (e: React.MouseEvent) => void;
   onShare?: (e: React.MouseEvent) => void;
@@ -30,10 +30,10 @@ export default function ThreadOptions({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        {/* Changement : Utilisation d'un bouton réel pour l'accessibilité */}
+        {/* Changement : Utilisation d'un bouton réel pour l'accessibilité */}
         <button
           type="button"
-          id="thread-options"
+          
           onClick={(e) => {
             e.stopPropagation();
             e.preventDefault(); // Indispensable pour ne pas activer le <Link> parent
diff --git a/frontend/src/components/chat/MessageComposer/Attachment.tsx b/frontend/src/components/chat/MessageComposer/Attachment.tsx
index adfa41391a..097b53504b 100644
--- a/frontend/src/components/chat/MessageComposer/Attachment.tsx
+++ b/frontend/src/components/chat/MessageComposer/Attachment.tsx
@@ -73,7 +73,7 @@ const Attachment: React.FC<AttachmentProps> = ({
     <TooltipProvider delayDuration={100}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className={isImage ? "w-[58px]" : "w-fit"}>
+          <div className={isImage && imageUrl ? "w-[58px]" : "w-fit"}>
             {renderContent()}
           </div>
         </TooltipTrigger>
diff --git a/frontend/src/components/chat/MessageComposer/Attachments.tsx b/frontend/src/components/chat/MessageComposer/Attachments.tsx
index ae93354412..f3f04cc106 100644
--- a/frontend/src/components/chat/MessageComposer/Attachments.tsx
+++ b/frontend/src/components/chat/MessageComposer/Attachments.tsx
@@ -1,4 +1,4 @@
-import { X } from 'lucide-react';
+import { X } from 'lucide-react';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -96,8 +96,7 @@ return (
                 </div>
               </TooltipTrigger>
               <TooltipContent>
-                {/* CORRECTION : div au lieu de p */}
-                <div className="text-xs">{String(t('chat.fileUpload.actions.cancelUpload'))}</div>
+                {t('chat.fileUpload.actions.cancelUpload')}
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
diff --git a/frontend/src/components/chat/Messages/index.tsx b/frontend/src/components/chat/Messages/index.tsx
index 0738ecc6e8..90c2c47014 100644
--- a/frontend/src/components/chat/Messages/index.tsx
+++ b/frontend/src/components/chat/Messages/index.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from '@/contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import React, { memo, useContext, useMemo } from 'react';
 
 import {
@@ -99,9 +99,12 @@ const Messages = memo(
         scorableRun={scorableRun}
       />
     ) : null}
+    {(showToolCoTLoader || showHiddenCoTLoader) && m.name !== 'on_chat_start' ? (
+      <BlinkingCursor />
+    ) : null}
   </React.Fragment>
 );
-          } else {
+} else {
             // Score the current run
             const _scorableRun = m.type === 'run' ? m : scorableRun;
             // The message is scorable if it is the last assistant message of the run
diff --git a/frontend/src/components/chat/MessagesContainer/index.tsx b/frontend/src/components/chat/MessagesContainer/index.tsx
index 78cbbd526c..f64521cc53 100644
--- a/frontend/src/components/chat/MessagesContainer/index.tsx
+++ b/frontend/src/components/chat/MessagesContainer/index.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from '@/contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { toast } from 'sonner';
@@ -48,7 +48,7 @@ const onFeedbackUpdated = useCallback(
     async (message: IStep, onSuccess: () => void, feedback: IFeedback) => {
       toast.promise(apiClient.setFeedback(feedback, sessionId), {
         loading: String(t('chat.messages.feedback.status.updating')),
-        success: (res: { feedbackId: string }) => { // Typage explicite du résultat
+        success: (res: { feedbackId: string }) => { // Typage explicite du résultat
           setMessages((prev) =>
             updateMessageById(prev, message.id, {
               ...message,
@@ -67,7 +67,7 @@ const onFeedbackUpdated = useCallback(
         }
       });
     },
-    [sessionId, t, setMessages] // N'oubliez pas d'ajouter les dépendances ici
+    [apiClient, sessionId, t, setMessages]
   );
 
 const onFeedbackDeleted = useCallback(
@@ -83,7 +83,7 @@ const onFeedbackDeleted = useCallback(
             })
           );
           onSuccess();
-          // Correction : On force la conversion en string pour le succès
+          // Correction : On force la conversion en string pour le succès
           return String(t('chat.messages.feedback.status.updated'));
         },
         error: (err) => {
@@ -91,7 +91,7 @@ const onFeedbackDeleted = useCallback(
         }
       });
     },
-    [apiClient, setMessages, t] // Dépendances ajoutées pour éviter les bugs de closure
+    [apiClient, setMessages, t] // Dépendances ajoutées pour éviter les bugs de closure
   );
 
   const knownSideElementsRef = useRef<Map<string, IMessageElement>>(new Map());
diff --git a/frontend/src/components/chat/index.tsx b/frontend/src/components/chat/index.tsx
index 06ed4cae7d..5274dd5c3f 100644
--- a/frontend/src/components/chat/index.tsx
+++ b/frontend/src/components/chat/index.tsx
@@ -41,10 +41,7 @@ const Chat = () => {
   const { uploadFile } = useChatInteract();
   const uploadFileRef = useRef(uploadFile);
   
-  // <-- Implémentation Next.js
-  const router = useNavigate();
-  const pathname = useLocation().pathname;
-  const navigate = router.push; 
+  const navigate = useNavigate(); 
 
   const fileSpec = useMemo(
     () => ({
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index dcc3e75e33..b1935c24f8 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React from 'react';
 
@@ -29,7 +29,7 @@ const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
+  <AlertDialogPortal container={typeof window !== 'undefined' ? window.cl_shadowRootElement : undefined}>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}

From 3be02ddd95c9bb7b9d5b4ef6597d80f1efdb74db Mon Sep 17 00:00:00 2001
From: Somi <zineb.baqili@enim.ac.ma>
Date: Fri, 12 Jun 2026 13:08:39 +0100
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20SidebarTrigger=20=E2=80=94=20correct?=
 =?UTF-8?q?=20prop=20forwarding=20order=20and=20remove=20duplicate=20ref?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/header/SidebarTrigger.tsx     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/header/SidebarTrigger.tsx b/frontend/src/components/header/SidebarTrigger.tsx
index e3c82f5500..83be225da4 100644
--- a/frontend/src/components/header/SidebarTrigger.tsx
+++ b/frontend/src/components/header/SidebarTrigger.tsx
@@ -1,4 +1,3 @@
-
 import React, { forwardRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -7,20 +6,21 @@ import { Sidebar } from '../icons/Sidebar';
 import { useSidebar } from '../ui/sidebar';
 
 const SidebarTrigger = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  (props, ref) => {
+  ({ onClick, ...props }, ref) => {
     const { setOpen, open, openMobile, setOpenMobile, isMobile } = useSidebar();
-
     return (
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              {...props}
-              ref={ref} // Transmission de la ref ici
-              id="sidebar-trigger-button"
-              onClick={() => (isMobile ? setOpenMobile(!openMobile) : setOpen(!open))}
+              ref={ref}
               size="icon"
               variant="ghost"
+              {...props}
+              onClick={(e) => {
+                isMobile ? setOpenMobile(!openMobile) : setOpen(!open);
+                onClick?.(e);
+              }}
               className="text-muted-foreground hover:text-muted-foreground"
             >
               <Sidebar className="!size-6" />
@@ -42,4 +42,4 @@ const SidebarTrigger = forwardRef<HTMLButtonElement, React.ComponentProps<typeof
 );
 
 SidebarTrigger.displayName = 'SidebarTrigger';
-export default SidebarTrigger;
\ No newline at end of file
+export default SidebarTrigger;

From 62fe10d4feede1b11c3982f4f4f2f13c98bcd7ba Mon Sep 17 00:00:00 2001
From: Somi <zineb.baqili@enim.ac.ma>
Date: Fri, 12 Jun 2026 13:20:05 +0100
Subject: [PATCH 4/4] fix: remove UTF-8 BOM and fix encoding artifacts in
 MessagesContainer

---
 .../src/components/chat/MessagesContainer/index.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/chat/MessagesContainer/index.tsx b/frontend/src/components/chat/MessagesContainer/index.tsx
index f64521cc53..184b912fae 100644
--- a/frontend/src/components/chat/MessagesContainer/index.tsx
+++ b/frontend/src/components/chat/MessagesContainer/index.tsx
@@ -1,4 +1,4 @@
-import { MessageContext } from '@/contexts/MessageContext';
+import { MessageContext } from '@/contexts/MessageContext';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { toast } from 'sonner';
@@ -48,7 +48,7 @@ const onFeedbackUpdated = useCallback(
     async (message: IStep, onSuccess: () => void, feedback: IFeedback) => {
       toast.promise(apiClient.setFeedback(feedback, sessionId), {
         loading: String(t('chat.messages.feedback.status.updating')),
-        success: (res: { feedbackId: string }) => { // Typage explicite du résultat
+        success: (res: { feedbackId: string }) => { // Typage explicite du résultat
           setMessages((prev) =>
             updateMessageById(prev, message.id, {
               ...message,
@@ -67,7 +67,7 @@ const onFeedbackUpdated = useCallback(
         }
       });
     },
-    [apiClient, sessionId, t, setMessages]
+    [sessionId, t, setMessages] // N'oubliez pas d'ajouter les Dépendances ici
   );
 
 const onFeedbackDeleted = useCallback(
@@ -83,7 +83,7 @@ const onFeedbackDeleted = useCallback(
             })
           );
           onSuccess();
-          // Correction : On force la conversion en string pour le succès
+          // Correction : On force la conversion en string pour le succès
           return String(t('chat.messages.feedback.status.updated'));
         },
         error: (err) => {
@@ -91,7 +91,7 @@ const onFeedbackDeleted = useCallback(
         }
       });
     },
-    [apiClient, setMessages, t] // Dépendances ajoutées pour éviter les bugs de closure
+    [apiClient, setMessages, t] // Dépendances ajoutées pour éviter les bugs de closure
   );
 
   const knownSideElementsRef = useRef<Map<string, IMessageElement>>(new Map());