@ desource/context7-widget-angular (英语)

将上下文7 文档解答带入您的 Angular 应用程序, 并带有部件 符合它的设计。 自定义字体、颜色、布局和触发内容 本地独立组件.

为什么要使用这个部件 ?

上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 围绕该服务添加一个自由,自定义的界面.

您应该可以添加 Docs 聊天, 而无需在一个 精心设计的网站。 此软件包将扩展官方上下文7 部件 视觉控件并添加多行输入、答案和代码复制、停止、重试、, 以及尊重读者立场的滚动.

现有背景7用户可以 替换脚本 URL 或采用同一库和域设置的此组件。 新用户可以 将文档答案放入产品页和登入,帮助访问者 了解图书馆并尝试他们的第一个整合.

该组件使用 OnPush,表示输入和输入输出。 配置应用程序 默认为 provideContext7Widget 并使用可注射服务 方案控制。 共享核心套件处理对话状态, 运输、马克德和布局.

开始前

使用您在背景7上声称的图书馆 。 在其 管理 – 聊天 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 /owner/repo 以该图书馆的编号为例。 图书馆 仅索引无法在您的网站上聊天 . 见 背景7 的部件设置。 。 。 .

安装

npm install @desource/context7-widget-angular

在应用程序构建中导入样式表一次 :

@import '@desource/context7-widget-angular/styles.css';

需要角22号.

构成部分

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Context7Widget],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <context7-widget
      library="/owner/repo"
      position="anchor"
      preset="glass"
      theme="auto"
      (question)="trackQuestion($event)"
    />
  `
})
export class App {
  trackQuestion(detail: Context7WidgetQuestionEventDetail): void {
    console.log(detail.library, detail.question);
  }
}

该部分暴露 open, (中文(简体) ), close, (中文(简体) ), toggle, (中文(简体) ), send, (中文(简体) ), cancel, (中文(简体) ), retry, (中文(简体) ), reset, (中文(简体) ), isOpen, (中文(简体) ), isBusy, (中文(简体) ), getMessages,以及 subscribe 通过a viewChild(Context7Widget) 参考文献.

应用程序默认

provideContext7Widget 不创建其他部件而默认供应 :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideContext7Widget } from '@desource/context7-widget-angular';
import { App } from './app';

bootstrapApplication(App, {
  providers: [
    provideContext7Widget({
      launcherLabel: 'Ask docs',
      preset: 'glass',
      theme: 'auto'
    })
  ]
});

明确的组件输入超过默认值 .

可注入控制

Context7WidgetService 解析声明部件 widgetId 并揭露 反应 widget, (中文(简体) ), widgetId, (中文(简体) ), isOpen, (中文(简体) ), isBusy,以及 messages 信号.

import { Component, inject } from '@angular/core';
import { Context7WidgetService } from '@desource/context7-widget-angular';

@Component({
  selector: 'docs-actions',
  standalone: true,
  template: `<button type="button" (click)="ask()">Explain setup</button>`
})
export class DocsActions {
  readonly docs = inject(Context7WidgetService);

  async ask(): Promise<void> {
    this.docs.select('docs');
    this.docs.open();
    await this.docs.send('How do I configure the widget?');
  }
}

该服务可拥有动态挂载的角元件:

const widget = docs.mount({
  library: '/owner/repo',
  position: 'center',
  preset: 'terminal',
  target: '#widget-root',
  widgetId: 'docs'
});

await widget.send('Show the installation steps.');
docs.unmount('docs');

通话 mount 同样的 widgetId 更新并移动自有 组件. unmount 绝不删除模板中声明的组件. 程序安装需要浏览器文档 .

实例

受控能见度

当父方拥有能见度时使用角双向绑定 :

import { Component, signal } from '@angular/core';
import { Context7Widget } from '@desource/context7-widget-angular';

@Component({
  selector: 'docs-shell',
  standalone: true,
  imports: [Context7Widget],
  template: `
    <button type="button" (click)="docsOpen.set(true)">Open docs</button>
    <context7-widget [(open)]="docsOpen" library="/owner/repo" position="center" [backdrop]="true" />
  `
})
export class DocsShell {
  readonly docsOpen = signal(false);
}

奥米 open 以初始化内部可见度 defaultOpen。 。 。 .

管理触发内容

导入 Context7WidgetTrigger 投射特定产品触发器时:

import { Component } from '@angular/core';
import { Context7Widget, Context7WidgetTrigger } from '@desource/context7-widget-angular';

@Component({
  standalone: true,
  imports: [Context7Widget, Context7WidgetTrigger],
  template: `
    <context7-widget library="/owner/repo" [customTrigger]="true">
      <span context7WidgetTrigger>Ask product docs</span>
    </context7-widget>
  `
})
export class ProductDocs {}

外部触发

<button id="docs-help" type="button">Ask docs</button>
<context7-widget library="/owner/repo" customTrigger="docs-help" />

ID 可能包含或省略 #。完整的 CSS 选择器,直接 Element 数值, 财务报告和审定财务报表 ElementRef<Element> 价值观也得到支持。 失踪选手离开 当目标进入文档时,内置发射器可见并绑定. 当触发器改变或 部件被销毁.

自定义

该组件将本地角 DOM 置于 .context7-widget;没有 覆盖核心自定义元素。 覆盖共享 CSS 变量或公共部分 :

.context7-widget[widget-id='docs'] {
  --c7-accent: #7cffb2;
  --c7-panel-background: #101513;
  --c7-panel-color: #f7f2e8;
  --c7-border-color: rgba(247, 242, 232, 0.18);
  --c7-panel-radius: 8px;
}

.context7-widget [part~='send-button'] {
  min-width: 5rem;
  text-transform: uppercase;
}

.context7-widget-trigger {
  --c7-trigger-background: #111827;
  --c7-trigger-color: #f8fafc;
  --c7-trigger-focus: rgba(124, 255, 178, 0.42);
  --c7-trigger-radius: 8px;
  --c7-trigger-shadow: none;
}

见 实时定制指南 每一个公共标志和部分.

投入和产出

本部分接受 library, (中文(简体) ), theme, (中文(简体) ), preset, (中文(简体) ), position, (中文(简体) ), color, (中文(简体) ), customTrigger, (中文(简体) ), backdrop, (中文(简体) ), closeOnOutsideClick, (中文(简体) ), defaultOpen, (中文(简体) ), initialMessage, (中文(简体) ), labels, (中文(简体) ), launcherLabel, (中文(简体) ), launcherVariant, (中文(简体) ), linkBaseUrl, (中文(简体) ), panelHeight, (中文(简体) ), panelWidth, (中文(简体) ), placeholder, (中文(简体) ), title, (中文(简体) ), widgetId,并控制 open。 。 。 .

产出为 ready, (中文(简体) ), opened, (中文(简体) ), closed, (中文(简体) ), cancelled, (中文(简体) ), question, (中文(简体) ), firstToken, (中文(简体) ), answer, (中文(简体) ), answerComplete, (中文(简体) ), toolCall, (中文(简体) ), toolResult, (中文(简体) ), error,以及 openChange。 。 。 . 每个生命周期或对话输出都收到相同的类型事件细节 由核心软件包. openChange 收到请求的布尔状态.

使用 labels 对可见和辅助字符串进行局部本地化。 相对 标记下链接与上下文7库页面相对应的解析,除非 linkBaseUrl 设置文档来源.

在响应流中,发送动作成为了启用的停止动作. 输入发送, Shift+ 输入新行、 已完成的答案和有栅栏的代码 块会显示复制动作,运输失败会显示重试。 读者意识 当有人向上移动并恢复对话时,自动滚动停止 下边。 居中部件陷阱焦点、 隔离外部内容和锁定文档 卷行会.

复制 widgetId 注册构成堆栈。 可注入控制解析 更新的部件,然后在更新的部件之后恢复先前的注册 被摧毁。 没有时, 默认查询会回到第一个可用的部件 部件使用 default 编号.

安全部门改革和包装

无害环境管理条目和申报在安全部门改革期间是安全的进口。 宣布的安全部门改革 不访问浏览器全域; 只访问浏览器的听众, 模式状态, 焦点, ,然后在视图初始化后启动约束. Context7WidgetService.mount 财务报告和审定财务报表 unmount 是客户端所有权 API.

角和角 @desource/context7-widget/kit 仍然是外部依赖,所以 应用程序可以复制Angular和树摇未用工具包模块。 样式 单独在 @desource/context7-widget-angular/styles.css。 。 。 .

数据流动和隐私

浏览器会发布已配置的库 ID 和当前对话信件 直接转到 https://context7.com/api/v2/widget/chat源代码实验室没有 代理聊天内容 。 该套件没有添加分析、饼干或持久性 浏览器存储 。 Evention 事件细节向主机披露问答 应用程序,因此该应用程序添加的日志或持久性成为 数据流动。 不发送机密或敏感个人数据.

相关软件包

• @desource/context7-widget 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.
• @desource/context7-widget-vue 提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.
• @desource/context7-widget-nuxt 为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值.
• @desource/context7-widget-react 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.
• @desource/context7-widget-svelte 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器.