From 6d1170386b9530282a282f553c4f056e01a9df9a Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Wed, 4 Sep 2024 23:09:46 -0400
Subject: [PATCH 1/8] OV-144: + initial helper to transofrm payload to text to
 AI

---
 .../generate-script-placeholder.tsx           | 37 ++++++++++++-------
 .../generate-script-view.tsx                  | 18 ++++++++-
 .../components/menu-body/styles.module.css    |  2 +-
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index 174022892..c4bb7bb4d 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -1,27 +1,38 @@
 import { Icon, Text, VStack } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { useMemo } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 
-const GenerateScriptPlaceholder: React.FC = () => {
+type Properties = {
+    generatedText: string;
+};
+
+const GenerateScriptPlaceholder: React.FC<Properties> = ({ generatedText }) => {
+    const isGenearatedTextEmpty = useMemo(() => generatedText.length === 0, [generatedText]);
+
     return (
         <VStack w="full" p="40px" gap="10px">
-            <Icon
-                as={FontAwesomeIcon}
-                icon={IconName.SCROLL}
-                color="brand.secondary.300"
-                opacity="0.5"
-                size="2x"
-            />
+            {isGenearatedTextEmpty && (
+                <Icon
+                    as={FontAwesomeIcon}
+                    icon={IconName.SCROLL}
+                    color="brand.secondary.300"
+                    opacity="0.5"
+                    size="2x"
+                />
+            )}
             <Text
                 color="gray.400"
-                variant="H3"
-                w="40%"
+                // variant="H3"
+                // w="40%"
                 minWidth="175px"
-                textAlign="center"
-                fontStyle="italic"
+                // textAlign="center"
+                // fontStyle="italic"
             >
-                Here you will see your generated script
+                {isGenearatedTextEmpty
+                    ? 'Here you will see your generated script'
+                    : generatedText}
             </Text>
         </VStack>
     );
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index 697d71b9c..a81de0d10 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -14,6 +14,22 @@ import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/vide
 import { GenerateScriptForm } from '../generate-script-form/generate-script-form.js';
 import { GenerateScriptPlaceholder } from '../generate-script-placeholder/generate-script-placeholder.js';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getVideoScriptMessageFromPayload = (
+    payload: GenerateVideoScriptRequestDto,
+): string => {
+    const { language, topic, tone, additionalInfo } = payload;
+    const additionalInfoMessage =
+        additionalInfo.length > 0
+            ? `, to make a better script use this additional information: '${additionalInfo}'`
+            : '';
+
+    return `Create the script narration for a video,
+        divided in scene, generate script on topic '${topic}'
+        in '${language}' using a '${tone}' tone ${additionalInfoMessage}.
+    `;
+};
+
 const GenerateScriptView: React.FC = () => {
     const handleGenerateVideoScriptSubmit = useCallback(
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -60,7 +76,7 @@ const GenerateScriptView: React.FC = () => {
                             <GenerateScriptForm
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />
-                            <GenerateScriptPlaceholder />
+                            <GenerateScriptPlaceholder generatedText="Test" />
                         </HStack>
                     </TabPanel>
                 </TabPanels>
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-body/styles.module.css b/frontend/src/bundles/studio/components/video-menu/components/menu-body/styles.module.css
index 5533bae49..8ca5b0eef 100644
--- a/frontend/src/bundles/studio/components/video-menu/components/menu-body/styles.module.css
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-body/styles.module.css
@@ -20,5 +20,5 @@
 }
 
 .menu-body-content::-webkit-scrollbar {
-    display: none,
+    display: none;
 }

From 82d80b9b703fb6c3e23b0ea3c27cba69963cadbd Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Thu, 5 Sep 2024 20:57:28 -0400
Subject: [PATCH 2/8] OV-144: + generate text with AI using chat component

---
 .../bundles/common/components/components.ts   |  5 ++
 .../generate-script-form.tsx                  | 29 +++++++++-
 .../generate-script-placeholder.tsx           |  8 ++-
 .../styles.module.css                         | 35 +++++++++++
 .../generate-script-view.tsx                  | 58 ++++++++++++++++---
 .../components/video-modal/video-modal.tsx    |  8 ++-
 6 files changed, 130 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css

diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 94ef376fd..5cf5750ec 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -25,6 +25,7 @@ export {
     FormControl,
     FormErrorMessage,
     Heading,
+    HStack,
     Icon,
     IconButton,
     Image,
@@ -37,6 +38,10 @@ export {
     SimpleGrid,
     Spacer,
     Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
     Text,
     Tooltip,
     VStack,
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
index 032d2cee7..f9643e142 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
@@ -1,3 +1,4 @@
+import { MessageSender } from '~/bundles/chat/enums/enums.js';
 import {
     Button,
     FormProvider,
@@ -6,7 +7,13 @@ import {
     Textarea,
     VStack,
 } from '~/bundles/common/components/components.js';
-import { useAppForm } from '~/bundles/common/hooks/hooks.js';
+import { DataStatus } from '~/bundles/common/enums/enums.js';
+import {
+    useAppForm,
+    useAppSelector,
+    useCallback,
+    useMemo,
+} from '~/bundles/common/hooks/hooks.js';
 import {
     type GenerateVideoScriptRequestDto,
     generateVideoScriptValidationSchema,
@@ -19,6 +26,12 @@ type Properties = {
 };
 
 const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
+    const { messages, dataStatus } = useAppSelector(({ chat }) => ({
+        messages: chat.messages.filter(
+            (message) => message.sender === MessageSender.AI,
+        ),
+        dataStatus: chat.dataStatus,
+    }));
     const form = useAppForm<GenerateVideoScriptRequestDto>({
         initialValues: DEFAULT_GENERATE_SCRIPT_PAYLOAD,
         validationSchema: generateVideoScriptValidationSchema,
@@ -27,6 +40,18 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
 
     const { handleSubmit, values } = form;
 
+    const isTextGenerated: boolean = useMemo(() => {
+        return messages && messages.length > 0;
+    }, [messages]);
+
+    const getButtonLabel = useCallback(() => {
+        if (dataStatus === DataStatus.PENDING) {
+            return 'stop';
+        }
+
+        return isTextGenerated ? 'Re-Generate' : 'Generate script';
+    }, [dataStatus, isTextGenerated]);
+
     return (
         <FormProvider value={form}>
             <form onSubmit={handleSubmit}>
@@ -57,7 +82,7 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
                     />
                     <Button
                         type="submit"
-                        label="Generate script"
+                        label={getButtonLabel()}
                         sx={{ mt: '50px' }}
                         isDisabled={values.topic.trim().length === 0}
                     />
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index c4bb7bb4d..0ab5b56b1 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -4,12 +4,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useMemo } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 
+import styles from './styles.module.css';
+
 type Properties = {
     generatedText: string;
 };
 
 const GenerateScriptPlaceholder: React.FC<Properties> = ({ generatedText }) => {
-    const isGenearatedTextEmpty = useMemo(() => generatedText.length === 0, [generatedText]);
+    const isGenearatedTextEmpty = useMemo(
+        () => generatedText.length === 0,
+        [generatedText],
+    );
 
     return (
         <VStack w="full" p="40px" gap="10px">
@@ -29,6 +34,7 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ generatedText }) => {
                 minWidth="175px"
                 // textAlign="center"
                 // fontStyle="italic"
+                className={`${styles['line-1']} ${styles['anim-typewriter']}`}
             >
                 {isGenearatedTextEmpty
                     ? 'Here you will see your generated script'
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
new file mode 100644
index 000000000..484a37d03
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
@@ -0,0 +1,35 @@
+.line-1 {
+    /* position: relative;
+    top: 50%;
+    width: 100%; */
+    margin: 0 auto;
+    border-right: 2px solid rgba(255, 255, 255, 0.75);
+    /* text-align: center;
+    white-space: nowrap; */
+    /* overflow: hidden; */
+    /* transform: translateY(-50%); */
+    min-height: 470px;
+    width: 100%;
+}
+
+.anim-typewriter {
+    animation:
+        typewriter 4s steps(44) 1s 1 normal both,
+        blinkTextCursor 500ms steps(44) infinite normal;
+}
+@keyframes typewriter {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+@keyframes blinkTextCursor {
+    from {
+        border-right-color: rgba(255, 255, 255, 0.75);
+    }
+    to {
+        border-right-color: transparent;
+    }
+}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index a81de0d10..13a15c368 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -1,3 +1,7 @@
+import { type GenerateTextRequestDto } from '~/bundles/chat/chat.js';
+import { MessageSender } from '~/bundles/chat/enums/message-sender.js';
+import { actions as chatActions } from '~/bundles/chat/store/chat.js';
+import { type Message } from '~/bundles/chat/types/types.js';
 import {
     Heading,
     HStack,
@@ -6,16 +10,19 @@ import {
     TabPanel,
     TabPanels,
     Tabs,
-} from '@chakra-ui/react';
-
-import { useCallback } from '~/bundles/common/hooks/hooks.js';
+} from '~/bundles/common/components/components.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useCallback,
+    useMemo,
+} from '~/bundles/common/hooks/hooks.js';
 import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
 
 import { GenerateScriptForm } from '../generate-script-form/generate-script-form.js';
 import { GenerateScriptPlaceholder } from '../generate-script-placeholder/generate-script-placeholder.js';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getVideoScriptMessageFromPayload = (
+const generateMessageTemplate = (
     payload: GenerateVideoScriptRequestDto,
 ): string => {
     const { language, topic, tone, additionalInfo } = payload;
@@ -30,15 +37,46 @@ const getVideoScriptMessageFromPayload = (
     `;
 };
 
+const getVideoScriptMessageFromPayload = (
+    payload: GenerateVideoScriptRequestDto,
+    messages: Message[],
+): string => {
+    return messages.length === 0
+        ? generateMessageTemplate(payload)
+        : 'Please, generate another script from the info I have provided before';
+};
+
 const GenerateScriptView: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { messages } = useAppSelector(({ chat }) => ({
+        messages: chat.messages.filter(
+            (message) => message.sender === MessageSender.AI,
+        ),
+    }));
+
     const handleGenerateVideoScriptSubmit = useCallback(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         (payload: GenerateVideoScriptRequestDto): void => {
-            // TODO dispatch video script generation action
+            const sendMessageRequest: GenerateTextRequestDto = {
+                message: getVideoScriptMessageFromPayload(payload, messages),
+            };
+            void dispatch(chatActions.sendMessage(sendMessageRequest));
         },
-        [],
+        [messages, dispatch],
     );
 
+    const lastGeneratedText: string = useMemo(() => {
+        if (!messages || messages.length === 0) {
+            return '';
+        }
+
+        const lastMessage = messages.at(-1);
+        if (!lastMessage) {
+            return '';
+        }
+
+        return lastMessage.text;
+    }, [messages]);
+
     return (
         <>
             <Heading
@@ -76,7 +114,9 @@ const GenerateScriptView: React.FC = () => {
                             <GenerateScriptForm
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />
-                            <GenerateScriptPlaceholder generatedText="Test" />
+                            <GenerateScriptPlaceholder
+                                generatedText={lastGeneratedText}
+                            />
                         </HStack>
                     </TabPanel>
                 </TabPanels>
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index f58897251..7ddbefc10 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -6,6 +6,8 @@ import {
     ModalOverlay,
 } from '@chakra-ui/react';
 
+import { useChatCleanup } from '~/bundles/chat/hooks/hooks.js';
+
 import { VideoModalContent } from './components/components.js';
 
 type Properties = {
@@ -14,8 +16,12 @@ type Properties = {
 };
 
 const VideoModal: React.FC<Properties> = ({ isOpen, onModalClose }) => {
+    const { handleCloseChat } = useChatCleanup({
+        onModalChatClose: onModalClose,
+    });
+
     return (
-        <Modal isOpen={isOpen} onClose={onModalClose} isCentered>
+        <Modal isOpen={isOpen} onClose={handleCloseChat} isCentered>
             <ModalOverlay />
             <ModalContent
                 borderRadius="17px"

From 35b598ec47bde7066ef36a007b9335958a9e0e88 Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Fri, 6 Sep 2024 23:10:37 -0400
Subject: [PATCH 3/8] OV-144: * reponse to be an object of title and
 description insted of plain string

---
 .../generate-script-placeholder.tsx           | 63 +++++++++++--------
 .../generate-script-scene.tsx                 | 24 +++++++
 .../generate-script-scene/styles.module.css   | 27 ++++++++
 .../generate-script-view.tsx                  | 27 +++++---
 frontend/src/bundles/common/types/types.ts    |  1 +
 .../bundles/common/types/video-script.type.ts |  6 ++
 6 files changed, 114 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
 create mode 100644 frontend/src/bundles/common/types/video-script.type.ts

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index 0ab5b56b1..a64c6a4a3 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -1,45 +1,54 @@
-import { Icon, Text, VStack } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { Icon, Text, VStack } from '~/bundles/common/components/components.js';
 import { useMemo } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
+import { type VideoScript } from '~/bundles/common/types/types.js';
 
-import styles from './styles.module.css';
+import { GenerateScriptScene } from '../generate-script-scene/generate-script-scene.js';
 
 type Properties = {
-    generatedText: string;
+    videoScripts: VideoScript[];
 };
 
-const GenerateScriptPlaceholder: React.FC<Properties> = ({ generatedText }) => {
+const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
     const isGenearatedTextEmpty = useMemo(
-        () => generatedText.length === 0,
-        [generatedText],
+        () => videoScripts.length === 0,
+        [videoScripts],
     );
 
     return (
         <VStack w="full" p="40px" gap="10px">
-            {isGenearatedTextEmpty && (
-                <Icon
-                    as={FontAwesomeIcon}
-                    icon={IconName.SCROLL}
-                    color="brand.secondary.300"
-                    opacity="0.5"
-                    size="2x"
-                />
+            {isGenearatedTextEmpty ? (
+                <>
+                    <Icon
+                        as={FontAwesomeIcon}
+                        icon={IconName.SCROLL}
+                        color="brand.secondary.300"
+                        opacity="0.5"
+                        size="2x"
+                    />
+                    <Text
+                        color="gray.400"
+                        variant="H3"
+                        w="40%"
+                        minWidth="175px"
+                        textAlign="center"
+                        fontStyle="italic"
+                    >
+                        Here you will see your generated script
+                    </Text>
+                </>
+            ) : (
+                <>
+                    {videoScripts.map((videoScript, index) => (
+                        <GenerateScriptScene
+                            key={index}
+                            videoScript={videoScript}
+                        />
+                    ))}
+                </>
             )}
-            <Text
-                color="gray.400"
-                // variant="H3"
-                // w="40%"
-                minWidth="175px"
-                // textAlign="center"
-                // fontStyle="italic"
-                className={`${styles['line-1']} ${styles['anim-typewriter']}`}
-            >
-                {isGenearatedTextEmpty
-                    ? 'Here you will see your generated script'
-                    : generatedText}
-            </Text>
         </VStack>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
new file mode 100644
index 000000000..2e9b81ef6
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
@@ -0,0 +1,24 @@
+import { Box, Heading } from '~/bundles/common/components/components.js';
+import { type VideoScript } from '~/bundles/common/types/types.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    videoScript: VideoScript;
+};
+
+const GenerateScriptScene: React.FC<Properties> = ({ videoScript }) => {
+    const { title, description } = videoScript;
+    return (
+        <Box>
+            <Heading as="h4" variant="h4" className={`${styles['typewriter']}`}>
+                {title}
+            </Heading>
+            <Box as="p" className={`${styles['typewriter']}`}>
+                {description}
+            </Box>
+        </Box>
+    );
+};
+
+export { GenerateScriptScene };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
new file mode 100644
index 000000000..093ddbc47
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
@@ -0,0 +1,27 @@
+.typewriter {
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 3px solid black;
+    animation:
+        typing 3.5s steps(40, end),
+        blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+@keyframes blink-caret {
+    from,
+    to {
+        border-color: transparent;
+    }
+    50% {
+        border-color: black;
+    }
+}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index 13a15c368..69e665667 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -17,6 +17,7 @@ import {
     useCallback,
     useMemo,
 } from '~/bundles/common/hooks/hooks.js';
+import { type VideoScript } from '~/bundles/common/types/video-script.type.js';
 import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
 
 import { GenerateScriptForm } from '../generate-script-form/generate-script-form.js';
@@ -33,8 +34,10 @@ const generateMessageTemplate = (
 
     return `Create the script narration for a video,
         divided in scene, generate script on topic '${topic}'
-        in '${language}' using a '${tone}' tone ${additionalInfoMessage}.
+        in '${language}' using a '${tone}' tone ${additionalInfoMessage}
     `;
+    // The response must be valid a JSON that has an array of objects with title for the corresponding scene and
+    // the description, dont return any other text, just the JSON.
 };
 
 const getVideoScriptMessageFromPayload = (
@@ -43,7 +46,7 @@ const getVideoScriptMessageFromPayload = (
 ): string => {
     return messages.length === 0
         ? generateMessageTemplate(payload)
-        : 'Please, generate another script from the info I have provided before';
+        : 'Please, generate another script from the info provided before';
 };
 
 const GenerateScriptView: React.FC = () => {
@@ -64,17 +67,27 @@ const GenerateScriptView: React.FC = () => {
         [messages, dispatch],
     );
 
-    const lastGeneratedText: string = useMemo(() => {
+    const lastGeneratedScript: VideoScript[] = useMemo(() => {
         if (!messages || messages.length === 0) {
-            return '';
+            return [];
         }
 
         const lastMessage = messages.at(-1);
         if (!lastMessage) {
-            return '';
+            return [];
         }
 
-        return lastMessage.text;
+        try {
+            const videoScripts: VideoScript[] = JSON.parse(lastMessage.text);
+            return videoScripts;
+        } catch {
+            return [
+                {
+                    title: 'Scene',
+                    description: lastMessage.text,
+                },
+            ];
+        }
     }, [messages]);
 
     return (
@@ -115,7 +128,7 @@ const GenerateScriptView: React.FC = () => {
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />
                             <GenerateScriptPlaceholder
-                                generatedText={lastGeneratedText}
+                                videoScripts={lastGeneratedScript}
                             />
                         </HStack>
                     </TabPanel>
diff --git a/frontend/src/bundles/common/types/types.ts b/frontend/src/bundles/common/types/types.ts
index 62d51f522..a876bcdd3 100644
--- a/frontend/src/bundles/common/types/types.ts
+++ b/frontend/src/bundles/common/types/types.ts
@@ -1,5 +1,6 @@
 export { type AsyncThunkConfig } from './async-thunk-config.type.js';
 export { type VideoPreview } from './video-preview.type.js';
+export { type VideoScript } from './video-script.type.js';
 export {
     type ServerErrorDetail,
     type ServerErrorResponse,
diff --git a/frontend/src/bundles/common/types/video-script.type.ts b/frontend/src/bundles/common/types/video-script.type.ts
new file mode 100644
index 000000000..8300b5dcd
--- /dev/null
+++ b/frontend/src/bundles/common/types/video-script.type.ts
@@ -0,0 +1,6 @@
+type VideoScript = {
+    title: string;
+    description: string;
+};
+
+export { type VideoScript };

From 043bfc145e7077befb2c67729c154c3f0d89a651 Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Mon, 9 Sep 2024 23:22:30 -0400
Subject: [PATCH 4/8] OV-144: * genearete text with corresponding animation and
 visual

---
 backend/src/common/http/base-http-api.ts      |  4 ++
 .../http/types/http-api-options.type.ts       |  4 +-
 .../generate-script-placeholder-content.tsx   | 44 ++++++++++++++++
 .../generate-script-placeholder.tsx           | 51 +++++++++----------
 .../generate-script-scene.tsx                 | 15 ++++--
 .../generate-script-scene/styles.module.css   | 24 +++++----
 .../generate-script-view.tsx                  | 39 ++++----------
 .../generate-script-message-template.ts       | 34 +++++++++++++
 .../video-modal-content/helpers/helpers.ts    |  2 +
 .../sanitize-json-string.ts                   |  7 +++
 .../icons/helper/icon-conversion.helper.ts    |  3 ++
 .../src/bundles/common/icons/icon-name.ts     |  4 +-
 .../theme/styles/components.styles.ts         |  5 ++
 13 files changed, 161 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts
 create mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts

diff --git a/backend/src/common/http/base-http-api.ts b/backend/src/common/http/base-http-api.ts
index 725b38d49..0836141a7 100644
--- a/backend/src/common/http/base-http-api.ts
+++ b/backend/src/common/http/base-http-api.ts
@@ -40,6 +40,8 @@ class BaseHttpApi implements HttpApi {
             contentType,
             payload = null,
             headers: customHeaders,
+            credentials = 'same-origin',
+            keepAlive = false,
         } = options;
 
         const baseHeaders = [
@@ -55,6 +57,8 @@ class BaseHttpApi implements HttpApi {
             method,
             headers,
             payload,
+            credentials,
+            keepAlive,
         });
 
         return this.checkResponse(response) as HttpApiResponse;
diff --git a/backend/src/common/http/types/http-api-options.type.ts b/backend/src/common/http/types/http-api-options.type.ts
index ff81f938b..c5c740c57 100644
--- a/backend/src/common/http/types/http-api-options.type.ts
+++ b/backend/src/common/http/types/http-api-options.type.ts
@@ -2,10 +2,12 @@ import { type ContentType, type ValueOf } from 'shared';
 
 import { type CustomHeader, type HttpOptions } from './types.js';
 
-type HttpApiOptions = Omit<HttpOptions, 'headers' | 'payload'> & {
+type HttpApiOptions = Omit<HttpOptions, 'headers' | 'payload' | 'credentials' | 'keepAlive'> & {
     contentType: ValueOf<typeof ContentType>;
     headers?: CustomHeader;
     payload?: HttpOptions['payload'];
+    credentials?: HttpOptions['credentials'];
+    keepAlive?: HttpOptions['keepAlive'];
 };
 
 export { type HttpApiOptions };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx
new file mode 100644
index 000000000..c3d6e45fd
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx
@@ -0,0 +1,44 @@
+import { type ComponentWithAs, type IconProps } from '@chakra-ui/react';
+
+import { Flex, Icon, Text } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    message: string;
+    icon?: ComponentWithAs<'svg', IconProps>;
+};
+
+const GenerateScriptPlaceholderContent: React.FC<Properties> = ({
+    message,
+    icon,
+}) => (
+    <Flex
+        gap="10px"
+        direction="column"
+        justify="center"
+        alignItems="center"
+        width="100%"
+        height="100%"
+    >
+        {icon && (
+            <Icon
+                as={icon}
+                color="brand.secondary.300"
+                opacity="0.5"
+                w={6}
+                h={6}
+            />
+        )}
+        <Text
+            color="gray.400"
+            variant="H3"
+            w="40%"
+            minWidth="175px"
+            textAlign="center"
+            fontStyle="italic"
+        >
+            {message}
+        </Text>
+    </Flex>
+);
+
+export { GenerateScriptPlaceholderContent };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index a64c6a4a3..5efb29699 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -1,10 +1,10 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import { Icon, Text, VStack } from '~/bundles/common/components/components.js';
-import { useMemo } from '~/bundles/common/hooks/hooks.js';
+import { VStack } from '~/bundles/common/components/components.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
+import { useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 import { type VideoScript } from '~/bundles/common/types/types.js';
 
+import { GenerateScriptPlaceholderContent } from '../generate-script-placeholder-content/generate-script-placeholder-content.js';
 import { GenerateScriptScene } from '../generate-script-scene/generate-script-scene.js';
 
 type Properties = {
@@ -12,33 +12,30 @@ type Properties = {
 };
 
 const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
-    const isGenearatedTextEmpty = useMemo(
+    const { dataStatus } = useAppSelector(({ chat }) => ({
+        dataStatus: chat.dataStatus,
+    }));
+    const isGeneratedTextEmpty = useMemo(
         () => videoScripts.length === 0,
         [videoScripts],
     );
 
     return (
-        <VStack w="full" p="40px" gap="10px">
-            {isGenearatedTextEmpty ? (
-                <>
-                    <Icon
-                        as={FontAwesomeIcon}
-                        icon={IconName.SCROLL}
-                        color="brand.secondary.300"
-                        opacity="0.5"
-                        size="2x"
-                    />
-                    <Text
-                        color="gray.400"
-                        variant="H3"
-                        w="40%"
-                        minWidth="175px"
-                        textAlign="center"
-                        fontStyle="italic"
-                    >
-                        Here you will see your generated script
-                    </Text>
-                </>
+        <VStack
+            w="full"
+            paddingX="40px"
+            gap="10px"
+            height={'100vh'}
+            maxH={'550px'}
+            overflowY={'auto'}
+        >
+            {dataStatus === DataStatus.PENDING ? (
+                <GenerateScriptPlaceholderContent message="Loading..." />
+            ) : (isGeneratedTextEmpty ? (
+                <GenerateScriptPlaceholderContent
+                    message="Here you will see your generated script"
+                    icon={IconName.SCROLL}
+                />
             ) : (
                 <>
                     {videoScripts.map((videoScript, index) => (
@@ -48,7 +45,7 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
                         />
                     ))}
                 </>
-            )}
+            ))}
         </VStack>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
index 2e9b81ef6..6044b8836 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
@@ -1,4 +1,5 @@
 import { Box, Heading } from '~/bundles/common/components/components.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 import { type VideoScript } from '~/bundles/common/types/types.js';
 
 import styles from './styles.module.css';
@@ -9,14 +10,18 @@ type Properties = {
 
 const GenerateScriptScene: React.FC<Properties> = ({ videoScript }) => {
     const { title, description } = videoScript;
+    const [animationDone, setAnimationDone] = useState(false);
+
+    const handleAnimationEnd = useCallback(() => {
+        setAnimationDone(true);
+    }, [setAnimationDone]);
+
     return (
-        <Box>
-            <Heading as="h4" variant="h4" className={`${styles['typewriter']}`}>
+        <Box mb={'10'}>
+            <Heading as="h4" variant={'H4'} color={'typography.600'}>
                 {title}
             </Heading>
-            <Box as="p" className={`${styles['typewriter']}`}>
-                {description}
-            </Box>
+            <Box as="p" className={animationDone ? styles['typing-effect--done'] : styles['typing-effect']} onAnimationEnd={handleAnimationEnd}>{description}</Box>
         </Box>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
index 093ddbc47..00449c653 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
@@ -1,12 +1,3 @@
-.typewriter {
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: 3px solid black;
-    animation:
-        typing 3.5s steps(40, end),
-        blink-caret 0.75s step-end infinite;
-}
-
 @keyframes typing {
     from {
         width: 0;
@@ -17,11 +8,22 @@
 }
 
 @keyframes blink-caret {
-    from,
-    to {
+    from, to {
         border-color: transparent;
     }
     50% {
         border-color: black;
     }
 }
+
+.typing-effect {
+    overflow: hidden;
+    border-right: 2px solid black;
+    width: 0;
+    animation: typing 3s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
+}
+.typing-effect--done {
+    white-space: normal;
+    overflow: visible;
+    border-right: none;
+}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index 69e665667..368f3d9cd 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -1,7 +1,6 @@
 import { type GenerateTextRequestDto } from '~/bundles/chat/chat.js';
 import { MessageSender } from '~/bundles/chat/enums/message-sender.js';
 import { actions as chatActions } from '~/bundles/chat/store/chat.js';
-import { type Message } from '~/bundles/chat/types/types.js';
 import {
     Heading,
     HStack,
@@ -20,35 +19,13 @@ import {
 import { type VideoScript } from '~/bundles/common/types/video-script.type.js';
 import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
 
+import {
+    getVideoScriptMessageFromPayload,
+    sanitizeJsonString,
+} from '../../helpers/helpers.js';
 import { GenerateScriptForm } from '../generate-script-form/generate-script-form.js';
 import { GenerateScriptPlaceholder } from '../generate-script-placeholder/generate-script-placeholder.js';
 
-const generateMessageTemplate = (
-    payload: GenerateVideoScriptRequestDto,
-): string => {
-    const { language, topic, tone, additionalInfo } = payload;
-    const additionalInfoMessage =
-        additionalInfo.length > 0
-            ? `, to make a better script use this additional information: '${additionalInfo}'`
-            : '';
-
-    return `Create the script narration for a video,
-        divided in scene, generate script on topic '${topic}'
-        in '${language}' using a '${tone}' tone ${additionalInfoMessage}
-    `;
-    // The response must be valid a JSON that has an array of objects with title for the corresponding scene and
-    // the description, dont return any other text, just the JSON.
-};
-
-const getVideoScriptMessageFromPayload = (
-    payload: GenerateVideoScriptRequestDto,
-    messages: Message[],
-): string => {
-    return messages.length === 0
-        ? generateMessageTemplate(payload)
-        : 'Please, generate another script from the info provided before';
-};
-
 const GenerateScriptView: React.FC = () => {
     const dispatch = useAppDispatch();
     const { messages } = useAppSelector(({ chat }) => ({
@@ -78,7 +55,8 @@ const GenerateScriptView: React.FC = () => {
         }
 
         try {
-            const videoScripts: VideoScript[] = JSON.parse(lastMessage.text);
+            const sanitizedJson = sanitizeJsonString(lastMessage.text);
+            const videoScripts: VideoScript[] = JSON.parse(sanitizedJson);
             return videoScripts;
         } catch {
             return [
@@ -123,7 +101,10 @@ const GenerateScriptView: React.FC = () => {
                 </TabList>
                 <TabPanels>
                     <TabPanel p={0}>
-                        <HStack justify="space-between">
+                        <HStack
+                            justify="space-between"
+                            alignItems={'flex-start'}
+                        >
                             <GenerateScriptForm
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
new file mode 100644
index 000000000..8f1c228b2
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
@@ -0,0 +1,34 @@
+import { type Message } from '~/bundles/chat/types/types.js';
+import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
+
+const generateMessageTemplate = (
+    payload: GenerateVideoScriptRequestDto,
+): string => {
+    const { language, topic, tone, additionalInfo } = payload;
+    const additionalInfoMessage =
+        additionalInfo.length > 0
+            ? `, to make a better script use this additional information: '${additionalInfo}'`
+            : '';
+
+    return `Create the script narration for a video,
+        divided in scene, generate script on topic '${topic}'
+        in '${language}' using a '${tone}' tone ${additionalInfoMessage}
+
+        The response must be valid a JSON that has an array of objects with title for the corresponding scene and
+        the description, dont return any other text, just the JSON.
+    `;
+};
+
+const getVideoScriptMessageFromPayload = (
+    payload: GenerateVideoScriptRequestDto,
+    messages: Message[],
+): string => {
+    return messages.length === 0
+        ? generateMessageTemplate(payload)
+        : `Please, generate another script from the info provided before.
+
+        The response must be valid a JSON that has an array of objects with title for the corresponding scene and
+        the description, dont return any other text, just the JSON.`;
+};
+
+export { getVideoScriptMessageFromPayload };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts
new file mode 100644
index 000000000..f35afb2a4
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts
@@ -0,0 +1,2 @@
+export { getVideoScriptMessageFromPayload } from './generate-script-message-template/generate-script-message-template.js';
+export { sanitizeJsonString } from './sanitize-json-string/sanitize-json-string.js';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
new file mode 100644
index 000000000..08b743bec
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
@@ -0,0 +1,7 @@
+const sanitizeJsonString = (input: string): string => {
+    let sanitized = input.replaceAll('`', '');
+    sanitized = sanitized.replaceAll('json', '');
+    return sanitized.trim();
+};
+
+export { sanitizeJsonString };
diff --git a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
index 73e5d3f97..5550b0808 100644
--- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
+++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
@@ -8,6 +8,7 @@ import {
     faPause,
     faPlay,
     faRightFromBracket,
+    faScroll,
     faVolumeHigh,
     faVolumeOff,
 } from '@fortawesome/free-solid-svg-icons';
@@ -22,6 +23,7 @@ const forwardStepIcon = iconConverter(faForwardStep);
 const pauseIcon = iconConverter(faPause);
 const playIcon = iconConverter(faPlay);
 const fileLinesIcon = iconConverter(faFileLines);
+const scrollIcon = iconConverter(faScroll);
 
 const CloudArrowDownIcon = iconConverter(faCloudArrowDown);
 const VolumeHighIcon = iconConverter(faVolumeHigh);
@@ -39,6 +41,7 @@ export {
     pauseIcon,
     playIcon,
     RightFromBracketIcon,
+    scrollIcon,
     VolumeHighIcon,
     VolumeOffIcon,
 };
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
index ea3ae196d..d1f6ea6cf 100644
--- a/frontend/src/bundles/common/icons/icon-name.ts
+++ b/frontend/src/bundles/common/icons/icon-name.ts
@@ -12,7 +12,6 @@ import {
     faEllipsisVertical,
     faFont,
     faPen,
-    faScroll,
     faT,
     faTableColumns,
 } from '@fortawesome/free-solid-svg-icons';
@@ -27,6 +26,7 @@ import {
     pauseIcon,
     playIcon,
     RightFromBracketIcon,
+    scrollIcon,
     VolumeHighIcon,
     VolumeOffIcon,
 } from './helper/icon-conversion.helper.js';
@@ -42,7 +42,7 @@ const IconName = {
     PLAY_STEP_BACK: backwardStepIcon,
     PLAY_STEP_NEXT: forwardStepIcon,
     PAUSE: pauseIcon,
-    SCROLL: faScroll,
+    SCROLL: scrollIcon,
     VOLUME: VolumeHighIcon,
     VOLUME_OFF: VolumeOffIcon,
     CLOUD_ARROW_DOWN: CloudArrowDownIcon,
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 056926866..4b8e16097 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -23,6 +23,11 @@ const components = {
                 fontWeight: '700',
                 lineHeight: '27px',
             },
+            H4: {
+                fontSize: '16px',
+                fontWeight: '700',
+                lineHeight: '24px',
+            },
         },
     },
     Text: {

From 94875b96a88305915e4684f558989405e9136760 Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Tue, 10 Sep 2024 10:44:06 -0400
Subject: [PATCH 5/8] OV-42: * use general loader when waiting respond

---
 .../generate-script-form.tsx                  |  2 +-
 .../generate-script-placeholder.tsx           | 21 ++++++-----
 .../styles.module.css                         | 35 -------------------
 .../generate-script-scene.tsx                 | 16 +++++++--
 .../generate-script-scene/styles.module.css   | 29 ++++++++-------
 .../generate-script-view.tsx                  |  5 +--
 6 files changed, 44 insertions(+), 64 deletions(-)
 delete mode 100644 frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
index f9643e142..774a1c23f 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
@@ -46,7 +46,7 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
 
     const getButtonLabel = useCallback(() => {
         if (dataStatus === DataStatus.PENDING) {
-            return 'stop';
+            return 'Stop';
         }
 
         return isTextGenerated ? 'Re-Generate' : 'Generate script';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index 5efb29699..fff7de5e1 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -1,4 +1,8 @@
-import { VStack } from '~/bundles/common/components/components.js';
+import {
+    Loader,
+    Overlay,
+    VStack,
+} from '~/bundles/common/components/components.js';
 import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
 import { useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
@@ -25,13 +29,14 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
             w="full"
             paddingX="40px"
             gap="10px"
-            height={'100vh'}
-            maxH={'550px'}
-            overflowY={'auto'}
+            height="100vh"
+            maxH="550px"
+            overflowY="auto"
         >
-            {dataStatus === DataStatus.PENDING ? (
-                <GenerateScriptPlaceholderContent message="Loading..." />
-            ) : (isGeneratedTextEmpty ? (
+            <Overlay isOpen={dataStatus === DataStatus.PENDING}>
+                <Loader />
+            </Overlay>
+            {isGeneratedTextEmpty ? (
                 <GenerateScriptPlaceholderContent
                     message="Here you will see your generated script"
                     icon={IconName.SCROLL}
@@ -45,7 +50,7 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
                         />
                     ))}
                 </>
-            ))}
+            )}
         </VStack>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
deleted file mode 100644
index 484a37d03..000000000
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.line-1 {
-    /* position: relative;
-    top: 50%;
-    width: 100%; */
-    margin: 0 auto;
-    border-right: 2px solid rgba(255, 255, 255, 0.75);
-    /* text-align: center;
-    white-space: nowrap; */
-    /* overflow: hidden; */
-    /* transform: translateY(-50%); */
-    min-height: 470px;
-    width: 100%;
-}
-
-.anim-typewriter {
-    animation:
-        typewriter 4s steps(44) 1s 1 normal both,
-        blinkTextCursor 500ms steps(44) infinite normal;
-}
-@keyframes typewriter {
-    from {
-        width: 0;
-    }
-    to {
-        width: 100%;
-    }
-}
-@keyframes blinkTextCursor {
-    from {
-        border-right-color: rgba(255, 255, 255, 0.75);
-    }
-    to {
-        border-right-color: transparent;
-    }
-}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
index 6044b8836..deba03cbd 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
@@ -17,11 +17,21 @@ const GenerateScriptScene: React.FC<Properties> = ({ videoScript }) => {
     }, [setAnimationDone]);
 
     return (
-        <Box mb={'10'}>
-            <Heading as="h4" variant={'H4'} color={'typography.600'}>
+        <Box mb="10">
+            <Heading as="h4" variant="H4" color="typography.600">
                 {title}
             </Heading>
-            <Box as="p" className={animationDone ? styles['typing-effect--done'] : styles['typing-effect']} onAnimationEnd={handleAnimationEnd}>{description}</Box>
+            <Box
+                as="p"
+                className={
+                    animationDone
+                        ? styles['typing-effect--done']
+                        : styles['typing-effect']
+                }
+                onAnimationEnd={handleAnimationEnd}
+            >
+                {description}
+            </Box>
         </Box>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
index 00449c653..d127cf474 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
@@ -1,3 +1,17 @@
+.typing-effect {
+    overflow: hidden;
+    border-right: 2px solid black;
+    width: 0;
+    animation:
+        typing 3s steps(30, end) forwards,
+        blink-caret 0.75s step-end infinite;
+}
+.typing-effect--done {
+    white-space: normal;
+    overflow: visible;
+    border-right: none;
+}
+
 @keyframes typing {
     from {
         width: 0;
@@ -8,22 +22,11 @@
 }
 
 @keyframes blink-caret {
-    from, to {
+    from,
+    to {
         border-color: transparent;
     }
     50% {
         border-color: black;
     }
 }
-
-.typing-effect {
-    overflow: hidden;
-    border-right: 2px solid black;
-    width: 0;
-    animation: typing 3s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
-}
-.typing-effect--done {
-    white-space: normal;
-    overflow: visible;
-    border-right: none;
-}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index 368f3d9cd..8c15a9bd3 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -101,10 +101,7 @@ const GenerateScriptView: React.FC = () => {
                 </TabList>
                 <TabPanels>
                     <TabPanel p={0}>
-                        <HStack
-                            justify="space-between"
-                            alignItems={'flex-start'}
-                        >
+                        <HStack justify="space-between" alignItems="flex-start">
                             <GenerateScriptForm
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />

From 427079c48078f81194dfd5098f32c703e2a0907b Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Wed, 11 Sep 2024 10:32:22 -0400
Subject: [PATCH 6/8] OV-144: * suggestion, to make code simplier, and tone not
 required

---
 .../generate-script-form/generate-script-form.tsx     |  9 ++-------
 .../generate-script-placeholder.tsx                   |  8 ++------
 .../generate-script-message-template.ts               | 11 +++++++----
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
index 774a1c23f..23200a1b3 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
@@ -12,7 +12,6 @@ import {
     useAppForm,
     useAppSelector,
     useCallback,
-    useMemo,
 } from '~/bundles/common/hooks/hooks.js';
 import {
     type GenerateVideoScriptRequestDto,
@@ -40,17 +39,13 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
 
     const { handleSubmit, values } = form;
 
-    const isTextGenerated: boolean = useMemo(() => {
-        return messages && messages.length > 0;
-    }, [messages]);
-
     const getButtonLabel = useCallback(() => {
         if (dataStatus === DataStatus.PENDING) {
             return 'Stop';
         }
 
-        return isTextGenerated ? 'Re-Generate' : 'Generate script';
-    }, [dataStatus, isTextGenerated]);
+        return messages?.length > 0 ? 'Re-Generate' : 'Generate script';
+    }, [dataStatus, messages]);
 
     return (
         <FormProvider value={form}>
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index fff7de5e1..b34accaed 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -4,7 +4,7 @@ import {
     VStack,
 } from '~/bundles/common/components/components.js';
 import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
-import { useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
+import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 import { type VideoScript } from '~/bundles/common/types/types.js';
 
@@ -19,10 +19,6 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
     const { dataStatus } = useAppSelector(({ chat }) => ({
         dataStatus: chat.dataStatus,
     }));
-    const isGeneratedTextEmpty = useMemo(
-        () => videoScripts.length === 0,
-        [videoScripts],
-    );
 
     return (
         <VStack
@@ -36,7 +32,7 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
             <Overlay isOpen={dataStatus === DataStatus.PENDING}>
                 <Loader />
             </Overlay>
-            {isGeneratedTextEmpty ? (
+            {videoScripts.length === 0 ? (
                 <GenerateScriptPlaceholderContent
                     message="Here you will see your generated script"
                     icon={IconName.SCROLL}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
index 8f1c228b2..ea64767ca 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
@@ -5,6 +5,7 @@ const generateMessageTemplate = (
     payload: GenerateVideoScriptRequestDto,
 ): string => {
     const { language, topic, tone, additionalInfo } = payload;
+    const toneMessage = tone.length > 0 ? `, using a '${tone}' tone '` : '';
     const additionalInfoMessage =
         additionalInfo.length > 0
             ? `, to make a better script use this additional information: '${additionalInfo}'`
@@ -12,7 +13,7 @@ const generateMessageTemplate = (
 
     return `Create the script narration for a video,
         divided in scene, generate script on topic '${topic}'
-        in '${language}' using a '${tone}' tone ${additionalInfoMessage}
+        in '${language}' ${toneMessage} ${additionalInfoMessage}
 
         The response must be valid a JSON that has an array of objects with title for the corresponding scene and
         the description, dont return any other text, just the JSON.
@@ -25,10 +26,12 @@ const getVideoScriptMessageFromPayload = (
 ): string => {
     return messages.length === 0
         ? generateMessageTemplate(payload)
-        : `Please, generate another script from the info provided before.
+        : `Please, generate another script:
 
-        The response must be valid a JSON that has an array of objects with title for the corresponding scene and
-        the description, dont return any other text, just the JSON.`;
+            ${generateMessageTemplate(payload)}
+
+            The response must be valid a JSON that has an array of objects with title for the corresponding scene and
+            the description, dont return any other text, just the JSON.`;
 };
 
 export { getVideoScriptMessageFromPayload };

From 3176164dbcaf1a529202ebb2cdf3aec2755fe445 Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Wed, 11 Sep 2024 12:20:03 -0400
Subject: [PATCH 7/8] OV-144: * styles that were remove on last merge

---
 .../generate-script-form.tsx                    |  9 ++++++++-
 .../generate-script-placeholder.tsx             | 17 +++++++----------
 .../styles.module.css                           |  4 ++++
 .../generate-script-scene.tsx                   |  2 +-
 .../generate-script-view/styles.module.css      |  1 +
 5 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
index a6e5880cd..2eb7cbbb4 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
@@ -48,6 +48,13 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
         return messages?.length > 0 ? 'Re-Generate' : 'Generate script';
     }, [dataStatus, messages]);
 
+    const isSubmitButtonDisabled = useCallback(() => {
+        return (
+            dataStatus === DataStatus.PENDING ||
+            values.topic.trim().length === 0
+        );
+    }, [dataStatus, values]);
+
     return (
         <FormProvider value={form}>
             <form onSubmit={handleSubmit}>
@@ -83,7 +90,7 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
                         type="submit"
                         label={getButtonLabel()}
                         margin-top="50px"
-                        isDisabled={values.topic.trim().length === 0}
+                        isDisabled={isSubmitButtonDisabled()}
                     />
                 </VStack>
             </form>
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index 914d9af44..9fcd84acb 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -1,8 +1,4 @@
-import {
-    Loader,
-    Overlay,
-    VStack,
-} from '~/bundles/common/components/components.js';
+import { Box, Loader, VStack } from '~/bundles/common/components/components.js';
 import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
 import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
@@ -23,10 +19,11 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
 
     return (
         <VStack className={styles['scriptPlaceholderContainer']}>
-            <Overlay isOpen={dataStatus === DataStatus.PENDING}>
-                <Loader />
-            </Overlay>
-            {videoScripts.length === 0 ? (
+            {dataStatus === DataStatus.PENDING ? (
+                <Box mt="100px">
+                    <Loader />
+                </Box>
+            ) : (videoScripts.length === 0 ? (
                 <GenerateScriptPlaceholderContent
                     message="Here you will see your generated script"
                     icon={IconName.SCROLL}
@@ -40,7 +37,7 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
                         />
                     ))}
                 </>
-            )}
+            ))}
         </VStack>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
index c7ecb557b..81193edfb 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
@@ -1,5 +1,9 @@
 .scriptPlaceholderContainer {
     width: 100%;
+    height: 100vh;
+    min-height: 480px;
+    max-height: 480px;
+    overflow-y: auto;
     padding: 40px;
     gap: 10px;
 }
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
index deba03cbd..545875b85 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
@@ -17,7 +17,7 @@ const GenerateScriptScene: React.FC<Properties> = ({ videoScript }) => {
     }, [setAnimationDone]);
 
     return (
-        <Box mb="10">
+        <Box mb="10" width="100%">
             <Heading as="h4" variant="H4" color="typography.600">
                 {title}
             </Heading>
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css
index ea217e6e1..a9a0ecd98 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css
@@ -26,4 +26,5 @@
 
 .scriptViewHStack {
     justify-content: space-between;
+    align-items: flex-start;
 }

From 8677bcf22767a4abdb9170799f08e06a8573b586 Mon Sep 17 00:00:00 2001
From: Luis Felix <lfelix3011@gmail.com>
Date: Wed, 11 Sep 2024 20:11:29 -0400
Subject: [PATCH 8/8] OV-144: * use route form bundle insted of relative
 import, and chain replaceAll

---
 .../generate-script-placeholder.tsx           | 51 ++++++++++++-------
 .../generate-script-view.tsx                  |  8 +--
 .../sanitize-json-string.ts                   |  3 +-
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index 9fcd84acb..8a11392e3 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -17,27 +17,40 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
         dataStatus: chat.dataStatus,
     }));
 
+    const renderLoadingState = (): React.ReactNode => (
+        <Box mt="100px">
+            <Loader />
+        </Box>
+    );
+
+    const renderEmptyState = (): React.ReactNode => (
+        <GenerateScriptPlaceholderContent
+            message="Here you will see your generated script"
+            icon={IconName.SCROLL}
+        />
+    );
+
+    const renderScripts = (): React.ReactNode => (
+        <>
+            {videoScripts.map((videoScript, index) => (
+                <GenerateScriptScene key={index} videoScript={videoScript} />
+            ))}
+        </>
+    );
+
+    const getContent = (): React.ReactNode => {
+        if (dataStatus === DataStatus.PENDING) {
+            return renderLoadingState();
+        }
+        if (videoScripts.length === 0) {
+            return renderEmptyState();
+        }
+        return renderScripts();
+    };
+
     return (
         <VStack className={styles['scriptPlaceholderContainer']}>
-            {dataStatus === DataStatus.PENDING ? (
-                <Box mt="100px">
-                    <Loader />
-                </Box>
-            ) : (videoScripts.length === 0 ? (
-                <GenerateScriptPlaceholderContent
-                    message="Here you will see your generated script"
-                    icon={IconName.SCROLL}
-                />
-            ) : (
-                <>
-                    {videoScripts.map((videoScript, index) => (
-                        <GenerateScriptScene
-                            key={index}
-                            videoScript={videoScript}
-                        />
-                    ))}
-                </>
-            ))}
+            {getContent()}
         </VStack>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index 05371cf8e..9a651bf99 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -10,6 +10,10 @@ import {
     TabPanels,
     Tabs,
 } from '~/bundles/common/components/components.js';
+import {
+    getVideoScriptMessageFromPayload,
+    sanitizeJsonString,
+} from '~/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.js';
 import {
     useAppDispatch,
     useAppSelector,
@@ -19,10 +23,6 @@ import {
 import { type VideoScript } from '~/bundles/common/types/video-script.type.js';
 import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
 
-import {
-    getVideoScriptMessageFromPayload,
-    sanitizeJsonString,
-} from '../../helpers/helpers.js';
 import { GenerateScriptForm } from '../generate-script-form/generate-script-form.js';
 import { GenerateScriptPlaceholder } from '../generate-script-placeholder/generate-script-placeholder.js';
 import styles from './styles.module.css';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
index 08b743bec..3695afce1 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
@@ -1,6 +1,5 @@
 const sanitizeJsonString = (input: string): string => {
-    let sanitized = input.replaceAll('`', '');
-    sanitized = sanitized.replaceAll('json', '');
+    const sanitized = input.replaceAll('`', '').replaceAll('json', '');
     return sanitized.trim();
 };