Skip to content

Commit 5b04204

Browse files
lgrammellgrammel
authoredJun 25, 2024··
chore (ai/react): rename useChat setInput to submit (#2096)
·
@ai-sdk/xai@2.0.0-canary.2ai@3.2.10
1 parent 050c032 commit 5b04204

File tree

6 files changed

+69
-64
lines changed

6 files changed

+69
-64
lines changed
 

‎.changeset/eight-impalas-approve.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ai-sdk/react': patch
3+
---
4+
5+
chore (ai/react): rename useChat setInput to submit

‎content/docs/05-ai-sdk-ui/08-object-generation.mdx

+2-6
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,14 @@ import { experimental_useObject as useObject } from 'ai/react';
4747
import { notificationSchema } from './api/notifications/schema';
4848

4949
export default function Page() {
50-
const { setInput, object } = useObject({
50+
const { object, submit } = useObject({
5151
api: '/api/notifications',
5252
schema: notificationSchema,
5353
});
5454

5555
return (
5656
<div>
57-
<button
58-
onClick={async () => {
59-
setInput('Messages during finals week.');
60-
}}
61-
>
57+
<button onClick={() => submit('Messages during finals week.')}>
6258
Generate notifications
6359
</button>
6460

‎content/docs/07-reference/ai-sdk-ui/03-use-object.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ You can use it together with [`streamObject`](/docs/reference/ai-sdk-core/stream
1616
import { experimental_useObject as useObject } from 'ai/react';
1717

1818
export default function Page() {
19-
const { setInput, object } = useObject({
19+
const { object, submit } = useObject({
2020
api: '/api/use-object',
2121
schema: z.object({ content: z.string() }),
2222
});
2323

2424
return (
2525
<div>
26-
<button onClick={() => setInput('example input')}>Generate</button>
26+
<button onClick={() => submit('example input')}>Generate</button>
2727
{object?.content && <p>{object.content}</p>}
2828
</div>
2929
);
@@ -75,7 +75,7 @@ export default function Page() {
7575
<PropertiesTable
7676
content={[
7777
{
78-
name: 'setInput',
78+
name: 'submit',
7979
type: '(input: INPUT) => void',
8080
description: 'Calls the API with the provided input as JSON body.',
8181
},

‎content/examples/02-next-pages/01-basics/04-streaming-object-generation.mdx

+2-6
Original file line numberDiff line numberDiff line change
@@ -75,18 +75,14 @@ import { experimental_useObject as useObject } from 'ai/react';
7575
import { notificationSchema } from './api/use-object/schema';
7676

7777
export default function Page() {
78-
const { setInput, object } = useObject({
78+
const { object, submit } = useObject({
7979
api: '/api/use-object',
8080
schema: notificationSchema,
8181
});
8282

8383
return (
8484
<div>
85-
<button
86-
onClick={async () => {
87-
setInput('Messages during finals week.');
88-
}}
89-
>
85+
<button onClick={() => submit('Messages during finals week.')}>
9086
Generate notifications
9187
</button>
9288

‎packages/react/src/use-object.ts

+55-47
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,15 @@ export type Experimental_UseObjectOptions<RESULT> = {
3333

3434
export type Experimental_UseObjectHelpers<RESULT, INPUT> = {
3535
/**
36-
* Calls the API with the provided input as JSON body.
36+
* @deprecated Use `submit` instead.
3737
*/
3838
setInput: (input: INPUT) => void;
3939

40+
/**
41+
* Calls the API with the provided input as JSON body.
42+
*/
43+
submit: (input: INPUT) => void;
44+
4045
/**
4146
* The current value for the generated object. Updated as the API streams JSON chunks.
4247
*/
@@ -76,55 +81,58 @@ function useObject<RESULT, INPUT = any>({
7681
const [error, setError] = useState<undefined | unknown>(undefined);
7782
const [isLoading, setIsLoading] = useState(false);
7883

79-
return {
80-
async setInput(input) {
81-
try {
82-
setIsLoading(true);
83-
84-
const response = await fetch(api, {
85-
method: 'POST',
86-
headers: { 'Content-Type': 'application/json' },
87-
body: JSON.stringify(input),
88-
});
89-
90-
if (!response.ok) {
91-
throw new Error(
92-
(await response.text()) ?? 'Failed to fetch the response.',
93-
);
94-
}
95-
96-
if (response.body == null) {
97-
throw new Error('The response body is empty.');
98-
}
99-
100-
let accumulatedText = '';
101-
let latestObject: DeepPartial<RESULT> | undefined = undefined;
102-
103-
response.body.pipeThrough(new TextDecoderStream()).pipeTo(
104-
new WritableStream<string>({
105-
write(chunk) {
106-
accumulatedText += chunk;
107-
108-
const currentObject = parsePartialJson(
109-
accumulatedText,
110-
) as DeepPartial<RESULT>;
111-
112-
if (!isDeepEqualData(latestObject, currentObject)) {
113-
latestObject = currentObject;
114-
115-
mutate(currentObject);
116-
}
117-
},
118-
}),
84+
const submit = async (input: INPUT) => {
85+
try {
86+
setIsLoading(true);
87+
88+
const response = await fetch(api, {
89+
method: 'POST',
90+
headers: { 'Content-Type': 'application/json' },
91+
body: JSON.stringify(input),
92+
});
93+
94+
if (!response.ok) {
95+
throw new Error(
96+
(await response.text()) ?? 'Failed to fetch the response.',
11997
);
98+
}
12099

121-
setError(undefined);
122-
} catch (error) {
123-
setError(error);
124-
} finally {
125-
setIsLoading(false);
100+
if (response.body == null) {
101+
throw new Error('The response body is empty.');
126102
}
127-
},
103+
104+
let accumulatedText = '';
105+
let latestObject: DeepPartial<RESULT> | undefined = undefined;
106+
107+
response.body.pipeThrough(new TextDecoderStream()).pipeTo(
108+
new WritableStream<string>({
109+
write(chunk) {
110+
accumulatedText += chunk;
111+
112+
const currentObject = parsePartialJson(
113+
accumulatedText,
114+
) as DeepPartial<RESULT>;
115+
116+
if (!isDeepEqualData(latestObject, currentObject)) {
117+
latestObject = currentObject;
118+
119+
mutate(currentObject);
120+
}
121+
},
122+
}),
123+
);
124+
125+
setError(undefined);
126+
} catch (error) {
127+
setError(error);
128+
} finally {
129+
setIsLoading(false);
130+
}
131+
};
132+
133+
return {
134+
setInput: submit, // Deprecated
135+
submit,
128136
object: data,
129137
error,
130138
isLoading,

‎packages/react/src/use-object.ui.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { experimental_useObject } from './use-object';
99

1010
describe('text stream', () => {
1111
const TestComponent = () => {
12-
const { object, error, setInput, isLoading } = experimental_useObject({
12+
const { object, error, submit, isLoading } = experimental_useObject({
1313
api: '/api/use-object',
1414
schema: z.object({ content: z.string() }),
1515
});
@@ -21,7 +21,7 @@ describe('text stream', () => {
2121
<div data-testid="error">{error?.toString()}</div>
2222
<button
2323
data-testid="submit-button"
24-
onClick={async () => setInput('test-input')}
24+
onClick={() => submit('test-input')}
2525
>
2626
Generate
2727
</button>

0 commit comments

Comments
 (0)
Please sign in to comment.