API Reference - @liveblocks/react-ui

import { AiChat } from "@liveblocks/react-ui";
function Chat() {  return <AiChat chatId="my-chat-id" />;}

import { AiChat } from "@liveblocks/react-ui";
function Chat() {  return (    <AiChat      chatId="my-chat-id"      copilotId="co_a7Gd3x..."    />  );}

import { AiChat } from "@liveblocks/react-ui";
function Chat() {  return (    <AiChat      chatId="my-chat-id"      components={{ Empty: <div>I'm an empty chat!</div> }}    />  );}

import { useSendAiMessage } from "@liveblocks/react";import { AiChat } from "@liveblocks/react-ui";
function Chat({ chatId }: { chatId: string }) {  const sendAiMessage = useSendAiMessage(chatId);
  return (    <AiChat      chatId="my-chat-id"      components={{        Empty: (          <div>            <div>Suggestions</div>            <button onClick={() => sendAiMessage("What's new?")}>              Update me            </button>            <button onClick={() => sendAiMessage("Create a new document")}>              Draft a document            </button>          </div>        ),      }}    />  );}

import { useState } from "react";import { AiChat } from "@liveblocks/react-ui";import { useAiChats } from "@liveblocks/react";import { Timestamp } from "@liveblocks/react-ui/primitives";
function Chats() {  const { chats, error, isLoading } = useAiChats();  const [chatId, setChatId] = useState();  const deleteChat = useDeleteAiChat();
  if (isLoading) {    return <div>Loading...</div>;  }
  if (error) {    return <div>Error: {error.message}</div>;  }
  return (    <div style={{ display: "flex" }}>      <ul>        {chats.map((chat) => (          <li key={chat.id}>            <button onClick={() => setChatId(chat.id)}>              {chat.title || "Untitled"}            </button>            <Timestamp date={chat.lastMessageAt || chat.createdAt} />            <button onClick={() => deleteChat(chat.id)}>❌</button>          </li>        ))}      </ul>      <AiChat chatId={chatId} />    </div>  );}

import { AiChat } from "@liveblocks/react-ui";import { useAiChat } from "@liveblocks/react";
function ChatWithTitle({ chatId }: { chatId: string }) {  const { chat, error, isLoading } = useAiChat();
  if (isLoading) {    return <div>Loading...</div>;  }
  if (error) {    return <div>Error: {error.message}</div>;  }
  return (    <div>      <h1>{chat.title || "Untitled chat"}</h1>      <AiChat chatId={chatId} />    </div>  );}

import { AiChat } from "@liveblocks/react-ui";
function Chat() {  return (    <AiChat      chatId="my-chat-id"      knowledge={[        { description: "The current user's payment plan", value: "Enterprise" },        {          description: "The current user's info",          value: {            name: "Jody Hekla",            email: "jody@liveblocks.io",            teams: ["Engineering", "Product"],          },        },      ]}    />  );}

import { AiChat } from "@liveblocks/react-ui";
function Chat() {  return (    <AiChat      chatId="my-chat-id"      layout="compact"    />  );}

<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.      // ...    },  }}/>

import { defineAiTool } from "@liveblocks/client";import { RegisterAiTool } from "@liveblocks/react";import { AiTool, AiChat } from "@liveblocks/react-ui";
function App() {  return (    <>      <RegisterAiTool        name="get-weather"        tool={defineAiTool()({          description: "Get current weather information",          parameters: {            type: "object",            properties: {              location: { type: "string", description: "City name" },            },            required: ["location"],            additionalProperties: false,          },          execute: async (args) => {            const { temperature, condition } = await __getWeather__(              args.location            );            return { data: { temperature, condition } };          },          render: ({ result }) => (            <AiTool>              {result ? (                <div>                  {result.temperature}°F - {result.condition}                </div>              ) : null}            </AiTool>          ),        })}      />      <AiChat chatId="my-chat" />    </>  );}

// Titlerender: () => <AiTool title="Event booked" />
// Title and a collapsible descriptionrender: () => <AiTool title="Event booked">We've booked the event!</AiTool>,
// Title and emoji iconrender: () => <AiTool title="Event booked" icon="📅" />,
// Title and icon componentrender: () => <AiTool title="Event booked" icon={<Icon.Calendar />} />,
// Props are passed to the inner `div`render: () => (  <AiTool    title="Event booked"    style={{ marginLeft: 10 }}    className="event-booked-tool"    onMouseOver={() => console.log("Hovered")}  />),

<AiTool>  <AiTool.Confirmation confirm={() => /* ... */} cancel={() => /* ... */} /></AiTool>

import { defineAiTool } from "@liveblocks/client";import { RegisterAiTool } from "@liveblocks/react";import { AiTool } from "@liveblocks/react-ui";
const deleteFileTool = defineAiTool<{ deletedFileName: string }>()({  description: "Delete a file from the user's workspace",  parameters: {    type: "object",    properties: {      fileName: { type: "string", description: "Name of the file to delete" },    },    required: ["fileName"],    additionalProperties: false,  },  render: ({ stage, args, result, types }) => {    if (stage === "receiving") {      return "Loading...";    }    return (      <AiTool title="Delete File" icon="🗑️">        {!result.data ? (          <AiTool.Confirmation            // Make `confirm` and `cancel` type-safe            types={types}            confirm={async ({ fileName }) => {              await deleteFile(fileName);              return {                data: { deletedFileName: fileName },              };            }}          >            Are you sure you want to delete {args.fileName}?          </AiTool.Confirmation>        ) : (          <div>Deleted {result.data.deletedFileName}</div>        )}      </AiTool>    );  },});
function App() {  return (    <>      <RegisterAiTool name="delete-file" tool={deleteFileTool} />      <AiChat chatId="my-chat" />    </>  );}

<AiTool>  <AiTool.Inspector /></AiTool>

import { defineAiTool } from "@liveblocks/client";import { RegisterAiTool } from "@liveblocks/react";import { AiTool, AiChat } from "@liveblocks/react-ui";
function App() {  return (    <>      <RegisterAiTool        name="toggle-todo"        tool={defineAiTool()({          description: "Toggle a todo's completion status",          parameters: {            type: "object",            properties: {              id: {                description: "The id of the todo to toggle",                type: "number",              },            },            required: ["id"],            additionalProperties: false,          },          execute: ({ id }) => {            toggleTodo(id);          },          render: () => (            <AiTool>              <AiTool.Inspector />            </AiTool>          ),        })}      />      <AiChat chatId="my-chat" />    </>  );}

import { Thread } from "@liveblocks/react-ui";import { useThreads } from "@liveblocks/react/suspense";
function Component() {  const { threads } = useThreads();
  return (    <>      {threads.map((thread) => (        <Thread key={thread.id} thread={thread} />      ))}    </>  );}

// This is the default behavior, the same as `maxVisibleComments={5}`.<Thread thread={thread} maxVisibleComments={{ max: 5, show: "newest" }} />
// Only show the last comment, and all the older ones to fit the limit.<Thread thread={thread} maxVisibleComments={{ max: 5, show: "oldest" }} />
// Show as many old comments as new ones to fit the limit.<Thread thread={thread} maxVisibleComments={{ max: 5, show: "both" }} />

import { Composer } from "@liveblocks/react-ui";
// Creates a new threadfunction Component() {  return <Composer />;}

import { Composer } from "@liveblocks/react-ui";
// Creates a new thread with custom metadatafunction Component() {  return (    <Composer      metadata={{        // Custom metadata here, e.g. colors, coordinates        color: "purple",        x: 80,        y: 120,      }}    />  );}

import { Composer } from "@liveblocks/react-ui";
// Adds a new comment to a threadfunction Component({ threadId }) {  return <Composer threadId={threadId} />;}

import { Composer } from "@liveblocks/react-ui";
// Edits an existing commentfunction Component({ threadId, commentId }) {  return <Composer threadId={threadId} commentId={commentId} />;}

import { Composer } from "@liveblocks/react-ui";import { useEditComment, useAddReaction } from "@liveblocks/react/suspense";
// Custom submission behavior (edits a comment and adds a reaction)function Component({ threadId, commentId }) {  const editComment = useEditComment();  const addReaction = useAddReaction();
  return (    <Composer      onComposerSubmit={({ body, attachments }, event) => {        event.preventDefault();
        // Example mutations        editComment({ threadId, commentId, body, attachments });        addReaction({ threadId, commentId, emoji: "✅" });
        // Other custom behavior        // ...      }}    />  );}

import { Comment } from "@liveblocks/react-ui";import { ThreadData } from "@liveblocks/client";
// Renders a list of comments attach to the specified `thread`function Component({ thread }: { thread: ThreadData }) {  return (    <>      {thread.comments.map((comment) => (        <Comment key={comment.id} comment={comment} />      ))}    </>  );}

import { Comment, Composer } from "@liveblocks/react-ui";import { ThreadData } from "@liveblocks/client";import { useThreads } from "@liveblocks/react/suspense";
// Renders a list of comments and a composer for adding new commentsfunction CustomThread({ thread }: { thread: ThreadData }) {  return (    <>      {thread.comments.map((comment) => (        <Comment key={comment.id} comment={comment} />      ))}      <Composer threadId={thread.id} />    </>  );}
// Renders a list of custom thread componentsfunction Component() {  const { threads } = useThreads();
  return (    <>      {threads.map((thread) => (        <CustomThread key={thread.id} />      ))}    </>  );}

import { Button } from "@/my-design-system";
// Use the default <button> element<Composer.Submit disabled>Send</Composer.Submit>;
// Use an existing custom <Button> component<Composer.Submit disabled asChild>  <Button variant="primary">Send</Button></Composer.Submit>;

<Composer.Form>  <Composer.AttachmentsDropArea />  <Composer.Editor    components={{      Mention: () => <Composer.Mention />,      MentionSuggestions: () => (        <Composer.Suggestions>          <Composer.SuggestionsList>            <Composer.SuggestionsListItem />          </Composer.SuggestionsList>        </Composer.Suggestions>      ),      Link: () => <Composer.Link />,    }}  />  <Composer.AttachFiles />  <Composer.Submit /></Composer.Form>

import {  Composer,  CommentBodyLinkProps,  CommentBodyMentionProps,  ComposerEditorMentionSuggestionsProps,  ComposerSubmitComment,} from "@liveblocks/react-ui/primitives";import { useCreateThread, useUser } from "@liveblocks/react/suspense";import { FormEvent } from "react";
// Render a custom composer that creates a thread on submitfunction MyComposer() {  const createThread = useCreateThread();
  function handleComposerSubmit(    { body, attachments }: ComposerSubmitComment,    event: FormEvent<HTMLFormElement>  ) {    event.preventDefault();
    // Create a new thread    const thread = createThread({      body,      attachments,      metadata: {},    });  }
  return (    <Composer.Form onComposerSubmit={handleComposerSubmit}>      <Composer.Editor        components={{          Mention,          MentionSuggestions,          Link,        }}      />      <Composer.Submit>Create thread</Composer.Submit>    </Composer.Form>  );}
// Render a mention in the composer's editor, e.g. "@Emil Joyce"function Mention({ mention }: CommentBodyMentionProps) {  return <Comment.Mention>@{mention.id}</Comment.Mention>;}
// Render a list of mention suggestions, used after typing "@" in the editorfunction MentionSuggestions({  mentions,  selectedMentionId,}: ComposerEditorMentionSuggestionsProps) {  return (    <Composer.Suggestions>      <Composer.SuggestionsList>        {mentions.map((mention) => (          <MentionSuggestion key={mention.id} userId={mention.id} />        ))}      </Composer.SuggestionsList>    </Composer.Suggestions>  );}
// Render a single mention suggestion from a `userId`function MentionSuggestion({ userId }: { userId: string }) {  const { user } = useUser(userId);
  return (    <Composer.SuggestionsListItem value={user.id}>      <img src={user.avatar} alt={user.name} />      {user.name}    </Composer.SuggestionsListItem>  );}
// Render a link in the composer's editor, e.g. "https://liveblocks.io"function Link({ href, children }: CommentBodyLinkProps) {  return <Comment.Link href={href}>{children}</Comment.Link>;}

<Composer.Form  onComposerSubmit={({ body, attachments }) => {    // Mutate your comments    // ...  }}>  {/* ... */}</Composer.Form>

<Composer.Editor  components={{    Mention: ({ mention, isSelected }) => (      <Composer.Mention>@{mention.id}</Composer.Mention>    ),  }}/>