@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(chatId);
  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 { Comment, Thread } from "@liveblocks/react-ui";
<Thread  thread={thread}  components={{    Comment: ({ comment, ...props }) => (      <Comment        comment={comment}        avatar={          <div className="custom-avatar">            <Comment.Avatar userId={props.comment.userId} />            <div className="custom-badge" />          </div>        }        author={          <span className="custom-author">            <Comment.Author userId={props.comment.userId} />            <span>Custom label</span>          </span>        }        date={          <span className="custom-date">            <Comment.Date date={props.comment.createdAt} />            {props.comment.editedAt && (              <span className="custom-edited-label">Edited</span>            )}          </span>        }        additionalContent={          <div className="custom-additional-content">            Content below the comment's body (above reactions and attachments)          </div>        }        {...props}      >        {({ children }) => (          <div className="custom-content-wrapper">            {children}            <div>              Content below the comment's content (including reactions and              attachments)            </div>          </div>        )}      </Comment>    ),  }}/>;

import { Comment, Thread } from "@liveblocks/react-ui";
<Thread  thread={thread}  components={{    Comment: ({ comment, ...props }) => {      // Render your custom graph inside a comment UI      if (comment.metadata?.type === "graph") {        return <Graph graphId={comment.metadata.graphId} />;      }
      return <Comment comment={comment} {...props} />;    },  }}/>;

import { Comment, Thread } from "@liveblocks/react-ui";
<Thread  thread={thread}  components={{    Comment: ({ comment, ...props }) => {      // Render your custom graph component      if (comment.metadata?.type === "graph") {        return (          <Comment comment={comment} {...props}>            <Graph graphId={comment.metadata.graphId} />          </Comment>        );      }
      return <Comment comment={comment} {...props} />;    },  }}/>;

<Thread  commentDropdownItems={    <>      <Comment.DropdownItem        onSelect={() => {          console.log("Open details");        }}      >        Details      </Comment.DropdownItem>      <Comment.DropdownItem        onSelect={() => {          console.log("Move comment");        }}      >        Move      </Comment.DropdownItem>    </>  }/>

<Thread  commentDropdownItems={({ children }) => {    return (      <>        <Comment.DropdownItem          onSelect={() => {            openDetails(comment.id);          }}        >          Details        </Comment.DropdownItem>        {/* The "Details" item will be displayed above the default items */}        {children}      </>    );  }}/>

<Comment.DropdownItem  onSelect={() => {    openDetails(comment.id);  }}  icon={<Icon.Details />}>  Details</Comment.DropdownItem>

<FloatingThread thread={thread}>  <button>Open thread</button></FloatingThread>

<FloatingThread thread={thread}>  <CommentPin    userId={thread.comments[0]?.userId}    style={{      position: "absolute",      left: thread.metadata.x,      top: thread.metadata.y,    }}  /></FloatingThread>

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";
// Creates a new private threadfunction Component() {  return <Composer visibility="private" />;}

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";
// Creates a new reply to an existing thread with custom metadatafunction Component({ threadId }) {  return (    <Composer      threadId={threadId}      commentMetadata={{        // Custom metadata here, e.g. tags, context, external IDs        tag: "important",        spam: false,      }}    />  );}