feat: Introduce new join page with team member display, futuristic hero, glowing AI chat assistant UI, and assistant API endpoint.

Author: a3ro-dev

app/api/assistant/route.ts

@@ -33,6 +33,7 @@ You are the official AI assistant for Bits&Bytes, a teen-led code club based in
 - **Mission:** Innovation, collaboration, and real-world impact through technology.
 - **Activities:** Hackathons (e.g., Scrapyard Lucknow), workshops, and student mentorship.
 - **Contact:** hello@gobitsnbytes.org
+- **GitHub:** https://github.com/gobitsnbytes
 
 **How to get answers:**
 1. **For Team/Roles:** DO NOT guess. Always use the 'find_team_expert' or 'recommend_role' tools. The team structure is dynamic.
@@ -51,6 +52,8 @@ You are the official AI assistant for Bits&Bytes, a teen-led code club based in
 
 Rules:
 - Always stay truthful to Bits&Bytes.
+- Be extremely concise, conversational, and direct. Avoid long, multi-paragraph summaries or filler text. Get straight to the point.
+- Do not use 'suggest_navigation' and 'highlight_text' in the exact same response. If you navigate the user to a new page, wait for them to see it; do not highlight right away since the page will be loading.
 - If you can't find the answer in the tools or page content, admit it:
   "I’m not sure about that based on the information publicly available on this site."
 `
@@ -309,104 +312,95 @@ export async function POST(req: NextRequest) {
         messages,
         tools,
         tool_choice: "auto",
-        max_completion_tokens: 400,
+        max_tokens: 400,
       })
     }
 
     let modelUsed = PRIMARY_MODEL
-    let completion
+    let currentMessages = [...baseMessages]
+    let actionToClient: AssistantAction | undefined
 
-    try {
-      completion = await runCompletion(PRIMARY_MODEL, baseMessages)
-    } catch (err) {
-      const apiError = err as APIError
-      const code = (apiError as any)?.code ?? (apiError as any)?.error?.code
-      const status = (apiError as any)?.status
-      const shouldFallback =
-        code === "model_not_found" ||
-        code === "unsupported_parameter" ||
-        code === "unsupported_value" ||
-        status === 403
-
-      if (shouldFallback) {
-        modelUsed = FALLBACK_MODEL
-        completion = await runCompletion(FALLBACK_MODEL, baseMessages)
-      } else {
-        throw err
+    for (let i = 0; i < 5; i++) {
+      let completion
+      try {
+        completion = await runCompletion(PRIMARY_MODEL, currentMessages)
+      } catch (err) {
+        const apiError = err as APIError
+        const code = (apiError as any)?.code ?? (apiError as any)?.error?.code
+        const status = (apiError as any)?.status
+        const shouldFallback =
+          code === "model_not_found" ||
+          code === "unsupported_parameter" ||
+          code === "unsupported_value" ||
+          status === 403
+
+        if (shouldFallback) {
+          modelUsed = FALLBACK_MODEL
+          completion = await runCompletion(FALLBACK_MODEL, currentMessages)
+        } else {
+          throw err
+        }
       }
-    }
 
-    const choice = completion.choices[0]
-    const message = choice?.message
+      const choice = completion.choices[0]
+      const message = choice?.message
 
-    // If no tool calls, stream the final answer directly.
-    if (!message?.tool_calls || message.tool_calls.length === 0) {
-      try {
-        return await streamAssistantResponse(modelUsed, baseMessages)
-      } catch (streamErr) {
-        console.error("Assistant stream error:", streamErr)
-        const answer = message?.content?.trim()
-        return NextResponse.json({
-          answer: answer ?? "I’m not sure about that based on the information publicly available on this site.",
-        })
+      if (!message?.tool_calls || message.tool_calls.length === 0) {
+        break // No more tool calls required
       }
-    }
 
-    // Handle first tool call for now (this already gives agentic behaviour).
-    const toolCall = message.tool_calls[0]
-    const toolName = toolCall.function.name
-    let toolArgs: any = {}
+      currentMessages.push(message)
 
-    try {
-      toolArgs = toolCall.function.arguments ? JSON.parse(toolCall.function.arguments) : {}
-    } catch {
-      toolArgs = {}
-    }
+      for (const toolCall of message.tool_calls) {
+        const toolName = toolCall.function.name
+        let toolArgs: any = {}
+        try {
+          toolArgs = toolCall.function.arguments ? JSON.parse(toolCall.function.arguments) : {}
+        } catch {
+          toolArgs = {}
+        }
 
-    let toolResult: any = null
-    let action: AssistantAction | undefined
-
-    if (toolName === "submit_contact_form") {
-      toolResult = await handleSubmitContactTool(toolArgs)
-    } else if (toolName === "suggest_navigation") {
-      const path = normalizePath(toolArgs?.path)
-      toolResult = { success: true, path }
-      action = { type: "navigate" as const, path }
-    } else if (toolName === "get_site_section") {
-      toolResult = await handleGetSiteSectionTool(toolArgs?.section ?? "home", req)
-    } else if (toolName === "find_team_expert") {
-      const query = (toolArgs?.query ?? "").toString()
-      const experts = findExperts(query)
-      toolResult = { query, experts }
-    } else if (toolName === "recommend_role") {
-      const skills = Array.isArray(toolArgs?.skills) ? toolArgs.skills : []
-      const interests = Array.isArray(toolArgs?.interests) ? toolArgs.interests : []
-      const recommendation = recommendRoles(skills, interests)
-      toolResult = { skills, interests, recommendation }
-    } else if (toolName === "highlight_text") {
-      const textSnippet = (toolArgs?.textSnippet ?? "").toString()
-      toolResult = { success: true, textSnippet }
-      action = { type: "highlight" as const, textSnippet }
-    } else {
-      toolResult = { success: false, message: `Unknown tool: ${toolName}` }
-    }
+        let toolResult: any = null
+
+        if (toolName === "submit_contact_form") {
+          toolResult = await handleSubmitContactTool(toolArgs)
+        } else if (toolName === "suggest_navigation") {
+          const path = normalizePath(toolArgs?.path)
+          toolResult = { success: true, path }
+          actionToClient = { type: "navigate" as const, path }
+        } else if (toolName === "get_site_section") {
+          toolResult = await handleGetSiteSectionTool(toolArgs?.section ?? "home", req)
+        } else if (toolName === "find_team_expert") {
+          const query = (toolArgs?.query ?? "").toString()
+          const experts = findExperts(query)
+          toolResult = { query, experts }
+        } else if (toolName === "recommend_role") {
+          const skills = Array.isArray(toolArgs?.skills) ? toolArgs.skills : []
+          const interests = Array.isArray(toolArgs?.interests) ? toolArgs.interests : []
+          const recommendation = recommendRoles(skills, interests)
+          toolResult = { skills, interests, recommendation }
+        } else if (toolName === "highlight_text") {
+          const textSnippet = (toolArgs?.textSnippet ?? "").toString()
+          toolResult = { success: true, textSnippet }
+          actionToClient = { type: "highlight" as const, textSnippet }
+        } else {
+          toolResult = { success: false, message: `Unknown tool: ${toolName}` }
+        }
 
-    const messagesWithTool: OpenAI.Chat.ChatCompletionMessageParam[] = [
-      ...baseMessages,
-      message,
-      {
-        role: "tool",
-        tool_call_id: toolCall.id,
-        content: JSON.stringify(toolResult),
-      } as OpenAI.Chat.ChatCompletionToolMessageParam,
-    ]
+        currentMessages.push({
+          role: "tool",
+          tool_call_id: toolCall.id,
+          content: JSON.stringify(toolResult),
+        } as OpenAI.Chat.ChatCompletionToolMessageParam)
+      }
+    }
 
     try {
-      return await streamAssistantResponse(modelUsed, messagesWithTool, action)
+      return await streamAssistantResponse(modelUsed, currentMessages, actionToClient)
     } catch (streamErr) {
       console.error("Assistant stream error after tool call:", streamErr)
       return NextResponse.json(
-        { error: "Failed to stream the assistant response after tool call." },
+        { error: "Failed to stream the assistant response." },
         { status: 500 }
       )
     }
@@ -427,7 +421,7 @@ async function streamAssistantResponse(
   const completion = await openai.chat.completions.create({
     model,
     messages,
-    max_completion_tokens: 400,
+    max_tokens: 400,
     stream: true,
   })
 
@@ -444,6 +438,7 @@ async function streamAssistantResponse(
       try {
         for await (const part of completion) {
           const delta = part.choices[0]?.delta
+
           if (delta?.content) {
             send({ type: "token", content: delta.content })
           }

app/join/page.tsx

@@ -122,7 +122,7 @@ export default function Join() {
         <PageSection align="center">
           <div className="mx-auto w-full max-w-3xl space-y-6 sm:space-y-8">
             <GlassContainer className="p-8 md:p-12 text-center" glowColor="both">
-              <div className="space-y-6">
+              <div className="flex flex-col items-center gap-6">
                 <div className="inline-flex items-center gap-2 text-xs sm:text-sm text-white/60 font-bold uppercase tracking-widest">
                   <Clock className="h-4 w-4 text-(--brand-pink)" />
                   <span>Takes less than 2 minutes</span>
@@ -135,14 +135,14 @@ export default function Join() {
                   data-tally-align-left="1"
                   data-tally-hide-title="1"
                   data-tally-overlay="1"
-                  className="group rounded-full bg-(--brand-pink) px-12 py-8 text-lg md:text-xl font-black text-white shadow-[0_0_30px_rgba(228,90,146,0.5)] transition-all hover:scale-[1.03] hover:shadow-[0_0_60px_rgba(228,90,146,0.7)] w-full sm:w-auto"
+                  className="group inline-flex items-center justify-center gap-2 rounded-full bg-(--brand-pink) px-10 py-4 text-lg md:text-xl font-black text-white shadow-[0_0_30px_rgba(228,90,146,0.5)] transition-all hover:scale-[1.03] hover:shadow-[0_0_60px_rgba(228,90,146,0.7)] w-full sm:w-auto max-w-xs"
                 >
                   Apply to Join
-                  <ArrowRight className="ml-2 h-6 w-6 transition-transform group-hover:translate-x-1" />
+                  <ArrowRight className="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1" />
                 </Button>
 
                 <p className="text-sm text-white/50 font-medium">
-                  We review applications weekly · You'll hear back within 7 days
+                  We review applications weekly · You&apos;ll hear back within 7 days
                 </p>
               </div>
             </GlassContainer>

components/team-case-study.tsx

@@ -108,8 +108,8 @@ function TeamCard({
       <div
         className={cn(
           "relative flex cursor-pointer flex-col rounded-xl sm:rounded-2xl p-3 sm:p-4 transition-all duration-700",
-          // Fixed card height for consistency across all cards
-          "h-[460px] sm:h-[500px] md:h-[540px]",
+          // Use h-full so CSS grid can ensure equal, content-fitting heights across all cards
+          "h-full",
           "md:backdrop-blur-lg",
           // All core team members get the pretty pink border
           "border-2 border-[var(--brand-pink)]/40 shadow-[0_0_20px_rgba(228,90,146,0.2)]",
@@ -159,7 +159,7 @@ function TeamCard({
             {/* Header with role, name, and LinkedIn */}
             <div className="flex items-start justify-between gap-2 mb-2">
               <div className="flex-1 min-w-0">
-                <span className="text-[0.6rem] sm:text-[0.7rem] font-black uppercase tracking-[0.1em] text-[var(--brand-pink)] mb-0.5 block">
+                <span className="text-[0.6rem] sm:text-[0.7rem] font-black uppercase tracking-[0.1em] text-[var(--brand-pink)] mb-1 block leading-normal">
                   {member.role}
                 </span>
                 <h3 className="font-display text-lg sm:text-xl md:text-2xl font-bold tracking-tight leading-tight">

components/ui/glowing-ai-chat-assistant.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 
-import { Mic, Send, Info, Bot, X } from "lucide-react"
+import { Mic, Send, Info, Bot, X, Trash } from "lucide-react"
 
 interface ChatMessage {
   id: number
@@ -15,7 +15,7 @@ interface ChatMessage {
 }
 
 const MAX_CHARS = 2000
-const MAX_HISTORY = 40
+const MAX_HISTORY = 8
 const STORAGE_KEY = "bb-floating-assistant-state-v1"
 const QUICK_PROMPTS = [
   "What is Bits&Bytes?",
@@ -229,6 +229,7 @@ const FloatingAiAssistant: React.FC = () => {
       const decoder = new TextDecoder()
       let buffer = ""
       let navigatePath: string | null = null
+      let highlightSnippet: string | null = null
 
       while (true) {
         const { value, done } = await reader.read()
@@ -264,6 +265,7 @@ const FloatingAiAssistant: React.FC = () => {
             if (actionData?.type === "navigate" && typeof actionData.path === "string") {
               navigatePath = actionData.path
             } else if (actionData?.type === "highlight" && typeof actionData.textSnippet === "string") {
+              highlightSnippet = actionData.textSnippet
               setTimeout(() => {
                 const text = actionData.textSnippet as string
                 if ((window as any).find && (window as any).find(text)) {
@@ -315,11 +317,12 @@ const FloatingAiAssistant: React.FC = () => {
         }
       }
 
-      updateMessageContent(assistantMessageId, (prev) =>
-        prev && prev.trim().length > 0
-          ? prev
-          : "I'm not sure about that based on the information publicly available on this site."
-      )
+      updateMessageContent(assistantMessageId, (prev) => {
+        if (prev && prev.trim().length > 0) return prev
+        if (navigatePath) return "Taking you there! 🚀"
+        if (highlightSnippet) return "Here's what I found for you! ✨"
+        return "I'm not sure about that based on the information publicly available on this site."
+      })
 
       if (navigatePath) {
         router.push(navigatePath)
@@ -479,6 +482,19 @@ const FloatingAiAssistant: React.FC = () => {
                   <span className="rounded-2xl bg-zinc-800/70 px-2 py-1 text-[0.65rem] font-medium text-zinc-200">
                     {modelName}
                   </span>
+                  <button
+                    onClick={() => {
+                      setMessages([])
+                      setCharCount(0)
+                      setMessage("")
+                      window.localStorage.removeItem(STORAGE_KEY)
+                    }}
+                    className="inline-flex h-7 w-7 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/80 hover:text-red-400 transition-colors"
+                    aria-label="Clear chat"
+                    title="Clear chat"
+                  >
+                    <Trash className="h-3.5 w-3.5" />
+                  </button>
                   <button
                     onClick={() => {
                       streamControllerRef.current?.abort()

components/ui/hero-futuristic.tsx

@@ -60,19 +60,19 @@ export const HeroFuturistic = () => {
               <div className="flex flex-col gap-4 sm:flex-row w-full mt-2">
                 <Button
                   asChild
-                  className="h-14 px-8 rounded-full bg-(--brand-pink) text-base font-bold text-white shadow-[0_0_30px_rgba(228,90,146,0.5)] hover:shadow-[0_0_50px_rgba(228,90,146,0.7)] transition-all hover:scale-[1.02] active:scale-[0.98]"
+                  className="w-full sm:flex-1 h-14 px-8 rounded-full bg-(--brand-pink) text-base font-bold text-white shadow-[0_0_30px_rgba(228,90,146,0.5)] hover:shadow-[0_0_50px_rgba(228,90,146,0.7)] transition-all hover:scale-[1.02] active:scale-[0.98]"
                 >
-                  <Link href="/join">
+                  <Link href="/join" className="flex items-center justify-center gap-2">
                     Join the crew
-                    <ArrowRight className="ml-2 h-5 w-5" />
+                    <ArrowRight className="h-5 w-5 shrink-0" />
                   </Link>
                 </Button>
                 <Button
                   asChild
                   variant="outline"
-                  className="h-14 px-8 rounded-full border-white/20 bg-white/5 text-base font-semibold text-white backdrop-blur-md hover:bg-white/10 transition-all hover:scale-[1.02]"
+                  className="w-full sm:flex-1 h-14 px-8 rounded-full border-white/20 bg-white/5 text-base font-semibold text-white backdrop-blur-md hover:bg-white/10 transition-all hover:scale-[1.02]"
                 >
-                  <Link href="/impact">See what we&apos;ve built</Link>
+                  <Link href="/impact" className="flex items-center justify-center">See what we&apos;ve built</Link>
                 </Button>
               </div>