chore: update submodule and add AiChatModal export

- Updated submodule reference for autokitteh.
- Added export for AiChatModal in modals index.
- Replaced ChatbotIframe with AiChatModal in AiLandingPage component.
- Introduced aiChat enum value in modal enum.

Author: RonenMars

src/assets/index.css

@@ -139,6 +139,21 @@ a {
 	animation-play-state: running;
 }
 
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in {
+	animation: fadeIn 0.3s ease-out forwards;
+}
+
 ul {
 	font-size: 15px;
 	@apply ml-6;

src/autokitteh

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { ModalName } from "@enums/components";
+
+import { Button } from "@components/atoms";
+import { Modal } from "@components/molecules";
+import { ChatbotIframe } from "@components/organisms/chatbotIframe/chatbotIframe";
+
+type AiChatModalProps = {
+	isOpen: boolean;
+	onClose: () => void;
+	onConnect?: () => void;
+};
+
+export const AiChatModal = ({ isOpen, onClose, onConnect }: AiChatModalProps) => {
+	const { t: tAi } = useTranslation("dashboard", { keyPrefix: "ai" });
+
+	return (
+		<Modal
+			className="relative size-full border-none bg-black p-0"
+			closeButtonClass="hidden"
+			forceOpen={isOpen}
+			hideCloseButton
+			name={ModalName.aiChat}
+			onCloseCallbackOverride={onClose}
+			wrapperClass="p-2"
+		>
+			<Button
+				aria-label={tAi("modal.closeLabel")}
+				className="absolute right-3 top-3 z-10 bg-transparent p-1.5 hover:bg-gray-700 sm:right-6 sm:top-6"
+				onClick={onClose}
+			>
+				<svg
+					className="size-4 text-white sm:size-5"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} />
+				</svg>
+			</Button>
+			<ChatbotIframe
+				className="size-full"
+				hideCloseButton
+				onConnect={onConnect}
+				padded
+				title={tAi("modal.assistantTitle")}
+			/>
+		</Modal>
+	);
+};

src/components/organisms/modals/aiChatModal.tsx

@@ -1,3 +1,4 @@
+export { AiChatModal } from "@components/organisms/modals/aiChatModal";
 export { DeleteProjectModal } from "@components/organisms/modals/deleteProjectModal";
 export { ImportProjectModal } from "@components/organisms/modals/importProjectModal";
 export { NewProjectModal } from "@components/organisms/modals/newProjectModal";

src/components/organisms/modals/index.ts

@@ -13,7 +13,7 @@ import { cn, navigateToProject } from "@src/utilities";
 
 import { AiTextArea, Button, Loader, Typography } from "@components/atoms";
 import { ImportProjectModal, NewProjectModal } from "@components/organisms";
-import { ChatbotIframe } from "@components/organisms/chatbotIframe/chatbotIframe";
+import { AiChatModal } from "@components/organisms/modals";
 
 const pillsPerPage = 5;
 
@@ -256,52 +256,7 @@ export const AiLandingPage = () => {
 				</main>
 				<NewProjectModal />
 				<ImportProjectModal />
-				{isModalOpen ? (
-					<div className="fixed inset-0 z-[99] flex items-center justify-center bg-black/60 p-2 sm:p-4">
-						<div className="relative h-[95vh] w-full bg-black sm:h-[90vh] sm:w-[90vw] md:h-[85vh] md:w-[85vw]">
-							<Button
-								aria-label={tAi("modal.closeLabel")}
-								className="absolute right-3 top-3 z-10 bg-transparent p-1.5 hover:bg-gray-200 sm:right-6 sm:top-6"
-								onClick={handleCloseModal}
-							>
-								<svg
-									className="size-4 text-gray-600 sm:size-5"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M6 18L18 6M6 6l12 12"
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-									/>
-								</svg>
-							</Button>
-							<ChatbotIframe
-								className="size-full"
-								hideCloseButton
-								onConnect={handleIframeConnect}
-								padded
-								title={tAi("modal.assistantTitle")}
-							/>
-						</div>
-					</div>
-				) : null}
-
-				<style>{`
-				@keyframes fadeIn {
-					from {
-						opacity: 0;
-						transform: translateY(-10px);
-					}
-					to {
-						opacity: 1;
-						transform: translateY(0);
-					}
-				}
-			`}</style>
+				<AiChatModal isOpen={isModalOpen} onClose={handleCloseModal} onConnect={handleIframeConnect} />
 			</div>
 		</div>
 	);

src/components/pages/aiLandingPage.tsx

@@ -1,4 +1,5 @@
 export enum ModalName {
+	aiChat = "aiChat",
 	addConnection = "addConnection",
 	editConnection = "editConnection",
 	addFile = "addFile",