assistant-ui 0.0.78 → 0.0.80

package/src/codemods/v0-12/primitive-if-to-aui-if.ts

@@ -0,0 +1,355 @@
+import { createTransformer } from "../utils/createTransformer";
+
+type ConditionFragment = {
+  expression: string;
+  negated: boolean;
+};
+
+// Map ThreadPrimitive.If props to condition expressions
+const threadPropMap: Record<
+  string,
+  (value: unknown) => ConditionFragment | null
+> = {
+  empty: (v) => ({
+    expression: "s.thread.isEmpty",
+    negated: v === false,
+  }),
+  running: (v) => ({
+    expression: "s.thread.isRunning",
+    negated: v === false,
+  }),
+  disabled: (v) => ({
+    expression: "s.thread.isDisabled",
+    negated: v === false,
+  }),
+};
+
+// Map MessagePrimitive.If props to condition expressions
+const messagePropMap: Record<
+  string,
+  (value: unknown) => ConditionFragment | null
+> = {
+  user: () => ({ expression: 's.message.role === "user"', negated: false }),
+  assistant: () => ({
+    expression: 's.message.role === "assistant"',
+    negated: false,
+  }),
+  system: () => ({
+    expression: 's.message.role === "system"',
+    negated: false,
+  }),
+  hasBranches: () => ({
+    expression: "s.message.branchCount >= 2",
+    negated: false,
+  }),
+  copied: (v) => ({
+    expression: "s.message.isCopied",
+    negated: v === false,
+  }),
+  last: (v) => ({
+    expression: "s.message.isLast",
+    negated: v === false,
+  }),
+  lastOrHover: () => ({
+    expression: "s.message.isHovering || s.message.isLast",
+    negated: false,
+  }),
+  speaking: (v) => ({
+    expression: "s.message.speech != null",
+    negated: v === false,
+  }),
+  hasAttachments: (v) =>
+    v === true
+      ? {
+          expression:
+            's.message.role === "user" && !!s.message.attachments?.length',
+          negated: false,
+        }
+      : {
+          expression:
+            's.message.role !== "user" || !s.message.attachments?.length',
+          negated: false,
+        },
+  hasContent: (v) => ({
+    expression: "s.message.parts.length > 0",
+    negated: v === false,
+  }),
+  submittedFeedback: (v) => {
+    if (v === null) {
+      return {
+        expression:
+          "(s.message.metadata.submittedFeedback?.type ?? null) === null",
+        negated: false,
+      };
+    }
+    return {
+      expression: `s.message.metadata.submittedFeedback?.type === "${v}"`,
+      negated: false,
+    };
+  },
+};
+
+// Map ComposerPrimitive.If props to condition expressions
+const composerPropMap: Record<
+  string,
+  (value: unknown) => ConditionFragment | null
+> = {
+  editing: (v) => ({
+    expression: "s.composer.isEditing",
+    negated: v === false,
+  }),
+  dictation: (v) => ({
+    expression: "s.composer.dictation != null",
+    negated: v === false,
+  }),
+};
+
+const primitiveMap: Record<
+  string,
+  Record<string, (value: unknown) => ConditionFragment | null>
+> = {
+  ThreadPrimitive: threadPropMap,
+  MessagePrimitive: messagePropMap,
+  ComposerPrimitive: composerPropMap,
+};
+
+// Map of XPrimitive.Component → fixed condition (no props needed)
+const fixedConditionMap: Record<string, Record<string, string>> = {
+  ThreadPrimitive: {
+    Empty: "s.thread.isEmpty",
+  },
+};
+
+/**
+ * Extract the value of a JSX attribute.
+ * - Boolean prop (no value): `<X.If user>` → `true`
+ * - `{true}` / `{false}`: → `true` / `false`
+ * - `{"positive"}`: → `"positive"`
+ * - `{null}`: → `null`
+ */
+const getAttrValue = (j: any, attr: any): unknown => {
+  // Boolean attribute (no value), e.g. `<X.If user>`
+  if (attr.value === null || attr.value === undefined) {
+    return true;
+  }
+
+  // JSX expression container: `{true}`, `{false}`, `{"positive"}`, `{null}`
+  if (j.JSXExpressionContainer.check(attr.value)) {
+    const expr = attr.value.expression;
+    if (j.BooleanLiteral.check(expr)) return expr.value;
+    if (j.Literal.check(expr)) {
+      if (expr.value === null) return null;
+      return expr.value;
+    }
+    if (j.NullLiteral.check(expr)) return null;
+    if (j.Identifier.check(expr) && expr.name === "undefined") return undefined;
+  }
+
+  // String literal
+  if (j.StringLiteral.check(attr.value) || j.Literal.check(attr.value)) {
+    return attr.value.value;
+  }
+
+  return undefined;
+};
+
+const buildConditionString = (fragments: ConditionFragment[]): string => {
+  const parts = fragments.map((f) =>
+    f.negated ? `!${f.expression}` : f.expression,
+  );
+  if (parts.length === 1) return parts[0]!;
+  return parts.join(" && ");
+};
+
+const migratePrimitiveIfToAuiIf = createTransformer(
+  ({ j, root, markAsChanged }) => {
+    let needsAuiIfImport = false;
+
+    // Track which primitive namespaces are imported
+    const importedPrimitives = new Set<string>();
+    root.find(j.ImportDeclaration).forEach((path: any) => {
+      const source = path.value.source.value;
+      if (typeof source === "string" && source.startsWith("@assistant-ui/")) {
+        path.value.specifiers?.forEach((specifier: any) => {
+          if (j.ImportSpecifier.check(specifier)) {
+            const name = String(
+              specifier.local?.name ?? specifier.imported.name,
+            );
+            if (primitiveMap[name] || fixedConditionMap[name]) {
+              importedPrimitives.add(name);
+            }
+          }
+        });
+      }
+    });
+
+    if (importedPrimitives.size === 0) return;
+
+    // Process fixed-condition components: <ThreadPrimitive.Empty> → <AuiIf condition={...}>
+    root.find(j.JSXOpeningElement).forEach((path: any) => {
+      const name = path.value.name;
+      if (!j.JSXMemberExpression.check(name)) return;
+      if (!j.JSXIdentifier.check(name.object)) return;
+      if (!j.JSXIdentifier.check(name.property)) return;
+
+      const primitiveName = name.object.name as string;
+      const propertyName = name.property.name as string;
+      const fixedMap = fixedConditionMap[primitiveName];
+      if (!fixedMap) return;
+      const conditionBody = fixedMap[propertyName];
+      if (!conditionBody) return;
+      if (!importedPrimitives.has(primitiveName)) return;
+
+      // Only transform if there are no props (other than children, which are implicit)
+      const attrs: any[] = path.value.attributes || [];
+      if (attrs.length > 0) return;
+
+      const arrowFnAst = j(`(s) => ${conditionBody}`)
+        .find(j.ArrowFunctionExpression)
+        .paths()[0]!.value;
+
+      path.value.name = j.jsxIdentifier("AuiIf");
+      path.value.attributes = [
+        j.jsxAttribute(
+          j.jsxIdentifier("condition"),
+          j.jsxExpressionContainer(arrowFnAst),
+        ),
+      ];
+
+      needsAuiIfImport = true;
+      markAsChanged();
+    });
+
+    // Update closing elements for fixed-condition components
+    root.find(j.JSXClosingElement).forEach((path: any) => {
+      const name = path.value.name;
+      if (!j.JSXMemberExpression.check(name)) return;
+      if (!j.JSXIdentifier.check(name.object)) return;
+      if (!j.JSXIdentifier.check(name.property)) return;
+
+      const primitiveName = name.object.name as string;
+      const propertyName = name.property.name as string;
+      const fixedMap = fixedConditionMap[primitiveName];
+      if (!fixedMap || !fixedMap[propertyName]) return;
+      if (!importedPrimitives.has(primitiveName)) return;
+
+      path.value.name = j.jsxIdentifier("AuiIf");
+      markAsChanged();
+    });
+
+    // Process JSX elements: <ThreadPrimitive.If ...> → <AuiIf condition={...}>
+    root.find(j.JSXOpeningElement).forEach((path: any) => {
+      const name = path.value.name;
+
+      // Check for `<XPrimitive.If ...>`
+      if (!j.JSXMemberExpression.check(name)) return;
+      if (!j.JSXIdentifier.check(name.object)) return;
+      if (!j.JSXIdentifier.check(name.property)) return;
+      if (name.property.name !== "If") return;
+
+      const primitiveName = name.object.name;
+      const propMap = primitiveMap[primitiveName];
+      if (!propMap) return;
+      if (!importedPrimitives.has(primitiveName)) return;
+
+      // Extract props
+      const attrs: any[] = path.value.attributes || [];
+      const fragments: ConditionFragment[] = [];
+      let hasUnknownProp = false;
+
+      for (const attr of attrs) {
+        if (!j.JSXAttribute.check(attr)) {
+          // JSX spread attributes — can't migrate
+          hasUnknownProp = true;
+          continue;
+        }
+        const propName =
+          typeof attr.name.name === "string" ? attr.name.name : null;
+        if (!propName) continue;
+
+        const mapper = propMap[propName];
+        if (!mapper) {
+          hasUnknownProp = true;
+          continue;
+        }
+
+        const value = getAttrValue(j, attr);
+        const fragment = mapper(value);
+        if (fragment) {
+          fragments.push(fragment);
+        }
+      }
+
+      // If we couldn't map all props, skip this element
+      if (hasUnknownProp || fragments.length === 0) return;
+
+      const conditionBody = buildConditionString(fragments);
+
+      // Parse the arrow function as an expression to get a proper AST node
+      const arrowFnAst = j(`(s) => ${conditionBody}`)
+        .find(j.ArrowFunctionExpression)
+        .paths()[0]!.value;
+
+      // Replace <XPrimitive.If ...> with <AuiIf condition={...}>
+      path.value.name = j.jsxIdentifier("AuiIf");
+
+      // Replace all attributes with a single condition prop
+      path.value.attributes = [
+        j.jsxAttribute(
+          j.jsxIdentifier("condition"),
+          j.jsxExpressionContainer(arrowFnAst),
+        ),
+      ];
+
+      needsAuiIfImport = true;
+      markAsChanged();
+    });
+
+    // Update closing elements to match
+    root.find(j.JSXClosingElement).forEach((path: any) => {
+      const name = path.value.name;
+      if (!j.JSXMemberExpression.check(name)) return;
+      if (!j.JSXIdentifier.check(name.object)) return;
+      if (!j.JSXIdentifier.check(name.property)) return;
+      if (name.property.name !== "If") return;
+
+      const primitiveName = name.object.name;
+      if (!primitiveMap[primitiveName]) return;
+      if (!importedPrimitives.has(primitiveName)) return;
+
+      path.value.name = j.jsxIdentifier("AuiIf");
+      markAsChanged();
+    });
+
+    // Add AuiIf import if needed
+    if (needsAuiIfImport) {
+      let hasAuiIfImport = false;
+      let assistantUiImport: any = null;
+
+      root.find(j.ImportDeclaration).forEach((path: any) => {
+        const source = path.value.source.value;
+        if (typeof source === "string" && source.startsWith("@assistant-ui/")) {
+          assistantUiImport = path;
+          path.value.specifiers?.forEach((specifier: any) => {
+            if (
+              j.ImportSpecifier.check(specifier) &&
+              (specifier.imported.name === "AuiIf" ||
+                specifier.local?.name === "AuiIf")
+            ) {
+              hasAuiIfImport = true;
+            }
+          });
+        }
+      });
+
+      if (!hasAuiIfImport && assistantUiImport) {
+        assistantUiImport.value.specifiers.push(
+          j.importSpecifier(j.identifier("AuiIf")),
+        );
+        markAsChanged();
+      }
+    }
+  },
+);
+
+export default migratePrimitiveIfToAuiIf;

package/src/commands/create.ts

@@ -1,19 +1,167 @@
 import { Command } from "commander";
 import chalk from "chalk";
 import { spawn } from "cross-spawn";
+import path from "node:path";
+import * as p from "@clack/prompts";
 import { logger } from "../lib/utils/logger";
 import { createFromExample } from "../lib/create-from-example";
 
 // Keep in sync with packages/create-assistant-ui/src/index.ts
 const templates = {
-  default: "https://github.com/assistant-ui/assistant-ui-starter",
-  minimal: "https://github.com/assistant-ui/assistant-ui-starter-minimal",
-  cloud: "https://github.com/assistant-ui/assistant-ui-starter-cloud",
-  langgraph: "https://github.com/assistant-ui/assistant-ui-starter-langgraph",
-  mcp: "https://github.com/assistant-ui/assistant-ui-starter-mcp",
-};
+  default: {
+    url: "https://github.com/assistant-ui/assistant-ui-starter",
+    label: "Default",
+    hint: "Default template with Vercel AI SDK",
+  },
+  minimal: {
+    url: "https://github.com/assistant-ui/assistant-ui-starter-minimal",
+    label: "Minimal",
+    hint: "Bare-bones starting point",
+  },
+  cloud: {
+    url: "https://github.com/assistant-ui/assistant-cloud-starter",
+    label: "Cloud",
+    hint: "Cloud-backed persistence starter",
+  },
+  "cloud-clerk": {
+    url: "https://github.com/assistant-ui/assistant-ui-starter-cloud-clerk",
+    label: "Cloud + Clerk",
+    hint: "Cloud-backed starter with Clerk auth",
+  },
+  langgraph: {
+    url: "https://github.com/assistant-ui/assistant-ui-starter-langgraph",
+    label: "LangGraph",
+    hint: "LangGraph starter template",
+  },
+  mcp: {
+    url: "https://github.com/assistant-ui/assistant-ui-starter-mcp",
+    label: "MCP",
+    hint: "MCP starter template",
+  },
+} as const;
 
-const templateNames = Object.keys(templates);
+type TemplateName = keyof typeof templates;
+const templateNames = Object.keys(templates) as TemplateName[];
+
+const templatePickerOptions: Array<{
+  value: TemplateName;
+  label: string;
+  hint: string;
+}> = templateNames.map((name) => ({
+  value: name,
+  label: templates[name].label,
+  hint: templates[name].hint,
+}));
+
+export async function resolveCreateTemplateName(params: {
+  template?: string;
+  stdinIsTTY?: boolean;
+  select?: typeof p.select;
+  isCancel?: typeof p.isCancel;
+}): Promise<TemplateName | null> {
+  const {
+    template,
+    stdinIsTTY = process.stdin.isTTY,
+    select = p.select,
+    isCancel = p.isCancel,
+  } = params;
+
+  if (template) {
+    return template as TemplateName;
+  }
+
+  if (!stdinIsTTY) {
+    return "default";
+  }
+
+  const selected = await select({
+    message: "Select a template:",
+    options: templatePickerOptions,
+  });
+
+  if (isCancel(selected)) {
+    return null;
+  }
+
+  return selected as TemplateName;
+}
+
+class SpawnExitError extends Error {
+  code: number;
+
+  constructor(code: number) {
+    super(`Process exited with code ${code}`);
+    this.code = code;
+  }
+}
+
+async function runSpawn(
+  command: string,
+  args: string[],
+  cwd?: string,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: "inherit",
+      cwd,
+    });
+
+    child.on("error", (error) => reject(error));
+    child.on("close", (code) => {
+      if (code !== 0) {
+        reject(new SpawnExitError(code || 1));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+export function buildCreateNextAppArgs(params: {
+  projectDirectory?: string;
+  useNpm?: boolean;
+  usePnpm?: boolean;
+  useYarn?: boolean;
+  useBun?: boolean;
+  skipInstall?: boolean;
+  templateUrl: string;
+}): string[] {
+  const {
+    projectDirectory,
+    useNpm,
+    usePnpm,
+    useYarn,
+    useBun,
+    skipInstall,
+    templateUrl,
+  } = params;
+
+  const args = ["create-next-app@latest"];
+  if (projectDirectory) args.push(projectDirectory);
+  if (useNpm) args.push("--use-npm");
+  if (usePnpm) args.push("--use-pnpm");
+  if (useYarn) args.push("--use-yarn");
+  if (useBun) args.push("--use-bun");
+  if (skipInstall) args.push("--skip-install");
+
+  args.push("-e", templateUrl);
+  return args;
+}
+
+export function resolveCreateProjectDirectory(params: {
+  projectDirectory?: string;
+  stdinIsTTY?: boolean;
+}): string | undefined {
+  const { projectDirectory, stdinIsTTY = process.stdin.isTTY } = params;
+
+  if (projectDirectory) return projectDirectory;
+  if (!stdinIsTTY) return "my-aui-app";
+  return undefined;
+}
+
+function buildPresetAddArgs(presetUrl: string): string[] {
+  return ["shadcn@latest", "add", "--yes", presetUrl];
+}
 
 export const create = new Command()
   .name("create")
@@ -28,20 +176,38 @@ export const create = new Command()
     "-e, --example <example>",
     "create from an example (e.g., with-langgraph, with-ai-sdk-v6)",
   )
+  .option(
+    "-p, --preset <url>",
+    "preset URL from playground (e.g., https://www.assistant-ui.com/playground/init?preset=chatgpt)",
+  )
   .option("--use-npm", "explicitly use npm")
   .option("--use-pnpm", "explicitly use pnpm")
   .option("--use-yarn", "explicitly use yarn")
   .option("--use-bun", "explicitly use bun")
   .option("--skip-install", "skip installing packages")
   .action(async (projectDirectory, opts) => {
+    const resolvedProjectDirectory = resolveCreateProjectDirectory({
+      projectDirectory,
+    });
+
+    if (opts.example && opts.preset) {
+      logger.error("Cannot use --preset with --example.");
+      process.exit(1);
+    }
+
+    if (opts.preset && !resolvedProjectDirectory) {
+      logger.error("Project directory is required when using --preset.");
+      process.exit(1);
+    }
+
     // Handle --example option
     if (opts.example) {
-      if (!projectDirectory) {
+      if (!resolvedProjectDirectory) {
         logger.error("Project directory is required when using --example");
         process.exit(1);
       }
 
-      await createFromExample(projectDirectory, opts.example, {
+      await createFromExample(resolvedProjectDirectory, opts.example, {
         skipInstall: opts.skipInstall,
         useNpm: opts.useNpm,
         usePnpm: opts.usePnpm,
@@ -52,8 +218,15 @@ export const create = new Command()
     }
 
     // Handle --template option
-    const templateName = (opts.template as keyof typeof templates) ?? "default";
-    const templateUrl = templates[templateName];
+    const templateName = await resolveCreateTemplateName({
+      template: opts.template,
+    });
+    if (!templateName) {
+      p.cancel("Project creation cancelled.");
+      process.exit(0);
+    }
+
+    const templateUrl = templates[templateName]?.url;
 
     if (!templateUrl) {
       logger.error(`Unknown template: ${opts.template}`);
@@ -64,35 +237,44 @@ export const create = new Command()
     logger.info(`Creating project with template: ${templateName}`);
     logger.break();
 
-    const filteredArgs = process.argv.slice(3).filter((arg, index, arr) => {
-      return !(
-        arg === "-t" ||
-        arg === "--template" ||
-        arr[index - 1] === "-t" ||
-        arr[index - 1] === "--template"
-      );
+    const createNextAppArgs = buildCreateNextAppArgs({
+      ...(resolvedProjectDirectory
+        ? { projectDirectory: resolvedProjectDirectory }
+        : {}),
+      ...(opts.useNpm ? { useNpm: true } : {}),
+      ...(opts.usePnpm ? { usePnpm: true } : {}),
+      ...(opts.useYarn ? { useYarn: true } : {}),
+      ...(opts.useBun ? { useBun: true } : {}),
+      ...(opts.skipInstall ? { skipInstall: true } : {}),
+      templateUrl,
     });
 
-    const child = spawn(
-      "npx",
-      [`create-next-app@latest`, ...filteredArgs, "-e", templateUrl],
-      {
-        stdio: "inherit",
-      },
-    );
-
-    child.on("error", (error) => {
-      logger.error(`Failed to create project: ${error.message}`);
-      process.exit(1);
-    });
+    try {
+      await runSpawn("npx", createNextAppArgs);
 
-    child.on("close", (code) => {
-      if (code !== 0) {
-        logger.error(`Project creation failed with code ${code}`);
-        process.exit(code || 1);
-      } else {
+      if (opts.preset) {
+        if (!resolvedProjectDirectory) {
+          logger.error("Project directory is required when using --preset.");
+          process.exit(1);
+        }
+        logger.info("Applying preset configuration...");
         logger.break();
-        logger.success("Project created successfully!");
+        await runSpawn(
+          "npx",
+          buildPresetAddArgs(opts.preset),
+          path.resolve(process.cwd(), resolvedProjectDirectory),
+        );
       }
-    });
+
+      logger.break();
+      logger.success("Project created successfully!");
+    } catch (error) {
+      if (error instanceof SpawnExitError) {
+        logger.error(`Project creation failed with code ${error.code}`);
+        process.exit(error.code);
+      }
+      const message = error instanceof Error ? error.message : String(error);
+      logger.error(`Failed to create project: ${message}`);
+      process.exit(1);
+    }
   });