@pantheon-systems/create-p1-starter-kit 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/create-p1-starter-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Scaffold a new P1 starter project",
   "type": "module",
   "bin": {

package/template/.env.example

@@ -19,3 +19,9 @@ CSS_API_KEY=your-api-key
 # Show the RoleSwitcher dropdown in the P1 editor for local testing of
 # admin/editor/junior-editor permissions. Never enable this in production.
 # NEXT_PUBLIC_ENABLE_ROLE_SWITCHER=true
+
+# --- AI chatbot (optional) ---
+# LaunchDarkly client-side ID used to evaluate the `p1-chatbot` flag. It is
+# public by design (safe to expose in the browser). When unset, the chatbot
+# stays hidden.
+# NEXT_PUBLIC_LD_CLIENT_ID=your-launchdarkly-client-side-id

package/template/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @pantheon-systems/p1-starter
 
+## 1.0.5
+
+### Patch Changes
+
+- @pantheon-systems/puck-css@0.6.0
+- @pantheon-systems/p1-next-sdk@0.6.0
+
 ## 1.0.4
 
 ### Patch Changes

package/template/__tests__/chatbot-flag-gate.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { shouldShowChatbot, CHATBOT_FLAG_KEY } from "../lib/chatbot-flag/feature-gate";
+
+describe("shouldShowChatbot", () => {
+  it("is off when the flag is disabled, even with an agent URL", () => {
+    expect(shouldShowChatbot(false, "https://agent.example")).toBe(false);
+  });
+
+  it("is off when the agent URL is missing, even with the flag enabled", () => {
+    expect(shouldShowChatbot(true, undefined)).toBe(false);
+    expect(shouldShowChatbot(true, "")).toBe(false);
+  });
+
+  it("is on only when the flag is enabled AND the agent URL is set", () => {
+    expect(shouldShowChatbot(true, "https://agent.example")).toBe(true);
+  });
+
+  it("defaults off when the flag value is undefined (LD not yet resolved / offline)", () => {
+    expect(shouldShowChatbot(undefined, "https://agent.example")).toBe(false);
+  });
+
+  it("exposes the p1-chatbot flag key", () => {
+    expect(CHATBOT_FLAG_KEY).toBe("p1-chatbot");
+  });
+});

package/template/__tests__/chatbot-flag-wiring.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const appDir = resolve(__dirname, "..");
+
+describe("editor-client gates the chatbot behind the p1-chatbot flag", () => {
+  const content = readFileSync(
+    resolve(appDir, "app/p1/[[...p1]]/editor-client.tsx"),
+    "utf-8",
+  );
+
+  it("reads LaunchDarkly flags via useFlags", () => {
+    expect(content).toContain("useFlags");
+  });
+
+  it("gates the AI plugin through shouldShowChatbot", () => {
+    expect(content).toContain("shouldShowChatbot");
+  });
+
+  it("wraps the editor in the chatbot flag provider", () => {
+    expect(content).toContain("ChatbotFlagProvider");
+  });
+
+  it("imports the plugin from the published @pantheon-systems/p1-ai-chat package", () => {
+    expect(content).toContain("@pantheon-systems/p1-ai-chat");
+  });
+});
+
+describe("chatbot flag provider is a client-side LaunchDarkly gate", () => {
+  const content = readFileSync(
+    resolve(appDir, "components/ChatbotFlagProvider.tsx"),
+    "utf-8",
+  );
+
+  it("initializes from the public client-side ID env var", () => {
+    expect(content).toContain("NEXT_PUBLIC_LD_CLIENT_ID");
+  });
+
+  it("uses the launchdarkly-react-client-sdk", () => {
+    expect(content).toContain("launchdarkly-react-client-sdk");
+  });
+});

package/template/app/p1/[[...p1]]/editor-client.tsx

@@ -14,14 +14,19 @@ import {
   editorPathHref,
 } from "@pantheon-systems/puck-css";
 import { P1NextRouterProvider } from "@pantheon-systems/p1-next-sdk";
+import { createAIChatPlugin } from "@pantheon-systems/p1-ai-chat";
+import { useFlags } from "launchdarkly-react-client-sdk";
 import type { Checkpoint } from "@pantheon-systems/puck-css";
 import type { ContentRole } from "@pantheon-systems/puck-css";
+import { P1_ASSETS } from "../../../constants/assets";
 
 import "@pantheon-systems/puck-css/styles.css";
 import "@pantheon-systems/puck-css/pds/styles.css";
 
+import { ChatbotFlagProvider } from "../../../components/ChatbotFlagProvider";
 import { P1Lockup } from "../../../components/p1-lockup";
 import config from "../../../puck.config";
+import { shouldShowChatbot, CHATBOT_FLAG_KEY } from "../../../lib/chatbot-flag/feature-gate";
 
 const DEFAULT_PAGE_DATA = {
   root: { props: { title: "New page" } },
@@ -128,7 +133,9 @@ export function EditorClientWrapper({ path }: { path: string }) {
           config={{ ...p1Config, userRole }}
           loginFallback={<P1SignInPage />}
         >
-          <EditorContent path={path} lastGoodStateRef={lastGoodStateRef} />
+          <ChatbotFlagProvider>
+            <EditorContent path={path} lastGoodStateRef={lastGoodStateRef} />
+          </ChatbotFlagProvider>
         </P1App>
         {process.env.NEXT_PUBLIC_ENABLE_ROLE_SWITCHER === 'true' && (
           <RoleSwitcher currentRole={userRole} onRoleChange={setUserRole} />
@@ -198,6 +205,20 @@ function EditorContent({
   const router = useRouter();
   const { getToken } = useP1Auth();
   const p1Plugins = useP1Plugins(path, config);
+  const flags = useFlags();
+  const agentUrl = process.env.NEXT_PUBLIC_AGENT_URL;
+  const chatbotEnabled = shouldShowChatbot(flags[CHATBOT_FLAG_KEY], agentUrl);
+  const aiPlugin = React.useMemo(
+    () =>
+      chatbotEnabled && agentUrl
+        ? createAIChatPlugin({ agentUrl })
+        : null,
+    [chatbotEnabled, agentUrl],
+  );
+  const additionalPlugins = React.useMemo(
+    () => (aiPlugin ? [...p1Plugins, aiPlugin] : p1Plugins),
+    [p1Plugins, aiPlugin],
+  ) as typeof p1Plugins;
 
   const [redirecting, setRedirecting] = React.useState(false);
 
@@ -236,13 +257,14 @@ function EditorContent({
   const { loading, error, puckKey, puckProps } = useP1Editor({
     documentPath: path,
     puckConfig: editorConfig,
-    additionalPlugins: p1Plugins,
+    additionalPlugins,
     onDocumentNotFound: handleDocumentNotFound,
     pluginOptions: {
       onDocumentSelect: handleDocumentSelect,
       selectedDocumentPath: path,
       siteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
       dashboardUrl: process.env.NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL,
+      logoUrl: P1_ASSETS.LOGO_URL,
     },
     overrideOptions: {
       showDefaultPublish: false,
@@ -337,7 +359,7 @@ function EditorContent({
         </div>
       )}
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-      <Puck key={displayState.puckKey} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
+      <Puck key={`${displayState.puckKey}-${chatbotEnabled ? "ai" : "no-ai"}`} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
     </div>
   );
 }

package/template/components/ChatbotFlagProvider.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import { LDProvider } from "launchdarkly-react-client-sdk";
+import { useP1Auth } from "@pantheon-systems/puck-css";
+
+/**
+ * Wraps the editor with a LaunchDarkly client-side provider so the `p1-chatbot`
+ * flag can be evaluated at runtime. The client-side ID is public by design.
+ *
+ * When NEXT_PUBLIC_LD_CLIENT_ID is unset (local dev / offline), LaunchDarkly is
+ * not initialized and children render without a provider — `useFlags()` then
+ * returns no flags, so the chatbot defaults to hidden.
+ */
+export function ChatbotFlagProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const clientSideID = process.env.NEXT_PUBLIC_LD_CLIENT_ID;
+  const { user } = useP1Auth();
+
+  if (!clientSideID) {
+    return <>{children}</>;
+  }
+
+  // LaunchDarkly evaluates the flag for the context present at mount and does not
+  // re-identify on context change. This provider mounts inside <P1App> (after
+  // auth), so the authenticated user is available here; the anonymous fallback
+  // only applies if it ever renders pre-auth.
+  //
+  // Key on the always-present, stable user id — email is optional on AuthUser, so
+  // keying on it would silently drop emailless users into the anonymous branch and
+  // lose per-user rollout stickiness. (LaunchDarkly also favors a non-PII key.)
+  // Email is kept as a targeting attribute.
+  const context = user
+    ? { kind: "user" as const, key: user.id, email: user.email }
+    : { kind: "user" as const, key: "anonymous", anonymous: true };
+
+  return (
+    <LDProvider
+      clientSideID={clientSideID}
+      context={context}
+      reactOptions={{ useCamelCaseFlagKeys: false }}
+    >
+      {children}
+    </LDProvider>
+  );
+}

package/template/constants/assets.ts

@@ -0,0 +1,3 @@
+export const P1_ASSETS = {
+  LOGO_URL: "/images/p1_logo.svg",
+} as const;

package/template/lib/chatbot-flag/feature-gate.ts

@@ -0,0 +1,17 @@
+/** LaunchDarkly flag that gates the AI chatbot. Short-lived — removed once the
+ *  chatbot ships to everyone in the alpha. */
+export const CHATBOT_FLAG_KEY = "p1-chatbot";
+
+/**
+ * Whether the AI chatbot plugin should be mounted in the editor.
+ *
+ * Requires both the `p1-chatbot` LaunchDarkly flag to be enabled and an agent
+ * URL to be configured. Defaults off when the flag is `undefined` (LD not yet
+ * resolved, unset client ID, or offline), so the chatbot stays hidden by default.
+ */
+export function shouldShowChatbot(
+  flagEnabled: boolean | undefined,
+  agentUrl: string | undefined,
+): boolean {
+  return Boolean(flagEnabled && agentUrl);
+}

package/template/package.json

@@ -11,11 +11,14 @@
   },
   "dependencies": {
     "@pantheon-systems/cpub-react-sdk": "^5.2.1",
-    "@pantheon-systems/p1-next-sdk": "^0.5.0",
-    "@pantheon-systems/puck-css": "^0.5.0",
+    "@pantheon-systems/p1-ai-chat": "^0.1.0",
+    "@pantheon-systems/p1-next-sdk": "^0.6.0",
+    "@pantheon-systems/pds-toolkit-react": "2.0.0-alpha.12",
+    "@pantheon-systems/puck-css": "^0.6.0",
     "@puckeditor/core": "^0.21.1",
     "@tailwindcss/postcss": "^4.2.2",
     "classnames": "^2.5.1",
+    "launchdarkly-react-client-sdk": "^3.9.2",
     "next": "^16.2.6",
     "postcss": "^8.5.12",
     "react": "^19.2.5",

package/template/public/images/p1_logo.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3C0 1.34315 1.34315 0 3 0H29C30.6569 0 32 1.34315 32 3V29C32 30.6569 30.6569 32 29 32H3C1.34315 32 0 30.6569 0 29V3Z" fill="#171717"/>
+<path d="M6 7H16.9111V8.82232H18.7335V17.9112H16.9111V19.7335H9.64464V25.189H6.01139V7H6ZM15.0888 10.6333H9.63325V16.0888H15.0888V10.6333Z" fill="#FFDC28"/>
+<path d="M20.5449 7H26.0005V25.1777H22.3672V10.6333H20.5449V7Z" fill="#FFDC28"/>
+</svg>