@assistant-ui/react 0.0.4 → 0.0.6

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { FC, PropsWithChildren } from 'react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
-import { Message } from 'ai';
 import { UseChatHelpers } from 'ai/react';
+import { UseBoundStore, StoreApi } from 'zustand';
 
 declare const ThreadRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
@@ -36,18 +36,18 @@ type ThreadMessagesProps = {
     components: {
         Message: React.ComponentType;
         UserMessage?: React.ComponentType;
-        EditingUserMessage?: React.ComponentType;
+        EditComposer?: React.ComponentType;
         AssistantMessage?: React.ComponentType;
     } | {
         Message?: React.ComponentType;
         UserMessage: React.ComponentType;
-        EditingUserMessage?: React.ComponentType;
+        EditComposer?: React.ComponentType;
         AssistantMessage: React.ComponentType;
     };
 };
 declare const ThreadMessages: FC<ThreadMessagesProps>;
 
-declare namespace index$5 {
+declare namespace index$4 {
   export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadViewport as Viewport };
 }
 
@@ -67,19 +67,65 @@ declare const ComposerSend: react.ForwardRefExoticComponent<Pick<Omit<react.Deta
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
-declare const ComposerStop: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+declare const ComposerCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
 } & {
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
-declare namespace index$4 {
-  export { ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send, ComposerStop as Stop };
+type ComposerIfFilters = {
+    editing: boolean | undefined;
+};
+type ComposerIfProps = PropsWithChildren<RequireAtLeastOne<ComposerIfFilters>>;
+declare const ComposerIf: FC<ComposerIfProps>;
+
+declare namespace index$3 {
+  export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
 }
 
+type BranchState = {
+    branchId: number;
+    branchCount: number;
+};
+
+type ComposerState = {
+    isEditing: boolean;
+    canCancel: boolean;
+    edit: () => void;
+    send: () => void;
+    cancel: () => void;
+    value: string;
+    setValue: (value: string) => void;
+};
+type ComposerStore = {
+    useComposer: UseBoundStore<StoreApi<ComposerState>>;
+};
+
+type TextContent = {
+    type: "text";
+    text: string;
+};
+type ImageContent = {
+    type: "image";
+    image: string;
+};
+type ThreadUserMessageContent = TextContent | ImageContent;
+type ThreadAssistantMessageContent = TextContent | ImageContent;
+type ThreadUserMessage = {
+    id: string;
+    role: "user";
+    content: ThreadUserMessageContent[];
+};
+type ThreadAssistantMessage = {
+    id: string;
+    role: "assistant";
+    content: ThreadAssistantMessageContent[];
+};
+type ThreadMessage = ThreadUserMessage | ThreadAssistantMessage;
+
 type MessageProviderProps = {
     children?: React.ReactNode;
-    message: Message;
+    message: ThreadMessage;
 };
 declare const MessageProvider: FC<MessageProviderProps>;
 
@@ -92,7 +138,6 @@ declare const MessageRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Detai
 type MessageIfFilters = {
     user: boolean | undefined;
     assistant: boolean | undefined;
-    editing: boolean | undefined;
     hasBranches: boolean | undefined;
     copied: boolean | undefined;
     lastOrHover: boolean | undefined;
@@ -104,10 +149,8 @@ declare const MessageIf: FC<MessageIfProps>;
 
 declare const MessageContent: FC;
 
-declare const MessageEditableContent: react.ForwardRefExoticComponent<TextareaAutosizeProps & react.RefAttributes<HTMLTextAreaElement>>;
-
-declare namespace index$3 {
-  export { MessageContent as Content, MessageEditableContent as EditableContent, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
+declare namespace index$2 {
+  export { MessageContent as Content, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
 }
 
 declare const BranchPickerNext: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -134,7 +177,7 @@ declare const BranchPickerRoot: react.ForwardRefExoticComponent<Pick<Omit<react.
     hideWhenSingleBranch?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare namespace index$2 {
+declare namespace index$1 {
   export { BranchPickerCount as Count, BranchPickerNext as Next, BranchPickerNumber as Number, BranchPickerPrevious as Previous, BranchPickerRoot as Root };
 }
 
@@ -144,7 +187,8 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     hideWhenBusy?: boolean;
-    hideWhenNotLastOrHover?: boolean;
+    autohide?: "always" | "not-last" | "never";
+    autohideFloat?: "always" | "single-branch" | "never";
 } & react.RefAttributes<HTMLDivElement>>;
 
 type ActionBarCopyProps = {
@@ -168,75 +212,40 @@ declare const ActionBarEdit: react.ForwardRefExoticComponent<Pick<Omit<react.Det
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
-declare namespace index$1 {
-  export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
-}
-
-declare const EditBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean;
-}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
-
-declare const EditBarSave: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
-
-declare const EditBarCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
-
 declare namespace index {
-  export { EditBarCancel as Cancel, EditBarRoot as Root, EditBarSave as Save };
+  export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
 }
 
-type ThreadProviderProps = {
+type VercelAIChatAssistantProviderProps = {
     chat: UseChatHelpers;
     children: React.ReactNode;
 };
-declare const VercelAIThreadProvider: FC<ThreadProviderProps>;
-
-type BranchState = {
-    branchId: number;
-    branchCount: number;
-};
+declare const VercelAIChatAssistantProvider: FC<VercelAIChatAssistantProviderProps>;
 
-type MessageEditState = {
-    isEditing: false;
-} | {
-    isEditing: true;
-    value: string;
-};
-type MessageStore = {
-    message: Message;
-    editState: MessageEditState;
-    setEditState: (value: MessageEditState) => void;
+type MessageState = {
+    message: ThreadMessage;
     branchState: BranchState;
+    isLast: boolean;
     isCopied: boolean;
     setIsCopied: (value: boolean) => void;
     isHovering: boolean;
     setIsHovering: (value: boolean) => void;
 };
-declare const useMessageContext: <Selection>(consumerName: string, selector: (s: MessageStore) => Selection) => Selection;
+type MessageStore = ComposerStore & {
+    useMessage: UseBoundStore<StoreApi<MessageState>>;
+};
+declare const useMessageContext: () => MessageStore;
 
 declare const useCopyMessage: ({ copiedDuration }: {
     copiedDuration?: number | undefined;
 }) => (() => void) | null;
 
-declare const useReloadMessage: () => (() => Promise<void>) | null;
+declare const useReloadMessage: () => (() => void) | null;
 
 declare const useBeginMessageEdit: () => (() => void) | null;
 
-declare const useCancelMessageEdit: () => (() => void) | null;
-
-declare const useSaveMessageEdit: () => (() => void) | null;
-
 declare const useGoToNextBranch: () => (() => void) | null;
 
 declare const useGoToPreviousBranch: () => (() => void) | null;
 
-export { index$1 as ActionBarPrimitive, index$2 as BranchPickerPrimitive, index$4 as ComposerPrimitive, index as EditBarPrimitive, index$3 as MessagePrimitive, index$5 as ThreadPrimitive, VercelAIThreadProvider, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCancelMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage, useSaveMessageEdit };
+export { index as ActionBarPrimitive, index$1 as BranchPickerPrimitive, index$3 as ComposerPrimitive, index$2 as MessagePrimitive, index$4 as ThreadPrimitive, VercelAIChatAssistantProvider as VercelAIAssistantProvider, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { FC, PropsWithChildren } from 'react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
-import { Message } from 'ai';
 import { UseChatHelpers } from 'ai/react';
+import { UseBoundStore, StoreApi } from 'zustand';
 
 declare const ThreadRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
@@ -36,18 +36,18 @@ type ThreadMessagesProps = {
     components: {
         Message: React.ComponentType;
         UserMessage?: React.ComponentType;
-        EditingUserMessage?: React.ComponentType;
+        EditComposer?: React.ComponentType;
         AssistantMessage?: React.ComponentType;
     } | {
         Message?: React.ComponentType;
         UserMessage: React.ComponentType;
-        EditingUserMessage?: React.ComponentType;
+        EditComposer?: React.ComponentType;
         AssistantMessage: React.ComponentType;
     };
 };
 declare const ThreadMessages: FC<ThreadMessagesProps>;
 
-declare namespace index$5 {
+declare namespace index$4 {
   export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadViewport as Viewport };
 }
 
@@ -67,19 +67,65 @@ declare const ComposerSend: react.ForwardRefExoticComponent<Pick<Omit<react.Deta
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
-declare const ComposerStop: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+declare const ComposerCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
 } & {
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
-declare namespace index$4 {
-  export { ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send, ComposerStop as Stop };
+type ComposerIfFilters = {
+    editing: boolean | undefined;
+};
+type ComposerIfProps = PropsWithChildren<RequireAtLeastOne<ComposerIfFilters>>;
+declare const ComposerIf: FC<ComposerIfProps>;
+
+declare namespace index$3 {
+  export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
 }
 
+type BranchState = {
+    branchId: number;
+    branchCount: number;
+};
+
+type ComposerState = {
+    isEditing: boolean;
+    canCancel: boolean;
+    edit: () => void;
+    send: () => void;
+    cancel: () => void;
+    value: string;
+    setValue: (value: string) => void;
+};
+type ComposerStore = {
+    useComposer: UseBoundStore<StoreApi<ComposerState>>;
+};
+
+type TextContent = {
+    type: "text";
+    text: string;
+};
+type ImageContent = {
+    type: "image";
+    image: string;
+};
+type ThreadUserMessageContent = TextContent | ImageContent;
+type ThreadAssistantMessageContent = TextContent | ImageContent;
+type ThreadUserMessage = {
+    id: string;
+    role: "user";
+    content: ThreadUserMessageContent[];
+};
+type ThreadAssistantMessage = {
+    id: string;
+    role: "assistant";
+    content: ThreadAssistantMessageContent[];
+};
+type ThreadMessage = ThreadUserMessage | ThreadAssistantMessage;
+
 type MessageProviderProps = {
     children?: React.ReactNode;
-    message: Message;
+    message: ThreadMessage;
 };
 declare const MessageProvider: FC<MessageProviderProps>;
 
@@ -92,7 +138,6 @@ declare const MessageRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Detai
 type MessageIfFilters = {
     user: boolean | undefined;
     assistant: boolean | undefined;
-    editing: boolean | undefined;
     hasBranches: boolean | undefined;
     copied: boolean | undefined;
     lastOrHover: boolean | undefined;
@@ -104,10 +149,8 @@ declare const MessageIf: FC<MessageIfProps>;
 
 declare const MessageContent: FC;
 
-declare const MessageEditableContent: react.ForwardRefExoticComponent<TextareaAutosizeProps & react.RefAttributes<HTMLTextAreaElement>>;
-
-declare namespace index$3 {
-  export { MessageContent as Content, MessageEditableContent as EditableContent, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
+declare namespace index$2 {
+  export { MessageContent as Content, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
 }
 
 declare const BranchPickerNext: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -134,7 +177,7 @@ declare const BranchPickerRoot: react.ForwardRefExoticComponent<Pick<Omit<react.
     hideWhenSingleBranch?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare namespace index$2 {
+declare namespace index$1 {
   export { BranchPickerCount as Count, BranchPickerNext as Next, BranchPickerNumber as Number, BranchPickerPrevious as Previous, BranchPickerRoot as Root };
 }
 
@@ -144,7 +187,8 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     hideWhenBusy?: boolean;
-    hideWhenNotLastOrHover?: boolean;
+    autohide?: "always" | "not-last" | "never";
+    autohideFloat?: "always" | "single-branch" | "never";
 } & react.RefAttributes<HTMLDivElement>>;
 
 type ActionBarCopyProps = {
@@ -168,75 +212,40 @@ declare const ActionBarEdit: react.ForwardRefExoticComponent<Pick<Omit<react.Det
     asChild?: boolean;
 }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
 
-declare namespace index$1 {
-  export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
-}
-
-declare const EditBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean;
-}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
-
-declare const EditBarSave: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
-
-declare const EditBarCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
-
 declare namespace index {
-  export { EditBarCancel as Cancel, EditBarRoot as Root, EditBarSave as Save };
+  export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
 }
 
-type ThreadProviderProps = {
+type VercelAIChatAssistantProviderProps = {
     chat: UseChatHelpers;
     children: React.ReactNode;
 };
-declare const VercelAIThreadProvider: FC<ThreadProviderProps>;
-
-type BranchState = {
-    branchId: number;
-    branchCount: number;
-};
+declare const VercelAIChatAssistantProvider: FC<VercelAIChatAssistantProviderProps>;
 
-type MessageEditState = {
-    isEditing: false;
-} | {
-    isEditing: true;
-    value: string;
-};
-type MessageStore = {
-    message: Message;
-    editState: MessageEditState;
-    setEditState: (value: MessageEditState) => void;
+type MessageState = {
+    message: ThreadMessage;
     branchState: BranchState;
+    isLast: boolean;
     isCopied: boolean;
     setIsCopied: (value: boolean) => void;
     isHovering: boolean;
     setIsHovering: (value: boolean) => void;
 };
-declare const useMessageContext: <Selection>(consumerName: string, selector: (s: MessageStore) => Selection) => Selection;
+type MessageStore = ComposerStore & {
+    useMessage: UseBoundStore<StoreApi<MessageState>>;
+};
+declare const useMessageContext: () => MessageStore;
 
 declare const useCopyMessage: ({ copiedDuration }: {
     copiedDuration?: number | undefined;
 }) => (() => void) | null;
 
-declare const useReloadMessage: () => (() => Promise<void>) | null;
+declare const useReloadMessage: () => (() => void) | null;
 
 declare const useBeginMessageEdit: () => (() => void) | null;
 
-declare const useCancelMessageEdit: () => (() => void) | null;
-
-declare const useSaveMessageEdit: () => (() => void) | null;
-
 declare const useGoToNextBranch: () => (() => void) | null;
 
 declare const useGoToPreviousBranch: () => (() => void) | null;
 
-export { index$1 as ActionBarPrimitive, index$2 as BranchPickerPrimitive, index$4 as ComposerPrimitive, index as EditBarPrimitive, index$3 as MessagePrimitive, index$5 as ThreadPrimitive, VercelAIThreadProvider, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCancelMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage, useSaveMessageEdit };
+export { index as ActionBarPrimitive, index$1 as BranchPickerPrimitive, index$3 as ComposerPrimitive, index$2 as MessagePrimitive, index$4 as ThreadPrimitive, VercelAIChatAssistantProvider as VercelAIAssistantProvider, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };