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

…4-outreachvids into task/OV-439-generate-preview-for-template
BinaryStudioAcademy · Sep 26, 2024 · f58e0d8 · f58e0d8
2 parents 6274e46 + d20cdc8
commit f58e0d8
Show file tree

Hide file tree

Showing 15 changed files with 98 additions and 57 deletions.
diff --git a/frontend/src/bundles/chat/helpers/helpers.ts b/frontend/src/bundles/chat/helpers/helpers.ts
@@ -0,0 +1 @@
+export { sanitizeJsonString } from './sanitize-json-string.js';
diff --git a/frontend/src/bundles/chat/helpers/sanitize-json-string.ts b/frontend/src/bundles/chat/helpers/sanitize-json-string.ts
@@ -0,0 +1,6 @@
+const sanitizeJsonString = (input: string): string => {
+    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,29 +1,67 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 import { MessageSender } from '~/bundles/chat/enums/enums.js';
+import { sanitizeJsonString } from '~/bundles/chat/helpers/helpers.js';
 import {
     type GenerateTextRequestDto,
     type Message,
 } from '~/bundles/chat/types/types.js';
+import {
+    EMPTY_VALUE,
+    LAST_ELEMENT_INDEX,
+} from '~/bundles/common/constants/constants.js';
 import { DataStatus } from '~/bundles/common/enums/enums.js';
-import { type ValueOf } from '~/bundles/common/types/types.js';
+import {
+    type ValueOf,
+    type VideoScript,
+} from '~/bundles/common/types/types.js';
 
 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,
 };
 
 const { reducer, actions, name } = createSlice({
     initialState,
     name: 'chat',
-    reducers: {},
+    reducers: {
+        generateVideoScript(state) {
+            const messages = state.messages.filter(
+                (message) => message.sender === MessageSender.AI,
+            );
+
+            if (!messages || messages.length === EMPTY_VALUE) {
+                return;
+            }
+
+            const lastMessage = messages.at(LAST_ELEMENT_INDEX);
+            if (!lastMessage) {
+                return;
+            }
+
+            try {
+                const sanitizedJson = sanitizeJsonString(lastMessage.text);
+                const videoScripts: VideoScript[] = JSON.parse(sanitizedJson);
+                state.videoScripts = videoScripts;
+                state.videoScriptErrorMessage = '';
+            } catch {
+                state.videoScripts = [];
+                state.videoScriptErrorMessage =
+                    'There was an error Generating the Script, please Re-Generate';
+            }
+        },
+    },
     extraReducers(builder) {
         builder.addCase(sendMessage.pending, (state) => {
             state.dataStatus = DataStatus.PENDING;
@@ -60,6 +98,8 @@ 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
@@ -3,20 +3,18 @@ import { EMPTY_VALUE } from '~/bundles/common/constants/constants.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';
-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';
 import styles from './styles.module.css';
 
-type Properties = {
-    videoScripts: VideoScript[];
-};
-
-const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
-    const { dataStatus } = useAppSelector(({ chat }) => ({
-        dataStatus: chat.dataStatus,
-    }));
+const GenerateScriptPlaceholder: React.FC = () => {
+    const { dataStatus, videoScripts, videoScriptErrorMessage } =
+        useAppSelector(({ chat }) => ({
+            dataStatus: chat.dataStatus,
+            videoScripts: chat.videoScripts,
+            videoScriptErrorMessage: chat.videoScriptErrorMessage,
+        }));
 
     const renderLoadingState = (): React.ReactNode => (
         <Box mt="100px">
@@ -31,6 +29,13 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
         />
     );
 
+    const renderErrorMessage = (): React.ReactNode => (
+        <GenerateScriptPlaceholderContent
+            message={videoScriptErrorMessage}
+            icon={IconName.WARNING}
+        />
+    );
+
     const renderScripts = (): React.ReactNode => (
         <>
             {videoScripts.map((videoScript, index) => (
@@ -43,6 +48,9 @@ const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
         if (dataStatus === DataStatus.PENDING) {
             return renderLoadingState();
         }
+        if (videoScriptErrorMessage) {
+            return renderErrorMessage();
+        }
         if (videoScripts.length === EMPTY_VALUE) {
             return renderEmptyState();
         }

diff --git a/...l/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/...l/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -10,18 +10,12 @@ 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 { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
+import { getVideoScriptMessageFromPayload } from '~/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.js';
 import {
     useAppDispatch,
     useAppSelector,
     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';
@@ -41,35 +35,15 @@ const GenerateScriptView: React.FC = () => {
             const sendMessageRequest: GenerateTextRequestDto = {
                 message: getVideoScriptMessageFromPayload(payload, messages),
             };
-            void dispatch(chatActions.sendMessage(sendMessageRequest));
+            void dispatch(chatActions.sendMessage(sendMessageRequest)).then(
+                () => {
+                    dispatch(chatActions.generateVideoScript());
+                },
+            );
         },
         [messages, dispatch],
     );
 
-    const lastGeneratedScript: VideoScript[] = useMemo(() => {
-        if (!messages || messages.length === EMPTY_VALUE) {
-            return [];
-        }
-
-        const lastMessage = messages.at(-1);
-        if (!lastMessage) {
-            return [];
-        }
-
-        try {
-            const sanitizedJson = sanitizeJsonString(lastMessage.text);
-            const videoScripts: VideoScript[] = JSON.parse(sanitizedJson);
-            return videoScripts;
-        } catch {
-            return [
-                {
-                    title: 'Scene',
-                    description: lastMessage.text,
-                },
-            ];
-        }
-    }, [messages]);
-
     return (
         <>
             <Heading className={styles['script-view-heading']} variant="H3">
@@ -94,9 +68,7 @@ const GenerateScriptView: React.FC = () => {
                             <GenerateScriptForm
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />
-                            <GenerateScriptPlaceholder
-                                videoScripts={lastGeneratedScript}
-                            />
+                            <GenerateScriptPlaceholder />
                         </HStack>
                     </TabPanel>
                 </TabPanels>

diff --git a/...plate/generate-script-message-template.ts → ...lpers/generate-script-message-template.ts b/...plate/generate-script-message-template.ts → ...lpers/generate-script-message-template.ts
diff --git a/...c/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts b/...c/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts
@@ -1,2 +1,2 @@
-export { getVideoScriptMessageFromPayload } from './generate-script-message-template/generate-script-message-template.js';
-export { sanitizeJsonString } from './sanitize-json-string/sanitize-json-string.js';
+export { getVideoScriptMessageFromPayload } from './generate-script-message-template.js';
+export { sanitizeJsonString } from './sanitize-json-string.js';
diff --git a/...mon/components/video-modal/components/video-modal-content/helpers/sanitize-json-string.ts b/...mon/components/video-modal/components/video-modal-content/helpers/sanitize-json-string.ts
@@ -0,0 +1,6 @@
+const sanitizeJsonString = (input: string): string => {
+    const match = input.match(/\[.*]/s);
+    return match ? match[0].trim() : input.trim();
+};
+
+export { sanitizeJsonString };
diff --git a/...modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts b/...modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
diff --git a/frontend/src/bundles/common/constants/constants.ts b/frontend/src/bundles/common/constants/constants.ts
@@ -1,3 +1,3 @@
 export { FPS } from './fps.constant.js';
 export { SOCKET_TRANSPORT_WEBSOCKETS } from './socket-trasnport.constants.js';
-export { EMPTY_VALUE } from 'shared';
+export { EMPTY_VALUE, LAST_ELEMENT_INDEX } from 'shared';
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">

diff --git a/shared/src/constants/constants.ts b/shared/src/constants/constants.ts
@@ -1 +1,2 @@
 export { EMPTY_VALUE } from './empty-length.constant.js';
+export { LAST_ELEMENT_INDEX } from './last-element-index.constant.js';
diff --git a/shared/src/constants/last-element-index.constant.ts b/shared/src/constants/last-element-index.constant.ts
@@ -0,0 +1,3 @@
+const LAST_ELEMENT_INDEX = -1;
+
+export { LAST_ELEMENT_INDEX };
diff --git a/shared/src/index.ts b/shared/src/index.ts
@@ -89,7 +89,7 @@ export {
     VideosApiPath,
     VideoValidationMessage,
 } from './bundles/videos/videos.js';
-export { EMPTY_VALUE } from './constants/constants.js';
+export { EMPTY_VALUE, LAST_ELEMENT_INDEX } from './constants/constants.js';
 export {
     ApiPath,
     AppEnvironment,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { sanitizeJsonString } from './sanitize-json-string.js';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { EMPTY_VALUE } from './empty-length.constant.js';
		export { LAST_ELEMENT_INDEX } from './last-element-index.constant.js';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const LAST_ELEMENT_INDEX = -1;

		export { LAST_ELEMENT_INDEX };