Merge branch 'main' into vsc/demo-optimization
This commit is contained in:
mohammed ahmed
GitHub
commit
0e365f80c9
4 changed files with 119 additions and 143 deletions
|
|
@ -206,7 +206,12 @@ export class GitPatchProvider {
|
|||
}
|
||||
|
||||
private removeFilesPrefixes = (path: string): string => {
|
||||
return path.replace("a/", "").replace("b/", "");
|
||||
if (path.startsWith("a/")) {
|
||||
return path.replace("a/", "");
|
||||
} else if (path.startsWith("b/")) {
|
||||
return path.replace("b/", "");
|
||||
}
|
||||
return path;
|
||||
};
|
||||
|
||||
async applyPatch() {
|
||||
|
|
@ -215,10 +220,10 @@ export class GitPatchProvider {
|
|||
const patchContent = await fs.readFile(patchPath, { encoding: "utf-8" });
|
||||
applyPatches(patchContent, {
|
||||
loadFile: (index, callback) => {
|
||||
const filePath = this.removeFilesPrefixes(
|
||||
path.join(this.workspaceRoot, index.newFileName),
|
||||
const filePath = path.join(
|
||||
this.workspaceRoot,
|
||||
this.removeFilesPrefixes(index.newFileName),
|
||||
);
|
||||
|
||||
fs.readFile(filePath, { encoding: "utf-8" })
|
||||
.then((content) => callback(null, content))
|
||||
.catch((err) => callback(err, ""));
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import LogoBox from "@/components/dashboard/logo-box"
|
|||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { generateToken } from "@/app/(dashboard)/apikeys/tokenfuncs"
|
||||
import { ApiKeyCard, StepInstruction } from "@/components/onboarding/step-content-renderer"
|
||||
import { ConfettiEffect } from "@/components/onboarding/confetti-effect"
|
||||
|
||||
// Type definitions to improve type safety
|
||||
interface ReferralOption {
|
||||
|
|
@ -87,8 +88,7 @@ const INSTALLATION_COMMANDS = {
|
|||
const ONBOARDING_STEPS = [
|
||||
{ id: 0, title: "How did you hear about us?" },
|
||||
{ id: 1, title: "Install & Initialize Codeflash" },
|
||||
{ id: 2, title: "Install GitHub app" },
|
||||
{ id: 3, title: "Setup Complete" },
|
||||
{ id: 2, title: "Setup Complete" },
|
||||
]
|
||||
|
||||
// Reusable animations
|
||||
|
|
@ -105,6 +105,7 @@ export default function OnboardingPage() {
|
|||
const [userId, setUserId] = useState<string>("")
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null)
|
||||
const [, setGithubAppInstalled] = useState(false)
|
||||
const [showConfetti, setShowConfetti] = useState(false)
|
||||
|
||||
// Onboarding step management
|
||||
const [stepsState, setStepsState] = useState<StepsState>({
|
||||
|
|
@ -147,6 +148,22 @@ export default function OnboardingPage() {
|
|||
}
|
||||
}, [showIntro])
|
||||
|
||||
// Show confetti when Setup Complete step is shown
|
||||
useEffect(() => {
|
||||
const currentStepIndex = getCurrentStep()
|
||||
if (currentStepIndex === 2) {
|
||||
// Show confetti when Setup Complete step is displayed
|
||||
setShowConfetti(true)
|
||||
// Hide confetti after 5 seconds
|
||||
const timer = setTimeout(() => {
|
||||
setShowConfetti(false)
|
||||
}, 5000)
|
||||
return () => clearTimeout(timer)
|
||||
} else {
|
||||
setShowConfetti(false)
|
||||
}
|
||||
}, [stepsState.current.cli])
|
||||
|
||||
// Check if user has completed onboarding and load referral source if available
|
||||
useEffect(() => {
|
||||
const checkOnboardingStatus = async () => {
|
||||
|
|
@ -256,7 +273,6 @@ export default function OnboardingPage() {
|
|||
if (userId) {
|
||||
await completeUserOnboarding(userId)
|
||||
}
|
||||
sessionStorage.setItem("showOnboardingConfetti", "true")
|
||||
router.push("/app/apikeys")
|
||||
} catch (error) {
|
||||
console.error("Failed to mark onboarding as completed:", error)
|
||||
|
|
@ -267,6 +283,9 @@ export default function OnboardingPage() {
|
|||
const handleGitHubAppInstall = () => {
|
||||
window.open("https://github.com/apps/codeflash-ai/installations/select_target", "_blank")
|
||||
setGithubAppInstalled(true)
|
||||
if (activeInitStep === 3) {
|
||||
setActiveInitStep(4)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle selecting a referral source and automatically submitting for non-other options
|
||||
|
|
@ -355,7 +374,7 @@ export default function OnboardingPage() {
|
|||
|
||||
// Reusable Loading component
|
||||
const LoadingSpinner = () => (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="flex justify-center items-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -642,7 +661,7 @@ export default function OnboardingPage() {
|
|||
|
||||
<main className="flex-grow flex flex-col items-center justify-center max-w-3xl mx-auto -mt-12">
|
||||
<motion.div {...fadeInAnimation} className="w-full">
|
||||
<h1 className="text-2xl font-bold text-foreground mb-2">
|
||||
<h1 className="text-2xl font-bold text-foreground mb-2 mt-12">
|
||||
Install & Initialize Codeflash
|
||||
</h1>
|
||||
<p className="text-muted-foreground mb-8 font-medium">
|
||||
|
|
@ -660,7 +679,7 @@ export default function OnboardingPage() {
|
|||
{/* Installation Section */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4">
|
||||
1. Install Codeflash
|
||||
Install Codeflash
|
||||
</h2>
|
||||
<Tabs defaultValue="pip" className="w-full">
|
||||
<TabsList className="w-full justify-start mb-4">
|
||||
|
|
@ -686,7 +705,7 @@ export default function OnboardingPage() {
|
|||
{/* Initialization Section */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4">
|
||||
2. Initialize Codeflash
|
||||
Initialize Codeflash
|
||||
</h2>
|
||||
|
||||
{/* Step 1: Run Initialization */}
|
||||
|
|
@ -810,6 +829,47 @@ export default function OnboardingPage() {
|
|||
</div>
|
||||
)}
|
||||
</StepInstruction>
|
||||
|
||||
{/* Step 3: Install GitHub App */}
|
||||
<StepInstruction
|
||||
number={3}
|
||||
title="Install GitHub app"
|
||||
status={
|
||||
activeInitStep === 3
|
||||
? "active"
|
||||
: activeInitStep > 3
|
||||
? "completed"
|
||||
: "default"
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground font-medium">
|
||||
Codeflash requires this integration to open pull requests with the
|
||||
optimizations for your review.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleGitHubAppInstall}
|
||||
className="bg-[#24292f] hover:bg-[#0d1117] text-white transition-all duration-200
|
||||
rounded-lg flex items-center justify-center gap-2 px-6 py-3 shadow-lg font-medium"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="white"
|
||||
>
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
<span className="font-medium">Install GitHub App</span>
|
||||
<ExternalLink className="w-4 h-4 ml-1" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</StepInstruction>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
@ -820,57 +880,10 @@ export default function OnboardingPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Connect with GitHub Step */}
|
||||
{/* Setup Complete Step */}
|
||||
{currentStepIndex === 2 && (
|
||||
<div className="min-h-screen flex flex-col p-6">
|
||||
<Header />
|
||||
|
||||
<main className="flex-grow flex flex-col items-center justify-center max-w-3xl mx-auto -mt-12">
|
||||
<motion.div {...fadeInAnimation} className="w-full">
|
||||
<h1 className="text-2xl font-bold text-foreground mb-2">Install GitHub app</h1>
|
||||
<p className="text-muted-foreground mb-8 font-medium">
|
||||
Codeflash requires this integration to open pull requests with the optimizations
|
||||
for your review.
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="w-full p-6"
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleGitHubAppInstall}
|
||||
className="bg-[#24292f] hover:bg-[#0d1117] text-white transition-all duration-200
|
||||
rounded-lg flex items-center justify-center gap-2 px-6 py-3 shadow-lg font-medium"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="white"
|
||||
>
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
<span className="font-medium">Install GitHub App</span>
|
||||
<ExternalLink className="w-4 h-4 ml-1" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<NavigationButtons />
|
||||
</motion.div>
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Setup Complete Step */}
|
||||
{currentStepIndex === 3 && (
|
||||
<div className="min-h-screen flex flex-col p-6">
|
||||
{showConfetti && <ConfettiEffect />}
|
||||
<Header />
|
||||
|
||||
<main className="flex-grow flex flex-col items-center justify-center max-w-3xl mx-auto -mt-4">
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
"use client"
|
||||
|
||||
import { useState, useEffect, ReactNode } from "react"
|
||||
import { ConfettiEffect } from "@/components/onboarding/confetti-effect"
|
||||
|
||||
interface ApiKeysClientProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function ApiKeysClient({ children }: ApiKeysClientProps) {
|
||||
const [showConfetti, setShowConfetti] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Check for the session storage flag
|
||||
const shouldShowConfetti = sessionStorage.getItem("showOnboardingConfetti") === "true"
|
||||
|
||||
if (shouldShowConfetti) {
|
||||
// Remove the flag so it only happens once
|
||||
sessionStorage.removeItem("showOnboardingConfetti")
|
||||
|
||||
// Show the confetti
|
||||
setShowConfetti(true)
|
||||
|
||||
// Optionally hide confetti after a few seconds
|
||||
const timer = setTimeout(() => {
|
||||
setShowConfetti(false)
|
||||
}, 5000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
{showConfetti && <ConfettiEffect />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ import { Separator } from "@/components/ui/separator"
|
|||
import { ApiKeyTable } from "./api-key-table"
|
||||
import { type cf_api_keys, PrismaClient } from "@prisma/client"
|
||||
import PostHogClient from "@/lib/posthog"
|
||||
import { ApiKeysClient } from "./api-keys-client"
|
||||
import { VS_CODE_KEY_NAME } from "@codeflash-ai/common"
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
|
|
@ -32,49 +31,47 @@ export default async function APIKeyGenerator(): Promise<JSX.Element> {
|
|||
await posthog.shutdown()
|
||||
|
||||
return (
|
||||
<ApiKeysClient>
|
||||
<div>
|
||||
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight max-w-full pb-1">
|
||||
API Keys
|
||||
</h3>
|
||||
<Separator />
|
||||
{apiKeys.length === 0 ? (
|
||||
<>
|
||||
<p className="leading-7 mt-6">
|
||||
Welcome! Check out the{" "}
|
||||
<a
|
||||
href="https://docs.codeflash.ai/getting-started/local-installation"
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
Getting Started
|
||||
</a>{" "}
|
||||
docs, or create your first API key below to start using Codeflash.
|
||||
</p>
|
||||
<p>
|
||||
For help with setting up Codeflash on your codebase, please check out the Docs or{" "}
|
||||
<a
|
||||
href="https://calendly.com/codeflash-saurabh/codeflash-setup"
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
book a call
|
||||
</a>{" "}
|
||||
with the founder.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{" "}
|
||||
<p className="leading-7 mt-6">
|
||||
These API keys are used to authenticate your requests to Codeflash's AI services.
|
||||
</p>
|
||||
<ApiKeyTable apiKeys={apiKeys} vscodeKeyName={VS_CODE_KEY_NAME} />{" "}
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight max-w-full pb-1">
|
||||
API Keys
|
||||
</h3>
|
||||
<Separator />
|
||||
{apiKeys.length === 0 ? (
|
||||
<>
|
||||
<p className="leading-7 mt-6">
|
||||
Welcome! Check out the{" "}
|
||||
<a
|
||||
href="https://docs.codeflash.ai/getting-started/local-installation"
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
Getting Started
|
||||
</a>{" "}
|
||||
docs, or create your first API key below to start using Codeflash.
|
||||
</p>
|
||||
<p>
|
||||
For help with setting up Codeflash on your codebase, please check out the Docs or{" "}
|
||||
<a
|
||||
href="https://calendly.com/codeflash-saurabh/codeflash-setup"
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
book a call
|
||||
</a>{" "}
|
||||
with the founder.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{" "}
|
||||
<p className="leading-7 mt-6">
|
||||
These API keys are used to authenticate your requests to Codeflash's AI services.
|
||||
</p>
|
||||
<ApiKeyTable apiKeys={apiKeys} vscodeKeyName={VS_CODE_KEY_NAME} />{" "}
|
||||
</>
|
||||
)}
|
||||
|
||||
<CreateApiKeyDialog />
|
||||
</div>
|
||||
</ApiKeysClient>
|
||||
<CreateApiKeyDialog />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue