feat: update product models and enhance welcome suggestions styling in Agentic UI

Author: wenluowang

components/AgenticUI.jsx

@@ -45,15 +45,15 @@ const PRODUCT_CATEGORIES = [
     id: "mpos",
     label: "mPOS / Mobile Reader",
     icon: "📲",
-    models: "QPOS mini, QPOS Cute, CR100, QPOS Plus",
+    models: "QPOS mini, QPOS Cute, CR100, QPOS Plus(pinpad)",
     color: "#8b5cf6",
     description: "Bluetooth/USB readers paired with phone",
   },
   {
     id: "linux",
     label: "Linux Terminal",
     icon: "🐧",
-    models: "D30-linux, QPOS-linux",
+    models: "D30-linux, QPOS Plus-linux",
     color: "#10b981",
     description: "Linux-based POS with C/C++ SDK",
   },

components/CopilotKitWrapper.jsx

@@ -55,7 +55,7 @@ const INSTRUCTIONS = `You are the Dspread Documentation Assistant.
 ## CONVERSATION FLOW — follow this order every time.
 
 ### Step 1 — Identify the user's product
-Before giving integration advice, ALWAYS ask or confirm which product the user has.
+Before giving integration advice, ALWAYS identify the user's product type.
 Use this classification:
 
 | Category | Terminal Models | Docs Section |
@@ -65,17 +65,15 @@ Use this classification:
 | **Linux Terminal** | D30-linux, QPOS-linux (Linux-based POS) | Linux Terminals |
 | **Cloud Speaker** | DS10, DS50, DS200 (audio payment notification) | Cloud Speaker |
 
-If the user mentions a specific model (e.g. "D60", "QPOS mini", "CR100", "DS50"), map it
-to the right category and proceed.
+IMPORTANT: Users often start by clicking a product category from the suggestion buttons shown in the welcome screen. When the user's FIRST message matches a product category (e.g. "📱 Smart POS" or "I'm using a Smart POS terminal"), IMMEDIATELY:
+1. Acknowledge their product choice
+2. Call the **selectProductType** action to show the interactive product selector card for visual confirmation
+3. Then navigate to the relevant starting page and provide an overview
 
-If the user's question is ambiguous or does not mention a model, ask:
-"Could you tell me which terminal model you are using? For example:
-- **Smart POS**: D20, D30, D50, D60, D70, D80, D80K
-- **Mobile Reader (mPOS)**: QPOS mini, QPOS Cute, CR100, QPOS Plus pinpad
-- **Linux Terminal**: D30-linux, QPOS-linux
-- **Cloud Speaker**: DS10, DS50, DS200
+If the user mentions a specific model (e.g. "D60", "QPOS mini", "CR100", "DS50"), map it
+to the right category and proceed directly — no need to call selectProductType.
 
-This helps me give you the most relevant documentation."
+If the user's question is ambiguous or does not mention a model, call **selectProductType** to show the interactive product picker card.
 
 ### Step 2 — Give targeted advice
 Once the product type is known:
@@ -513,12 +511,40 @@ ${relatedSuggestions}
 Make sure each suggestion is a natural question a developer would ask while reading this specific page.`;
   }, [currentPage, currentPageHeadings]);
 
-  // ─ Contextual suggestions — dynamically generated per page ───────────
+  // ─ 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.",
+        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.",
+        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.",
+        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.",
+        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],
   );
@@ -531,12 +557,7 @@ Make sure each suggestion is a natural question a developer would ask while read
           title: "Dspread Assistant",
           initial:
             "Welcome! I'm your Dspread documentation assistant. 👋\n\n" +
-            "To help you best, could you tell me which terminal you're working with?\n\n" +
-            "• **Smart POS** — D20, D30, D50, D60, D70, D80, D80K\n" +
-            "• **Mobile Reader (mPOS)** — QPOS mini, QPOS Cute, CR100, QPOS Plus\n" +
-            "• **Linux Terminal** — D30-linux, QPOS-linux\n" +
-            "• **Cloud Speaker** — DS10, DS50, DS200\n\n" +
-            "Or just ask any question and I'll guide you!",
+            "Choose your product type below to get started, or ask any question directly!",
         }}
         defaultOpen={true}
         clickOutsideToClose={false}

public/docs-context.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-09T05:49:26.614Z",
+  "generatedAt": "2026-02-09T08:49:18.927Z",
   "baseUrl": "https://dspreadorg.github.io/docs",
   "pageCount": 19,
   "pages": [

styles/custom.css

@@ -684,3 +684,108 @@
 .agentic-card-executing .agentic-card-badge {
   animation: agenticPulse 1.5s ease-in-out infinite;
 }
+
+/* ═══════════════════════════════════════════════════════════════════════ */
+/* Welcome Product Category Suggestions — Agentic UI style              */
+/* ═══════════════════════════════════════════════════════════════════════ */
+
+/* Make the suggestion container grid-based for welcome cards */
+.copilotKitMessages footer .suggestions:has(.welcome-product-suggestion) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+/* Product category suggestion card styling */
+.copilotKitMessages footer .suggestions .welcome-product-suggestion {
+  display: flex;
+  align-items: center;
+  padding: 12px 14px !important;
+  border-radius: 12px !important;
+  font-size: 0.8rem !important;
+  font-weight: 600 !important;
+  border: 1.5px solid transparent !important;
+  background: linear-gradient(135deg, var(--product-bg-from), var(--product-bg-to)) !important;
+  color: var(--product-text) !important;
+  box-shadow: 0 2px 8px var(--product-shadow) !important;
+  transition: all 0.25s ease !important;
+  cursor: pointer;
+  text-align: left;
+  line-height: 1.3;
+  min-height: 44px;
+}
+
+.copilotKitMessages footer .suggestions .welcome-product-suggestion:hover {
+  transform: translateY(-2px) scale(1.02) !important;
+  box-shadow: 0 4px 16px var(--product-shadow-hover) !important;
+  border-color: var(--product-border) !important;
+}
+
+/* Smart POS — blue */
+.welcome-smartpos {
+  --product-bg-from: #eff6ff;
+  --product-bg-to: #dbeafe;
+  --product-text: #1e40af;
+  --product-border: #3b82f6;
+  --product-shadow: rgba(59, 130, 246, 0.1);
+  --product-shadow-hover: rgba(59, 130, 246, 0.25);
+}
+.dark .welcome-smartpos {
+  --product-bg-from: #1e293b;
+  --product-bg-to: #1e3a5f;
+  --product-text: #93c5fd;
+  --product-shadow: rgba(59, 130, 246, 0.15);
+  --product-shadow-hover: rgba(59, 130, 246, 0.35);
+}
+
+/* mPOS — purple */
+.welcome-mpos {
+  --product-bg-from: #f5f3ff;
+  --product-bg-to: #ede9fe;
+  --product-text: #5b21b6;
+  --product-border: #8b5cf6;
+  --product-shadow: rgba(139, 92, 246, 0.1);
+  --product-shadow-hover: rgba(139, 92, 246, 0.25);
+}
+.dark .welcome-mpos {
+  --product-bg-from: #1e1b2e;
+  --product-bg-to: #2e1f5e;
+  --product-text: #c4b5fd;
+  --product-shadow: rgba(139, 92, 246, 0.15);
+  --product-shadow-hover: rgba(139, 92, 246, 0.35);
+}
+
+/* Linux — green */
+.welcome-linux {
+  --product-bg-from: #ecfdf5;
+  --product-bg-to: #d1fae5;
+  --product-text: #065f46;
+  --product-border: #10b981;
+  --product-shadow: rgba(16, 185, 129, 0.1);
+  --product-shadow-hover: rgba(16, 185, 129, 0.25);
+}
+.dark .welcome-linux {
+  --product-bg-from: #1a2e25;
+  --product-bg-to: #1a3a2d;
+  --product-text: #6ee7b7;
+  --product-shadow: rgba(16, 185, 129, 0.15);
+  --product-shadow-hover: rgba(16, 185, 129, 0.35);
+}
+
+/* Cloud Speaker — amber */
+.welcome-cloudspeaker {
+  --product-bg-from: #fffbeb;
+  --product-bg-to: #fef3c7;
+  --product-text: #92400e;
+  --product-border: #f59e0b;
+  --product-shadow: rgba(245, 158, 11, 0.1);
+  --product-shadow-hover: rgba(245, 158, 11, 0.25);
+}
+.dark .welcome-cloudspeaker {
+  --product-bg-from: #2e2810;
+  --product-bg-to: #3a3010;
+  --product-text: #fcd34d;
+  --product-shadow: rgba(245, 158, 11, 0.15);
+  --product-shadow-hover: rgba(245, 158, 11, 0.35);
+}