-
How can I help you?
-
- {/* Suggestion Tags */}
-
- {CHAT_SUGGESTIONS.map(({ label, message }) => (
- sendMessage(message)}
- className="text-sm rounded-full border border-[var(--lb-foreground-subtle)] px-4 py-2 font-medium"
- >
- {label}
-
- ))}
-
+
);
-}
+}
\ No newline at end of file
diff --git a/e2e/next-ai-kitchen-sink/app/toolcall-streaming/[chatId]/page.tsx b/e2e/next-ai-kitchen-sink/app/toolcall-streaming/[chatId]/page.tsx
new file mode 100644
index 00000000000..67318705528
--- /dev/null
+++ b/e2e/next-ai-kitchen-sink/app/toolcall-streaming/[chatId]/page.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { use } from "react";
+import { defineAiTool } from "@liveblocks/core";
+import {
+ ClientSideSuspense,
+ LiveblocksProvider,
+ useSendAiMessage,
+} from "@liveblocks/react/suspense";
+import {
+ AiChat,
+ AiChatComponentsEmptyProps,
+ AiTool,
+} from "@liveblocks/react-ui";
+
+export default function HtmlStreamingPage({ params }: { params: Promise<{ chatId: string }> }) {
+ const { chatId } = use(params);
+ return (
+
+
+
+ {
+ return { data: { success: true } };
+ },
+ render: () => {
+ return (
+
+
+ );
+ },
+ }),
+ }}
+ className="h-screen"
+ />
+
+
+
+ );
+}
+
+const CHAT_SUGGESTIONS = [
+ {
+ label: "Simple marketing page",
+ message: "Create a simple marketing page for a SaaS product",
+ },
+ {
+ label: "Landing page with hero",
+ message:
+ "Generate a landing page with a hero section, features, and footer",
+ },
+ {
+ label: "Product showcase",
+ message:
+ "Create an HTML page showcasing a new product with images and descriptions",
+ },
+ {
+ label: "Contact page",
+ message: "Build a contact page with a form and company information",
+ },
+];
+
+function AiChatEmptyComponent({ chatId }: AiChatComponentsEmptyProps) {
+ const sendMessage = useSendAiMessage(chatId);
+
+ return (
+
+
HTML Streaming Test
+
+ Ask me to generate HTML and watch it stream in real-time!
+
+
+ {/* Suggestion Tags */}
+
+ {CHAT_SUGGESTIONS.map(({ label, message }) => (
+ sendMessage(message)}
+ className="text-sm rounded-full border border-[var(--lb-foreground-subtle)] px-4 py-2 font-medium"
+ >
+ {label}
+
+ ))}
+
+
+ );
+}
diff --git a/e2e/next-ai-kitchen-sink/app/toolcall-streaming/page.tsx b/e2e/next-ai-kitchen-sink/app/toolcall-streaming/page.tsx
new file mode 100644
index 00000000000..00be891a8af
--- /dev/null
+++ b/e2e/next-ai-kitchen-sink/app/toolcall-streaming/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { nanoid } from "@liveblocks/core";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function Page() {
+ const router = useRouter();
+
+ useEffect(() => {
+ router.replace(`/toolcall-streaming/${nanoid()}`);
+ }, [router]);
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/e2e/next-ai-kitchen-sink/package.json b/e2e/next-ai-kitchen-sink/package.json
index faa07a4254d..9352fc7e090 100644
--- a/e2e/next-ai-kitchen-sink/package.json
+++ b/e2e/next-ai-kitchen-sink/package.json
@@ -27,6 +27,7 @@
"@tailwindcss/postcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.1",
+ "playwright": "^1.54.2",
"tailwindcss": "^4",
"typescript": "^5"
}
diff --git a/e2e/next-ai-kitchen-sink/playwright.config.ts b/e2e/next-ai-kitchen-sink/playwright.config.ts
index 0a678a3d082..2b6e4bfd44a 100644
--- a/e2e/next-ai-kitchen-sink/playwright.config.ts
+++ b/e2e/next-ai-kitchen-sink/playwright.config.ts
@@ -1,5 +1,4 @@
-import type { PlaywrightTestConfig } from "@playwright/test";
-import { devices } from "@playwright/test";
+import { defineConfig, devices } from "@playwright/test";
/**
* Read environment variables from file.
@@ -10,7 +9,7 @@ import { devices } from "@playwright/test";
/**
* See https://playwright.dev/docs/test-configuration.
*/
-const config: PlaywrightTestConfig = {
+export default defineConfig({
testDir: "./test",
/* Maximum time one test can run for. */
timeout: 60 * 1000,
@@ -27,27 +26,37 @@ const config: PlaywrightTestConfig = {
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 4 : 6,
+ /* Fully parallel test execution */
+ fullyParallel: true,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
- reporter: "html",
+ reporter: [
+ ["html", { title: "Liveblocks AI Kitchen Sink E2E Tests" }],
+ ["github"],
+ ],
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
headless: process.env.CI || process.env.HEADLESS ? true : false,
viewport: { width: 640, height: 800 },
permissions: ["clipboard-write", "clipboard-read"],
- /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
- actionTimeout: 0,
+ /* Maximum time each action such as `click()` can take. 10s local, 15s CI. */
+ actionTimeout: process.env.CI ? 15000 : 10000,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
- trace: "retain-on-failure",
+ trace: "on-first-retry",
+ video: "on-first-retry",
+ screenshot: "on-first-failure", // Only captures main page
},
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
- use: { ...devices["Desktop Chrome"] },
+ use: {
+ ...devices["Desktop Chrome"],
+ channel: "chromium", // Enable the use of New Headless mode in Chromium
+ },
},
// {
// name: "firefox",
@@ -65,7 +74,6 @@ const config: PlaywrightTestConfig = {
: "npm run dev", // Test dev builds on CI (with React StrictMode enabled)
port: 3008, // AI kitchen sink port
reuseExistingServer: !process.env.CI,
+ timeout: 120 * 1000,
},
-};
-
-export default config;
+});
diff --git a/e2e/next-ai-kitchen-sink/test/knowledge-isolation.test.ts b/e2e/next-ai-kitchen-sink/test/knowledge-isolation.test.ts
index e3e33ad12a7..17c98ed86db 100644
--- a/e2e/next-ai-kitchen-sink/test/knowledge-isolation.test.ts
+++ b/e2e/next-ai-kitchen-sink/test/knowledge-isolation.test.ts
@@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test";
import type { Page } from "@playwright/test";
+import { createRandomChat, cleanupAllChats } from "./test-helpers";
async function setupChatA(page: Page) {
const textInput = page.locator(
@@ -10,10 +11,10 @@ async function setupChatA(page: Page) {
);
// If there's an ongoing operation (abort button is enabled), click it first to clear state
- if ((await sendButton.getAttribute("data-variant")) === "secondary") {
+ if ((await sendButton.getAttribute("aria-label")) === "Abort response") {
await sendButton.click();
// Wait for it to return to send state
- await expect(sendButton).toHaveAttribute("data-variant", "primary");
+ await expect(sendButton).toHaveAttribute("aria-label", "Send");
}
// Clear any existing text
@@ -31,10 +32,10 @@ async function setupChatB(page: Page) {
);
// If there's an ongoing operation (abort button is enabled), click it first to clear state
- if ((await sendButton.getAttribute("data-variant")) === "secondary") {
+ if ((await sendButton.getAttribute("aria-label")) === "Abort response") {
await sendButton.click();
// Wait for it to return to send state
- await expect(sendButton).toHaveAttribute("data-variant", "primary");
+ await expect(sendButton).toHaveAttribute("aria-label", "Send");
}
// Clear any existing text
@@ -55,11 +56,11 @@ async function sendMessageToChatA(page: Page, message: string) {
).toBeVisible();
// Wait for generation to finish by monitoring button state change
- // Button should become "secondary" (abort) during generation, then back to "primary" (send)
- await expect(sendButton).toHaveAttribute("data-variant", "secondary", {
+ // Button should become "Abort response" during generation, then back to "Send"
+ await expect(sendButton).toHaveAttribute("aria-label", "Abort response", {
timeout: 10000,
});
- await expect(sendButton).toHaveAttribute("data-variant", "primary", {
+ await expect(sendButton).toHaveAttribute("aria-label", "Send", {
timeout: 60000,
});
}
@@ -76,47 +77,31 @@ async function sendMessageToChatB(page: Page, message: string) {
).toBeVisible();
// Wait for generation to finish by monitoring button state change
- // Button should become "secondary" (abort) during generation, then back to "primary" (send)
- await expect(sendButton).toHaveAttribute("data-variant", "secondary", {
+ // Button should become "Abort response" during generation, then back to "Send"
+ await expect(sendButton).toHaveAttribute("aria-label", "Abort response", {
timeout: 10000,
});
- await expect(sendButton).toHaveAttribute("data-variant", "primary", {
+ await expect(sendButton).toHaveAttribute("aria-label", "Send", {
timeout: 60000,
});
}
test.describe("AiChat Knowledge Isolation", () => {
+ test.afterEach(async () => {
+ await cleanupAllChats();
+ });
+
test.beforeEach(async ({ page }) => {
- // Clean up existing chats
- await page.goto("/chats");
- await expect(page.locator("h1")).toHaveText("List of all chats");
-
- // Delete chat-a if it exists
- const chatALink = page.locator('a[href="/chats/chat-a"]');
- if (await chatALink.isVisible()) {
- const deleteButton = chatALink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(chatALink).not.toBeVisible();
- }
-
- // Delete chat-b if it exists
- const chatBLink = page.locator('a[href="/chats/chat-b"]');
- if (await chatBLink.isVisible()) {
- const deleteButton = chatBLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(chatBLink).not.toBeVisible();
- }
+ // Note: Each test will create its own unique chat IDs to avoid conflicts
});
test("should NOT share knowledge between separate AiChat instances", async ({
page,
}) => {
- // Go to the dual chat page
- await page.goto("/dual-chat");
+ // Create unique test chat IDs and go to the dual chat page
+ const chatId1 = createRandomChat(page);
+ const chatId2 = createRandomChat(page);
+ await page.goto(`/dual-chat/${chatId1}/${chatId2}`);
// Wait for the page title and both chats to be visible
await expect(
@@ -163,7 +148,11 @@ test.describe("AiChat Knowledge Isolation", () => {
test("should isolate different knowledge values between chats", async ({
page,
}) => {
- await page.goto("/dual-chat");
+ // Create unique test chat IDs
+ const chatId1 = createRandomChat(page);
+ const chatId2 = createRandomChat(page);
+
+ await page.goto(`/dual-chat/${chatId1}/${chatId2}`);
// Wait for the page title to be visible
await expect(
@@ -212,8 +201,10 @@ test.describe("AiChat Knowledge Isolation", () => {
test("should SHARE knowledge when using RegisterAiKnowledge globally", async ({
page,
}) => {
- // Go to the dual chat page (now contains both local and global knowledge testing)
- await page.goto("/dual-chat");
+ // Create unique test chat IDs and go to the dual chat page
+ const chatId1 = createRandomChat(page);
+ const chatId2 = createRandomChat(page);
+ await page.goto(`/dual-chat/${chatId1}/${chatId2}`);
// Wait for the page title and both chats to be visible
await expect(
diff --git a/e2e/next-ai-kitchen-sink/test/knowledge-simple.test.ts b/e2e/next-ai-kitchen-sink/test/knowledge-simple.test.ts
index f3bf3b82f91..3eb9bbaeddf 100644
--- a/e2e/next-ai-kitchen-sink/test/knowledge-simple.test.ts
+++ b/e2e/next-ai-kitchen-sink/test/knowledge-simple.test.ts
@@ -1,24 +1,17 @@
import { test, expect } from "@playwright/test";
+import { createRandomChat, cleanupAllChats } from "./test-helpers";
test.describe("Knowledge Registration - Simple", () => {
+ test.afterEach(async () => {
+ await cleanupAllChats();
+ });
+
test("should open knowledge page and interact with AI chat", async ({
page,
}) => {
- // Clean up first - delete the knowledge chat if it exists
- await page.goto("/chats");
- await expect(page.locator("h1")).toHaveText("List of all chats");
-
- const knowledgeChatLink = page.locator('a[href="/chats/todo125"]');
- if (await knowledgeChatLink.isVisible()) {
- const deleteButton = knowledgeChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(knowledgeChatLink).not.toBeVisible();
- }
-
- // Go to knowledge page
- await page.goto("/knowledge");
+ // Create unique test chat and go to knowledge page
+ const chatId = createRandomChat(page);
+ await page.goto(`/knowledge/${chatId}`);
// Wait for the page to load - verify default tab is "Todo app"
await expect(
@@ -51,11 +44,11 @@ test.describe("Knowledge Registration - Simple", () => {
const sendButton = page.locator(".lb-ai-composer-action");
// If there's an ongoing operation (abort button is enabled), click it first to clear state
- const buttonVariant = await sendButton.getAttribute("data-variant");
- if (buttonVariant === "secondary") {
+ const buttonLabel = await sendButton.getAttribute("aria-label");
+ if (buttonLabel === "Abort response") {
await sendButton.click();
// Wait for it to return to send state
- await expect(sendButton).toHaveAttribute("data-variant", "primary");
+ await expect(sendButton).toHaveAttribute("aria-label", "Send");
}
// Clear any existing text and send a simple message
diff --git a/e2e/next-ai-kitchen-sink/test/knowledge.test.ts b/e2e/next-ai-kitchen-sink/test/knowledge.test.ts
index 906a575d791..3c2f7d2b6eb 100644
--- a/e2e/next-ai-kitchen-sink/test/knowledge.test.ts
+++ b/e2e/next-ai-kitchen-sink/test/knowledge.test.ts
@@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test";
import type { Page } from "@playwright/test";
+import { createRandomChat, cleanupAllChats } from "./test-helpers";
async function setupAiChat(page: Page) {
// The knowledge page has the chat trigger button with test ID
@@ -62,24 +63,16 @@ async function sendAiMessage(page: Page, message: string) {
}
test.describe("Knowledge Registration", () => {
+ test.afterEach(async () => {
+ await cleanupAllChats();
+ });
+
test("should use registered knowledge about current view and todos", async ({
page,
}) => {
- // Clean up - delete the knowledge chat to start fresh
- await page.goto("/chats");
- await expect(page.locator("h1")).toHaveText("List of all chats");
-
- const knowledgeChatLink = page.locator('a[href="/chats/todo125"]');
- if (await knowledgeChatLink.isVisible()) {
- const deleteButton = knowledgeChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(knowledgeChatLink).not.toBeVisible();
- }
-
- // Go to knowledge page
- await page.goto("/knowledge");
+ // Create unique test chat and go to knowledge page
+ const chatId = createRandomChat(page);
+ await page.goto(`/knowledge/${chatId}`);
// Wait for the page to load - verify default tab is "Todo app"
await expect(
@@ -111,18 +104,9 @@ test.describe("Knowledge Registration", () => {
});
test("should use nickname knowledge when enabled", async ({ page }) => {
- // Clean up first
- await page.goto("/chats");
- const knowledgeChatLink = page.locator('a[href="/chats/todo125"]');
- if (await knowledgeChatLink.isVisible()) {
- const deleteButton = knowledgeChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(knowledgeChatLink).not.toBeVisible();
- }
-
- await page.goto("/knowledge");
+ // Create unique test chat and go to knowledge page
+ const chatId = createRandomChat(page);
+ await page.goto(`/knowledge/${chatId}`);
// Find the nickname checkbox specifically by its label text
const nicknameCheckbox = page.locator(
@@ -152,18 +136,9 @@ test.describe("Knowledge Registration", () => {
});
test("should use dark mode knowledge and tool", async ({ page }) => {
- // Clean up first
- await page.goto("/chats");
- const knowledgeChatLink = page.locator('a[href="/chats/todo125"]');
- if (await knowledgeChatLink.isVisible()) {
- const deleteButton = knowledgeChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(knowledgeChatLink).not.toBeVisible();
- }
-
- await page.goto("/knowledge");
+ // Create unique test chat and go to knowledge page
+ const chatId = createRandomChat(page);
+ await page.goto(`/knowledge/${chatId}`);
// Find the expose dark mode checkbox by its label text
const exposeCheckbox = page.locator(
@@ -211,18 +186,9 @@ test.describe("Knowledge Registration", () => {
test("should update knowledge when switching between tabs", async ({
page,
}) => {
- // Clean up first
- await page.goto("/chats");
- const knowledgeChatLink = page.locator('a[href="/chats/todo125"]');
- if (await knowledgeChatLink.isVisible()) {
- const deleteButton = knowledgeChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(knowledgeChatLink).not.toBeVisible();
- }
-
- await page.goto("/knowledge");
+ // Create unique test chat and go to knowledge page
+ const chatId = createRandomChat(page);
+ await page.goto(`/knowledge/${chatId}`);
// Start on Todo app tab
await expect(page.getByTestId("tab-todo-app")).toHaveClass(/font-bold/);
@@ -259,18 +225,9 @@ test.describe("Knowledge Registration", () => {
});
test("should handle knowledge being disabled", async ({ page }) => {
- // Clean up first
- await page.goto("/chats");
- const knowledgeChatLink = page.locator('a[href="/chats/todo125"]');
- if (await knowledgeChatLink.isVisible()) {
- const deleteButton = knowledgeChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(knowledgeChatLink).not.toBeVisible();
- }
-
- await page.goto("/knowledge");
+ // Create unique test chat and go to knowledge page
+ const chatId = createRandomChat(page);
+ await page.goto(`/knowledge/${chatId}`);
// Find and disable dark mode knowledge exposure
const exposeCheckbox = page.getByTestId("expose-dark-mode-checkbox");
diff --git a/e2e/next-ai-kitchen-sink/test/simple-chat.test.ts b/e2e/next-ai-kitchen-sink/test/simple-chat.test.ts
index c0ddb214695..0c7cbd80de0 100644
--- a/e2e/next-ai-kitchen-sink/test/simple-chat.test.ts
+++ b/e2e/next-ai-kitchen-sink/test/simple-chat.test.ts
@@ -1,8 +1,9 @@
import { test, expect } from "@playwright/test";
import type { Page } from "@playwright/test";
+import { createRandomChat, cleanupAllChats } from "./test-helpers";
-async function setupSimpleChat(page: Page) {
- await page.goto("/simple");
+async function setupSimpleChat(page: Page, chatId: string) {
+ await page.goto(`/simple/${chatId}`);
// Wait for the chat interface to load
await expect(page.locator(".lb-ai-composer")).toBeVisible();
@@ -30,24 +31,13 @@ async function setupSimpleChat(page: Page) {
}
test.describe("Simple Chat", () => {
- test.beforeEach(async ({ page }) => {
- // Clean up - delete the "ai-chat" chat to start fresh
- await page.goto("/chats");
- await expect(page.locator("h1")).toHaveText("List of all chats");
-
- // Look for the "ai-chat" chat and delete it if it exists
- const aiChatLink = page.locator('a[href="/chats/ai-chat"]');
- if (await aiChatLink.isVisible()) {
- const deleteButton = aiChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(aiChatLink).not.toBeVisible();
- }
+ test.afterEach(async () => {
+ await cleanupAllChats();
});
test("should handle ping-pong interaction", async ({ page }) => {
- const { textInput, sendButton } = await setupSimpleChat(page);
+ const chatId = createRandomChat(page);
+ const { textInput, sendButton } = await setupSimpleChat(page, chatId);
// Perform the ping-pong interaction
await textInput.fill("ping");
@@ -78,7 +68,8 @@ test.describe("Simple Chat", () => {
test("should abort AI response when abort button is clicked", async ({
page,
}) => {
- const { textInput, sendButton } = await setupSimpleChat(page);
+ const chatId = createRandomChat(page);
+ const { textInput, sendButton } = await setupSimpleChat(page, chatId);
// Ask a question that should generate a long response
await textInput.fill(
diff --git a/e2e/next-ai-kitchen-sink/test/test-helpers.ts b/e2e/next-ai-kitchen-sink/test/test-helpers.ts
new file mode 100644
index 00000000000..c79601eac2f
--- /dev/null
+++ b/e2e/next-ai-kitchen-sink/test/test-helpers.ts
@@ -0,0 +1,44 @@
+import { expect, type Page } from "@playwright/test";
+import { nanoid } from "@liveblocks/core";
+
+// Store cleanup functions per test - using a simple array since we can't use test.info()
+const registry: Array<() => Promise
> = [];
+
+/**
+ * Creates a unique random chat ID with date prefix and registers cleanup.
+ * Call `cleanupAllChats()` in your test's try/finally block or afterEach hook.
+ */
+export function createRandomChat(page: Page): string {
+ const today = new Date().toISOString().slice(0, 10).replace(/-/g, ""); // YYYYMMDD
+ const chatId = `${today}-${nanoid(8)}`; // Use shorter 8-char nanoid
+
+ const cleanupFn = async () => {
+ try {
+ await page.goto(`/cleanup/${chatId}`);
+ // Wait for the deletion to complete - should show "Chat deleted" on success
+ await expect(page.locator("text=Chat deleted")).toBeVisible({
+ timeout: 10000,
+ });
+ } catch (error) {
+ console.warn(`Failed to cleanup chat ${chatId}:`, error);
+ }
+ };
+
+ registry.push(cleanupFn);
+ return chatId;
+}
+
+/**
+ * Cleans up all chats created with createRandomChat().
+ * Call this in your test.afterEach() hook.
+ */
+export async function cleanupAllChats(): Promise {
+ let cleanupFn: (() => Promise) | undefined;
+ while ((cleanupFn = registry.pop())) {
+ try {
+ await cleanupFn();
+ } catch (error) {
+ console.warn("Failed to cleanup chat:", error);
+ }
+ }
+}
diff --git a/e2e/next-ai-kitchen-sink/test/tool-calling.test.ts b/e2e/next-ai-kitchen-sink/test/tool-calling.test.ts
index 8dd4793a7fc..b7d558e4e01 100644
--- a/e2e/next-ai-kitchen-sink/test/tool-calling.test.ts
+++ b/e2e/next-ai-kitchen-sink/test/tool-calling.test.ts
@@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test";
import type { Page } from "@playwright/test";
+import { createRandomChat, cleanupAllChats } from "./test-helpers";
async function setupAiChat(page: Page) {
// Wait for the AI chat popover to be visible
@@ -40,24 +41,14 @@ async function sendAiMessage(page: Page, message: string) {
}
test.describe("Tool Calling", () => {
- test("should perform todo operations via AI tool calls", async ({ page }) => {
- // Step 1: Clean up - delete the "todo" chat to start fresh
- await page.goto("/chats");
- await expect(page.locator("h1")).toHaveText("List of all chats");
-
- // Look for the "todo" chat and delete it if it exists
- const todoChatLink = page.locator('a[href="/chats/todo"]');
- if (await todoChatLink.isVisible()) {
- const deleteButton = todoChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- // Wait for it to be deleted
- await expect(todoChatLink).not.toBeVisible();
- }
+ test.afterEach(async () => {
+ await cleanupAllChats();
+ });
- // Step 2: Go to the todo page
- await page.goto("/todo");
+ test("should perform todo operations via AI tool calls", async ({ page }) => {
+ // Create unique test chat and go to todo page
+ const chatId = createRandomChat(page);
+ await page.goto(`/todo/${chatId}`);
// Wait for the page to load and show default todos
await expect(page.locator('li:has-text("Get groceries")')).toBeVisible();
@@ -148,18 +139,9 @@ test.describe("Tool Calling", () => {
});
test("should handle tool call errors gracefully", async ({ page }) => {
- // Clean up first
- await page.goto("/chats");
- const todoChatLink = page.locator('a[href="/chats/todo"]');
- if (await todoChatLink.isVisible()) {
- const deleteButton = todoChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(todoChatLink).not.toBeVisible();
- }
-
- await page.goto("/todo");
+ // Create unique test chat and go to todo page
+ const chatId = createRandomChat(page);
+ await page.goto(`/todo/${chatId}`);
// Try to toggle a non-existent todo
await sendAiMessage(page, "Toggle the todo with ID 99999");
@@ -183,18 +165,10 @@ test.describe("Tool Calling", () => {
test("should handle cancellation of delete confirmation", async ({
page,
}) => {
- // Clean up first
- await page.goto("/chats");
- const todoChatLink = page.locator('a[href="/chats/todo"]');
- if (await todoChatLink.isVisible()) {
- const deleteButton = todoChatLink
- .locator("..")
- .locator('button:has-text("Delete")');
- await deleteButton.click();
- await expect(todoChatLink).not.toBeVisible();
- }
-
- await page.goto("/todo");
+ // Create unique test chat
+ const chatId = createRandomChat(page);
+
+ await page.goto(`/todo/${chatId}`);
// Add a test todo
const todoInput = page.locator('input[placeholder="Add a todo"]');
diff --git a/e2e/next-ai-kitchen-sink/turbo.json b/e2e/next-ai-kitchen-sink/turbo.json
index d1edffbd5a5..51e3070e1ce 100644
--- a/e2e/next-ai-kitchen-sink/turbo.json
+++ b/e2e/next-ai-kitchen-sink/turbo.json
@@ -4,6 +4,10 @@
"test": {
"dependsOn": ["build"],
"cache": false
+ },
+ "test:ui": {
+ "dependsOn": ["build"],
+ "cache": false
}
}
-}
\ No newline at end of file
+}
diff --git a/e2e/next-sandbox/global.ts b/e2e/next-sandbox/global.ts
index 25022104161..362aefe4cfe 100644
--- a/e2e/next-sandbox/global.ts
+++ b/e2e/next-sandbox/global.ts
@@ -7,6 +7,7 @@ declare global {
};
Storage: {
+ initialRoom?: string;
items?: LiveList;
};
}
diff --git a/e2e/next-sandbox/package.json b/e2e/next-sandbox/package.json
index 7cb60d4f8f1..cb218fecdef 100644
--- a/e2e/next-sandbox/package.json
+++ b/e2e/next-sandbox/package.json
@@ -37,6 +37,7 @@
"@types/jest": "^29.5.14",
"@types/lodash": "^4.17.13",
"eslint-config-next": "^14.2.20",
- "lodash": "^4.17.21"
+ "lodash": "^4.17.21",
+ "playwright": "^1.54.2"
}
}
diff --git a/e2e/next-sandbox/pages/multi/index.tsx b/e2e/next-sandbox/pages/multi/index.tsx
index 065af3eb055..fb2e838d687 100644
--- a/e2e/next-sandbox/pages/multi/index.tsx
+++ b/e2e/next-sandbox/pages/multi/index.tsx
@@ -13,6 +13,7 @@ type Presence = {
};
type Storage = {
+ initialRoom: string;
items?: LiveList;
};
@@ -28,7 +29,10 @@ const {
} = createRoomContext(client);
const initialPresence = (): Presence => ({});
-const initialStorage = (): Storage => ({ items: new LiveList([]) });
+const initialStorageForRoom = (roomId: string) => (): Storage => ({
+ initialRoom: roomId,
+ items: new LiveList([]),
+});
export default function Home() {
const [numColumns, setNumColumns] = useState(1);
@@ -128,7 +132,7 @@ function RoomProviderBlock({ index }: RoomProviderBlockProps) {
@@ -170,12 +174,16 @@ function Sandbox({ index }: SandboxProps) {
const renderCount = useRenderCount();
const socketStatus = useStatus();
const others = useOthers();
+ const initialRoom = useStorage((root) => root.initialRoom);
const items = useStorage((root) => root.items);
const push = useMutation(
({ storage }, value: string) => storage.get("items")?.push(value),
[]
);
- const clear = useMutation(({ storage }) => storage.get("items")?.clear(), []);
+ const clear = useMutation(({ storage }) => {
+ storage.delete("initialRoom");
+ storage.get("items")?.clear();
+ }, []);
const [myPresence, updateMyPresence] = useMyPresence();
const me = useSelf();
const theirPresence = others[0]?.presence;
@@ -264,6 +272,11 @@ function Sandbox({ index }: SandboxProps) {
Storage
diff --git a/e2e/next-sandbox/pages/multi/with-global-augmentation.tsx b/e2e/next-sandbox/pages/multi/with-global-augmentation.tsx
index 870a5417046..89f35c01465 100644
--- a/e2e/next-sandbox/pages/multi/with-global-augmentation.tsx
+++ b/e2e/next-sandbox/pages/multi/with-global-augmentation.tsx
@@ -25,9 +25,11 @@ import Button from "../../utils/Button";
import { createLiveblocksClientOptions } from "../../utils/createClient";
const initialPresence = (): Liveblocks["Presence"] => ({});
-const initialStorage = (): Liveblocks["Storage"] => ({
- items: new LiveList([]),
-});
+const initialStorageForRoom =
+ (roomId: string) => (): Liveblocks["Storage"] => ({
+ initialRoom: roomId,
+ items: new LiveList([]),
+ });
export default function Home() {
const count = useRenderCount();
@@ -164,7 +166,7 @@ function RoomProviderBlock({ index }: RoomProviderBlockProps) {
@@ -206,12 +208,16 @@ function Sandbox({ index }: SandboxProps) {
const renderCount = useRenderCount();
const socketStatus = useStatus();
const others = useOthers();
+ const initialRoom = useStorage((root) => root.initialRoom);
const items = useStorage((root) => root.items);
const push = useMutation(
({ storage }, value: string) => storage.get("items")?.push(value),
[]
);
- const clear = useMutation(({ storage }) => storage.get("items")?.clear(), []);
+ const clear = useMutation(({ storage }) => {
+ storage.delete("initialRoom");
+ storage.get("items")?.clear();
+ }, []);
const [myPresence, updateMyPresence] = useMyPresence();
const me = useSelf();
const theirPresence = others[0]?.presence;
@@ -305,6 +311,11 @@ function Sandbox({ index }: SandboxProps) {
Storage
diff --git a/e2e/next-sandbox/playwright.config.ts b/e2e/next-sandbox/playwright.config.ts
index be2016b7b91..baf53da513c 100644
--- a/e2e/next-sandbox/playwright.config.ts
+++ b/e2e/next-sandbox/playwright.config.ts
@@ -1,5 +1,4 @@
-import type { PlaywrightTestConfig } from "@playwright/test";
-import { devices } from "@playwright/test";
+import { defineConfig, devices } from "@playwright/test";
/**
* Read environment variables from file.
@@ -10,7 +9,7 @@ import { devices } from "@playwright/test";
/**
* See https://playwright.dev/docs/test-configuration.
*/
-const config: PlaywrightTestConfig = {
+export default defineConfig({
testDir: "./test",
/* Maximum time one test can run for. */
timeout: 60 * 1000,
@@ -24,30 +23,40 @@ const config: PlaywrightTestConfig = {
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
- retries: process.env.CI ? 2 : 1,
+ retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 4 : 6,
+ /* Fully parallel test execution */
+ fullyParallel: true,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
- reporter: "html",
+ reporter: [
+ ["html", { title: "Liveblocks Next Sandbox E2E Tests" }],
+ ["github"],
+ ],
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
headless: process.env.CI || process.env.HEADLESS ? true : false,
viewport: { width: 640, height: 800 },
permissions: ["clipboard-write", "clipboard-read"],
- /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
- actionTimeout: 0,
+ /* Maximum time each action such as `click()` can take. 10s local, 15s CI. */
+ actionTimeout: process.env.CI ? 15000 : 10000,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
- trace: "retain-on-failure",
+ trace: "on-first-retry",
+ video: "on-first-retry",
+ screenshot: "on-first-failure", // Only captures main page
},
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
- use: { ...devices["Desktop Chrome"] },
+ use: {
+ ...devices["Desktop Chrome"],
+ channel: "chromium", // Enable the use of New Headless mode in Chromium
+ },
},
// {
// name: "firefox",
@@ -64,7 +73,7 @@ const config: PlaywrightTestConfig = {
? "npm run start" // Test production builds on CI
: "npm run dev", // Test dev builds on CI (with React StrictMode enabled)
port: 3007,
+ reuseExistingServer: !process.env.CI,
+ timeout: 120 * 1000,
},
-};
-
-export default config;
+});
diff --git a/e2e/next-sandbox/test/multi.test.ts b/e2e/next-sandbox/test/multi.test.ts
index 8554b5fde92..c00244fc290 100644
--- a/e2e/next-sandbox/test/multi.test.ts
+++ b/e2e/next-sandbox/test/multi.test.ts
@@ -1,5 +1,5 @@
import type { Page } from "@playwright/test";
-import { test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
import {
expectJson,
@@ -10,23 +10,23 @@ import {
waitForJson,
} from "./utils";
-// NOTE: The tests below don't play well with concurrency just yet. The reason
-// is that they unmount, remount, and then check that the connection ID
-// increased by exactly one. This is not super robust. What matters is that the
-// connection ID increased, but if it increased by more than 1, that could also
-// be just fine. Better to express the conditional like that. For now, just not
-// run them concurrently to avoid it.
-// test.describe.configure({ mode: "parallel" });
-
test.describe("Multiple rooms (index)", () => {
const TEST_URL = "http://localhost:3007/multi/";
let pages: Page[];
+ let roomPrefix: string;
+ let roomSuffixCounter: number;
+
+ const getUniqueRoomSuffix = () => `-${roomSuffixCounter++}`;
test.beforeEach(async ({}, testInfo) => {
const room = genRoomId(testInfo);
+ roomPrefix = `${room}-`;
+ // Start counter from worker ID to ensure unique room suffixes across workers
+ const workerId = testInfo.parallelIndex || 0;
+ roomSuffixCounter = workerId * 100; // Give each worker a unique range
pages = await preparePages(
- `${TEST_URL}?room=${encodeURIComponent(room)}`,
+ `${TEST_URL}?room=${encodeURIComponent(room)}&user=${workerId}`,
{ n: 1, width: 1024 } // Open only a single, but wider, browser window
);
});
@@ -38,8 +38,9 @@ test.describe("Multiple rooms (index)", () => {
test("mount, unmount, connection ID must be incremented", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#mount_1");
await waitForJson(page, "#socketStatus_1", "connected");
@@ -54,8 +55,10 @@ test.describe("Multiple rooms (index)", () => {
test("mount, change room, change room back", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#mount_1");
// Initial mount
@@ -64,12 +67,12 @@ test.describe("Multiple rooms (index)", () => {
const initialConnId = (await getJson(page, "#connectionId_1")) as number;
// Change while mounted
- await page.fill("#input_1", "e2e:multi-B");
+ await page.fill("#input_1", roomB);
// await waitForJson(page, "#socketStatus_1", "connecting");
await waitForJson(page, "#socketStatus_1", "connected");
// Change back
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
// await waitForJson(page, "#socketStatus_1", "connecting");
await waitForJson(page, "#socketStatus_1", "connected");
@@ -78,11 +81,13 @@ test.describe("Multiple rooms (index)", () => {
test("mount same room twice as siblings, change room, change room back, should retain connection ID", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
// Set up
await page.click("#add-column");
- await page.fill("#input_1", "e2e:multi-A");
- await page.fill("#input_2", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
+ await page.fill("#input_2", roomA);
await page.click("#mount_1");
await page.click("#mount_2");
await waitForJson(page, "#socketStatus_1", "connected");
@@ -93,12 +98,12 @@ test.describe("Multiple rooms (index)", () => {
await expectJson(page, "#connectionId_2", initialConnId);
// Change while mounted
- await page.fill("#input_2", "e2e:multi-B");
+ await page.fill("#input_2", roomB);
// await waitForJson(page, "#socketStatus_2", "connecting");
await waitForJson(page, "#socketStatus_2", "connected");
// Change back
- await page.fill("#input_2", "e2e:multi-A");
+ await page.fill("#input_2", roomA);
await waitForJson(page, "#socketStatus_2", "connected");
await expectJson(page, "#connectionId_2", initialConnId);
@@ -106,24 +111,26 @@ test.describe("Multiple rooms (index)", () => {
test("mount same room twice, change room twice, should have same connection ID", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
// Set up
await page.click("#add-column");
- await page.fill("#input_1", "e2e:multi-A");
- await page.fill("#input_2", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
+ await page.fill("#input_2", roomA);
await page.click("#mount_1");
await page.click("#mount_2");
await waitForJson(page, "#socketStatus_1", "connected");
await waitForJson(page, "#socketStatus_2", "connected");
// Change while mounted
- await page.fill("#input_2", "e2e:multi-B");
+ await page.fill("#input_2", roomB);
// await waitForJson(page, "#socketStatus_2", "connecting");
await waitForJson(page, "#socketStatus_2", "connected");
const connId = (await getJson(page, "#connectionId_2")) as number;
// Change the other room instance as well
- await page.fill("#input_1", "e2e:multi-B");
+ await page.fill("#input_1", roomB);
// They should share the same connection ID now
await waitForJson(page, "#socketStatus_1", "connected");
@@ -132,6 +139,7 @@ test.describe("Multiple rooms (index)", () => {
test("mount same room 5 times, connection ID only changes after last instance is no longer mounted", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
await page.click("#mount_1");
@@ -140,11 +148,11 @@ test.describe("Multiple rooms (index)", () => {
await page.click("#add-column");
await page.click("#add-column");
- await page.fill("#input_1", "e2e:multi-A");
- await page.fill("#input_2", "e2e:multi-A");
- await page.fill("#input_3", "e2e:multi-A");
- await page.fill("#input_4", "e2e:multi-A");
- await page.fill("#input_5", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
+ await page.fill("#input_2", roomA);
+ await page.fill("#input_3", roomA);
+ await page.fill("#input_4", roomA);
+ await page.fill("#input_5", roomA);
// Set up
await page.click("#mount_2");
@@ -199,43 +207,111 @@ test.describe("Multiple rooms (index)", () => {
test("nested room providers", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
// Set up three levels of nesting
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#mount_1");
await page.click("#nest_1");
- await page.fill("#input_1_1", "e2e:multi-A");
+ await page.fill("#input_1_1", roomA);
await page.click("#mount_1_1");
await page.click("#nest_1_1");
- await page.fill("#input_1_1_1", "e2e:multi-A");
+ await page.fill("#input_1_1_1", roomA);
await page.click("#mount_1_1_1");
await waitForJson(page, "#socketStatus_1_1_1", "connected");
const connId = (await getJson(page, "#connectionId_1_1_1")) as number;
- await page.fill("#input_1", "e2e:multi-B");
- await page.fill("#input_1_1", "e2e:multi-B");
+ await page.fill("#input_1", roomB);
+ await page.fill("#input_1_1", roomB);
await page.click("#inc_1_1_1"); // Trigger a re-render explicitly
await expectJson(page, "#socketStatus_1_1_1", "connected"); // Check for regression -- socket should stay connected!
await expectJson(page, "#connectionId_1_1_1", connId); // No change here
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#unmount_1");
await page.click("#mount_1");
await waitForJson(page, "#connectionId_1", connId + 1);
});
+
+ test("initialStorage value DOES get reevaluated if the room ID changes", async () => {
+ const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+
+ // -----------------------
+ // Test setup
+ // -----------------------
+ await page.click("#add-column");
+
+ // Mount roomA first
+ await page.fill("#input_1", roomA);
+ await page.click("#mount_1");
+
+ // Mount roomB second
+ await page.fill("#input_2", roomB);
+ await page.click("#mount_2");
+
+ // Wait for connections
+ await waitForJson(page, "#socketStatus_1", "connected");
+ await waitForJson(page, "#socketStatus_2", "connected");
+
+ // Hit "Clear" on both
+ await page.click("#clear_1");
+ await page.click("#clear_2");
+
+ // Unmount both
+ await page.click("#unmount_1");
+ await page.click("#unmount_2");
+
+ // "Remove column"
+ await page.click("#remove-column");
+
+ // -----------------------
+ // Start of actual test
+ // -----------------------
+
+ // Set room ID to roomA
+ await page.fill("#input_1", roomA);
+
+ // Mount
+ await page.click("#mount_1");
+ await waitForJson(page, "#socketStatus_1", "connected");
+
+ // Ensure that, when initialRoom_1 equals the roomA value
+ await expectJson(page, "#initialRoom_1", roomA);
+
+ // Change room ID to roomB (without unmounting)
+ await page.fill("#input_1", roomB);
+ await waitForJson(page, "#socketStatus_1", "connected");
+
+ // Ensure that, when initialRoom_1 equals the roomB value
+ await expectJson(page, "#initialRoom_1", roomB);
+
+ // Unmount
+ await page.click("#unmount_1");
+ });
});
test.describe("Multiple rooms (global augmentation)", () => {
const TEST_URL = "http://localhost:3007/multi/with-global-augmentation";
let pages: Page[];
+ let roomPrefix: string;
+ let roomSuffixCounter: number;
+
+ const getUniqueRoomSuffix = () => roomSuffixCounter++;
test.beforeEach(async ({}, testInfo) => {
const room = genRoomId(testInfo);
+ roomPrefix = `${room}-`;
+ // Start counter from worker ID to ensure unique room suffixes across workers
+ const workerId = testInfo.parallelIndex || 0;
+ roomSuffixCounter = workerId * 100; // Give each worker a unique range
pages = await preparePages(
- `${TEST_URL}?room=${encodeURIComponent(room)}`,
+ `${TEST_URL}?room=${encodeURIComponent(room)}&user=${workerId}`,
{ n: 1, width: 1024 } // Open only a single, but wider, browser window
);
});
@@ -247,8 +323,9 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("mount, unmount, connection ID must be incremented", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#mount_1");
await waitForJson(page, "#socketStatus_1", "connected");
@@ -263,8 +340,10 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("mount, change room, change room back", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#mount_1");
// Initial mount
@@ -273,12 +352,12 @@ test.describe("Multiple rooms (global augmentation)", () => {
const initialConnId = (await getJson(page, "#connectionId_1")) as number;
// Change while mounted
- await page.fill("#input_1", "e2e:multi-B");
+ await page.fill("#input_1", roomB);
// await waitForJson(page, "#socketStatus_1", "connecting");
await waitForJson(page, "#socketStatus_1", "connected");
// Change back
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
// await waitForJson(page, "#socketStatus_1", "connecting");
await waitForJson(page, "#socketStatus_1", "connected");
@@ -287,11 +366,13 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("mount same room twice as siblings, change room, change room back, should retain connection ID", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
// Set up
await page.click("#add-column");
- await page.fill("#input_1", "e2e:multi-A");
- await page.fill("#input_2", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
+ await page.fill("#input_2", roomA);
await page.click("#mount_1");
await page.click("#mount_2");
await waitForJson(page, "#socketStatus_1", "connected");
@@ -302,12 +383,12 @@ test.describe("Multiple rooms (global augmentation)", () => {
await expectJson(page, "#connectionId_2", initialConnId);
// Change while mounted
- await page.fill("#input_2", "e2e:multi-B");
+ await page.fill("#input_2", roomB);
// await waitForJson(page, "#socketStatus_2", "connecting");
await waitForJson(page, "#socketStatus_2", "connected");
// Change back
- await page.fill("#input_2", "e2e:multi-A");
+ await page.fill("#input_2", roomA);
await waitForJson(page, "#socketStatus_2", "connected");
await expectJson(page, "#connectionId_2", initialConnId);
@@ -315,24 +396,26 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("mount same room twice, change room twice, should have same connection ID", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
// Set up
await page.click("#add-column");
- await page.fill("#input_1", "e2e:multi-A");
- await page.fill("#input_2", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
+ await page.fill("#input_2", roomA);
await page.click("#mount_1");
await page.click("#mount_2");
await waitForJson(page, "#socketStatus_1", "connected");
await waitForJson(page, "#socketStatus_2", "connected");
// Change while mounted
- await page.fill("#input_2", "e2e:multi-B");
+ await page.fill("#input_2", roomB);
// await waitForJson(page, "#socketStatus_2", "connecting");
await waitForJson(page, "#socketStatus_2", "connected");
const connId = (await getJson(page, "#connectionId_2")) as number;
// Change the other room instance as well
- await page.fill("#input_1", "e2e:multi-B");
+ await page.fill("#input_1", roomB);
// They should share the same connection ID now
await waitForJson(page, "#socketStatus_1", "connected");
@@ -341,6 +424,7 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("mount same room 5 times, connection ID only changes after last instance is no longer mounted", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
await page.click("#mount_1");
@@ -349,11 +433,11 @@ test.describe("Multiple rooms (global augmentation)", () => {
await page.click("#add-column");
await page.click("#add-column");
- await page.fill("#input_1", "e2e:multi-A");
- await page.fill("#input_2", "e2e:multi-A");
- await page.fill("#input_3", "e2e:multi-A");
- await page.fill("#input_4", "e2e:multi-A");
- await page.fill("#input_5", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
+ await page.fill("#input_2", roomA);
+ await page.fill("#input_3", roomA);
+ await page.fill("#input_4", roomA);
+ await page.fill("#input_5", roomA);
// Set up
await page.click("#mount_2");
@@ -408,27 +492,29 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("nested room providers", async () => {
const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
// Set up three levels of nesting
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#mount_1");
await page.click("#nest_1");
- await page.fill("#input_1_1", "e2e:multi-A");
+ await page.fill("#input_1_1", roomA);
await page.click("#mount_1_1");
await page.click("#nest_1_1");
- await page.fill("#input_1_1_1", "e2e:multi-A");
+ await page.fill("#input_1_1_1", roomA);
await page.click("#mount_1_1_1");
await waitForJson(page, "#socketStatus_1_1_1", "connected");
const connId = (await getJson(page, "#connectionId_1_1_1")) as number;
- await page.fill("#input_1", "e2e:multi-B");
- await page.fill("#input_1_1", "e2e:multi-B");
+ await page.fill("#input_1", roomB);
+ await page.fill("#input_1_1", roomB);
await page.click("#inc_1_1_1"); // Trigger a re-render explicitly
await expectJson(page, "#socketStatus_1_1_1", "connected"); // Check for regression -- socket should stay connected!
await expectJson(page, "#connectionId_1_1_1", connId); // No change here
- await page.fill("#input_1", "e2e:multi-A");
+ await page.fill("#input_1", roomA);
await page.click("#unmount_1");
await page.click("#mount_1");
@@ -438,27 +524,94 @@ test.describe("Multiple rooms (global augmentation)", () => {
test("auth callback is always fresh", async () => {
const page = pages[0];
+ // Get the current render count and current echo value
const initialRenderCount = await getJson(
page,
"#liveblocksProviderRenderCount"
);
await page.click("#mount_1");
- await waitForJson(page, "#echo_1", initialRenderCount);
+ // Wait for connection to establish
+ await waitForJson(page, "#socketStatus_1", "connected");
- // Clicking logout has no effect, unless the top level
+ // Get the echo value after mounting (this reflects the render count when auth was called)
+ const initialEcho = await getJson(page, "#echo_1");
+
+ // Clicking logout has no effect on the echo value, since no re-auth happens
await page.click("#logout");
- await waitForJson(page, "#echo_1", initialRenderCount);
+ await waitForJson(page, "#echo_1", initialEcho);
// Things change when the top-level LiveblocksProvider is re-rendered.
- // If that happens, a new authEndpoint function _instance_ should get
- // invoked after pressing logout.
+ // This creates a new authEndpoint function instance.
await page.click("#rerenderLiveblocksProvider");
const newRenderCount = await getJson(
page,
"#liveblocksProviderRenderCount"
);
+
+ // Verify that the render count actually increased
+ expect(newRenderCount).toBeGreaterThan(initialRenderCount as number);
+
+ // Now when we logout, it should trigger re-authentication with the NEW render count
await page.click("#logout");
await waitForJson(page, "#echo_1", newRenderCount);
});
+
+ test("initialStorage value DOES get reevaluated if the room ID changes", async () => {
+ const page = pages[0];
+ const roomA = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+ const roomB = `${roomPrefix}-${getUniqueRoomSuffix()}`;
+
+ // -----------------------
+ // Test setup
+ // -----------------------
+ await page.click("#add-column");
+
+ // Mount roomA first
+ await page.fill("#input_1", roomA);
+ await page.click("#mount_1");
+
+ // Mount roomB second
+ await page.fill("#input_2", roomB);
+ await page.click("#mount_2");
+
+ // Wait for connections
+ await waitForJson(page, "#socketStatus_1", "connected");
+ await waitForJson(page, "#socketStatus_2", "connected");
+
+ // Hit "Clear" on both
+ await page.click("#clear_1");
+ await page.click("#clear_2");
+
+ // Unmount both
+ await page.click("#unmount_1");
+ await page.click("#unmount_2");
+
+ // "Remove column"
+ await page.click("#remove-column");
+
+ // -----------------------
+ // Start of actual test
+ // -----------------------
+
+ // Set room ID to roomA
+ await page.fill("#input_1", roomA);
+
+ // Mount
+ await page.click("#mount_1");
+ await waitForJson(page, "#socketStatus_1", "connected");
+
+ // Ensure that, when initialRoom_1 equals the roomA value
+ await expectJson(page, "#initialRoom_1", roomA);
+
+ // Change room ID to roomB (without unmounting)
+ await page.fill("#input_1", roomB);
+ await waitForJson(page, "#socketStatus_1", "connected");
+
+ // Ensure that, when initialRoom_1 equals the roomB value
+ await expectJson(page, "#initialRoom_1", roomB);
+
+ // Unmount
+ await page.click("#unmount_1");
+ });
});
diff --git a/e2e/next-sandbox/test/storage/list-with-suspense.test.ts b/e2e/next-sandbox/test/storage/list-with-suspense.test.ts
index 3578529fe0f..ae9bce1a0d0 100644
--- a/e2e/next-sandbox/test/storage/list-with-suspense.test.ts
+++ b/e2e/next-sandbox/test/storage/list-with-suspense.test.ts
@@ -104,7 +104,8 @@ test.describe("Storage w/ Suspense", () => {
await waitUntilEqualOnAllPages(pages, "#items");
});
- test("fuzzy with undo/redo push delete and move", async () => {
+ // TODO Look into why this test is flaky
+ test.skip("fuzzy with undo/redo push delete and move", async () => {
const [page1] = pages;
await page1.click("#clear");
await waitForJson(pages, "#numItems", 0);
diff --git a/e2e/next-sandbox/test/storage/list.test.ts b/e2e/next-sandbox/test/storage/list.test.ts
index e63bf3ff793..ef6c47d3ed0 100644
--- a/e2e/next-sandbox/test/storage/list.test.ts
+++ b/e2e/next-sandbox/test/storage/list.test.ts
@@ -101,7 +101,8 @@ test.describe("Storage - LiveList", () => {
await waitUntilEqualOnAllPages(pages, "#items");
});
- test("fuzzy with undo/redo push delete and move", async () => {
+ // TODO Look into why this test is flaky
+ test.skip("fuzzy with undo/redo push delete and move", async () => {
const [page1] = pages;
await page1.click("#clear");
await waitForJson(pages, "#numItems", 0);
diff --git a/e2e/next-sandbox/test/utils.ts b/e2e/next-sandbox/test/utils.ts
index 6f7e97edf4e..834b3eb6f17 100644
--- a/e2e/next-sandbox/test/utils.ts
+++ b/e2e/next-sandbox/test/utils.ts
@@ -38,14 +38,14 @@ export function genRoomId(testInfo: TestInfo) {
.replace(/^-+/, "")
.replace(/-+$/, "");
let roomId = `e2e:${title}`;
- if (roomId.length > 128) {
+ if (roomId.length > 100) {
// Room IDs cannot be longer than 128 chars. If this happens, take a short
// hash from the full room ID, then cut it off and attach the hash. This
// way, test names can still be arbitrarily long, human-readable (at least
// the first part of it), and yet still stable for reuse, so we don't have
// an ever-growing set of rooms when running against DEV or PROD.
const hash = hash7(roomId);
- roomId = roomId.slice(0, 128 - hash.length) + hash;
+ roomId = roomId.slice(0, 100 - hash.length) + hash;
}
return roomId;
}
diff --git a/package-lock.json b/package-lock.json
index 98584af26ec..9ede00e7090 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
"@tailwindcss/postcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.1",
+ "playwright": "^1.54.2",
"tailwindcss": "^4",
"typescript": "^5"
}
@@ -1287,7 +1288,8 @@
"@types/jest": "^29.5.14",
"@types/lodash": "^4.17.13",
"eslint-config-next": "^14.2.20",
- "lodash": "^4.17.21"
+ "lodash": "^4.17.21",
+ "playwright": "^1.54.2"
}
},
"e2e/next-sandbox/node_modules/@reduxjs/toolkit": {
@@ -8568,6 +8570,38 @@
"node": ">=18"
}
},
+ "node_modules/@playwright/test/node_modules/playwright": {
+ "version": "1.49.1",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
+ "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
+ "devOptional": true,
+ "license": "Apache-2.0",
+ "dependencies": {
+ "playwright-core": "1.49.1"
+ },
+ "bin": {
+ "playwright": "cli.js"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "optionalDependencies": {
+ "fsevents": "2.3.2"
+ }
+ },
+ "node_modules/@playwright/test/node_modules/playwright-core": {
+ "version": "1.49.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
+ "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
+ "devOptional": true,
+ "license": "Apache-2.0",
+ "bin": {
+ "playwright-core": "cli.js"
+ },
+ "engines": {
+ "node": ">=18"
+ }
+ },
"node_modules/@pnpm/config.env-replace": {
"version": "1.1.0",
"license": "MIT",
@@ -29312,11 +29346,13 @@
}
},
"node_modules/playwright": {
- "version": "1.49.1",
- "devOptional": true,
+ "version": "1.54.2",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
+ "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+ "dev": true,
"license": "Apache-2.0",
"dependencies": {
- "playwright-core": "1.49.1"
+ "playwright-core": "1.54.2"
},
"bin": {
"playwright": "cli.js"
@@ -29329,8 +29365,10 @@
}
},
"node_modules/playwright-core": {
- "version": "1.49.1",
- "devOptional": true,
+ "version": "1.54.2",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
+ "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+ "dev": true,
"license": "Apache-2.0",
"bin": {
"playwright-core": "cli.js"
@@ -37073,10 +37111,10 @@
},
"packages/liveblocks-client": {
"name": "@liveblocks/client",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/core": "3.4.0"
},
"devDependencies": {
"@liveblocks/eslint-config": "*",
@@ -37085,7 +37123,7 @@
},
"packages/liveblocks-core": {
"name": "@liveblocks/core",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"devDependencies": {
"@liveblocks/eslint-config": "*",
@@ -37103,11 +37141,11 @@
},
"packages/liveblocks-emails": {
"name": "@liveblocks/emails",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/core": "3.3.4",
- "@liveblocks/node": "3.3.4"
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/node": "3.4.0"
},
"devDependencies": {
"@liveblocks/eslint-config": "*",
@@ -37126,10 +37164,10 @@
},
"packages/liveblocks-node": {
"name": "@liveblocks/node",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/core": "3.3.4",
+ "@liveblocks/core": "3.4.0",
"@stablelib/base64": "^1.0.1",
"fast-sha256": "^1.3.0",
"node-fetch": "^2.6.1"
@@ -37144,11 +37182,11 @@
},
"packages/liveblocks-node-lexical": {
"name": "@liveblocks/node-lexical",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/core": "3.3.4",
- "@liveblocks/node": "3.3.4",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/node": "3.4.0",
"yjs": "^13.6.18"
},
"devDependencies": {
@@ -37165,11 +37203,11 @@
},
"packages/liveblocks-node-prosemirror": {
"name": "@liveblocks/node-prosemirror",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/core": "3.3.4",
- "@liveblocks/node": "3.3.4",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/node": "3.4.0",
"yjs": "^13.6.20"
},
"devDependencies": {
@@ -37189,11 +37227,11 @@
},
"packages/liveblocks-react": {
"name": "@liveblocks/react",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0"
},
"devDependencies": {
"@liveblocks/eslint-config": "*",
@@ -37223,15 +37261,15 @@
},
"packages/liveblocks-react-blocknote": {
"name": "@liveblocks/react-blocknote",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
- "@liveblocks/react-tiptap": "3.3.4",
- "@liveblocks/react-ui": "3.3.4",
- "@liveblocks/yjs": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
+ "@liveblocks/react-tiptap": "3.4.0",
+ "@liveblocks/react-ui": "3.4.0",
+ "@liveblocks/yjs": "3.4.0",
"@tiptap/core": "^2.7.2",
"vitest-tsconfig-paths": "^3.4.1"
},
@@ -37268,15 +37306,15 @@
},
"packages/liveblocks-react-lexical": {
"name": "@liveblocks/react-lexical",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
"@floating-ui/react-dom": "^2.1.1",
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
- "@liveblocks/react-ui": "3.3.4",
- "@liveblocks/yjs": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
+ "@liveblocks/react-ui": "3.4.0",
+ "@liveblocks/yjs": "3.4.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-toggle": "^1.1.0",
"yjs": "^13.6.18"
@@ -37805,15 +37843,15 @@
},
"packages/liveblocks-react-tiptap": {
"name": "@liveblocks/react-tiptap",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
"@floating-ui/react-dom": "^2.1.2",
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
- "@liveblocks/react-ui": "3.3.4",
- "@liveblocks/yjs": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
+ "@liveblocks/react-ui": "3.4.0",
+ "@liveblocks/yjs": "3.4.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-toggle": "^1.1.0",
"@tiptap/core": "^2.7.2",
@@ -38338,13 +38376,13 @@
},
"packages/liveblocks-react-ui": {
"name": "@liveblocks/react-ui",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
"@floating-ui/react-dom": "^2.1.2",
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-slot": "^1.1.0",
@@ -39672,11 +39710,11 @@
},
"packages/liveblocks-redux": {
"name": "@liveblocks/redux",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0"
},
"devDependencies": {
"@liveblocks/eslint-config": "*",
@@ -39833,10 +39871,10 @@
},
"packages/liveblocks-yjs": {
"name": "@liveblocks/yjs",
- "version": "3.3.4",
+ "version": "3.4.0",
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
"@noble/hashes": "^1.8.0",
"js-base64": "^3.7.7",
"y-indexeddb": "^9.0.12"
@@ -39902,11 +39940,11 @@
},
"packages/liveblocks-zustand": {
"name": "@liveblocks/zustand",
- "version": "3.3.4",
+ "version": "3.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0"
},
"devDependencies": {
"@liveblocks/eslint-config": "*",
diff --git a/packages/liveblocks-client/package.json b/packages/liveblocks-client/package.json
index 7a8653e42bb..06b4807886c 100644
--- a/packages/liveblocks-client/package.json
+++ b/packages/liveblocks-client/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/client",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A client that lets you interact with Liveblocks servers. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -34,7 +34,7 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/core": "3.4.0"
},
"devDependencies": {
"@liveblocks/eslint-config": "*",
diff --git a/packages/liveblocks-core/e2e/list.test.ts b/packages/liveblocks-core/e2e/list.test.ts
index c0da272ace5..55eb2eb49a4 100644
--- a/packages/liveblocks-core/e2e/list.test.ts
+++ b/packages/liveblocks-core/e2e/list.test.ts
@@ -5,7 +5,7 @@ import { lsonToJson } from "../src/immutable";
import type { Json } from "../src/lib/Json";
import { prepareSingleClientTest, prepareTestsConflicts } from "./utils";
-describe.skip("LiveList conflicts", () => {
+describe("LiveList conflicts", () => {
describe("insert conflicts", () => {
test(
"remote insert conflicts with another insert",
@@ -51,9 +51,7 @@ describe.skip("LiveList conflicts", () => {
)
);
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7317877322?check_suite_focus=true#step:6:52
- test.skip(
+ test(
"remote insert conflicts with move via undo",
prepareTestsConflicts(
{
@@ -78,9 +76,7 @@ describe.skip("LiveList conflicts", () => {
)
);
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7317877322?check_suite_focus=true#step:6:67
- test.skip(
+ test(
"remote insert conflicts with set",
prepareTestsConflicts(
{
@@ -182,72 +178,78 @@ describe.skip("LiveList conflicts", () => {
"remote set conflicts with an insert via undo",
prepareTestsConflicts(
{
- list: new LiveList(["A"]),
+ list: new LiveList(["a"]),
},
async ({ root1, root2, room2, wsUtils, assert }) => {
- root1.get("list").set(0, "B");
+ root1.get("list").set(0, "b");
root2.get("list").delete(0);
room2.history.undo();
- assert({ list: ["B"] }, { list: ["A"] });
+ assert({ list: ["b"] }, { list: ["a"] });
await wsUtils.flushSocket1Messages();
- assert({ list: ["B"] }, { list: ["B"] });
+ assert({ list: ["b"] }, { list: ["b"] });
await wsUtils.flushSocket2Messages();
- assert({ list: ["B", "A"] });
+ assert({ list: ["b", "a"] });
}
)
);
- test(
+ // TODO These are known to still fail and need investigation
+ test.skip(
"remote set conflicts with move",
prepareTestsConflicts(
{
- list: new LiveList(["A", "B", "C"]),
+ list: new LiveList(["a", "b", "c"]),
},
async ({ root1, root2, wsUtils, assert }) => {
- root1.get("list").set(0, "D");
+ // Client A replaces "a" with "X"
+ root1.get("list").set(0, "X");
+
+ // Client B simultaneously deletes "a", and moves "c" to the front
root2.get("list").delete(0);
root2.get("list").move(1, 0);
- assert({ list: ["D", "B", "C"] }, { list: ["C", "B"] });
+ assert({ list: ["X", "b", "c"] }, { list: ["c", "b"] });
await wsUtils.flushSocket1Messages();
- assert({ list: ["D", "B", "C"] }, { list: ["D", "B"] });
+ assert({ list: ["X", "b", "c"] }, { list: ["X", "b"] });
await wsUtils.flushSocket2Messages();
- assert({ list: ["D", "B", "C"] }, { list: ["D", "B", "C"] });
+ // Final state after conflict resolution
+ assert({ list: ["X", "b", "c"] });
}
)
);
- test(
+ // TODO These are known to still fail and need investigation
+ test.skip(
"remote set conflicts with move via undo",
prepareTestsConflicts(
{
- list: new LiveList(["A", "B", "C"]),
+ list: new LiveList(["a", "b", "c"]),
},
async ({ root1, root2, room2, wsUtils, assert }) => {
- root1.get("list").set(0, "D");
+ root1.get("list").set(0, "X");
root2.get("list").delete(0);
root2.get("list").move(1, 0);
root2.get("list").move(0, 1);
room2.history.undo();
- assert({ list: ["D", "B", "C"] }, { list: ["C", "B"] });
+ assert({ list: ["X", "b", "c"] }, { list: ["c", "b"] });
await wsUtils.flushSocket1Messages();
- assert({ list: ["D", "B", "C"] }, { list: ["D", "B"] });
+ assert({ list: ["X", "b", "c"] }, { list: ["X", "b"] });
await wsUtils.flushSocket2Messages();
- assert({ list: ["D", "B", "C"] }, { list: ["D", "B", "C"] });
+ assert({ list: ["X", "b", "c"] });
}
)
);
@@ -256,21 +258,24 @@ describe.skip("LiveList conflicts", () => {
"remote set conflicts with delete",
prepareTestsConflicts(
{
- list: new LiveList(["A"]),
+ list: new LiveList(["a"]),
},
async ({ root1, root2, wsUtils, assert }) => {
- root1.get("list").set(0, "B");
+ // Client A replaces "a" with "X"
+ root1.get("list").set(0, "X");
+
+ // Client B simultaneously deletes "a"
root2.get("list").delete(0);
- assert({ list: ["B"] }, { list: [] });
+ assert({ list: ["X"] }, { list: [] });
await wsUtils.flushSocket1Messages();
- assert({ list: ["B"] }, { list: ["B"] });
+ assert({ list: ["X"] }, { list: ["X"] });
await wsUtils.flushSocket2Messages();
- assert({ list: ["B"] }, { list: ["B"] });
+ assert({ list: ["X"] });
}
)
);
@@ -325,9 +330,7 @@ describe.skip("LiveList conflicts", () => {
});
describe("move conflicts", () => {
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7278337421?check_suite_focus=true#step:6:52
- test.skip(
+ test(
"remote move conflicts with move",
prepareTestsConflicts(
{
@@ -499,9 +502,7 @@ describe.skip("LiveList conflicts", () => {
)
);
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7278546989?check_suite_focus=true#step:6:52
- test.skip(
+ test(
"set / insert + set",
prepareTestsConflicts(
{
@@ -549,9 +550,7 @@ describe.skip("LiveList conflicts", () => {
)
);
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7278076193?check_suite_focus=true#step:6:52
- test.skip(
+ test(
"set + move / move + move",
prepareTestsConflicts(
{
@@ -664,9 +663,7 @@ describe.skip("LiveList conflicts", () => {
)
);
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7278546989?check_suite_focus=true#step:6:79
- test.skip(
+ test(
"insert + delete / insert",
prepareTestsConflicts(
{
@@ -798,10 +795,8 @@ describe.skip("LiveList conflicts", () => {
});
});
-describe("LiveList single client", () => {
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/actions/runs/6336685485/job/17210682821#step:5:52
- test.skip(
+describe("LiveList single client tests", () => {
+ test(
"fast consecutive sets on same index",
prepareSingleClientTest(
{
diff --git a/packages/liveblocks-core/e2e/map.test.ts b/packages/liveblocks-core/e2e/map.test.ts
index 81563fda62d..9e43ccd70ca 100644
--- a/packages/liveblocks-core/e2e/map.test.ts
+++ b/packages/liveblocks-core/e2e/map.test.ts
@@ -32,9 +32,7 @@ describe("LiveMap single client", () => {
)
);
- // TODO: This test is flaky and occasionally fails in CI--make it more robust
- // See https://github.com/liveblocks/liveblocks/runs/7278076193?check_suite_focus=true#step:6:85
- test.skip(
+ test(
"remote set conflicts with a delete",
prepareTestsConflicts(
{
diff --git a/packages/liveblocks-core/e2e/utils.ts b/packages/liveblocks-core/e2e/utils.ts
index cc6fa6ffad8..53aeb6d4626 100644
--- a/packages/liveblocks-core/e2e/utils.ts
+++ b/packages/liveblocks-core/e2e/utils.ts
@@ -6,6 +6,7 @@ import { expect } from "vitest";
import WebSocket from "ws";
import type { BaseMetadata, NoInfr } from "../src";
+import { nanoid } from "../src";
import { createClient } from "../src/client";
import type { Status } from "../src/connection";
import type { LiveObject } from "../src/crdts/LiveObject";
@@ -72,6 +73,7 @@ async function initializeRoomForTest<
baseUrl: process.env.NEXT_PUBLIC_LIVEBLOCKS_BASE_URL,
});
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
const { room, leave } = client.enterRoom(roomId, {
initialPresence,
initialStorage,
@@ -82,7 +84,7 @@ async function initializeRoomForTest<
room,
leave,
get ws() {
- if (ws == null) {
+ if (ws === null) {
throw new Error("Websocket should be initialized at this point");
}
return ws;
@@ -115,7 +117,7 @@ export function prepareTestsConflicts(
}) => Promise
): () => Promise {
return async () => {
- const roomName = "storage-requirements-e2e-tests-" + new Date().getTime();
+ const roomName = "storage-requirements-e2e-tests-" + nanoid(10);
const actor1 = await initializeRoomForTest(
roomName,
@@ -136,19 +138,19 @@ export function prepareTestsConflicts(
actor1.ws.resumeSend();
// Waiting until every messages are received by all clients.
// We don't have a public way to know if everything has been received so we have to rely on time
- await wait(1000);
+ await wait(600);
},
flushSocket2Messages: async () => {
actor2.ws.resumeSend();
// Waiting until every messages are received by all clients.
// We don't have a public way to know if everything has been received so we have to rely on time
- await wait(1000);
+ await wait(600);
},
};
// Waiting until every messages are received by all clients.
// We don't have a public way to know if everything has been received so we have to rely on time
- await wait(1000);
+ await wait(600);
actor1.ws.pauseSend();
actor2.ws.pauseSend();
@@ -171,15 +173,21 @@ export function prepareTestsConflicts(
{ isDeep: true }
);
- function assert(immRoot1: ToImmutable, immRoot2?: ToImmutable) {
- if (immRoot2 == null) {
- immRoot2 = immRoot1;
+ function assert(
+ immRoot1: ToImmutable,
+ immRoot2: ToImmutable = immRoot1
+ ) {
+ try {
+ expect(root1.toImmutable()).toEqual(immRoot1);
+ expect(immutableStorage1).toEqual(immRoot1);
+ expect(root2.toImmutable()).toEqual(immRoot2);
+
+ expect(immutableStorage2).toEqual(immRoot2);
+ } catch (error) {
+ // Better stack trace (point to where assert is called instead)
+ Error.captureStackTrace(error as Error, assert);
+ throw error;
}
-
- expect(root1.toImmutable()).toEqual(immRoot1);
- expect(immutableStorage1).toEqual(immRoot1);
- expect(root2.toImmutable()).toEqual(immRoot2);
- expect(immutableStorage2).toEqual(immRoot2);
}
try {
@@ -225,7 +233,7 @@ export function prepareSingleClientTest(
// Waiting until every messages are received by all clients.
// We don't have a public way to know if everything has been received so we have to rely on time
- await wait(1000);
+ await wait(600);
actor.ws.pauseSend();
@@ -241,7 +249,7 @@ export function prepareSingleClientTest(
actor.ws.resumeSend();
// Waiting until every messages are received by all clients.
// We don't have a public way to know if everything has been received so we have to rely on time
- await wait(1000);
+ await wait(600);
},
});
actor.leave();
diff --git a/packages/liveblocks-core/package.json b/packages/liveblocks-core/package.json
index c9ac96302a4..47739733d53 100644
--- a/packages/liveblocks-core/package.json
+++ b/packages/liveblocks-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/core",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "Private internals for Liveblocks. DO NOT import directly from this package!",
"type": "module",
"main": "./dist/index.cjs",
diff --git a/packages/liveblocks-core/src/__tests__/ai.test.ts b/packages/liveblocks-core/src/__tests__/ai.test.ts
index 51734311857..485003d2858 100644
--- a/packages/liveblocks-core/src/__tests__/ai.test.ts
+++ b/packages/liveblocks-core/src/__tests__/ai.test.ts
@@ -1,6 +1,17 @@
import { describe, expect, test } from "vitest";
import { KnowledgeStack } from "../ai";
+import type {
+ AiAssistantContentPart,
+ AiAssistantDeltaUpdate,
+ AiExecutingToolInvocationPart,
+ AiReasoningDelta,
+ AiReceivingToolInvocationPart,
+ AiTextDelta,
+ AiToolInvocationDelta,
+ AiToolInvocationStreamStart,
+} from "../types/ai";
+import { patchContentWithDelta } from "../types/ai";
describe("KnowledgeStack", () => {
test("should be empty by default", () => {
@@ -145,3 +156,803 @@ describe("KnowledgeStack", () => {
expect(stack.get()).toEqual([]);
});
});
+
+describe("patchContentWithDelta", () => {
+ describe("text-delta", () => {
+ test("appends to existing text part", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "text", text: "Hello " },
+ ];
+ const delta: AiTextDelta = { type: "text-delta", textDelta: "world!" };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([{ type: "text", text: "Hello world!" }]);
+ });
+
+ test("creates new text part when last part is not text", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "reasoning", text: "Some reasoning" },
+ ];
+ const delta: AiTextDelta = { type: "text-delta", textDelta: "Hello" };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([
+ { type: "reasoning", text: "Some reasoning" },
+ { type: "text", text: "Hello" },
+ ]);
+ });
+
+ test("creates new text part when content is empty", () => {
+ const content: AiAssistantContentPart[] = [];
+ const delta: AiTextDelta = { type: "text-delta", textDelta: "Hello" };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([{ type: "text", text: "Hello" }]);
+ });
+
+ test("creates new text part when last part is tool-invocation", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "executed",
+ invocationId: "inv-1",
+ name: "search",
+ args: { query: "test" },
+ result: { type: "success", data: { results: [] } },
+ },
+ ];
+ const delta: AiTextDelta = { type: "text-delta", textDelta: "Done!" };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toHaveLength(2);
+ expect(content[1]).toEqual({ type: "text", text: "Done!" });
+ });
+ });
+
+ describe("reasoning-delta", () => {
+ test("appends to existing reasoning part", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "reasoning", text: "Let me think " },
+ ];
+ const delta: AiReasoningDelta = {
+ type: "reasoning-delta",
+ textDelta: "about this...",
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([
+ { type: "reasoning", text: "Let me think about this..." },
+ ]);
+ });
+
+ test("creates new reasoning part when last part is not reasoning", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "text", text: "Some text" },
+ ];
+ const delta: AiReasoningDelta = {
+ type: "reasoning-delta",
+ textDelta: "Thinking",
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([
+ { type: "text", text: "Some text" },
+ { type: "reasoning", text: "Thinking" },
+ ]);
+ });
+
+ test("creates new reasoning part when content is empty", () => {
+ const content: AiAssistantContentPart[] = [];
+ const delta: AiReasoningDelta = {
+ type: "reasoning-delta",
+ textDelta: "Starting to analyze...",
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([
+ { type: "reasoning", text: "Starting to analyze..." },
+ ]);
+ });
+
+ test("handles empty textDelta in reasoning-delta", () => {
+ const content: AiAssistantContentPart[] = [];
+ const delta: AiReasoningDelta = {
+ type: "reasoning-delta",
+ textDelta: "",
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([{ type: "reasoning", text: "" }]);
+ });
+ });
+
+ describe("tool-stream", () => {
+ test("creates receiving tool invocation with empty partialArgs", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-test",
+ name: "testTool",
+ });
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-test",
+ name: "testTool",
+ partialArgs: {},
+ }),
+ ]);
+ });
+
+ test("appends tool-stream after existing content", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "text", text: "Let me search for that" },
+ ];
+ const delta: AiToolInvocationStreamStart = {
+ type: "tool-stream",
+ invocationId: "inv-456",
+ name: "calculator",
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toHaveLength(2);
+ expect(content[1]).toMatchObject({
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-456",
+ name: "calculator",
+ partialArgs: {},
+ });
+ });
+
+ test("allows multiple tool-streams with different invocationIds", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-1",
+ name: "search",
+ });
+
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-2",
+ name: "calculator",
+ });
+
+ expect(content).toHaveLength(2);
+ expect(content[0]).toMatchObject({
+ invocationId: "inv-1",
+ name: "search",
+ });
+ expect(content[1]).toMatchObject({
+ invocationId: "inv-2",
+ name: "calculator",
+ });
+ });
+
+ test("caches partialArgs computation between accesses", () => {
+ // Setup
+ // =====
+ const content: AiAssistantContentPart[] = [];
+
+ // Create two tool invocations (to test that each has its own cache)
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-cache-test",
+ name: "testTool",
+ });
+
+ const tool1 = content[0] as AiReceivingToolInvocationPart;
+
+ // Actual test
+ // ===========
+
+ expect(tool1.partialArgs).toEqual({});
+ expect(tool1.partialArgs).toBe(tool1.partialArgs);
+ // ^^^^ Referentially equal
+
+ // Add some partial args text
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"query": "tes',
+ });
+
+ // Multiple accesses doesn't change the value...
+ expect(tool1.partialArgs).toEqual({ query: "tes" });
+ expect(tool1.partialArgs).toEqual({ query: "tes" });
+
+ // ...in fact it returns the same value
+ const result1 = tool1.partialArgs;
+ expect(tool1.partialArgs).toBe(tool1.partialArgs);
+ // ^^^^ Referentially equal
+
+ // Second tool invocation to test that each has its own cache
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-cache-test-2",
+ name: "testTool2",
+ });
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"different": "value"}',
+ });
+
+ const tool2 = content[1] as AiReceivingToolInvocationPart;
+
+ // Each tool should have its own cached values
+ tool2.partialArgs;
+
+ expect(tool2.partialArgs).toEqual({ different: "value" });
+ expect(tool2.partialArgs).toBe(tool2.partialArgs);
+
+ // First tool should still have its original cached value
+ expect(tool1.partialArgs).toBe(result1); // Still the same cached object
+ });
+ });
+
+ describe("tool-delta", () => {
+ test("ignores delta when content is empty (no tool-stream yet)", () => {
+ const content: AiAssistantContentPart[] = [];
+ const delta: AiToolInvocationDelta = {
+ type: "tool-delta",
+ delta: '{"ignored": true}',
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([]);
+ });
+
+ test("ignores delta when last part is text", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "text", text: "Some text" },
+ ];
+ const delta: AiToolInvocationDelta = {
+ type: "tool-delta",
+ delta: '{"ignored": true}',
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([{ type: "text", text: "Some text" }]);
+ });
+
+ test("ignores delta when last part is reasoning", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "reasoning", text: "Thinking..." },
+ ];
+ const delta: AiToolInvocationDelta = {
+ type: "tool-delta",
+ delta: '{"ignored": true}',
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([{ type: "reasoning", text: "Thinking..." }]);
+ });
+
+ test("ignores delta when last tool is executing", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "test" },
+ },
+ ];
+ const delta: AiToolInvocationDelta = {
+ type: "tool-delta",
+ delta: '{"should": "be ignored"}',
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([
+ {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "test" },
+ },
+ ]);
+ });
+
+ test("ignores delta when last tool is executed", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "executed",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "test" },
+ result: { type: "success", data: { found: true } },
+ },
+ ];
+ const delta: AiToolInvocationDelta = {
+ type: "tool-delta",
+ delta: '{"should": "be ignored"}',
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content[0]).toMatchObject({
+ stage: "executed",
+ invocationId: "inv-123",
+ });
+ });
+
+ test("appends delta to receiving tool invocation", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ // Start the tool stream
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-1",
+ name: "search",
+ });
+
+ // Add delta
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"query": "test"}',
+ });
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-1",
+ name: "search",
+ partialArgs: { query: "test" },
+ }),
+ ]);
+ });
+
+ test("builds JSON progressively with multiple deltas", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ // Start the tool stream
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-complex",
+ name: "api_call",
+ });
+
+ // Build up the JSON progressively
+ const deltas = [
+ '{"',
+ 'method": "',
+ 'GET",',
+ ' "url": "https://',
+ "api.example.com",
+ '", "headers": {',
+ '"Accept": "application/json"',
+ "}}",
+ ];
+
+ for (const deltaText of deltas) {
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: deltaText,
+ });
+ }
+
+ const tool = content[0] as AiReceivingToolInvocationPart;
+ expect(tool.partialArgs).toEqual({
+ method: "GET",
+ url: "https://api.example.com",
+ headers: { Accept: "application/json" },
+ });
+ });
+
+ test("only affects the last receiving tool when multiple tools exist", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ // First tool (executed)
+ content.push({
+ type: "tool-invocation",
+ stage: "executed",
+ invocationId: "inv-1",
+ name: "search",
+ args: { query: "first" },
+ result: { type: "success", data: {} },
+ });
+
+ // Second tool (receiving)
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-2",
+ name: "calculator",
+ });
+
+ // Delta should only affect the second tool
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"expr": "2+2"}',
+ });
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ type: "tool-invocation",
+ stage: "executed",
+ invocationId: "inv-1",
+ name: "search",
+ args: { query: "first" },
+ }),
+ expect.objectContaining({
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-2",
+ name: "calculator",
+ partialArgs: { expr: "2+2" },
+ }),
+ ]);
+ });
+ });
+
+ describe("tool-invocation (executing/executed)", () => {
+ test("appends new executing tool when no matching invocationId exists", () => {
+ const content: AiAssistantContentPart[] = [];
+ const delta: AiExecutingToolInvocationPart = {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-new",
+ name: "search",
+ args: { query: "test" },
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([delta]);
+ });
+
+ test("replaces receiving tool with executing tool (same invocationId)", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-123",
+ name: "search",
+ partialArgsText: '{"query": "par"}',
+ partialArgs: { dummy: "not used in this test" },
+ },
+ ];
+
+ const delta: AiExecutingToolInvocationPart = {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "partial" },
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([delta]);
+ });
+
+ test("replaces executing tool with executed tool (same invocationId)", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "test" },
+ },
+ ];
+
+ const delta: AiAssistantDeltaUpdate = {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "test" },
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([delta]);
+ });
+
+ test("replaces tool in middle of content array", () => {
+ const content: AiAssistantContentPart[] = [
+ { type: "text", text: "Before" },
+ {
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-123",
+ name: "search",
+ partialArgsText: '{"q": "test"}',
+ partialArgs: { dummy: "not used in this test" },
+ },
+ { type: "text", text: "After" },
+ ];
+
+ const delta: AiExecutingToolInvocationPart = {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-123",
+ name: "search",
+ args: { query: "complete" },
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toEqual([
+ { type: "text", text: "Before" },
+ delta,
+ { type: "text", text: "After" },
+ ]);
+ });
+
+ test("replaces the LAST matching tool when multiple have same invocationId", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-dup",
+ name: "first",
+ partialArgsText: "a",
+ partialArgs: { dummy: "not used in this test" },
+ },
+ { type: "text", text: "Middle" },
+ {
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-dup",
+ name: "second",
+ partialArgsText: "b",
+ partialArgs: { dummy: "not used in this test" },
+ },
+ ];
+
+ const delta: AiExecutingToolInvocationPart = {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-dup",
+ name: "replaced",
+ args: { value: "test" },
+ };
+
+ patchContentWithDelta(content, delta);
+
+ // Should replace the LAST one (index 2)
+ expect(content[0]).toMatchObject({ name: "first" });
+ expect(content[1]).toEqual({ type: "text", text: "Middle" });
+ expect(content[2]).toEqual(delta);
+ });
+
+ test("does not affect tools with different invocationIds", () => {
+ const content: AiAssistantContentPart[] = [
+ {
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-1",
+ name: "tool1",
+ partialArgsText: "",
+ partialArgs: { dummy: "not used in this test" },
+ },
+ {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-2",
+ name: "tool2",
+ args: { x: 1 },
+ },
+ ];
+
+ const delta: AiAssistantDeltaUpdate = {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-3",
+ name: "tool3",
+ args: { y: 2 },
+ };
+
+ patchContentWithDelta(content, delta);
+
+ expect(content).toHaveLength(3);
+ expect(content[0]).toMatchObject({ invocationId: "inv-1" });
+ expect(content[1]).toMatchObject({ invocationId: "inv-2" });
+ expect(content[2]).toMatchObject({ invocationId: "inv-3" });
+ });
+ });
+
+ describe("integration scenarios", () => {
+ test("mutates the original content array in-place", () => {
+ const content: AiAssistantContentPart[] = [];
+ const originalContent = content;
+
+ patchContentWithDelta(content, {
+ type: "text-delta",
+ textDelta: "Hello",
+ });
+
+ expect(content).toBe(originalContent);
+ expect(content).toEqual([{ type: "text", text: "Hello" }]);
+ });
+
+ test("handles mixed content flow: reasoning -> text -> tool", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ // Start with reasoning
+ patchContentWithDelta(content, {
+ type: "reasoning-delta",
+ textDelta: "Let me analyze",
+ });
+
+ // Continue reasoning
+ patchContentWithDelta(content, {
+ type: "reasoning-delta",
+ textDelta: " this problem",
+ });
+
+ // Switch to text
+ patchContentWithDelta(content, {
+ type: "text-delta",
+ textDelta: "I'll search for",
+ });
+
+ // Continue text
+ patchContentWithDelta(content, {
+ type: "text-delta",
+ textDelta: " information",
+ });
+
+ // Add tool
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-1",
+ name: "search",
+ });
+
+ expect(content).toEqual([
+ { type: "reasoning", text: "Let me analyze this problem" },
+ { type: "text", text: "I'll search for information" },
+ expect.objectContaining({
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-1",
+ name: "search",
+ }),
+ ]);
+ });
+
+ test("complete tool streaming workflow", () => {
+ const content: AiAssistantContentPart[] = [];
+ const deltas: AiAssistantDeltaUpdate[] = [
+ { type: "tool-stream", invocationId: "inv-123", name: "search" },
+ { type: "tool-delta", delta: '{"query": "' },
+ { type: "tool-delta", delta: "hello" },
+ { type: "tool-delta", delta: ', world"}' },
+ ];
+
+ for (const delta of deltas) {
+ patchContentWithDelta(content, delta);
+ }
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ type: "tool-invocation",
+ stage: "receiving",
+ invocationId: "inv-123",
+ name: "search",
+ partialArgs: { query: "hello, world" },
+ }),
+ ]);
+ });
+
+ test("multiple tools with interleaved text", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ // First tool
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-1",
+ name: "search",
+ });
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"q": "test"}',
+ });
+
+ // Text between tools
+ patchContentWithDelta(content, {
+ type: "text-delta",
+ textDelta: "Now calculating...",
+ });
+
+ // Second tool
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-2",
+ name: "calculator",
+ });
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"expr": "2+2"}',
+ });
+
+ expect(content).toHaveLength(3);
+ expect(content[0]).toMatchObject({
+ type: "tool-invocation",
+ invocationId: "inv-1",
+ partialArgs: { q: "test" },
+ });
+ expect(content[1]).toEqual({ type: "text", text: "Now calculating..." });
+ expect(content[2]).toMatchObject({
+ type: "tool-invocation",
+ invocationId: "inv-2",
+ partialArgs: { expr: "2+2" },
+ });
+ });
+
+ test("tool lifecycle: receiving -> executing", () => {
+ const content: AiAssistantContentPart[] = [];
+
+ // Start tool stream (receiving)
+ patchContentWithDelta(content, {
+ type: "tool-stream",
+ invocationId: "inv-lifecycle",
+ name: "api",
+ });
+
+ // Build arguments
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '{"endpoint": "/users", ',
+ });
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ stage: "receiving",
+ partialArgs: { endpoint: "/users" },
+ }),
+ ]);
+
+ patchContentWithDelta(content, {
+ type: "tool-delta",
+ delta: '"method":"GET"}',
+ });
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ stage: "receiving",
+ partialArgs: { endpoint: "/users", method: "GET" },
+ }),
+ ]);
+
+ // Transition to executing
+ patchContentWithDelta(content, {
+ type: "tool-invocation",
+ stage: "executing",
+ invocationId: "inv-lifecycle",
+ name: "api",
+ args: { endpoint: "/users", method: "GET" },
+ });
+
+ expect(content).toEqual([
+ expect.objectContaining({
+ stage: "executing",
+ args: { endpoint: "/users", method: "GET" },
+ }),
+ ]);
+ });
+ });
+});
diff --git a/packages/liveblocks-core/src/ai.ts b/packages/liveblocks-core/src/ai.ts
index a19a6fbe81f..28c4a2693a6 100644
--- a/packages/liveblocks-core/src/ai.ts
+++ b/packages/liveblocks-core/src/ai.ts
@@ -28,6 +28,7 @@ import type {
import type {
AbortAiResponse,
AiAssistantDeltaUpdate,
+ AiAssistantMessage,
AiChat,
AiChatMessage,
AiChatsQuery,
@@ -56,7 +57,7 @@ import type {
SetToolResultResponse,
ToolResultResponse,
} from "./types/ai";
-import { appendDelta } from "./types/ai";
+import { patchContentWithDelta } from "./types/ai";
import type { Awaitable } from "./types/Awaitable";
import type {
InferFromSchema,
@@ -120,6 +121,7 @@ export type AiToolInvocationProps<
// Private APIs
[kInternal]: {
execute: AiToolExecuteCallback | undefined;
+ messageStatus: AiAssistantMessage["status"];
};
}
>;
@@ -579,7 +581,7 @@ function createStore_forChatMessages(
const message = lut.get(messageId);
if (message === undefined) return false;
- appendDelta(message.contentSoFar, delta);
+ patchContentWithDelta(message.contentSoFar, delta);
lut.set(messageId, message);
return true;
});
@@ -1361,7 +1363,7 @@ export function makeCreateSocketDelegateForAi(
const url = new URL(baseUrl);
url.protocol = url.protocol === "http:" ? "ws" : "wss";
- url.pathname = "/ai/v4";
+ url.pathname = "/ai/v5";
// TODO: don't allow public key to do this
if (authValue.type === "secret") {
url.searchParams.set("tok", authValue.token.raw);
diff --git a/packages/liveblocks-core/src/index.ts b/packages/liveblocks-core/src/index.ts
index ea977050565..56a3359e2c5 100644
--- a/packages/liveblocks-core/src/index.ts
+++ b/packages/liveblocks-core/src/index.ts
@@ -157,7 +157,7 @@ export { batch, DerivedSignal, MutableSignal, Signal } from "./lib/signals";
export { SortedList } from "./lib/SortedList";
export { stableStringify } from "./lib/stringify";
export type { QueryParams, URLSafeString } from "./lib/url";
-export { generateUrl, sanitizeUrl, url, urljoin } from "./lib/url";
+export { generateUrl, isUrl, sanitizeUrl, url, urljoin } from "./lib/url";
export type {
Brand,
DistributiveOmit,
@@ -168,6 +168,7 @@ export {
b64decode,
compactObject,
entries,
+ findLastIndex,
keys,
mapValues,
memoizeOnSuccess,
diff --git a/packages/liveblocks-core/src/lib/__tests__/parsePartialJsonObject.test.ts b/packages/liveblocks-core/src/lib/__tests__/parsePartialJsonObject.test.ts
new file mode 100644
index 00000000000..edfff1a0f99
--- /dev/null
+++ b/packages/liveblocks-core/src/lib/__tests__/parsePartialJsonObject.test.ts
@@ -0,0 +1,154 @@
+import { describe, expect, test } from "vitest";
+
+import { parsePartialJsonObject as p } from "../parsePartialJsonObject";
+
+describe("parsePartialJsonObject", () => {
+ test("basic cases", () => {
+ expect(p("")).toEqual({});
+ expect(p(" ")).toEqual({});
+ expect(p("{")).toEqual({});
+ expect(p('{"key"')).toEqual({});
+ expect(p('{"key')).toEqual({});
+ expect(p('{"key":')).toEqual({});
+ expect(p('{"key":""')).toEqual({ key: "" });
+ expect(p('{"key":"')).toEqual({ key: "" });
+ expect(p('{"key":0')).toEqual({ key: 0 });
+ expect(p('{"key":"hi')).toEqual({ key: "hi" });
+ expect(p('{"key":"value"')).toEqual({ key: "value" });
+ expect(p('{"key":"value"}')).toEqual({ key: "value" });
+ });
+
+ test("arrays", () => {
+ expect(p('{"arr":[')).toEqual({ arr: [] });
+ expect(p('{"arr":[1')).toEqual({ arr: [1] });
+ expect(p('{"arr":[1,')).toEqual({ arr: [1] });
+ expect(p('{"arr":["hi')).toEqual({ arr: ["hi"] });
+ expect(p('{"arr":["hi"')).toEqual({ arr: ["hi"] });
+ expect(p('{"arr":["hi"]')).toEqual({ arr: ["hi"] });
+ expect(p('{"arr":[1,2,3')).toEqual({ arr: [1, 2, 3] });
+ });
+
+ test("nested structures", () => {
+ expect(p('{"arr":[')).toEqual({ arr: [] });
+ expect(p('{"arr":[{')).toEqual({ arr: [{}] });
+ expect(p('{"arr":[{"nested"')).toEqual({ arr: [{}] });
+ expect(p('{"arr":[{"nested":')).toEqual({ arr: [{}] });
+ expect(p('{"arr":[{"nested":42')).toEqual({ arr: [{ nested: 42 }] });
+ });
+
+ test("mixed nesting", () => {
+ expect(p('{"a":[1,{"b":')).toEqual({ a: [1, {}] });
+ expect(p('{"a":[1,{"b":[')).toEqual({ a: [1, { b: [] }] });
+ expect(p('{"a":{"b":["c"')).toEqual({ a: { b: ["c"] } });
+ });
+
+ test("strings with special characters", () => {
+ expect(p('{"key":"val\\n')).toEqual({ key: "val\n" });
+ expect(p('{"key":"val\\"')).toEqual({ key: 'val"' });
+ expect(p('{"key":"val with spaces')).toEqual({ key: "val with spaces" });
+ expect(p('{"unicode":"café')).toEqual({ unicode: "café" });
+ });
+
+ test("numbers", () => {
+ expect(p('{"num":123')).toEqual({ num: 123 });
+ expect(p('{"num":123.')).toEqual({ num: 123 });
+ expect(p('{"num":-42')).toEqual({ num: -42 });
+ expect(p('{"pi":3.')).toEqual({ pi: 3 });
+ expect(p('{"pi":3.14')).toEqual({ pi: 3.14 });
+ });
+
+ test("complex real-world examples", () => {
+ expect(p('{"users":[{"id":1,"name":"John')).toEqual({
+ users: [{ id: 1, name: "John" }],
+ });
+ expect(p('{"config":{"debug":true,"timeout":')).toEqual({
+ config: { debug: true },
+ });
+ expect(p('{"data":[{"items":[{"type":"text","content":')).toEqual({
+ data: [{ items: [{ type: "text" }] }],
+ });
+ });
+
+ test("edge cases for coverage", () => {
+ // Test properly closed nested objects to trigger stack.pop for '}'
+ expect(p('{"a":{"b":{}}')).toEqual({ a: { b: {} } });
+ expect(p('{"nested":{"deep":{"obj":{}}}}')).toEqual({
+ nested: { deep: { obj: {} } },
+ });
+
+ // Test escaped characters at end of incomplete strings
+ expect(p('{"key":"val\\"')).toEqual({ key: 'val"' });
+ expect(p('{"key":"val\\\\"')).toEqual({ key: "val\\" });
+ expect(p('{"esc":"test\\\\')).toEqual({ esc: "test\\" });
+
+ // Test combination of escapes and incomplete structure
+ expect(p('{"a":"b\\\\","c":')).toEqual({ a: "b\\" });
+
+ // Test escape handling in string backtracking
+ expect(p('{"a":"test\\\\value:')).toEqual({ a: "test\\value:" });
+ expect(p('{"a":"test\\\\value":')).toEqual({});
+
+ // Test handling of input ending with colon after numeric value
+ expect(p('{"a":1:')).toEqual({ a: 1 });
+
+ // Cover escaped characters inside strings
+ expect(p('{"msg":"Say \\"hello\\"')).toEqual({ msg: 'Say "hello"' });
+ expect(p('{"path":"C:\\\\Users')).toEqual({ path: "C:\\Users" });
+
+ // Cover array closing bracket stack operations
+ expect(p('{"arr":[1,2]}')).toEqual({ arr: [1, 2] });
+ expect(p('{"nested":[[[]]]}')).toEqual({ nested: [[[]]] });
+ expect(p('{"mixed":[{"a":1}]}')).toEqual({ mixed: [{ a: 1 }] });
+
+ // Cover error recovery logic for malformed JSON
+
+ // Test colon removal for incomplete key-value pairs
+ expect(p('{"a":1,"incomplete":')).toEqual({ a: 1 });
+
+ // Test handling of unmatched quotes
+ expect(p('{"a":1,"bad":"incomplete')).toEqual({ a: 1, bad: "incomplete" });
+
+ // Test comma removal for trailing commas
+ expect(p('{"a":1,"b":2,')).toEqual({ a: 1, b: 2 });
+
+ // Test fallback to {} for completely malformed input
+ expect(p("not json at all")).toEqual({});
+ expect(p('{"completely broken syntax",}')).toEqual({});
+ expect(p('{"key":"completely broken syntax",}')).toEqual({});
+ expect(p('{"key","completely broken syntax",}')).toEqual({});
+ });
+
+ test("handles emojis and newlines", () => {
+ // Complete emojis in strings
+ expect(p('{"message":"Hello 👋 world')).toEqual({
+ message: "Hello 👋 world",
+ });
+ expect(p('{"reaction":"🎉","status":"complete')).toEqual({
+ reaction: "🎉",
+ status: "complete",
+ });
+
+ // Partial/incomplete emojis (multi-byte sequences)
+ expect(p('{"partial":"test 👋')).toEqual({ partial: "test 👋" });
+ expect(p('{"emoji":"🎉🎊')).toEqual({ emoji: "🎉🎊" });
+
+ // Newlines and whitespace in strings
+ expect(p('{"text":"line1\\nline2')).toEqual({ text: "line1\nline2" });
+ expect(p('{"multiline":"first line\\nsecond')).toEqual({
+ multiline: "first line\nsecond",
+ });
+
+ // Mixed emojis, newlines, and regular content
+ expect(p('{"log":"User clicked 👆\\nAction: success ✅')).toEqual({
+ log: "User clicked 👆\nAction: success ✅",
+ });
+
+ // Emojis with arrays and objects
+ expect(p('{"reactions":["👍","👎","❤️')).toEqual({
+ reactions: ["👍", "👎", "❤️"],
+ });
+ expect(p('{"user":{"name":"Alice","status":"🟢 online')).toEqual({
+ user: { name: "Alice", status: "🟢 online" },
+ });
+ });
+});
diff --git a/packages/liveblocks-core/src/lib/__tests__/url.test.ts b/packages/liveblocks-core/src/lib/__tests__/url.test.ts
index 76e0253b5ac..5298aeb79d2 100644
--- a/packages/liveblocks-core/src/lib/__tests__/url.test.ts
+++ b/packages/liveblocks-core/src/lib/__tests__/url.test.ts
@@ -27,6 +27,11 @@ describe("sanitizeUrl", () => {
);
});
+ test("should support hash-only URLs", () => {
+ expect(sanitizeUrl("#")).toBe("#");
+ expect(sanitizeUrl("#hash")).toBe("#hash");
+ });
+
test("should support ports, query params, and a hash", () => {
expect(sanitizeUrl("https://localhost:3000/docs?query=value#hash")).toBe(
"https://localhost:3000/docs?query=value#hash"
@@ -71,7 +76,6 @@ describe("sanitizeUrl", () => {
expect(sanitizeUrl("file:///etc/passwd")).toBe(null);
expect(sanitizeUrl("//liveblocks.io")).toBe(null);
expect(sanitizeUrl("")).toBe(null);
- expect(sanitizeUrl("#")).toBe(null);
});
});
diff --git a/packages/liveblocks-core/src/lib/parsePartialJsonObject.ts b/packages/liveblocks-core/src/lib/parsePartialJsonObject.ts
new file mode 100644
index 00000000000..ee9d3eaa13c
--- /dev/null
+++ b/packages/liveblocks-core/src/lib/parsePartialJsonObject.ts
@@ -0,0 +1,142 @@
+import type { JsonObject } from "./Json";
+import { tryParseJson } from "./utils";
+
+export function parsePartialJsonObject(partial: string): JsonObject {
+ partial = partial.trimStart();
+
+ if (partial.charAt(0) !== "{") {
+ // Not an object, don't even try to parse it
+ return {};
+ }
+
+ // If it's already valid JSON, return as-is
+ if (partial.trimEnd().endsWith("}")) {
+ const quickCheck = tryParseJson(partial);
+ if (quickCheck) {
+ // Due to the '{' check above, we can safely assume it's an object
+ return quickCheck as JsonObject;
+ }
+ }
+
+ let result = partial;
+
+ // 1. Fix unclosed strings by appending a '"' if needed
+ let quoteCount = 0;
+ let escaped = false;
+ for (let i = 0; i < result.length; i++) {
+ const char = result[i];
+ if (escaped) {
+ escaped = false;
+ } else if (char === "\\") {
+ escaped = true;
+ } else if (char === '"') {
+ quoteCount++;
+ }
+ }
+
+ if (quoteCount % 2 === 1) {
+ result += '"';
+ }
+
+ // 2. Trim whitespace at the end
+ result = result.trimEnd();
+
+ // 3. If the last char is a ',', strip it
+ if (result.endsWith(",")) {
+ result = result.slice(0, -1);
+ }
+
+ // 4. If the last char is a '.', strip it
+ if (result.endsWith(".")) {
+ result = result.slice(0, -1);
+ }
+
+ // 5. Go from left to right and collect '[' and '{' in a stack
+ const stack: string[] = [];
+ let inString = false;
+ escaped = false;
+
+ for (let i = 0; i < result.length; i++) {
+ const char = result[i];
+
+ if (inString) {
+ if (escaped) {
+ escaped = false;
+ } else if (char === "\\") {
+ escaped = true;
+ } else if (char === '"') {
+ inString = false;
+ }
+ } else {
+ if (char === '"') {
+ inString = true;
+ } else if (char === "{") {
+ stack.push("}");
+ } else if (char === "[") {
+ stack.push("]");
+ } else if (
+ char === "}" &&
+ stack.length > 0 &&
+ stack[stack.length - 1] === "}"
+ ) {
+ stack.pop();
+ } else if (
+ char === "]" &&
+ stack.length > 0 &&
+ stack[stack.length - 1] === "]"
+ ) {
+ stack.pop();
+ }
+ }
+ }
+
+ // 6. Build the suffix string from the stack
+ const suffix = stack.reverse().join("");
+
+ // 7. Attempt to "just" add the missing ] and }'s.
+ {
+ const attempt = tryParseJson(result + suffix);
+ if (attempt) {
+ // If it parses, return the result
+ return attempt as JsonObject;
+ }
+ }
+
+ // 8. If there is a parse failure, it's likely because we're missing a "value" for a key in an object.
+
+ // a. if the last char is a ":" remove it
+ if (result.endsWith(":")) {
+ result = result.slice(0, -1);
+ }
+
+ // b. if the last char now is a '"', remove that last string
+ if (result.endsWith('"')) {
+ let pos = result.length - 2; // Start before the closing quote
+ escaped = false;
+
+ // Scan back to find the opening quote, accounting for escaping
+ while (pos >= 0) {
+ if (escaped) {
+ escaped = false;
+ } else if (result[pos] === "\\") {
+ escaped = true;
+ } else if (result[pos] === '"') {
+ // Found the opening quote
+ result = result.slice(0, pos);
+ break;
+ }
+ pos--;
+ }
+ }
+
+ // c. if the last char now is a ',', strip it
+ if (result.endsWith(",")) {
+ result = result.slice(0, -1);
+ }
+
+ // Re-add the missing brackets/braces
+ result += suffix;
+
+ // 10. Run JSON.parse on the result again. it should now work!
+ return (tryParseJson(result) as JsonObject | undefined) ?? {}; // Still invalid JSON
+}
diff --git a/packages/liveblocks-core/src/lib/url.ts b/packages/liveblocks-core/src/lib/url.ts
index 1000e560e43..6b0afa91698 100644
--- a/packages/liveblocks-core/src/lib/url.ts
+++ b/packages/liveblocks-core/src/lib/url.ts
@@ -83,6 +83,7 @@ export function url(
* - Absolute URLs with an http or https protocol (e.g. https://liveblocks.io)
* - Absolute URLs with a `www` prefix (e.g. www.liveblocks.io)
* - Relative URLs (e.g. /path/to/page)
+ * - Hash-only URLs (e.g. #hash)
*
* The presence/absence of trailing slashes is preserved.
* Rejected URLs are returned as `null`.
@@ -93,6 +94,11 @@ export function sanitizeUrl(url: string): string | null {
url = "https://" + url;
}
+ // If the URL is an empty hash, return it as is.
+ if (url === "#") {
+ return url;
+ }
+
try {
const isAbsolute = ABSOLUTE_URL_REGEX.test(url);
const urlObject = new URL(
@@ -160,3 +166,12 @@ export function generateUrl(
? urlObject.href
: urlObject.href.replace(PLACEHOLDER_BASE_URL, "");
}
+
+export function isUrl(string: string): boolean {
+ try {
+ new URL(string);
+ return true;
+ } catch (_) {
+ return false;
+ }
+}
diff --git a/packages/liveblocks-core/src/lib/utils.ts b/packages/liveblocks-core/src/lib/utils.ts
index e8558953fdf..da2a75a8419 100644
--- a/packages/liveblocks-core/src/lib/utils.ts
+++ b/packages/liveblocks-core/src/lib/utils.ts
@@ -246,3 +246,18 @@ export function memoizeOnSuccess(
return cached;
};
}
+
+/**
+ * Polyfill for Array.prototype.findLastIndex()
+ */
+export function findLastIndex(
+ arr: T[],
+ predicate: (value: T, index: number, obj: T[]) => boolean
+): number {
+ for (let i = arr.length - 1; i >= 0; i--) {
+ if (predicate(arr[i], i, arr)) {
+ return i;
+ }
+ }
+ return -1;
+}
diff --git a/packages/liveblocks-core/src/types/ai.ts b/packages/liveblocks-core/src/types/ai.ts
index a0c86246b2e..b716725168c 100644
--- a/packages/liveblocks-core/src/types/ai.ts
+++ b/packages/liveblocks-core/src/types/ai.ts
@@ -8,9 +8,11 @@ import type { JSONSchema7 } from "json-schema";
import { assertNever } from "../lib/assert";
import type { Json, JsonObject } from "../lib/Json";
+import { parsePartialJsonObject } from "../lib/parsePartialJsonObject";
import type { Relax } from "../lib/Relax";
import type { Resolve } from "../lib/Resolve";
import type { Brand } from "../lib/utils";
+import { findLastIndex } from "../lib/utils";
export type Cursor = Brand;
export type ISODateString = Brand;
@@ -332,7 +334,9 @@ export type AiReceivingToolInvocationPart = {
stage: "receiving";
invocationId: string;
name: string;
- partialArgs: Json;
+ /** @internal */
+ partialArgsText: string; // The raw, partial JSON text value
+ partialArgs: JsonObject; // The interpreted, partial JSON value
};
export type AiExecutingToolInvocationPart = {
@@ -373,6 +377,27 @@ export type AiReasoningDelta = Relax<
| { type: "reasoning-delta"; signature: string }
>;
+// Available since protocol V5, this is the start of a tool invocation stream
+export type AiToolInvocationStreamStart = {
+ type: "tool-stream";
+ invocationId: string;
+ name: string;
+};
+
+// Available since protocol V5, this is a partial tool invocation that is being
+// constructed by the server and sent to the client as a delta. The client will
+// append this delta to the last tool invocation stream's partial JSON buffer
+// that will eventually become the full `args` value when JSON.parse()'ed.
+export type AiToolInvocationDelta = {
+ type: "tool-delta";
+ /**
+ * The textual delta to be appended to the last tool invocation stream's
+ * partial JSON buffer that will eventually become the full `args` value when
+ * JSON.parse()'ed.
+ */
+ delta: string;
+};
+
export type AiReasoningPart = {
type: "reasoning";
text: string;
@@ -395,9 +420,13 @@ export type AiAssistantContentPart =
| AiToolInvocationPart;
export type AiAssistantDeltaUpdate =
- | AiTextDelta // ...or a delta to append to the last sent part
- | AiReasoningDelta // ...or a delta to append to the last sent part
- | AiExecutingToolInvocationPart; // ...or a tool invocation chunk
+ | AiTextDelta // a delta appended to the last part (if text)
+ | AiReasoningDelta // a delta appended to the last part (if reasoning)
+ | AiExecutingToolInvocationPart // a tool invocation ready to be executed by the client
+
+ // Since protocol V5, if tool-call-streaming is enabled
+ | AiToolInvocationStreamStart // the start of a new tool-call stream
+ | AiToolInvocationDelta; // a partial/under-construction tool invocation (since protocol V5)
export type AiUserMessage = {
id: MessageId;
@@ -484,7 +513,7 @@ export type AiKnowledgeSource = {
// --------------------------------------------------------------------------------------------------
-export function appendDelta(
+export function patchContentWithDelta(
content: AiAssistantContentPart[],
delta: AiAssistantDeltaUpdate
): void {
@@ -514,9 +543,61 @@ export function appendDelta(
}
break;
- case "tool-invocation":
- content.push(delta);
+ case "tool-stream": {
+ let _cacheKey = "";
+ let _cachedArgs: JsonObject = {};
+
+ const toolInvocation = {
+ type: "tool-invocation" as const,
+ stage: "receiving" as const,
+ invocationId: delta.invocationId,
+ name: delta.name,
+ partialArgsText: "",
+ get partialArgs(): JsonObject {
+ if (this.partialArgsText !== _cacheKey) {
+ _cachedArgs = parsePartialJsonObject(this.partialArgsText);
+ _cacheKey = this.partialArgsText;
+ }
+ return _cachedArgs;
+ },
+ };
+ content.push(toolInvocation);
+ break;
+ }
+
+ case "tool-delta": {
+ // Take the last part, expect it to be a tool invocation in receiving
+ // stage. If not, ignore this delta. If it is, append the delta to the
+ // partialArgsText
+ if (
+ lastPart?.type === "tool-invocation" &&
+ lastPart.stage === "receiving"
+ ) {
+ lastPart.partialArgsText += delta.delta;
+ }
+ // Otherwise ignore the delta - it's out of order or unexpected
+ break;
+ }
+
+ case "tool-invocation": {
+ // Find and replace any existing tool invocation with the same invocationId
+ // Search from right to left (find the last matching one)
+ const existingIndex = findLastIndex(
+ content,
+ (part) =>
+ part.type === "tool-invocation" &&
+ part.invocationId === delta.invocationId
+ );
+
+ if (existingIndex > -1) {
+ // Replace the existing one
+ content[existingIndex] = delta;
+ } else {
+ // No existing one found, just append
+ content.push(delta);
+ }
break;
+ }
default:
return assertNever(delta, "Unhandled case");
diff --git a/packages/liveblocks-core/test-d/InferFromSchema.test-d.ts b/packages/liveblocks-core/test-d/InferFromSchema.test-d.ts
index 925c7b4e5a0..6cf71e52e6a 100644
--- a/packages/liveblocks-core/test-d/InferFromSchema.test-d.ts
+++ b/packages/liveblocks-core/test-d/InferFromSchema.test-d.ts
@@ -469,7 +469,9 @@ function infer(x: T): InferFromSchema {
if (!myTool.render) {
expectType(myTool.render);
} else {
- const internal = { [kInternal]: { execute: undefined } };
+ const internal = {
+ [kInternal]: { execute: undefined, messageStatus: "generating" as const },
+ };
// Possible JSX rendering invocation 1
myTool.render({
@@ -559,7 +561,7 @@ function infer(x: T): InferFromSchema {
expectType<"receiving" | "executing" | "executed">(stage);
if (stage === "receiving") {
- expectType(partialArgs);
+ expectType(partialArgs);
expectType(args);
expectType(result);
} else if (stage === "executing") {
@@ -587,7 +589,7 @@ function infer(x: T): InferFromSchema {
expectType<"receiving" | "executing" | "executed">(stage);
if (stage === "receiving") {
- expectType(partialArgs);
+ expectType(partialArgs);
expectType(args);
expectType(result);
} else if (stage === "executing") {
diff --git a/packages/liveblocks-emails/package.json b/packages/liveblocks-emails/package.json
index c9717f5c90d..e416425343d 100644
--- a/packages/liveblocks-emails/package.json
+++ b/packages/liveblocks-emails/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/emails",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A set of functions and utilities to make sending emails based on Liveblocks notification events easy. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -35,8 +35,8 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/core": "3.3.4",
- "@liveblocks/node": "3.3.4"
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/node": "3.4.0"
},
"peerDependencies": {
"react": "^18 || ^19 || ^19.0.0-rc"
diff --git a/packages/liveblocks-node-lexical/package.json b/packages/liveblocks-node-lexical/package.json
index 552e66f3c0e..d14d928bec6 100644
--- a/packages/liveblocks-node-lexical/package.json
+++ b/packages/liveblocks-node-lexical/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/node-lexical",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A server-side utility that lets you modify lexical documents hosted in Liveblocks.",
"license": "Apache-2.0",
"type": "module",
@@ -34,8 +34,8 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/core": "3.3.4",
- "@liveblocks/node": "3.3.4",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/node": "3.4.0",
"yjs": "^13.6.18"
},
"peerDependencies": {
diff --git a/packages/liveblocks-node-prosemirror/package.json b/packages/liveblocks-node-prosemirror/package.json
index 7f8431a6c61..68f44f0fb8e 100644
--- a/packages/liveblocks-node-prosemirror/package.json
+++ b/packages/liveblocks-node-prosemirror/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/node-prosemirror",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A server-side utility that lets you modify prosemirror and tiptap documents hosted in Liveblocks.",
"license": "Apache-2.0",
"type": "module",
@@ -34,8 +34,8 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/core": "3.3.4",
- "@liveblocks/node": "3.3.4",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/node": "3.4.0",
"yjs": "^13.6.20"
},
"peerDependencies": {
diff --git a/packages/liveblocks-node/package.json b/packages/liveblocks-node/package.json
index 9f1292a245f..60396ef9f9b 100644
--- a/packages/liveblocks-node/package.json
+++ b/packages/liveblocks-node/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/node",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A server-side utility that lets you set up a Liveblocks authentication endpoint. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -34,7 +34,7 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/core": "3.3.4",
+ "@liveblocks/core": "3.4.0",
"@stablelib/base64": "^1.0.1",
"fast-sha256": "^1.3.0",
"node-fetch": "^2.6.1"
diff --git a/packages/liveblocks-react-blocknote/package.json b/packages/liveblocks-react-blocknote/package.json
index 9063d4c914a..45f0b1ab8be 100644
--- a/packages/liveblocks-react-blocknote/package.json
+++ b/packages/liveblocks-react-blocknote/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/react-blocknote",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "An integration of BlockNote + React to enable collaboration, comments, live cursors, and more with Liveblocks.",
"license": "Apache-2.0",
"type": "module",
@@ -42,12 +42,12 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
- "@liveblocks/react-tiptap": "3.3.4",
- "@liveblocks/react-ui": "3.3.4",
- "@liveblocks/yjs": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
+ "@liveblocks/react-tiptap": "3.4.0",
+ "@liveblocks/react-ui": "3.4.0",
+ "@liveblocks/yjs": "3.4.0",
"@tiptap/core": "^2.7.2",
"vitest-tsconfig-paths": "^3.4.1"
},
diff --git a/packages/liveblocks-react-lexical/package.json b/packages/liveblocks-react-lexical/package.json
index d0f5000572e..9d1f148d63b 100644
--- a/packages/liveblocks-react-lexical/package.json
+++ b/packages/liveblocks-react-lexical/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/react-lexical",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "An integration of Lexical + React to enable collaboration, comments, live cursors, and more with Liveblocks.",
"license": "Apache-2.0",
"type": "module",
@@ -43,11 +43,11 @@
},
"dependencies": {
"@floating-ui/react-dom": "^2.1.1",
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
- "@liveblocks/react-ui": "3.3.4",
- "@liveblocks/yjs": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
+ "@liveblocks/react-ui": "3.4.0",
+ "@liveblocks/yjs": "3.4.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-toggle": "^1.1.0",
"yjs": "^13.6.18"
diff --git a/packages/liveblocks-react-lexical/src/mentions/mention-component.tsx b/packages/liveblocks-react-lexical/src/mentions/mention-component.tsx
index 48a8c76a4cf..88c46970e7e 100644
--- a/packages/liveblocks-react-lexical/src/mentions/mention-component.tsx
+++ b/packages/liveblocks-react-lexical/src/mentions/mention-component.tsx
@@ -29,7 +29,7 @@ export function Mention({
{children}
diff --git a/packages/liveblocks-react-lexical/src/mentions/mention-node.tsx b/packages/liveblocks-react-lexical/src/mentions/mention-node.tsx
index 5f2da9eac6d..466ff260ee8 100644
--- a/packages/liveblocks-react-lexical/src/mentions/mention-node.tsx
+++ b/packages/liveblocks-react-lexical/src/mentions/mention-node.tsx
@@ -101,7 +101,7 @@ export class MentionNode extends DecoratorNode {
decorate(): JSX.Element {
return (
- {MENTION_CHARACTER}
+ {MENTION_CHARACTER}
);
diff --git a/packages/liveblocks-react-tiptap/package.json b/packages/liveblocks-react-tiptap/package.json
index 5a7a93710e0..95ae6de8f4a 100644
--- a/packages/liveblocks-react-tiptap/package.json
+++ b/packages/liveblocks-react-tiptap/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/react-tiptap",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "An integration of TipTap + React to enable collaboration, comments, live cursors, and more with Liveblocks.",
"license": "Apache-2.0",
"type": "module",
@@ -43,11 +43,11 @@
},
"dependencies": {
"@floating-ui/react-dom": "^2.1.2",
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
- "@liveblocks/react-ui": "3.3.4",
- "@liveblocks/yjs": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
+ "@liveblocks/react-ui": "3.4.0",
+ "@liveblocks/yjs": "3.4.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-toggle": "^1.1.0",
"@tiptap/core": "^2.7.2",
diff --git a/packages/liveblocks-react-tiptap/src/mentions/Mention.tsx b/packages/liveblocks-react-tiptap/src/mentions/Mention.tsx
index ac7c2cb3701..ddca73bcfdc 100644
--- a/packages/liveblocks-react-tiptap/src/mentions/Mention.tsx
+++ b/packages/liveblocks-react-tiptap/src/mentions/Mention.tsx
@@ -14,13 +14,13 @@ export const Mention = forwardRef<
return (
- {MENTION_CHARACTER}
+ {MENTION_CHARACTER}
);
diff --git a/packages/liveblocks-react-tiptap/src/styles/index.css b/packages/liveblocks-react-tiptap/src/styles/index.css
index 7d6e8c13a3f..bb69b25ca74 100644
--- a/packages/liveblocks-react-tiptap/src/styles/index.css
+++ b/packages/liveblocks-react-tiptap/src/styles/index.css
@@ -565,7 +565,7 @@
padding-inline: var(--lb-tiptap-ai-toolbar-padding);
color: var(--lb-foreground-tertiary);
user-select: none;
- animation: lb-animation-shimmer-small 5s linear infinite;
+ animation: lb-animation-shimmer-text 5s linear infinite;
}
.lb-tiptap-ai-toolbar-dropdown {
diff --git a/packages/liveblocks-react-ui/package.json b/packages/liveblocks-react-ui/package.json
index 91146008a06..8bc8e7dc082 100644
--- a/packages/liveblocks-react-ui/package.json
+++ b/packages/liveblocks-react-ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/react-ui",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -76,9 +76,9 @@
},
"dependencies": {
"@floating-ui/react-dom": "^2.1.2",
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
- "@liveblocks/react": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
+ "@liveblocks/react": "3.4.0",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-slot": "^1.1.0",
diff --git a/packages/liveblocks-react-ui/src/components/AiChat.tsx b/packages/liveblocks-react-ui/src/components/AiChat.tsx
index ea683fe5d50..0546c682028 100644
--- a/packages/liveblocks-react-ui/src/components/AiChat.tsx
+++ b/packages/liveblocks-react-ui/src/components/AiChat.tsx
@@ -393,6 +393,7 @@ const AiChatMessages = forwardRef(
key={message.id}
message={message}
overrides={overrides}
+ components={components}
/>
);
} else if (message.role === "assistant") {
@@ -489,9 +490,7 @@ export const AiChat = forwardRef(
{...props}
className={cn(
"lb-root lb-ai-chat",
- layout === "compact"
- ? "lb-ai-chat:layout-compact"
- : "lb-ai-chat:layout-inset",
+ `lb-ai-chat:layout-${layout}`,
className
)}
>
diff --git a/packages/liveblocks-react-ui/src/components/AiTool.tsx b/packages/liveblocks-react-ui/src/components/AiTool.tsx
index 63d053b3311..4b054fb7bdd 100644
--- a/packages/liveblocks-react-ui/src/components/AiTool.tsx
+++ b/packages/liveblocks-react-ui/src/components/AiTool.tsx
@@ -48,6 +48,11 @@ export interface AiToolProps
*/
children?: ReactNode;
+ /**
+ * The visual appearance of the tool.
+ */
+ variant?: "block" | "minimal";
+
/**
* Whether the content is currently collapsed.
* It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.
@@ -328,6 +333,7 @@ export const AiTool = Object.assign(
collapsible,
collapsed,
onCollapsedChange,
+ variant = "block",
className,
...props
},
@@ -337,8 +343,15 @@ export const AiTool = Object.assign(
stage,
result,
name,
- [kInternal]: { execute },
+ [kInternal]: { execute, messageStatus },
} = useAiToolInvocationContext();
+ // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)
+ // if it has an `execute` method and it isn't in the "executed" stage.
+ const isVisuallyPending =
+ execute !== undefined &&
+ stage !== "executed" &&
+ // If it's in the "receiving" stage, we also check that the outer message is still generating.
+ (stage === "receiving" ? messageStatus === "generating" : true);
const [semiControlledCollapsed, onSemiControlledCollapsed] =
useSemiControllableState(collapsed ?? false, onCollapsedChange);
// TODO: This check won't work for cases like:
@@ -369,7 +382,11 @@ export const AiTool = Object.assign(
return (
-
+
{icon ? (
{icon}
) : null}
@@ -388,20 +410,21 @@ export const AiTool = Object.assign(
- {stage === "executed" ? (
- result.type === "success" ? (
-
+ {variant !== "minimal" ? (
+
+ {stage === "executed" ? (
+ result.type === "success" ? (
+
+ ) : null}
{hasContent ? (
diff --git a/packages/liveblocks-react-ui/src/components/Comment.tsx b/packages/liveblocks-react-ui/src/components/Comment.tsx
index bee84645796..597a9af585e 100644
--- a/packages/liveblocks-react-ui/src/components/Comment.tsx
+++ b/packages/liveblocks-react-ui/src/components/Comment.tsx
@@ -222,11 +222,11 @@ export function CommentMention({
case "user":
return (
- {MENTION_CHARACTER}
+ {MENTION_CHARACTER}
);
diff --git a/packages/liveblocks-react-ui/src/components/Composer.tsx b/packages/liveblocks-react-ui/src/components/Composer.tsx
index 4f38bbdc8c9..2f8c9a141f5 100644
--- a/packages/liveblocks-react-ui/src/components/Composer.tsx
+++ b/packages/liveblocks-react-ui/src/components/Composer.tsx
@@ -339,8 +339,8 @@ function ComposerMention({ mention }: ComposerEditorMentionProps) {
switch (mention.kind) {
case "user":
return (
-
- {MENTION_CHARACTER}
+
+ {MENTION_CHARACTER}
);
diff --git a/packages/liveblocks-react-ui/src/components/Thread.tsx b/packages/liveblocks-react-ui/src/components/Thread.tsx
index f3788fe2cfc..c15738576c5 100644
--- a/packages/liveblocks-react-ui/src/components/Thread.tsx
+++ b/packages/liveblocks-react-ui/src/components/Thread.tsx
@@ -41,9 +41,10 @@ import type {
GlobalOverrides,
ThreadOverrides,
} from "../overrides";
+import { findLastIndex } from "@liveblocks/core";
+
import { useOverrides } from "../overrides";
import { cn } from "../utils/cn";
-import { findLastIndex } from "../utils/find-last-index";
import type { CommentProps } from "./Comment";
import { Comment } from "./Comment";
import type { ComposerProps } from "./Composer";
@@ -231,7 +232,7 @@ export const Thread = forwardRef(
const lastCommentIndex = useMemo(() => {
return showDeletedComments
? thread.comments.length - 1
- : findLastIndex(thread.comments, (comment) => comment.body);
+ : findLastIndex(thread.comments, (comment) => Boolean(comment.body));
}, [showDeletedComments, thread.comments]);
const hiddenComments = useMemo(() => {
const maxVisibleCommentsCount =
diff --git a/packages/liveblocks-react-ui/src/components/internal/AiChatAssistantMessage.tsx b/packages/liveblocks-react-ui/src/components/internal/AiChatAssistantMessage.tsx
index c9202d761fe..6b6d7af5420 100644
--- a/packages/liveblocks-react-ui/src/components/internal/AiChatAssistantMessage.tsx
+++ b/packages/liveblocks-react-ui/src/components/internal/AiChatAssistantMessage.tsx
@@ -238,7 +238,11 @@ function ReasoningPart({ part, isStreaming, components }: ReasoningPartProps) {
-
);
diff --git a/packages/liveblocks-react-ui/src/components/internal/AiChatUserMessage.tsx b/packages/liveblocks-react-ui/src/components/internal/AiChatUserMessage.tsx
index 289e7b1efc2..e84da9f64fe 100644
--- a/packages/liveblocks-react-ui/src/components/internal/AiChatUserMessage.tsx
+++ b/packages/liveblocks-react-ui/src/components/internal/AiChatUserMessage.tsx
@@ -1,17 +1,24 @@
-import type {
- AiTextPart,
- AiUserMessage,
- WithNavigation,
-} from "@liveblocks/core";
+import type { AiUserMessage, WithNavigation } from "@liveblocks/core";
import type { ComponentProps } from "react";
import { forwardRef, memo } from "react";
-import { AiMessage } from "../../_private";
+import type { GlobalComponents } from "../../components";
import { type GlobalOverrides, useOverrides } from "../../overrides";
+import * as AiMessage from "../../primitives/AiMessage";
+import type { AiMessageContentTextPartProps } from "../../primitives/AiMessage/types";
+import type { MarkdownComponents } from "../../primitives/Markdown";
import { cn } from "../../utils/cn";
+import { Prose } from "./Prose";
type UiUserMessage = WithNavigation;
+type AiChatUserMessageComponents = {
+ /**
+ * The components used to render Markdown content.
+ */
+ markdown?: Partial;
+};
+
/* -------------------------------------------------------------------------------------------------
* AiChatUserMessage
* -----------------------------------------------------------------------------------------------*/
@@ -20,23 +27,35 @@ export interface AiChatUserMessageProps extends ComponentProps<"div"> {
* The message to display.
*/
message: UiUserMessage;
+
/**
* Override the component's strings.
*/
overrides?: Partial;
+
+ /**
+ * Override the component's components.
+ */
+ components?: Partial;
}
-type PlainTextPartProps = {
- part: AiTextPart;
-};
+interface TextPartProps extends AiMessageContentTextPartProps {
+ components?: Partial;
+}
-function PlainTextPart({ part }: PlainTextPartProps) {
- return {part.text}
;
+function TextPart({ part, components }: TextPartProps) {
+ return (
+ (
- ({ message, className, overrides, ...props }, forwardedRef) => {
+ ({ message, className, overrides, components, ...props }, forwardedRef) => {
const $ = useOverrides(overrides);
return (
) : (
-
+
(
+
-
+
{title}
diff --git a/packages/liveblocks-react-ui/src/components/internal/Prose.tsx b/packages/liveblocks-react-ui/src/components/internal/Prose.tsx
index a70d1362fc0..15e3ad25fd7 100644
--- a/packages/liveblocks-react-ui/src/components/internal/Prose.tsx
+++ b/packages/liveblocks-react-ui/src/components/internal/Prose.tsx
@@ -16,6 +16,7 @@ import { CodeBlock as DefaultCodeBlock } from "./CodeBlock";
interface ProseProps extends ComponentProps<"div"> {
content: string;
+ partial?: boolean;
components?: Partial<
GlobalComponents & { markdown?: Partial
}
>;
@@ -46,6 +47,7 @@ const defaultMarkdownComponents: Partial = {
*/
export function Prose({
content,
+ partial,
components,
className,
...props
@@ -55,7 +57,8 @@ export function Prose({
[^\]]*)(?:\](?:\((?[^)]*)?)?)?$/;
+const PARTIAL_TABLE_HEADER_REGEX =
+ /^\s*\|(?:[^|\n]+(?:\|[^|\n]+)*?)?\|?\s*(?:\n\s*\|\s*[-:|\s]*\s*)?$/;
+const PARTIAL_EMOJI_REGEX =
+ /(?:\u200D|\uFE0F|\u20E3|\p{Regional_Indicator}|\p{Emoji_Presentation}|\p{Emoji_Modifier_Base}|\p{Emoji_Modifier})+$/u;
+const TRAILING_NON_WHITESPACE_REGEX = /^\S*/;
+const WHITESPACE_REGEX = /\s/;
+const NEWLINE_REGEX = /\r\n?/g;
+const BUFFERED_CHARACTERS_REGEX =
+ /(?/g;
+const AMPERSAND_REGEX = /&(?!#?[0-9A-Za-z]+;)/g;
+const DEFAULT_PARTIAL_LINK_URL = "#";
+
+type CheckboxToken = {
+ type: "checkbox";
+ checked: boolean;
+ raw: string;
+};
+
+type Token = MarkedToken | CheckboxToken;
+
+type AnyToken = Token | DefaultToken;
+
+type PotentiallyPartialToken = Relax<
+ | Tokens.Text
+ | Tokens.Paragraph
+ | Tokens.Heading
+ | Tokens.Blockquote
+ | Tokens.ListItem
+ | Tokens.TableCell
+ | Tokens.Code
+>;
+
export type MarkdownComponents = {
/**
* The component used to render paragraphs.
@@ -165,9 +208,6 @@ export type MarkdownComponents = {
*
* {items.map((item, index) => (
*
- * {item.checked !== undefined && (
- *
* ))}
@@ -300,6 +340,7 @@ export interface MarkdownComponentsCodeBlockProps {
export interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
content: string;
+ partial?: boolean;
components?: Partial;
}
@@ -384,14 +425,7 @@ const defaultComponents: MarkdownComponents = {
return (
{items.map((item, index) => (
-
- {item.checked !== undefined && (
- <>
-
+ {item.children}
))}
);
@@ -402,11 +436,15 @@ const defaultComponents: MarkdownComponents = {
};
export const Markdown = forwardRef(
- ({ content, components, asChild, ...props }, forwardedRef) => {
+ ({ content, partial, components, asChild, ...props }, forwardedRef) => {
const Component = asChild ? Slot : "div";
const tokens = useMemo(() => {
- return new Lexer().lex(content);
- }, [content]);
+ if (!content) {
+ return [];
+ }
+
+ return partial ? tokenizePartial(content) : tokenize(content);
+ }, [content, partial]);
return (
@@ -416,6 +454,7 @@ export const Markdown = forwardRef(
token={token}
key={index}
components={components}
+ partial={partial}
/>
);
})}
@@ -431,6 +470,7 @@ const MemoizedMarkdownToken = memo(
}: {
token: Token;
components?: Partial;
+ partial?: boolean;
}) => {
return | undefined;
}) {
- // Marked.js supports generic tokens, but we don't use them.
- if (!isMarkedToken(token)) {
- return null;
- }
-
switch (token.type) {
case "escape": {
return token.text;
@@ -558,12 +607,13 @@ export function MarkdownToken({
case "code": {
let language: string | undefined = undefined;
if (token.lang !== undefined) {
- language = token.lang.match(/^\S*/)?.[0] ?? undefined;
+ language =
+ token.lang.match(TRAILING_NON_WHITESPACE_REGEX)?.[0] ?? undefined;
}
const CodeBlock = components?.CodeBlock ?? defaultComponents.CodeBlock;
- return 0 ? item.loose : false
+ }
/>
),
};
@@ -603,6 +668,14 @@ export function MarkdownToken({
return
;
}
+ case "checkbox": {
+ return (
+ <>
+ | undefined;
normalizeToBlockTokens?: boolean;
}) {
- const normalizedTokens: Token[] = [];
+ assertTokens(tokens);
+
+ let normalizedTokens: Token[] = [];
if (normalizeToBlockTokens) {
+ let leadingCheckboxToken =
+ tokens[0]?.type === "checkbox" ? tokens[0] : null;
+
for (let i = 0; i < tokens.length; i++) {
const token = tokens[i]!;
switch (token.type) {
case "text": {
- // Wrap consecutive text tokens into a paragraph
- const texts: Tokens.Text[] = [token as Tokens.Text];
+ const paragraphTextTokens: Tokens.Text[] = [token];
+
+ // Wrap consecutive text tokens into a paragraph.
while (i + 1 < tokens.length && tokens[i + 1]!.type === "text") {
i++;
- texts.push(tokens[i] as Tokens.Text);
+ paragraphTextTokens.push(tokens[i] as Tokens.Text);
}
+ const paragraphRaw = paragraphTextTokens
+ .map((text) => text.raw)
+ .join("");
+ const paragraphText = paragraphTextTokens
+ .map((text) => text.text)
+ .join("");
+
+ // When wrapping loose task list items into paragraphs, we need to
+ // move the checkbox into the first paragraph.
normalizedTokens.push({
type: "paragraph",
- tokens: texts,
- raw: texts.map((text) => text.raw).join(""),
- text: texts.map((text) => text.text).join(""),
+ tokens: leadingCheckboxToken
+ ? [leadingCheckboxToken, ...paragraphTextTokens]
+ : paragraphTextTokens,
+ raw: paragraphRaw,
+ text: paragraphText,
} satisfies Tokens.Paragraph);
+ leadingCheckboxToken = null;
break;
}
+ case "checkbox":
+ break;
+
default: {
normalizedTokens.push(token);
}
}
}
+ } else {
+ normalizedTokens = tokens;
}
- return tokens.map((token, index) => (
+ return normalizedTokens.map((token, index) => (
.
+ `,
+ (root) => {
+ const links = root.querySelectorAll("a");
+
+ expect(links).toHaveLength(4);
+ expect(links[0]?.textContent).toBe("link");
+ expect(links[0]).toHaveAttribute("href", "https://www.liveblocks.io");
+ expect(links[1]?.textContent).toBe("another one");
+ expect(links[1]).toHaveAttribute("href", "/docs");
+ expect(links[2]?.textContent).toBe("https://www.liveblocks.io");
+ expect(links[2]).toHaveAttribute("href", "https://www.liveblocks.io");
+ expect(links[3]?.textContent).toBe("https://www.liveblocks.io");
+ expect(links[3]).toHaveAttribute("href", "https://www.liveblocks.io");
+ }
+ );
+ });
- expect(dels).toHaveLength(1);
- expect(dels[0]).toHaveTextContent("Strikethrough");
- },
- },
- {
- description: "inline code",
- content: dedent`
- Inline \`code\`.
+ test("nested inline elements", () => {
+ assert(
+ `
+ **Bold _italic \`code\`_**, a **bold [link](https://www.liveblocks.io)**, and [one with **bold \`code\`**](#docs "With a title").
`,
- assertions: (element) => {
- const codes = element.querySelectorAll("code");
+ (root) => {
+ const firstInlineElement = root.querySelector("strong:nth-child(1)");
- expect(codes).toHaveLength(1);
- expect(codes[0]).toHaveTextContent("code");
- },
- },
- {
- description: "links",
- content: dedent`
- A [link](https://www.liveblocks.io), [another one](/docs "With a title"),
- https://www.liveblocks.io, and .
- `,
- assertions: (element) => {
- const links = element.querySelectorAll("a");
-
- expect(links).toHaveLength(4);
- expect(links[0]).toHaveAttribute("href", "https://www.liveblocks.io");
- expect(links[1]).toHaveAttribute("href", "/docs");
- expect(links[2]).toHaveAttribute("href", "https://www.liveblocks.io");
- expect(links[3]).toHaveAttribute("href", "https://www.liveblocks.io");
- },
- },
- {
- description: "ordered lists",
- content: dedent`
- 1. A list item
- 2. Another list item
- 3. Yet another list item
- `,
- assertions: (element) => {
- const list = element.querySelector("ol");
- const listItems = list?.querySelectorAll("li");
-
- expect(list).not.toBeNull();
- expect(listItems).toHaveLength(3);
- expect(listItems?.[0]).toHaveTextContent("A list item");
- expect(listItems?.[1]).toHaveTextContent("Another list item");
- expect(listItems?.[2]).toHaveTextContent("Yet another list item");
- },
- },
- {
- description: "unordered lists",
- content: dedent`
- - A list item
- - Another list item
- - Yet another list item
+ expect(firstInlineElement?.textContent).toBe("Bold italic code");
+ expect(firstInlineElement?.querySelector("em")?.textContent).toBe(
+ "italic code"
+ );
+ expect(firstInlineElement?.querySelector("code")?.textContent).toBe(
+ "code"
+ );
- * A list item
- * Another list item
- * Yet another list item
+ const secondInlineElement = root.querySelector("strong:nth-child(2)");
- + A list item
- + Another list item
- + Yet another list item
- `,
- assertions: (element) => {
- const lists = element.querySelectorAll("ul");
+ expect(secondInlineElement?.textContent).toBe("bold link");
+ expect(secondInlineElement?.querySelector("a")?.textContent).toBe(
+ "link"
+ );
+ expect(secondInlineElement?.querySelector("a")).toHaveAttribute(
+ "href",
+ "https://www.liveblocks.io"
+ );
+
+ const thirdInlineElement = root.querySelector(
+ "a[title='With a title']"
+ );
+ expect(thirdInlineElement?.textContent).toBe("one with bold code");
+ expect(thirdInlineElement).toHaveAttribute("href", "#docs");
+ expect(thirdInlineElement?.querySelector("strong")?.textContent).toBe(
+ "bold code"
+ );
+ expect(thirdInlineElement?.querySelector("code")?.textContent).toBe(
+ "code"
+ );
+ }
+ );
- lists.forEach((list) => {
- const listItems = list.querySelectorAll("li");
+ assert(
+ `
+ ***Italic bold***, ****double bold****, and *****italic double bold*****.
+ `,
+ (root) => {
+ const elements = root.querySelectorAll("p > *");
- expect(listItems).toHaveLength(3);
- expect(listItems?.[0]).toHaveTextContent("A list item");
- expect(listItems?.[1]).toHaveTextContent("Another list item");
- expect(listItems?.[2]).toHaveTextContent("Yet another list item");
- });
- },
- },
- {
- description: "task lists",
- content: dedent`
- - [ ] A list item
- - [x] Another list item
- - [ ] Yet another list item
- `,
- assertions: (element) => {
- const list = element.querySelector("ul");
- const listItems = list?.querySelectorAll("li");
-
- expect(list).not.toBeNull();
- expect(listItems).toHaveLength(3);
- expect(listItems?.[0]).toHaveTextContent("A list item");
- expect(
- listItems?.[0]?.querySelector("input[type='checkbox']")
- ).not.toBeChecked();
- expect(listItems?.[1]).toHaveTextContent("Another list item");
- expect(
- listItems?.[1]?.querySelector("input[type='checkbox']")
- ).toBeChecked();
- expect(listItems?.[2]).toHaveTextContent("Yet another list item");
- expect(
- listItems?.[2]?.querySelector("input[type='checkbox']")
- ).not.toBeChecked();
- },
- },
- {
- description: "mixed lists",
- content: dedent`
- - A list item
- 1. A nested list item
- - Another nested list item
- - [ ] A deeply nested list item
- - Another list item
- 1. A nested list item
- 2. [x] Another nested list item
- `,
- assertions: (element) => {
- const rootList = element.querySelector(":scope > ul");
- expect(rootList).toBeInTheDocument();
-
- const rootListItems = element.querySelectorAll(":scope > ul > li");
- expect(rootListItems).toHaveLength(2);
-
- // - A list item
- // 1. A nested list item
- // - Another nested list item
- // - [ ] A deeply nested list item
- const firstNestedLists = element?.querySelectorAll(
- ":scope > ul > li:nth-child(1) > :is(ul, ol)"
- );
- expect(firstNestedLists).toHaveLength(2);
-
- // 1. A nested list item
- const firstNestedFirstList = firstNestedLists?.[0];
- expect(firstNestedFirstList?.tagName).toBe("OL");
- expect(firstNestedFirstList?.childNodes).toHaveLength(1);
- expect(firstNestedFirstList?.childNodes[0]?.textContent).toBe(
- "A nested list item"
- );
-
- // - Another nested list item
- // - [ ] A deeply nested list item
- const firstNestedSecondList = firstNestedLists?.[1];
- expect(firstNestedSecondList?.tagName).toBe("UL");
- expect(firstNestedSecondList?.childNodes).toHaveLength(1);
- expect(
- firstNestedSecondList?.childNodes[0]?.childNodes[0]
- ).toHaveTextContent("Another nested list item");
-
- // - [ ] A deeply nested list item
- const firstNestedSecondListFirstNestedList = firstNestedSecondList
- ?.childNodes[0]?.childNodes[1] as HTMLElement | null;
- expect(firstNestedSecondListFirstNestedList).toHaveTextContent(
- "A deeply nested list item"
- );
- expect(firstNestedSecondListFirstNestedList?.tagName).toBe("UL");
- expect(
- firstNestedSecondListFirstNestedList?.querySelector(
- "input[type='checkbox']"
- )
- ).not.toBeChecked();
-
- // - Another list item
- // 1. A nested list item
- // 2. [x] Another nested list item
- const secondNestedList = element?.querySelector(
- ":scope > ul > li:nth-child(2) > :is(ul, ol)"
- );
- expect(secondNestedList?.tagName).toBe("OL");
- expect(secondNestedList?.childNodes).toHaveLength(2);
- expect(secondNestedList?.childNodes[0]).toHaveTextContent(
- "A nested list item"
- );
- expect(secondNestedList?.childNodes[1]).toHaveTextContent(
- "Another nested list item"
- );
- expect(
- (
- secondNestedList?.childNodes[1] as HTMLElement | null
- )?.querySelector("input[type='checkbox']")
- ).toBeChecked();
- },
- },
- {
- description: "loose lists",
- content: dedent`
- - A list item
+ expect(elements).toHaveLength(3);
+
+ expect(elements[0]?.textContent).toBe("Italic bold");
+ expect(elements[0]?.tagName).toBe("EM");
+ expect(elements[0]?.querySelector("strong")).toBeInTheDocument();
+
+ expect(elements[1]?.textContent).toBe("double bold");
+ expect(elements[1]?.tagName).toBe("STRONG");
+ expect(elements[1]?.querySelector("strong")).toBeInTheDocument();
+
+ expect(elements[2]?.textContent).toBe("italic double bold");
+ expect(elements[2]?.tagName).toBe("EM");
+ expect(elements[2]?.querySelectorAll("strong")).toHaveLength(2);
+ }
+ );
- - Another list item with
+ assert(
+ `
+ Inline \`code without **bold**, _italic_, ~~strikethrough~~, and [a link](https://www.liveblocks.io)\`.
+ `,
+ (root) => {
+ const code = root.querySelector("code");
- multiple paragraphs.
+ expect(code?.textContent).toBe(
+ "code without **bold**, _italic_, ~~strikethrough~~, and [a link](https://www.liveblocks.io)"
+ );
+ expect(code?.querySelector("strong")).not.toBeInTheDocument();
+ expect(code?.querySelector("em")).not.toBeInTheDocument();
+ expect(code?.querySelector("del")).not.toBeInTheDocument();
+ expect(code?.querySelector("a")).not.toBeInTheDocument();
+ }
+ );
+ });
- - [x] A task list item with
+ test("ordered lists", () => {
+ assert(
+ `
+ 1. A list item
+ 2. Another list item
+ 3. Yet another list item
+ `,
+ (root) => {
+ const list = root.querySelector("ol");
+ const listItems = list?.querySelectorAll("li");
- > a quote and a code block
+ expect(list).not.toBeNull();
+ expect(listItems).toHaveLength(3);
+ expect(listItems?.[0]?.textContent).toBe("A list item");
+ expect(listItems?.[1]?.textContent).toBe("Another list item");
+ expect(listItems?.[2]?.textContent).toBe("Yet another list item");
+ }
+ );
+ // Ordered lists can have arbitrary starting indices.
+ assert(
+ `
+ 1. A numbered list item
+ - A "nested" list item
+ - Another "nested" list item
+
+ 2. Another numbered list item
+ - A "nested" list item
+ - Another "nested" list item
+
+ 3. Yet another numbered list item
+ - A "nested" list item
+ - Another "nested" list item
+
+ ---
+
+ 1. A numbered list item
+
\`\`\`
const a = 2;
\`\`\`
- `,
- assertions: (element) => {
- const list = element.querySelector("ul");
- expect(list).toBeInTheDocument();
-
- const listItems = list?.querySelectorAll("li");
- expect(listItems).toHaveLength(3);
-
- expect(listItems?.[0]).toHaveTextContent("A list item");
-
- expect(listItems?.[1]).toHaveTextContent(
- "Another list item withmultiple paragraphs."
- );
-
- expect(listItems?.[2]).toHaveTextContent("A task list item with");
- expect(
- listItems?.[2]?.querySelector("input[type='checkbox']")
- ).toBeChecked();
- expect(listItems?.[2]?.querySelector("blockquote")).toHaveTextContent(
- "a quote and a code block"
- );
- expect(listItems?.[2]?.querySelector("pre")).toHaveTextContent(
- "const a = 2;"
- );
- },
- },
- {
- description: "numbered lists with arbitrary start indices",
- content: dedent`
- 1. A numbered list item
- - A "nested" list item
- - Another "nested" list item
-
- 2. Another numbered list item
- - A "nested" list item
- - Another "nested" list item
-
- 3. Yet another numbered list item
- - A "nested" list item
- - Another "nested" list item
-
- ---
+
+ 2. Another numbered list item
+
+ > A quote.
+
+ 3. Yet another numbered list item
+
+ A paragraph.
+
+ ---
+
+ 1. A numbered list item
+ 1. Another numbered list item
+ 1. Yet another numbered list item
+ `,
+ (root) => {
+ const listItems = root.querySelectorAll("li");
+ expect(listItems).toHaveLength(15);
+
+ // 1. A numbered list item
+ // - A "nested" list item
+ // - Another "nested" list item
+ //
+ // 2. Another numbered list item
+ // - A "nested" list item
+ // - Another "nested" list item
+ //
+ // 3. Yet another numbered list item
+ // - A "nested" list item
+ // - Another "nested" list item
+ const firstListFirstItem = listItems[0]?.parentElement;
+ expect(firstListFirstItem).not.toHaveAttribute("start");
+ const firstListSecondItem = listItems[3]?.parentElement;
+ expect(firstListSecondItem).toHaveAttribute("start", "2");
+ const firstListThirdItem = listItems[6]?.parentElement;
+ expect(firstListThirdItem).toHaveAttribute("start", "3");
+
+ // 1. A numbered list item
+ //
+ // \`\`\`
+ // const a = 2;
+ // \`\`\`
+ //
+ // 2. Another numbered list item
+ //
+ // > A quote.
+ //
+ // 3. Yet another numbered list item
+ //
+ // A paragraph.
+ const secondListFirstItem = listItems[9]?.parentElement;
+ expect(secondListFirstItem).not.toHaveAttribute("start");
+ const secondListSecondItem = listItems[10]?.parentElement;
+ expect(secondListSecondItem).toHaveAttribute("start", "2");
+ const secondListThirdItem = listItems[11]?.parentElement;
+ expect(secondListThirdItem).toHaveAttribute("start", "3");
+
+ // 1. A numbered list item
+ // 1. Another numbered list item
+ // 1. Yet another numbered list item
+ const thirdList = document.querySelector("ol:last-of-type");
+ expect(listItems[12]?.parentElement).toBe(thirdList);
+ expect(listItems[13]?.parentElement).toBe(thirdList);
+ expect(listItems[14]?.parentElement).toBe(thirdList);
+ expect(thirdList).not.toHaveAttribute("start");
+ }
+ );
+ });
+
+ test("unordered lists", () => {
+ assert(
+ `
+ - A list item
+ - Another list item
+ - Yet another list item
+
+ * A list item
+ * Another list item
+ * Yet another list item
+
+ + A list item
+ + Another list item
+ + Yet another list item
+ `,
+ (root) => {
+ const lists = root.querySelectorAll("ul");
+
+ lists.forEach((list) => {
+ const listItems = list.querySelectorAll("li");
+
+ expect(listItems).toHaveLength(3);
+ expect(listItems?.[0]?.textContent).toBe("A list item");
+ expect(listItems?.[1]?.textContent).toBe("Another list item");
+ expect(listItems?.[2]?.textContent).toBe("Yet another list item");
+ });
+ }
+ );
+ });
+
+ test("task lists", () => {
+ assert(
+ `
+ - [ ] A list item
+ - [x] Another list item
+ - [ ] Yet another list item
+ `,
+ (root) => {
+ const list = root.querySelector("ul");
+ const listItems = list?.querySelectorAll("li");
+
+ expect(list).not.toBeNull();
+ expect(listItems).toHaveLength(3);
+ expect(listItems?.[0]?.textContent).toBe(" A list item");
+ expect(
+ listItems?.[0]?.querySelector("input[type='checkbox']")
+ ).not.toBeChecked();
+ expect(listItems?.[1]?.textContent).toBe(" Another list item");
+ expect(
+ listItems?.[1]?.querySelector("input[type='checkbox']")
+ ).toBeChecked();
+ expect(listItems?.[2]?.textContent).toBe(" Yet another list item");
+ expect(
+ listItems?.[2]?.querySelector("input[type='checkbox']")
+ ).not.toBeChecked();
+ }
+ );
+ });
+
+ test("mixed lists", () => {
+ assert(
+ `
+ - A list item
+ 1. A nested list item
+ - Another nested list item
+ - [ ] A deeply nested list item
+ - Another list item
+ 1. A nested list item
+ 2. [x] Another nested list item
+ `,
+ (root) => {
+ const rootList = root.querySelector(":scope > ul");
+ expect(rootList).toBeInTheDocument();
+
+ const rootListItems = root.querySelectorAll(":scope > ul > li");
+ expect(rootListItems).toHaveLength(2);
+
+ // - A list item
+ // 1. A nested list item
+ // - Another nested list item
+ // - [ ] A deeply nested list item
+ const firstNestedLists = root?.querySelectorAll(
+ ":scope > ul > li:nth-child(1) > :is(ul, ol)"
+ );
+ expect(firstNestedLists).toHaveLength(2);
+
+ // 1. A nested list item
+ const firstNestedFirstList = firstNestedLists?.[0];
+ expect(firstNestedFirstList?.tagName).toBe("OL");
+ expect(firstNestedFirstList?.childNodes).toHaveLength(1);
+ expect(firstNestedFirstList?.childNodes[0]?.textContent).toBe(
+ "A nested list item"
+ );
- 1. A numbered list item
+ // - Another nested list item
+ // - [ ] A deeply nested list item
+ const firstNestedSecondList = firstNestedLists?.[1];
+ expect(firstNestedSecondList?.tagName).toBe("UL");
+ expect(firstNestedSecondList?.childNodes).toHaveLength(1);
+ expect(
+ firstNestedSecondList?.childNodes[0]?.childNodes[0]?.textContent
+ ).toBe("Another nested list item");
+
+ // - [ ] A deeply nested list item
+ const firstNestedSecondListFirstNestedList = firstNestedSecondList
+ ?.childNodes[0]?.childNodes[1] as HTMLElement | null;
+ expect(firstNestedSecondListFirstNestedList?.textContent).toBe(
+ " A deeply nested list item"
+ );
+ expect(firstNestedSecondListFirstNestedList?.tagName).toBe("UL");
+ expect(
+ firstNestedSecondListFirstNestedList?.querySelector(
+ "input[type='checkbox']"
+ )
+ ).not.toBeChecked();
+
+ // - Another list item
+ // 1. A nested list item
+ // 2. [x] Another nested list item
+ const secondNestedList = root?.querySelector(
+ ":scope > ul > li:nth-child(2) > :is(ul, ol)"
+ );
+ expect(secondNestedList?.tagName).toBe("OL");
+ expect(secondNestedList?.childNodes).toHaveLength(2);
+ expect(secondNestedList?.childNodes[0]?.textContent).toBe(
+ "A nested list item"
+ );
+ expect(secondNestedList?.childNodes[1]?.textContent).toBe(
+ " Another nested list item"
+ );
+ expect(
+ (
+ secondNestedList?.childNodes[1] as HTMLElement | null
+ )?.querySelector("input[type='checkbox']")
+ ).toBeChecked();
+ }
+ );
+ });
+
+ test("loose lists", () => {
+ assert(
+ `
+ - A list item
+
+ - Another list item with
+
+ multiple paragraphs.
+
+ - [x] A task list item with
+
+ > a quote and a code block
+
+ \`\`\`
+ const a = 2;
+ \`\`\`
+ `,
+ (root) => {
+ const list = root.querySelector("ul");
+ expect(list).toBeInTheDocument();
+
+ const listItems = list?.querySelectorAll("li");
+ expect(listItems).toHaveLength(3);
- \`\`\`
- const a = 2;
- \`\`\`
+ expect(listItems?.[0]?.textContent).toBe("A list item");
- 2. Another numbered list item
+ expect(listItems?.[1]?.innerHTML).toEqual(
+ "Another list item with
multiple paragraphs.
"
+ );
- > A quote.
+ expect(listItems?.[2]?.textContent).toContain(
+ " A task list item with"
+ );
+ expect(
+ listItems?.[2]?.querySelector("input[type='checkbox']")
+ ).toBeChecked();
+ expect(listItems?.[2]?.querySelector("blockquote")?.textContent).toBe(
+ "a quote and a code block"
+ );
+ expect(listItems?.[2]?.querySelector("pre")?.textContent).toBe(
+ "const a = 2;"
+ );
+ }
+ );
+ });
+
+ test("blockquotes", () => {
+ assert(
+ `
+ > A blockquote.
+
+ > Another one which spans
+ >
+ > multiple paragraphs.
+
+ > Yet another which
+ >
+ > > is nested.
+ `,
+ (root) => {
+ const blockquotes = root.querySelectorAll(":scope >blockquote");
+
+ expect(blockquotes).toHaveLength(3);
+ expect(blockquotes[0]?.textContent).toBe("A blockquote.");
+
+ const blockquote1Paragraphs = blockquotes[1]?.querySelectorAll("p");
+ expect(blockquote1Paragraphs).toHaveLength(2);
+ expect(blockquote1Paragraphs?.[0]?.textContent).toBe(
+ "Another one which spans"
+ );
+ expect(blockquote1Paragraphs?.[1]?.textContent).toBe(
+ "multiple paragraphs."
+ );
- 3. Yet another numbered list item
+ expect(blockquotes[2]?.childNodes[0]?.textContent).toBe(
+ "Yet another which"
+ );
- A paragraph.
+ const blockquote2NestedBlockquote = blockquotes[2]
+ ?.childNodes[1] as HTMLElement | null;
+ expect(blockquote2NestedBlockquote?.tagName).toBe("BLOCKQUOTE");
+ expect(blockquote2NestedBlockquote?.childNodes[0]?.textContent).toBe(
+ "is nested."
+ );
+ }
+ );
+ });
- ---
+ test("code blocks", () => {
+ assert(
+ `
+ \`\`\`
+ p {
+ color: #000;
+ }
+ \`\`\`
+
+ \`\`\`javascript
+ const a = 2;
+ \`\`\`
+ `,
+ (root) => {
+ const codeBlocks = root.querySelectorAll("pre");
- 1. A numbered list item
- 1. Another numbered list item
- 1. Yet another numbered list item
- `,
- assertions: (element) => {
- const listItems = element.querySelectorAll("li");
- expect(listItems).toHaveLength(15);
-
- // 1. A numbered list item
- // - A "nested" list item
- // - Another "nested" list item
- //
- // 2. Another numbered list item
- // - A "nested" list item
- // - Another "nested" list item
- //
- // 3. Yet another numbered list item
- // - A "nested" list item
- // - Another "nested" list item
- const firstListFirstItem = listItems[0]?.parentElement;
- expect(firstListFirstItem).not.toHaveAttribute("start");
- const firstListSecondItem = listItems[3]?.parentElement;
- expect(firstListSecondItem).toHaveAttribute("start", "2");
- const firstListThirdItem = listItems[6]?.parentElement;
- expect(firstListThirdItem).toHaveAttribute("start", "3");
-
- // 1. A numbered list item
- //
- // \`\`\`
- // const a = 2;
- // \`\`\`
- //
- // 2. Another numbered list item
- //
- // > A quote.
- //
- // 3. Yet another numbered list item
- //
- // A paragraph.
- const secondListFirstItem = listItems[9]?.parentElement;
- expect(secondListFirstItem).not.toHaveAttribute("start");
- const secondListSecondItem = listItems[10]?.parentElement;
- expect(secondListSecondItem).toHaveAttribute("start", "2");
- const secondListThirdItem = listItems[11]?.parentElement;
- expect(secondListThirdItem).toHaveAttribute("start", "3");
-
- // 1. A numbered list item
- // 1. Another numbered list item
- // 1. Yet another numbered list item
- const thirdList = document.querySelector("ol:last-of-type");
- expect(listItems[12]?.parentElement).toBe(thirdList);
- expect(listItems[13]?.parentElement).toBe(thirdList);
- expect(listItems[14]?.parentElement).toBe(thirdList);
- expect(thirdList).not.toHaveAttribute("start");
- },
- },
- {
- description: "blockquotes",
- content: dedent`
- > A blockquote.
-
- > Another one which spans
- >
- > multiple paragraphs.
-
- > Yet another which
- >
- > > is nested.
- `,
- assertions: (element) => {
- const blockquotes = element.querySelectorAll(":scope >blockquote");
-
- expect(blockquotes).toHaveLength(3);
- expect(blockquotes[0]).toHaveTextContent("A blockquote.");
-
- const blockquote1Paragraphs = blockquotes[1]?.querySelectorAll("p");
- expect(blockquote1Paragraphs).toHaveLength(2);
- expect(blockquote1Paragraphs?.[0]).toHaveTextContent(
- "Another one which spans"
- );
- expect(blockquote1Paragraphs?.[1]).toHaveTextContent(
- "multiple paragraphs."
- );
-
- expect(blockquotes[2]?.childNodes[0]).toHaveTextContent(
- "Yet another which"
- );
-
- const blockquote2NestedBlockquote = blockquotes[2]
- ?.childNodes[1] as HTMLElement | null;
- expect(blockquote2NestedBlockquote?.tagName).toBe("BLOCKQUOTE");
- expect(blockquote2NestedBlockquote?.childNodes[0]).toHaveTextContent(
- "is nested."
- );
- },
- },
- {
- description: "code blocks",
- content: dedent`
- \`\`\`
- p {
- color: #000;
+ expect(codeBlocks).toHaveLength(2);
+ expect(codeBlocks[0]?.textContent).toBe("p {\n color: #000;\n}");
+ expect(codeBlocks[1]?.textContent).toBe("const a = 2;");
}
- \`\`\`
+ );
+ });
+
+ test("images", () => {
+ assert(
+ `
+ 
+ `,
+ (root) => {
+ const images = root.querySelectorAll("img");
+
+ expect(images).toHaveLength(1);
+ expect(images[0]).toHaveAttribute(
+ "src",
+ "https://www.liveblocks.io/favicon.svg"
+ );
+ }
+ );
+ });
+
+ test("tables", () => {
+ assert(
+ `
+ | A column heading | Another column heading |
+ |------------------|------------------------|
+ | A cell | Another cell |
+ | A cell | Another cell |
+ `,
+ (root) => {
+ const table = root.querySelector("table");
+ expect(table).toBeInTheDocument();
+
+ const tableHeadings = table?.querySelectorAll("th");
+ expect(tableHeadings).toHaveLength(2);
+ expect(tableHeadings?.[0]?.textContent).toBe("A column heading");
+ expect(tableHeadings?.[1]?.textContent).toBe(
+ "Another column heading"
+ );
- \`\`\`javascript
- const a = 2;
- \`\`\`
- `,
- assertions: (element) => {
- const codeBlocks = element.querySelectorAll("pre");
- expect(codeBlocks).toHaveLength(2);
+ const tableRows = table?.querySelectorAll("tbody tr");
+ expect(tableRows).toHaveLength(2);
- expect(codeBlocks[0]?.textContent).toBe("p {\n color: #000;\n}");
- expect(codeBlocks[1]?.textContent).toBe("const a = 2;");
- },
- },
- {
- description: "images",
- content: dedent`
- 
- `,
- assertions: (element) => {
- const images = element.querySelectorAll("img");
-
- expect(images).toHaveLength(1);
- expect(images[0]).toHaveAttribute(
- "src",
- "https://www.liveblocks.io/favicon.png"
- );
- },
- },
- {
- description: "tables",
- content: dedent`
- | A column heading | Another column heading |
- |------------------|------------------------|
- | A cell | Another cell |
- | A cell | Another cell |
- `,
- assertions: (element) => {
- const table = element.querySelector("table");
- expect(table).toBeInTheDocument();
-
- const tableHeadings = table?.querySelectorAll("th");
- expect(tableHeadings).toHaveLength(2);
- expect(tableHeadings?.[0]).toHaveTextContent("A column heading");
- expect(tableHeadings?.[1]).toHaveTextContent("Another column heading");
-
- const tableRows = table?.querySelectorAll("tbody tr");
- expect(tableRows).toHaveLength(2);
-
- tableRows?.forEach((row) => {
- const cells = row.querySelectorAll("td");
-
- expect(cells).toHaveLength(2);
- expect(cells?.[0]).toHaveTextContent("A cell");
- expect(cells?.[1]).toHaveTextContent("Another cell");
- });
- },
- },
- {
- description: "horizontal rules",
- content: dedent`
- ***
+ tableRows?.forEach((row) => {
+ const cells = row.querySelectorAll("td");
- ---
+ expect(cells).toHaveLength(2);
+ expect(cells?.[0]?.textContent).toBe("A cell");
+ expect(cells?.[1]?.textContent).toBe("Another cell");
+ });
+ }
+ );
- _____
- `,
- assertions: (element) => {
- const horizontalRules = element.querySelectorAll("hr");
+ assert(
+ `
+ | A column heading | Another column heading |
+ |------------------|------------------------|
+ | A cell | |
+ | | Another cell |
+ `,
+ (root) => {
+ const table = root.querySelector("table");
+ expect(table).toBeInTheDocument();
+
+ const tableHeadings = table?.querySelectorAll("th");
+ expect(tableHeadings).toHaveLength(2);
+ expect(tableHeadings?.[0]?.textContent).toBe("A column heading");
+ expect(tableHeadings?.[1]?.textContent).toBe(
+ "Another column heading"
+ );
- expect(horizontalRules).toHaveLength(3);
- },
- },
- {
- description: "escaped characters",
- content: dedent`
- \\*Not italic\\* and \\[not a link\\]\\(https://liveblocks.io\).
- `,
- assertions: (element) => {
- expect(element).toHaveTextContent(
- "*Not italic* and [not a link](https://liveblocks.io)."
- );
- },
- },
- {
- description: "HTML entities",
- content: dedent`
- <p> &
+ const tableRows = table?.querySelectorAll("tbody tr");
+ expect(tableRows).toHaveLength(2);
- > " '
+ const firstRowCells = tableRows?.[0]?.querySelectorAll("td");
+ expect(firstRowCells).toHaveLength(2);
+ expect(firstRowCells?.[0]?.textContent).toBe("A cell");
+ expect(firstRowCells?.[1]?.textContent).toBe("");
+
+ const secondRowCells = tableRows?.[1]?.querySelectorAll("td");
+ expect(secondRowCells).toHaveLength(2);
+ expect(secondRowCells?.[0]?.textContent).toBe("");
+ expect(secondRowCells?.[1]?.textContent).toBe("Another cell");
+ }
+ );
+ });
+
+ test("horizontal rules", () => {
+ assert(
+ `
+ ***
+
+ ---
+
+ _____
+ `,
+ (root) => {
+ expect(root.querySelectorAll("hr")).toHaveLength(3);
+ }
+ );
+ });
+
+ test("escaped characters", () => {
+ assert(
+ `
+ \\*Not italic\\* and \\[not a link\\]\\(https://liveblocks.io).
+ `,
+ (root) => {
+ expect(root.textContent).toBe(
+ "*Not italic* and [not a link](https://liveblocks.io)."
+ );
+ }
+ );
+ });
+
+ test("HTML entities", () => {
+ assert(
+ `
+ <p> & paste©
+
+ > " '
+
+ - © ™
+ `,
+ (root) => {
+ expect(root.querySelector("p")?.textContent).toBe(" & paste©");
+ expect(root.querySelector("blockquote")?.textContent).toBe("\" '");
+ expect(root.querySelector("li")?.textContent).toBe("© ™");
+ }
+ );
+ });
+
+ test("HTML elements as plain text", () => {
+ assert(
+ `
+ The abbreviation for HyperText Markup Language is HTML .
+
+ Press Ctrl + C to copy.
+
+ This text is highlighted .
+
+ E = mc2
+ `,
+ (root) => {
+ const paragraphs = root.querySelectorAll("p");
+ expect(paragraphs).toHaveLength(4);
+
+ expect(paragraphs[0]?.textContent).toBe(
+ 'The abbreviation for HyperText Markup Language is HTML .'
+ );
+ expect(paragraphs[1]?.textContent).toBe(
+ "Press Ctrl + C to copy."
+ );
+ expect(paragraphs[2]?.textContent).toBe(
+ "This text is highlighted ."
+ );
+ expect(paragraphs[3]?.textContent).toBe("E = mc2 ");
+ }
+ );
+ });
+ });
+
+ test("should handle different newlines", () => {
+ const content =
+ "# Heading 1\n\nA paragraph\r\r---\r\n\r\nAnother paragraph";
- - © ™
- `,
- assertions: (element) => {
- expect(element.querySelector("p")).toHaveTextContent("
&");
- expect(element.querySelector("blockquote")).toHaveTextContent("\" '");
- expect(element.querySelector("li")).toHaveTextContent("© ™");
- },
- },
- {
- description: "HTML elements (as plain text)",
- content: dedent`
- The abbreviation for HyperText Markup Language is HTML .
-
- Press Ctrl + C to copy.
-
- This is highlighted text.
-
- E = mc2
- `,
- assertions: (element) => {
- const paragraphs = element.querySelectorAll("p");
- expect(paragraphs).toHaveLength(4);
-
- expect(paragraphs[0]).toHaveTextContent(
- "The abbreviation for HyperText Markup Language is HTML."
- );
- expect(paragraphs[1]).toHaveTextContent("Press Ctrl + C to copy.");
- expect(paragraphs[2]).toHaveTextContent("This is highlighted text.");
- expect(paragraphs[3]).toHaveTextContent("E = mc2");
- },
- },
- ] satisfies {
- description: string;
- content: string;
- assertions: (element: HTMLElement) => void;
- }[])("should render $description", ({ content, assertions }) => {
const { getByTestId } = render(
{children}
,
- },
- assertions: (element) => {
- const paragraph = element.querySelector("p");
-
- expect(paragraph).toBeInTheDocument();
- expect(paragraph).toHaveTextContent("A paragraph.");
- },
- },
- {
- description: "headings",
- content: dedent`
- # Heading 1
+ test("should rerender when enabling or disabling partial content", () => {
+ const { getByTestId, rerender } = render(
+ {children} ;
- },
- },
- assertions: (element) => {
- const headings = element.querySelectorAll("h1, h2, h3, h4, h5, h6");
- expect(headings).toHaveLength(6);
-
- headings.forEach((heading, index) => {
- expect(heading).toHaveAttribute("data-heading", String(index + 1));
- expect(heading).toHaveTextContent(`Heading ${index + 1}`);
- });
- },
- },
- {
- description: "inline elements",
- content: dedent`
- This is **bold text**, _italic text_, **_bold and italic_**, ~~strikethrough~~, \`inline code\`, and **\`bold inline code\`**.
+ assert(
+ `
+ No heading
+ =
`,
- components: {
- Inline: ({ children, type }) => {
- const Inline = type;
+ (root) => {
+ expect(root.querySelector("h1")).not.toBeInTheDocument();
+ expect(root.textContent).toBe("No heading");
+ }
+ );
- return {children} ;
- },
- },
- assertions: (element) => {
- const strongs = element.querySelectorAll("strong");
- expect(strongs).toHaveLength(3);
- expect(strongs[0]).toHaveTextContent("bold text");
- expect(strongs[0]).toHaveAttribute("data-inline", "strong");
- expect(strongs[1]).toHaveTextContent("bold and italic");
- expect(strongs[1]).toHaveAttribute("data-inline", "strong");
- expect(strongs[2]).toHaveTextContent("bold inline code");
- expect(strongs[2]).toHaveAttribute("data-inline", "strong");
-
- const italics = element.querySelectorAll("em");
- expect(italics).toHaveLength(2);
- expect(italics[0]).toHaveTextContent("italic text");
- expect(italics[0]).toHaveAttribute("data-inline", "em");
- expect(italics[1]).toHaveTextContent("bold and italic");
- expect(italics[1]).toHaveAttribute("data-inline", "em");
-
- const strikethroughs = element.querySelectorAll("del");
- expect(strikethroughs).toHaveLength(1);
- expect(strikethroughs[0]).toHaveTextContent("strikethrough");
- expect(strikethroughs[0]).toHaveAttribute("data-inline", "del");
-
- const codes = element.querySelectorAll("code");
- expect(codes).toHaveLength(2);
- expect(codes[0]).toHaveTextContent("inline code");
- expect(codes[0]).toHaveAttribute("data-inline", "code");
- expect(codes[1]).toHaveTextContent("bold inline code");
- expect(codes[1]).toHaveAttribute("data-inline", "code");
- },
- },
- {
- description: "links",
- content: dedent`
- A [link](https://www.liveblocks.io), [another one](/docs "With a title"),
- https://www.liveblocks.io, and .
- `,
- components: {
- Link: ({ href, title, children }) => (
-
- {children}
-
- ),
- },
- assertions: (element) => {
- const links = element.querySelectorAll("a");
- expect(links).toHaveLength(4);
-
- expect(links[0]).toHaveAttribute("data-link");
- expect(links[0]).toHaveAttribute("href", "https://www.liveblocks.io");
- expect(links[0]).toHaveTextContent("link");
-
- expect(links[1]).toHaveAttribute("data-link");
- expect(links[1]).toHaveAttribute("href", "/docs");
- expect(links[1]).toHaveTextContent("another one");
- expect(links[1]).toHaveAttribute("title", "With a title");
-
- expect(links[2]).toHaveAttribute("data-link");
- expect(links[2]).toHaveAttribute("href", "https://www.liveblocks.io");
- expect(links[2]).toHaveTextContent("https://www.liveblocks.io");
-
- expect(links[3]).toHaveAttribute("data-link");
- expect(links[3]).toHaveAttribute("href", "https://www.liveblocks.io");
- expect(links[3]).toHaveTextContent("https://www.liveblocks.io");
- },
- },
- {
- description: "lists",
- content: dedent`
- - A list item
- 1. A list item
- 2. Another list item
- 3. Yet another list item
- - Another list item
- - [ ] A task list item
- - [x] A completed task list item
- - [x] Another completed task list item
- - Yet another list item
- 1. A list item
- * Another list item
- + [x] Yet another list item
- `,
- components: {
- List: ({ items, type, start }) => {
- const List = type === "ordered" ? "ol" : "ul";
-
- return (
-
- {items.map((item, index) => (
-
- {item.checked !== undefined && (
- <>
-
- ))}
-
- );
- },
- },
- assertions: (element) => {
- const rootList = element.querySelector(":scope > ul");
- expect(rootList).toHaveAttribute("data-list");
-
- const rootListItems = element.querySelectorAll(":scope > ul > li");
- expect(rootListItems).toHaveLength(3);
-
- expect(rootListItems[0]).toHaveTextContent("A list item");
-
- const firstNestedList = rootListItems[0]?.querySelector("ol");
- expect(firstNestedList).toHaveAttribute("data-list");
-
- const firstNestedListItems = firstNestedList?.querySelectorAll("li");
- expect(firstNestedListItems).toHaveLength(3);
-
- expect(firstNestedListItems?.[0]).toHaveTextContent("A list item");
- expect(firstNestedListItems?.[1]).toHaveTextContent(
- "Another list item"
- );
- expect(firstNestedListItems?.[2]).toHaveTextContent(
- "Yet another list item"
- );
-
- const secondRootListItem = rootListItems[1];
- expect(secondRootListItem).toHaveTextContent("Another list item");
-
- const secondNestedList = secondRootListItem?.querySelector("ul");
- expect(secondNestedList).toHaveAttribute("data-list");
-
- const secondNestedListItems = secondNestedList?.querySelectorAll("li");
- expect(secondNestedListItems).toHaveLength(3);
-
- expect(secondNestedListItems?.[0]).toHaveTextContent(
- "A task list item"
- );
- expect(
- secondNestedListItems?.[0]?.querySelector("input[type='checkbox']")
- ).not.toBeChecked();
- expect(secondNestedListItems?.[1]).toHaveTextContent(
- "A completed task list item"
- );
- expect(
- secondNestedListItems?.[1]?.querySelector("input[type='checkbox']")
- ).toBeChecked();
- expect(secondNestedListItems?.[2]).toHaveTextContent(
- "Another completed task list item"
- );
- expect(
- secondNestedListItems?.[2]?.querySelector("input[type='checkbox']")
- ).toBeChecked();
-
- const thirdRootListItem = rootListItems[2];
- expect(thirdRootListItem).toHaveTextContent("Yet another list item");
-
- const thirdNestedLists = thirdRootListItem?.querySelectorAll("ol, ul");
- expect(thirdNestedLists).toHaveLength(3);
-
- expect(thirdNestedLists?.[0]).toHaveAttribute("data-list", "ordered");
- expect(thirdNestedLists?.[0]?.querySelector("li")).toHaveTextContent(
- "A list item"
- );
-
- expect(thirdNestedLists?.[1]).toHaveAttribute("data-list", "unordered");
- expect(thirdNestedLists?.[1]?.querySelector("li")).toHaveTextContent(
- "Another list item"
- );
-
- expect(thirdNestedLists?.[2]).toHaveAttribute("data-list", "unordered");
- expect(thirdNestedLists?.[2]?.querySelector("li")).toHaveTextContent(
- "Yet another list item"
- );
- expect(
- thirdNestedLists?.[2]?.querySelector("input[type='checkbox']")
- ).toBeChecked();
- },
- },
- {
- description: "blockquotes",
- content: dedent`
- > A blockquote.
-
- > Another one which spans
- >
- > multiple paragraphs.
-
- > Yet another which
- >
- > > is nested.
- `,
- components: {
- Blockquote: ({ children }) => (
- {children}
- ),
- },
- assertions: (element) => {
- const blockquotes = element.querySelectorAll("blockquote");
- expect(blockquotes).toHaveLength(4);
-
- expect(blockquotes[0]).toHaveTextContent("A blockquote.");
- expect(blockquotes[0]).toHaveAttribute("data-blockquote");
- expect(blockquotes[1]).toHaveTextContent(
- "Another one which spansmultiple paragraphs."
- );
- expect(blockquotes[1]).toHaveAttribute("data-blockquote");
- expect(blockquotes[2]).toHaveTextContent("Yet another whichis nested.");
- expect(blockquotes[2]).toHaveAttribute("data-blockquote");
- expect(blockquotes[3]).toHaveTextContent("is nested.");
- expect(blockquotes[3]).toHaveAttribute("data-blockquote");
- },
- },
- {
- description: "code blocks",
- content: dedent`
- \`\`\`
- p {
- color: #000;
+ assert(
+ `
+ No heading
+ ==
+ `,
+ (root) => {
+ expect(root.querySelector("h1")).not.toBeInTheDocument();
+ expect(root.textContent).toBe("No heading");
}
- \`\`\`
+ );
- \`\`\`javascript
- const a = 2;
- \`\`\`
+ assert(
+ `
+ Heading 1
+ ===
`,
- components: {
- CodeBlock: ({ code, language }) => (
-
- {code}
-
- ),
- },
- assertions: (element) => {
- const codeBlocks = element.querySelectorAll("pre");
- expect(codeBlocks).toHaveLength(2);
-
- expect(codeBlocks[0]).toHaveTextContent("p { color: #000; }");
- expect(codeBlocks[0]).toHaveAttribute("data-code-block");
- expect(codeBlocks[1]).toHaveTextContent("const a = 2;");
- expect(codeBlocks[1]).toHaveAttribute("data-code-block");
- expect(codeBlocks[1]?.querySelector("code")).toHaveAttribute(
- "data-language",
- "javascript"
- );
- },
- },
- {
- description: "images",
- content: dedent`
- 
- `,
- components: {
- Image: ({ src, alt }) =>
-
-
- {headings.map((heading, index) => (
- {heading.children}
- ))}
-
-
-
- {rows.map((row, index) => (
-
- {row.map((cell, index) => (
- {cell.children}
- ))}
-
- ))}
-
-
- ),
- },
- assertions: (element) => {
- const table = element.querySelector("table");
-
- expect(table).toBeInTheDocument();
- expect(table).toHaveAttribute("data-table");
-
- const headings = table?.querySelectorAll("th");
- expect(headings).toHaveLength(3);
-
- expect(headings?.[0]).toHaveTextContent("Feature");
- expect(headings?.[1]).toHaveTextContent("Example");
- expect(headings?.[2]).toHaveTextContent("Notes");
-
- const rows = table?.querySelectorAll("tbody tr");
- expect(rows).toHaveLength(5);
-
- const firstRowCells = rows?.[0]?.querySelectorAll("td");
- expect(firstRowCells).toHaveLength(3);
-
- expect(firstRowCells?.[0]).toHaveTextContent("Link");
- expect(firstRowCells?.[1]).toHaveTextContent("Liveblocks");
- expect(firstRowCells?.[1]?.querySelector("a")).toHaveAttribute(
- "href",
- "https://liveblocks.io/"
- );
- expect(firstRowCells?.[2]).toHaveTextContent("External link");
-
- const secondRowCells = rows?.[1]?.querySelectorAll("td");
- expect(secondRowCells).toHaveLength(3);
-
- expect(secondRowCells?.[0]).toHaveTextContent("Inline code");
- expect(secondRowCells?.[1]).toHaveTextContent("const a = 2;");
- expect(secondRowCells?.[1]?.querySelector("code")).toHaveTextContent(
- "const a = 2;"
- );
- expect(secondRowCells?.[2]).toHaveTextContent("Code inside table");
-
- const thirdRowCells = rows?.[2]?.querySelectorAll("td");
- expect(thirdRowCells).toHaveLength(3);
-
- expect(thirdRowCells?.[0]).toHaveTextContent("Bold text");
- expect(thirdRowCells?.[1]).toHaveTextContent("Important");
- expect(thirdRowCells?.[1]?.querySelector("strong")).toHaveTextContent(
- "Important"
- );
- expect(thirdRowCells?.[2]).toHaveTextContent("Styling test");
-
- const fourthRowCells = rows?.[3]?.querySelectorAll("td");
- expect(fourthRowCells).toHaveLength(3);
-
- expect(fourthRowCells?.[0]).toHaveTextContent("Italic text");
- expect(fourthRowCells?.[1]).toHaveTextContent("Emphasis");
- expect(fourthRowCells?.[1]?.querySelector("em")).toHaveTextContent(
- "Emphasis"
- );
- expect(fourthRowCells?.[2]).toHaveTextContent(
- "Test italic inside tables"
- );
-
- const fifthRowCells = rows?.[4]?.querySelectorAll("td");
- expect(fifthRowCells).toHaveLength(3);
-
- expect(fifthRowCells?.[0]).toHaveTextContent("Strikethrough");
- expect(fifthRowCells?.[1]).toHaveTextContent("Deprecated");
- expect(fifthRowCells?.[1]?.querySelector("del")).toHaveTextContent(
- "Deprecated"
- );
- expect(fifthRowCells?.[2]).toHaveTextContent("Show removal");
- },
- },
- {
- description: "separators",
- content: dedent`
- ***
+ (root) => {
+ expect(root.querySelector("h1")?.textContent).toBe("Heading 1");
+ }
+ );
- ---
+ assert(
+ `
+ No heading
+ -
+ `,
+ (root) => {
+ expect(root.querySelector("h2")).not.toBeInTheDocument();
+ expect(root.textContent).toBe("No heading");
+ }
+ );
- _____
- `,
- components: {
- Separator: () => ;
- assertions: (element: HTMLElement) => void;
- }[])(
- "should support overriding $description",
- ({ content, components, assertions }) => {
- const { getByTestId } = render(
- HT
+ `,
+ (root) => {
+ expect(root?.textContent).toBe(
+ 'The abbreviation for HyperText Markup Language is HT'
+ );
+ }
+ );
+
+ assert(
+ `
+ The abbreviation for HyperText Markup Language is HTML .
+ `,
+ (root) => {
+ expect(root?.textContent).toBe(
+ 'The abbreviation for HyperText Markup Language is HTML .'
+ );
+ }
+ );
+ });
+
+ test("emojis", () => {
+ assert(
+ `
+ An emoji 👋
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("An emoji ");
+ }
+ );
+
+ assert(
+ `
+ A skin tone sequence emoji 👋🏽
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("A skin tone sequence emoji ");
+ }
+ );
+
+ assert(
+ `
+ A partial sequence emoji 👋\u200D
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("A partial sequence emoji ");
+ }
+ );
+
+ assert(
+ `
+ An umbrella as a pictographic ☂
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("An umbrella as a pictographic ☂");
+ }
+ );
+
+ assert(
+ `
+ An umbrella as an emoji ☂️
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("An umbrella as an emoji ");
+ }
+ );
+
+ assert(
+ `
+ A partial flag emoji 🇺
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("A partial flag emoji ");
+ }
+ );
+
+ assert(
+ `
+ A flag emoji 🇺🇳
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("A flag emoji ");
+ }
+ );
+
+ assert(
+ `
+ A keycap sequence emoji 1️⃣
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("A keycap sequence emoji ");
+ }
+ );
+
+ assert(
+ `
+ An emoji 👋 and some text
+ `,
+ (root) => {
+ expect(root?.textContent).toBe("An emoji 👋 and some text");
+ }
+ );
+ });
+ });
+
+ describe("should support custom…", () => {
+ function assert(
+ content: string,
+ components: Partial,
+ assertions: (root: HTMLElement) => void
+ ) {
+ const { getByTestId, unmount } = render(
+ {children}
,
+ },
+ (root) => {
+ const paragraph = root.querySelector("p");
+
+ expect(paragraph?.textContent).toBe("A paragraph");
+ expect(paragraph).toHaveAttribute("data-paragraph");
+ }
+ );
+ });
+
+ test("headings", () => {
+ assert(
+ `
+ # Heading 1
+
+ ## Heading 2
+
+ ### Heading 3
+
+ #### Heading 4
+
+ ##### Heading 5
+
+ ###### Heading 6
+ `,
+ {
+ Heading: ({ children, level }) => {
+ const Heading = `h${level}` as const;
+
+ return {children} ;
+ },
+ },
+ (root) => {
+ const headings = root.querySelectorAll("h1, h2, h3, h4, h5, h6");
+ expect(headings).toHaveLength(6);
+
+ headings.forEach((heading, index) => {
+ expect(heading).toHaveAttribute("data-heading", String(index + 1));
+ expect(heading.textContent).toBe(`Heading ${index + 1}`);
+ });
+ }
+ );
+ });
+
+ test("inline elements", () => {
+ assert(
+ `
+ **Bold text**, _italic text_, **_bold and italic_**, ~~strikethrough~~, \`inline code\`, and **\`bold inline code\`**.
+ `,
+ {
+ Inline: ({ children, type }) => {
+ const Inline = type;
+
+ return {children} ;
+ },
+ },
+ (root) => {
+ const strongs = root.querySelectorAll("strong");
+ expect(strongs).toHaveLength(3);
+ expect(strongs[0]?.textContent).toBe("Bold text");
+ expect(strongs[0]).toHaveAttribute("data-inline", "strong");
+ expect(strongs[1]?.textContent).toBe("bold and italic");
+ expect(strongs[1]).toHaveAttribute("data-inline", "strong");
+ expect(strongs[2]?.textContent).toBe("bold inline code");
+ expect(strongs[2]).toHaveAttribute("data-inline", "strong");
+
+ const italics = root.querySelectorAll("em");
+ expect(italics).toHaveLength(2);
+ expect(italics[0]?.textContent).toBe("italic text");
+ expect(italics[0]).toHaveAttribute("data-inline", "em");
+ expect(italics[1]?.textContent).toBe("bold and italic");
+ expect(italics[1]).toHaveAttribute("data-inline", "em");
+
+ const strikethroughs = root.querySelectorAll("del");
+ expect(strikethroughs).toHaveLength(1);
+ expect(strikethroughs[0]?.textContent).toBe("strikethrough");
+ expect(strikethroughs[0]).toHaveAttribute("data-inline", "del");
+
+ const codes = root.querySelectorAll("code");
+ expect(codes).toHaveLength(2);
+ expect(codes[0]?.textContent).toBe("inline code");
+ expect(codes[0]).toHaveAttribute("data-inline", "code");
+ expect(codes[1]?.textContent).toBe("bold inline code");
+ expect(codes[1]).toHaveAttribute("data-inline", "code");
+ }
+ );
+ });
+
+ test("links", () => {
+ assert(
+ `
+ A [link](https://www.liveblocks.io), [another one](/docs "With a title"),
+ https://www.liveblocks.io, and .
+ `,
+ {
+ Link: ({ href, title, children }) => (
+
+ {children}
+
+ ),
+ },
+ (root) => {
+ const links = root.querySelectorAll("a");
+ expect(links).toHaveLength(4);
+
+ expect(links[0]).toHaveAttribute("data-link");
+ expect(links[0]).toHaveAttribute("href", "https://www.liveblocks.io");
+ expect(links[0]?.textContent).toBe("link");
+
+ expect(links[1]).toHaveAttribute("data-link");
+ expect(links[1]).toHaveAttribute("href", "/docs");
+ expect(links[1]).toHaveAttribute("title", "With a title");
+ expect(links[1]?.textContent).toBe("another one");
+
+ expect(links[2]).toHaveAttribute("data-link");
+ expect(links[2]).toHaveAttribute("href", "https://www.liveblocks.io");
+ expect(links[2]?.textContent).toBe("https://www.liveblocks.io");
+
+ expect(links[3]).toHaveAttribute("data-link");
+ expect(links[3]).toHaveAttribute("href", "https://www.liveblocks.io");
+ expect(links[3]?.textContent).toBe("https://www.liveblocks.io");
+ }
+ );
+ });
+
+ test("lists", () => {
+ assert(
+ `
+ - A list item
+ 1. A list item
+ 2. Another list item
+ 3. Yet another list item
+ - Another list item
+ - [ ] A task list item
+ - [x] A completed task list item
+ - [x] Another completed task list item
+ - Yet another list item
+ 1. A list item
+ * Another list item
+ + [x] Yet another list item
+ `,
+ {
+ List: ({ items, type, start }) => {
+ const List = type === "ordered" ? "ol" : "ul";
+
+ return (
+
+ {items.map((item, index) => (
+ {item.children}
+ ))}
+
+ );
+ },
+ },
+ (root) => {
+ const rootList = root.querySelector(":scope > ul");
+ expect(rootList).toHaveAttribute("data-list");
+
+ const rootListItems = root.querySelectorAll(":scope > ul > li");
+ expect(rootListItems).toHaveLength(3);
+
+ expect(rootListItems[0]?.textContent).toContain("A list item");
+
+ const firstNestedList = rootListItems[0]?.querySelector("ol");
+ expect(firstNestedList).toHaveAttribute("data-list");
+
+ const firstNestedListItems = firstNestedList?.querySelectorAll("li");
+ expect(firstNestedListItems).toHaveLength(3);
+
+ expect(firstNestedListItems?.[0]?.textContent).toBe("A list item");
+ expect(firstNestedListItems?.[1]?.textContent).toBe(
+ "Another list item"
+ );
+ expect(firstNestedListItems?.[2]?.textContent).toBe(
+ "Yet another list item"
+ );
+
+ const secondRootListItem = rootListItems[1];
+ expect(secondRootListItem?.textContent).toContain(
+ "Another list item"
+ );
+
+ const secondNestedList = secondRootListItem?.querySelector("ul");
+ expect(secondNestedList).toHaveAttribute("data-list");
+
+ const secondNestedListItems =
+ secondNestedList?.querySelectorAll("li");
+ expect(secondNestedListItems).toHaveLength(3);
+
+ expect(secondNestedListItems?.[0]?.textContent).toBe(
+ " A task list item"
+ );
+ expect(
+ secondNestedListItems?.[0]?.querySelector("input[type='checkbox']")
+ ).not.toBeChecked();
+ expect(secondNestedListItems?.[1]?.textContent).toBe(
+ " A completed task list item"
+ );
+ expect(
+ secondNestedListItems?.[1]?.querySelector("input[type='checkbox']")
+ ).toBeChecked();
+ expect(secondNestedListItems?.[2]?.textContent).toBe(
+ " Another completed task list item"
+ );
+ expect(
+ secondNestedListItems?.[2]?.querySelector("input[type='checkbox']")
+ ).toBeChecked();
+
+ const thirdRootListItem = rootListItems[2];
+ expect(thirdRootListItem?.textContent).toContain(
+ "Yet another list item"
+ );
+
+ const thirdNestedLists =
+ thirdRootListItem?.querySelectorAll("ol, ul");
+ expect(thirdNestedLists).toHaveLength(3);
+
+ expect(thirdNestedLists?.[0]).toHaveAttribute("data-list", "ordered");
+ expect(thirdNestedLists?.[0]?.querySelector("li")?.textContent).toBe(
+ "A list item"
+ );
+
+ expect(thirdNestedLists?.[1]).toHaveAttribute(
+ "data-list",
+ "unordered"
+ );
+ expect(thirdNestedLists?.[1]?.querySelector("li")?.textContent).toBe(
+ "Another list item"
+ );
+
+ expect(thirdNestedLists?.[2]).toHaveAttribute(
+ "data-list",
+ "unordered"
+ );
+ expect(thirdNestedLists?.[2]?.querySelector("li")?.textContent).toBe(
+ " Yet another list item"
+ );
+ expect(
+ thirdNestedLists?.[2]?.querySelector("input[type='checkbox']")
+ ).toBeChecked();
+ }
+ );
+ });
+
+ test("blockquotes", () => {
+ assert(
+ `
+ > A blockquote.
+
+ > Another one which spans
+ >
+ > multiple paragraphs.
+
+ > Yet another which
+ >
+ > > is nested.
+ `,
+ {
+ Blockquote: ({ children }) => (
+ {children}
+ ),
+ },
+ (root) => {
+ const blockquotes = root.querySelectorAll("blockquote");
+ expect(blockquotes).toHaveLength(4);
+
+ expect(blockquotes[0]?.textContent).toBe("A blockquote.");
+ expect(blockquotes[0]).toHaveAttribute("data-blockquote");
+ expect(blockquotes[1]?.innerHTML).toEqual(
+ "Another one which spans
multiple paragraphs.
"
+ );
+ expect(blockquotes[1]).toHaveAttribute("data-blockquote");
+ expect((blockquotes[2]?.firstChild as HTMLElement).tagName).toEqual(
+ "P"
+ );
+ expect((blockquotes[2]?.firstChild as HTMLElement).innerHTML).toEqual(
+ "Yet another which"
+ );
+ expect(blockquotes[2]).toHaveAttribute("data-blockquote");
+ expect(blockquotes[3]?.innerHTML).toEqual("is nested.
");
+ expect(blockquotes[3]).toHaveAttribute("data-blockquote");
+ }
+ );
+ });
+
+ test("code blocks", () => {
+ assert(
+ `
+ \`\`\`
+ p {
+ color: #000;
+ }
+ \`\`\`
+
+ \`\`\`javascript
+ const a = 2;
+ \`\`\`
+ `,
+ {
+ CodeBlock: ({ code, language }) => (
+
+ {code}
+
+ ),
+ },
+ (root) => {
+ const codeBlocks = root.querySelectorAll("pre");
+ expect(codeBlocks).toHaveLength(2);
+
+ expect(codeBlocks[0]?.textContent).toBe("p {\n color: #000;\n}");
+ expect(codeBlocks[0]).toHaveAttribute("data-code-block");
+ expect(codeBlocks[1]?.textContent).toBe("const a = 2;");
+ expect(codeBlocks[1]).toHaveAttribute("data-code-block");
+ expect(codeBlocks[1]?.querySelector("code")).toHaveAttribute(
+ "data-language",
+ "javascript"
+ );
+ }
+ );
+ });
+
+ test("images", () => {
+ assert(
+ `
+ 
+ `,
+ {
+ Image: ({ src, alt }) =>
+
+
+ {headings.map((heading, index) => (
+ {heading.children}
+ ))}
+
+
+
+ {rows.map((row, index) => (
+
+ {row.map((cell, index) => (
+ {cell.children}
+ ))}
+
+ ))}
+
+
+ ),
+ },
+ (root) => {
+ const table = root.querySelector("table");
+
+ expect(table).toHaveAttribute("data-table");
+
+ const headings = table?.querySelectorAll("th");
+ expect(headings).toHaveLength(3);
+
+ expect(headings?.[0]?.textContent).toBe("Feature");
+ expect(headings?.[1]?.textContent).toBe("Example");
+ expect(headings?.[2]?.textContent).toBe("Notes");
+
+ const rows = table?.querySelectorAll("tbody tr");
+ expect(rows).toHaveLength(5);
+
+ const firstRowCells = rows?.[0]?.querySelectorAll("td");
+ expect(firstRowCells).toHaveLength(3);
+
+ expect(firstRowCells?.[0]?.textContent).toBe("Link");
+ expect(firstRowCells?.[1]?.textContent).toBe("Liveblocks");
+ expect(firstRowCells?.[1]?.querySelector("a")).toHaveAttribute(
+ "href",
+ "https://liveblocks.io/"
+ );
+ expect(firstRowCells?.[2]?.textContent).toBe("External link");
+
+ const secondRowCells = rows?.[1]?.querySelectorAll("td");
+ expect(secondRowCells).toHaveLength(3);
+
+ expect(secondRowCells?.[0]?.textContent).toBe("Inline code");
+ expect(secondRowCells?.[1]?.textContent).toBe("const a = 2;");
+ expect(secondRowCells?.[1]?.querySelector("code")?.textContent).toBe(
+ "const a = 2;"
+ );
+ expect(secondRowCells?.[2]?.textContent).toBe("Code inside table");
+
+ const thirdRowCells = rows?.[2]?.querySelectorAll("td");
+ expect(thirdRowCells).toHaveLength(3);
+
+ expect(thirdRowCells?.[0]?.textContent).toBe("Bold text");
+ expect(thirdRowCells?.[1]?.textContent).toBe("Important");
+ expect(thirdRowCells?.[1]?.querySelector("strong")?.textContent).toBe(
+ "Important"
+ );
+ expect(thirdRowCells?.[2]?.textContent).toBe("Styling test");
+
+ const fourthRowCells = rows?.[3]?.querySelectorAll("td");
+ expect(fourthRowCells).toHaveLength(3);
+
+ expect(fourthRowCells?.[0]?.textContent).toBe("Italic text");
+ expect(fourthRowCells?.[1]?.textContent).toBe("Emphasis");
+ expect(fourthRowCells?.[1]?.querySelector("em")?.textContent).toBe(
+ "Emphasis"
+ );
+ expect(fourthRowCells?.[2]?.textContent).toBe(
+ "Test italic inside tables"
+ );
+
+ const fifthRowCells = rows?.[4]?.querySelectorAll("td");
+ expect(fifthRowCells).toHaveLength(3);
+
+ expect(fifthRowCells?.[0]?.textContent).toBe("Strikethrough");
+ expect(fifthRowCells?.[1]?.textContent).toBe("Deprecated");
+ expect(fifthRowCells?.[1]?.querySelector("del")?.textContent).toBe(
+ "Deprecated"
+ );
+ expect(fifthRowCells?.[2]?.textContent).toBe("Show removal");
+ }
+ );
+ });
+
+ test("separators", () => {
+ assert(
+ `
+ ***
+
+ ----
+
+ _____
+ `,
+ {
+ Separator: () => (
- array: T[],
- predicate: (member: T) => unknown
-) {
- let index = array.length - 1;
-
- while (index >= 0) {
- const element = array[index];
-
- if (element && predicate(element)) {
- return index;
- }
-
- index--;
- }
-
- return -1;
-}
diff --git a/packages/liveblocks-react/package.json b/packages/liveblocks-react/package.json
index 27695db5c45..2da8d337431 100644
--- a/packages/liveblocks-react/package.json
+++ b/packages/liveblocks-react/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/react",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A set of React hooks and providers to use Liveblocks declaratively. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -61,8 +61,8 @@
"showdeps": "depcruise src --include-only '^src' --exclude='__tests__' --output-type dot | dot -T svg > /tmp/dependency-graph.svg && open /tmp/dependency-graph.svg"
},
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0"
},
"peerDependencies": {
"@types/react": "*",
diff --git a/packages/liveblocks-react/src/__tests__/useInitial.test.tsx b/packages/liveblocks-react/src/__tests__/useInitial.test.tsx
new file mode 100644
index 00000000000..49df1c7036a
--- /dev/null
+++ b/packages/liveblocks-react/src/__tests__/useInitial.test.tsx
@@ -0,0 +1,256 @@
+import { renderHook } from "@testing-library/react";
+
+import { useInitial, useInitialUnlessFunction } from "../lib/use-initial";
+
+describe("useInitial", () => {
+ test("freezes initial object and maintains reference equality", () => {
+ const { result, rerender } = renderHook((props) => useInitial(props), {
+ initialProps: { count: 0 },
+ });
+
+ const firstResult = result.current;
+ expect(firstResult).toEqual({ count: 0 });
+
+ // Change the value and re-render
+ rerender({ count: 1 });
+
+ const secondResult = result.current;
+ expect(secondResult).toEqual({ count: 0 }); // Still the original value
+ expect(secondResult).toBe(firstResult); // Same reference
+ });
+
+ test("freezes initial primitive value across re-renders", () => {
+ const { result, rerender } = renderHook(({ count }) => useInitial(count), {
+ initialProps: { count: 0 },
+ });
+
+ const firstResult = result.current;
+ expect(firstResult).toEqual(0);
+
+ // Change the value and re-render
+ rerender({ count: 1 });
+
+ const secondResult = result.current;
+ expect(secondResult).toEqual(0); // Still the original value
+ expect(secondResult).toBe(firstResult); // Same reference
+ });
+
+ test("freezes initial function and ignores updates", () => {
+ const fn1 = jest.fn((a: number, b: string) => `${a}-${b}`);
+ const fn2 = jest.fn((a: number, b: string) => `${b}-${a}`);
+
+ const { result, rerender } = renderHook((fn) => useInitial(fn), {
+ initialProps: fn1,
+ });
+
+ const frozenFn = result.current;
+
+ // Call the frozen function
+ const result1 = frozenFn(42, "test");
+ expect(result1).toBe("42-test");
+ expect(fn1).toHaveBeenCalledWith(42, "test");
+
+ // Update with new function - but useInitial keeps the original
+ rerender(fn2);
+
+ expect(result.current).toBe(frozenFn); // Same frozen reference
+ expect(fn2).not.toHaveBeenCalled(); // New function never called
+
+ // Calling it still uses the original frozen function
+ const result2 = result.current(99, "hello");
+ expect(result2).toBe("99-hello");
+ expect(fn1).toHaveBeenCalledWith(99, "hello");
+ expect(fn2).not.toHaveBeenCalled(); // Still never called
+ });
+
+ test("re-evaluates when roomId changes", () => {
+ const { result, rerender } = renderHook(
+ ({ count, roomId }) => useInitial(count, roomId),
+ { initialProps: { count: 7, roomId: "room1" } }
+ );
+
+ expect(result.current).toEqual(7);
+
+ // Change value but keep same roomId - should stay frozen
+ rerender({ count: 13, roomId: "room1" });
+ expect(result.current).toBe(7); // Same value
+
+ // Change roomId - should re-evaluate with new value
+ rerender({ count: 42, roomId: "room2" });
+ expect(result.current).toEqual(42); // Count updated because roomId changed
+ });
+
+ test("re-evaluates functions when roomId changes", () => {
+ const fn1 = jest.fn(() => "result1");
+ const fn2 = jest.fn(() => "result2");
+ const fn3 = jest.fn(() => "result3");
+
+ const { result, rerender } = renderHook(
+ ({ fn, roomId }) => useInitial(fn, roomId),
+ { initialProps: { fn: fn1, roomId: "room1" } }
+ );
+
+ const frozenFn1 = result.current;
+ expect(frozenFn1()).toBe("result1");
+ expect(fn1).toHaveBeenCalledTimes(1);
+
+ // Change function but keep same roomId - should stay frozen to original
+ rerender({ fn: fn2, roomId: "room1" });
+ expect(result.current).toBe(frozenFn1); // Same reference
+ expect(result.current()).toBe("result1"); // Still original function
+ expect(fn2).not.toHaveBeenCalled();
+
+ // Change roomId - should re-evaluate with new function
+ rerender({ fn: fn3, roomId: "room2" });
+ const frozenFn2 = result.current;
+ expect(frozenFn2).not.toBe(frozenFn1); // Different reference
+ expect(frozenFn2()).toBe("result3"); // New function
+ expect(fn3).toHaveBeenCalledTimes(1);
+ expect(fn2).not.toHaveBeenCalled(); // fn2 was never frozen
+ });
+});
+
+describe("useInitialUnlessFunction", () => {
+ test("freezes non-function values like useInitial", () => {
+ const { result, rerender } = renderHook(
+ (props) => useInitialUnlessFunction(props),
+ { initialProps: { count: 0 } }
+ );
+
+ const firstResult = result.current;
+ expect(firstResult).toEqual({ count: 0 });
+
+ rerender({ count: 1 });
+
+ expect(result.current).toBe(firstResult); // Same reference
+ });
+
+ test("creates stable wrapper that calls latest function", () => {
+ const fn1 = jest.fn(() => "result1");
+ const fn2 = jest.fn(() => "result2");
+
+ const { result, rerender } = renderHook(
+ ({ fn }) => useInitialUnlessFunction(fn),
+ { initialProps: { fn: fn1 } }
+ );
+
+ const wrappedFn = result.current;
+ expect(typeof wrappedFn).toBe("function");
+
+ // Call the wrapped function
+ const result1 = wrappedFn();
+ expect(result1).toBe("result1");
+ expect(fn1).toHaveBeenCalledTimes(1);
+
+ // Update with new function - wrapper should stay the same
+ rerender({ fn: fn2 });
+
+ expect(result.current).toBe(wrappedFn); // Same wrapper reference
+
+ // But calling it should use the latest function
+ const result2 = result.current();
+ expect(result2).toBe("result2");
+ expect(fn2).toHaveBeenCalledTimes(1);
+ expect(fn1).toHaveBeenCalledTimes(1); // Not called again
+ });
+
+ test("passes arguments through stable wrapper to latest function", () => {
+ const fn1 = jest.fn((a: number, b: string) => `${a}-${b}`);
+ const fn2 = jest.fn((a: number, b: string) => `${b}-${a}`);
+
+ const { result, rerender } = renderHook(
+ ({ fn }) => useInitialUnlessFunction(fn),
+ { initialProps: { fn: fn1 } }
+ );
+
+ const wrappedFn = result.current;
+
+ // Call with arguments
+ const result1 = wrappedFn(42, "test");
+ expect(result1).toBe("42-test");
+ expect(fn1).toHaveBeenCalledWith(42, "test");
+
+ // Update function and call again
+ rerender({ fn: fn2 });
+ const result2 = result.current(99, "hello");
+ expect(result2).toBe("hello-99");
+ expect(fn2).toHaveBeenCalledWith(99, "hello");
+ });
+
+ test("maintains stable wrapper despite roomId changes", () => {
+ const fn1 = jest.fn(() => "fn1");
+ const fn2 = jest.fn(() => "fn2");
+ const fn3 = jest.fn(() => "fn3");
+
+ const { result, rerender } = renderHook(
+ ({ fn, roomId }) => useInitialUnlessFunction(fn, roomId),
+ { initialProps: { fn: fn1, roomId: "room1" } }
+ );
+
+ const wrapper1 = result.current;
+ expect(wrapper1()).toBe("fn1");
+
+ // Change function but keep same roomId - should use same wrapper
+ rerender({ fn: fn2, roomId: "room1" });
+ expect(result.current).toBe(wrapper1); // Same wrapper
+ expect(result.current()).toBe("fn2"); // But calls latest function
+
+ // Change roomId - the useCallback should re-evaluate with new roomId dependency
+ // but since roomId isn't actually used in the useCallback dependency array,
+ // the wrapper reference stays the same (which is the current behavior)
+ rerender({ fn: fn3, roomId: "room2" });
+ const wrapper2 = result.current;
+ // The implementation currently doesn't create a new wrapper when roomId changes
+ // for function values because roomId isn't in the useCallback deps
+ expect(wrapper2()).toBe("fn3"); // Should still call the latest function
+ });
+
+ test("handles type changes from function to non-function when roomId changes", () => {
+ const fn = jest.fn(() => "function result");
+ const nonFunction = "string value";
+
+ const { result, rerender } = renderHook(
+ ({ value, roomId }) => useInitialUnlessFunction(value, roomId),
+ { initialProps: { value: fn as unknown, roomId: "room1" } }
+ );
+
+ // Initially a function - should get a wrapper
+ const wrapper = result.current;
+ expect(typeof wrapper).toBe("function");
+ // @ts-expect-error wrapper is a function at this point
+ expect(wrapper()).toBe("function result");
+
+ // Change to non-function with same roomId - should keep wrapper
+ rerender({ value: nonFunction, roomId: "room1" });
+ expect(result.current).toBe(wrapper); // Same wrapper reference
+
+ // Change roomId with non-function - should get the non-function value directly
+ rerender({ value: nonFunction, roomId: "room2" });
+ expect(result.current).toBe("string value"); // Direct non-function value
+ expect(typeof result.current).toBe("string");
+ });
+
+ test("handles type changes from non-function to function when roomId changes", () => {
+ const nonFunction = "string value";
+ const fn = jest.fn(() => "function result");
+
+ const { result, rerender } = renderHook(
+ ({ value, roomId }) => useInitialUnlessFunction(value, roomId),
+ { initialProps: { value: nonFunction as unknown, roomId: "room1" } }
+ );
+
+ // Initially a non-function - should get the value directly
+ expect(result.current).toBe("string value");
+ expect(typeof result.current).toBe("string");
+
+ // Change to function with same roomId - should keep non-function
+ rerender({ value: fn, roomId: "room1" });
+ expect(result.current).toBe("string value"); // Still the original frozen value
+
+ // Change roomId with function - should get a function wrapper
+ rerender({ value: fn, roomId: "room2" });
+ expect(typeof result.current).toBe("function");
+ // @ts-expect-error result.current is a function at this point
+ expect(result.current()).toBe("function result");
+ });
+});
diff --git a/packages/liveblocks-react/src/lib/use-initial.ts b/packages/liveblocks-react/src/lib/use-initial.ts
index 179bce226cc..fcb4214e2b8 100644
--- a/packages/liveblocks-react/src/lib/use-initial.ts
+++ b/packages/liveblocks-react/src/lib/use-initial.ts
@@ -1,19 +1,16 @@
-import type { Reducer } from "react";
-import { useCallback, useReducer } from "react";
+import { useCallback, useMemo } from "react";
import { useLatest } from "./use-latest";
-const noop = (state: T) => state;
-
/**
* "Freezes" a given value, so that it will return the same value/instance on
* each subsequent render. This can be used to freeze "initial" values for
* custom hooks, much like how `useState(initialState)` or
* `useRef(initialValue)` works.
*/
-export function useInitial(value: T): T {
- // Equivalent to useState(() => value)[0], but slightly more low-level
- return useReducer>(noop, value)[0];
+export function useInitial(value: T, roomId?: string): T {
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ return useMemo(() => value, [roomId]);
}
/**
@@ -22,23 +19,24 @@ export function useInitial(value: T): T {
* re-renders, but one which will always call the _latest_ provided callback
* instance.
*/
-export function useInitialUnlessFunction(latestValue: T): T {
- const frozenValue = useInitial(latestValue);
+export function useInitialUnlessFunction(
+ latestValue: T,
+ roomId?: string
+): T {
+ const frozenValue = useInitial(latestValue, roomId);
+
+ type Fn = T & ((...args: unknown[]) => unknown);
+ const ref = useLatest(latestValue as Fn);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const wrapper = useCallback(
+ ((...args: unknown[]) => ref.current(...args)) as Fn,
+ [ref]
+ );
- // Normally the Rules of Hooks™ dictate that you should not call hooks
- // conditionally. In this case, we're good here, because the same code path
- // will always be taken on every subsequent render here, because we've frozen
- // the value.
- /* eslint-disable react-hooks/rules-of-hooks */
+ // Return the wrapper only if the frozen value is a function
if (typeof frozenValue === "function") {
- type Fn = T & ((...args: unknown[]) => unknown);
- const ref = useLatest(latestValue as Fn);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- return useCallback(((...args: unknown[]) => ref.current(...args)) as Fn, [
- ref,
- ]);
+ return wrapper;
} else {
return frozenValue;
}
- /* eslint-enable react-hooks/rules-of-hooks */
}
diff --git a/packages/liveblocks-react/src/room.tsx b/packages/liveblocks-react/src/room.tsx
index 7292b3cac75..dd7cb5284b8 100644
--- a/packages/liveblocks-react/src/room.tsx
+++ b/packages/liveblocks-react/src/room.tsx
@@ -597,12 +597,15 @@ function RoomProviderInner<
}
// Note: We'll hold on to the initial value given here, and ignore any
- // changes to this argument in subsequent renders
- const frozenProps = useInitial({
- initialPresence: props.initialPresence,
- initialStorage: props.initialStorage,
- autoConnect: props.autoConnect ?? typeof window !== "undefined",
- }) as EnterOptions;
+ // changes to this argument in subsequent renders, except when roomId changes
+ const frozenProps = useInitial(
+ {
+ initialPresence: props.initialPresence,
+ initialStorage: props.initialStorage,
+ autoConnect: props.autoConnect ?? typeof window !== "undefined",
+ },
+ roomId
+ ) as EnterOptions;
const [{ room }, setRoomLeavePair] = useState(() =>
stableEnterRoom(roomId, {
diff --git a/packages/liveblocks-redux/package.json b/packages/liveblocks-redux/package.json
index 048786b5984..24bb81ff111 100644
--- a/packages/liveblocks-redux/package.json
+++ b/packages/liveblocks-redux/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/redux",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A store enhancer to integrate Liveblocks into Redux stores. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -33,8 +33,8 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0"
},
"peerDependencies": {
"redux": "^4 || ^5"
diff --git a/packages/liveblocks-yjs/package.json b/packages/liveblocks-yjs/package.json
index 0b45e19ea46..c61258a9113 100644
--- a/packages/liveblocks-yjs/package.json
+++ b/packages/liveblocks-yjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/yjs",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "Integrate your existing or new Yjs documents with Liveblocks.",
"icense": "Apache-2.0",
"type": "module",
@@ -33,8 +33,8 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4",
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0",
"@noble/hashes": "^1.8.0",
"js-base64": "^3.7.7",
"y-indexeddb": "^9.0.12"
diff --git a/packages/liveblocks-zustand/package.json b/packages/liveblocks-zustand/package.json
index eede92bab50..3699c24d1c0 100644
--- a/packages/liveblocks-zustand/package.json
+++ b/packages/liveblocks-zustand/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/zustand",
- "version": "3.3.4",
+ "version": "3.4.0",
"description": "A middleware for Zustand to automatically synchronize your stores with Liveblocks. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"type": "module",
@@ -34,8 +34,8 @@
"test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
},
"dependencies": {
- "@liveblocks/client": "3.3.4",
- "@liveblocks/core": "3.3.4"
+ "@liveblocks/client": "3.4.0",
+ "@liveblocks/core": "3.4.0"
},
"peerDependencies": {
"zustand": "^5.0.1"