[pull] main from liveblocks:main

CHANGELOG.md

@@ -1,5 +1,27 @@
 ## vNEXT (not yet published)
 
+## v3.2.0
+
+### `@liveblocks/react-ui`
+
+- Improve `AiChat`'s scroll behavior when sending new messages: the chat will
+  now scroll new messages to the top and leave enough space for responses.
+- Expose Markdown components in `AiChat`’s `components` prop to customize the
+  rendering of Markdown content.
+- Add `blurOnSubmit` prop to `Composer` (also available on the `Composer.Form`
+  primitive and as `blurComposerOnSubmit` on `Thread`) to control whether a
+  composer should lose focus after being submitted.
+
+### `@liveblocks/react`
+
+- `useErrorListener` now receives `"LARGE_MESSAGE_ERROR"` errors when the
+  `largeMessageStrategy` option isn’t configured and a message couldn’t be sent
+  because it was too large for WebSocket.
+
+### `@liveblocks/node`
+
+- Add `tenantId` to `identifyUser` method as an optional parameter.
+
 ## v3.1.4
 
 ### `@liveblocks/react-ui`

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

@@ -380,6 +380,39 @@ function Chat() {
 }
 ```
 
+##### Customize how Markdown is rendered [#AiChat-markdown]
+
+You can customize how Markdown is rendered in messages by passing components to
+the `components` prop. A full list is [available here](#AiChat-components).
+
+```tsx
+<AiChat
+  chatId="my-chat-id"
+  components={{
+    // +++
+    markdown: {
+      // Example: Use custom paragraph styles
+      Paragraph: ({ children }) => <p className="my-3">{children}</p>,
+
+      // Example: Use an existing component for quotes
+      Blockquote: ({ children }) => <MyQuote>{children}</MyQuote>,
+
+      // Example: Use `next/link` instead of default `<a>` tag
+      Link: ({ children, href }) => <Link href={href || ""}>{children}</Link>,
+
+      // Example: Use an external library to add syntax highlighting to code blocks
+      CodeBlock: ({ language, code }) => (
+        <SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>
+      ),
+
+      // `Heading`, `Inline`, `List`, `Table`, `Image`, `Separator`, etc.
+      // ...
+    },
+    // +++
+  }}
+/>
+```
+
 ##### Props [#AiChat-props]
 
 <PropertiesList>
@@ -414,7 +447,7 @@ function Chat() {
   </PropertiesListItem>
   <PropertiesListItem name="components" type="AiChatComponents">
     Custom components to override specific parts of the chat UI, such as the
-    `Empty` placeholder component.
+    `Empty` placeholder component or Markdown components.
   </PropertiesListItem>
   <PropertiesListItem name="className" type="string">
     CSS class name to apply to the chat container.
@@ -425,6 +458,85 @@ function Chat() {
   </PropertiesListItem>
 </PropertiesList>
 
+###### components [#AiChat-components]
+
+Override specific parts of `AiChat` with custom components.
+
+<PropertiesList>
+  <PropertiesListItem
+    name="Empty"
+    type="({ chatId: string, copilotId?: string }) => ReactNode"
+  >
+    The component used to render the empty state of the chat. Defaults to
+    nothing.
+  </PropertiesListItem>
+  <PropertiesListItem name="Loading" type="() => ReactNode">
+    The component used to render the loading state of the chat. Defaults to a
+    loading spinner.
+  </PropertiesListItem>
+  <PropertiesListItem name="markdown" type="Partial<MarkdownComponents>">
+    The components used to render Markdown content.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Paragraph"
+    type="({ children: ReactNode }) => ReactNode"
+  >
+    The component used to render paragraphs.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Inline"
+    detailedType={`({ type: "strong" | "em" | "code" | "del", children: ReactNode }) => ReactNode`}
+  >
+    The component used to render inline elements (bold, italic, strikethrough,
+    and inline code).
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Link"
+    type={`({ href: string, title?: string, children: ReactNode }) => ReactNode`}
+  >
+    The component used to render links.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Heading"
+    type={`({ level: 1 | 2 | 3 | 4 | 5 | 6, children: ReactNode }) => ReactNode`}
+  >
+    The component used to render headings.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Blockquote"
+    type="({ children: ReactNode }) => ReactNode"
+  >
+    The component used to render blockquotes.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.CodeBlock"
+    type={`({ code: string, language?: string }) => ReactNode`}
+  >
+    The component used to render code blocks.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Image"
+    type={`({ src: string, alt: string, title?: string }) => ReactNode`}
+  >
+    The component used to render images.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.List"
+    detailedType={`({ type: "ordered" | "unordered", items: { checked?: boolean, children: ReactNode }[] }) => ReactNode`}
+  >
+    The component used to render lists.
+  </PropertiesListItem>
+  <PropertiesListItem
+    name="markdown.Table"
+    detailedType={`({ headings: { align?: "left" | "center" | "right"; children: ReactNode }[], rows: { align?: "left" | "center" | "right"; children: ReactNode }[] }) => ReactNode`}
+  >
+    The component used to render tables.
+  </PropertiesListItem>
+  <PropertiesListItem name="markdown.Separator" type="() => ReactNode">
+    The component used to render separators.
+  </PropertiesListItem>
+</PropertiesList>
+
 #### AiTool
 
 Displays [AI tool calls](/docs/ready-made-features/ai-copilots/features#tools)
@@ -814,6 +926,13 @@ to update the property.
   >
     Whether to show the composer’s formatting controls.
   </PropertiesListItem>
+  <PropertiesListItem
+    name="blurComposerOnSubmit"
+    type="boolean"
+    defaultValue="true"
+  >
+    Whether to blur the composer editor when the composer is submitted.
+  </PropertiesListItem>
   <PropertiesListItem
     name="showResolveAction"
     type="boolean"
@@ -1059,6 +1178,9 @@ Learn more about mutation hooks under
   >
     The event handler called when the composer is submitted.
   </PropertiesListItem>
+  <PropertiesListItem name="blurOnSubmit" type="boolean" defaultValue="true">
+    Whether to blur the composer editor when the composer is submitted.
+  </PropertiesListItem>
   <PropertiesListItem name="defaultValue" type="CommentBody">
     The composer’s initial value.
   </PropertiesListItem>
@@ -1459,6 +1581,9 @@ occurs when the composer is submitted. You must create your own mutations within
     unsaved changes with Liveblocks, but not for this composer, you can opt-out
     this composer instance by setting this prop to `false`.
   </PropertiesListItem>
+  <PropertiesListItem name="blurOnSubmit" type="boolean" defaultValue="true">
+    Whether to blur the editor when the form is submitted.
+  </PropertiesListItem>
   <PropertiesListItem
     name="onComposerSubmit"
     type="function"
@@ -2613,6 +2738,13 @@ Override specific kinds of inbox notifications.
     The component used to display thread notifications. Defaults to
     `InboxNotification.Thread`.
   </PropertiesListItem>
+  <PropertiesListItem
+    name="textMention"
+    type="ComponentType<InboxNotificationTextMentionKindProps>"
+  >
+    The component used to display text mention notifications. Defaults to
+    `InboxNotification.TextMention`.
+  </PropertiesListItem>
   <PropertiesListItem
     name="$${string}"
     type="ComponentType<InboxNotificationCustomKindProps>"
@@ -2748,7 +2880,8 @@ Displays a custom notification kind.
 
 ###### InboxNotification.Inspector [#InboxNotification.Inspector]
 
-Displays the inbox notification’s data in a JSON code snippet. Useful when debugging notifications in your app.
+Displays the inbox notification’s data in a JSON code snippet. Useful when
+debugging notifications in your app.
 
 ```tsx
 <InboxNotification