Merge pull request #225 from BinaryStudioAcademy/task/OV-166-add-ai-i…

…con-to-script-menu OV-166: Add AI icon to script menu
BinaryStudioAcademy · Sep 11, 2024 · 0d490c0 · 0d490c0
2 parents 2d9f332 + c79bbad
commit 0d490c0
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 1 deletion.
diff --git a/frontend/src/bundles/common/icons/custom-icons/custom-icons.ts b/frontend/src/bundles/common/icons/custom-icons/custom-icons.ts
@@ -0,0 +1 @@
+export { OpenAi } from './open-ai.js';
diff --git a/frontend/src/bundles/common/icons/custom-icons/open-ai.tsx b/frontend/src/bundles/common/icons/custom-icons/open-ai.tsx
@@ -0,0 +1,36 @@
+import { createIcon } from '@chakra-ui/react';
+
+const OpenAi = createIcon({
+    displayName: 'OpenAi',
+    viewBox: '0 0 24 20',
+    path: (
+        <>
+            <path
+                d="M11.003 19.7191C8.94032 19.7191 7.10782 18.3929 6.46922 16.4343L6.23898 15.0894V10.6317C6.23898 10.4087 6.35358 10.2108 6.54527 10.0962L10.1342 8.0281V14.1539H10.1352V14.4446L13.7679 16.5427C14.1191 16.746 14.5017 16.885 14.8979 16.9576L14.5482 18.1439C13.646 19.1523 12.3553 19.7253 11.003 19.7191ZM11.003 18.495L10.9968 18.4887C11.8271 18.4887 12.6251 18.2022 13.2637 17.672C13.2376 17.6595 13.1866 17.6272 13.1491 17.6084L9.39348 15.4457C9.20179 15.3374 9.0872 15.1332 9.0872 14.9102V9.83365L7.4714 10.765V14.9613C7.47036 16.9104 9.05075 18.4919 11.003 18.495Z"
+                fill="currentColor"
+            />
+            <path
+                d="M19.6565 15.8742C18.6252 17.6605 16.5604 18.5844 14.545 18.1582L13.2651 17.6851L9.40459 15.4563C9.21152 15.3448 9.0974 15.1466 9.094 14.9233L9.09745 10.7811L14.4025 13.844L14.4031 13.8431L14.6548 13.9885L18.2882 11.8916C18.6399 11.6891 18.9515 11.4272 19.2125 11.1204L20.065 12.0164C20.4872 13.3019 20.3381 14.7063 19.6565 15.8742ZM18.5965 15.2621L18.5879 15.2644C19.0031 14.5454 19.154 13.711 19.014 12.8929C18.9902 12.9092 18.9367 12.9372 18.9017 12.9603L15.1509 15.1314C14.9613 15.2432 14.7271 15.2404 14.5341 15.1289L10.1376 12.5906L10.1363 14.4556L13.7704 16.5538C15.4579 17.5292 17.6176 16.9513 18.5965 15.2621Z"
+                fill="currentColor"
+            />
+            <path
+                d="M20.6535 6.45762C21.6849 8.24397 21.4526 10.4941 20.0758 12.0264L19.0261 12.8982L15.1656 15.1271C14.9725 15.2386 14.7438 15.2383 14.5487 15.1296L10.9633 13.0555L16.2684 9.99264L16.2678 9.99174L16.5196 9.84641L16.5203 5.65135C16.5208 5.2455 16.4498 4.84469 16.3146 4.46527L17.5168 4.175C18.8412 4.45209 19.9828 5.28343 20.6535 6.45762ZM19.5934 7.06966L19.5911 7.0782C19.176 6.35915 18.5289 5.8113 17.7504 5.52338C17.7526 5.55218 17.7501 5.61254 17.7526 5.65439L17.7574 9.98821C17.7595 10.2084 17.6399 10.4097 17.4469 10.5212L13.0504 13.0595L14.6649 13.9931L18.299 11.895C19.9875 10.9213 20.5669 8.76195 19.5934 7.06966Z"
+                fill="currentColor"
+            />
+            <path
+                d="M12.997 0.885793C15.0597 0.885793 16.8922 2.21197 17.5308 4.17051L17.761 5.51545V9.97321C17.761 10.1961 17.6464 10.3941 17.4547 10.5087L13.8658 12.5768L13.8658 6.45096H13.8648V6.16031L10.2321 4.06217C9.88087 3.85881 9.49827 3.71987 9.10209 3.64725L9.45181 2.46096C10.354 1.45252 11.6447 0.879542 12.997 0.885793ZM12.997 2.10988L13.0032 2.11613C12.1729 2.11613 11.3749 2.40262 10.7363 2.93288C10.7624 2.94538 10.8134 2.97768 10.8509 2.99643L14.6065 5.15916C14.7982 5.2675 14.9128 5.47169 14.9128 5.69463L14.9128 10.7712L16.5286 9.83986V5.64359C16.5296 3.69443 14.9493 2.11301 12.997 2.10988Z"
+                fill="currentColor"
+            />
+            <path
+                d="M4.34346 4.73079C5.37481 2.94443 7.43956 2.02053 9.45501 2.44675L10.7349 2.91983L14.5954 5.14871C14.7885 5.26018 14.9026 5.4584 14.906 5.6817L14.9026 9.82383L9.59745 6.76093L9.59693 6.76184L9.34522 6.61651L5.71184 8.71343C5.36011 8.91593 5.04849 9.17779 4.7875 9.48459L3.93501 8.58857C3.51276 7.30304 3.66193 5.89872 4.34346 4.73079ZM5.40355 5.34283L5.41209 5.34054C4.99694 6.05959 4.84604 6.89393 4.98596 7.71212C5.00981 7.69581 5.0633 7.66775 5.09829 7.64465L8.84907 5.47356C9.03874 5.36173 9.27287 5.36458 9.46595 5.47605L13.8624 8.01434L13.8637 6.14935L10.2296 4.05121C8.54214 3.07573 6.38239 3.65367 5.40355 5.34283Z"
+                fill="currentColor"
+            />
+            <path
+                d="M3.34648 14.1474C2.31513 12.361 2.54739 10.1109 3.92423 8.57861L4.97386 7.70675L8.83439 5.47787C9.02746 5.3664 9.25618 5.36668 9.45127 5.47539L13.0367 7.54944L7.73164 10.6123L7.73216 10.6132L7.48044 10.7586L7.47974 14.9536C7.47925 15.3595 7.55022 15.7603 7.68542 16.1397L6.4832 16.43C5.15877 16.1529 4.01718 15.3216 3.34648 14.1474ZM4.40657 13.5353L4.40886 13.5268C4.824 14.2458 5.47111 14.7937 6.24964 15.0816C6.24745 15.0528 6.24989 14.9924 6.24738 14.9506L6.24255 10.6168C6.24054 10.3966 6.36007 10.1953 6.55315 10.0838L10.9496 7.5455L9.33512 6.61186L5.70104 8.70999C4.0125 9.68367 3.43314 11.843 4.40657 13.5353Z"
+                fill="currentColor"
+            />
+        </>
+    ),
+});
+
+export { OpenAi };
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
@@ -17,6 +17,7 @@ import {
     faTableColumns,
 } from '@fortawesome/free-solid-svg-icons';
 
+import { OpenAi } from './custom-icons/custom-icons.js';
 import {
     backwardStepIcon,
     CircleUserIcon,
@@ -59,6 +60,7 @@ const IconName = {
     TEXT: faT,
     ADD: AddIcon,
     CLOSE: CloseIcon,
+    OPEN_AI: OpenAi,
 } as const;
 
 export { IconName };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx
@@ -3,7 +3,10 @@ import {
     CloseButton,
     Flex,
     Heading,
+    Icon,
+    IconButton,
 } from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
 
 import styles from './styles.module.css';
 
@@ -12,13 +15,15 @@ type Properties = {
     children: React.ReactNode;
     isOpen: boolean;
     onClose: () => void;
+    onChatOpen?: () => void;
 };
 
 const MenuBody: React.FC<Properties> = ({
     title,
     children,
     isOpen,
     onClose,
+    onChatOpen,
 }) => {
     return (
         <>
@@ -30,7 +35,26 @@ const MenuBody: React.FC<Properties> = ({
                         marginBottom="30px"
                     >
                         <Heading variant="H3">{title}</Heading>
-                        <CloseButton onClick={onClose} color="background.600" />
+                        <Flex align="center">
+                            {title === 'Script' && (
+                                <IconButton
+                                    aria-label="OpenAI icon button"
+                                    icon={
+                                        <Icon
+                                            as={IconName.OPEN_AI}
+                                            boxSize={6}
+                                        />
+                                    }
+                                    variant="icon"
+                                    onClick={onChatOpen}
+                                />
+                            )}
+
+                            <CloseButton
+                                onClick={onClose}
+                                color="background.600"
+                            />
+                        </Flex>
                     </Flex>
                     <Box className={styles['menu-body-content']}>
                         {children}

diff --git a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
@@ -1,3 +1,4 @@
+import { ChatModal } from '~/bundles/chat/pages/chat-modal.js';
 import {
     FontAwesomeIcon,
     Icon,
@@ -24,6 +25,7 @@ const VideoMenu: React.FC = () => {
         content: null,
     });
     const [isOpen, setIsOpen] = useState(false);
+    const [isChatOpen, setIsChatOpen] = useState(false);
 
     const handleMenuClick = useCallback(
         (header: string, content: React.ReactNode): void => {
@@ -38,6 +40,14 @@ const VideoMenu: React.FC = () => {
         setActiveIndex(null);
     }, []);
 
+    const handleChatOpen = useCallback(() => {
+        setIsChatOpen(true);
+    }, []);
+
+    const handleChatClose = useCallback(() => {
+        setIsChatOpen(false);
+    }, []);
+
     const menuItems: MenuItem[] = [
         {
             label: 'Templates',
@@ -77,9 +87,14 @@ const VideoMenu: React.FC = () => {
                 title={activeItem.title}
                 isOpen={isOpen}
                 onClose={handleActiveItemReset}
+                onChatOpen={handleChatOpen}
             >
                 {activeItem.content}
             </MenuBody>
+            <ChatModal
+                isChatOpen={isChatOpen}
+                onModalChatClose={handleChatClose}
+            />
         </>
     );
 };