@botiverse/hands-feedback-react

记者-面对手的反馈组件. 包裹是一个票箱, 对话细节 回复作曲家 以及使用 Raft 设计的新反馈格式 系统(@botiverse/raft-ui,来自botiverse/raft-design). 有一个拉夫特的外观: 旧的 elegant 编号 : brutal 主题家族已不复存在, 不再在此选择 .

import {
  FeedbackProvider,
  FeedbackWorkspace,
  type HandsFeedbackTransport,
} from "@botiverse/hands-feedback-react";
import "@botiverse/raft-ui/styles.css";
import "@botiverse/hands-feedback-react/styles.css";

// Implement this in your app. It calls your authenticated same-origin proxy;
// the complete adapter is in the integration guide linked below.
const transport: HandsFeedbackTransport =
  createMyAppFeedbackTransport("/api/feedback");

<FeedbackProvider
  transport={transport}
  // Optional. Without this override the SDK maps browser `zh*` to `zh-CN`
  // and falls back to English. Pass the host app's selected locale when set.
  locale="en"
  onUnreadChanged={({ total }) => setFeedbackBadge(total)}
>
  <FeedbackWorkspace />
</FeedbackProvider>;

工作空间拥有记者交互状态:列表过滤/滚动/焦点 恢复、 平板电脑回复草稿、 IME 安全输入处理、 附加 进步/重试/取消、可检索光标页和近下对白 随后. 东道主不应重复该状态机器。 他们只提供 (可选) 附加打开器.

在移动中, 主机可以将这些工作空间通知绑定为真实的浏览器 URL 并启用软件包的触摸性牵引再现行为:

<FeedbackWorkspace
  route={routeFromLocation(location)}
  onRouteChange={(nextRoute, options) =>
    navigate(pathForRoute(nextRoute), { replace: options?.replace })
  }
  enablePullToRefresh={isMobile}
/>

inbox, (中文(简体) ), new,以及 ticket 是支持的工作空间路径。 SDK标记 创建-成功过渡 new 改为 ticket 与 replace: true这样 返回不会重新打开已提交的表格 。 拉到再新鲜的只附在 列表和对话框滚动视图端口,仅在滚动上方开始,忽略 可编辑控件,并保留现有内容,而权威数据是 已再装入. 一般情况 usePullToRefresh 钩子也导出为其它主机 卷轴表面.

所有可见副本、已关闭错误副本、日期和无障碍标签共享 SDK语言. 支持的地方为: en 财务报告和审定财务报表 zh-CN; 明示提供者 locale 优先于浏览器语言检测.

本地化是由提供者驱动的,而不限于内置捆绑. messages 接受打入的部分覆盖( 丢失的密钥返回到 ),包括参数化验证字符串. formatDate 财务报告和审定财务报表 formatFileSize 让东道主采用自己的格式化公约,而不使用 重建 SDK UI。 浏览器谈判选择第一个支持的条目 navigator.languages 命令,然后回到英语.

<FeedbackProvider
  transport={transport}
  locale={appLocale}
  messages={{
    newFeedback: t("feedback.new"),
    attachmentUnsupported: t("feedback.attachmentUnsupported"), // `{name}`
  }}
  formatDate={(date, { locale }) => appDateFormatter(date, locale)}
  formatFileSize={(bytes, { locale }) => appFileSizeFormatter(bytes, locale)}
>
  <FeedbackWorkspace />
</FeedbackProvider>

主机级附件

主机可能会放出一个小文件( 例如一个有效的诊断快照) 进入记者的待补附件。 准备 File 首先( 任意同步) 在此点击前获取/ 验证, 然后调用控点 同步 从点击处理器中:

const workspace = useRef<FeedbackWorkspaceHostHandle>(null);

<button
  onClick={() => {
    // No `await` before this call: it needs the live user gesture.
    const result = workspace.current?.openNewFeedbackWithPendingFile({
      file: preparedDiagnosticFile,
    });
    if (result && !result.ok) showReason(result.reason);
  }}
>
  Report issue with diagnostic
</button>
<FeedbackWorkspace
  ref={workspace}
  onOpenPendingAttachment={({ file }) => previewInHost(file)}
/>

• openNewFeedbackWithPendingFile({ file }) 打开新反馈表格 同一呼叫中已经待决的文件。 如果表单已经打开了,它 在那里添加文件 。 它是同步的,并返回输入结果 .
• attachPendingFile({ file }) 是低等变体: 它只有阶段进入 已经打开的窗体并返回 composer_closed 否则.

合同(两种方法):

• 只有阶段. 他们从来不上传或屈服。 记者看到文件, 可以打开(通过 onOpenPendingAttachment,包括非图像文件), 它可以去除它,它只在他们按下“提交”的时候被发送.
• 需要用户手势 . 没有瞬态浏览器用户激活 (单位:千美元)navigator.userActivation.isActive他们回来了 user_activation_required 并且不改变任何东西,包括路线.
• 只取字节. 输入就是 { file: File }没有路径, URL, 调用,或获取背景 .
• 被包围了. 最多 MAX_FEEDBACK_HOST_ATTACHMENTS (1) 主机文件, MAX_FEEDBACK_HOST_ATTACHMENT_BYTES (1个小米B),类型 FEEDBACK_HOST_ATTACHMENT_TYPES (截图图像类型加 application/json 财务报告和审定财务报表 text/plain),它计算对共享 三相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. 相同的文件( 名称、 类型、 大小、 最后修改) 是 以 duplicate。 。 。 .
• 已打出拒绝,零突变. 失败者返回 { ok: false, reason } (单位:千美元)FeedbackHostAttachmentRejection)并且没有 导航、 更改待决列表、 显示错误横幅或上传 任何东西. busy 表示呈文在逃.

手的应用和运输必须接受注入的MIME类型. 双手 公开提交端点接受任何类型。 记者的答复只接受图像, 这就是为什么主机文件只使用新反馈格式.

安全边界

• 软件包没有 appToken, (中文(简体) ), clientSecret, (中文(简体) ), reporterId或任意 车主道具.
• 主机运输绑定了短寿命的记者范围会话.
• 手为票证并读/未读状态. unreadTotal 来源于Hands的回复;该组件从未产生或持续存在 读取光标.
• 细节要求报告并清除未读内容, 只有在它成功后 反应。 失败, 中止, stale, 和未挂载的读取不会突变未读 .
• Webhooks 是服务器对服务器的可选集成,不需要用于 输入正确性.

使用 Tailwind v4 的消费者如果 他们的建筑清理图书馆课程:

@source '../node_modules/@botiverse/raft-ui/dist';
@source '../node_modules/@botiverse/hands-feedback-react/dist';

在 npm 发布前安装此软件包的源位集成 手单取子目录和 pnpm path: git 选择器,然后导入 明确源导出 :

pnpm add "github:botiverse/hands#<full-commit-sha>&path:packages/feedback-react"
pnpm add react react-dom @botiverse/raft-ui lucide-react

import {
  FeedbackProvider,
  FeedbackWorkspace,
} from "@botiverse/hands-feedback-react/source";
import "@botiverse/hands-feedback-react/source/styles.css";

主机捆绑器必须支持TypeScript/TSX的依赖性. 出版消费者 应使用上述已编译的根导出.

完整的服务器证书,不透明 记者身份,路由绑定,代理, 运输、网络购物和生产核查名单的通过情况 反应反馈收件箱指南。 。 。 .