@assistant-ui/react 0.0.4 → 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
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 };