@elyx-code/editor-ui 0.0.2

package/src/components/EntityDialogSectionHeader.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { Tooltip as MuiTooltip, IconButton } from '@mui/material';
+
+const EntityDialogSectionHeader: React.FC<{
+	title: string;
+	subtitle: string;
+	hideShowSuffix?: string;
+	open?: boolean;
+	onToggle?: () => void;
+	headerEndIcon?: React.ReactNode;
+	headerStartIcon?: React.ReactNode;
+	expandIcon?: React.ReactNode;
+	expandable?: boolean;
+}> = ({
+	title,
+	subtitle,
+	hideShowSuffix,
+	open,
+	onToggle,
+	headerEndIcon,
+	headerStartIcon,
+	expandIcon,
+	expandable = true,
+}) => {
+	if (!expandable) {
+		return (
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					width: '100%',
+					padding: '20px 0',
+					justifyContent: 'space-between',
+					paddingRight: 40,
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						marginLeft: !headerStartIcon ? 80 : 0,
+					}}
+				>
+					{!!headerStartIcon ? (
+						<div
+							style={{
+								width: 80,
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							}}
+						>
+							{headerStartIcon}
+						</div>
+					) : null}
+
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: 4,
+							alignItems: 'flex-start',
+						}}
+					>
+						<h2
+							style={{
+								margin: 0,
+								fontSize: 16,
+								fontWeight: 400,
+								color: 'black',
+								textAlign: 'left',
+							}}
+						>
+							{title}
+						</h2>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+								textAlign: 'left',
+							}}
+						>
+							{subtitle}
+						</p>
+					</div>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 12,
+					}}
+				>
+					{headerEndIcon}
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			onClick={() => onToggle()}
+			style={{
+				width: '100%',
+				padding: '20px 0',
+				cursor: 'pointer',
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					width: '100%',
+					justifyContent: 'space-between',
+					paddingRight: 40,
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						marginLeft: !headerStartIcon ? 80 : 0,
+					}}
+				>
+					{!!headerStartIcon ? (
+						<div
+							style={{
+								width: 80,
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							}}
+						>
+							{headerStartIcon}
+						</div>
+					) : null}
+
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: 4,
+							alignItems: 'flex-start',
+						}}
+					>
+						<h2
+							style={{
+								margin: 0,
+								fontSize: 16,
+								fontWeight: 400,
+								color: 'black',
+								textAlign: 'left',
+							}}
+						>
+							{title}
+						</h2>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+								textAlign: 'left',
+							}}
+						>
+							{subtitle}
+						</p>
+					</div>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 12,
+					}}
+				>
+					{headerEndIcon}
+					<MuiTooltip
+						placement='bottom'
+						enterDelay={300}
+						leaveDelay={200}
+						arrow
+						title={`${open ? 'Hide' : 'Show'} ${hideShowSuffix || 'section'}`}
+					>
+						<IconButton
+							id='collapse-entity-metadata-section-button'
+							aria-label='collapse'
+							size='small'
+							// color='primary'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								e.stopPropagation();
+								onToggle?.();
+							}}
+						>
+							{/* Add rotation class to chevron if it is open */}
+							{expandIcon || (
+								<i
+									className={`search-statement-dialog__collapse_section-icon fa-regular fa-chevron-down ${
+										open ? 'rotate-180' : ''
+									}`}
+								/>
+							)}
+						</IconButton>
+					</MuiTooltip>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default EntityDialogSectionHeader;

package/src/components/GalleryAddExternalIntegrationInfoDialog.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import SmallDialog from '../lib/dialog/SmallDialog';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { envConfig } from '../config';
+import { useWorkspaceStore } from '../store/workspace';
+
+export default function GalleryAddExternalIntegrationInfoDialog() {
+	const { providerKey } = useParams<{ providerKey: string }>();
+	const navigate = useNavigate();
+	const location = useLocation();
+	const providerName = (location.state as any)?.providerName || providerKey;
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	return (
+		<SmallDialog
+			overlayStyle={{ zIndex: 2 }}
+			style={{ width: '500px', minHeight: 'auto' }}
+			onClose={() => navigate(`/ws/${activeWorkspace?.slug}/gallery`)}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					justifyContent: 'space-between',
+				}}
+			>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							marginBottom: '20px',
+						}}
+					>
+						<button
+							className='dialog_back_button'
+							onClick={() => navigate(`/ws/${activeWorkspace?.slug}/gallery`)}
+						>
+							<i className='fa-solid fa-arrow-left' />
+						</button>
+						<h2
+							style={{
+								margin: 0,
+								fontWeight: 500,
+								width: '100%',
+								textAlign: 'center',
+								marginRight: '26px',
+							}}
+						>
+							Add {providerName} to your project
+						</h2>
+					</div>
+
+					<div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center', marginBottom: 20 }}>
+						<img
+							src={`${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${providerKey}.svg`}
+							alt={providerKey}
+							style={{ width: 60, height: 60, objectFit: 'contain' }}
+						/>
+					</div>
+					<p
+						style={{
+							color: 'rgb(0, 0, 0, 0.87)',
+							fontSize: 14,
+							textAlign: 'center',
+							marginBottom: '10px'
+						}}
+					>
+						To add a feature from the market place to one of your projects
+					</p>
+					<p
+						style={{
+							color: 'rgb(0, 0, 0, 0.87)',
+							fontSize: 14,
+							textAlign: 'center',
+						}}
+					>
+						Navigate to the project, then simply search for their operations in
+						the canvas an add them!
+					</p>
+				</div>
+			</div>
+		</SmallDialog>
+	);
+}

package/src/components/GenerateProjectStartingLogicPromptDialog.tsx

@@ -0,0 +1,281 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import SmallDialog from '../lib/dialog/SmallDialog';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getAccessToken, getRefreshToken } from '../auth';
+import TextArea from '../lib/text-area/TextArea';
+import Tooltip from '../lib/tooltip/Tooltip';
+import { IComponentLifecycleProps } from '../utils/react';
+import { EditorService } from '../services/editor';
+import { ILiveMessageDTO, LiveMessageEventType } from '@elyx-code/definitions';
+import { ProjectState } from '@elyx-code/project-logic-tree';
+import { Logger } from '@elyx-code/common-ts-utils';
+import Button from '../lib/button/Button';
+
+export interface IGenerateProjectStartingLogicPromptDialogProps
+	extends IComponentLifecycleProps {
+	project: EditorService;
+	ready: boolean
+}
+
+export const DEMO_USER_PROMPT_1 =
+	'Develop a basic task management application to test the capabilities and integration of a new tech stack. The app will allow users to create, view, update, and delete tasks.';
+export const DEMO_USER_PROMPT_2 =
+	"A simple endpoint to act as a webhook for Jira automations. When the endpoint is called, it will send me a SLACK message. You can assume that I will add the SLACK API token to the headers of any API call and that I will add the endpoint you provide to the Jira automation. I would prefer not to have any state on the app, so DON'T create any databases.";
+export const DEMO_USER_PROMPT_3 = `A URL shortener. Users can give us long URLs and get short one in return which redirects any traffic behind the scenes to the long one.
+
+We need to:
+Have an endpoint to register URLS that returns a short URL that will from that moment on redirect to the user given one.
+The endpoint to register a URL should a POST endpoint and take a URL in the body of the request.
+Then store it in a relational db where the primary key is a short unique id of some sort.
+
+We also need a general endpoint with an empty path, so the root of the current environment domain, as a GET endpoint.
+It will have a path parameter which is a short id that makes this URL unique.
+We will use the short id from the path parameter to look up the database, find the matching primary key row and get the full URL, then redirect with the headers of the return statement of the endpoint handler so the HTTP protocols do the redirect.`;
+
+export const DEMO_USER_PROMPT_4 =
+	'Create an HTTP endpoint with the path "/time" that when called with a GET request returns the current server time in ISO 8601 format.';
+export const DEMO_USER_PROMPT_5 =
+	'Send me an email to "herrerocontact@gmail.com" once the project publishes successfully. The email should have the subject "Project Published" and the body should read "The project has been published successfully at [current date and time]."';
+export const DEMO_USER_PROMPT_6 =
+	'Send me an email, every morning at 8 AM, to "herrerocontact@gmail.com" with the subject "Daily joke" and the body containing a different joke everyday generated by AI.';
+
+export const DEMO_USER_PROMPT_7 = `I want a simple test of Elyx's SQL capabilities. Can you please create a database, then a table for it caller "User" with columns "id" (primary key) and "name" and unique "email". Then, globally, we create a search to get a user by their email, then loop over the results (even if it is one, or none found). I also want a separate global variable-declaration to instanciate a new user which then saves it. It is ok if none of this is connected to anything. I will test it manually in the canvas.\nKeep it as minimal as possible.`;
+
+
+export default function GenerateProjectStartingLogicPromptDialog(
+	props: IGenerateProjectStartingLogicPromptDialogProps
+) {
+	const [isGenerating, setIsGenerating] = useState<boolean>(false);
+	const [description, setDescription] = useState<string>('');
+	const [error, setError] = useState<string | null>(null);
+	const { id: projectId } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+
+	const server = props.project?.socket;
+
+	const beginProjectStartingLogicGeneration = async () => {
+		setIsGenerating(true);
+
+		const [accessToken, refreshToken] = await Promise.all([
+			getAccessToken(),
+			getRefreshToken(),
+		]);
+
+		server?.send({
+			action: 'start-project-starting-logic-generation',
+			actionId: ProjectState.UUID.uuid(),
+			userAuthor: ProjectState.sessionAuthor,
+			agentAuthor: null,
+			emittedAt: new Date().toISOString(),
+			channel:  props.project.PROJECT_NOTIFICATIONS_CHANNEL,
+			sessionId:  props.project.sessionId as string,
+			authorization: 'Bearer ' + accessToken,
+			refreshToken: refreshToken,
+			type: LiveMessageEventType.Post,
+			workspaceId: props.project.activeWorkspace?.id || null,
+			event: null,
+			message: null,
+			payload: {
+				projectId,
+				prompt: description,
+				project: props.project.logic.toShallowJSON(),
+				branchId: props.project.branchHead?.branchId,
+				triggeredBy: {
+					token: 'Bearer ' + accessToken,
+				},
+			},
+		});
+	};
+
+	// stable message handler
+	const handleIncomingMessage = useCallback(
+		(message: ILiveMessageDTO) => {
+			Logger.log('message', message);
+
+			switch (message.event) {
+				case 'generate-starting-logic-start':
+					Logger.warn('generate-starting-logic-start', message);
+					break;
+				case 'prompt-validation':
+					if (!message.payload.isUserProvidedPromptValid) {
+						setError(
+							'The prompt is not valid. Please describe a valid software project that you want to build.'
+						);
+						setIsGenerating(false);
+					}
+					break;
+				default:
+					if (message.message === 'Internal Server Error') {
+						setError(
+							'An error occurred while processing your request. Please try again later.'
+						);
+						setIsGenerating(false);
+					}
+			}
+		},
+		[navigate, projectId]
+	);
+
+	useEffect(() => {
+		// subscribe
+		server?.on('message', handleIncomingMessage);
+
+		// cleanup: unsubscribe the same callback
+		return () => {
+			server?.off('message', handleIncomingMessage);
+		};
+	}, [server, handleIncomingMessage]);
+
+	return (
+		<SmallDialog
+			onClose={() => {
+				navigate(props.project?.editorBasePath);
+			}}
+			overlayStyle={{ zIndex: 2 }}
+			style={{ width: '500px' }}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					justifyContent: 'space-between',
+				}}
+			>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							marginBottom: '10px',
+						}}
+					>
+						<button
+							className='dialog_back_button'
+							disabled={isGenerating}
+							onClick={() => navigate(props.project?.editorBasePath)}
+						>
+							<i className='fa-solid fa-arrow-left' />
+						</button>
+						<h2
+							style={{
+								margin: 0,
+								fontWeight: 500,
+								width: '100%',
+								textAlign: 'center',
+								marginRight: '26px',
+							}}
+						>
+							Auto-generate project logic
+						</h2>
+					</div>
+
+					<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+						<span style={{ textAlign: 'center', marginTop: 6, width: '100%' }}>
+							<p style={{ margin: 0, color: 'rgba(0,0,0,0.54)', fontSize: 14 }}>
+								Let the{' '}
+								<b style={{ color: 'var(--color-main-primary)' }}>
+									artificial intelligence
+								</b>{' '}
+								generate the logic for you.
+							</p>
+						</span>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+								textAlign: 'center',
+							}}
+						>
+							Describe in as much detail as possible what you want to achieve
+							with your project.
+							<br />
+							What do you want to build, and how should it work?
+						</p>
+
+						<TextArea
+							name='description'
+							label='Project description'
+							disabled={!props.project?.logic || isGenerating || !props.ready}
+							variant='filled'
+							inputProps={{ className: 'project-description-field' }}
+							value={description}
+							error={!!error}
+							helperText={error}
+							onInput={(value: string) => {
+								setDescription(value);
+							}}
+						/>
+					</div>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						justifyContent: 'center',
+						flexDirection: 'column',
+						gap: 20,
+						alignItems: 'center',
+					}}
+				>
+					<div
+						style={{
+							display: 'flex',
+							justifyContent: 'center',
+							flexDirection: 'column',
+							gap: 14,
+							alignItems: 'center',
+						}}
+					>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+								textAlign: 'center',
+							}}
+						>
+							Click to start generating. It might take a few minutes.
+							<br />
+							You can follow the progress live.
+						</p>
+						<Button
+							size='medium'
+							// loading={isGenerating}
+							variant='contained'
+							disabled={!description || isGenerating || !props.ready}
+							id='generate-project-starting-logic-button'
+							onClick={beginProjectStartingLogicGeneration}
+						>
+							Generate
+						</Button>
+						{!description && (
+							<Tooltip
+								anchorQuerySelector='#generate-project-starting-logic-button'
+								placement='bottom'
+							>
+								Please provide a description for your project.
+							</Tooltip>
+						)}
+					</div>
+					<Button
+						size='small'
+						variant='outlined'
+						// loading={isGenerating}
+						disabled={isGenerating}
+						id='skip-starting-project-logic-button'
+						onClick={() => {
+							navigate(props.project?.editorBasePath);
+						}}
+						// style={{
+						// 	marginTop: 16,
+						// }}
+					>
+						Skip
+					</Button>
+				</div>
+			</div>
+		</SmallDialog>
+	);
+}

package/src/components/LegacyRouteRedirector.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { getCurrentUserOrLogoutRedirect } from '../auth';
+import Loader from '../lib/loader/Loader'; // Assuming you have a standard loader
+
+const LegacyRouteRedirector: React.FC = () => {
+	const location = useLocation();
+	const [defaultWorkspaceSlug, setDefaultWorkspaceSlug] = useState<string | null>(
+		null,
+	);
+
+	useEffect(() => {
+		const fetchAndRedirect = async () => {
+			const user = await getCurrentUserOrLogoutRedirect();
+
+			// Assuming your legacy user object has the workspace info attached
+			const workspaceId = user?.workspace?.slug || user?.workspace?.id || user?.workspaces?.[0]?.id;
+
+			if (workspaceId) {
+				setDefaultWorkspaceSlug(workspaceId);
+			} else {
+				// Fallback: If for some reason they don't have one, maybe redirect to a creation page or auth
+				window.location.replace('/auth/sign-in');
+			}
+		};
+
+		fetchAndRedirect();
+	}, []);
+
+	if (!defaultWorkspaceSlug) {
+		return (
+			<div
+				style={{
+					display: 'flex',
+					height: '100vh',
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}
+			>
+				<Loader size={60} color='primary' />
+			</div>
+		);
+	}
+
+	// Redirect to the new workspace route, preserving the path and query params
+	// Example: /editor/123 -> /ws/abc/editor/123
+	return (
+		<Navigate
+			to={`/ws/${defaultWorkspaceSlug}${location.pathname}${location.search}`}
+			replace
+		/>
+	);
+};
+
+export default LegacyRouteRedirector;

package/src/components/ProPlanChip.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Chip } from '@mui/material';
+
+export const ProPlanChip: React.FC<{ disabled?: boolean }> = ({ disabled }) => (
+	<Chip
+		// sensible defaults, individually overridable
+		size='small'
+		color='primary'
+		variant='filled'
+		className='card-tag'
+		style={disabled ? { filter: 'grayscale(100%)' } : undefined}
+		label={
+			// Crown and "Pro" label
+			<span>
+				<i
+					className='fa-solid fa-crown'
+					style={{ marginRight: 4, color: '#FFD700' }}
+				></i>
+				Pro
+			</span>
+		}
+	/>
+);