[pull] main from liveblocks:main

examples/nextjs-ai-dashboard-reports/.env.example

@@ -1,5 +1,11 @@
 # https://liveblocks.io/dashboard/apikeys
 LIVEBLOCKS_SECRET_KEY=
 
+# https://liveblocks.io/dashboard/webhooks
+LIVEBLOCKS_WEBHOOK_SECRET_KEY=
+
+# https://platform.claude.com/settings/keys
+ANTHROPIC_API_KEY=
+
 # https://liveblocks.io/dashboard/copilots
 NEXT_PUBLIC_LIVEBLOCKS_COPILOT_ID=

examples/nextjs-ai-dashboard-reports/next.config.mjs

@@ -2,6 +2,7 @@
 
 const nextConfig = {
   turbopack: { root: import.meta.dirname },
+  allowedDevOrigins: ["*.ngrok-free.app", "*.ngrok.io", "*.loca.lt"],
   redirects: async () => {
     return [
       {

examples/nextjs-ai-dashboard-reports/package.json

@@ -11,11 +11,12 @@
     "generate:all": "tsx --tsconfig ./tsconfig.scripts.json ./src/data/generateData.ts"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.64",
     "@internationalized/date": "^3.7.0",
-    "@liveblocks/client": "^3.18.4",
-    "@liveblocks/node": "^3.18.4",
-    "@liveblocks/react": "^3.18.4",
-    "@liveblocks/react-ui": "^3.18.4",
+    "@liveblocks/client": "^3.19.1",
+    "@liveblocks/node": "^3.19.1",
+    "@liveblocks/react": "^3.19.1",
+    "@liveblocks/react-ui": "^3.19.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.1.5",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -36,6 +37,7 @@
     "@tailwindcss/forms": "^0.5.11",
     "@tanstack/react-table": "^8.21.3",
     "@typescript-eslint/parser": "^8.28.0",
+    "ai": "^6.0.141",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "eslint-plugin-next": "^0.0.0",

examples/nextjs-ai-dashboard-reports/src/app/(dashboard)/layout.tsx

@@ -1,32 +1,46 @@
-"use client"
-import React from "react"
+"use client";
 
-import { cx } from "@/lib/utils"
+import React, { Suspense } from "react";
 
-import { Sidebar } from "@/components/ui/navigation/Sidebar"
+import { CommentsFloatingToggle } from "@/components/comments/CommentsFloatingToggle";
+import { CommentsRoomProvider } from "@/components/comments/CommentsRoomProvider";
+import { CommentsRoomShell } from "@/components/comments/CommentsRoomShell";
+import { cx } from "@/lib/utils";
+
+import { Sidebar } from "@/components/ui/navigation/Sidebar";
 
 export default function Layout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
-  const [isCollapsed, setIsCollapsed] = React.useState(false)
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
   const toggleSidebar = () => {
-    setIsCollapsed(!isCollapsed)
-  }
+    setIsCollapsed(!isCollapsed);
+  };
   return (
     <div className="mx-auto max-w-(--breakpoint-2xl)">
-      <Sidebar isCollapsed={isCollapsed} toggleSidebar={toggleSidebar} />
-      <main
-        className={cx(
-          isCollapsed ? "lg:pl-[60px]" : "lg:pl-64",
-          "ease transform-gpu transition-all duration-100 will-change-transform lg:bg-neutral-50 lg:py-3 lg:pr-3 lg:dark:bg-black",
-        )}
-      >
-        <div className="bg-white p-4 sm:p-6 lg:rounded-lg lg:border lg:border-neutral-200 dark:bg-neutral-950 lg:dark:border-neutral-900">
-          {children}
-        </div>
-      </main>
+      <Suspense fallback={null}>
+        <CommentsRoomProvider>
+          <Sidebar isCollapsed={isCollapsed} toggleSidebar={toggleSidebar} />
+          <main
+            className={cx(
+              isCollapsed ? "lg:pl-[60px]" : "lg:pl-64",
+              "ease relative flex min-h-0 min-w-0 transform-gpu flex-col overflow-x-visible transition-all duration-100 will-change-transform lg:bg-neutral-50 lg:py-3 lg:pr-3 lg:dark:bg-black",
+            )}
+          >
+            <CommentsFloatingToggle />
+            <div
+              className={cx(
+                "flex min-h-0 min-w-0 flex-1 flex-col overflow-visible bg-white p-4 sm:p-6 lg:rounded-lg lg:border lg:border-neutral-200 dark:bg-neutral-950 lg:dark:border-neutral-900",
+                "lg:min-h-[calc(100dvh-1.5rem)]",
+              )}
+            >
+              <CommentsRoomShell>{children}</CommentsRoomShell>
+            </div>
+          </main>
+        </CommentsRoomProvider>
+      </Suspense>
     </div>
-  )
+  );
 }

examples/nextjs-ai-dashboard-reports/src/app/(dashboard)/reports/_components/Header.tsx

@@ -59,7 +59,7 @@ export default function Header() {
     <section
       aria-labelledby="reports-title"
       className={cx(
-        "sticky top-16 z-50 -my-6 flex flex-col gap-6 bg-white py-6 md:flex-row md:flex-wrap md:items-center md:justify-between lg:top-0 dark:bg-neutral-950",
+        "sticky top-16 -my-6 flex flex-col gap-6 bg-white py-6 md:flex-row md:flex-wrap md:items-center md:justify-between lg:top-0 dark:bg-neutral-950",
         scrolled &&
           "border-b border-neutral-200 transition-all dark:border-neutral-900",
       )}