@liveblocks/react-ui
Version:
A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.
712 lines (630 loc) • 24.4 kB
text/typescript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
import * as react from 'react';
import { ComponentProps, ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, Ref, RefCallback, FormEvent } from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
export { TooltipProvider } from '@radix-ui/react-tooltip';
type AvatarProps = ComponentProps<"div"> & {
icon?: ReactNode;
} & Relax<{
/**
* The user ID to display the avatar for.
*/
userId: string;
} | {
/**
* The group ID to display the avatar for.
*/
groupId: string;
}>;
declare function Avatar({ userId, groupId, icon, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
interface ButtonProps extends ComponentProps<"button"> {
variant?: "default" | "toolbar" | "outline" | "ghost" | "primary" | "secondary" | "destructive";
size?: "default" | "large";
disableable?: boolean;
icon?: ReactNode;
}
declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
interface GroupProps extends ComponentProps<"span"> {
/**
* The group ID to display the group name for.
*/
groupId: string;
}
declare function Group({ groupId, className, children, ...props }: GroupProps): react_jsx_runtime.JSX.Element;
interface GroupDescriptionProps extends ComponentPropsWithoutRef<"span"> {
/**
* The group ID to display the group description for.
*/
groupId: string;
}
declare function GroupDescription({ groupId, className, ...props }: GroupDescriptionProps): react_jsx_runtime.JSX.Element | null;
type Direction = "ltr" | "rtl";
type SlotProp = {
/**
* Replace the rendered element by the one passed as a child.
*/
asChild?: boolean;
};
type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
interface ListProps extends ComponentPropsWithSlot<"span"> {
values: ReactNode[];
formatRemaining?: (amount: number) => string;
truncate?: number;
locale?: string;
}
declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
interface GlobalComponents {
Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
}
type MarkdownComponents = {
/**
* The component used to render paragraphs.
*
* @example
* ```md
* A paragraph.
*
* Another paragraph.
* ```
* ```tsx
* <Markdown
* components={{
* Paragraph: ({ children }) => <p className="...">{children}</p>
* }}
* />
* ```
*/
Paragraph: ComponentType<MarkdownComponentsParagraphProps>;
/**
* The component used to render inline elements (bold, italic, strikethrough, and inline code).
*
* @example
* ```md
* **Bold**, _italic_, ~~strikethrough~~, and `inline code`.
* ```
* ```tsx
* <Markdown
* components={{
* Inline: ({ type, children }) => {
* const Component = type;
* return <Component className="...">{children}</Component>;
* }
* }}
* />
* ```
*/
Inline: ComponentType<MarkdownComponentsInlineProps>;
/**
* The component used to render links.
*
* @example
* ```md
* A [link](https://liveblocks.io).
* ```
* ```tsx
* <Markdown
* components={{
* Link: ({ href, children }) => <a href={href} className="...">{children}</a>
* }}
* />
* ```
*/
Link: ComponentType<MarkdownComponentsLinkProps>;
/**
* The component used to render headings.
*
* @example
* ```md
* # Heading 1
* ## Heading 2
* ### Heading 3
* ```
* ```tsx
* <Markdown
* components={{
* Heading: ({ level, children }) => {
* const Heading = `h${level}` as const;
* return <Heading className="...">{children}</Heading>;
* }
* }}
* />
* ```
*/
Heading: ComponentType<MarkdownComponentsHeadingProps>;
/**
* The component used to render blockquotes.
*
* @example
* ```md
* > A blockquote.
* ```
* ```tsx
* <Markdown
* components={{
* Blockquote: ({ children }) => <blockquote className="...">{children}</blockquote>
* }}
* />
* ```
*/
Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
/**
* The component used to render code blocks.
*
* @example
* ```md
* ```javascript
* const a = 1;
* ```
* ```
* ```tsx
* <Markdown
* components={{
* CodeBlock: ({ language, code }) => (
* <pre data-language={language} className="...">
* <code className="...">{code}</code>
* </pre>
* )
* }}
* />
* ```
*/
CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
/**
* The component used to render images.
*
* @example
* ```md
* 
* ```
* ```tsx
* <Markdown
* components={{
* Image: ({ src, alt }) => <img src={src} alt={alt} className="...">
* }}
* />
* ```
*/
Image: ComponentType<MarkdownComponentsImageProps>;
/**
* The component used to render lists.
*
* @example
* ```md
* 1. An ordered list item
* - An unordered list item
* - [x] A checked list item
* ```
* ```tsx
* <Markdown
* components={{
* List: ({ type, items, start }) => {
* const List = type === "ordered" ? "ol" : "ul";
* return (
* <List start={start}>
* {items.map((item, index) => (
* <li key={index}>
* {item.children}
* </li>
* ))}
* </List>
* );
* }
* }}
* />
* ```
*/
List: ComponentType<MarkdownComponentsListProps>;
/**
* The component used to render tables.
*
* @example
* ```md
* | Heading 1 | Heading 2 |
* |-----------|-----------|
* | Cell 1 | Cell 2 |
* | Cell 3 | Cell 4 |
* ```
* ```tsx
* <Markdown
* components={{
* Table: ({ headings, rows }) => (
* <table>
* <thead>
* <tr>
* {headings.map(({ children }, index) => (
* <th key={index}>{children}</th>
* ))}
* </tr>
* </thead>
* <tbody>
* {rows.map((row, index) => (
* <tr key={index}>
* {row.map(({ children }, index) => (
* <td key={index}>{children}</td>
* ))}
* </tr>
* ))}
* </tbody>
* </table>
* )
* }}
* />
* ```
*/
Table: ComponentType<MarkdownComponentsTableProps>;
/**
* The component used to render separators.
*
* @example
* ```md
* ---
* ```
* ```tsx
* <Markdown components={{ Separator: () => <hr className="..." /> }} />
* ```
*/
Separator: ComponentType;
};
interface MarkdownComponentsInlineProps {
type: "strong" | "em" | "code" | "del";
children: ReactNode;
}
interface MarkdownComponentsParagraphProps {
children: ReactNode;
}
interface MarkdownComponentsTableCell {
align?: "left" | "center" | "right";
children: ReactNode;
}
interface MarkdownComponentsTableProps {
headings: MarkdownComponentsTableCell[];
rows: MarkdownComponentsTableCell[][];
}
interface MarkdownComponentsListItem {
checked?: boolean;
children: ReactNode;
}
type MarkdownComponentsListProps = Relax<MarkdownComponentsOrderedListProps | MarkdownComponentsUnorderedListProps>;
interface MarkdownComponentsOrderedListProps {
type: "ordered";
items: MarkdownComponentsListItem[];
start: number;
}
interface MarkdownComponentsUnorderedListProps {
type: "unordered";
items: MarkdownComponentsListItem[];
}
interface MarkdownComponentsBlockquoteProps {
children: ReactNode;
}
interface MarkdownComponentsImageProps {
src: string;
alt: string;
title?: string;
}
interface MarkdownComponentsHeadingProps {
level: 1 | 2 | 3 | 4 | 5 | 6;
children: ReactNode;
}
interface MarkdownComponentsLinkProps {
href: string;
title?: string;
children: ReactNode;
}
interface MarkdownComponentsCodeBlockProps {
code: string;
language?: string;
}
interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
content: string;
partial?: boolean;
components?: Partial<MarkdownComponents>;
}
declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
interface ProseProps extends ComponentProps<"div"> {
content: string;
partial?: boolean;
components?: Partial<GlobalComponents & {
markdown?: Partial<MarkdownComponents>;
}>;
}
/**
* This component renders Markdown content with `lb-prose`
* styles and custom components (code blocks, etc)
*/
declare function Prose({ content, partial, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
content: ReactNode;
multiline?: boolean;
}
interface ShortcutTooltipProps extends TooltipProps {
shortcut?: string;
}
declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
interface UserProps extends ComponentProps<"span"> {
/**
* The user ID to display the user name for.
*/
userId: string;
/**
* Whether to replace the user name with "you" ($.USER_SELF) for the current user.
*/
replaceSelf?: boolean;
}
declare function User({ userId, replaceSelf, className, children, ...props }: UserProps): react_jsx_runtime.JSX.Element;
declare function ArrowCornerDownRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ArrowCornerUpRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ArrowDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ArrowUpIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function AttachmentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BellIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BellCrossedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BlockquoteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BoldIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CheckIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CheckCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CheckCircleFillIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronLeftIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronUpIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CodeIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CommentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CopyIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CrossCircleFillIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function DeleteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EditIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EllipsisIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EmojiIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EmojiPlusIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function GlobeIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function H1Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function H2Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function H3Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ItalicIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function LengthenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ListOrderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function MinusCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function RestoreIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function RetryIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SearchIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SendIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ShortenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SparklesIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SparklesTextIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SpinnerIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function StopIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function StrikethroughIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function TextIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function TranslateIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function UnderlineIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function UndoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function UserIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function UsersIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function capitalize(string: string): string;
/**
* Construct class names strings.
*/
declare function cn(...args: (string | number | boolean | undefined | null)[]): string;
/**
* "Freezes" a given value, so that it will return the same value/instance on
* each subsequent render. This can be used to freeze "initial" values for
* custom hooks, much like how `useState(initialState)` or
* `useRef(initialValue)` works.
*/
declare function useInitial<T>(value: T | (() => T)): T;
declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
interface AiComposerSubmitMessage {
/**
* The submitted message text.
*/
text: string;
}
interface AiComposerFormProps extends ComponentPropsWithSlot<"form"> {
/**
* The ID of the chat the composer belongs to.
*/
chatId?: string;
/**
* The event handler called when the composer is submitted.
*/
onComposerSubmit?: (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => Promise<void> | void;
/**
* Whether the composer is disabled.
*/
disabled?: boolean;
}
interface AiComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
/**
* The reading direction of the editor and related elements.
*/
dir?: Direction;
/**
* The editor's initial value.
*/
defaultValue?: string;
/**
* The text to display when the editor is empty.
*/
placeholder?: string;
/**
* Whether the editor is disabled.
*/
disabled?: boolean;
/**
* Whether to focus the editor on mount.
*/
autoFocus?: boolean;
}
type AiComposerSubmitProps = ComponentPropsWithSlot<"button">;
/**
* Surrounds the AI composer's content and handles submissions.
*
* @example
* <AiComposer.Form onComposerSubmit={({ text }) => {}}>
* <AiComposer.Editor />
* <AiComposer.Submit />
* </AiComposer.Form>
*/
declare const AiComposerForm: react.ForwardRefExoticComponent<AiComposerFormProps & react.RefAttributes<HTMLFormElement>>;
/**
* Displays the AI composer's editor.
*
* @example
* <AiComposer.Editor placeholder="Write a message…" />
*/
declare const AiComposerEditor: react.ForwardRefExoticComponent<AiComposerEditorProps & react.RefAttributes<HTMLDivElement>>;
/**
* A button to submit the AI composer's content.
*
* @example
* <AiComposer.Submit>Send</AiComposer.Submit>
*/
declare const AiComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
/**
* A button to abort a response related to the AI composer.
*
* @example
* <AiComposer.Abort>Cancel</AiComposer.Abort>
*/
declare const AiComposerAbort: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
declare const index$2_AiComposerAbort: typeof AiComposerAbort;
declare const index$2_AiComposerForm: typeof AiComposerForm;
declare const index$2_AiComposerSubmit: typeof AiComposerSubmit;
declare namespace index$2 {
export {
AiComposerAbort as Abort,
index$2_AiComposerAbort as AiComposerAbort,
index$2_AiComposerForm as AiComposerForm,
index$2_AiComposerSubmit as AiComposerSubmit,
AiComposerEditor as Editor,
AiComposerForm as Form,
AiComposerSubmit as Submit,
};
}
type AiComposerContext = {
/**
* Whether the composer is currently disabled.
*/
isDisabled: boolean;
/**
* Whether the composer can currently be submitted.
*/
canSubmit: boolean;
/**
* Whether the composer can currently abort a response in its related chat.
*/
canAbort: boolean;
/**
* Whether the editor is currently focused.
*/
isFocused: boolean;
/**
* Whether the editor is currently empty.
*/
isEmpty: boolean;
/**
* Submit the composer programmatically.
*/
submit: () => void;
/**
* Abort the composer's related response programmatically.
*/
abort: () => void;
/**
* Clear the composer programmatically.
*/
clear: () => void;
/**
* Select the editor programmatically.
*/
select: () => void;
/**
* Focus the editor programmatically.
*/
focus: () => void;
/**
* Blur the editor programmatically.
*/
blur: () => void;
};
declare const AiComposerContext: react.Context<AiComposerContext | null>;
declare function useAiComposer(): AiComposerContext;
type AiMessageContentTextPartProps = {
part: AiTextPart;
};
type AiMessageContentReasoningPartProps = {
part: AiReasoningPart;
};
interface AiMessageContentComponents {
/**
* The component used to display text parts.
*/
TextPart: ComponentType<AiMessageContentTextPartProps>;
/**
* The component used to display reasoning parts.
*/
ReasoningPart: ComponentType<AiMessageContentReasoningPartProps>;
/**
* The component used to display knowledge retrieval parts.
*/
RetrievalPart: ComponentType<AiMessageContentRetrievalPartProps>;
/**
* The component used to display
*/
SourcesPart: ComponentType<AiMessageContentSourcesPartProps>;
}
interface AiMessageContentProps extends ComponentPropsWithSlot<"div"> {
/**
* The message contents to display.
*/
message: AiChatMessage;
/**
* Optional overrides for the default components to render each part within
* the message content.
*/
components?: Partial<AiMessageContentComponents>;
}
/**
* --------------------------------------------------------------------------
* @private The API for this component is not yet stable.
* --------------------------------------------------------------------------
*
* Primitive to help display an user or assistant message’s content, which is
* an array of parts.
*
* @example
* <AiMessage.Content message={message} components={{ TextPart }} />
*/
declare const AiMessageContent: react.ForwardRefExoticComponent<AiMessageContentProps & react.RefAttributes<HTMLDivElement>>;
declare namespace index$1 {
export {
AiMessageContent as Content,
};
}
interface RootProps extends ComponentPropsWithSlot<"div"> {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
disabled?: boolean;
}
declare const CollapsibleRoot: react.ForwardRefExoticComponent<RootProps & react.RefAttributes<HTMLDivElement>>;
declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
declare const CollapsibleContent: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
declare namespace index {
export {
CollapsibleContent as Content,
CollapsibleRoot as Root,
CollapsibleTrigger as Trigger,
};
}
export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useRefs };