+
{children}
{/* Render ImageEditor when an image is being edited */}
@@ -385,5 +468,4 @@ const EditableLayoutWrapper: React.FC = ({
);
};
-export default EditableLayoutWrapper;
-
+export default EditableLayoutWrapper;
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx b/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx
index 09cbae06..ffe94f48 100644
--- a/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx
@@ -70,6 +70,7 @@ const IconsEditor = ({
if (onIconChange) {
onIconChange(newIcon, searchQuery || icon_prompt?.[0] || '');
}
+ handleClose();
};
// Handle close with animation
@@ -80,6 +81,7 @@ const IconsEditor = ({
onClose?.();
}, 300); // Match the Sheet animation duration
};
+
return (
@@ -145,7 +147,7 @@ const IconsEditor = ({
className="w-12 h-12 cursor-pointer group relative rounded-lg overflow-hidden hover:bg-gray-100 p-2 transition-colors"
>
})
diff --git a/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx b/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
index 6de138e1..accbe69f 100644
--- a/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
+++ b/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
@@ -105,7 +105,8 @@ const compileCustomLayout = (layoutCode: string, React: any, z: any) => {
`
const z = _z;
// Expose commonly used Recharts components to compiled layouts
- const { ResponsiveContainer, LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } = Recharts || {};
+ const { ResponsiveContainer, LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ComposedChart, ScatterChart, Scatter, FunnelChart, Funnel, TreemapChart, Treemap, SankeyChart, Sankey, RadialBarChart, RadialBar, ReferenceLine, ReferenceDot, ReferenceArea, Brush, ErrorBar, LabelList, Label } = Recharts || {};
+
${compiled}
/* everything declared in the string is in scope here */
@@ -127,7 +128,7 @@ export const LayoutProvider: React.FC<{
children: ReactNode;
}> = ({ children }) => {
const [layoutData, setLayoutData] = useState(null);
- const [loading, setLoading] = useState(false);
+ const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [isPreloading, setIsPreloading] = useState(false);
const [customTemplateFonts, setCustomTemplateFonts] = useState>(new Map());
@@ -273,7 +274,7 @@ export const LayoutProvider: React.FC<{
setError(null);
dispatch(setLayoutLoading(true));
- const layoutResponse = await fetch("/api/layouts");
+ const layoutResponse = await fetch("/api/templates");
if (!layoutResponse.ok) {
throw new Error(
diff --git a/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts b/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts
index 37767dd1..a1529edb 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts
@@ -135,7 +135,6 @@ export const useLayoutSaving = (
toast.error("No slides were successfully converted");
return null;
}
- console.log(reactComponents);
// First create/update the template metadata
await fetch("/api/v1/ppt/template-management/templates", {
diff --git a/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx b/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx
index 1ba9be0f..d3350f27 100644
--- a/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx
+++ b/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx
@@ -1,16 +1,29 @@
import { Skeleton } from '@/components/ui/skeleton'
import React from 'react'
+import Header from './components/Header'
+import Wrapper from '@/components/Wrapper'
const loading = () => {
return (
-
- = ({
const layoutGroups: LayoutGroup[] = React.useMemo(() => {
const groups = getAllGroups();
- console.log("All groups: ", groups);
if (groups.length === 0) return [];
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts b/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts
index 7128c057..f2156262 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts
@@ -16,7 +16,6 @@ export const usePresentationUndoRedo = () => {
const canUndo = undoRedoState.past.length > 0;
const canRedo = undoRedoState.future.length > 0;
- console.log(canUndo, canRedo);
const onUndo = useCallback(() => {
if (!canUndo) return;
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx b/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx
index 3dd7a56a..01704043 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx
@@ -1,5 +1,5 @@
'use client'
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/store/store';
import { PresentationGenerationApi } from '../../services/api/presentation-generation';
@@ -14,6 +14,7 @@ export const useAutoSave = ({
debounceMs = 1000,
enabled = true,
}: UseAutoSaveOptions = {}) => {
+
const dispatch = useDispatch();
const { presentationData, isStreaming, isLoading, isLayoutLoading } = useSelector(
(state: RootState) => state.presentationGeneration
@@ -22,6 +23,7 @@ export const useAutoSave = ({
const saveTimeoutRef = useRef(null);
const lastSavedDataRef = useRef('');
const [isSaving, setIsSaving] = useState(false);
+
// Debounced save function
const debouncedSave = useCallback(async (data: any) => {
@@ -64,27 +66,24 @@ export const useAutoSave = ({
// Effect to trigger auto-save when presentation data changes
useEffect(() => {
- if (!enabled || !presentationData || isStreaming || isLoading || isLayoutLoading) return;
-
- // Trigger debounced save
- debouncedSave(presentationData);
-
+ if (!enabled || !presentationData || isStreaming || isLoading || isLayoutLoading ) return;
+
dispatch(addToHistory({
slides: presentationData.slides,
actionType: "AUTO_SAVE"
}));
-
+ // Trigger debounced save
+ debouncedSave(presentationData);
+
// Cleanup timeout on unmount
return () => {
if (saveTimeoutRef.current) {
clearTimeout(saveTimeoutRef.current);
}
};
- }, [presentationData, enabled, debouncedSave]);
+ }, [presentationData, enabled, debouncedSave,isLoading, isStreaming, isLayoutLoading]);
return {
isSaving,
};
-};
-
-
+};
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
index cb2a6e15..336dbd70 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
import { toast } from "sonner";
import { setPresentationData } from "@/store/slices/presentationGeneration";
import { DashboardApi } from '../../services/api/dashboard';
-import { addToHistory, clearHistory } from "@/store/slices/undoRedoSlice";
+import { clearHistory } from "@/store/slices/undoRedoSlice";
export const usePresentationData = (
@@ -19,10 +19,6 @@ export const usePresentationData = (
if (data) {
dispatch(setPresentationData(data));
dispatch(clearHistory());
- dispatch(addToHistory({
- slides: data.slides,
- actionType: "initial_load"
- }));
setLoading(false);
}
} catch (error) {
diff --git a/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx b/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx
index 21b849b3..4c70367a 100644
--- a/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx
+++ b/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx
@@ -86,10 +86,10 @@ const LoadingStates: React.FC = ({ type, message }) => {
diff --git a/servers/nextjs/app/(presentation-generator)/template-preview/hooks/useGroupLayoutLoader.ts b/servers/nextjs/app/(presentation-generator)/template-preview/hooks/useGroupLayoutLoader.ts
deleted file mode 100644
index 9c1836b8..00000000
--- a/servers/nextjs/app/(presentation-generator)/template-preview/hooks/useGroupLayoutLoader.ts
+++ /dev/null
@@ -1,362 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import * as Babel from "@babel/standalone";
-import * as z from "zod";
-
-import {
- LayoutInfo,
- LayoutGroup,
- GroupedLayoutsResponse,
- GroupSetting,
-} from "../types";
-import { toast } from "sonner";
-
-interface UseGroupLayoutLoaderReturn {
- layoutGroup: LayoutGroup | null;
- loading: boolean;
- error: string | null;
- retry: () => void;
-}
-
-// Global cache to store layout groups and avoid re-fetching
-const layoutGroupCache = new Map();
-const loadingGroupsCache = new Set();
-
-// Extract Babel compilation logic into a utility function
-const compileCustomLayout = (layoutCode: string, React: any, z: any) => {
- const cleanCode = layoutCode
- .replace(/import\s+React\s+from\s+'react';?/g, "")
- .replace(/import\s*{\s*z\s*}\s*from\s+'zod';?/g, "");
-
- const compiled = Babel.transform(cleanCode, {
- presets: [
- ["react", { runtime: "classic" }],
- ["typescript", { isTSX: true, allExtensions: true }],
- ],
- sourceType: "script",
- }).code;
-
- const factory = new Function(
- "React",
- "z",
- `
- ${compiled}
-
- /* everything declared in the string is in scope here */
- return {
- __esModule: true,
- default: dynamicSlideLayout,
- layoutName,
- layoutId,
- layoutDescription,
- Schema
- };
- `
- );
-
- return factory(React, z);
-};
-
-export const useGroupLayoutLoader = (
- groupSlug: string
-): UseGroupLayoutLoaderReturn => {
- const [layoutGroup, setLayoutGroup] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const hasMountedRef = useRef(false);
-
- const loadCustomLayouts = async () => {
- try {
- // Check if this is a custom group (starts with 'custom-')
- if (!groupSlug.startsWith("custom-")) {
- return null;
- }
-
- const presentationId = groupSlug.replace("custom-", "");
-
- const customLayoutResponse = await fetch(
- `/api/v1/ppt/template-management/get-templates/${presentationId}`
- );
-
- if (!customLayoutResponse.ok) {
- throw new Error(
- `Failed to fetch custom layouts: ${customLayoutResponse.statusText}`
- );
- }
-
- const customLayoutsData = await customLayoutResponse.json();
- const allLayouts = customLayoutsData.layouts;
- const templateMeta = customLayoutsData.template;
-
- const groupLayouts: LayoutInfo[] = [];
- const settings: GroupSetting = {
- description: templateMeta?.description || `Custom presentation layouts`,
- ordered: false,
- default: false,
- };
-
- for (const layoutData of allLayouts) {
- try {
- // Compile custom layout code
- const module = compileCustomLayout(layoutData.layout_code, React, z);
-
- if (!module.default) {
- toast.error(`Custom Layout has no default export`, {
- description:
- "Please ensure the layout file exports a default component",
- });
- console.warn(`❌ Custom Layout has no default export`);
- continue;
- }
-
- if (!module.Schema) {
- toast.error(`Custom Layout has no Schema export`, {
- description: "Please ensure the layout file exports a Schema",
- });
- console.warn(`❌ Custom Layout has no Schema export`);
- continue;
- }
-
- // Use empty object to let schema apply its default values
- const sampleData = module.Schema.parse({});
-
- const originalLayoutId =
- module.layoutId ||
- layoutData.layout_name.toLowerCase().replace(/layout$/, "");
- const layoutName =
- module.layoutName ||
- layoutData.layout_name.replace(/([A-Z])/g, " $1").trim();
-
- const layoutInfo: LayoutInfo = {
- name: layoutName,
- component: module.default,
- schema: module.Schema,
- sampleData,
- fileName: layoutData.layout_name,
- groupName: groupSlug,
- layoutId: originalLayoutId,
- };
-
- groupLayouts.push(layoutInfo);
- } catch (compilationError) {
- console.error(
- `Failed to compile custom layout ${layoutData.layout_name}:`,
- compilationError
- );
- toast.error(`Failed to compile ${layoutData.layout_name}`, {
- description: "There was an error compiling the custom layout code",
- });
- }
- }
-
- if (groupLayouts.length === 0) {
- throw new Error(
- `No valid custom layouts found in "${groupSlug}" group.`
- );
- }
-
- return {
- groupName: groupSlug,
- layouts: groupLayouts,
- settings,
- };
- } catch (error) {
- console.error("Error loading custom layouts:", error);
- throw error;
- }
- };
-
- const loadGroupLayouts = async () => {
- // Check cache first
- if (layoutGroupCache.has(groupSlug)) {
- setLayoutGroup(layoutGroupCache.get(groupSlug)!);
- setLoading(false);
- setError(null);
- return;
- }
-
- // Prevent multiple simultaneous requests for the same group
- if (loadingGroupsCache.has(groupSlug)) {
- return;
- }
-
- try {
- setLoading(true);
- setError(null);
- loadingGroupsCache.add(groupSlug);
-
- // Check if this is a custom group
- if (groupSlug.startsWith("custom-")) {
- const customGroup = await loadCustomLayouts();
- if (customGroup) {
- // Cache the result
- layoutGroupCache.set(groupSlug, customGroup);
- setLayoutGroup(customGroup);
- setError(null);
- return;
- }
- }
-
- // Load standard layouts
- const response = await fetch("/api/layouts");
- if (!response.ok) {
- toast.error("Error loading layouts", {
- description: response.statusText,
- });
- return;
- }
- const groupedLayoutsData: GroupedLayoutsResponse[] =
- await response.json();
-
- // Find the specific group by slug
- const targetGroupData = groupedLayoutsData.find(
- (group) => group.groupName.toLowerCase() === groupSlug.toLowerCase()
- );
-
- if (!targetGroupData) {
- setError(`Group "${groupSlug}" not found`);
- return;
- }
-
- const groupLayouts: LayoutInfo[] = [];
-
- // Use settings from settings.json or provide defaults
- const groupSettings: GroupSetting = targetGroupData.settings
- ? targetGroupData.settings
- : {
- description: `${targetGroupData.groupName} presentation layouts`,
- ordered: false,
- default: false,
- };
-
- for (const fileName of targetGroupData.files) {
- try {
- const layoutName = fileName.replace(".tsx", "").replace(".ts", "");
- const module = await import(
- `@/presentation-templates/${targetGroupData.groupName}/${layoutName}`
- );
-
- if (!module.default) {
- toast.error(`${layoutName} has no default export`, {
- description:
- "Please ensure the layout file exports a default component",
- });
-
- console.warn(`${layoutName} has no default export`);
- return;
- }
-
- if (!module.Schema) {
- toast.error(`${layoutName} is missing required Schema export`, {
- description: "Please ensure the layout file exports a Schema",
- });
- console.error(`${layoutName} is missing required Schema export`);
- return;
- }
-
- // Use empty object to let schema apply its default values
- const sampleData = module.Schema.parse({});
- const layoutId =
- module.layoutId || layoutName.toLowerCase().replace(/layout$/, "");
-
- const layoutInfo: LayoutInfo = {
- name: layoutName,
- component: module.default,
- schema: module.Schema,
- sampleData,
- fileName,
- groupName: targetGroupData.groupName,
- layoutId,
- };
-
- groupLayouts.push(layoutInfo);
- } catch (importError) {
- console.error(
- `Failed to import ${fileName} from ${targetGroupData.groupName}:`,
- importError
- );
-
- // Try alternative import path
- try {
- const layoutName = fileName.replace(".tsx", "").replace(".ts", "");
- const module = await import(
- `@/presentation-templates/${targetGroupData.groupName}/${layoutName}`
- );
-
- if (module.default && module.Schema) {
- const sampleData = module.Schema.parse({});
- // if layoutId is not provided, use the layoutName
- const layoutId =
- module.layoutId ||
- layoutName.toLowerCase().replace(/layout$/, "");
- const layoutInfo: LayoutInfo = {
- name: layoutName,
- component: module.default,
- schema: module.Schema,
- sampleData,
- fileName,
- groupName: targetGroupData.groupName,
- layoutId,
- };
- groupLayouts.push(layoutInfo);
- } else {
- console.error(
- `${layoutName} is missing required exports (default component or Schema)`
- );
- }
- } catch (altError) {
- console.error(
- `Alternative import also failed for ${fileName} from ${targetGroupData.groupName}:`,
- altError
- );
- }
- }
- }
-
- if (groupLayouts.length === 0) {
- toast.error("No valid layouts found", {
- description: `No valid layouts found in "${groupSlug}" group.`,
- });
- setError(`No valid layouts found in "${groupSlug}" group.`);
- } else {
- const group: LayoutGroup = {
- groupName: targetGroupData.groupName,
- layouts: groupLayouts,
- settings: groupSettings,
- };
-
- // Cache the result
- layoutGroupCache.set(groupSlug, group);
- setLayoutGroup(group);
- setError(null);
- }
- } catch (error) {
- console.error("Error loading group layouts:", error);
- setError(
- error instanceof Error ? error.message : "Failed to load group layouts"
- );
- } finally {
- setLoading(false);
- loadingGroupsCache.delete(groupSlug);
- }
- };
-
- const retry = () => {
- hasMountedRef.current = false;
- loadGroupLayouts();
- };
-
- useEffect(() => {
- if (groupSlug && !hasMountedRef.current) {
- hasMountedRef.current = true;
- loadGroupLayouts();
- }
- }, [groupSlug]);
-
- return {
- layoutGroup,
- loading,
- error,
- retry,
- };
-};
diff --git a/servers/nextjs/app/apple-icon.png b/servers/nextjs/app/apple-icon.png
new file mode 100644
index 00000000..625d5c0f
Binary files /dev/null and b/servers/nextjs/app/apple-icon.png differ
diff --git a/servers/nextjs/app/favicon.ico b/servers/nextjs/app/favicon.ico
index d9db33a2..d5e4adde 100644
Binary files a/servers/nextjs/app/favicon.ico and b/servers/nextjs/app/favicon.ico differ
diff --git a/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx b/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx
index 88aa48bd..3b6c09cb 100644
--- a/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx
+++ b/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx
@@ -144,6 +144,7 @@ export function useRemoteSvgIcon(url?: string, options: RemoteSvgOptions = {}) {
return;
}
try {
+
const res = await fetch(url);
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
@@ -199,6 +200,4 @@ export const RemoteSvgIcon: React.FC<{
style={{ display: "inline-block", color: color }}
/>
);
-};
-
-
+};
\ No newline at end of file
diff --git a/servers/nextjs/app/icon1.svg b/servers/nextjs/app/icon1.svg
new file mode 100644
index 00000000..a689fb37
--- /dev/null
+++ b/servers/nextjs/app/icon1.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/servers/nextjs/app/icon2.png b/servers/nextjs/app/icon2.png
new file mode 100644
index 00000000..4c7fe724
Binary files /dev/null and b/servers/nextjs/app/icon2.png differ
diff --git a/servers/nextjs/store/slices/undoRedoSlice.ts b/servers/nextjs/store/slices/undoRedoSlice.ts
index 8d1d65a5..09fa9216 100644
--- a/servers/nextjs/store/slices/undoRedoSlice.ts
+++ b/servers/nextjs/store/slices/undoRedoSlice.ts
@@ -33,6 +33,7 @@ const undoRedoSlice = createSlice({
initialState,
reducers: {
addToHistory: (state, action: PayloadAction<{slides: Slide[], actionType: string}>) => {
+
// Skip if undo/redo is in progress
if (state.isUndoRedoInProgress) {
return;
@@ -48,15 +49,14 @@ const undoRedoSlice = createSlice({
timestamp: Date.now(),
actionType: action.payload.actionType
};
-
return;
}
-
+
// Skip if slides are identical
if (JSON.stringify(state.present.slides) === JSON.stringify(newSlides)) {
return;
}
-
+
// Add current state to past
state.past.push(state.present);
@@ -127,6 +127,7 @@ const undoRedoSlice = createSlice({
clearHistory: (state) => {
state.past = [];
state.future = [];
+ state.present = null;
// Keep present
}
}
- {Array.from({ length: 10 }).map((_, index) => (
-
+
+
+
+
)
}
-export default loading
+export default loading
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
index 7fdc8882..ed2452fc 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
@@ -57,7 +57,6 @@ const LayoutSelection: React.FC
+
+
+ + Slide Presentation +
+
+ {
+ Array.from({ length: 8 }).map((_, index) => (
+
+ - No Layouts Found + No Template Found
- No valid layout files were discovered. Make sure your layout + No valid Template files were discovered. Make sure your layout components export both a default component and a Schema.