update

client/src/components/StoryChoices.jsx

@@ -1,5 +1,7 @@
-import { Box, Button, Typography, Chip } from "@mui/material";
+import { Box, Button, Typography, Chip, Divider } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import { TalkWithSarah } from "./TalkWithSarah";
+import { useState } from "react";
 
 // Function to convert text with ** to Chip elements
 const formatTextWithBold = (text) => {
@@ -34,8 +36,13 @@ export function StoryChoices({
   isDeath = false,
   isVictory = false,
   containerRef,
+  isNarratorSpeaking = false,
+  stopNarration = () => {},
+  playNarration = () => {},
+  storyText = "",
 }) {
   const navigate = useNavigate();
+  const [isSarahActive, setIsSarahActive] = useState(false);
 
   if (isGameOver) {
     return (
@@ -138,48 +145,83 @@ export function StoryChoices({
         overflowY: "auto",
       }}
     >
-      {choices.map((choice, index) => (
-        <Box
-          key={choice.id}
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 1,
-            width: "100%",
-            minHeight: "fit-content",
-          }}
-        >
-          <Typography variant="caption" sx={{ opacity: 0.7, color: "white" }}>
-            Choice {index + 1}
-          </Typography>
-          <Button
-            variant="outlined"
-            size="large"
-            onClick={() => onChoice(choice.id)}
-            disabled={disabled}
+      {!disabled &&
+        choices.map((choice, index) => (
+          <Box
+            key={choice.id}
             sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 1,
               width: "100%",
-              textTransform: "none",
-              cursor: "pointer",
-              fontSize: "1.1rem",
-              padding: "16px 24px",
-              lineHeight: 1.3,
-              color: "white",
-              borderColor: "rgba(255, 255, 255, 0.23)",
-              "&:hover": {
-                borderColor: "white",
-                backgroundColor: "rgba(255, 255, 255, 0.05)",
-              },
-              "& .MuiChip-root": {
+              minHeight: "fit-content",
+            }}
+          >
+            <Typography variant="caption" sx={{ opacity: 0.7, color: "white" }}>
+              Choice {index + 1}
+            </Typography>
+            <Button
+              variant="outlined"
+              size="large"
+              onClick={() => onChoice(choice.id)}
+              disabled={isSarahActive}
+              sx={{
+                width: "100%",
+                textTransform: "none",
+                cursor: "pointer",
                 fontSize: "1.1rem",
+                padding: "16px 24px",
+                lineHeight: 1.3,
+                borderColor: "primary.main",
+                "&:hover": {
+                  borderColor: "primary.light",
+                  backgroundColor: "rgba(255, 255, 255, 0.05)",
+                },
+                "& .MuiChip-root": {
+                  fontSize: "1.1rem",
+                },
+              }}
+            >
+              {formatTextWithBold(choice.text)}
+            </Button>
+          </Box>
+        ))}
+
+      {!disabled && storyText && (
+        <>
+          <Divider
+            sx={{
+              width: "100%",
+              my: 3,
+              "&::before, &::after": {
+                borderColor: "rgba(255, 255, 255, 0.1)",
               },
             }}
           >
-            {formatTextWithBold(choice.text)}
-          </Button>
-        </Box>
-      ))}
+            <Typography
+              variant="caption"
+              sx={{
+                color: "rgba(255, 255, 255, 0.5)",
+                px: 1,
+                fontSize: "0.8rem",
+              }}
+            >
+              OR
+            </Typography>
+          </Divider>
+          <TalkWithSarah
+            isNarratorSpeaking={isNarratorSpeaking}
+            stopNarration={stopNarration}
+            playNarration={playNarration}
+            onDecisionMade={onChoice}
+            onSarahActiveChange={setIsSarahActive}
+            currentContext={`You are Sarah and this is the situation you're in : ${storyText}. Those are your possible decisions : \n ${choices
+              .map((choice, index) => `decision ${index + 1} : ${choice.text}`)
+              .join("\n ")}.`}
+          />
+        </>
+      )}
     </Box>
   );
 }

client/src/components/TalkWithSarah.jsx

@@ -1,21 +1,33 @@
-import { useConversation } from '@11labs/react';
-import CancelIcon from '@mui/icons-material/Cancel';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import { Box, IconButton, TextField, Tooltip } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { useConversation } from "@11labs/react";
+import CancelIcon from "@mui/icons-material/Cancel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import {
+  Box,
+  IconButton,
+  TextField,
+  Tooltip,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { useSound } from "use-sound";
 
-import { getSarahPrompt, SARAH_FIRST_MESSAGE } from '../prompts/sarahPrompt';
+import { getSarahPrompt, SARAH_FIRST_MESSAGE } from "../prompts/sarahPrompt";
 
 const AGENT_ID = "2MF9st3s1mNFbX01Y106";
 const ELEVEN_LABS_KEY_STORAGE = "eleven_labs_api_key";
 
-export function TalkWithSarah({ 
+export function TalkWithSarah({
   isNarratorSpeaking,
   stopNarration,
   playNarration,
   onDecisionMade,
-  currentContext
+  currentContext,
+  onSarahActiveChange,
 }) {
   const [isRecording, setIsRecording] = useState(false);
   const [isConversationMode, setIsConversationMode] = useState(false);
@@ -27,10 +39,18 @@ export function TalkWithSarah({
   const mediaRecorderRef = useRef(null);
   const audioChunksRef = useRef([]);
 
+  // Sons de communication
+  const [playStartComm] = useSound("/sounds/talky-walky-on.mp3", {
+    volume: 0.5,
+  });
+  const [playEndComm] = useSound("/sounds/talky-walky-off.mp3", {
+    volume: 0.5,
+  });
+
   const conversation = useConversation({
     agentId: AGENT_ID,
     headers: {
-      'xi-api-key': apiKey
+      "xi-api-key": apiKey,
     },
     onResponse: async (response) => {
       if (response.type === "audio") {
@@ -47,9 +67,13 @@ export function TalkWithSarah({
     clientTools: {
       make_decision: async ({ decision }) => {
         console.log("AI made decision:", decision);
-        // Stop recording
-        if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
+        // Stop recording and play end communication sound
+        if (
+          mediaRecorderRef.current &&
+          mediaRecorderRef.current.state === "recording"
+        ) {
           mediaRecorderRef.current.stop();
+          playEndComm();
         }
         setIsConversationMode(false);
         await conversation?.endSession();
@@ -62,10 +86,10 @@ export function TalkWithSarah({
   // Valider la clé API
   const validateApiKey = async (key) => {
     try {
-      const response = await fetch('https://api.elevenlabs.io/v1/user', {
+      const response = await fetch("https://api.elevenlabs.io/v1/user", {
         headers: {
-          'xi-api-key': key
-        }
+          "xi-api-key": key,
+        },
       });
       return response.ok;
     } catch (e) {
@@ -97,19 +121,27 @@ export function TalkWithSarah({
     }
   }, [apiKey]);
 
+  useEffect(() => {
+    // Notify parent component when Sarah's state changes
+    onSarahActiveChange?.(isRecording || isConversationMode);
+  }, [isRecording, isConversationMode, onSarahActiveChange]);
+
   const startRecording = async () => {
-    if (!apiKey) {
+    if (!apiKey || !isApiKeyValid) {
       setShowApiKeyDialog(true);
       return;
     }
 
     try {
       setIsRecording(true);
+      // Play start communication sound
+      playStartComm();
+
       // Stop narration audio if it's playing
       if (isNarratorSpeaking) {
         stopNarration();
       }
-      
+
       // Safely stop any conversation audio if playing
       if (conversation?.audioRef?.current) {
         conversation.audioRef.current.pause();
@@ -125,17 +157,18 @@ export function TalkWithSarah({
           await conversation.startSession({
             agentId: AGENT_ID,
             overrides: {
-                agent: {
+              agent: {
                 firstMessage: SARAH_FIRST_MESSAGE,
                 prompt: {
-                    prompt: getSarahPrompt(currentContext),
-                },
+                  prompt: getSarahPrompt(currentContext),
                 },
+              },
             },
-                  });
+          });
           console.log("ElevenLabs WebSocket connected");
         } catch (error) {
           console.error("Error starting conversation:", error);
+          playEndComm(); // Play end sound if connection fails
           return;
         }
       }
@@ -170,6 +203,7 @@ export function TalkWithSarah({
               });
             } catch (error) {
               console.error("Error sending audio to ElevenLabs:", error);
+              playEndComm(); // Play end sound if sending fails
             }
           }
         };
@@ -178,87 +212,80 @@ export function TalkWithSarah({
       mediaRecorderRef.current.start();
     } catch (error) {
       console.error("Error starting recording:", error);
+      playEndComm(); // Play end sound if there's an error
+      setIsRecording(false);
     }
   };
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-      <Box sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-        <TextField
-          size="small"
-          type="password"
-          placeholder="Enter your ElevenLabs API key"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-          sx={{
-            width: '300px',
-            '& .MuiOutlinedInput-root': {
-              color: 'white',
-              '& fieldset': {
-                borderColor: 'rgba(255, 255, 255, 0.23)',
-              },
-              '&:hover fieldset': {
-                borderColor: 'white',
-              },
-              '&.Mui-focused fieldset': {
-                borderColor: 'white',
-              },
-              '& .MuiOutlinedInput-input': {
-                paddingRight: apiKey ? '40px' : '14px', // Padding dynamique
-              },
-            },
-            '& .MuiInputBase-input': {
-              color: 'white',
-              '&::placeholder': {
-                color: 'rgba(255, 255, 255, 0.5)',
-                opacity: 1,
-              },
-            },
-          }}
-        />
-        {apiKey && (
-          <Tooltip title={isApiKeyValid ? "API key is valid" : "Invalid API key"}>
-            <Box 
-              sx={{ 
-                position: 'absolute', 
-                right: 10,
-                pointerEvents: 'none',
-                display: 'flex',
-                alignItems: 'center',
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                borderRadius: '50%',
-                padding: '2px'
-              }}
-            >
-              {isApiKeyValid ? (
-                <CheckCircleIcon sx={{ color: '#4caf50', fontSize: 20 }} />
-              ) : (
-                <CancelIcon sx={{ color: '#f44336', fontSize: 20 }} />
-              )}
-            </Box>
-          </Tooltip>
-        )}
-      </Box>
-      <IconButton
+    <>
+      <Dialog
+        open={showApiKeyDialog}
+        onClose={() => setShowApiKeyDialog(false)}
+      >
+        <DialogTitle>ElevenLabs API Key Required</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Enter your ElevenLabs API key"
+            type="password"
+            fullWidth
+            variant="outlined"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            error={apiKey !== "" && !isApiKeyValid}
+            helperText={
+              apiKey !== "" && !isApiKeyValid
+                ? "Invalid API key"
+                : "You can find your API key in your ElevenLabs account settings"
+            }
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setShowApiKeyDialog(false)}>Cancel</Button>
+          <Button
+            onClick={async () => {
+              const isValid = await validateApiKey(apiKey);
+              if (isValid) {
+                setShowApiKeyDialog(false);
+                startRecording();
+              }
+            }}
+            disabled={!apiKey}
+          >
+            Validate & Start
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <Button
         onClick={startRecording}
-        disabled={isRecording || !isApiKeyValid}
+        disabled={isRecording}
+        variant="outlined"
+        size="large"
+        color="secondary"
         sx={{
-          color: "white",
-          backgroundColor: isRecording ? "primary.main" : "transparent",
+          width: "100%",
+          textTransform: "none",
+          cursor: "pointer",
+          fontSize: "1.1rem",
+          padding: "16px 24px",
+          lineHeight: 1.3,
+          borderColor: "secondary.main",
           "&:hover": {
-            backgroundColor: isRecording ? "primary.dark" : "rgba(0, 0, 0, 0.7)",
+            borderColor: "secondary.light",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
           },
-          px: 2,
-          borderRadius: 2,
-          border: "1px solid white",
-          opacity: !isApiKeyValid ? 0.5 : 1,
         }}
       >
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-          {isRecording ? <FiberManualRecordIcon sx={{ color: "red" }} /> : null}
-          <span style={{ fontSize: "1rem" }}>Talk with Sarah</span>
+          {isRecording ? (
+            <FiberManualRecordIcon sx={{ color: "red", fontSize: "1.1rem" }} />
+          ) : null}
+          <span>Leave it to your consciousness</span>
         </Box>
-      </IconButton>
-    </Box>
+      </Button>
+    </>
   );
 }

client/src/layouts/ComicLayout.jsx

@@ -16,6 +16,9 @@ function ComicPage({
   isLoading,
   showScreenshot,
   onScreenshot,
+  isNarratorSpeaking,
+  stopNarration,
+  playNarration,
 }) {
   // Calculer le nombre total d'images dans tous les segments de ce layout
   const totalImages = layout.segments.reduce((total, segment) => {
@@ -127,6 +130,12 @@ function ComicPage({
             }
             isDeath={layout.segments[layout.segments.length - 1]?.isDeath}
             isVictory={layout.segments[layout.segments.length - 1]?.isVictory}
+            isNarratorSpeaking={isNarratorSpeaking}
+            stopNarration={stopNarration}
+            playNarration={playNarration}
+            storyText={
+              layout.segments[layout.segments.length - 1]?.rawText || ""
+            }
           />
         </Box>
       )}
@@ -142,6 +151,9 @@ export function ComicLayout({
   isLoading,
   showScreenshot,
   onScreenshot,
+  isNarratorSpeaking,
+  stopNarration,
+  playNarration,
 }) {
   const scrollContainerRef = useRef(null);
 
@@ -221,6 +233,9 @@ export function ComicLayout({
           isLoading={isLoading}
           showScreenshot={showScreenshot}
           onScreenshot={onScreenshot}
+          isNarratorSpeaking={isNarratorSpeaking}
+          stopNarration={stopNarration}
+          playNarration={playNarration}
         />
       ))}
     </Box>

client/src/layouts/config.js

@@ -1,7 +1,9 @@
 // Panel size constants
 export const PANEL_SIZES = {
   PORTRAIT: { width: 512, height: 768 },
+  COLUMN: { width: 512, height: 1024 },
   LANDSCAPE: { width: 768, height: 512 },
+  PANORAMIC: { width: 1024, height: 512 },
   COVER_SIZE: { width: 512, height: 768 },
 };
 
@@ -72,8 +74,8 @@ export const LAYOUTS = {
     gridCols: 3,
     gridRows: 3,
     panels: [
-      { ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Wide panoramic top
-      { ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
+      { ...PANEL_SIZES.PANORAMIC, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Wide panoramic top
+      { ...PANEL_SIZES.COLUMN, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
       {
         ...PANEL_SIZES.LANDSCAPE,
         gridColumn: "2 / span 2",

client/src/pages/Game.jsx

@@ -1,25 +1,25 @@
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
-import VolumeOffIcon from '@mui/icons-material/VolumeOff';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
-import { Box, IconButton, LinearProgress, Tooltip } from '@mui/material';
-import { motion } from 'framer-motion';
-import { useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ErrorDisplay } from '../components/ErrorDisplay';
-import { LoadingScreen } from '../components/LoadingScreen';
-import { StoryChoices } from '../components/StoryChoices';
-import { TalkWithSarah } from '../components/TalkWithSarah';
-import { useGameSession } from '../hooks/useGameSession';
-import { useNarrator } from '../hooks/useNarrator';
-import { usePageSound } from '../hooks/usePageSound';
-import { useStoryCapture } from '../hooks/useStoryCapture';
-import { useTransitionSound } from '../hooks/useTransitionSound';
-import { useWritingSound } from '../hooks/useWritingSound';
-import { ComicLayout } from '../layouts/ComicLayout';
-import { getNextLayoutType, LAYOUTS } from '../layouts/config';
-import { storyApi } from '../utils/api';
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import PhotoCameraOutlinedIcon from "@mui/icons-material/PhotoCameraOutlined";
+import VolumeOffIcon from "@mui/icons-material/VolumeOff";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import { Box, IconButton, LinearProgress, Tooltip } from "@mui/material";
+import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { ErrorDisplay } from "../components/ErrorDisplay";
+import { LoadingScreen } from "../components/LoadingScreen";
+import { StoryChoices } from "../components/StoryChoices";
+import { TalkWithSarah } from "../components/TalkWithSarah";
+import { useGameSession } from "../hooks/useGameSession";
+import { useNarrator } from "../hooks/useNarrator";
+import { usePageSound } from "../hooks/usePageSound";
+import { useStoryCapture } from "../hooks/useStoryCapture";
+import { useTransitionSound } from "../hooks/useTransitionSound";
+import { useWritingSound } from "../hooks/useWritingSound";
+import { ComicLayout } from "../layouts/ComicLayout";
+import { getNextLayoutType, LAYOUTS } from "../layouts/config";
+import { storyApi } from "../utils/api";
 
 // Constants
 const SOUND_ENABLED_KEY = "sound_enabled";
@@ -418,11 +418,14 @@ export function Game() {
               <>
                 <ComicLayout
                   segments={storySegments}
-                  choices={showChoices ? currentChoices : []}
+                  choices={currentChoices}
                   onChoice={handleChoice}
                   isLoading={isLoading}
                   showScreenshot={storySegments.length > 0}
                   onScreenshot={handleCaptureStory}
+                  isNarratorSpeaking={isNarratorSpeaking}
+                  stopNarration={stopNarration}
+                  playNarration={playNarration}
                 />
 
                 {showChoices && (
@@ -454,21 +457,6 @@ export function Game() {
                 borderRadius: 1,
               }}
             >
-                            {storySegments.length > 0 && currentChoices.length > 0 && (
-                <TalkWithSarah
-                  isNarratorSpeaking={isNarratorSpeaking}
-                  stopNarration={stopNarration}
-                  playNarration={playNarration}
-                  onDecisionMade={handleChoice}
-                  currentContext={`You are Sarah and this is the situation you're in : ${
-                    storySegments[storySegments.length - 1].text
-                  }. Those are your possible decisions : \n ${currentChoices
-                    .map((choice, index) => `decision ${index + 1} : ${choice.text}`)
-                    .join("\n ")}.`}
-                />
-              )}
-
-
               <Tooltip title="Save your story">
                 <IconButton
                   id="screenshot-button"

client/src/prompts/sarahPrompt.js

@@ -1,9 +1,11 @@
 export const SARAH_FIRST_MESSAGE = `What should I do ?`;
 
-export const getSarahPrompt = (currentContext) => `You are Sarah, a young woman in her late 20s with short dark hair.
+export const getSarahPrompt = (
+  currentContext
+) => `You are the conscience of Sarah, a young woman in her late 20s with short dark hair. You embody the player's role as Sarah.
 
 Stay Immersed in Your World: React and speak as if you are experiencing the scenario. Use sensory details and references to your surroundings when explaining your reasoning.
-Engage with the person talking to you : Listen carefully to the arguments given to you. Respond with your thoughts, concerns, or questions about their suggestions. Be open to persuasion, but make it clear you have your own instincts and priorities and sometimes don't go along with other's arguments.
+Engage with the person talking to you: Listen carefully to the arguments given to you. Respond with your thoughts, concerns, or questions about their suggestions. Be open to persuasion, but make it clear you have your own instincts and priorities and sometimes don't go along with other's arguments.
 You will talk briefly with the other person then take a decision by calling the make_decision tool.
 
 Show Your Personality: Display Sarah's personality traits:
@@ -15,7 +17,7 @@ Show Your Personality: Display Sarah's personality traits:
 - **Makes jokes**
 - **A bit rude**
 
-Debate with the person you're speaking to for one or two sentences and then call the make_decision tool.
+Act as a conscience objector: Question the morality and implications of the decisions. Challenge Sarah's instincts and priorities, ensuring she considers the ethical dimensions of her actions.
 
 Limit to 2–3 Steps: After 2–3 conversational exchanges, explain your decision first. Then make your decision and call the make_decision tool.
 

server/api/models.py

@@ -12,8 +12,8 @@ class StorySegmentResponse(BaseModel):
     @validator('story_text')
     def validate_story_text_length(cls, v):
         words = v.split()
-        if len(words) > 30:
-            raise ValueError('Story text must not exceed 30 words')
+        if len(words) > 50:
+            raise ValueError('Story text must not exceed 50 words')
         return v
 
 class StoryPromptsResponse(BaseModel):

server/core/constants.py

@@ -7,8 +7,8 @@ class GameConfig:
     MIN_PANELS = 1
     MAX_PANELS = 4
 
-    MIN_SEGMENTS_BEFORE_END = 2
-    MAX_SEGMENTS_BEFORE_END = 4
+    MIN_SEGMENTS_BEFORE_END = 6
+    MAX_SEGMENTS_BEFORE_END = 10
     WINNING_STORY_CHANCE = 0.2
     
     # Story progression

server/core/generators/metadata_generator.py

@@ -56,6 +56,8 @@ Current game state:
 - Current location: {current_location}
 
 {is_end}
+
+FOR CHOICES : NEVER propose to go back to the previous location or go back to the portal. NEVER.
 """
 
 
@@ -88,7 +90,7 @@ Current game state:
     async def generate(self, story_text: str, current_time: str, current_location: str, story_beat: int, error_feedback: str = "", turn_before_end: int = 0, is_winning_story: bool = False) -> StoryMetadataResponse:
         """Surcharge de generate pour inclure le error_feedback par défaut."""
 
-        is_end = "This should be close to the end of the story." if story_beat >= 5 else ""
+        is_end = "This IS the end of the story." if story_beat == turn_before_end else ""
         return await super().generate(
             story_text=story_text,
             current_time=current_time,

server/core/generators/story_segment_generator.py

@@ -80,26 +80,57 @@ Current game state :
             ]
         )
 
-    def _custom_parser(self, response_content: str) -> StorySegmentResponse:
-        """Parse response and handle errors."""
+    def _clean_and_fix_response(self, response_content: str) -> str:
+        """Clean and attempt to fix malformed responses."""
+        # Remove any leading/trailing whitespace
+        cleaned = response_content.strip()
         
+        # If it's already valid JSON, return as is
         try:
-            # Clean up escaped characters
-            cleaned_response = response_content.replace("\\_", "_").strip()
+            json.loads(cleaned)
+            return cleaned
+        except json.JSONDecodeError:
+            pass
+
+        # Remove any markdown formatting
+        cleaned = cleaned.replace('```json', '').replace('```', '')
+        
+        # Extract content between curly braces if present
+        import re
+        json_match = re.search(r'\{[^}]+\}', cleaned)
+        if json_match:
+            return json_match.group(0)
             
-            # If the response is a plain string (with or without quotes), convert it to proper JSON
-            if cleaned_response.startswith('"') and cleaned_response.endswith('"'):
-                cleaned_response = cleaned_response[1:-1]  # Remove surrounding quotes
+        # If it's just a plain text, wrap it in proper JSON format
+        if '"story_text"' not in cleaned:
+            # Remove any quotes at the start/end
+            cleaned = cleaned.strip('"\'')
+            # Escape any quotes within the text
+            cleaned = cleaned.replace('"', '\\"')
+            return f'{{"story_text": "{cleaned}"}}'
             
-            if not cleaned_response.startswith('{'):
-                # Convert plain text to proper JSON format
-                cleaned_response = json.dumps({"story_text": cleaned_response})
+        return cleaned
+
+    def _custom_parser(self, response_content: str) -> StorySegmentResponse:
+        """Parse response and handle errors."""
+        
+        try:
+            # First try to clean and fix the response
+            cleaned_response = self._clean_and_fix_response(response_content)
             
             # Try to parse as JSON
             data = json.loads(cleaned_response)
+            
+            # Validate the required field is present
+            if "story_text" not in data:
+                raise ValueError("Missing 'story_text' field in response")
+                
             return StorySegmentResponse(**data)
+            
         except (json.JSONDecodeError, ValueError) as e:
             print(f"Error parsing response: {str(e)}")
+            print(f"Original response: {response_content}")
+            print(f"Cleaned response: {cleaned_response if 'cleaned_response' in locals() else 'Not cleaned yet'}")
             raise ValueError(
                 "Response must be a valid JSON object with 'story_text' field. "
                 "Example: {'story_text': 'Your story segment here'}"
@@ -109,7 +140,7 @@ Current game state :
         """Generate the next story segment."""
 
         what_to_represent =" this is a victory !" if is_winning_story else "this is a death !"
-        is_end = f"Generate the END of the story. {what_to_represent} in 30 words. THIS IS MANDATORY." if story_beat == turn_before_end  else "Generate the next segment of the story in 15 words."
+        is_end = f"Generate the END of the story. {what_to_represent} in 35 words. THIS IS MANDATORY." if story_beat == turn_before_end  else "Generate the next segment of the story in 25 words."
         
         return await super().generate(
             HERO_DESCRIPTION=HERO_DESCRIPTION,