where did you find us + fixes

feat: track step signup

improve feedback align

packages/backend/src/api/v1/auth/index.ts

@@ -55,6 +55,7 @@ auth.post("/signup", async (ctx: Context) => {
     employeeCount: z.string().optional(),
     orgId: z.string().optional(),
     token: z.string().optional(),
+    whereFindUs: z.string().optional(),
     redirectUrl: z.string().optional(),
     signupMethod: z.enum(["signup", "join"]),
   })
@@ -68,6 +69,7 @@ auth.post("/signup", async (ctx: Context) => {
     employeeCount,
     orgId,
     signupMethod,
+    whereFindUs,
     redirectUrl,
     token,
   } = bodySchema.parse(ctx.request.body)
@@ -157,7 +159,9 @@ auth.post("/signup", async (ctx: Context) => {
         signupMethod === "signup"
           ? `building ${projectName} @ ${orgName} (${employeeCount}).`
           : "joining an org."
-      }`,
+      }
+      
+Found us: ${whereFindUs}`,
       "users",
     )
 

packages/frontend/components/blocks/Feedbacks/index.tsx

@@ -1,5 +1,5 @@
 import { useFixedColorScheme } from "@/utils/hooks"
-import { ActionIcon, Box, Button, Popover, TextInput } from "@mantine/core"
+import { ActionIcon, Button, Group, Popover, TextInput } from "@mantine/core"
 import { IconMessage, IconThumbDown, IconThumbUp } from "@tabler/icons-react"
 import { useState } from "react"
 import { Feedback } from "shared"
@@ -29,7 +29,6 @@ export default function Feedbacks({
   }
 
   function ThumbFeedback({ value }: { value?: "up" | "down" | null }) {
-    console.log(value)
     function ThumbUp() {
       const color = getColor(value === "up" ? "green" : "gray")
       return <IconThumbUp color={color} fill={color} fillOpacity={0.2} />
@@ -41,7 +40,7 @@ export default function Feedbacks({
     }
 
     return (
-      <Box>
+      <Group gap={0}>
         <ActionIcon
           variant="transparent"
           onClick={() => {
@@ -68,7 +67,7 @@ export default function Feedbacks({
         >
           <ThumbUp />
         </ActionIcon>
-      </Box>
+      </Group>
     )
   }
 
@@ -86,6 +85,7 @@ export default function Feedbacks({
             value={comment}
             size="xs"
             mt="xs"
+            placeholder="Add a comment"
             onChange={(e) => setComment(e.target.value)}
           />
           <Button
@@ -104,7 +104,6 @@ export default function Feedbacks({
     )
   }
 
-  console.log(feedback)
   return (
     <>
       <CommentFeedback value={feedback?.comment} />

packages/frontend/components/layout/Sidebar.tsx

@@ -120,14 +120,14 @@ export default function Sidebar() {
       icon: IconShieldBolt,
       link: "/radars",
       resource: "radars",
-      disabled: isSelfHosted ? !org.license.radarEnabled : false,
+      disabled: isSelfHosted ? org.license && !org.license.radarEnabled : false,
     },
     {
       label: "Evaluations",
       icon: IconFlask2Filled,
       link: "/evaluations",
       resource: "evaluations",
-      disabled: isSelfHosted ? !org.license.evalEnabled : false,
+      disabled: isSelfHosted ? org.license && !org.license.evalEnabled : false,
     },
     {
       label: "Settings & Keys",

packages/frontend/pages/signup.tsx

@@ -1,5 +1,5 @@
 import Router, { useRouter } from "next/router"
-import { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 
 import {
   Alert,
@@ -13,6 +13,7 @@ import {
   Paper,
   PasswordInput,
   Radio,
+  Select,
   Stack,
   Text,
   TextInput,
@@ -46,11 +47,29 @@ import { NextSeo } from "next-seo"
 import { useAuth } from "@/utils/auth"
 import config from "@/utils/config"
 
+function getRandomizedChoices() {
+  const choices = [
+    { label: "Google", value: "seo" },
+    { label: "X / Twitter", value: "s" },
+    { label: "LangChain", value: "langchain" },
+    { label: "LiteLLM", value: "litellm" },
+    { label: "Hacker News", value: "hackernews" },
+    { label: "Friend", value: "friend" },
+    { label: "LangFlow", value: "langflow" },
+    { label: "Other", value: "other" },
+  ]
+
+  return choices.sort(() => Math.random() - 0.5)
+}
+
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 function SignupPage() {
   const [loading, setLoading] = useState(false)
   const [step, setStep] = useState(1)
+
+  const choices = useMemo(() => getRandomizedChoices(), [])
+
   const router = useRouter()
 
   const auth = useAuth()
@@ -62,6 +81,7 @@ function SignupPage() {
       projectName: "Project #1",
       orgName: "",
       employeeCount: "",
+      whereFindUs: "",
       password: "",
     },
 
@@ -90,13 +110,15 @@ function SignupPage() {
     projectName,
     orgName,
     employeeCount,
+    whereFindUs,
   }: {
     email: string
     password: string
     name: string
     projectName: string
     orgName: string
     employeeCount: string
+    whereFindUs: string
   }) {
     setLoading(true)
 
@@ -115,6 +137,7 @@ function SignupPage() {
           projectName,
           orgName,
           employeeCount,
+          whereFindUs,
           signupMethod: "signup",
         },
       })
@@ -125,24 +148,24 @@ function SignupPage() {
 
       auth.setJwt(token)
 
+      analytics.track("Signup", {
+        email,
+        name,
+        projectName,
+        orgName,
+        whereFindUs,
+        employeeCount,
+      })
+
       if (!config.IS_SELF_HOSTED) {
         notifications.show({
           icon: <IconCheck size={18} />,
           color: "teal",
           title: "Email sent",
           message: "Check your emails for the confirmation link",
         })
-      } else {
-        nextStep()
       }
 
-      analytics.track("Signup", {
-        email,
-        name,
-        projectName,
-        orgName,
-        employeeCount,
-      })
       nextStep()
     } catch (error) {
       console.error(error)
@@ -166,7 +189,13 @@ function SignupPage() {
       form.setFieldValue("orgName", form.values.name + "'s Org")
     }
 
+    analytics.track("Signup Step " + (step + 1), {
+      email: form.values.email,
+      name: form.values.name,
+    })
+
     setStep(step + 1)
+
     router.query.step = String(step + 1)
     router.push(router)
   }
@@ -296,7 +325,7 @@ function SignupPage() {
                           />
 
                           <Radio.Group
-                            label="Employee count"
+                            label="Company Size"
                             error={
                               form.errors.employeeCount &&
                               "This field is required"
@@ -311,6 +340,14 @@ function SignupPage() {
                             </Group>
                           </Radio.Group>
 
+                          <Select
+                            label="Where did you find us?"
+                            description="This helps us focus our efforts."
+                            placeholder="Select an option"
+                            data={choices}
+                            {...form.getInputProps("whereFindUs")}
+                          />
+
                           <Stack gap="xs">
                             <Button
                               size="md"
@@ -420,8 +457,8 @@ function SignupPage() {
                     config={{
                       hideEventTypeDetails: "true",
                       layout: "month_view",
-                      name: "vince loewe", //form.values.name,
-                      email: "[email protected]", //form.values.email,
+                      name: form.values.name,
+                      email: form.values.email,
                     }}
                   />
                   <Button