@opentiny/next-sdk 0.2.2 → 0.2.4

package/index.ts

@@ -38,3 +38,17 @@ export { getAISDKTools } from './agent/utils/getAISDKTools'
 // 方便的二维码类
 export { QrCode, type QrCodeOption } from './remoter/QrCode'
 export type * from './agent/type'
+
+// Web 端 Skill 公共能力：解析 skill 文档、生成 systemPrompt、内置 list_skills / get_skill_content 工具
+export {
+  getSkillOverviews,
+  formatSkillsForSystemPrompt,
+  getSkillMdPaths,
+  getSkillMdContent,
+  getMainSkillPaths,
+  getMainSkillPathByName,
+  parseSkillFrontMatter,
+  createSkillTools,
+  type SkillMeta,
+  type SkillToolsSet
+} from './skills/index'

package/package.json

@@ -1,24 +1,39 @@
 {
   "name": "@opentiny/next-sdk",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
+  "homepage": "https://docs.opentiny.design/next-sdk/guide/",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:opentiny/next-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/next-sdk/issues"
+  },
+  "keywords": [
+    "next-sdk",
+    "opentiny",
+    "mcp",
+    "sdk",
+    "agent"
+  ],
   "license": "MIT",
   "author": "Chunhui Mo",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "description": "OpenTiny NEXT SDK",
+  "description": "A frontend intelligent application development toolkit designed to simplify WebAgent integration and usage, supporting multiple programming languages and frontend frameworks to help developers rapidly implement intelligent features",
   "dependencies": {
     "@modelcontextprotocol/sdk": "~1.25.2",
     "@opentiny/next": "^0.3.2",
-    "@ai-sdk/openai": "^2.0.76",
+    "@ai-sdk/openai": "^3.0.0",
     "@ai-sdk/deepseek": "1.0.30",
-    "@ai-sdk/provider": "^2.0.0",
-    "@ai-sdk/mcp": "^0.0.11",
+    "@ai-sdk/provider": "^3.0.0",
+    "@ai-sdk/mcp": "^1.0.0",
     "qrcode": "^1.5.4",
     "zod": "^3.25.76",
     "ajv": "^8.17.1",
-    "ai": "5.0.106"
+    "ai": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "~5.9.3",

package/remoter/createRemoter.ts

@@ -1,13 +1,14 @@
 import { QrCode } from './QrCode'
-import { Tooltip } from './tooltips';
-import chat from './svgs/chat.svg?url'; 
-import scan from './svgs/scan.svg?url'; 
-import link from './svgs/link.svg?url'; 
-import qrCode from './svgs/qrcode.svg?url'; 
-import iconCopy from './svgs/icon-copy.svg?url'; 
-
-const DEFAULT_REMOTE_URL = 'https://agent.opentiny.design/tiny-robot'
+import { Tooltip } from './tooltips'
+import chat from './svgs/chat.svg?url'
+import scan from './svgs/scan.svg?url'
+import link from './svgs/link.svg?url'
+import qrCode from './svgs/qrcode.svg?url'
+import iconCopy from './svgs/icon-copy.svg?url'
+
+const DEFAULT_REMOTE_URL = 'https://chat.opentiny.design'
 const DEFAULT_QR_CODE_URL = 'https://ai.opentiny.design/next-remoter'
+const DEFAULT_LOGO_URL = 'https://ai.opentiny.design/next-remoter/svgs/logo-next-no-bg-left.svg'
 
 /** 菜单项配置接口 */
 export interface MenuItemConfig {
@@ -20,7 +21,7 @@ export interface MenuItemConfig {
   /** 菜单文字颜色 */
   active?: boolean
   /** 识别码 */
-  know?: boolean  
+  know?: boolean
   /** 菜单项描述 */
   desc?: string
   /** 菜单项提示 */
@@ -42,8 +43,10 @@ export interface FloatingBlockOptions {
   sessionId: string
   /** 菜单项配置 */
   menuItems?: MenuItemConfig[]
-  /** 遥控端页面地址，默认为： https://agent.opentiny.design/tiny-robot */
+  /** 遥控端页面地址，默认为： https://chat.opentiny.design */
   remoteUrl?: string
+  /** 悬浮Logo的url地址，默认为： https://ai.opentiny.design/next-remoter/svgs/logo-next-no-bg-left.svg */
+  logoUrl?: string
 }
 
 // 动作类型
@@ -83,7 +86,7 @@ const getDefaultMenuItems = (options: FloatingBlockOptions): MenuItemConfig[] =>
       know: true,
       showCopyIcon: true,
       icon: scan
-    },
+    }
   ]
 }
 
@@ -93,6 +96,8 @@ class FloatingBlock {
   private floatingBlock!: HTMLDivElement
   private dropdownMenu!: HTMLDivElement
   private menuItems: MenuItemConfig[]
+  /** 即将关闭dropdown的定时器 */
+  private closingTimer = 0
 
   // 计算 sessionPrefix 属性
   private get sessionPrefix(): string {
@@ -107,34 +112,37 @@ class FloatingBlock {
     this.options = {
       ...options,
       qrCodeUrl: options.qrCodeUrl || DEFAULT_QR_CODE_URL,
-      remoteUrl: options.remoteUrl || DEFAULT_REMOTE_URL
+      remoteUrl: options.remoteUrl || DEFAULT_REMOTE_URL,
+      logoUrl: options.logoUrl || DEFAULT_LOGO_URL
     }
 
-    // 合并默认菜单项配置和用户配置
-    this.menuItems = this.mergeMenuItems(options.menuItems)
+    // 合并默认菜单项配置和用户配置。  用户不传入任何menu时， 则不自动合并默认菜单了，即不渲染任何菜单。
+    if (options.menuItems && options.menuItems.length === 0) {
+      this.menuItems = []
+    } else {
+      this.menuItems = this.mergeMenuItems(options.menuItems)
+    }
 
     this.init()
   }
 
   private getImageUrl = (asset: string | undefined): HTMLImageElement | undefined => {
-    if (!asset) return;
-    const img = new Image();
-    img.src = asset;
-    return img;
+    if (!asset) return
+    const img = new Image()
+    img.src = asset
+    return img
   }
 
   private renderItem = (): void => {
     this.menuItems
       .filter((item) => item.show !== false) // 过滤掉show为false的菜单项
-      .map(
-        (item) => {
-          const wrapper = document.getElementById(`tiny-remoter-icon-item-${item.action}`) as HTMLDivElement;
-          if (!wrapper) return;
-          wrapper.innerHTML = '';
-          const img = this.getImageUrl(item.icon);
-          if (img) wrapper.appendChild(img);
-      }
-    );
+      .map((item) => {
+        const wrapper = document.getElementById(`tiny-remoter-icon-item-${item.action}`) as HTMLDivElement
+        if (!wrapper) return
+        wrapper.innerHTML = ''
+        const img = this.getImageUrl(item.icon)
+        if (img) wrapper.appendChild(img)
+      })
   }
 
   /**
@@ -174,7 +182,7 @@ class FloatingBlock {
     this.floatingBlock.className = 'tiny-remoter-floating-block'
     this.floatingBlock.innerHTML = `
       <div class="tiny-remoter-floating-block__icon">
-        <img style="display: block; width: 56px;" src="${DEFAULT_QR_CODE_URL}/svgs/logo-next-no-bg-left.svg" alt="icon" />
+        <img style="display: block; width: 56px;" src="${this.options.logoUrl}" alt="icon" />
       </div>
     `
 
@@ -211,13 +219,14 @@ class FloatingBlock {
             <div class="tiny-remoter-dropdown-item__desc-wrapper">
               <div class="tiny-remoter-dropdown-item__desc ${item.active ? 'tiny-remoter-dropdown-item__desc--active' : ''} ${item.know ? 'tiny-remoter-dropdown-item__desc--know' : ''}">${item.desc}</div>
               <div>
-                ${item.showCopyIcon
-                     ? `
+                ${
+                  item.showCopyIcon
+                    ? `
                    <div class="tiny-remoter-copy-icon" id="${item.action}" data-action="${item.action}">
                       <img src="${iconCopy}"/>
                    </div>
                  `
-                     : ''
+                    : ''
                 }
               </div>
             </div>
@@ -234,11 +243,33 @@ class FloatingBlock {
     this.readyTips(`remote-url`)
   }
 
-
   private bindEvents(): void {
     // 绑定浮动块点击事件
     this.floatingBlock.addEventListener('click', () => {
-      this.toggleDropdown()
+      this.showAIChat()
+    })
+
+    // 浮动块悬浮处理
+    this.floatingBlock.addEventListener('mouseenter', () => {
+      this.openDropdown()
+
+      if (this.closingTimer) {
+        window.clearTimeout(this.closingTimer)
+        this.closingTimer = 0
+      }
+    })
+    this.floatingBlock.addEventListener('mouseleave', () => {
+      this.shouldCloseDropdown()
+    })
+    // 悬浮菜单进入，则阻止关闭
+    this.dropdownMenu.addEventListener('mouseenter', (e: Event) => {
+      if (this.closingTimer) {
+        window.clearTimeout(this.closingTimer)
+        this.closingTimer = 0
+      }
+    })
+    this.dropdownMenu.addEventListener('mouseleave', (e: Event) => {
+      this.shouldCloseDropdown()
     })
 
     // 绑定菜单项点击事件
@@ -280,20 +311,24 @@ class FloatingBlock {
     })
   }
 
-  private toggleDropdown(): void {
-    if (this.isExpanded) {
-      this.closeDropdown()
-    } else {
-      this.openDropdown()
+  private openDropdown(): void {
+    // 没有menuItems，则返回
+    if (!this.menuItems || (this.menuItems && this.menuItems.length === 0)) {
+      return
     }
-  }
 
-  private openDropdown(): void {
     this.isExpanded = true
     this.floatingBlock.classList.add('expanded')
     this.dropdownMenu.classList.add('show')
   }
 
+  private shouldCloseDropdown() {
+    this.closingTimer = window.setTimeout(() => {
+      this.closeDropdown()
+    }, 300)
+  }
+
+  /** 真正的立即关闭 */
   private closeDropdown(): void {
     this.isExpanded = false
     this.floatingBlock.classList.remove('expanded')

package/skills/index.ts

@@ -0,0 +1,141 @@
+/**
+ * Web 端 Skill 公共能力模块（next-sdk）
+ * - 提供解析、概况、systemPrompt 拼接、按路径/名称查文档
+ * - 提供 createSkillTools：供 remoter 注入 get_skill_content 工具，大模型可按需加载技能文档
+ */
+
+import { tool } from 'ai'
+import { z } from 'zod'
+
+/** 主 SKILL.md 路径格式：仅匹配一级子目录下的 SKILL.md，如 ./calculator/SKILL.md */
+const MAIN_SKILL_PATH_REG = /^\.\/[^/]+\/SKILL\.md$/
+
+/** 从 front matter 中提取 name 和 description 的正则（--- 与 --- 之间） */
+const FRONT_MATTER_BLOCK_REG = /^---\s*\n([\s\S]+?)\s*\n---/
+
+/** 单个技能的概况信息（从主 SKILL.md 的 front matter 提取） */
+export interface SkillMeta {
+  /** 技能名称，与 skill 目录名一致 */
+  name: string
+  /** 技能描述，用于 systemPrompt */
+  description: string
+  /** 主 SKILL.md 相对路径，如 ./calculator/SKILL.md */
+  path: string
+}
+
+/**
+ * 从主 SKILL.md 的 YAML front matter 中用正则提取 name、description
+ */
+export function parseSkillFrontMatter(content: string): { name: string; description: string } | null {
+  // 先提取 --- 之间的文本块
+  const blockMatch = content.match(FRONT_MATTER_BLOCK_REG)
+  if (!blockMatch?.[1]) return null
+  const block = blockMatch[1]
+
+  // 分别匹配 name 和 description 字段（支持任意顺序）
+  const nameMatch = block.match(/^name:\s*(.+)$/m)
+  const descMatch = block.match(/^description:\s*(.+)$/m)
+
+  const name = nameMatch?.[1]?.trim()
+  const description = descMatch?.[1]?.trim()
+
+  return name && description ? { name, description } : null
+}
+
+/**
+ * 获取所有「主 SKILL.md」的路径（一级子目录下的 SKILL.md）
+ */
+export function getMainSkillPaths(modules: Record<string, string>): string[] {
+  return Object.keys(modules).filter((path) => MAIN_SKILL_PATH_REG.test(path))
+}
+
+/**
+ * 获取所有技能的概况列表（name、description、path），用于 systemPrompt 或列表展示
+ */
+export function getSkillOverviews(modules: Record<string, string>): SkillMeta[] {
+  const mainPaths = getMainSkillPaths(modules)
+  const list: SkillMeta[] = []
+  for (const path of mainPaths) {
+    const content = modules[path]
+    if (!content) continue
+    const parsed = parseSkillFrontMatter(content)
+    if (!parsed) continue
+    list.push({
+      name: parsed.name,
+      description: parsed.description,
+      path
+    })
+  }
+  return list
+}
+
+/**
+ * 格式化为大模型 systemPrompt 可用的技能说明文本
+ * @param skills 不传则需由调用方传入从 getSkillOverviews 得到的结果
+ */
+export function formatSkillsForSystemPrompt(skills: SkillMeta[]): string {
+  if (skills.length === 0) return ''
+  const lines = skills.map((s) => `- **${s.name}**: ${s.description}`)
+  return `## 可用技能\n\n${lines.join('\n')}\n\n当需要用到某技能时，请使用 get_skill_content 工具获取该技能的完整文档内容。`
+}
+
+/**
+ * 获取所有已加载的 md 文件路径（含主 SKILL.md 与 reference 等）
+ */
+export function getSkillMdPaths(modules: Record<string, string>): string[] {
+  return Object.keys(modules)
+}
+
+/**
+ * 根据相对路径获取某个 md 文档的原始内容
+ */
+export function getSkillMdContent(modules: Record<string, string>, path: string): string | undefined {
+  return modules[path]
+}
+
+/**
+ * 根据技能 name 查找其主 SKILL.md 的路径（name 与目录名一致）
+ */
+export function getMainSkillPathByName(modules: Record<string, string>, name: string): string | undefined {
+  return getMainSkillPaths(modules).find((p) => p.startsWith(`./${name}/SKILL.md`))
+}
+
+// ============ 内置工具：供 remoter 注入，替代业界 skill 中「读取文档」的操作 ============
+
+/** AI SDK Tool 类型，用于 extraTools 合并，不写死泛型避免与 ai 包版本强绑定 */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SkillToolsSet = Record<string, any>
+
+/**
+ * 根据 skillMdModules 创建供 AI 调用的工具集
+ * - get_skill_content: 按技能名或路径获取完整文档内容，便于大模型自动识别并加载技能
+ * remoter 可将返回的 tools 合并进 extraTools 注入 agent
+ */
+export function createSkillTools(modules: Record<string, string>): SkillToolsSet {
+  const getSkillContent = tool({
+    description:
+      '根据技能名称或文档路径获取该技能的完整 Markdown 文档内容。传入 skillName（如 calculator）或 path（如 ./calculator/SKILL.md）',
+    inputSchema: z.object({
+      skillName: z.string().optional().describe('技能名称，与目录名一致，如 calculator'),
+      path: z.string().optional().describe('文档相对路径，如 ./calculator/SKILL.md 或 ./product-guide/reference/xxx.md')
+    }),
+    execute: (args: { skillName?: string; path?: string }) => {
+      const { skillName, path: pathArg } = args
+      let content: string | undefined
+      if (pathArg) {
+        content = getSkillMdContent(modules, pathArg)
+      } else if (skillName) {
+        const mainPath = getMainSkillPathByName(modules, skillName)
+        content = mainPath ? getSkillMdContent(modules, mainPath) : undefined
+      }
+      if (content === undefined) {
+        return { error: '未找到对应技能文档', skillName: skillName ?? pathArg }
+      }
+      return { content, path: pathArg ?? getMainSkillPathByName(modules, skillName!) }
+    }
+  })
+
+  return {
+    get_skill_content: getSkillContent
+  }
+}