@assistant-ui/react-hook-form 0.12.22 → 0.12.24
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.
- package/dist/formTools.d.ts +0 -1
- package/dist/formTools.d.ts.map +1 -1
- package/dist/useAssistantForm.d.ts +0 -1
- package/dist/useAssistantForm.d.ts.map +1 -1
- package/dist/useAssistantForm.js +44 -44
- package/dist/useAssistantForm.js.map +1 -1
- package/package.json +13 -7
- package/src/useAssistantForm.test.tsx +56 -0
- package/src/useAssistantForm.ts +5 -3
package/dist/formTools.d.ts
CHANGED
package/dist/formTools.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formTools.d.ts","names":[],"sources":["../src/formTools.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"formTools.d.ts","names":[],"sources":["../src/formTools.ts"],"mappings":";;cAEa"}
|
|
@@ -2,7 +2,6 @@ import { formTools } from "./formTools.js";
|
|
|
2
2
|
import { z } from "zod";
|
|
3
3
|
import { FieldValues, UseFormProps, UseFormReturn } from "react-hook-form";
|
|
4
4
|
import { ToolCallMessagePartComponent } from "@assistant-ui/core/react";
|
|
5
|
-
|
|
6
5
|
//#region src/useAssistantForm.d.ts
|
|
7
6
|
type UseAssistantFormProps<TFieldValues extends FieldValues, TContext, TTransformedValues> = UseFormProps<TFieldValues, TContext, TTransformedValues> & {
|
|
8
7
|
assistant?: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAssistantForm.d.ts","names":[],"sources":["../src/useAssistantForm.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAssistantForm.d.ts","names":[],"sources":["../src/useAssistantForm.ts"],"mappings":";;;;;KAkBY,sBACV,qBAAqB,aACrB,UACA,sBACE,aAAa,cAAc,UAAU;EACvC;IAEM;MAEM;QAEM,SACI,6BACE,EAAE,cACQ,UAAU;;MAOhC;QAEM,SACI,6BACE,EAAE,cAAc,UAAU;;MAMtC;QAEM,SACI,6BACE,EAAE,cAAc,UAAU;;;;;cAYvC,mBACX,qBAAqB,cAAc,aACnC,gBACA,qBAAqB,cAErB,QAAQ,sBAAsB,cAAc,UAAU,wBACrD,cAAc,cAAc,UAAU"}
|
package/dist/useAssistantForm.js
CHANGED
|
@@ -10,54 +10,54 @@ const useAssistantForm = (props) => {
|
|
|
10
10
|
const { control, getValues, setValue, reset, formState: { isSubmitting } } = form;
|
|
11
11
|
const aui = useAui();
|
|
12
12
|
useEffect(() => {
|
|
13
|
-
const value = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
if (
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
form.requestSubmit();
|
|
40
|
-
return { success: true };
|
|
41
|
-
}
|
|
13
|
+
const value = { tools: {
|
|
14
|
+
set_form_field: tool({
|
|
15
|
+
...formTools.set_form_field,
|
|
16
|
+
parameters: formTools.set_form_field.parameters,
|
|
17
|
+
execute: async (args) => {
|
|
18
|
+
setValue(args.name, args.value);
|
|
19
|
+
return { success: true };
|
|
20
|
+
}
|
|
21
|
+
}),
|
|
22
|
+
submit_form: tool({
|
|
23
|
+
...formTools.submit_form,
|
|
24
|
+
execute: async () => {
|
|
25
|
+
if (isSubmitting) return {
|
|
26
|
+
success: false,
|
|
27
|
+
message: "The form is already submitting."
|
|
28
|
+
};
|
|
29
|
+
const { _names, _fields } = control;
|
|
30
|
+
for (const name of _names.mount) {
|
|
31
|
+
const field = _fields[name];
|
|
32
|
+
if (field?._f && "refs" in field._f) {
|
|
33
|
+
const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
|
|
34
|
+
if (fieldReference instanceof HTMLElement) {
|
|
35
|
+
const form = fieldReference.closest("form");
|
|
36
|
+
if (form) {
|
|
37
|
+
form.requestSubmit();
|
|
38
|
+
return { success: true };
|
|
42
39
|
}
|
|
43
40
|
}
|
|
44
41
|
}
|
|
45
|
-
return {
|
|
46
|
-
success: false,
|
|
47
|
-
message: "Unable retrieve the form element. This is a coding error."
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
}),
|
|
51
|
-
reset_form: tool({
|
|
52
|
-
...formTools.reset_form,
|
|
53
|
-
execute: async () => {
|
|
54
|
-
reset();
|
|
55
|
-
return { success: true };
|
|
56
42
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
43
|
+
return {
|
|
44
|
+
success: false,
|
|
45
|
+
message: "Unable retrieve the form element. This is a coding error."
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
}),
|
|
49
|
+
reset_form: tool({
|
|
50
|
+
...formTools.reset_form,
|
|
51
|
+
execute: async () => {
|
|
52
|
+
reset();
|
|
53
|
+
return { success: true };
|
|
54
|
+
}
|
|
55
|
+
})
|
|
56
|
+
} };
|
|
57
|
+
return aui.modelContext().register({ getModelContext: () => ({
|
|
58
|
+
...value,
|
|
59
|
+
system: `Form State:\n${JSON.stringify(getValues())}`
|
|
60
|
+
}) });
|
|
61
61
|
}, [
|
|
62
62
|
control,
|
|
63
63
|
setValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAssistantForm.js","names":[],"sources":["../src/useAssistantForm.ts"],"sourcesContent":["\"use client\";\n\nimport { type ModelContext, tool } from \"@assistant-ui/core\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { type ToolCallMessagePartComponent } from \"@assistant-ui/core/react\";\nimport { useAui } from \"@assistant-ui/store\";\nimport { useEffect } from \"react\";\nimport {\n type FieldValues,\n type Path,\n type PathValue,\n type UseFormProps,\n type UseFormReturn,\n useForm,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport { formTools } from \"./formTools\";\n\nexport type UseAssistantFormProps<\n TFieldValues extends FieldValues,\n TContext,\n TTransformedValues,\n> = UseFormProps<TFieldValues, TContext, TTransformedValues> & {\n assistant?:\n | {\n tools?:\n | {\n set_form_field?:\n | {\n render?:\n | ToolCallMessagePartComponent<\n z.infer<\n (typeof formTools.set_form_field)[\"parameters\"]\n >,\n unknown\n >\n | undefined;\n }\n | undefined;\n submit_form?:\n | {\n render?:\n | ToolCallMessagePartComponent<\n z.infer<(typeof formTools.submit_form)[\"parameters\"]>,\n unknown\n >\n | undefined;\n }\n | undefined;\n reset_form?:\n | {\n render?:\n | ToolCallMessagePartComponent<\n z.infer<(typeof formTools.reset_form)[\"parameters\"]>,\n unknown\n >\n | undefined;\n }\n | undefined;\n }\n | undefined;\n }\n | undefined;\n};\n\nexport const useAssistantForm = <\n TFieldValues extends FieldValues = FieldValues,\n TContext = any,\n TTransformedValues = TFieldValues,\n>(\n props?: UseAssistantFormProps<TFieldValues, TContext, TTransformedValues>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n const {\n control,\n getValues,\n setValue,\n reset,\n formState: { isSubmitting },\n } = form;\n\n const aui = useAui();\n useEffect(() => {\n const value: ModelContext = {\n
|
|
1
|
+
{"version":3,"file":"useAssistantForm.js","names":[],"sources":["../src/useAssistantForm.ts"],"sourcesContent":["\"use client\";\n\nimport { type ModelContext, tool } from \"@assistant-ui/core\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { type ToolCallMessagePartComponent } from \"@assistant-ui/core/react\";\nimport { useAui } from \"@assistant-ui/store\";\nimport { useEffect } from \"react\";\nimport {\n type FieldValues,\n type Path,\n type PathValue,\n type UseFormProps,\n type UseFormReturn,\n useForm,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport { formTools } from \"./formTools\";\n\nexport type UseAssistantFormProps<\n TFieldValues extends FieldValues,\n TContext,\n TTransformedValues,\n> = UseFormProps<TFieldValues, TContext, TTransformedValues> & {\n assistant?:\n | {\n tools?:\n | {\n set_form_field?:\n | {\n render?:\n | ToolCallMessagePartComponent<\n z.infer<\n (typeof formTools.set_form_field)[\"parameters\"]\n >,\n unknown\n >\n | undefined;\n }\n | undefined;\n submit_form?:\n | {\n render?:\n | ToolCallMessagePartComponent<\n z.infer<(typeof formTools.submit_form)[\"parameters\"]>,\n unknown\n >\n | undefined;\n }\n | undefined;\n reset_form?:\n | {\n render?:\n | ToolCallMessagePartComponent<\n z.infer<(typeof formTools.reset_form)[\"parameters\"]>,\n unknown\n >\n | undefined;\n }\n | undefined;\n }\n | undefined;\n }\n | undefined;\n};\n\nexport const useAssistantForm = <\n TFieldValues extends FieldValues = FieldValues,\n TContext = any,\n TTransformedValues = TFieldValues,\n>(\n props?: UseAssistantFormProps<TFieldValues, TContext, TTransformedValues>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n const {\n control,\n getValues,\n setValue,\n reset,\n formState: { isSubmitting },\n } = form;\n\n const aui = useAui();\n useEffect(() => {\n const value: ModelContext = {\n tools: {\n set_form_field: tool({\n ...formTools.set_form_field,\n parameters: formTools.set_form_field.parameters,\n execute: async (args) => {\n setValue(\n args.name as Path<TFieldValues>,\n args.value as PathValue<TFieldValues, Path<TFieldValues>>,\n );\n\n return { success: true };\n },\n }),\n submit_form: tool({\n ...formTools.submit_form,\n execute: async () => {\n if (isSubmitting) {\n return {\n success: false,\n message: \"The form is already submitting.\",\n };\n }\n const { _names, _fields } = control;\n for (const name of _names.mount) {\n const field = _fields[name];\n if (field?._f && \"refs\" in field._f) {\n const fieldReference = Array.isArray(field._f.refs)\n ? field._f.refs[0]\n : field._f.ref;\n\n if (fieldReference instanceof HTMLElement) {\n const form = fieldReference.closest(\"form\");\n if (form) {\n form.requestSubmit();\n\n return { success: true };\n }\n }\n }\n }\n\n return {\n success: false,\n message:\n \"Unable retrieve the form element. This is a coding error.\",\n };\n },\n }),\n reset_form: tool({\n ...formTools.reset_form,\n execute: async () => {\n reset();\n return { success: true };\n },\n }),\n },\n };\n\n return aui.modelContext().register({\n getModelContext: () => ({\n ...value,\n system: `Form State:\\n${JSON.stringify(getValues())}`,\n }),\n });\n }, [control, setValue, getValues, aui, reset, isSubmitting]);\n\n const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;\n useEffect(() => {\n if (!renderFormFieldTool) return undefined;\n return aui.tools().setToolUI(\"set_form_field\", renderFormFieldTool);\n }, [aui, renderFormFieldTool]);\n\n const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;\n useEffect(() => {\n if (!renderSubmitFormTool) return undefined;\n return aui.tools().setToolUI(\"submit_form\", renderSubmitFormTool);\n }, [aui, renderSubmitFormTool]);\n\n const renderResetFormTool = props?.assistant?.tools?.reset_form?.render;\n useEffect(() => {\n if (!renderResetFormTool) return undefined;\n return aui.tools().setToolUI(\"reset_form\", renderResetFormTool);\n }, [aui, renderResetFormTool]);\n\n return form;\n};\n"],"mappings":";;;;;;;AAiEA,MAAa,oBAKX,UAC8D;CAC9D,MAAM,OAAO,QAAoD,KAAK;CACtE,MAAM,EACJ,SACA,WACA,UACA,OACA,WAAW,EAAE,mBACX;CAEJ,MAAM,MAAM,OAAO;CACnB,gBAAgB;EACd,MAAM,QAAsB,EAC1B,OAAO;GACL,gBAAgB,KAAK;IACnB,GAAG,UAAU;IACb,YAAY,UAAU,eAAe;IACrC,SAAS,OAAO,SAAS;KACvB,SACE,KAAK,MACL,KAAK,KACP;KAEA,OAAO,EAAE,SAAS,KAAK;IACzB;GACF,CAAC;GACD,aAAa,KAAK;IAChB,GAAG,UAAU;IACb,SAAS,YAAY;KACnB,IAAI,cACF,OAAO;MACL,SAAS;MACT,SAAS;KACX;KAEF,MAAM,EAAE,QAAQ,YAAY;KAC5B,KAAK,MAAM,QAAQ,OAAO,OAAO;MAC/B,MAAM,QAAQ,QAAQ;MACtB,IAAI,OAAO,MAAM,UAAU,MAAM,IAAI;OACnC,MAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAC9C,MAAM,GAAG,KAAK,KACd,MAAM,GAAG;OAEb,IAAI,0BAA0B,aAAa;QACzC,MAAM,OAAO,eAAe,QAAQ,MAAM;QAC1C,IAAI,MAAM;SACR,KAAK,cAAc;SAEnB,OAAO,EAAE,SAAS,KAAK;QACzB;OACF;MACF;KACF;KAEA,OAAO;MACL,SAAS;MACT,SACE;KACJ;IACF;GACF,CAAC;GACD,YAAY,KAAK;IACf,GAAG,UAAU;IACb,SAAS,YAAY;KACnB,MAAM;KACN,OAAO,EAAE,SAAS,KAAK;IACzB;GACF,CAAC;EACH,EACF;EAEA,OAAO,IAAI,aAAa,CAAC,CAAC,SAAS,EACjC,wBAAwB;GACtB,GAAG;GACH,QAAQ,gBAAgB,KAAK,UAAU,UAAU,CAAC;EACpD,GACF,CAAC;CACH,GAAG;EAAC;EAAS;EAAU;EAAW;EAAK;EAAO;CAAY,CAAC;CAE3D,MAAM,sBAAsB,OAAO,WAAW,OAAO,gBAAgB;CACrE,gBAAgB;EACd,IAAI,CAAC,qBAAqB,OAAO,KAAA;EACjC,OAAO,IAAI,MAAM,CAAC,CAAC,UAAU,kBAAkB,mBAAmB;CACpE,GAAG,CAAC,KAAK,mBAAmB,CAAC;CAE7B,MAAM,uBAAuB,OAAO,WAAW,OAAO,aAAa;CACnE,gBAAgB;EACd,IAAI,CAAC,sBAAsB,OAAO,KAAA;EAClC,OAAO,IAAI,MAAM,CAAC,CAAC,UAAU,eAAe,oBAAoB;CAClE,GAAG,CAAC,KAAK,oBAAoB,CAAC;CAE9B,MAAM,sBAAsB,OAAO,WAAW,OAAO,YAAY;CACjE,gBAAgB;EACd,IAAI,CAAC,qBAAqB,OAAO,KAAA;EACjC,OAAO,IAAI,MAAM,CAAC,CAAC,UAAU,cAAc,mBAAmB;CAChE,GAAG,CAAC,KAAK,mBAAmB,CAAC;CAE7B,OAAO;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@assistant-ui/react-hook-form",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.24",
|
|
4
4
|
"description": "React Hook Form integration for assistant-ui",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-hook-form",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
],
|
|
30
30
|
"sideEffects": false,
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@assistant-ui/core": "^0.2.
|
|
33
|
-
"@assistant-ui/store": "^0.2.
|
|
32
|
+
"@assistant-ui/core": "^0.2.22",
|
|
33
|
+
"@assistant-ui/store": "^0.2.21",
|
|
34
34
|
"zod": "^4.4.3"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -44,10 +44,14 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
+
"@testing-library/react": "^16.3.2",
|
|
47
48
|
"@types/react": "^19.2.17",
|
|
48
|
-
"react": "^19.2.
|
|
49
|
-
"
|
|
50
|
-
"
|
|
49
|
+
"@types/react-dom": "^19.2.3",
|
|
50
|
+
"jsdom": "^29.1.1",
|
|
51
|
+
"react": "^19.2.8",
|
|
52
|
+
"react-hook-form": "^7.83.0",
|
|
53
|
+
"vitest": "^4.1.10",
|
|
54
|
+
"@assistant-ui/x-buildutils": "0.0.19"
|
|
51
55
|
},
|
|
52
56
|
"publishConfig": {
|
|
53
57
|
"access": "public",
|
|
@@ -63,6 +67,8 @@
|
|
|
63
67
|
"url": "https://github.com/assistant-ui/assistant-ui/issues"
|
|
64
68
|
},
|
|
65
69
|
"scripts": {
|
|
66
|
-
"build": "aui-build"
|
|
70
|
+
"build": "aui-build",
|
|
71
|
+
"test": "vitest run",
|
|
72
|
+
"test:watch": "vitest"
|
|
67
73
|
}
|
|
68
74
|
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/** @vitest-environment jsdom */
|
|
2
|
+
import { act, renderHook } from "@testing-library/react";
|
|
3
|
+
import type { ModelContext } from "@assistant-ui/core";
|
|
4
|
+
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
5
|
+
|
|
6
|
+
const mocks = vi.hoisted(() => {
|
|
7
|
+
const register = vi.fn();
|
|
8
|
+
const setToolUI = vi.fn();
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
register,
|
|
12
|
+
setToolUI,
|
|
13
|
+
aui: {
|
|
14
|
+
modelContext: () => ({ register }),
|
|
15
|
+
tools: () => ({ setToolUI }),
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
vi.mock("@assistant-ui/store", async (importOriginal) => ({
|
|
21
|
+
...(await importOriginal<typeof import("@assistant-ui/store")>()),
|
|
22
|
+
useAui: () => mocks.aui,
|
|
23
|
+
}));
|
|
24
|
+
|
|
25
|
+
import { useAssistantForm } from "./useAssistantForm";
|
|
26
|
+
|
|
27
|
+
let provider: { getModelContext: () => ModelContext };
|
|
28
|
+
|
|
29
|
+
beforeEach(() => {
|
|
30
|
+
mocks.register.mockReset();
|
|
31
|
+
mocks.setToolUI.mockReset();
|
|
32
|
+
mocks.register.mockImplementation((value) => {
|
|
33
|
+
provider = value;
|
|
34
|
+
return () => {};
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
describe("useAssistantForm", () => {
|
|
39
|
+
it("exposes current form values to the model context", () => {
|
|
40
|
+
const { result } = renderHook(() =>
|
|
41
|
+
useAssistantForm<{ name: string }>({
|
|
42
|
+
defaultValues: { name: "" },
|
|
43
|
+
}),
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
expect(provider.getModelContext().system).toBe('Form State:\n{"name":""}');
|
|
47
|
+
|
|
48
|
+
act(() => {
|
|
49
|
+
result.current.setValue("name", "Ada");
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
expect(provider.getModelContext().system).toBe(
|
|
53
|
+
'Form State:\n{"name":"Ada"}',
|
|
54
|
+
);
|
|
55
|
+
});
|
|
56
|
+
});
|
package/src/useAssistantForm.ts
CHANGED
|
@@ -82,8 +82,6 @@ export const useAssistantForm = <
|
|
|
82
82
|
const aui = useAui();
|
|
83
83
|
useEffect(() => {
|
|
84
84
|
const value: ModelContext = {
|
|
85
|
-
system: `Form State:\n${JSON.stringify(getValues())}`,
|
|
86
|
-
|
|
87
85
|
tools: {
|
|
88
86
|
set_form_field: tool({
|
|
89
87
|
...formTools.set_form_field,
|
|
@@ -141,8 +139,12 @@ export const useAssistantForm = <
|
|
|
141
139
|
}),
|
|
142
140
|
},
|
|
143
141
|
};
|
|
142
|
+
|
|
144
143
|
return aui.modelContext().register({
|
|
145
|
-
getModelContext: () =>
|
|
144
|
+
getModelContext: () => ({
|
|
145
|
+
...value,
|
|
146
|
+
system: `Form State:\n${JSON.stringify(getValues())}`,
|
|
147
|
+
}),
|
|
146
148
|
});
|
|
147
149
|
}, [control, setValue, getValues, aui, reset, isSubmitting]);
|
|
148
150
|
|