refactor(webapp): rename the ask-ai button variant to ask-trigger

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx

@@ -54,7 +54,11 @@ export function DashboardAgentLauncher() {
       }
       button={
         <span className="relative inline-flex shrink-0">
-          <Button variant="ask-ai/small" aria-label={ASK_AGENT_LABEL} onClick={() => setOpen(true)}>
+          <Button
+            variant="ask-trigger/small"
+            aria-label={ASK_AGENT_LABEL}
+            onClick={() => setOpen(true)}
+          >
             {ASK_AGENT_LABEL}
           </Button>
         </span>

apps/webapp/app/components/primitives/Buttons.tsx

@@ -114,7 +114,7 @@ const theme = {
     icon: "text-blue-500",
   },
   // The AI agent's "Ask Trigger" affordance.
-  "ask-ai": {
+  "ask-trigger": {
     textColor:
       "text-text-bright transition light:group-hover/button:text-charcoal-800 group-disabled/button:text-text-dimmed/80",
     button:
@@ -140,9 +140,9 @@ function createVariant(sizeName: Size, themeName: Theme) {
   };
 }
 
-// ask-ai supplies its own leading logo. Pass an explicit `LeadingIcon` to animate it.
-function createAskAiVariant(sizeName: Size, opticalPadding: string, logoSize: number) {
-  const base = createVariant(sizeName, "ask-ai");
+// ask-trigger supplies its own leading logo. Pass an explicit `LeadingIcon` to animate it.
+function createAskTriggerVariant(sizeName: Size, opticalPadding: string, logoSize: number) {
+  const base = createVariant(sizeName, "ask-trigger");
   return {
     ...base,
     button: cn(base.button, opticalPadding),
@@ -181,9 +181,9 @@ const variant = {
   "docs/medium": createVariant("medium", "docs"),
   "docs/large": createVariant("large", "docs"),
   "docs/extra-large": createVariant("extra-large", "docs"),
-  "ask-ai/small": createAskAiVariant("small", "px-1 pr-1.5", 16),
-  "ask-ai/medium": createAskAiVariant("medium", "px-2", 16),
-  "ask-ai/large": createAskAiVariant("large", "px-2.5", 20),
+  "ask-trigger/small": createAskTriggerVariant("small", "px-1 pr-1.5", 16),
+  "ask-trigger/medium": createAskTriggerVariant("medium", "px-2", 16),
+  "ask-trigger/large": createAskTriggerVariant("large", "px-2.5", 20),
   "menu-item": {
     textColor: "text-text-bright px-1",
     button:
@@ -269,7 +269,7 @@ export function ButtonContent(props: ButtonContentPropsType) {
   }, [isLoading]);
 
   const variation = allVariants.variant[props.variant];
-  // Some variants (ask-ai) always lead with their own glyph unless overridden.
+  // Some variants (ask-trigger) always lead with their own glyph unless overridden.
   const leadingIcon = LeadingIcon ?? variation.defaultLeadingIcon;
 
   const btnClassName = cn(allVariants.$all, variation.button);

apps/webapp/app/routes/storybook.ai-agent/route.tsx

@@ -78,19 +78,19 @@ function DotMatrixTab() {
         ))}
       </div>
       <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
-        The <code className="text-text-bright">ask-ai</code> Button variant. Mono logo, click to
-        think for 5s.
+        The <code className="text-text-bright">ask-trigger</code> Button variant. Mono logo, click
+        to think for 5s.
       </Paragraph>
       <div className="flex flex-wrap items-center gap-6 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
         {(
           [
-            ["ask-ai/small", 16, "small"],
-            ["ask-ai/medium", 16, "medium"],
-            ["ask-ai/large", 20, "large"],
+            ["ask-trigger/small", 16, "small"],
+            ["ask-trigger/medium", 16, "medium"],
+            ["ask-trigger/large", 20, "large"],
           ] as [ButtonVariant, number, string][]
         ).map(([variant, matrixSize, label]) => (
           <div key={variant} className="flex flex-col items-center gap-2">
-            <AskAiButton variant={variant} matrixSize={matrixSize} />
+            <AskTriggerButton variant={variant} matrixSize={matrixSize} />
             <div className="text-[10px] uppercase tracking-wide text-text-dimmed">{label}</div>
           </div>
         ))}
@@ -101,7 +101,7 @@ function DotMatrixTab() {
       <div className="flex flex-wrap items-center gap-6 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
         {[14, 15, 16].map((s) => (
           <div key={s} className="flex flex-col items-center gap-2">
-            <AskAiButton variant="ask-ai/small" matrixSize={s} />
+            <AskTriggerButton variant="ask-trigger/small" matrixSize={s} />
             <div className="text-[10px] uppercase tracking-wide text-text-dimmed">{s}px icon</div>
           </div>
         ))}
@@ -180,7 +180,7 @@ function DotMatrixTab() {
   );
 }
 
-function AskAiButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
+function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
   const [active, setActive] = useState(false);
   const timeout = useRef<ReturnType<typeof setTimeout>>();
 
@@ -199,7 +199,7 @@ function AskAiButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSi
       onClick={trigger}
       LeadingIcon={<AgentMonoLogo size={matrixSize} active={active} decorative />}
     >
-      Ask AI
+      Ask Trigger
     </Button>
   );
 }
@@ -218,7 +218,7 @@ function FaceButton({ name }: { name: DotShapeName }) {
 
   return (
     <Button
-      variant="ask-ai/small"
+      variant="ask-trigger/small"
       onClick={trigger}
       LeadingIcon={<AgentMonoLogo size={16} active={active} restShape={name} decorative />}
     >

apps/webapp/app/routes/storybook.buttons/route.tsx

@@ -399,18 +399,18 @@ export default function Story() {
           </Button>
         </div>
       </div>
-      <Header1 className="mb-2 mt-8">Ask AI button</Header1>
+      <Header1 className="mb-2 mt-8">Ask Trigger button</Header1>
       <div className="grid grid-cols-4 gap-8 border-b border-grid-bright pb-8">
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Sizes</Header3>
-          <Button variant="ask-ai/small">Ask AI</Button>
-          <Button variant="ask-ai/medium">Ask AI</Button>
-          <Button variant="ask-ai/large">Ask AI</Button>
+          <Button variant="ask-trigger/small">Ask Trigger</Button>
+          <Button variant="ask-trigger/medium">Ask Trigger</Button>
+          <Button variant="ask-trigger/large">Ask Trigger</Button>
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Disabled</Header3>
-          <Button variant="ask-ai/small" disabled>
-            Ask AI
+          <Button variant="ask-trigger/small" disabled>
+            Ask Trigger
           </Button>
         </div>
         <div className="col-span-2 self-end text-sm text-text-dimmed">