@ desource/context7-widget- react
在您的 React app 中让上下文 7 的 docs 查看家 。 匹配您的设计 预设和 CSS, 从您的帮助按钮打开,并通过 React 控制它 道具、裁判或钩子.
为什么要使用这个部件 ?
上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 在服务周围添加一个自定义的界面 .
官方部件的基本样式选项可以让聊天离开位置 在一个精心设计的网站。 该套件增加了对这些细节的控制: 自定义字体和间隔,灵活放置,可复制代码,多行输入, 并停止和重试动作.
如果你使用正式部件, 替换其脚本 URL 或采用以下本地反应部分。 保留您现有的上下文7 库 和域设置。 为了实现新的融合,请在访客所在的地方提供医生帮助 选择您的库或工作设置 .
反应拥有渲染和生命周期. 共享核心套件处理对话 状态,运输,马克下和默认.
开始前
使用您在背景7上声称的图书馆 。 在其 管理 – 聊天 设置,
启用部件, 将您的站点域添加到允许的域并保存 .
替换 /owner/repo 以该图书馆的编号为例。 图书馆
仅索引无法在您的网站上聊天 .
见 背景7 的部件设置。 。 。 .
安装
npm install @desource/context7-widget-react
一次导入样式表 :
import '@desource/context7-widget-react/styles.css';
构成部分
import { useRef } from 'react';
import { Context7Widget, type Context7WidgetHandle } from '@desource/context7-widget-react/component';
import '@desource/context7-widget-react/styles.css';
export function DocsAssistant() {
const widget = useRef<Context7WidgetHandle>(null);
return (
<Context7Widget
ref={widget}
library="/owner/repo"
position="anchor"
preset="glass"
customTrigger
launcherLabel="Ask docs"
onQuestion={(detail) => console.log(detail.question)}
/>
);
}
customTrigger 支持四种模式: 为内置浮动省略
发射器,通过 true 对于反应管理按钮,通过元素 ID 或 CSS
外部触发选择器,或通过 Element反应参考。 函数在
页:1 trigger proc可以在所管理的按钮内渲染自定义的内容.
受控开放状态
奥米 open 内部状态 defaultOpen启用 open 财务报告和审定财务报表
onOpenChange 当应用程序状态拥有对话框时 :
const [docsOpen, setDocsOpen] = useState(false);
<Context7Widget library="/owner/repo" open={docsOpen} onOpenChange={setDocsOpen} />;
onOpen 财务报告和审定财务报表 onClose 实际排放的生命周期通知
过渡; onOpenChange 是受控状态请求.
钩子
useContext7Widget 控制已注册的最新反应部件
widgetId,或者它可以拥有一个程序上挂载的 React root:
import { useContext7Widget } from '@desource/context7-widget-react/hook';
import '@desource/context7-widget-react/styles.css';
export function DocsHelp() {
const docs = useContext7Widget({
autoMount: true,
library: '/owner/repo',
position: 'center',
preset: 'terminal',
widgetId: 'docs'
});
return (
<button type="button" disabled={!docs.widget} onClick={() => void docs.send('Show the recommended setup')}>
Explain setup
</button>
);
}
所有者挂起后自动挂起 。 打电话 send, (中文(简体) ), open,以及
来自事件处理器或部件准备好后的其他控件.
钩子回来了 widget, (中文(简体) ), isOpen, (中文(简体) ), isBusy,以及 messages附加时 mount, (中文(简体) ),
unmount, (中文(简体) ), open, (中文(简体) ), close, (中文(简体) ), toggle, (中文(简体) ), send, (中文(简体) ), cancel, (中文(简体) ), retry, (中文(简体) ), reset,以及
getMessages。 。 。 . mount(overrides) 创建或更新自有的 React 部件.
每一个钩子选择都是反应性的, 包括反应儿童,触发内容,
根道具和回调; 明确 mount(overrides) 价值观贯穿全局
这些更新。 除非
removeOnUnmount 实值 false。 。 。 .
登记册是包级的,不是基于React或DOM祖先. widgetId
默认为 default; 当否时 default 注册已存在, 查找掉入
返回用于单部件应用程序的第一个可用的注册部件.
复制 IDs 形成一个堆: 最新注册获胜, 并卸载
恢复先前的注册.
实例
当应用程序状态拥有可见度时使用受控部件 :
import { useState } from 'react';
import { Context7Widget } from '@desource/context7-widget-react/component';
import '@desource/context7-widget-react/styles.css';
export function DocsHelp() {
const [open, setOpen] = useState(false);
return (
<Context7Widget
library="/owner/repo"
open={open}
onOpenChange={setOpen}
position="center"
backdrop
preset="glass"
customTrigger
/>
);
}
使用 useContext7Widget({ autoMount: true }) 用于路径动作,命令
调色板,或不需要设置
当前树中的组件。 可在
演示画廊。 。 。 .
道具、事件和本地化
本构成部分接受共同选项: library, (中文(简体) ), theme, (中文(简体) ), preset, (中文(简体) ),
position, (中文(简体) ), color, (中文(简体) ), customTrigger, (中文(简体) ), backdrop, (中文(简体) ), closeOnOutsideClick, (中文(简体) ),
defaultOpen, (中文(简体) ), initialMessage, (中文(简体) ), labels, (中文(简体) ), launcherLabel, (中文(简体) ), launcherVariant, (中文(简体) ),
linkBaseUrl, (中文(简体) ), panelHeight, (中文(简体) ), panelWidth, (中文(简体) ), placeholder, (中文(简体) ), title,以及
widgetId。 。 。 .
使用 labels 覆盖任何用户界面或辅助字符串,包括
归属和图书馆倒置. Context7WidgetLabels 导出为已键入
辞典. 相对的 Markdown 链接解析到上下文 7 库
默认页面; 设置 linkBaseUrl 以使用您的文档来源.
生命周期和流回调 onReady, (中文(简体) ), onOpen, (中文(简体) ), onClose, (中文(简体) ), onCancel, (中文(简体) ),
onQuestion, (中文(简体) ), onFirstToken, (中文(简体) ), onAnswer, (中文(简体) ), onAnswerComplete, (中文(简体) ), onToolCall, (中文(简体) ),
onToolResult,以及 onError。每个调用对象都收到输入的详细对象.
组件参考器曝光 open, (中文(简体) ), close, (中文(简体) ), toggle, (中文(简体) ), send, (中文(简体) ), cancel, (中文(简体) ), retry, (中文(简体) ),
reset, (中文(简体) ), isOpen, (中文(简体) ), isBusy, (中文(简体) ), getMessages,以及 subscribe当请求是
中,多行编曲变为只读,其发送动作变为
启用停止动作 。 输入发送; Shift+ 输入新行.
在对话接近时
下,保留读者向上滚动后的位置,并恢复
当他们回到底部或重设对话时.
通过下列程序注册的国家听众 subscribe 彼此隔离.
如果投出, 则在不损坏请求或跳过的情况下报告出错
其余的听众.
数据流动与隐私
浏览器会发布已配置的库 ID 和当前对话信件
直接转到 https://context7.com/api/v2/widget/chat源代码实验室没有
代理聊天内容 。 该套件没有添加分析、饼干或持久性
浏览器存储; 对话状态一直保存在挂载部件中直至
reset() 或卸载。 回调有效载荷向主机显示问答
应用,因此,任何记录、分析或持久性都增加了
集成器数据流. 不发送机密或敏感个人资料,以及
审查背景7的后端处理和保留政策.
自定义
该组件将本地光DOM置于 .context7-widget应用共享
CSS 该根的变量和使用 [part~='send-button']- 样式选择器
稳定组件。 控制触发符的使用 --c7-trigger-background, (中文(简体) ),
--c7-trigger-border, (中文(简体) ), --c7-trigger-color, (中文(简体) ), --c7-trigger-focus, (中文(简体) ),
--c7-trigger-radius,以及 --c7-trigger-shadow。 。 。 .
.context7-widget.docs-assistant {
--c7-accent: #7cffb2;
--c7-panel-background: #101513;
--c7-panel-color: #f7f2e8;
--c7-panel-radius: 8px;
}
.context7-widget.docs-assistant [part~='send-button'] {
min-width: 5rem;
}
过 rootProps={{ className: 'docs-assistant' }} 以范围覆盖这些覆盖。 见
实时定制指南
每一个公共标志和部分.
包装
一揽子措施是仅限无害环境管理和安保部门安全进口:
| 条目 | 目录 |
|---|---|
@desource/context7-widget-react/component | Context7Widget 和组件类型;不导入 React DOM |
@desource/context7-widget-react/hook | useContext7Widget; 要求自有根重现 DOM |
@desource/context7-widget-react | 导出两个表面的相容性条目 |
@desource/context7-widget-react/styles.css | 已切换的部件和被管理的触发样式 |
偏爱 /component 当你只使 Context7Widget。 。 。 . react-dom 是一个
用于此孤立条目的可选对等端, 需要 /hook 和由
软件包根,它也导出钩子。 反应 反应 DOM 和核心包
保持外部状态,以便应用程序可以复制它们。 制作或
程序安装仍然需要浏览器文档。 每个 Java 脚本
条目和共享块保留反应 "use client" 反应的边界
服务器组件和Next.js App路由器消费者.
相关软件包
@desource/context7-widget提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.@desource/context7-widget-vue提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.@desource/context7-widget-nuxt为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值.@desource/context7-widget-svelte提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器.@desource/context7-widget-angular提供独立的Angular组件,信号,应用程序默认,以及可注射控制.