@aglyn/plugins-ai 1.0.0-beta.291 → 1.0.0-beta.293

package/src/lib/components/ai-site-start-card.component.js

@@ -23,6 +23,7 @@ import { mdiCreation, mdiPageLayoutHeaderFooter, mdiWebSync } from "@aglyn/share
 import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
 import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
 import BlockedControl from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { OptionCardGrid } from "@aglyn/shared-ui-jsx/components/option-card-grid.component";
 import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
@@ -34,12 +35,12 @@ import { AI_JOB_AUTO_CONFIRM_INPUT, AI_SITE_FREE_PAGES, aiFreeCreditsNoneLeftTex
 import { FREE_AI_TASTE_CREDITS_PER_MONTH } from "../plan-entitlements.js";
 import { AI_CREDITS_CONFIRM_CODE, aiCreditRangeText } from "../model/ai-credit-estimate.js";
 import { AiCreditsPromptNotice } from "./ai-credits-prompt.component.js";
-import { AI_SITE_START_ANSWERS, aiSiteStartAnswersFromClientBuild, aiSiteStartBrief, aiSiteStartClientBrief, aiSiteStartClientInputs, aiSiteStartClientNote, aiSiteStartExtrasGiven, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
+import { AI_SITE_START_ANSWERS, AI_SITE_START_STYLE_REQUIRED, aiSiteStartAnswersFromClientBuild, aiSiteStartBrief, aiSiteStartClientBrief, aiSiteStartClientInputs, aiSiteStartClientNote, aiSiteStartExtrasGiven, aiSiteStartInputs, aiSiteStartKind, aiSiteStartRefusal } from "../model/ai-site-start.js";
 import { aiSiteInspirationLimit } from "../model/ai-site-inspiration.js";
 import { aiSiteStartFieldErrors, aiSiteStartFirstInvalidStep, aiSiteStartNextStep, aiSiteStartPreviousStep, aiSiteStartStepErrors, aiSiteStartStepIndex, AI_SITE_START_STEPS, AI_SITE_START_STEP_FIELDS } from "../model/ai-site-start-steps.js";
 import { aiSiteKindOfInputs } from "../model/ai-site-kinds.js";
 import { aiSiteStartClickOf, useAiSiteStartTracking } from "./ai-site-start-tracking.js";
-import { AudienceStep, DetailsStep, KindStep, MoreDetails, ReviewStep, StartProgress, StepHelp, StyleStep } from "./ai-site-start-steps.component.js";
+import { aiSiteStyleCards, AudienceStep, DetailsStep, KindStep, MoreDetails, ReviewStep, StartProgress, StepHelp, StyleStep } from "./ai-site-start-steps.component.js";
 import { AiJobFollow } from "./ai-job-follow.component.js";
 import { AiModelSelector } from "./ai-model-selector.component.js";
 import { useAiModelChoice } from "./use-ai-model-choice.js";
@@ -163,7 +164,7 @@ import { aiSiteImportOfferOf } from "../model/ai-site-import-view.js";
  */ const START_HELP = {
     choose: pluginDocsHelp('aiStart', {
         anchor: '#how-do-you-want-to-start',
-        excerpt: 'The starter site gives you a ready-made home page to edit. Start with AI asks a few questions, then plans, writes and publishes your pages.'
+        excerpt: 'The starter site gives you a ready-made home page to edit, in a style you choose. Start with AI asks a few questions, then plans, writes and publishes your pages.'
     }),
     estimate: pluginDocsHelp('aiCredits', {
         anchor: '#before-a-job-starts',
@@ -202,9 +203,9 @@ function SectionLabel({ children, help }) {
  * held, and only the review turns them into the job, through the same
  * `aiSiteStartBrief` and `aiSiteStartInputs`. Each step is reported as a
  * funnel, with where people struggle (`ai-site-start-tracking.ts`).
- */ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, pendingSite, clientBuild, initialAnswers = null }) {
-    var _ref, _ref1, _ref2, _ref3, _aiFreeSitePrompt;
-    var _aiSiteKindOfInputs, _modelChoice_options_options_find, _modelChoice_options;
+ */ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, pendingSite, chooseStarter: chooseStarterInShell, clientBuild, initialAnswers = null }) {
+    var _ref, _ref1, _ref2, _ref3, _aiFreeSitePrompt, _aiSiteStartRefusal;
+    var _aiSiteKindOfInputs, _modelChoice_options_options_find, _modelChoice_options, _pendingSite_previewControl;
     const { data: user } = useUser();
     const router = useRouter();
     // Held in a ref so a request reads WHO is signed in, never the identity of
@@ -248,6 +249,10 @@ function SectionLabel({ children, help }) {
     const [busy, setBusy] = useState(false);
     // The starter card's own busy state while `startBlank` runs (AGL-3594).
     const [startingStarter, setStartingStarter] = useState(false);
+    // The starter card's style choice (AGL-4049): drawn after the starter card
+    // is clicked, with nothing chosen until a card is.
+    const [pickingStyle, setPickingStyle] = useState(false);
+    const [starterStyle, setStarterStyle] = useState(null);
     const [notice, setNotice] = useState(null);
     /** The site job "Plan my site" started, as the create door answered with it. */ const [started, setStarted] = useState(null);
     // The Free taste's page band (AGL-3594), read off the verdict request.
@@ -340,9 +345,10 @@ function SectionLabel({ children, help }) {
         siteKind
     })) != null ? _aiFreeSitePrompt : serverPrompt : null;
     const noneLeft = freeTaste && freeCredits !== null && freeCredits.left <= 0;
-    const refusal = aiSiteStartRefusal(answers, {
+    // The door's refusal, else the questions' own: a style not yet chosen (AGL-4049).
+    const refusal = (_aiSiteStartRefusal = aiSiteStartRefusal(answers, {
         freeTaste
-    });
+    })) != null ? _aiSiteStartRefusal : answers.style === null ? AI_SITE_START_STYLE_REQUIRED : null;
     const band = aiSitePagesBand(freeTaste);
     // On a paid plan the person picks the model that builds the site (AGL-3660),
     // Auto by default, from the models their plan allows; every step of the job
@@ -371,7 +377,7 @@ function SectionLabel({ children, help }) {
         }) : answers;
         if (!orgId || aiSiteStartRefusal(asked, {
             freeTaste
-        }) || noneLeft) return;
+        }) || asked.style === null || noneLeft) return;
         // Past what is left, only an explicit go-ahead starts it.
         if (freeTaste && !options.creditsConfirmed && aiFreeSitePrompt(freeCredits, asked.pages, {
             siteKind
@@ -442,7 +448,10 @@ function SectionLabel({ children, help }) {
             };
             if (!hostId && pendingSite) {
                 if (!pendingSite.created && !await refused(await requestJob(null, true))) return;
-                const made = await pendingSite.create();
+                // The style the questions took (AGL-4049), recorded on the site.
+                const made = await pendingSite.create(asked.style ? {
+                    style: asked.style
+                } : undefined);
                 if ('error' in made) {
                     setNotice(made.error);
                     if (made.address) setStep('choose');
@@ -522,33 +531,54 @@ function SectionLabel({ children, help }) {
         clientIntake,
         siteInspiration
     ]);
-    // The zone's `startBlank`. Before the site exists it creates it with the
-    // starter, and answers `false` when it could not — most often a name or
-    // address to fix, which step 1 shows.
-    const runStartBlank = useCallback(()=>{
-        const result = startBlank();
+    // The zone's `startBlank`, with the style chosen for the starter (AGL-4049).
+    // Before the site exists it creates it with the starter, and answers
+    // `false` when it could not — most often a name or address to fix, which
+    // step 1 shows.
+    const runStartBlank = useCallback((options)=>{
+        const result = startBlank((options == null ? void 0 : options.style) ? {
+            style: options.style
+        } : undefined);
         if (result && typeof result.then === 'function') {
             void result.then((done)=>{
                 if (done) return;
                 setStartingStarter(false);
+                setPickingStyle(false);
                 setStep('choose');
             });
         }
     }, [
         startBlank
     ]);
+    // The starter card asks a style first (AGL-4049): nothing is created, and
+    // nothing chosen, until a style card is clicked and Create site with it.
+    // Where the shell offers "Choose your starter" — the platform's styles and
+    // the marketplace's starters together — the card hands the choice to it
+    // instead, and asks no style itself.
     const chooseStarter = useCallback(()=>{
         if (pendingSite && !pendingSite.created && !pendingSite.check()) return;
-        setStartingStarter(true);
         trackEvent('site_start_choice', {
             choice: 'starter'
         });
+        if (chooseStarterInShell && pendingSite && !pendingSite.created) return chooseStarterInShell();
+        setPickingStyle(true);
+    }, [
+        chooseStarterInShell,
+        pendingSite
+    ]);
+    const starterInShell = Boolean(chooseStarterInShell && pendingSite && !pendingSite.created);
+    const createStarter = useCallback(()=>{
+        if (!starterStyle || startingStarter) return;
+        setStartingStarter(true);
         // The starter is a way to start, not a way to leave: no abandonment after it.
         tracker.finish();
-        runStartBlank();
+        runStartBlank({
+            style: starterStyle
+        });
     }, [
-        pendingSite,
         runStartBlank,
+        starterStyle,
+        startingStarter,
         tracker
     ]);
     const chooseImport = useCallback(()=>{
@@ -648,9 +678,15 @@ function SectionLabel({ children, help }) {
         setStep(target);
     };
     if (verdict !== 'ready') return null;
+    // The style a way out gives the starter on a site that exists (AGL-4049):
+    // the one the starter's style view or the questions took, if any.
+    const exitStyle = starterStyle != null ? starterStyle : answers.style !== null ? aiSiteStartKind(answers).id : null;
+    const giveStarter = ()=>runStartBlank(exitStyle ? {
+            style: exitStyle
+        } : undefined);
     // Before a job is started Skip is the blank site, which writes the starter
     // (AGL-3594); after, it only closes — the job builds the site.
-    const exit = started ? leave != null ? leave : runStartBlank : runStartBlank;
+    const exit = started ? leave != null ? leave : giveStarter : giveStarter;
     // Skip, as the header draws it: before a site is started it is leaving the questions.
     const skip = ()=>{
         if (!started) tracker.abandon('skip');
@@ -659,10 +695,10 @@ function SectionLabel({ children, help }) {
     // Escape and the close control. Before "Create site" has made the site
     // (AGL-3761) there is nothing to give a starter to, so they only close,
     // and nothing is created; otherwise they are the same way out as Skip.
-    const dismissTo = creating && !started ? leave != null ? leave : runStartBlank : exit;
+    const dismissTo = creating && !started ? leave != null ? leave : giveStarter : exit;
     // Anything the person typed or picked, which a dismissal must not discard
     // silently (AGL-3660). After a job starts there is nothing left to lose.
-    const drafted = !started && Boolean(answers.siteType.trim() || answers.audience.trim() || answers.kind !== null || aiSiteStartExtrasGiven(answers).length > 0 || creating && (pendingSite == null ? void 0 : pendingSite.dirty));
+    const drafted = !started && Boolean(answers.siteType.trim() || answers.audience.trim() || answers.style !== null || starterStyle !== null || aiSiteStartExtrasGiven(answers).length > 0 || creating && (pendingSite == null ? void 0 : pendingSite.dirty));
     // Escape and the close control: a dismissal, never a choice. Escape that
     // bubbled here through React from a portal outside this dialog's own DOM is
     // a nested menu's, already handled there, and is not this dialog's to act on.
@@ -704,7 +740,9 @@ function SectionLabel({ children, help }) {
     const estimateText = freeTaste ? freeCredits ? `${aiCreditRangeText(estimate)}. You have ${freeCredits.left.toLocaleString('en-US')} of your ${freeCredits.total.toLocaleString('en-US')} free AI credits left this month, until ${aiFreeCreditsResetLabel(freeCredits.resetsOn)}` : `${aiCreditRangeText(estimate)}, of the ${FREE_AI_TASTE_CREDITS_PER_MONTH} AI credits you get free each month` : `${aiCreditRangeText(estimate)}, estimated`;
     // The card is drawn wherever the workspace could use it, disabled where it cannot yet.
     const showsImport = importAvailability.state === 'ready' || importAvailability.state === 'blocked';
-    const choosing = step === 'choose' && !started && !importing;
+    // The starter's style view (AGL-4049), on step 1.
+    const stylingStarter = step === 'choose' && pickingStyle && !started && !importing;
+    const choosing = step === 'choose' && !pickingStyle && !started && !importing;
     const reviewing = step === 'review' && !started && !importing;
     const asking = step !== 'choose' && !started && !importing;
     // Each answer's reason not to go forward, shown on a step once Next was refused there.
@@ -753,6 +791,9 @@ function SectionLabel({ children, help }) {
     const heading = importing ? {
         title: 'Bring my site',
         lede: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: its pages, words and photos. First, prove it is yours.`
+    } : stylingStarter ? {
+        title: 'Choose a style',
+        lede: 'Your site starts with a home page, a header and a footer in the style you choose. You can change everything later.'
     } : HEADINGS[step];
     // Enter in a text answer is Next. A select, a card or a button keeps its own Enter.
     const onStepKeyDown = (event)=>{
@@ -821,7 +862,7 @@ function SectionLabel({ children, help }) {
                             },
                             children: 'Start your site'
                         }),
-                        /*#__PURE__*/ _jsx(Button, {
+                        creating && !started ? null : /*#__PURE__*/ _jsx(Button, {
                             color: "inherit",
                             onClick: skip,
                             "aria-label": started ? 'Close' : 'Skip and start blank',
@@ -839,7 +880,7 @@ function SectionLabel({ children, help }) {
                 },
                 onKeyDown: onStepKeyDown,
                 children: [
-                    importing ? null : /*#__PURE__*/ _jsx(Box, {
+                    importing || stylingStarter ? null : /*#__PURE__*/ _jsx(Box, {
                         sx: {
                             pt: {
                                 xs: 3,
@@ -853,7 +894,7 @@ function SectionLabel({ children, help }) {
                         })
                     }),
                     /*#__PURE__*/ _jsx(Container, {
-                        maxWidth: choosing || step === 'kind' || step === 'style' ? 'md' : 'sm',
+                        maxWidth: choosing || stylingStarter || step === 'kind' || step === 'style' ? 'md' : 'sm',
                         disableGutters: true,
                         sx: {
                             py: {
@@ -890,7 +931,7 @@ function SectionLabel({ children, help }) {
                                             variant: "body1",
                                             color: "text.secondary",
                                             children: [
-                                                choosing ? /*#__PURE__*/ _jsx(HelpTip, _extends({
+                                                choosing || stylingStarter ? /*#__PURE__*/ _jsx(HelpTip, _extends({
                                                     sx: {
                                                         float: 'right'
                                                     }
@@ -939,6 +980,28 @@ function SectionLabel({ children, help }) {
                                     pendingSite: pendingSite,
                                     onBack: ()=>setImporting(false),
                                     leave: leave
+                                }) : stylingStarter ? /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 3,
+                                    component: "section",
+                                    "aria-label": "Style of your starter site",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(OptionCardGrid, {
+                                            label: "Style of site",
+                                            "data-start-area": "starter-style-cards",
+                                            columns: {
+                                                xs: 2,
+                                                sm: 2,
+                                                md: 3
+                                            },
+                                            options: aiSiteStyleCards(),
+                                            value: starterStyle,
+                                            onChange: (id)=>{
+                                                setStarterStyle(id);
+                                                tracker.fieldPicked('style');
+                                            }
+                                        }),
+                                        creating ? pendingSite == null ? void 0 : (_pendingSite_previewControl = pendingSite.previewControl) == null ? void 0 : _pendingSite_previewControl.call(pendingSite, 'starter') : null
+                                    ]
                                 }) : choosing ? /*#__PURE__*/ _jsxs(Stack, {
                                     spacing: 2,
                                     children: [
@@ -961,8 +1024,8 @@ function SectionLabel({ children, help }) {
                                                     accent: "secondary",
                                                     icon: mdiPageLayoutHeaderFooter.path,
                                                     iconId: "page-layout-header-footer",
-                                                    title: "Start from the starter site",
-                                                    description: "A ready-made home page with a header, footer and contact form you can edit.",
+                                                    title: starterInShell ? 'Start from a starter site' : 'Start from the starter site',
+                                                    description: starterInShell ? 'A ready-made website from the marketplace, in a style you choose.' : 'A ready-made home page with a header, footer and contact form, in a style you choose.',
                                                     busy: startingStarter,
                                                     onChoose: chooseStarter
                                                 }),
@@ -991,7 +1054,7 @@ function SectionLabel({ children, help }) {
                                                     icon: mdiWebSync.path,
                                                     iconId: "web-sync",
                                                     title: "Bring my site",
-                                                    description: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: its pages, words and photos, rewritten in your new design.`,
+                                                    description: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: every word as you wrote it, laid out as your pages are, in your new site’s preview.`,
                                                     blocked: importAvailability.state === 'blocked' ? importAvailability.message : null,
                                                     onChoose: chooseImport,
                                                     children: importAvailability.state === 'blocked' && importAvailability.reason === 'plan' ? /*#__PURE__*/ _jsx(Chip, {
@@ -1084,6 +1147,43 @@ function SectionLabel({ children, help }) {
                     })
                 ]
             }),
+            stylingStarter && /* The starter's style view (AGL-4049): Create site waits for a style. */ /*#__PURE__*/ _jsxs(DialogActions, {
+                "data-start-area": "footer",
+                sx: _extends({
+                    px: {
+                        xs: 2,
+                        sm: 3
+                    },
+                    py: 2,
+                    flexWrap: 'wrap',
+                    rowGap: 1,
+                    columnGap: 2,
+                    borderTop: 1,
+                    borderColor: 'divider'
+                }, AI_SITE_START_SURFACE_SX),
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setPickingStyle(false),
+                        disabled: startingStarter,
+                        sx: {
+                            mr: 'auto'
+                        },
+                        children: 'Back'
+                    }),
+                    starterStyle ? null : /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Choose a style to continue.'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        disabled: !starterStyle || startingStarter,
+                        onClick: createStarter,
+                        children: startingStarter ? creating ? 'Creating…' : 'Starting…' : creating ? 'Create site' : 'Use this style'
+                    })
+                ]
+            }),
             asking && /* The footer stays put while the questions scroll. It wraps, because
            the estimate, the reason and the buttons are wider than a phone. */ /*#__PURE__*/ _jsxs(DialogActions, {
                 "data-start-area": "footer",