[ENG-1101] Add session tracking step in welcome flow

web/components/templates/welcome/steps/sessionTracking.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { Button } from "@tremor/react";
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
+import { DiffHighlight } from "../diffHighlight";
+import HcBadge from "../../../ui/hcBadge";
+
+interface SessionTrackingProps {
+  previousStep: () => void;
+  nextStep: () => void;
+}
+
+const SessionTracking: React.FC<SessionTrackingProps> = ({
+  previousStep,
+  nextStep,
+}) => {
+  return (
+    <div className="flex flex-col space-y-4 max-w-2xl">
+      <h2 className="text-2xl font-bold">Set up Session Tracking</h2>
+      <HcBadge title="Beta" size="sm" />
+      <p>
+        Session tracking allows you to group related requests together.
+        Here&apos;s how to implement it:
+      </p>
+      <ol className="list-decimal list-inside space-y-2">
+        <li>Generate a unique session ID for each user session</li>
+        <li>Add the &quot;Helicone-Session-Id&quot; header to your requests</li>
+        <li>Optionally, add the &quot;Helicone-Session-Path&quot; header</li>
+      </ol>
+      <DiffHighlight
+        code={`
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  baseURL: "https://oai.helicone.ai/v1",
+  defaultHeaders: {
+    "Helicone-Auth": "Bearer ${process.env.HELICONE_API_KEY}",
+  },
+});
+
+const session = randomUUID();
+
+openai.chat.completions.create(
+  {
+    messages: [
+      {
+        role: "user",
+        content: "Generate an abstract for a course on space.",
+      },
+    ],
+    model: "gpt-4",
+  },
+  {
+    headers: {
+      "Helicone-Session-Id": session,
+      "Helicone-Session-Path": "/abstract",
+    },
+  }
+);
+`}
+        language="typescript"
+        newLines={[]}
+        oldLines={[]}
+      />
+      <p>
+        For more detailed information, check out our{" "}
+        <a
+          href="https://docs.helicone.ai/features/sessions"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500 hover:underline"
+        >
+          session tracking documentation
+        </a>
+        .
+      </p>
+      <div className="flex justify-between mt-4">
+        <Button icon={ArrowLeftIcon} variant="secondary" onClick={previousStep}>
+          Previous
+        </Button>
+        <Button icon={ArrowRightIcon} onClick={nextStep}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default SessionTracking;

web/components/templates/welcome/steps/stepList.tsx

@@ -38,7 +38,7 @@ export default function StepList(props: {
           : "upcoming",
     },
     {
-      name: "Explore features and tooling",
+      name: "Set up session tracking",
       step: 4,
       status:
         currentStep === 4
@@ -48,7 +48,7 @@ export default function StepList(props: {
           : "upcoming",
     },
     {
-      name: "Send your first event",
+      name: "Explore features and tooling",
       step: 5,
       status:
         currentStep === 5
@@ -57,6 +57,16 @@ export default function StepList(props: {
           ? "complete"
           : "upcoming",
     },
+    {
+      name: "Send your first event",
+      step: 6,
+      status:
+        currentStep === 6
+          ? "current"
+          : currentStep > 6
+          ? "complete"
+          : "upcoming",
+    },
   ];
 
   return (

web/components/templates/welcome/welcomePage.tsx

@@ -7,6 +7,7 @@ import GenerateAPIKey from "./steps/generateAPIKey";
 import Integrations from "./steps/integrations";
 import Features from "./steps/features";
 import EventListen from "./steps/eventListen";
+import SessionTracking from "./steps/sessionTracking";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useOrg } from "../../layout/organizationContext";
 import { getJawnClient } from "../../../lib/clients/jawn";
@@ -64,7 +65,7 @@ const WelcomePageV2 = (props: WelcomePageV2Props) => {
         handleStepChange(4);
       }}
     />,
-    <Features
+    <SessionTracking
       key={4}
       previousStep={function (): void {
         handleStepChange(3);
@@ -73,11 +74,20 @@ const WelcomePageV2 = (props: WelcomePageV2Props) => {
         handleStepChange(5);
       }}
     />,
-    <EventListen
+    <Features
       key={5}
       previousStep={function (): void {
         handleStepChange(4);
       }}
+      nextStep={function (): void {
+        handleStepChange(6);
+      }}
+    />,
+    <EventListen
+      key={6}
+      previousStep={function (): void {
+        handleStepChange(5);
+      }}
       nextStep={async function () {
         const jawn = getJawnClient(orgContext?.currentOrg?.id ?? "");
         await jawn.POST("/v1/organization/onboard", {