Revert "feat: UX improvements for onboarding"

.gitignore

@@ -7,4 +7,3 @@ __pycache__
 /run/
 infrastructure/
 nginx/
-prd/

api/requirements.dev.txt

@@ -3,4 +3,3 @@ ruff==0.11.3
 pytest==8.3.5
 pytest-asyncio==0.26.0
 pre-commit==4.2.0
-watchfiles==1.1.0

api/services/configuration/registry.py

@@ -157,8 +157,6 @@ class AzureLLMService(BaseLLMConfiguration):
 # Dograh LLM Service
 class DograhLLMModel(str, Enum):
     DEFAULT = "default"
-    FAST = "fast"
-    ACCURATE = "accurate"
 
 
 @register_llm
@@ -281,8 +279,6 @@ class OpenAITTSService(BaseTTSConfiguration):
 # Dograh TTS Service
 class DograhVoice(str, Enum):
     DEFAULT = "default"
-    JOEY = "joey"
-    RACHEL = "rachel"
 
 
 class DograhTTSModel(str, Enum):

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

@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
-import { createWorkflowFromTemplateApiV1WorkflowCreateTemplatePost, createWorkflowRunApiV1WorkflowWorkflowIdRunsPost } from '@/client/sdk.gen';
+import { createWorkflowFromTemplateApiV1WorkflowCreateTemplatePost } from '@/client/sdk.gen';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
 import {
@@ -16,10 +16,8 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { WORKFLOW_RUN_MODES } from '@/constants/workflowRunModes';
 import { useAuth } from '@/lib/auth';
 import logger from '@/lib/logger';
-import { getRandomId } from '@/lib/utils';
 
 export default function CreateWorkflowPage() {
     const router = useRouter();
@@ -74,34 +72,8 @@ export default function CreateWorkflowPage() {
         }
     };
 
-    const handleModalContinue = async () => {
-        if (!workflowId || !user) return;
-
-        try {
-            const accessToken = await getAccessToken();
-            const workflowRunName = `WR-${getRandomId()}`;
-
-            // Create a workflow run
-            const response = await createWorkflowRunApiV1WorkflowWorkflowIdRunsPost({
-                path: {
-                    workflow_id: Number(workflowId),
-                },
-                body: {
-                    mode: WORKFLOW_RUN_MODES.SMALL_WEBRTC, // Same mode as "Web Call" button
-                    name: workflowRunName
-                },
-                headers: {
-                    'Authorization': `Bearer ${accessToken}`,
-                },
-            });
-
-            // Navigate to the workflow run page
-            if (response.data?.id) {
-                router.push(`/workflow/${workflowId}/run/${response.data.id}`);
-            }
-        } catch (err) {
-            logger.error(`Error creating workflow run: ${err}`);
-            // Fallback to workflow page if run creation fails
+    const handleModalContinue = () => {
+        if (workflowId) {
             router.push(`/workflow/${workflowId}`);
         }
     };
@@ -250,13 +222,16 @@ export default function CreateWorkflowPage() {
                         <DialogDescription asChild>
                             <div className="text-base mt-4 space-y-3 text-gray-700 dark:text-gray-300">
                                 <p>
-                                    A voice agent workflow has been generated for your use case, with some artificial data and sample actions.
+                                    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>
-                                    Next steps would be to test the voice bot using web call, and then modify it to suit your use case.
+                                    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 Slack channel for any queries and star us on GitHub.
                                 </p>
                             </div>
                         </DialogDescription>
@@ -266,7 +241,7 @@ export default function CreateWorkflowPage() {
                             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"
                         >
-                            Start Web Call
+                            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>

ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx

@@ -5,9 +5,12 @@ import {
     Panel,
     ReactFlow,
 } from "@xyflow/react";
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
 
 import WorkflowLayout from '@/app/workflow/WorkflowLayout';
 import { FlowEdge, FlowNode, NodeType } from "@/components/flow/types";
+import { Button } from '@/components/ui/button';
 import { WorkflowConfigurations } from '@/types/workflow-configurations';
 
 import AddNodePanel from "../../../components/flow/AddNodePanel";
@@ -72,6 +75,15 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
         saveWorkflowConfigurations
     } = useWorkflowState({ initialWorkflowName, workflowId, initialFlow, initialTemplateContextVariables, initialWorkflowConfigurations });
 
+    const backButton = (
+        <Link href="/workflow">
+            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                <ArrowLeft className="h-4 w-4" />
+                Workflows
+            </Button>
+        </Link>
+    );
+
     const headerActions = (
         <WorkflowHeader
             workflowValidationErrors={workflowValidationErrors}
@@ -86,7 +98,7 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
 
     return (
         <WorkflowProvider value={{ saveWorkflow }}>
-            <WorkflowLayout headerActions={headerActions} showFeaturesNav={false}>
+            <WorkflowLayout headerActions={headerActions} backButton={backButton} showFeaturesNav={false}>
                 <div className="h-[calc(100vh-80px)]">
                     <ReactFlow
                         nodes={nodes}

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

@@ -12,7 +12,6 @@ import { OnboardingTooltip } from '@/components/onboarding/OnboardingTooltip';
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { WORKFLOW_RUN_MODES } from '@/constants/workflowRunModes';
 import { useOnboarding } from '@/context/OnboardingContext';
 import { useUserConfig } from "@/context/UserConfigContext";
 import { useAuth } from '@/lib/auth';
@@ -204,7 +203,7 @@ const WorkflowHeader = ({ isDirty, workflowName, rfInstance, onRun, workflowId,
                     if (!hasSeenTooltip('web_call')) {
                         markTooltipSeen('web_call');
                     }
-                    onRun(WORKFLOW_RUN_MODES.SMALL_WEBRTC);
+                    onRun("smallwebrtc"); // Don't change the mode since its defined in the database enum
                 }}
                 disabled={hasValidationErrors}
             >

ui/src/app/workflow/[workflowId]/run/[runId]/BrowserCall.tsx

@@ -94,7 +94,7 @@ const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVar
         <>
             <Card className="w-full max-w-4xl mx-auto">
                 <CardHeader>
-                    <CardTitle>Call Voice Agent</CardTitle>
+                    <CardTitle>Agent Run</CardTitle>
                 </CardHeader>
 
                 <CardContent>

ui/src/app/workflow/[workflowId]/run/[runId]/components/AudioControls.tsx

@@ -73,6 +73,7 @@ export const AudioControls = ({
         <div className="flex flex-col items-center justify-center space-y-6 p-8">
             {!connectionActive ? (
                 <>
+                    <p className="text-sm text-gray-600">Ready to start your call</p>
                     <button
                         onClick={start}
                         disabled={isStarting}

ui/src/app/workflow/[workflowId]/run/[runId]/page.tsx

@@ -1,19 +1,17 @@
 'use client';
 
-import { FileText, Video } from 'lucide-react';
+import { ArrowLeft, FileText, Video } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import BrowserCall from '@/app/workflow/[workflowId]/run/[runId]/BrowserCall';
 import WorkflowLayout from '@/app/workflow/WorkflowLayout';
 import { getWorkflowRunApiV1WorkflowWorkflowIdRunsRunIdGet } from '@/client/sdk.gen';
 import { MediaPreviewButtons, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
-import { OnboardingTooltip } from '@/components/onboarding/OnboardingTooltip';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useOnboarding } from '@/context/OnboardingContext';
 import { useAuth } from '@/lib/auth';
 import { downloadFile } from '@/lib/files';
 
@@ -32,8 +30,6 @@ export default function WorkflowRunPage() {
     const auth = useAuth();
     const [workflowRun, setWorkflowRun] = useState<WorkflowRunResponse | null>(null);
     const [accessToken, setAccessToken] = useState<string | null>(null);
-    const { hasSeenTooltip, markTooltipSeen } = useOnboarding();
-    const customizeButtonRef = useRef<HTMLButtonElement>(null);
 
     // Redirect if not authenticated
     useEffect(() => {
@@ -80,6 +76,23 @@ export default function WorkflowRunPage() {
         fetchWorkflowRun();
     }, [params.workflowId, params.runId, auth]);
 
+    const backButton = (
+        <div className="flex gap-2">
+            <Link href={`/workflow/${params.workflowId}`}>
+                <Button variant="outline" size="sm" className="flex items-center gap-1">
+                    <ArrowLeft className="h-4 w-4" />
+                    Workflow
+                </Button>
+            </Link>
+            <Link href={`/workflow/${params.workflowId}/runs`}>
+                <Button variant="outline" size="sm" className="flex items-center gap-1">
+                    <ArrowLeft className="h-4 w-4" />
+                    Workflow Runs
+                </Button>
+            </Link>
+        </div>
+    );
+
     let returnValue = null;
 
     if (isLoading) {
@@ -110,31 +123,12 @@ export default function WorkflowRunPage() {
                 <div className="w-full max-w-4xl space-y-6">
                     <Card className="border-gray-100">
                         <CardHeader className="flex flex-row items-center justify-between">
-                            <div className="flex items-center gap-4">
-                                <CardTitle className="text-2xl">Agent Run Completed</CardTitle>
-                                <div className="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
-                                    <svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                                    </svg>
-                                </div>
+                            <CardTitle className="text-2xl">Agent Run Completed</CardTitle>
+                            <div className="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
+                                <svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                                </svg>
                             </div>
-                            <Link href={`/workflow/${params.workflowId}`}>
-                                <Button
-                                    ref={customizeButtonRef}
-                                    variant="outline"
-                                    className="gap-2"
-                                    onClick={() => {
-                                        if (!hasSeenTooltip('customize_workflow')) {
-                                            markTooltipSeen('customize_workflow');
-                                        }
-                                    }}
-                                >
-                                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                    </svg>
-                                    Customize Workflow
-                                </Button>
-                            </Link>
                         </CardHeader>
                         <CardContent>
                             <p className="text-gray-600 mb-8">Your voice agent run has been completed successfully. You can preview or download the transcript and recording.</p>
@@ -213,21 +207,9 @@ export default function WorkflowRunPage() {
     }
 
     return (
-        <WorkflowLayout>
+        <WorkflowLayout backButton={backButton}>
             {returnValue}
             {dialog}
-
-            {/* Onboarding Tooltip for Customize Workflow */}
-            {workflowRun?.is_completed && (
-                <OnboardingTooltip
-                    title='Customize Your Workflow'
-                    targetRef={customizeButtonRef}
-                    message="Edit your workflow to adjust the voice agent's behavior, add new steps, or modify the conversation flow."
-                    onDismiss={() => markTooltipSeen('customize_workflow')}
-                    showNext={false}
-                    isVisible={!hasSeenTooltip('customize_workflow')}
-                />
-            )}
         </WorkflowLayout>
     );
 }

ui/src/constants/workflowRunModes.ts

@@ -1,9 +0,0 @@
-/**
- * Workflow run mode constants
- * These modes determine how a workflow run is executed
- */
-export const WORKFLOW_RUN_MODES = {
-    SMALL_WEBRTC: 'smallwebrtc',
-} as const;
-
-export type WorkflowRunMode = typeof WORKFLOW_RUN_MODES[keyof typeof WORKFLOW_RUN_MODES];

ui/src/context/OnboardingContext.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, useContext, useEffect, useState } from 'react';
 
-export type TooltipKey = 'web_call' | 'customize_workflow'; // Add more tooltip keys as needed
+export type TooltipKey = 'web_call'; // Add more tooltip keys as needed
 
 interface OnboardingState {
     seenTooltips: TooltipKey[];