@assistant-ui/react 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +42 -54
  2. package/dist/index.d.ts +42 -54
  3. package/dist/index.js +420 -399
  4. package/dist/index.mjs +427 -402
  5. package/package.json +4 -8
package/dist/index.d.mts CHANGED
@@ -3,6 +3,7 @@ import { FC, PropsWithChildren } from 'react';
3
3
  import { TextareaAutosizeProps } from 'react-textarea-autosize';
4
4
  import { Message } from 'ai';
5
5
  import { UseChatHelpers } from 'ai/react';
6
+ import { UseBoundStore, StoreApi } from 'zustand';
6
7
 
7
8
  declare const ThreadRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
8
9
  ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
@@ -36,18 +37,18 @@ type ThreadMessagesProps = {
36
37
  components: {
37
38
  Message: React.ComponentType;
38
39
  UserMessage?: React.ComponentType;
39
- EditingUserMessage?: React.ComponentType;
40
+ EditComposer?: React.ComponentType;
40
41
  AssistantMessage?: React.ComponentType;
41
42
  } | {
42
43
  Message?: React.ComponentType;
43
44
  UserMessage: React.ComponentType;
44
- EditingUserMessage?: React.ComponentType;
45
+ EditComposer?: React.ComponentType;
45
46
  AssistantMessage: React.ComponentType;
46
47
  };
47
48
  };
48
49
  declare const ThreadMessages: FC<ThreadMessagesProps>;
49
50
 
50
- declare namespace index$5 {
51
+ declare namespace index$4 {
51
52
  export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadViewport as Viewport };
52
53
  }
53
54
 
@@ -67,14 +68,20 @@ declare const ComposerSend: react.ForwardRefExoticComponent<Pick<Omit<react.Deta
67
68
  asChild?: boolean;
68
69
  }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
69
70
 
70
- declare const ComposerStop: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
71
+ declare const ComposerCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
71
72
  ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
72
73
  } & {
73
74
  asChild?: boolean;
74
75
  }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
75
76
 
76
- declare namespace index$4 {
77
- export { ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send, ComposerStop as Stop };
77
+ type ComposerIfFilters = {
78
+ editing: boolean | undefined;
79
+ };
80
+ type ComposerIfProps = PropsWithChildren<RequireAtLeastOne<ComposerIfFilters>>;
81
+ declare const ComposerIf: FC<ComposerIfProps>;
82
+
83
+ declare namespace index$3 {
84
+ export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
78
85
  }
79
86
 
80
87
  type MessageProviderProps = {
@@ -92,7 +99,6 @@ declare const MessageRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Detai
92
99
  type MessageIfFilters = {
93
100
  user: boolean | undefined;
94
101
  assistant: boolean | undefined;
95
- editing: boolean | undefined;
96
102
  hasBranches: boolean | undefined;
97
103
  copied: boolean | undefined;
98
104
  lastOrHover: boolean | undefined;
@@ -104,10 +110,8 @@ declare const MessageIf: FC<MessageIfProps>;
104
110
 
105
111
  declare const MessageContent: FC;
106
112
 
107
- declare const MessageEditableContent: react.ForwardRefExoticComponent<TextareaAutosizeProps & react.RefAttributes<HTMLTextAreaElement>>;
108
-
109
- declare namespace index$3 {
110
- export { MessageContent as Content, MessageEditableContent as EditableContent, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
113
+ declare namespace index$2 {
114
+ export { MessageContent as Content, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
111
115
  }
112
116
 
113
117
  declare const BranchPickerNext: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -134,7 +138,7 @@ declare const BranchPickerRoot: react.ForwardRefExoticComponent<Pick<Omit<react.
134
138
  hideWhenSingleBranch?: boolean;
135
139
  } & react.RefAttributes<HTMLDivElement>>;
136
140
 
137
- declare namespace index$2 {
141
+ declare namespace index$1 {
138
142
  export { BranchPickerCount as Count, BranchPickerNext as Next, BranchPickerNumber as Number, BranchPickerPrevious as Previous, BranchPickerRoot as Root };
139
143
  }
140
144
 
@@ -144,7 +148,8 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
144
148
  asChild?: boolean;
145
149
  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
146
150
  hideWhenBusy?: boolean;
147
- hideWhenNotLastOrHover?: boolean;
151
+ autohide?: "always" | "not-last" | "never";
152
+ autohideFloat?: "always" | "single-branch" | "never";
148
153
  } & react.RefAttributes<HTMLDivElement>>;
149
154
 
150
155
  type ActionBarCopyProps = {
@@ -168,75 +173,58 @@ declare const ActionBarEdit: react.ForwardRefExoticComponent<Pick<Omit<react.Det
168
173
  asChild?: boolean;
169
174
  }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
170
175
 
171
- declare namespace index$1 {
172
- export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
173
- }
174
-
175
- declare const EditBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
176
- ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
177
- } & {
178
- asChild?: boolean;
179
- }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
180
-
181
- declare const EditBarSave: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
182
- ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
183
- } & {
184
- asChild?: boolean;
185
- }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
186
-
187
- declare const EditBarCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
188
- ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
189
- } & {
190
- asChild?: boolean;
191
- }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
192
-
193
176
  declare namespace index {
194
- export { EditBarCancel as Cancel, EditBarRoot as Root, EditBarSave as Save };
177
+ export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
195
178
  }
196
179
 
197
- type ThreadProviderProps = {
180
+ type VercelAIAssistantProviderProps = {
198
181
  chat: UseChatHelpers;
199
182
  children: React.ReactNode;
200
183
  };
201
- declare const VercelAIThreadProvider: FC<ThreadProviderProps>;
184
+ declare const VercelAIAssistantProvider: FC<VercelAIAssistantProviderProps>;
185
+
186
+ type ComposerState = {
187
+ isEditing: boolean;
188
+ canCancel: boolean;
189
+ edit: () => void;
190
+ send: () => void;
191
+ cancel: () => void;
192
+ value: string;
193
+ setValue: (value: string) => void;
194
+ };
195
+ type ComposerStore = {
196
+ useComposer: UseBoundStore<StoreApi<ComposerState>>;
197
+ };
202
198
 
203
199
  type BranchState = {
204
200
  branchId: number;
205
201
  branchCount: number;
206
202
  };
207
203
 
208
- type MessageEditState = {
209
- isEditing: false;
210
- } | {
211
- isEditing: true;
212
- value: string;
213
- };
214
- type MessageStore = {
204
+ type MessageState = {
215
205
  message: Message;
216
- editState: MessageEditState;
217
- setEditState: (value: MessageEditState) => void;
218
206
  branchState: BranchState;
207
+ isLast: boolean;
219
208
  isCopied: boolean;
220
209
  setIsCopied: (value: boolean) => void;
221
210
  isHovering: boolean;
222
211
  setIsHovering: (value: boolean) => void;
223
212
  };
224
- declare const useMessageContext: <Selection>(consumerName: string, selector: (s: MessageStore) => Selection) => Selection;
213
+ type MessageStore = ComposerStore & {
214
+ useMessage: UseBoundStore<StoreApi<MessageState>>;
215
+ };
216
+ declare const useMessageContext: () => MessageStore;
225
217
 
226
218
  declare const useCopyMessage: ({ copiedDuration }: {
227
219
  copiedDuration?: number | undefined;
228
220
  }) => (() => void) | null;
229
221
 
230
- declare const useReloadMessage: () => (() => Promise<void>) | null;
222
+ declare const useReloadMessage: () => (() => void) | null;
231
223
 
232
224
  declare const useBeginMessageEdit: () => (() => void) | null;
233
225
 
234
- declare const useCancelMessageEdit: () => (() => void) | null;
235
-
236
- declare const useSaveMessageEdit: () => (() => void) | null;
237
-
238
226
  declare const useGoToNextBranch: () => (() => void) | null;
239
227
 
240
228
  declare const useGoToPreviousBranch: () => (() => void) | null;
241
229
 
242
- 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 };
230
+ export { index as ActionBarPrimitive, index$1 as BranchPickerPrimitive, index$3 as ComposerPrimitive, index$2 as MessagePrimitive, index$4 as ThreadPrimitive, VercelAIAssistantProvider as VercelAIThreadProvider, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { FC, PropsWithChildren } from 'react';
3
3
  import { TextareaAutosizeProps } from 'react-textarea-autosize';
4
4
  import { Message } from 'ai';
5
5
  import { UseChatHelpers } from 'ai/react';
6
+ import { UseBoundStore, StoreApi } from 'zustand';
6
7
 
7
8
  declare const ThreadRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
8
9
  ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
@@ -36,18 +37,18 @@ type ThreadMessagesProps = {
36
37
  components: {
37
38
  Message: React.ComponentType;
38
39
  UserMessage?: React.ComponentType;
39
- EditingUserMessage?: React.ComponentType;
40
+ EditComposer?: React.ComponentType;
40
41
  AssistantMessage?: React.ComponentType;
41
42
  } | {
42
43
  Message?: React.ComponentType;
43
44
  UserMessage: React.ComponentType;
44
- EditingUserMessage?: React.ComponentType;
45
+ EditComposer?: React.ComponentType;
45
46
  AssistantMessage: React.ComponentType;
46
47
  };
47
48
  };
48
49
  declare const ThreadMessages: FC<ThreadMessagesProps>;
49
50
 
50
- declare namespace index$5 {
51
+ declare namespace index$4 {
51
52
  export { ThreadEmpty as Empty, ThreadIf as If, ThreadMessages as Messages, ThreadRoot as Root, ThreadViewport as Viewport };
52
53
  }
53
54
 
@@ -67,14 +68,20 @@ declare const ComposerSend: react.ForwardRefExoticComponent<Pick<Omit<react.Deta
67
68
  asChild?: boolean;
68
69
  }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
69
70
 
70
- declare const ComposerStop: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
71
+ declare const ComposerCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
71
72
  ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
72
73
  } & {
73
74
  asChild?: boolean;
74
75
  }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
75
76
 
76
- declare namespace index$4 {
77
- export { ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send, ComposerStop as Stop };
77
+ type ComposerIfFilters = {
78
+ editing: boolean | undefined;
79
+ };
80
+ type ComposerIfProps = PropsWithChildren<RequireAtLeastOne<ComposerIfFilters>>;
81
+ declare const ComposerIf: FC<ComposerIfProps>;
82
+
83
+ declare namespace index$3 {
84
+ export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
78
85
  }
79
86
 
80
87
  type MessageProviderProps = {
@@ -92,7 +99,6 @@ declare const MessageRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Detai
92
99
  type MessageIfFilters = {
93
100
  user: boolean | undefined;
94
101
  assistant: boolean | undefined;
95
- editing: boolean | undefined;
96
102
  hasBranches: boolean | undefined;
97
103
  copied: boolean | undefined;
98
104
  lastOrHover: boolean | undefined;
@@ -104,10 +110,8 @@ declare const MessageIf: FC<MessageIfProps>;
104
110
 
105
111
  declare const MessageContent: FC;
106
112
 
107
- declare const MessageEditableContent: react.ForwardRefExoticComponent<TextareaAutosizeProps & react.RefAttributes<HTMLTextAreaElement>>;
108
-
109
- declare namespace index$3 {
110
- export { MessageContent as Content, MessageEditableContent as EditableContent, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
113
+ declare namespace index$2 {
114
+ export { MessageContent as Content, MessageIf as If, MessageProvider as Provider, MessageRoot as Root };
111
115
  }
112
116
 
113
117
  declare const BranchPickerNext: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -134,7 +138,7 @@ declare const BranchPickerRoot: react.ForwardRefExoticComponent<Pick<Omit<react.
134
138
  hideWhenSingleBranch?: boolean;
135
139
  } & react.RefAttributes<HTMLDivElement>>;
136
140
 
137
- declare namespace index$2 {
141
+ declare namespace index$1 {
138
142
  export { BranchPickerCount as Count, BranchPickerNext as Next, BranchPickerNumber as Number, BranchPickerPrevious as Previous, BranchPickerRoot as Root };
139
143
  }
140
144
 
@@ -144,7 +148,8 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
144
148
  asChild?: boolean;
145
149
  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
146
150
  hideWhenBusy?: boolean;
147
- hideWhenNotLastOrHover?: boolean;
151
+ autohide?: "always" | "not-last" | "never";
152
+ autohideFloat?: "always" | "single-branch" | "never";
148
153
  } & react.RefAttributes<HTMLDivElement>>;
149
154
 
150
155
  type ActionBarCopyProps = {
@@ -168,75 +173,58 @@ declare const ActionBarEdit: react.ForwardRefExoticComponent<Pick<Omit<react.Det
168
173
  asChild?: boolean;
169
174
  }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
170
175
 
171
- declare namespace index$1 {
172
- export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
173
- }
174
-
175
- declare const EditBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
176
- ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
177
- } & {
178
- asChild?: boolean;
179
- }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
180
-
181
- declare const EditBarSave: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
182
- ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
183
- } & {
184
- asChild?: boolean;
185
- }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
186
-
187
- declare const EditBarCancel: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
188
- ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
189
- } & {
190
- asChild?: boolean;
191
- }, "key" | "asChild" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & react.RefAttributes<HTMLButtonElement>>;
192
-
193
176
  declare namespace index {
194
- export { EditBarCancel as Cancel, EditBarRoot as Root, EditBarSave as Save };
177
+ export { ActionBarCopy as Copy, ActionBarEdit as Edit, ActionBarReload as Reload, ActionBarRoot as Root };
195
178
  }
196
179
 
197
- type ThreadProviderProps = {
180
+ type VercelAIAssistantProviderProps = {
198
181
  chat: UseChatHelpers;
199
182
  children: React.ReactNode;
200
183
  };
201
- declare const VercelAIThreadProvider: FC<ThreadProviderProps>;
184
+ declare const VercelAIAssistantProvider: FC<VercelAIAssistantProviderProps>;
185
+
186
+ type ComposerState = {
187
+ isEditing: boolean;
188
+ canCancel: boolean;
189
+ edit: () => void;
190
+ send: () => void;
191
+ cancel: () => void;
192
+ value: string;
193
+ setValue: (value: string) => void;
194
+ };
195
+ type ComposerStore = {
196
+ useComposer: UseBoundStore<StoreApi<ComposerState>>;
197
+ };
202
198
 
203
199
  type BranchState = {
204
200
  branchId: number;
205
201
  branchCount: number;
206
202
  };
207
203
 
208
- type MessageEditState = {
209
- isEditing: false;
210
- } | {
211
- isEditing: true;
212
- value: string;
213
- };
214
- type MessageStore = {
204
+ type MessageState = {
215
205
  message: Message;
216
- editState: MessageEditState;
217
- setEditState: (value: MessageEditState) => void;
218
206
  branchState: BranchState;
207
+ isLast: boolean;
219
208
  isCopied: boolean;
220
209
  setIsCopied: (value: boolean) => void;
221
210
  isHovering: boolean;
222
211
  setIsHovering: (value: boolean) => void;
223
212
  };
224
- declare const useMessageContext: <Selection>(consumerName: string, selector: (s: MessageStore) => Selection) => Selection;
213
+ type MessageStore = ComposerStore & {
214
+ useMessage: UseBoundStore<StoreApi<MessageState>>;
215
+ };
216
+ declare const useMessageContext: () => MessageStore;
225
217
 
226
218
  declare const useCopyMessage: ({ copiedDuration }: {
227
219
  copiedDuration?: number | undefined;
228
220
  }) => (() => void) | null;
229
221
 
230
- declare const useReloadMessage: () => (() => Promise<void>) | null;
222
+ declare const useReloadMessage: () => (() => void) | null;
231
223
 
232
224
  declare const useBeginMessageEdit: () => (() => void) | null;
233
225
 
234
- declare const useCancelMessageEdit: () => (() => void) | null;
235
-
236
- declare const useSaveMessageEdit: () => (() => void) | null;
237
-
238
226
  declare const useGoToNextBranch: () => (() => void) | null;
239
227
 
240
228
  declare const useGoToPreviousBranch: () => (() => void) | null;
241
229
 
242
- 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 };
230
+ export { index as ActionBarPrimitive, index$1 as BranchPickerPrimitive, index$3 as ComposerPrimitive, index$2 as MessagePrimitive, index$4 as ThreadPrimitive, VercelAIAssistantProvider as VercelAIThreadProvider, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };