apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-07-19 11:41:04 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add popup after create workflow

Browse source
This commit is contained in:
Abhishek Kumar 2025-09-10 10:24:04 +05:30
parent a5524dbbac
commit 240c560602
5 changed files with 163 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

92
ui/src/app/create-workflow/page.tsx
View file

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