feat: ai chat modal maximized in the welcome screen (#1447)

Author: RonenMars

.commitlintrc.json

@@ -1,6 +1,7 @@
 {
 	"extends": ["@commitlint/config-conventional"],
 	"rules": {
-		"type-enum": [2, "always", ["ci", "chore", "docs", "feat", "fix", "perf", "refactor", "revert", "test"]]
+		"type-enum": [2, "always", ["ci", "chore", "docs", "feat", "fix", "perf", "refactor", "revert", "test"]],
+		"body-max-line-length": [2, "always", 500]
 	}
 }

.github/workflows/build_test_and_release.yml

@@ -183,6 +183,7 @@ jobs:
         run: |
           git submodule update --remote
           npm run type-check
+          npm run type-check
           npm run lint:ci
           npm run build
           echo '!dist' >> .gitignore

e2e/project/aiChat.spec.ts

@@ -0,0 +1,145 @@
+import { expect, test } from "../fixtures";
+import { initialPillsCount } from "@constants/pages/aiWelcomePage.constants";
+
+test.describe("AI Chat and Iframe Communication Suite", () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto("/ai");
+		await page.waitForLoadState("networkidle");
+	});
+
+	test("AI landing page loads correctly with all elements", async ({ page }) => {
+		await expect(page.getByRole("heading", { name: /Build AI Agents/i })).toBeVisible();
+		await expect(page.getByRole("heading", { name: /Create workflows/i })).toBeVisible();
+
+		await expect(page.getByRole("button", { name: "Start from Template" })).toBeVisible();
+		await expect(page.getByRole("button", { name: "New Project From Scratch" })).toBeVisible();
+
+		const textarea = page.locator('textarea[name="message"]');
+		await expect(textarea).toBeVisible();
+	});
+
+	test("Suggestion pills are visible and clickable", async ({ page }) => {
+		const pills = page.locator("button[data-testid^='suggestion-pill-']");
+		await expect(pills.first()).toBeVisible();
+
+		await pills.first().click();
+
+		const textarea = page.locator('textarea[name="message"]');
+		await expect(textarea).toBeFocused();
+	});
+
+	test("More button loads additional suggestion pills", async ({ page }) => {
+		const initialPills = page.locator("button[data-testid^='suggestion-pill-']");
+		const initialPillsCountActual = await initialPills.count();
+		expect(initialPillsCountActual).toBe(initialPillsCount);
+
+		const initialPillsTitles: string[] = [];
+		for (let i = 0; i < initialPillsCountActual; i++) {
+			const pillText = await initialPills.nth(i).textContent();
+			if (pillText) {
+				initialPillsTitles.push(pillText.trim());
+			}
+		}
+
+		expect(initialPillsTitles).toHaveLength(initialPillsCount);
+		expect(initialPillsTitles.every((title) => title && title.length > 0)).toBe(true);
+
+		const moreButton = page.getByRole("button", { name: "More", exact: true });
+		if (await moreButton.isVisible()) {
+			await moreButton.click();
+
+			await page.waitForTimeout(300);
+
+			const allVisiblePills = page.locator("button[data-testid^='suggestion-pill-']");
+			const allPillsCount = await allVisiblePills.count();
+			expect(allPillsCount).toBeGreaterThan(initialPillsCount);
+
+			const allPillsTitles: string[] = [];
+			for (let i = 0; i < allPillsCount; i++) {
+				const pillText = await allVisiblePills.nth(i).textContent();
+				if (pillText) {
+					allPillsTitles.push(pillText.trim());
+				}
+			}
+
+			expect(allPillsTitles).toHaveLength(allPillsCount);
+			expect(allPillsTitles.every((title) => title && title.length > 0)).toBe(true);
+
+			const initialPillsFromExpanded = allPillsTitles.slice(0, initialPillsCount);
+			expect(initialPillsFromExpanded).toEqual(initialPillsTitles);
+
+			await expect(moreButton).not.toBeVisible();
+		}
+	});
+
+	test("Submit message opens AI chat modal", async ({ page }) => {
+		const textarea = page.locator('textarea[name="message"]');
+		await textarea.fill("Create a GitHub webhook automation");
+
+		await page.keyboard.press("Enter");
+
+		const modal = page.locator('[class*="modal"], [role="dialog"], [data-testid="ai-chat-modal"]');
+		await expect(modal.first()).toBeVisible({ timeout: 10000 });
+	});
+
+	test("Empty message shows validation error", async ({ page }) => {
+		const textarea = page.locator('textarea[name="message"]');
+		await textarea.focus();
+		await page.keyboard.press("Enter");
+
+		const errorMessage = page.getByText("Please enter a message");
+		await expect(errorMessage).toBeVisible({ timeout: 5000 });
+	});
+
+	test("Textarea clears validation error when typing", async ({ page }) => {
+		const textarea = page.locator('textarea[name="message"]');
+		await textarea.focus();
+		await page.keyboard.press("Enter");
+
+		const errorMessage = page.getByText("Please enter a message");
+		await expect(errorMessage).toBeVisible({ timeout: 5000 });
+
+		await textarea.fill("Test message");
+
+		await expect(errorMessage).not.toBeVisible({ timeout: 3000 });
+	});
+
+	test("Navigation buttons work correctly", async ({ page }) => {
+		const templateButton = page.getByRole("button", { name: "Start from Template" });
+		await templateButton.click();
+		await expect(page).toHaveURL(/templates-library/);
+
+		await page.goto("/ai");
+
+		const learnMoreButton = page.getByRole("button", { name: /Learn more/i });
+		if (await learnMoreButton.isVisible()) {
+			await learnMoreButton.click();
+			await expect(page).toHaveURL(/intro/);
+		}
+	});
+});
+
+test.describe("AI Chat Modal Iframe Behavior", () => {
+	test("Modal can be closed", async ({ page }) => {
+		await page.goto("/ai");
+		await page.waitForLoadState("networkidle");
+
+		const textarea = page.locator('textarea[name="message"]');
+		await textarea.fill("Test automation");
+		await page.keyboard.press("Enter");
+
+		const modal = page.locator('[class*="modal"], [role="dialog"]');
+		await expect(modal.first()).toBeVisible({ timeout: 10000 });
+
+		const closeButton = page.locator(
+			'[aria-label*="close" i], [class*="close"], button:has-text("×"), button:has-text("Close")'
+		);
+		if (await closeButton.first().isVisible()) {
+			await closeButton.first().click();
+			await expect(modal.first()).not.toBeVisible({ timeout: 5000 });
+		} else {
+			await page.keyboard.press("Escape");
+			await page.waitForTimeout(500);
+		}
+	});
+});

package.json

@@ -26,6 +26,8 @@
 		"test:e2e:rate-limited:serial": "E2E_RATE_LIMIT_DELAY=2000 playwright test --workers=1 --project=Chrome",
 		"test:e2e:by-name": "node scripts/runTestByName.mjs",
 		"test:e2e:by-name:serial:chrome": "node scripts/runTestByName.mjs --workers=1 --project=Chrome",
+		"test:e2e:ui:file": "playwright test --ui --",
+		"test:e2e:ui:dir": "playwright test --ui --",
 		"test:e2e:serial": "playwright test --project=Chrome --workers=1",
 		"test:e2e:chrome": "playwright test --project=Chrome --reporter=line",
 		"test:e2e:firefox": "playwright test --project=Firefox --reporter=line",
@@ -215,4 +217,4 @@
 		"rimraf": "^4.0.0",
 		"micromatch": "^4.0.8"
 	}
-}
+}

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

@@ -58,7 +58,7 @@ export const Modal = ({
 					: buttons.length >= 1
 						? buttons.length - 1
 						: undefined;
-			if (!focusTabIndex || focusTabIndex < 0) return;
+			if (focusTabIndex === undefined || focusTabIndex < 0) return;
 			(buttons[focusTabIndex] as HTMLElement).focus();
 
 			const focusableElements = modalRef.current.querySelectorAll(

src/components/molecules/modal.tsx

@@ -10,10 +10,16 @@ import { ChatbotToolbar } from "./chatbotToolbar";
 import { iframeCommService } from "@services/iframeComm.service";
 import { LoggerService } from "@services/logger.service";
 import { aiChatbotUrl, defaultOpenedProjectFile, descopeProjectId, isDevelopment, namespaces } from "@src/constants";
-import { EventListenerName } from "@src/enums";
+import { EventListenerName, ModalName } from "@src/enums";
 import { triggerEvent, useChatbotIframeConnection, useEventListener } from "@src/hooks";
 import { ChatbotIframeProps } from "@src/interfaces/components";
-import { useOrganizationStore, useProjectStore, useSharedBetweenProjectsStore, useToastStore } from "@src/store";
+import {
+	useModalStore,
+	useOrganizationStore,
+	useProjectStore,
+	useSharedBetweenProjectsStore,
+	useToastStore,
+} from "@src/store";
 import { MessageTypes } from "@src/types/iframeCommunication.type";
 import {
 	cn,
@@ -199,12 +205,27 @@ export const ChatbotIframe = ({
 			}
 		});
 
+		const closeProjectCreationModalListener = iframeCommService.addListener(
+			MessageTypes.CLOSE_PROJECT_CREATION_MODAL,
+			() => {
+				try {
+					const currentPath = location.pathname;
+					if (currentPath === "/welcome" || currentPath === "/ai") {
+						useModalStore.getState().closeModal(ModalName.aiChat);
+					}
+				} catch (error) {
+					console.error(namespaces.chatbot, t("errors.failedToCloseAiChatModal", { error }));
+				}
+			}
+		);
+
 		return () => {
 			LoggerService.debug(namespaces.chatbot, t("debug.cleanupListeners"));
 
 			iframeCommService.removeListener(directNavigationListener);
 			iframeCommService.removeListener(directEventNavigationListener);
 			iframeCommService.removeListener(varUpdatedListener);
+			iframeCommService.removeListener(closeProjectCreationModalListener);
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

src/components/organisms/chatbotIframe/chatbotIframe.tsx

@@ -1,3 +1,4 @@
 export { ChatbotIframe } from "@components/organisms/chatbotIframe/chatbotIframe";
 export { ChatbotToolbar } from "@components/organisms/chatbotIframe/chatbotToolbar";
 export { ChatbotLoadingStates } from "@components/organisms/chatbotIframe/chatbotLoadingStates";
+export { isVarUpdatedMessage } from "@utilities/typeGuards/iframeCommunication.typeGuards";

src/components/organisms/chatbotIframe/index.ts

@@ -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>
+	);
+};