Merge branch 'next' of https://github.com/BinaryStudioAcademy/bsa-202…

…4-outreachvids into task/OV-347-connect-generate-script-with-studio
BinaryStudioAcademy · Sep 26, 2024 · 72e8260 · 72e8260
2 parents 2355bda + d20cdc8
commit 72e8260
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 19 deletions.
diff --git a/frontend/src/bundles/chat/constants/constants.ts b/frontend/src/bundles/chat/constants/constants.ts
diff --git a/frontend/src/bundles/chat/constants/default-scene-title.ts b/frontend/src/bundles/chat/constants/default-scene-title.ts
diff --git a/frontend/src/bundles/chat/helpers/sanitize-json-string.ts b/frontend/src/bundles/chat/helpers/sanitize-json-string.ts
@@ -1,6 +1,6 @@
 const sanitizeJsonString = (input: string): string => {
-    const sanitized = input.replaceAll('`', '').replaceAll('json', '');
-    return sanitized.trim();
+    const match = input.match(/\[.*]/s);
+    return match ? match[0].trim() : input.trim();
 };
 
 export { sanitizeJsonString };
diff --git a/frontend/src/bundles/chat/store/slice.ts b/frontend/src/bundles/chat/store/slice.ts
@@ -1,6 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-import { DEFAULT_SCENE_TITLE } from '~/bundles/chat/constants/constants.js';
 import { MessageSender } from '~/bundles/chat/enums/enums.js';
 import { sanitizeJsonString } from '~/bundles/chat/helpers/helpers.js';
 import {
@@ -22,12 +21,14 @@ import { deleteChat, sendMessage } from './actions.js';
 type State = {
     messages: Message[];
     videoScripts: VideoScript[];
+    videoScriptErrorMessage: string;
     dataStatus: ValueOf<typeof DataStatus>;
 };
 
 const initialState: State = {
     messages: [],
     videoScripts: [],
+    videoScriptErrorMessage: '',
     dataStatus: DataStatus.IDLE,
 };
 
@@ -52,15 +53,12 @@ const { reducer, actions, name } = createSlice({
             try {
                 const sanitizedJson = sanitizeJsonString(lastMessage.text);
                 const videoScripts: VideoScript[] = JSON.parse(sanitizedJson);
-
                 state.videoScripts = videoScripts;
+                state.videoScriptErrorMessage = '';
             } catch {
-                state.videoScripts = [
-                    {
-                        title: DEFAULT_SCENE_TITLE,
-                        description: lastMessage.text,
-                    },
-                ];
+                state.videoScripts = [];
+                state.videoScriptErrorMessage =
+                    'There was an error Generating the Script, please Re-Generate';
             }
         },
     },
@@ -101,6 +99,7 @@ const { reducer, actions, name } = createSlice({
         builder.addCase(deleteChat.fulfilled, (state) => {
             state.messages = [];
             state.videoScripts = [];
+            state.videoScriptErrorMessage = '';
             state.dataStatus = DataStatus.FULFILLED;
         });
         builder.addCase(deleteChat.rejected, (state) => {

diff --git a/...ideo-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/...ideo-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -32,13 +32,13 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ onClose }) => {
     const dispatch = useAppDispatch();
     const [shouldRedirect, setShouldRedirect] = useState(false);
     const [isScriptAdded, setIsScriptAdded] = useState(false);
-    const { dataStatus, avatars, videoScripts } = useAppSelector(
-        ({ chat, studio }) => ({
+    const { dataStatus, avatars, videoScripts, videoScriptErrorMessage } =
+        useAppSelector(({ chat, studio }) => ({
             dataStatus: chat.dataStatus,
             videoScripts: chat.videoScripts,
+            videoScriptErrorMessage: chat.videoScriptErrorMessage,
             avatars: studio.avatars,
-        }),
-    );
+        }));
 
     const renderLoadingState = (): React.ReactNode => (
         <Box mt="100px">
@@ -53,6 +53,13 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ onClose }) => {
         />
     );
 
+    const renderErrorMessage = (): React.ReactNode => (
+        <GenerateScriptPlaceholderContent
+            message={videoScriptErrorMessage}
+            icon={IconName.WARNING}
+        />
+    );
+
     const renderScripts = (): React.ReactNode => (
         <>
             {videoScripts.map((videoScript, index) => (
@@ -65,6 +72,9 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ onClose }) => {
         if (dataStatus === DataStatus.PENDING) {
             return renderLoadingState();
         }
+        if (videoScriptErrorMessage) {
+            return renderErrorMessage();
+        }
         if (videoScripts.length === EMPTY_VALUE) {
             return renderEmptyState();
         }

diff --git a/frontend/src/bundles/home/components/video-card/styles.module.css b/frontend/src/bundles/home/components/video-card/styles.module.css
@@ -42,3 +42,9 @@
     border-radius: 4px;
     padding: 2px 8px;
 }
+
+.card-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/frontend/src/bundles/home/components/video-card/video-card.tsx b/frontend/src/bundles/home/components/video-card/video-card.tsx
@@ -182,7 +182,11 @@ const VideoCard: React.FC<Properties> = ({
             </Box>
 
             <Box padding="7px 10px 5px 5px">
-                <Text variant="button" color="typography.900">
+                <Text
+                    variant="button"
+                    color="typography.900"
+                    className={styles['card-title']}
+                >
                     {name}
                 </Text>
                 <Flex justify="space-between">