feat: AI chat landing page

update Ask AI styling and functionality to match

Author: derrekcoleman

app/api/chat/route.ts

@@ -3,6 +3,7 @@ import { OpenAI } from "openai";
 import path from "path";
 
 import { MessageRecord } from "@/components/ai/context";
+import { SUGGESTED_QUESTIONS } from "@/components/ai/suggestions";
 import {
   DocsEmbedding,
   REJECTION_MESSAGE,
@@ -48,6 +49,48 @@ setInterval(() => {
   }
 }, MAX_SESSION_AGE);
 
+/**
+ * Generate contextual follow-up suggestions based on the conversation.
+ * Uses OpenAI to pick 3 most relevant questions from the curated pool and rephrase them
+ * to fit the conversation context.
+ */
+async function generateContextualSuggestions(
+  client: OpenAI,
+  conversationHistory: MessageRecord[]
+): Promise<string[]> {
+  try {
+    const response = await client.chat.completions.create({
+      model: MODEL,
+      messages: [
+        {
+          role: "system",
+          content: `You are helping generate follow-up questions for a user chatting with the Recall documentation AI.
+
+Here is a curated pool of key questions:
+${SUGGESTED_QUESTIONS.map((q, i) => `${i + 1}. ${q}`).join("\n")}
+
+Based on the conversation history, pick 3 most relevant questions from this pool and rephrase them to fit the conversation context as potential follow-up questions shown to the user for their next input.
+
+Return ONLY a JSON array of 3 strings, nothing else. Example: ["Question 1?", "Question 2?", "Question 3?"]`,
+        },
+        ...conversationHistory,
+      ],
+      temperature: 0.7,
+    });
+
+    const content = response.choices[0]?.message?.content?.trim();
+    if (!content) return [];
+
+    // Parse the JSON array response
+    const suggestions = JSON.parse(content) as string[];
+    return Array.isArray(suggestions) ? suggestions.slice(0, 3) : [];
+  } catch (error) {
+    console.error("Error generating suggestions:", error);
+    // Fallback to random questions if generation fails
+    return [...SUGGESTED_QUESTIONS].sort(() => Math.random() - 0.5).slice(0, 3);
+  }
+}
+
 export async function POST(request: Request) {
   if (!openai) {
     return new Response(JSON.stringify({ error: "OpenAI API key not configured" }), {
@@ -122,16 +165,21 @@ export async function POST(request: Request) {
       stream: true,
     });
 
-    // Create a transform stream to append source links
+    // Create a transform stream to append source links and suggestions
     const transform = new TransformStream({
       transform(chunk, controller) {
         controller.enqueue(chunk);
       },
-      flush(controller) {
+      async flush(controller) {
         // Add reference links after the stream is done
         const referenceLinks = getReferenceLinks(relevant);
-        const sourceJson = JSON.stringify({ references: referenceLinks }) + "\n"; // Match OpenAI response formatting
+        const sourceJson = JSON.stringify({ references: referenceLinks }) + "\n";
         controller.enqueue(new TextEncoder().encode(sourceJson));
+
+        // Generate and add contextual suggestions
+        const suggestions = await generateContextualSuggestions(openai, messages);
+        const suggestionsJson = JSON.stringify({ suggestions }) + "\n";
+        controller.enqueue(new TextEncoder().encode(suggestionsJson));
       },
     });
 

app/layout.tsx

@@ -48,7 +48,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
               buttonVariants({
                 color: "secondary",
               }),
-              "bg-secondary/50 text-fd-secondary-foreground/80 fixed right-4 bottom-4 z-10 gap-2 rounded-xl shadow-lg backdrop-blur-lg md:right-6 md:bottom-8"
+              "bg-secondary/50 text-fd-secondary-foreground/80 fixed right-4 bottom-4 z-10 gap-2 shadow-lg backdrop-blur-lg md:right-6 md:bottom-8"
             )}
           >
             <MessageCircle className="size-4" />

components/ai/engines/openai.ts

@@ -21,6 +21,10 @@ type ReferencesResponse = {
   references: MessageReference[];
 };
 
+type SuggestionsResponse = {
+  suggestions: string[];
+};
+
 export async function createOpenAIEngine(): Promise<Engine> {
   const sessionId = localStorage.getItem("recallChatSessionId") || crypto.randomUUID();
   localStorage.setItem("recallChatSessionId", sessionId);
@@ -100,6 +104,11 @@ export async function createOpenAIEngine(): Promise<Engine> {
             message.references = data.references;
             onUpdate?.(content);
           }
+          if ("suggestions" in json && !content.includes(REJECTION_MESSAGE)) {
+            const data = json as SuggestionsResponse;
+            message.suggestions = data.suggestions;
+            onUpdate?.(content);
+          }
         }
       }