update

client/src/layouts/Panel.jsx

@@ -1,19 +1,6 @@
-import {
-  Box,
-  CircularProgress,
-  Typography,
-  ThemeProvider,
-  createTheme,
-} from "@mui/material";
+import { Box, CircularProgress, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
-// Créer un thème local en mode clair pour les chips
-const lightTheme = createTheme({
-  palette: {
-    mode: "light",
-  },
-});
-
 // Component for displaying a single panel
 export function Panel({ segment, panel, panelIndex }) {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -125,25 +112,27 @@ export function Panel({ segment, panel, panelIndex }) {
 
           {/* Texte du segment (uniquement sur le premier panel) */}
           {panelIndex === 0 && segment.text && (
-            <ThemeProvider theme={lightTheme}>
-              <Box
-                sx={{
-                  position: "absolute",
-                  bottom: "20px",
-                  left: "20px",
-                  right: "20px",
-                  backgroundColor: "rgba(255, 255, 255, 0.9)",
-                  fontSize: ".9rem",
-                  padding: "10px",
-                  color: "black !important",
-                  borderRadius: "8px",
-                  boxShadow: "0 -2px 4px rgba(0,0,0,0.1)",
-                  zIndex: 2,
-                }}
-              >
-                {segment.text}
-              </Box>
-            </ThemeProvider>
+            <Box
+              sx={{
+                position: "absolute",
+                bottom: "20px",
+                left: "20px",
+                right: "20px",
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                fontSize: ".9rem",
+                padding: "10px",
+                borderRadius: "8px",
+                boxShadow: "0 -2px 4px rgba(0,0,0,0.1)",
+                zIndex: 2,
+                color: "black",
+                "& .MuiChip-root": {
+                  color: "black",
+                  borderColor: "black",
+                },
+              }}
+            >
+              {segment.text}
+            </Box>
           )}
         </>
       )}

client/src/pages/game/App.jsx

@@ -275,6 +275,38 @@ function App() {
     }
   };
 
+  // Fonction pour jouer l'audio
+  const playAudio = async (text) => {
+    try {
+      // Nettoyer le texte des balises markdown et des chips
+      const cleanText = text.replace(/\*\*(.*?)\*\*/g, "$1");
+
+      // Appeler l'API text-to-speech
+      const response = await api.post(`${API_URL}/api/text-to-speech`, {
+        text: cleanText,
+      });
+
+      if (response.data.success) {
+        // Créer un Blob à partir du base64
+        const audioBlob = await fetch(
+          `data:audio/mpeg;base64,${response.data.audio_base64}`
+        ).then((r) => r.blob());
+        const audioUrl = URL.createObjectURL(audioBlob);
+
+        // Mettre à jour la source de l'audio
+        audioRef.current.src = audioUrl;
+        audioRef.current.play();
+
+        // Nettoyer l'URL quand l'audio est terminé
+        audioRef.current.onended = () => {
+          URL.revokeObjectURL(audioUrl);
+        };
+      }
+    } catch (error) {
+      console.error("Error playing audio:", error);
+    }
+  };
+
   const handleStoryAction = async (action, choiceId = null) => {
     setIsLoading(true);
     try {
@@ -323,7 +355,10 @@ function App() {
       // 5. Désactiver le loading car l'histoire est affichée
       setIsLoading(false);
 
-      // 6. Générer les images en parallèle
+      // 6. Jouer l'audio du nouveau segment
+      await playAudio(response.data.story_text);
+
+      // 7. Générer les images en parallèle
       if (
         response.data.image_prompts &&
         response.data.image_prompts.length > 0

client/src/theme.js

@@ -42,7 +42,7 @@ export const theme = createTheme({
   components: {
     MuiChip: {
       styleOverrides: {
-        root: {
+        root: ({ theme }) => ({
           borderRadius: "4px",
           backgroundColor: "transparent",
           border: "1px solid",
@@ -53,7 +53,12 @@ export const theme = createTheme({
             padding: "2px 8px",
             lineHeight: "1.2",
           },
-        },
+          ...(theme.palette.mode === "dark" && {
+            backgroundColor: "transparent !important",
+            color: "inherit !important",
+            borderColor: "currentColor !important",
+          }),
+        }),
         sizeSmall: {
           height: "auto",
         },