Add popup after create workflow

docker-compose-local.yaml

@@ -0,0 +1,47 @@
+services:
+  postgres:
+    image: postgres:17
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: postgres
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "10m"
+        max-file: "3"
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 3s
+      timeout: 3s
+      retries: 10
+    networks:
+      - app-network
+
+  redis:
+    image: redis:7
+    ports:
+      - "6379:6379"
+    command: >
+      --requirepass redissecret
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "-a", "redissecret", "ping"]
+      interval: 3s
+      timeout: 10s
+      retries: 10
+    networks:
+      - app-network
+
+volumes:
+  postgres_data:
+  redis_data:
+
+networks:
+  app-network:
+    driver: bridge

docker-compose.yaml

@@ -83,8 +83,6 @@ services:
       MINIO_BUCKET: "voice-audio"
       MINIO_SECURE: "false"
 
-      MPS_API_URL: "https://dograh.a.pinggy.link"
-
       # Langfuse
       ENABLE_TRACING: "false"
       # LANGFUSE_SECRET_KEY: ""

ui/src/app/create-workflow/page.tsx

@@ -6,6 +6,14 @@ import { useState } from 'react';
 import { createWorkflowFromTemplateApiV1WorkflowCreateTemplatePost } from '@/client/sdk.gen';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useAuth } from '@/lib/auth';
@@ -16,6 +24,8 @@ export default function CreateWorkflowPage() {
     const { user, getAccessToken } = useAuth();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [showSuccessModal, setShowSuccessModal] = useState(false);
+    const [workflowId, setWorkflowId] = useState<string | null>(null);
 
     const [callType, setCallType] = useState<'INBOUND' | 'OUTBOUND'>('INBOUND');
     const [useCase, setUseCase] = useState('');
@@ -51,7 +61,8 @@ export default function CreateWorkflowPage() {
             });
 
             if (response.data?.id) {
-                router.push(`/workflow/${response.data.id}`);
+                setWorkflowId(String(response.data.id));
+                setShowSuccessModal(true);
             }
         } catch (err) {
             setError('Failed to create workflow. Please try again.');
@@ -61,6 +72,12 @@ export default function CreateWorkflowPage() {
         }
     };
 
+    const handleModalContinue = () => {
+        if (workflowId) {
+            router.push(`/workflow/${workflowId}`);
+        }
+    };
+
     return (
         <div className="min-h-[calc(100vh-64px)] flex items-center justify-center p-4 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
             <Card className="w-full max-w-4xl shadow-xl border-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur">
@@ -165,6 +182,79 @@ export default function CreateWorkflowPage() {
                     </div>
                 </CardContent>
             </Card>
+
+            {/* Loading Overlay */}
+            {isLoading && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+                    <Card className="w-full max-w-md p-8 bg-white dark:bg-gray-900 border-0 shadow-2xl">
+                        <div className="flex flex-col items-center space-y-6">
+                            {/* Animated spinner */}
+                            <div className="relative">
+                                <div className="w-20 h-20 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
+                                <div className="absolute top-0 left-0 w-20 h-20 border-4 border-transparent border-t-blue-600 rounded-full animate-spin"></div>
+                                <div className="absolute top-2 left-2 w-16 h-16 border-4 border-transparent border-t-purple-600 rounded-full animate-spin-slow"></div>
+                            </div>
+
+                            <div className="text-center space-y-2">
+                                <h3 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                                    Creating Your Workflow
+                                </h3>
+                                <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
+                                    We&apos;re setting up your voice agent with your specifications. This will just take a moment...
+                                </p>
+                            </div>
+
+                            {/* Animated dots */}
+                            <div className="flex space-x-2">
+                                <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                                <div className="w-2 h-2 bg-purple-600 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                                <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                            </div>
+                        </div>
+                    </Card>
+                </div>
+            )}
+
+            {/* Success Modal */}
+            <Dialog open={showSuccessModal} onOpenChange={setShowSuccessModal}>
+                <DialogContent className="sm:max-w-lg">
+                    <DialogHeader>
+                        <DialogTitle className="text-xl font-bold flex items-center gap-2">
+                            <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            Workflow Created Successfully!
+                        </DialogTitle>
+                        <DialogDescription asChild>
+                            <div className="text-base mt-4 space-y-3 text-gray-700 dark:text-gray-300">
+                                <p>
+                                    A starter template has been generated for your use case, with some randomised data and sample actions.
+                                </p>
+                                <p>
+                                    The voice bot is pre-set to communicate in English with an American accent.
+                                </p>
+                                <p>
+                                    You&apos;re encouraged to first test the bot and then modify it to your specific requirements and location (currency/accent etc).
+                                </p>
+                                <p className="pt-2 text-sm">
+                                    Feel free to join our <span className="font-semibold text-blue-600 dark:text-blue-400">Slack channel</span> for any queries and star us on <span className="font-semibold text-gray-900 dark:text-gray-100">GitHub</span>.
+                                </p>
+                            </div>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter className="mt-6">
+                        <Button
+                            onClick={handleModalContinue}
+                            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 font-semibold"
+                        >
+                            Continue to Workflow
+                            <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                            </svg>
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </div>
     );
 }

ui/src/app/globals.css

@@ -123,3 +123,16 @@
   }
 }
 
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
+}
+

ui/src/app/workflow/[workflowId]/components/WorkflowHeader.tsx

@@ -67,6 +67,7 @@ const WorkflowHeader = ({ isDirty, workflowName, rfInstance, onRun, workflowId,
     const { user, getAccessToken } = useAuth();
 
     const hasValidationErrors = workflowValidationErrors.length > 0;
+    const isOSSDeployment = process.env.NEXT_PUBLIC_DEPLOYMENT_MODE === 'oss';
 
     // Reset call-related state whenever the dialog is closed so that a new call can be placed
     useEffect(() => {
@@ -195,15 +196,17 @@ const WorkflowHeader = ({ isDirty, workflowName, rfInstance, onRun, workflowId,
                 <Phone className="mr-2 h-4 w-4" />
                 Web Call
             </Button>
-            <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setDialogOpen(true)}
-                disabled={hasValidationErrors}
-            >
-                <Phone className="mr-2 h-4 w-4" />
-                Phone Call
-            </Button>
+            {!isOSSDeployment && (
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setDialogOpen(true)}
+                    disabled={hasValidationErrors}
+                >
+                    <Phone className="mr-2 h-4 w-4" />
+                    Phone Call
+                </Button>
+            )}
 
             {isDirty ? (
                 <Button