@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/_private/package.json

@@ -1,4 +1,4 @@
 {
-  "main": "../dist/_private/index.js",
-  "types": "../dist/_private/index.d.ts"
+  "main": "../dist/_private/index.cjs",
+  "types": "../dist/_private/index.d.cts"
 }

package/dist/_private/index.cjs

@@ -1,18 +1,18 @@
 'use strict';
 
-var components = require('../components.cjs');
-var AiChatAssistantMessage = require('../components/internal/AiChatAssistantMessage.cjs');
-var AiChatComposer = require('../components/internal/AiChatComposer.cjs');
-var AiChatUserMessage = require('../components/internal/AiChatUserMessage.cjs');
 var Button = require('../components/internal/Button.cjs');
 var List = require('../components/internal/List.cjs');
+var Prose = require('../components/internal/Prose.cjs');
 var Tooltip = require('../components/internal/Tooltip.cjs');
 var User = require('../components/internal/User.cjs');
 require('../icons/index.cjs');
-var index = require('../primitives/AiChatComposer/index.cjs');
 var capitalize = require('../utils/capitalize.cjs');
 var useInitial = require('../utils/use-initial.cjs');
 var useRefs = require('../utils/use-refs.cjs');
+var index = require('../primitives/AiChatComposer/index.cjs');
+var index$1 = require('../primitives/AiMessage/index.cjs');
+var index$2 = require('../primitives/Collapsible/index.cjs');
+var Markdown = require('../primitives/Markdown.cjs');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ArrowCornerDownRight = require('../icons/ArrowCornerDownRight.cjs');
 var ArrowCornerUpRight = require('../icons/ArrowCornerUpRight.cjs');
@@ -34,6 +34,7 @@ var Code = require('../icons/Code.cjs');
 var Comment = require('../icons/Comment.cjs');
 var Copy = require('../icons/Copy.cjs');
 var Cross = require('../icons/Cross.cjs');
+var CrossCircleFill = require('../icons/CrossCircleFill.cjs');
 var Delete = require('../icons/Delete.cjs');
 var Edit = require('../icons/Edit.cjs');
 var Ellipsis = require('../icons/Ellipsis.cjs');
@@ -47,6 +48,7 @@ var Lengthen = require('../icons/Lengthen.cjs');
 var ListOrdered = require('../icons/ListOrdered.cjs');
 var ListUnordered = require('../icons/ListUnordered.cjs');
 var Mention = require('../icons/Mention.cjs');
+var MinusCircle = require('../icons/MinusCircle.cjs');
 var QuestionMark = require('../icons/QuestionMark.cjs');
 var Redo = require('../icons/Redo.cjs');
 var Restore = require('../icons/Restore.cjs');
@@ -67,22 +69,20 @@ var Warning = require('../icons/Warning.cjs');
 
 
 
-exports.useComponents = components.useComponents;
-exports.AiChatAssistantMessage = AiChatAssistantMessage.AiChatAssistantMessage;
-exports.AiChatComposer = AiChatComposer.AiChatComposer;
-exports.AiChatUserMessage = AiChatUserMessage.AiChatUserMessage;
 exports.Button = Button.Button;
 exports.SelectButton = Button.SelectButton;
 exports.List = List.List;
+exports.Prose = Prose.Prose;
 exports.ShortcutTooltip = Tooltip.ShortcutTooltip;
 exports.Tooltip = Tooltip.Tooltip;
 exports.User = User.User;
-exports.AiChatComposerEditor = index.AiChatComposerEditor;
-exports.AiChatComposerForm = index.AiChatComposerForm;
-exports.AiChatComposerSubmit = index.AiChatComposerSubmit;
 exports.capitalize = capitalize.capitalize;
 exports.useInitial = useInitial.useInitial;
 exports.useRefs = useRefs.useRefs;
+exports.AiChatComposer = index;
+exports.AiMessage = index$1;
+exports.Collapsible = index$2;
+exports.Markdown = Markdown.Markdown;
 Object.defineProperty(exports, 'TooltipProvider', {
   enumerable: true,
   get: function () { return TooltipPrimitive.TooltipProvider; }
@@ -107,6 +107,7 @@ exports.CodeIcon = Code.CodeIcon;
 exports.CommentIcon = Comment.CommentIcon;
 exports.CopyIcon = Copy.CopyIcon;
 exports.CrossIcon = Cross.CrossIcon;
+exports.CrossCircleFillIcon = CrossCircleFill.CrossCircleFillIcon;
 exports.DeleteIcon = Delete.DeleteIcon;
 exports.EditIcon = Edit.EditIcon;
 exports.EllipsisIcon = Ellipsis.EllipsisIcon;
@@ -120,6 +121,7 @@ exports.LengthenIcon = Lengthen.LengthenIcon;
 exports.ListOrderedIcon = ListOrdered.ListOrderedIcon;
 exports.ListUnorderedIcon = ListUnordered.ListUnorderedIcon;
 exports.MentionIcon = Mention.MentionIcon;
+exports.MinusCircleIcon = MinusCircle.MinusCircleIcon;
 exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
 exports.RedoIcon = Redo.RedoIcon;
 exports.RestoreIcon = Restore.RestoreIcon;

package/dist/_private/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_private/index.d.cts

@@ -1,15 +1,18 @@
 import * as react from 'react';
-import { ComponentType, ComponentPropsWithoutRef, ElementType, ReactNode, ComponentProps, FormEvent, Ref, RefCallback } from 'react';
-import { UiAssistantMessage, CopilotId, UiUserMessage } from '@liveblocks/core';
+import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback, FormEvent, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export { TooltipProvider } from '@radix-ui/react-tooltip';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 
-interface GlobalComponents {
-    Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
+interface ButtonProps extends ComponentProps<"button"> {
+    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary" | "destructive";
+    size?: "default" | "large";
+    disableable?: boolean;
+    icon?: ReactNode;
 }
-type Components = GlobalComponents;
-declare function useComponents(components?: Partial<Components>): Components;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 type SlotProp = {
     /**
@@ -19,103 +22,6 @@ type SlotProp = {
 };
 type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
 
-interface GlobalOverrides {
-    USER_SELF: string;
-    USER_UNKNOWN: string;
-    LIST_REMAINING: (count: number) => string;
-    LIST_REMAINING_USERS: (count: number) => string;
-    LIST_REMAINING_COMMENTS: (count: number) => string;
-    EMOJI_PICKER_SEARCH_PLACEHOLDER: string;
-    EMOJI_PICKER_EMPTY: ReactNode;
-    EMOJI_PICKER_ERROR: (error: Error) => ReactNode;
-    EMOJI_PICKER_CHANGE_SKIN_TONE: string;
-    ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;
-    ATTACHMENT_ERROR: (error: Error) => string;
-}
-interface AiChatComposerOverrides {
-    AI_CHAT_COMPOSER_PLACEHOLDER: string;
-    AI_CHAT_COMPOSER_SEND: string;
-    AI_CHAT_COMPOSER_ABORT: string;
-}
-interface AiChatMessageOverrides {
-    AI_CHAT_MESSAGE_DELETED: string;
-    AI_CHAT_MESSAGE_THINKING: string;
-}
-
-interface AiChatAssistantMessageProps extends ComponentProps<"div"> {
-    /**
-     * The message to display.
-     */
-    message: UiAssistantMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;
-    /**
-     * Override the component's components.
-     */
-    components?: Partial<GlobalComponents>;
-}
-declare const AiChatAssistantMessage: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AiChatAssistantMessageProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
-
-interface AiChatComposerProps extends ComponentProps<"form"> {
-    /**
-     * The composer's initial value.
-     */
-    defaultValue?: string;
-    /**
-     * The event handler called when a chat message is submitted.
-     */
-    onComposerSubmit?: (message: {
-        /**
-         * The submitted message text.
-         */
-        text: string;
-    }, event: FormEvent<HTMLFormElement>) => void;
-    /**
-     * Whether the composer is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether to focus the editor on mount.
-     */
-    autoFocus?: boolean;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & AiChatComposerOverrides>;
-    /**
-     * The id of the chat the composer belongs to.
-     */
-    chatId: string;
-    /**
-     * The id of the copilot to use to send the message.
-     */
-    copilotId?: CopilotId;
-}
-declare const AiChatComposer: react.ForwardRefExoticComponent<Omit<AiChatComposerProps, "ref"> & react.RefAttributes<HTMLFormElement>>;
-
-interface AiChatUserMessageProps extends ComponentProps<"div"> {
-    /**
-     * The message to display.
-     */
-    message: UiUserMessage;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides>;
-}
-declare const AiChatUserMessage: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AiChatUserMessageProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
-
-interface ButtonProps extends ComponentProps<"button"> {
-    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary";
-    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 ListProps extends ComponentPropsWithSlot<"span"> {
     values: ReactNode[];
     formatRemaining?: (amount: number) => string;
@@ -124,6 +30,15 @@ interface ListProps extends ComponentPropsWithSlot<"span"> {
 }
 declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
 
+interface ProseProps extends ComponentProps<"div"> {
+    content: string;
+}
+/**
+ * This component renders Markdown content with `lb-prose`
+ * styles and custom components (code blocks, etc)
+ */
+declare function Prose({ content, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
+
 interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
     content: ReactNode;
     multiline?: boolean;
@@ -186,6 +101,8 @@ declare function CopyIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.E
 
 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;
@@ -212,6 +129,8 @@ declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runt
 
 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;
@@ -246,6 +165,18 @@ declare function UndoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.E
 
 declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function capitalize(string: string): 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 AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
     /**
      * The event handler called when a chat message is submitted.
@@ -261,7 +192,7 @@ interface AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
      */
     disabled?: boolean;
 }
-interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
+interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
     /**
      * The editor's initial value.
      */
@@ -306,16 +237,118 @@ declare const AiChatComposerEditor: react.ForwardRefExoticComponent<AiChatCompos
  */
 declare const AiChatComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
 
-declare function capitalize(string: string): string;
+declare const index$2_AiChatComposerEditor: typeof AiChatComposerEditor;
+declare const index$2_AiChatComposerForm: typeof AiChatComposerForm;
+declare const index$2_AiChatComposerSubmit: typeof AiChatComposerSubmit;
+declare namespace index$2 {
+  export {
+    index$2_AiChatComposerEditor as AiChatComposerEditor,
+    index$2_AiChatComposerForm as AiChatComposerForm,
+    index$2_AiChatComposerSubmit as AiChatComposerSubmit,
+    AiChatComposerEditor as Editor,
+    AiChatComposerForm as Form,
+    AiChatComposerSubmit as Submit,
+  };
+}
+
+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>;
+}
+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>;
+}
 
 /**
- * "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.
+ * --------------------------------------------------------------------------
+ * @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 function useInitial<T>(value: T | (() => T)): T;
+declare const AiMessageContent: react.ForwardRefExoticComponent<AiMessageContentProps & react.RefAttributes<HTMLDivElement>>;
 
-declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
+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,
+  };
+}
+
+type MarkdownComponents = {
+    CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
+    Link: ComponentType<MarkdownComponentsLinkProps>;
+    Heading: ComponentType<MarkdownComponentsHeadingProps>;
+    Image: ComponentType<MarkdownComponentsImageProps>;
+    Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
+};
+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;
+    components?: Partial<MarkdownComponents>;
+}
+declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
 
-export { AiChatAssistantMessage, AiChatAssistantMessageProps, AiChatComposer, AiChatComposerEditor, AiChatComposerEditorProps, AiChatComposerForm, AiChatComposerFormProps, AiChatComposerProps, AiChatComposerSubmit, AiChatComposerSubmitProps, AiChatUserMessage, AiChatUserMessageProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, CommentIcon, CopyIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobalComponents, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, MentionIcon, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useComponents, useInitial, useRefs };
+export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, 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, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useInitial, useRefs };