fix copilotkitwrapper error

Author: wenluowang

components/CopilotKitWrapper.jsx

@@ -16,7 +16,6 @@ import {
 import "@copilotkit/react-ui/styles.css";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { fetchAllGithubContent } from "../utils/fetchGithubContent";
 import {
   NavigationCard,
   ProductSelector,
@@ -165,8 +164,6 @@ routes from the PAGE ROUTE MAP above. NEVER invent routes that are not in the ma
 // ── Inner component (has access to CopilotKit context) ──────────────────
 function AppWithContext({ children }) {
   const router = useRouter();
-  const enableGithubContext =
-    process.env.NEXT_PUBLIC_ENABLE_GITHUB_CONTEXT === "true";
 
   // ─ state ─────────────────────────────────────────────────────────────
   const [docsCtx, setDocsCtx] = useState(null);      // parsed docs-context.json
@@ -219,11 +216,38 @@ function AppWithContext({ children }) {
     return `## ${currentPage.title} (CURRENT PAGE)\nURL: ${currentPage.url}\n\n${currentPage.content}`;
   }, [currentPage]);
 
-  // Extract headings from current page for suggestion generation
-  const currentPageHeadings = useMemo(() => {
-    if (!currentPage?.content) return [];
-    const matches = currentPage.content.match(/^#{1,3}\s+.+$/gm) || [];
-    return matches.map((h) => h.replace(/^#+\s+/, "")).slice(0, 8);
+  const currentPageRelatedPages = useMemo(() => {
+    const route = currentPage?.route || "/";
+
+    if (route === "/") {
+      return [
+        { route: "/plan-your-integration", title: "Plan Your Integration" },
+        { route: "/android-terminals/overview", title: "Android Overview" },
+        { route: "/linux-terminals/getting-started", title: "Linux Getting Started" },
+      ];
+    }
+
+    if (route.startsWith("/android-terminals")) {
+      return [
+        { route: "/android-terminals/overview", title: "Android Overview" },
+        { route: "/android-terminals/set-up-integration", title: "Set Up Integration" },
+        { route: "/android-terminals/accept-card-payment", title: "Accept Card Payment" },
+      ];
+    }
+
+    if (route.startsWith("/linux-terminals")) {
+      return [
+        { route: "/linux-terminals/getting-started", title: "Linux Getting Started" },
+        { route: "/linux-terminals/transaction-flow", title: "Transaction Flow" },
+        { route: "/linux-terminals/best-practices", title: "Best Practices" },
+      ];
+    }
+
+    return [
+      { route: "/plan-your-integration", title: "Plan Your Integration" },
+      { route: "/how-terminal-works", title: "How Terminal Works" },
+      { route: "/linux-terminals/getting-started", title: "Linux Getting Started" },
+    ];
   }, [currentPage]);
 
   // ─ 1. Current page — highest priority ────────────────────────────────
@@ -241,23 +265,7 @@ function AppWithContext({ children }) {
     value: docsIndexText || "Loading documentation index…",
   });
 
-  // ─ 3. GitHub repo content — opt-in only because it is expensive to load ─
-  useCopilotReadable(
-    enableGithubContext
-      ? {
-          description:
-            "GITHUB REPOSITORY CONTENT — READMEs and key files from official Dspread repos. " +
-            "Use exact code from this content when users ask about source code.",
-          value: "GitHub context is enabled, but loaded only when the feature flag is on.",
-        }
-      : {
-          description:
-            "GITHUB REPOSITORY CONTENT is disabled by default to reduce runtime pressure.",
-          value: "GitHub context disabled",
-        }
-  );
-
-  // ─ 4. Product model → category mapping (always available) ────────────
+  // ─ 3. Product model → category mapping (always available) ────────────
   useCopilotReadable({
     description:
       "PRODUCT MODEL MAPPING — use this to identify which documentation section applies to the user's terminal model.",
@@ -285,21 +293,16 @@ Key differences:
     [router],
   );
 
-  // ─ Navigation action — AI calls this to jump to a docs page ──────────
-  // Now with AGENTIC UI: renders a styled card inline in the chat.
   useCopilotAction({
     name: "navigateToPage",
     description:
       "Navigate the user's browser to a specific documentation page. " +
-      "Call this EVERY TIME your answer relates to a specific page. " +
-      "ONLY use routes from the PAGE ROUTE MAP. Valid routes: " +
-      VALID_ROUTES.join(", "),
+      "Use this whenever the answer relates to a specific docs route.",
     parameters: [
       {
         name: "route",
         type: "string",
-        description:
-          'The page route to navigate to. MUST be one of the valid routes from the PAGE ROUTE MAP. Example: "/android-terminals/accept-card-payment"',
+        description: "The page route to navigate to.",
         required: true,
         enum: VALID_ROUTES,
       },
@@ -310,24 +313,6 @@ Key differences:
         required: true,
       },
     ],
-    handler: ({ route, pageTitle }) => {
-      // Normalize: strip trailing slash for comparison
-      const normalized = (route || "").replace(/\/+$/, "") || "/";
-      if (!VALID_ROUTES.includes(normalized)) {
-        // Find closest match
-        const match = VALID_ROUTES.find((r) =>
-          r.includes(normalized.split("/").pop())
-        );
-        if (match) {
-          router.push(match);
-          return `Navigated to "${pageTitle}" (${match}) [auto-corrected from ${route}]`;
-        }
-        return `Invalid route "${route}". Valid routes: ${VALID_ROUTES.join(", ")}`;
-      }
-      router.push(normalized);
-      return `Navigated to "${pageTitle}" (${normalized})`;
-    },
-    // ── Agentic UI: show navigation card in chat ──
     render: ({ args, status }) => (
       <NavigationCard
         route={args?.route || "/"}
@@ -337,93 +322,54 @@ Key differences:
     ),
   });
 
-  // ─ Product selector action — interactive product type picker ──────────
-  // Uses renderAndWaitForResponse: the AI pauses while user picks a product.
   useCopilotAction({
     name: "selectProductType",
     description:
-      "Show an interactive product type selector card. Call this when you need " +
-      "the user to choose their product type (Smart POS, mPOS, Linux, Cloud Speaker) " +
-      "and you want to present a visual picker instead of asking via text. " +
-      "ONLY call this once at the start of a conversation when the product type is unknown.",
+      "Show the interactive product selector when the user's device type is unknown.",
     parameters: [],
     renderAndWaitForResponse: ({ respond, status }) => (
       <ProductSelector respond={respond} status={status} />
     ),
   });
 
-  // ─ Show related pages action — displays a grid of related pages ───────
   useCopilotAction({
     name: "showRelatedPages",
     description:
-      "Show a card with related documentation pages. Call this when you want to " +
-      "recommend multiple pages to the user, for example at the end of an answer. " +
-      "Pass an array of pages with route and title.",
-    parameters: [
-      {
-        name: "pages",
-        type: "object[]",
-        description: "Array of related pages to display",
-        attributes: [
-          {
-            name: "route",
-            type: "string",
-            description: "Page route (must be a valid route from PAGE ROUTE MAP)",
-            required: true,
-          },
-          {
-            name: "title",
-            type: "string",
-            description: "Human-readable page title",
-            required: true,
-          },
-        ],
-        required: true,
-      },
-    ],
-    handler: ({ pages }) => {
-      return `Showing ${(pages || []).length} related pages.`;
-    },
-    render: ({ args, status }) => (
+      "Show a lightweight card with related documentation pages.",
+    parameters: [],
+    render: ({ status }) => (
       <RelatedPagesCard
-        pages={args?.pages || []}
+        pages={currentPageRelatedPages}
         status={status}
         onNavigate={handleNavigate}
       />
     ),
   });
 
-  // ─ Progress/guide action — shows step-by-step integration guide ───────
   useCopilotAction({
     name: "showIntegrationGuide",
     description:
-      "Show a step-by-step progress card for integration guidance. " +
-      "Use this when walking a user through a multi-step process like " +
-      "SDK setup, payment integration, or certification. " +
-      "Provide the list of steps and the current step index (0-based).",
+      "Show a simple step-by-step progress card for multi-step documentation flows.",
     parameters: [
       {
         name: "title",
         type: "string",
-        description: "Title of the integration guide. E.g. 'Android SDK Setup'",
+        description: "Guide title.",
         required: true,
       },
       {
         name: "steps",
         type: "string[]",
-        description: "List of step descriptions in order.",
+        description: "Ordered list of steps.",
         required: true,
       },
       {
         name: "currentStep",
         type: "number",
-        description: "The index of the current step being worked on (0-based).",
+        description: "Zero-based step index.",
         required: true,
       },
     ],
-    handler: ({ title, steps, currentStep }) => {
-      return `Integration guide: "${title}" — step ${currentStep + 1} of ${(steps || []).length}`;
-    },
     render: ({ args, status }) => (
       <ProgressCard
         title={args?.title || "Guide"}
@@ -434,118 +380,36 @@ Key differences:
     ),
   });
 
-  // ─ Dynamic suggestion instructions based on current page ──────────────
-  const suggestionInstructions = useMemo(() => {
-    const pageTitle = currentPage?.title || "Overview";
-    const route = currentPage?.route || "/";
-    const headings = currentPageHeadings.length > 0
-      ? `\nThis page has these sections: ${currentPageHeadings.join(", ")}`
-      : "";
-
-    // Determine which sibling/related pages to suggest
-    let relatedSuggestions = "";
-    if (route === "/" || !currentPage) {
-      relatedSuggestions = `
-Suggest these topics (pick 3-5):
-- "I have a Smart POS (D30/D60), how do I start?"
-- "How do I set up a Linux terminal?"
-- "What's the difference between Smart POS and mPOS?"
-- "How do I integrate with a payment gateway?"
-- "I need help with EMV L3 certification"
-- "How does the Cloud Speaker work?"`;
-    } else if (route.startsWith("/android-terminals")) {
-      relatedSuggestions = `
-The user is reading Android terminal docs. Suggest questions about:
-- Accepting card payments (if not on that page)
-- Printing receipts (if not on that page)
-- Scanning QR/Bar codes (if not on that page)
-- Setting up the SDK (if not on that page)
-- Customizing the OS
-Also suggest 1-2 questions SPECIFIC to this page's content based on the headings.`;
-    } else if (route.startsWith("/linux-terminals")) {
-      relatedSuggestions = `
-The user is reading Linux terminal docs. Suggest questions about:
-- Getting started with Linux SDK (if not on that page)
-- Transaction flow details (if not on that page)
-- Common issues and troubleshooting
-- Best practices
-Also suggest 1-2 questions SPECIFIC to this page's content based on the headings.`;
-    } else if (route === "/cloud-speaker") {
-      relatedSuggestions = `
-The user is reading Cloud Speaker docs. Suggest questions about:
-- How to compile and build firmware
-- OTA update process
-- Device type configuration
-- How to set up the development environment`;
-    } else if (route.includes("payment-gateway") || route.includes("key-management")) {
-      relatedSuggestions = `
-The user is reading payment/encryption docs. Suggest questions about:
-- Decrypting POS terminal data with AWS
-- DUKPT key management
-- TR-31 key export/import
-- How to send encrypted data from the terminal`;
-    } else if (route === "/emv-l3-testing") {
-      relatedSuggestions = `
-The user is reading EMV L3 testing docs. Suggest questions about:
-- Which countries are supported for L3 certification
-- How to download test configurations for a specific country
-- What terminal models are supported
-- Firmware download for certification`;
-    } else {
-      relatedSuggestions = `
-Suggest 3-5 questions relevant to "${pageTitle}" based on the page content and headings.`;
-    }
-
-    return `The user is currently on the "${pageTitle}" page (route: ${route}).${headings}
-
-Generate 3-5 short suggestion buttons (under 50 characters each) that are SPECIFIC to this page's content.
-
-IMPORTANT: When the user clicks a suggestion, your response MUST:
-1. Answer the question using content from the documentation
-2. Call the navigateToPage action if the answer relates to a different page
-${relatedSuggestions}
-
-Make sure each suggestion is a natural question a developer would ask while reading this specific page.`;
-  }, [currentPage, currentPageHeadings]);
-
-  // ─ Welcome suggestions — static product categories (before first message) ─
   useCopilotChatSuggestions({
     suggestions: [
       {
         title: "📱 Smart POS (Android)",
-        message: "I'm using a Smart POS terminal (D20, D30, D50, D60, D70, D80, D80K). Help me get started with Android SDK integration.",
+        message:
+          "I'm using a Smart POS terminal (D20, D30, D50, D60, D70, D80, D80K). Help me get started with Android SDK integration.",
         className: "welcome-product-suggestion welcome-smartpos",
       },
       {
         title: "📲 mPOS / Mobile Reader",
-        message: "I'm using an mPOS mobile reader (QPOS mini, QPOS Cute, CR100, QPOS Plus). Help me connect it to my app.",
+        message:
+          "I'm using an mPOS mobile reader (QPOS mini, QPOS Cute, CR100, QPOS Plus). Help me connect it to my app.",
         className: "welcome-product-suggestion welcome-mpos",
       },
       {
         title: "🐧 Linux Terminal",
-        message: "I'm using a Linux terminal (D30-linux, QPOS-linux). Help me set up the Linux SDK.",
+        message:
+          "I'm using a Linux terminal (D30-linux, QPOS-linux). Help me set up the Linux SDK.",
         className: "welcome-product-suggestion welcome-linux",
       },
       {
         title: "🔊 Cloud Speaker",
-        message: "I'm using a Cloud Speaker (DS10, DS50, DS200). Help me set up audio payment notifications.",
+        message:
+          "I'm using a Cloud Speaker (DS10, DS50, DS200). Help me set up audio payment notifications.",
         className: "welcome-product-suggestion welcome-cloudspeaker",
       },
     ],
     available: "before-first-message",
   });
 
-  // ─ Contextual suggestions — dynamically generated per page (after 1st msg) ─
-  useCopilotChatSuggestions(
-    {
-      instructions: suggestionInstructions,
-      minSuggestions: 3,
-      maxSuggestions: 5,
-      available: "after-first-message",
-    },
-    [currentPath],
-  );
-
   return (
     <>
       <CopilotSidebar