@cimplify/cli 0.10.1 → 0.11.0

package/templates/storefront-fashion/components/support-chat.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import {
+  CHAT_ACTION_VIEW_ORDER,
+  CHAT_ACTION_VIEW_PRODUCT,
+  ChatWidget,
+  parseChatAction,
+} from "@cimplify/sdk/react";
+
+/**
+ * The support chat bubble, wired to this template's navigation: structured
+ * answers from the assistant carry product and order references, and taps
+ * land where this storefront shows them. Identity and currency come from
+ * the provider, so there is nothing to configure.
+ */
+export function SupportChat() {
+  const router = useRouter();
+
+  return (
+    <ChatWidget
+      onGenUIAction={({ action }) => {
+        const parsed = parseChatAction(action);
+        if (!parsed) return;
+        if (parsed.verb === CHAT_ACTION_VIEW_PRODUCT) {
+          router.push(`/products/${encodeURIComponent(parsed.id)}`);
+        }
+        if (parsed.verb === CHAT_ACTION_VIEW_ORDER) {
+          router.push("/track-order");
+        }
+      }}
+    />
+  );
+}

package/templates/storefront-fashion/package.json

@@ -19,7 +19,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.96.0",
+    "@cimplify/sdk": "^0.99.1",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/templates/storefront-grocery/app/layout.tsx

@@ -7,6 +7,7 @@ import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
 import { CartDrawer } from "@/components/cart-drawer";
+import { SupportChat } from "@/components/support-chat";
 import { OrganizationJsonLd } from "@/components/json-ld";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
@@ -64,6 +65,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             <ProductModal />
           </Suspense>
           <CartDrawer />
+          <SupportChat />
         </Providers>
       </body>
     </html>