@assistant-ui/react-hook-form

反应钩形 合并 @assistant-ui/react替换 useForm 与 useAssistantForm 通过工具调用,使助手能够读取和填充表格字段.

安装

npm install @assistant-ui/react @assistant-ui/react-hook-form react-hook-form

使用量

"use client";

import { useAssistantForm } from "@assistant-ui/react-hook-form";

export function SignupForm() {
  const form = useAssistantForm({
    defaultValues: { firstName: "", lastName: "", email: "" },
    assistant: {
      tools: {
        set_form_field: { render: () => <FieldUpdated /> },
      },
    },
  });

  return <form onSubmit={form.handleSubmit(onSubmit)}>{/* fields */}</form>;
}

助理获得三个内置工具: set_form_field 将值写入字段, submit_form 呼叫您的提交处理器,以及 reset_form 以恢复初始值。 提交和重置默认请求用户批准 。 自定义工具渲染必须处理待决中断和调用 resume({ approved: true }) 或者说 resume({ approved: false })设置 assistant.tools.submit_form.requireApproval 或者说 assistant.tools.reset_form.requireApproval 改为 false 无需询问即可运行该工具。 跑步时不需要人力支援 requireApproval: false 这些工具。 与模型共享的窗体状态省略密码输入和字段 current-password, (中文(简体) ), new-password, (中文(简体) ), one-time-code,或 cc- 自动补全值。 使用 assistant.sensitiveFields 排除DOM检测无法识别的字段,包括没有挂载输入的字段.

另见

• @assistant-ui/react-lexical 如果您还想要一个富于文字的作曲家 @- 同一聊天室里有心理支持 - 什么.

被引导走过的生活 助理-ui.com/示例/表格-演示。见 examples/with-react-hook-form 一个完整的应用程序.