@e-llm-studio/ feedback-flow (英语)
可再用 React 组件用于恒星评分和渐进反馈. 套件包括即时,后续屏幕,坚持性帮助,以及可选的特性-细节搜索. 其样式表由软件包入口导入.
安装
安装 @e-llm-studio/feedback-flow 与其同伴依赖性并列 : react, (中文(简体) ), react-dom,以及 lucide-react。 。 。 .
快开始
FeedbackExperience 提供完整的流量。 传出 a FeedbackApi 将反馈持续到您的后端;如果 api 被省略,包则使用浏览器-本地模拟存储。 HTTP 适配器只使用 API, 不使用 localStorage。 。 。 .
import {
FeedbackExperience,
createFeedbackTheme,
createHttpFeedbackApi,
createHttpFeatureAvailabilityApi,
} from '@e-llm-studio/feedback-flow';
const getAuthToken = () => authStore.getState().token ?? undefined;
const feedbackApi = createHttpFeedbackApi({
baseUrl: apiBaseUrl,
getAuthToken,
});
const featureAvailabilityApi = createHttpFeatureAvailabilityApi({
baseUrl: apiBaseUrl,
getAuthToken,
});
export function FeatureFeedback() {
return (
<FeedbackExperience
api={feedbackApi}
featureId={featureId}
featureAvailabilityApi={featureAvailabilityApi}
featureAvailabilityModeId={modeId}
userEmail={userEmail}
environment="dev"
tracking={{ mode: 'My mode', modeId, featureContext: 'my-feature' }}
copy={{
prompt: 'Was this feature Helpful?',
usefulTitle: 'What worked well?',
gapTitle: 'What should we improve?',
}}
theme={createFeedbackTheme({ accent: '#6025e5' })}
/>
);
}
这个例子假定 authStore, (中文(简体) ), apiBaseUrl, (中文(简体) ), featureId, (中文(简体) ), modeId,以及 userEmail 来自您的主机应用程序。 当适配器的配置稳定时将其保存在组件外. 特性-细节适配器和模式ID是可选的:如果特性缺失或找取失败,卡片仍然可见. 虽然 ui_new_ttl 未来的卡片显示 新设 徽章; 过期仅去除徽章. start_date 财务报告和审定财务报表 end_date 目前不控制可见度.
每个特性卡挂载开始一个新的反馈表 。 其模式加载中的时钟按钮从提供的API更早的表格;今天的表格可以重新打开进行编辑,而更旧的表格则显示为只读. FeedbackApi.listFeedback 历史用品(createHttpFeedbackApi (执行) 同一天的编辑限制由这个 UI 执行;如果可以直接调用更新,后端也应该执行.
使用特性卡 ratingCardLayout="vertical" 默认的,徽章 和快星之上。 设定 ratingCardLayout="horizontal" 把徽章,即时,和星星放在一行。 在主机容器里给水平卡足够的空间.
聊天时请通过马厩 requestId 并包含其后端 queryId 财务报告和审定财务报表 sessionId 内 metadata。答复 requestId 不调用特性可用性 API.
自定义
copy覆盖内置的问题、标签、提示、占位符和选项.usefulMinimumWords默认为5.theme, (中文(简体) ),styles,以及classNames控制颜色和演示文稿.slots在评分,时间,差距,或成功屏幕上添加内容.tracking将主机上下文添加到已保存的元数据; 使用custom用于增加字段.onSubmit在保存成功后运行.createFeedbackScreenshotUploader财务报告和审定财务报表createFeedbackScreenshotUrlResolver可提供给createHttpFeedbackApi当主机支持附件时.captureScreenshot让主机抓取当前标签。 它应该返回一个图像File, (中文(简体) ),Blob,或 PNG/JPEG/WebP 数据 URL; 返回null如果取消的话。 没有它,库会使用浏览器的屏幕共享拾取器.
为了扩展,请在其背景/服务人员中捕捉,并通过扩展信息传递结果。 库在给适配器打电话前隐藏其模式:
<FeedbackExperience
// ...other props
captureScreenshot={async () => {
const result = await chrome.runtime.sendMessage({ type: 'ECG_CAPTURE_FEEDBACK_TAB' });
if (result.error) throw new Error(result.error);
return result.dataUrl ?? null;
}}
/>
扩展必须使用 chrome.tabs.captureVisibleTab ,并拥有所需的标签/主机权限。 如果React UI运行在正则网页而非扩展上下文中,则通过内容脚本而不是调用来连接请求 chrome.runtime 从页面.
这些选项自定义了已存在的流量;添加新字段或更改其分支需要自定义主机UI或库更改.
低级组成
答复/反馈,通过 queryId 直接代替 featureId数字 :
<FeedbackExperience
queryId={queryId}
requestId={requestId}
sessionId={sessionId}
userEmail={userEmail}
environment="dev"
api={feedbackApi}
/>
requestId 财务报告和审定财务报表 sessionId 是可选的关联标识符。 特性反馈使用 featureId; 使用查询反馈 queryId启用 metadata 用于额外的应用字段和 tracking 用于模式/地貌上下文。 下级呼叫者可以使用 useFeedbackFlow({ queryId, requestId, sessionId, userEmail, environment }) 或者说 useFeedbackFlow({ featureId, userEmail, environment })为现有消费者保留了更古老的位置钩签名.
通过部署环境 metadata={{ environment: "stage" }} 或者说 tracking={{ environment: "stage" }}保存默认值到 dev 当不提供环境时。 Cw-core集成为 config.VITE_CURRENT_ENV;远程特性包装器也接受一个 environment 道具 (英语).
4以下的评分不会创建反馈表或上传附件,直到用户完成空白步骤. 仅仅选择低评分或拒绝该步骤并不能挽救它.
用于独立的即时/模式安置、使用 useFeedbackFlow, (中文(简体) ), FeedbackPrompt,以及 FeedbackModal 使用相同的流程控制器和一个 anchorRef启用 useFeedbackPersistence 带有 FeedbackApi 用于加载和保存反馈,并将其保存的处理器接入模式. FeedbackExperience 为标准布局处理此接线.
软件包导出 createFeedbackCopy, (中文(简体) ), createFeedbackTheme, (中文(简体) ), createFeedbackMetadata,以及用于更深入定制的相关类型. mockFeedbackApi 财务报告和审定财务报表 createMockFeatureAvailabilityApi 可用于演示和测试;当主机提供真正的适配器时,不需要演示和测试.