[pull] main from liveblocks:main

CHANGELOG.md

@@ -1,9 +1,42 @@
 ## vNEXT (not yet published)
 
+## v3.3.0
+
 ### `@liveblocks/react-ui`
 
-- Knowledge passed as a prop to `AiChat` no longer leaks that knowledge to other
-  instances of `AiChat` that are currently mounted on screen.
+- Add `maxVisibleComments` prop to `Thread` to control the maximum number of
+  comments to show. When comments are hidden, a "Show more replies" button is
+  shown to allow users to expand the thread.
+- Add `onComposerSubmit` callback to `AiChat` triggered when a new message is
+  sent. It can also be used to customize message submission by calling
+  `useSendAiMessage` yourself.
+- Overrides and CSS classes for `AiChat`'s composer have been renamed:
+  - Overrides: `AI_CHAT_COMPOSER_SEND` → `AI_COMPOSER_PLACEHOLDER`
+  - CSS classes: `.lb-ai-chat-composer-form` → `.lb-ai-composer-form`
+- Fix: knowledge passed as a prop to `AiChat` no longer leaks that knowledge to
+  other instances of `AiChat` that are currently mounted on screen.
+
+### `@liveblocks/react`
+
+- Add `query` option to `useAiChats` to filter the current user’s AI chats by
+  metadata. Supports exact matches for string values, "contains all" for string
+  arrays, and filtering by absence using `null` (e.g.
+  `{ metadata: { archived: null } }`).
+- `useSendAiMessage` now accepts passing the chat ID and/or options to the
+  function rather than the hook. This can be useful in dynamic scenarios where
+  the chat ID might not be known when calling the hook for example.
+- `useCreateAiChat` now accepts a chat ID as a string instead of
+  `{ id: "chat-id" }`.
+
+### `@liveblocks/react-tiptap` and `@liveblocks/react-lexical`
+
+- Allow using custom composers in `FloatingComposer` via the
+  `components={{ Composer }}` prop.
+
+### `@liveblocks/react-lexical`
+
+- Add `ATTACH_THREAD_COMMAND` command to manually create a thread attached to
+  the current selection.
 
 ## v3.2.1
 

CHANGELOG_PUBLIC.md

@@ -18,6 +18,55 @@ list and feel free to give them credit at the end of a line, e.g.:
 
 -->
 
+# Week 32 (2025-08-08)
+
+## v3.3.0
+
+### `@liveblocks/react-ui`
+
+- Add `maxVisibleComments` prop to `Thread` to control the maximum number of
+  comments to show. When comments are hidden, a "Show more replies" button is
+  shown to allow users to expand the thread.
+- Add `onComposerSubmit` callback to `AiChat` triggered when a new message is
+  sent. It can also be used to customize message submission by calling
+  `useSendAiMessage` yourself.
+- Overrides and CSS classes for `AiChat`'s composer have been renamed:
+  - Overrides: `AI_CHAT_COMPOSER_SEND` → `AI_COMPOSER_PLACEHOLDER`
+  - CSS classes: `.lb-ai-chat-composer-form` → `.lb-ai-composer-form`
+- Fix: knowledge passed as a prop to `AiChat` no longer leaks that knowledge to
+  other instances of `AiChat` that are currently mounted on screen.
+
+### `@liveblocks/react`
+
+- Add `query` option to `useAiChats` to filter the current user’s AI chats by
+  metadata. Supports exact matches for string values, "contains all" for string
+  arrays, and filtering by absence using `null` (e.g.
+  `{ metadata: { archived: null } }`).
+- `useSendAiMessage` now accepts passing the chat ID and/or options to the
+  function rather than the hook. This can be useful in dynamic scenarios where
+  the chat ID might not be known when calling the hook for example.
+- `useCreateAiChat` now accepts a chat ID as a string instead of
+  `{ id: "chat-id" }`.
+
+### `@liveblocks/react-tiptap` and `@liveblocks/react-lexical`
+
+- Allow using custom composers in `FloatingComposer` via the
+  `components={{ Composer }}` prop.
+
+### `@liveblocks/react-lexical`
+
+- Add `ATTACH_THREAD_COMMAND` command to manually create a thread attached to
+  the current selection.
+
+## Dashboard
+
+- Support SAML Single Sign-On for enterprise customers.
+- Allow editing first and last name in personal settings.
+
+## Contributors
+
+ofoucherot, sugardarius, pierrelevaillant, marcbouchenoire, nimeshnayaju, nvie
+
 # Week 31 (2025-08-01)
 
 ## v3.2.1

docs/pages/api-reference/liveblocks-react-lexical.mdx

@@ -1018,6 +1018,95 @@ function Toolbar() {
 }
 ```
 
+#### Customization [#FloatingComposer-customization]
+
+The `FloatingComposer` components acts as a wrapper around a [`Composer`][],
+near the current selection. You can treat the component like you would a `form`,
+using classes, listeners, and more.
+
+```tsx
+<FloatingComposer style={{ width: "350px" }} className="my-floating-composer" />
+```
+
+To apply styling to the composer, you can pass a custom `Composer` property to
+`components` and modify this in any way.
+
+```tsx
+import { Composer } from "@liveblocks/react-ui";
+
+<FloatingComposer
+  style={{ width: "350px" }}
+  // +++
+  components={{
+    Composer: (props) => (
+      <Composer
+        {...props}
+        className="border shadow"
+        style={{ width: "300px" }}
+      />
+    ),
+  }}
+  // +++
+/>;
+```
+
+You can return any custom `ReactNode` here, including anything from a simple
+wrapper around `Composer`, up to a full custom `Composer` component built using
+our
+[Composer primitives](/docs/api-reference/liveblocks-react-ui#primitives-Composer).
+
+```tsx
+import { Composer } from "@liveblocks/react-ui/primitives";
+
+<FloatingComposer
+  style={{ width: "350px" }}
+  components={{
+    // +++
+    Composer: ({ onComposerSubmit }) => (
+      <Composer.Form onComposerSubmit={onComposerSubmit}>
+        <Composer.Editor />
+        <Composer.Submit>Send</Composer.Submit>
+      </Composer.Form>
+    ),
+    // +++
+  }}
+/>;
+```
+
+You can also customize submission behavior by passing a custom
+`onComposerSubmit` function to the `Composer.Form` component.
+
+```tsx
+import { Composer } from "@liveblocks/react-ui/primitives";
+
+<FloatingComposer
+  editor={editor}
+  style={{ width: "350px" }}
+  components={{
+    Composer: () => (
+        <Composer.Form
+        // +++
+          onComposerSubmit={(message, event) => {
+            event.preventDefault();
+
+            const thread = createThread({
+              body: comment.body,
+              attachments: comment.attachments,
+              metadata: ...,
+            });
+
+            editor.dispatchCommand(ATTACH_THREAD_COMMAND, thread.id);
+          }}
+          // +++
+        >
+          <Composer.Editor />
+          <Composer.Submit>Send</Composer.Submit>
+        </Composer.Form>
+      )
+  }}
+/>;
+```
+
 #### Props [#FloatingComposer-props]
 
 <PropertiesList>
@@ -1061,6 +1150,19 @@ function Toolbar() {
   >
     Override the component’s strings.
   </PropertiesListItem>
+  <PropertiesListItem
+    name="components"
+    type="Partial<FloatingComposerComponents>"
+  >
+    Override the component’s components.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="components.Composer"
+    type="(props: ComposerProps) => ReactNode"
+  >
+    Override the [`Composer`](/docs/api-reference/liveblocks-react-ui#Composer)
+    component.
+  </PropertiesListItem>
 </PropertiesList>
 
 ### FloatingThreads

docs/pages/api-reference/liveblocks-react-tiptap.mdx

@@ -936,6 +936,101 @@ function Toolbar({ editor }: { editor: Editor | null }) {
 }
 ```
 
+#### Customization [#FloatingComposer-customization]
+
+The `FloatingComposer` components acts as a wrapper around a [`Composer`][],
+near the current selection. You can treat the component like you would a `form`,
+using classes, listeners, and more.
+
+```tsx
+<FloatingComposer
+  editor={editor}
+  style={{ width: "350px" }}
+  className="my-floating-composer"
+/>
+```
+
+To apply styling to the composer, you can pass a custom `Composer` property to
+`components` and modify this in any way.
+
+```tsx
+import { Composer } from "@liveblocks/react-ui";
+
+<FloatingComposer
+  editor={editor}
+  style={{ width: "350px" }}
+  // +++
+  components={{
+    Composer: (props) => (
+      <Composer
+        {...props}
+        className="border shadow"
+        style={{ width: "300px" }}
+      />
+    ),
+  }}
+  // +++
+/>;
+```
+
+You can return any custom `ReactNode` here, including anything from a simple
+wrapper around `Composer`, up to a full custom `Composer` component built using
+our
+[Composer primitives](/docs/api-reference/liveblocks-react-ui#primitives-Composer).
+
+```tsx
+import { Composer } from "@liveblocks/react-ui/primitives";
+
+<FloatingComposer
+  editor={editor}
+  style={{ width: "350px" }}
+  components={{
+    Composer: ({ onComposerSubmit }) => (
+      // +++
+      <Composer.Form onComposerSubmit={onComposerSubmit}>
+        <Composer.Editor />
+        <Composer.Submit>Send</Composer.Submit>
+      </Composer.Form>
+      // +++
+    ),
+  }}
+/>;
+```
+
+You can also customize submission behavior by passing a custom
+`onComposerSubmit` function to the `Composer.Form` component.
+
+```tsx
+import { Composer } from "@liveblocks/react-ui/primitives";
+
+<FloatingComposer
+  editor={editor}
+  style={{ width: "350px" }}
+  components={{
+    Composer: () => (
+        <Composer.Form
+        // +++
+          onComposerSubmit={(message, event) => {
+            event.preventDefault();
+
+            const thread = createThread({
+              body: comment.body,
+              attachments: comment.attachments,
+              metadata: ...,
+            });
+
+            editor.commands.addComment(thread.id);
+          }}
+          // +++
+        >
+          <Composer.Editor />
+          <Composer.Submit>Send</Composer.Submit>
+        </Composer.Form>
+      ),
+  }}
+/>;
+```
+
 #### Props [#FloatingComposer-props]
 
 <PropertiesList>
@@ -979,6 +1074,19 @@ function Toolbar({ editor }: { editor: Editor | null }) {
   >
     Override the component’s strings.
   </PropertiesListItem>
+  <PropertiesListItem
+    name="components"
+    type="Partial<FloatingComposerComponents>"
+  >
+    Override the component’s components.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="components.Composer"
+    type="(props: ComposerProps) => ReactNode"
+  >
+    Override the [`Composer`](/docs/api-reference/liveblocks-react-ui#Composer)
+    component.
+  </PropertiesListItem>
 </PropertiesList>
 
 ### FloatingThreads