assistant-ui 0.0.113 → 0.0.115

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

@@ -346,7 +346,7 @@ import { MessagePrimitive, AuiIf } from "@assistant-ui/react";
 
 function MyComponent() {
   return (
-    <AuiIf condition={(s) => !s.message.speech != null}>
+    <AuiIf condition={(s) => !(s.message.speech != null)}>
       <SpeakIcon />
     </AuiIf>
   );
@@ -937,3 +937,50 @@ function MyComponent() {
     );
   });
 });
+
+describe("condition precedence", () => {
+  const compileCondition = (jsx: string) => {
+    const output = applyTransform(`
+import { MessagePrimitive, ComposerPrimitive } from "@assistant-ui/react";
+
+const view = ${jsx};
+`);
+    const arrow = j(output!).find(j.ArrowFunctionExpression).nodes()[0]!;
+    return new Function("s", `return ${j(arrow.body).toSource()};`) as (
+      s: unknown,
+    ) => boolean;
+  };
+
+  it.each([
+    {
+      jsx: "<MessagePrimitive.If speaking={false} />",
+      hidden: { message: { speech: { status: "running" } } },
+      visible: { message: { speech: null } },
+    },
+    {
+      jsx: "<ComposerPrimitive.If dictation={false} />",
+      hidden: { composer: { dictation: { status: "running" } } },
+      visible: { composer: { dictation: null } },
+    },
+    {
+      jsx: "<MessagePrimitive.If hasContent={false} />",
+      hidden: { message: { parts: [{}] } },
+      visible: { message: { parts: [] } },
+    },
+    {
+      jsx: "<MessagePrimitive.If lastOrHover copied />",
+      hidden: { message: { isHovering: true, isLast: false, isCopied: false } },
+      visible: { message: { isHovering: true, isLast: false, isCopied: true } },
+    },
+    {
+      jsx: "<MessagePrimitive.If hasAttachments={false} copied />",
+      hidden: { message: { role: "assistant", isCopied: false } },
+      visible: { message: { role: "assistant", isCopied: true } },
+    },
+  ])("keeps every filter in $jsx", ({ jsx, hidden, visible }) => {
+    const condition = compileCondition(jsx);
+
+    expect(condition(hidden)).toBe(false);
+    expect(condition(visible)).toBe(true);
+  });
+});

package/src/codemods/v0-12/assistant-api-to-aui.ts

@@ -113,6 +113,7 @@ const migrateAssistantApiToAui = createTransformer(
         }
         if (j.VariableDeclaration.check(statement)) {
           for (const declarator of statement.declarations) {
+            if (!j.VariableDeclarator.check(declarator)) continue;
             if (
               j.Identifier.check(declarator.id) &&
               declarator.id.name === "api"
@@ -252,9 +253,11 @@ const migrateAssistantApiToAui = createTransformer(
             grandparent.source != null
           )
             return;
+          // Babel emits exportKind on ExportSpecifier for inline
+          // `export { type api }`; ast-types' typings omit it.
           if (
             grandparent?.exportKind === "type" ||
-            parent.exportKind === "type"
+            (parent as { exportKind?: string }).exportKind === "type"
           )
             return;
           if (parent.exported === path.value && parent.local !== path.value)

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

@@ -161,12 +161,23 @@ const getAttrValue = (j: any, attr: any): unknown => {
   return UNSUPPORTED_VALUE;
 };
 
-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(" && ");
+// Composed as a syntax tree so the printer parenthesizes by precedence;
+// concatenated text lets `!` and `&&` reassociate a fragment's own operators.
+const buildConditionString = (
+  j: any,
+  fragments: ConditionFragment[],
+): string => {
+  const parseExpression = (source: string) =>
+    j(`${source};`).find(j.ExpressionStatement).nodes()[0]!.expression;
+
+  const condition = fragments
+    .map((f) => {
+      const expression = parseExpression(f.expression);
+      return f.negated ? j.unaryExpression("!", expression) : expression;
+    })
+    .reduce((left: any, right: any) => j.logicalExpression("&&", left, right));
+
+  return j(condition).toSource();
 };
 
 const migratePrimitiveIfToAuiIf = createTransformer(
@@ -290,7 +301,7 @@ const migratePrimitiveIfToAuiIf = createTransformer(
       // If we couldn't map all props, skip this element
       if (hasUnknownProp || fragments.length === 0) return;
 
-      convertElementToAuiIf(path, buildConditionString(fragments));
+      convertElementToAuiIf(path, buildConditionString(j, fragments));
     });
 
     // Add AuiIf import if needed

package/src/commands/add.ts

@@ -22,7 +22,6 @@ export function createAddComponentsPlan(params: {
   packageManager: PackageManagerName;
   yes?: boolean;
   overwrite?: boolean;
-  cwd?: string;
   path?: string;
   style?: string;
 }): AddComponentsPlan {
@@ -40,7 +39,6 @@ export function createAddComponentsPlan(params: {
   // This flag is for shadcn's own confirmation prompt.
   if (params.yes) args.push("--yes");
   if (params.overwrite) args.push("--overwrite");
-  if (params.cwd) args.push("--cwd", params.cwd);
   if (params.path) args.push("--path", params.path);
 
   return { command, args };
@@ -83,7 +81,6 @@ export const add = new Command()
       packageManager,
       yes: opts.yes,
       overwrite: opts.overwrite,
-      cwd: opts.cwd,
       path: opts.path,
       ...(style === undefined ? {} : { style }),
     });

package/src/commands/create.ts

@@ -388,6 +388,42 @@ export function resolveCreateProjectDirectory(params: {
   return undefined;
 }
 
+export function resolveProjectDirectoryGuidance(params: {
+  absoluteProjectDir: string;
+  cwd?: string;
+  platform?: NodeJS.Platform;
+}): { display: string; cdCommand: string } {
+  const {
+    absoluteProjectDir,
+    cwd = process.cwd(),
+    platform = process.platform,
+  } = params;
+  const isWindows = platform === "win32";
+  const pathApi = isWindows ? path.win32 : path.posix;
+
+  const relative = pathApi.relative(cwd, absoluteProjectDir);
+  const escapesCwd =
+    relative === ".." || relative.startsWith(`..${pathApi.sep}`);
+  const display =
+    relative && !escapesCwd && !pathApi.isAbsolute(relative)
+      ? relative
+      : absoluteProjectDir;
+
+  const target = display.startsWith("-")
+    ? `.${pathApi.sep}${display}`
+    : display;
+  // Neither Windows shell has a literal quoting form the other accepts: cmd
+  // reads single quotes as part of the name, and double quotes still expand
+  // %VAR% there and $var in PowerShell.
+  const quoted = (isWindows ? /^[\w@.:/\\+-]+$/ : /^[\w@./+-]+$/).test(target)
+    ? target
+    : isWindows
+      ? `"${target}"`
+      : `'${target.replaceAll("'", "'\\''")}'`;
+
+  return { display, cdCommand: `cd ${quoted}` };
+}
+
 const PLAYGROUND_PRESET_BASE_URL =
   "https://www.assistant-ui.com/playground/init";
 
@@ -542,11 +578,13 @@ export const create = new Command()
 
     // Check directory
     const absoluteProjectDir = path.resolve(resolvedProjectDirectory);
+    const { display: displayProjectDir, cdCommand } =
+      resolveProjectDirectoryGuidance({ absoluteProjectDir });
     try {
       const files = fs.readdirSync(absoluteProjectDir);
       if (files.length > 0) {
         logger.error(
-          `Directory ${resolvedProjectDirectory} already exists and is not empty`,
+          `Directory ${displayProjectDir} already exists and is not empty`,
         );
         process.exit(1);
       }
@@ -557,12 +595,12 @@ export const create = new Command()
         // Directory doesn't exist — good, proceed
       } else if (code === "ENOTDIR") {
         logger.error(
-          `${resolvedProjectDirectory} already exists and is not a directory`,
+          `${displayProjectDir} already exists and is not a directory`,
         );
         process.exit(1);
       } else {
         const message = err instanceof Error ? err.message : String(err);
-        logger.error(`Cannot access ${resolvedProjectDirectory}: ${message}`);
+        logger.error(`Cannot access ${displayProjectDir}: ${message}`);
         process.exit(1);
       }
     }
@@ -700,7 +738,7 @@ export const create = new Command()
         logger.break();
         logger.error("Project created with missing components.");
         logger.info("Retry the component install with:");
-        logger.info(`  cd ${resolvedProjectDirectory}`);
+        logger.info(`  ${cdCommand}`);
         logger.info(`  ${transformResult.registryInstallFailure.retryCommand}`);
         process.exit(1);
       }
@@ -758,7 +796,7 @@ export const create = new Command()
       }
 
       logger.info("Next steps:");
-      logger.info(`  cd ${resolvedProjectDirectory}`);
+      logger.info(`  ${cdCommand}`);
       if (opts.skipInstall) {
         logger.info(`  ${pm} install`);
       }

package/src/commands/init.ts

@@ -84,7 +84,7 @@ export const init = new Command()
       }
 
       const createArgs: string[] = [];
-      if (projectDirectory) createArgs.push(projectDirectory);
+      if (projectDirectory) createArgs.push(targetDir);
       if (presetUrl) createArgs.push("--preset", presetUrl);
       if (opts.useNpm) createArgs.push("--use-npm");
       if (opts.usePnpm) createArgs.push("--use-pnpm");

package/src/commands/mcp.ts

@@ -14,12 +14,15 @@ type MCPTarget =
   | "claude-code"
   | "claude-desktop";
 
+const HOSTED_MCP_URL = "https://www.assistant-ui.com/mcp";
+
 const MCP_CONFIGS: Record<
   Exclude<MCPTarget, "claude-code">,
   {
     name: string;
     getPath: () => string;
     config: object;
+    replaceServerKey?: string;
     postInstall?: string;
   }
 > = {
@@ -29,11 +32,11 @@ const MCP_CONFIGS: Record<
     config: {
       mcpServers: {
         "assistant-ui": {
-          command: "npx",
-          args: ["-y", "@assistant-ui/mcp-docs-server"],
+          url: HOSTED_MCP_URL,
         },
       },
     },
+    replaceServerKey: "mcpServers",
     postInstall:
       "Open Cursor Settings → MCP → find 'assistant-ui' and click enable.",
   },
@@ -44,11 +47,11 @@ const MCP_CONFIGS: Record<
     config: {
       mcpServers: {
         "assistant-ui": {
-          command: "npx",
-          args: ["-y", "@assistant-ui/mcp-docs-server"],
+          serverUrl: HOSTED_MCP_URL,
         },
       },
     },
+    replaceServerKey: "mcpServers",
     postInstall: "Fully quit and re-open Windsurf to activate.",
   },
   vscode: {
@@ -57,12 +60,12 @@ const MCP_CONFIGS: Record<
     config: {
       servers: {
         "assistant-ui": {
-          command: "npx",
-          args: ["-y", "@assistant-ui/mcp-docs-server"],
-          type: "stdio",
+          type: "http",
+          url: HOSTED_MCP_URL,
         },
       },
     },
+    replaceServerKey: "servers",
     postInstall:
       "Enable MCP in Settings → search 'MCP' → enable 'Chat > MCP'. Use Copilot Chat in Agent mode.",
   },
@@ -153,14 +156,18 @@ async function installForTarget(target: MCPTarget): Promise<void> {
     logger.break();
 
     try {
+      await runSpawn("claude", ["mcp", "remove", "assistant-ui"]).catch(
+        (error: unknown) => {
+          if (error instanceof SpawnSignalError) throw error;
+        },
+      );
       await runSpawn("claude", [
         "mcp",
         "add",
+        "--transport",
+        "http",
         "assistant-ui",
-        "--",
-        "npx",
-        "-y",
-        "@assistant-ui/mcp-docs-server",
+        HOSTED_MCP_URL,
       ]);
     } catch (error) {
       if (error instanceof SpawnSignalError) throw error;
@@ -177,6 +184,9 @@ async function installForTarget(target: MCPTarget): Promise<void> {
 
     logger.break();
     logger.success("MCP server installed for Claude Code!");
+    logger.info(
+      `Connects to the hosted assistant-ui MCP server at ${HOSTED_MCP_URL}.`,
+    );
     logger.info(
       "The server starts automatically. Try asking about assistant-ui!",
     );
@@ -220,12 +230,27 @@ async function installForTarget(target: MCPTarget): Promise<void> {
 
   const newConfig = deepMerge(existingConfig, targetConfig.config);
 
+  if (targetConfig.replaceServerKey) {
+    const key = targetConfig.replaceServerKey;
+    newConfig[key] = {
+      ...newConfig[key],
+      "assistant-ui": (targetConfig.config as any)[key]["assistant-ui"],
+    };
+  }
+
   fs.writeFileSync(configPath, `${JSON.stringify(newConfig, null, 2)}\n`);
 
   logger.break();
   logger.success(`MCP server installed for ${targetConfig.name}!`);
   logger.info(`Config written to: ${configPath}`);
 
+  if (targetConfig.replaceServerKey) {
+    logger.break();
+    logger.info(
+      `Connects to the hosted assistant-ui MCP server at ${HOSTED_MCP_URL}.`,
+    );
+  }
+
   if (targetConfig.postInstall) {
     logger.break();
     logger.info(targetConfig.postInstall);
@@ -234,7 +259,7 @@ async function installForTarget(target: MCPTarget): Promise<void> {
 
 export const mcp = new Command()
   .name("mcp")
-  .description("install assistant-ui MCP docs server for your IDE")
+  .description("connect your IDE to the assistant-ui MCP server")
   .option("--cursor", "install for Cursor")
   .option("--windsurf", "install for Windsurf")
   .option("--vscode", "install for VSCode")

package/src/lib/create-project.test.ts

@@ -0,0 +1,175 @@
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { reconcileAssistantUIImportLayout } from "./create-project";
+
+describe("reconcileAssistantUIImportLayout", () => {
+  let projectDir: string;
+
+  beforeEach(() => {
+    projectDir = fs.mkdtempSync(path.join(os.tmpdir(), "aui-cli-test-"));
+  });
+
+  afterEach(() => {
+    fs.rmSync(projectDir, { recursive: true, force: true });
+  });
+
+  const write = (file: string, content: string) => {
+    const fullPath = path.join(projectDir, file);
+    fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+    fs.writeFileSync(fullPath, content);
+  };
+
+  const read = (file: string) =>
+    fs.readFileSync(path.join(projectDir, file), "utf8");
+
+  it("rewrites a legacy import when only the elements layout exists", async () => {
+    write(
+      "app/page.tsx",
+      'import { Thread } from "@/components/assistant-ui/thread";\n' +
+        'import { ThreadList } from "@/components/assistant-ui/thread-list";\n',
+    );
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+    write("components/assistant-ui/elements/thread-list.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/page.tsx")).toBe(
+      'import { Thread } from "@/components/assistant-ui/elements/thread.aui";\n' +
+        'import { ThreadList } from "@/components/assistant-ui/elements/thread-list.aui";\n',
+    );
+  });
+
+  it("rewrites module declarations without changing import-like source text", async () => {
+    write(
+      "app/page.tsx",
+      'import { Thread } from "@/components/assistant-ui/thread";\n' +
+        'export { ThreadList } from "@/components/assistant-ui/thread-list";\n' +
+        "const example = 'from \"@/components/assistant-ui/thread\"';\n" +
+        '// from "@/components/assistant-ui/thread-list"\n',
+    );
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+    write("components/assistant-ui/elements/thread-list.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/page.tsx")).toBe(
+      'import { Thread } from "@/components/assistant-ui/elements/thread.aui";\n' +
+        'export { ThreadList } from "@/components/assistant-ui/elements/thread-list.aui";\n' +
+        "const example = 'from \"@/components/assistant-ui/thread\"';\n" +
+        '// from "@/components/assistant-ui/thread-list"\n',
+    );
+  });
+
+  it("rewrites a legacy import to a bare elements file without the .aui segment", async () => {
+    write(
+      "app/MyThread.tsx",
+      'import { MarkdownText } from "@/components/assistant-ui/markdown-text";\n' +
+        'import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";\n',
+    );
+    write("components/assistant-ui/elements/markdown-text.tsx", "export {};");
+    write(
+      "components/assistant-ui/elements/tooltip-icon-button.tsx",
+      "export {};",
+    );
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/MyThread.tsx")).toBe(
+      'import { MarkdownText } from "@/components/assistant-ui/elements/markdown-text";\n' +
+        'import { TooltipIconButton } from "@/components/assistant-ui/elements/tooltip-icon-button";\n',
+    );
+  });
+
+  it("prefers the .aui variant when both variants share a basename", async () => {
+    write(
+      "app/page.tsx",
+      'import { Reasoning } from "@/components/assistant-ui/reasoning";\n',
+    );
+    write("components/assistant-ui/elements/reasoning.tsx", "export {};");
+    write("components/assistant-ui/elements/reasoning.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/page.tsx")).toBe(
+      'import { Reasoning } from "@/components/assistant-ui/elements/reasoning.aui";\n',
+    );
+  });
+
+  it("supports the src/ project layout", async () => {
+    write(
+      "src/routes/index.tsx",
+      'import { Thread } from "@/components/assistant-ui/thread";\n',
+    );
+    write("src/components/assistant-ui/elements/thread.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("src/routes/index.tsx")).toBe(
+      'import { Thread } from "@/components/assistant-ui/elements/thread.aui";\n',
+    );
+  });
+
+  it("leaves imports alone when the legacy file exists", async () => {
+    const source =
+      'import { Thread } from "@/components/assistant-ui/thread";\n';
+    write("app/page.tsx", source);
+    write("components/assistant-ui/thread.tsx", "export {};");
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/page.tsx")).toBe(source);
+  });
+
+  it("leaves imports alone when neither layout has the file", async () => {
+    const source =
+      'import { Custom } from "@/components/assistant-ui/custom-part";\n';
+    write("app/page.tsx", source);
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/page.tsx")).toBe(source);
+  });
+
+  it("leaves elements imports untouched", async () => {
+    const source =
+      'import { Thread } from "@/components/assistant-ui/elements/thread.aui";\n';
+    write("app/page.tsx", source);
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/page.tsx")).toBe(source);
+  });
+
+  it("parses TypeScript files with generic arrow functions", async () => {
+    write(
+      "app/helpers.ts",
+      'import { Thread } from "@/components/assistant-ui/thread";\n' +
+        "export const identity = <T>(value: T) => value;\n",
+    );
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+
+    await reconcileAssistantUIImportLayout(projectDir);
+
+    expect(read("app/helpers.ts")).toBe(
+      'import { Thread } from "@/components/assistant-ui/elements/thread.aui";\n' +
+        "export const identity = <T>(value: T) => value;\n",
+    );
+  });
+
+  it("leaves unparseable source files untouched", async () => {
+    const source =
+      'import { Thread } from "@/components/assistant-ui/thread";\nconst broken = ;\n';
+    write("app/broken.ts", source);
+    write("components/assistant-ui/elements/thread.aui.tsx", "export {};");
+
+    await expect(
+      reconcileAssistantUIImportLayout(projectDir),
+    ).resolves.toBeUndefined();
+    expect(read("app/broken.ts")).toBe(source);
+  });
+});