@ desource/context7-widget- svelte (英语)
背景7 文档在您可以为您的 Svelte 应用程序样式的部件中解答 . 使用您自己的颜色、 类型和触发内容, 有 Svelte 5 片段, 可绑定 状态和反应控制.
为什么要使用这个部件 ?
上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 围绕该服务添加自定义接口 .
官方背景7部件提供了基本的视觉设置. 这个版本让你 将助手装入精心设计的站点并添加聊天细节访问者 每天使用:多行问题、可复制代码、停止、重试和滚动 这使得他们控制.
升级已存在的上下文7 脚本 或使用下面具有相同库和域设置的本地组件. 对于新网站,请向参观者提供一种方法,以探索您图书馆的能力和 问如何是起起起. Svelte 手柄渲染; 核心套件共享聊天 发动机、运输、Markdown和布局辅助工具.
开始前
使用您在背景7上声称的图书馆 。 在其 管理 – 聊天 设置,
启用部件, 将您的站点域添加到允许的域并保存 .
替换 /owner/repo 以该图书馆的编号为例。 图书馆
仅索引无法在您的网站上聊天 .
见 背景7 的部件设置。 。 。 .
安装
npm install @desource/context7-widget-svelte
一次导入部件样式表 :
import '@desource/context7-widget-svelte/styles.css';
实例
构成部分
<script lang="ts">
import { Context7Widget, type Context7WidgetHandle } from '@desource/context7-widget-svelte';
import '@desource/context7-widget-svelte/styles.css';
let widget: Context7WidgetHandle;
let open = $state(false);
</script>
<Context7Widget
bind:this={widget}
bind:open
library="/owner/repo"
position="anchor"
preset="glass"
customTrigger
launcherLabel="Ask docs"
onQuestion={(detail) => console.log(detail.question)}
/>
<button onclick={() => widget.send('Show the recommended setup')}>Ask programmatically</button>
customTrigger 支持四种模式: 为内置发射器省略, 通过 true 用于Svelte 管理的按钮,通过一个元素 ID 或 CSS 选择器作为外部触发器,或通过一个 Element。使用 Svelte 5 片段自定义管理下的触发器 :
<Context7Widget library="/owner/repo" customTrigger>
{#snippet trigger({ label })}
<span aria-hidden="true">?</span> {label}
{/snippet}
</Context7Widget>
组件绑定曝光 open, (中文(简体) ), close, (中文(简体) ), toggle, (中文(简体) ), send, (中文(简体) ), cancel, (中文(简体) ), retry, (中文(简体) ), reset, (中文(简体) ), isOpen, (中文(简体) ), isBusy, (中文(简体) ), getMessages,以及 subscribe。 。 。 .
反应控制器
createContext7Widget 可以通过 widgetId数字 :
<script lang="ts">
import { onMount } from 'svelte';
import { createContext7Widget } from '@desource/context7-widget-svelte';
import '@desource/context7-widget-svelte/styles.css';
const docs = createContext7Widget({
library: '/owner/repo',
position: 'center',
preset: 'terminal'
});
onMount(() => {
docs.mount();
return docs.unmount;
});
</script>
<button onclick={() => docs.open()}>Open docs</button><p>{docs.messages.length} messages</p>
控制器暴露出反应性 element, (中文(简体) ), isOpenState, (中文(简体) ), isBusyState,以及 messages 获取器和全部必须API. mount(overrides) 创建或更新一个自有部件; update(options) 应用直播选项而不替换它.
自定义
支持每个共同选项: library, (中文(简体) ), theme, (中文(简体) ), preset, (中文(简体) ), position, (中文(简体) ), color, (中文(简体) ), customTrigger, (中文(简体) ), backdrop, (中文(简体) ), closeOnOutsideClick, (中文(简体) ), defaultOpen, (中文(简体) ), initialMessage, (中文(简体) ), labels, (中文(简体) ), launcherLabel, (中文(简体) ), launcherVariant, (中文(简体) ), linkBaseUrl, (中文(简体) ), panelHeight, (中文(简体) ), panelWidth, (中文(简体) ), placeholder, (中文(简体) ), title,以及 widgetId。 。 。 .
使用 labels 用于本地化可见和辅助文本。 相对 Markdown 链接解析与上下文 7 库页面相对,除非 linkBaseUrl 提供另一个文件来源.
该组件使原生斯维尔特光DOM. 样式公开 part 下面的属性 .context7-widget,并在此根上设置 CSS 变量:
.context7-widget {
--c7-accent: #7c3aed;
--c7-font-family: Inter, system-ui, sans-serif;
}
.context7-widget [part~='panel'] {
border-color: color-mix(in srgb, var(--c7-accent), transparent 65%);
}
.context7-widget-trigger {
--c7-trigger-background: #7c3aed;
--c7-trigger-radius: 10px;
}
回调道具是 onReady, (中文(简体) ), onOpen, (中文(简体) ), onClose, (中文(简体) ), onCancel, (中文(简体) ), onQuestion, (中文(简体) ), onFirstToken, (中文(简体) ), onAnswer, (中文(简体) ), onAnswerComplete, (中文(简体) ), onToolCall, (中文(简体) ), onToolResult,以及 onError。消费者召回失败的报告不会损坏部件状态或跳过状态的听众.
UX 与无障碍
作曲者支持多行输入: 输入发送并 Shift+Enter 插入一行新行. 在流出过程中, Send 成为启用的 Stop 动作 。 已完成的答案和代码块有明确的复制动作,错误会暴露重试,并取消保留部分答案. 阅读器-意识滚动只跟随新输出,而对话则停留在底部附近.
触发同步 aria-controls, (中文(简体) ), aria-expanded,以及 aria-haspopup. 居中对话框陷阱焦点,隔离背景内容,并锁定页面滚动;角板和锚板仍然是非模式的。 外部触发属性在卸载后被还原.
数据流动和隐私
浏览器直接发送库 ID 和对话信件到 https://context7.com/api/v2/widget/chatDesource Labs不代理聊天内容. 该套件没有添加分析,饼干,或持续的浏览器存储. 不发送机密或敏感个人数据;审查后端处理和保留的背景7政策.
包装
软件包使用 Svelte 5 runes 和 官方 svelte 出口条件。 进口是SSR-安全;DOM工作只从组件挂载或明确控制器开始 mount(). 斯维尔特和 @desource/context7-widget/kit 仍然是消费者退化的外部依赖。 样式是分开的,而摇树元数据只标出CSS作为副作用.
相关软件包
@desource/context7-widget提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.@desource/context7-widget-vue提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.@desource/context7-widget-nuxt为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值.@desource/context7-widget-react提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.@desource/context7-widget-angular提供独立的Angular组件,信号,应用程序默认,以及可注射控制.