diff --git a/src/components/sections/animated-chat-demo/AnimatedChatDemo.tsx b/src/components/sections/animated-chat-demo/AnimatedChatDemo.tsx new file mode 100644 index 0000000..955733d --- /dev/null +++ b/src/components/sections/animated-chat-demo/AnimatedChatDemo.tsx @@ -0,0 +1,282 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { Send } from "lucide-react"; + +interface ChatMessage { + id: string; + text: string; + isUser: boolean; + isComplete?: boolean; +} + +interface AppIdea { + id: string; + title: string; + description: string; +} + +const appIdeas: AppIdea[] = [ + { + id: "1", title: "Weather Dashboard", description: "A beautiful real-time weather app with hourly forecasts and weather alerts" + }, + { + id: "2", title: "Todo Manager", description: "A productivity app with task organization, categories, and smart reminders" + }, + { + id: "3", title: "Budget Tracker", description: "Personal finance app with spending analytics and budget goals tracking" + } +]; + +export default function AnimatedChatDemo() { + const [stage, setStage] = useState<"chat" | "process" | "finished">("chat"); + const [currentIdeaIndex, setCurrentIdeaIndex] = useState(0); + const [messages, setMessages] = useState([]); + const [processSteps, setProcessSteps] = useState>([]); + const [finishedApp, setFinishedApp] = useState(null); + const [isAutoPlaying, setIsAutoPlaying] = useState(true); + + // Stage 1: Chat simulation with auto-filling and sending + useEffect(() => { + if (stage !== "chat" || !isAutoPlaying) return; + + let timeoutId: NodeJS.Timeout; + const currentIdea = appIdeas[currentIdeaIndex]; + + // Clear messages and start fresh + if (messages.length === 0) { + timeoutId = setTimeout(() => { + // Add user message character by character + const userMessage = currentIdea.description; + let charIndex = 0; + const typeInterval = setInterval(() => { + if (charIndex <= userMessage.length) { + setMessages((prev) => { + if (prev.length === 0 || !prev[prev.length - 1].isUser) { + return [ + ...prev, + { + id: `user-${Date.now()}`, + text: userMessage.substring(0, charIndex), + isUser: true, + isComplete: false + } + ]; + } else { + const updated = [...prev]; + updated[updated.length - 1].text = userMessage.substring(0, charIndex); + return updated; + } + }); + charIndex++; + } else { + clearInterval(typeInterval); + // Mark message as complete and move to next stage + setTimeout(() => { + setMessages((prev) => { + const updated = [...prev]; + if (updated.length > 0) { + updated[updated.length - 1].isComplete = true; + } + return updated; + }); + // Auto-send and transition to process + setTimeout(() => { + setStage("process"); + }, 800); + }, 500); + } + }, 30); + }, 500); + } + + return () => clearTimeout(timeoutId); + }, [stage, currentIdeaIndex, messages.length, isAutoPlaying]); + + // Stage 2: Process flow animation + useEffect(() => { + if (stage !== "process" || !isAutoPlaying) return; + + const steps = [ + { name: "Design", active: false }, + { name: "Planning", active: false }, + { name: "Coding", active: false } + ]; + setProcessSteps(steps); + + let stepIndex = 0; + const stepInterval = setInterval(() => { + if (stepIndex < steps.length) { + setProcessSteps((prev) => + prev.map((step, idx) => ({ + ...step, + active: idx === stepIndex + })) + ); + stepIndex++; + } else { + clearInterval(stepInterval); + // Transition to finished + setTimeout(() => { + setStage("finished"); + setFinishedApp(appIdeas[currentIdeaIndex]); + }, 1000); + } + }, 1200); + + return () => clearInterval(stepInterval); + }, [stage, currentIdeaIndex, isAutoPlaying]); + + // Stage 3: Finished app display and loop + useEffect(() => { + if (stage !== "finished" || !isAutoPlaying) return; + + const loopTimeout = setTimeout(() => { + const nextIndex = (currentIdeaIndex + 1) % appIdeas.length; + setCurrentIdeaIndex(nextIndex); + setStage("chat"); + setMessages([]); + setProcessSteps([]); + setFinishedApp(null); + }, 4000); + + return () => clearTimeout(loopTimeout); + }, [stage, currentIdeaIndex, isAutoPlaying]); + + return ( +
+
+ {/* Section Header */} +
+

INTERACTIVE DEMO

+

See It In Action

+

+ Watch how Native Line transforms your ideas into complete apps in real-time +

+
+ + {/* Main Demo Container */} +
+ {/* Chat Stage */} + {stage === "chat" && ( +
+
+
+ {messages.map((msg) => ( +
+
+

{msg.text}

+ {msg.isComplete && msg.isUser && ( +
+ +
+ )} +
+
+ ))} +
+
+
+ )} + + {/* Process Flow Stage */} + {stage === "process" && ( +
+
+ {processSteps.map((step, idx) => ( +
+
+ {step.name} +
+ {idx < processSteps.length - 1 && ( +
+ )} +
+ ))} +
+
+ )} + + {/* Finished App Stage */} + {stage === "finished" && finishedApp && ( +
+
+ {/* App Image - Right */} +
+
+
+
+
+

App Preview

+
+
+ + {/* App Details - Left */} +
+
+

{finishedApp.title}

+

{finishedApp.description}

+
+
+

✓ Production-Ready Code

+

✓ Ready to Deploy

+

✓ Fully Yours to Modify

+
+
+
+
+ )} +
+ + {/* Loop Indicator */} +
+ {appIdeas.map((idea, idx) => ( +
+ + {/* Auto-play Toggle */} +
+ +
+
+
+ ); +}