@templmf/temp-solf-lmf 0.0.54 → 0.0.55

package/guanwang/src/chat-sdk/headless/buildSystemPrompt.js

@@ -0,0 +1,351 @@
+/**
+ * headless/buildSystemPrompt.js
+ *
+ * 动态组装 system prompt，按 Roo 架构分区块构建，针对 Web 环境和 Qwen3 优化：
+ * - 删除所有本地 IO 相关工具和规则
+ * - 保留并优化工具示例（弱模型需要大量示例）
+ * - 强约束语气（MUST / NEVER / ALWAYS），弱模型更易遵循
+ * - 关键规则前置，避免弱模型忽略 prompt 后半段
+ */
+
+// ─────────────────────────────────────────────────────────────────
+// 区块：工具使用规范
+// ─────────────────────────────────────────────────────────────────
+const TOOL_USE_SECTION = `====
+
+工具使用
+
+你拥有以下工具，在用户授权下执行。每次对话你只能使用一个工具，并在收到工具执行结果后再继续。
+
+# 工具调用格式
+
+工具调用使用 XML 标签格式，工具名作为标签名，参数嵌套在内部：
+
+<工具名>
+<参数名>参数值</参数名>
+</工具名>
+
+MUST 严格遵守此格式，标签不得缺失、多余或嵌套错误，否则工具无法被识别和执行。
+
+# 工具列表
+
+## ask_followup_question
+描述：当你需要用户提供更多信息才能继续时，使用此工具向用户提问。MUST 同时提供 2-4 个建议答案供用户快速选择，降低用户输入成本。
+
+参数：
+- question：（必填）向用户提出的问题，MUST 清晰具体，一次只问一个问题
+- follow_up：（必填）建议答案列表，每个答案用 <suggest> 标签包裹，可附加 mode 属性指定选择后切换的模式
+
+用法：
+<ask_followup_question>
+<question>你的问题</question>
+<follow_up>
+<suggest>建议答案1</suggest>
+<suggest>建议答案2</suggest>
+<suggest mode="code">切换到Code模式并开始实现</suggest>
+</follow_up>
+</ask_followup_question>
+
+示例：询问项目技术栈
+<ask_followup_question>
+<question>这个项目使用的是哪个前端框架？</question>
+<follow_up>
+<suggest>Vue 3 + TypeScript</suggest>
+<suggest>React + TypeScript</suggest>
+<suggest>Vue 2（旧项目维护）</suggest>
+<suggest>其他框架，我来补充说明</suggest>
+</follow_up>
+</ask_followup_question>
+
+示例：询问后端服务提供方
+<ask_followup_question>
+<question>用户认证由哪个系统负责？</question>
+<follow_up>
+<suggest>本系统自己实现</suggest>
+<suggest>依赖公司统一 SSO 系统</suggest>
+<suggest>第三方服务（如微信、钉钉）</suggest>
+</follow_up>
+</ask_followup_question>
+
+---
+
+## attempt_completion
+描述：当你已完成用户交代的任务，使用此工具呈现最终结果。用户可能会给出反馈，你可以据此改进后再次使用此工具。
+
+IMPORTANT：在使用此工具前，MUST 在 <thinking> 标签内确认所有步骤已完成、所有工具调用已成功。未确认直接调用此工具会导致任务不完整。
+
+参数：
+- result：（必填）任务完成的最终结果描述，MUST 是明确的终态陈述，不得以问题或"是否需要继续"结尾
+
+用法：
+<attempt_completion>
+<result>
+你的最终结果描述
+</result>
+</attempt_completion>
+
+示例：代码生成完成
+<attempt_completion>
+<result>
+登录组件已生成，包含手机号+验证码登录、密码登录两种方式，支持表单验证和错误提示，已通过 render_artifact 输出为 Login.vue 文件。
+</result>
+</attempt_completion>
+
+示例：需求文档完成
+<attempt_completion>
+<result>
+用户注册功能的需求文档已完成，包含 3 个用户故事、12 个功能拆解项（含接口层和交互层），系统调用关系已明确标注 SSO 依赖，已通过 render_artifact 输出为 Markdown 文件。
+</result>
+</attempt_completion>
+
+---
+
+## switch_mode
+描述：请求切换到另一个模式。模式切换需要用户确认。仅在当前任务明确需要其他模式的能力时使用。
+
+参数：
+- mode_slug：（必填）目标模式标识，可选值：code / ask / architect / requirements
+- reason：（选填）切换原因，帮助用户理解为什么需要切换
+
+用法：
+<switch_mode>
+<mode_slug>目标模式</mode_slug>
+<reason>切换原因</reason>
+</switch_mode>
+
+示例：需求确认完毕，建议切换到 Architect 模式
+<switch_mode>
+<mode_slug>architect</mode_slug>
+<reason>需求已梳理清晰，建议切换到 Architect 模式进行系统设计</reason>
+</switch_mode>
+
+示例：用户要求生成代码，当前在 Ask 模式
+<switch_mode>
+<mode_slug>code</mode_slug>
+<reason>需要生成完整代码文件，Code 模式更适合此任务</reason>
+</switch_mode>
+
+---
+
+## render_artifact
+描述：输出一个完整的代码或文档文件，文件将在右侧面板中展示，用户可预览和下载。
+
+何时使用：
+- 代码超过 20 行且构成完整可运行文件时 MUST 使用此工具
+- 输出技术文档、需求文档、架构说明时 MUST 使用此工具
+- 用户明确要求"生成文件"、"保存代码"时 MUST 使用此工具
+
+何时不使用：
+- 仅作为示例说明的短代码片段（≤20 行）用普通代码块即可
+- 回答问题时引用的代码示例不需要 artifact
+
+参数：
+- file_name：（必填）文件名，包含扩展名，如 Login.vue、api.ts、README.md
+- lang：（必填）代码语言，如 vue、typescript、javascript、markdown、python
+- content：（必填）文件完整内容，MUST 是完整内容，严禁省略或截断
+
+用法：
+<render_artifact>
+<file_name>文件名.扩展名</file_name>
+<lang>语言</lang>
+<content>
+完整文件内容
+</content>
+</render_artifact>
+
+示例：输出 Vue 组件
+<render_artifact>
+<file_name>LoginForm.vue</file_name>
+<lang>vue</lang>
+<content>
+<template>
+  <div class="login-form">
+    <!-- 完整组件内容 -->
+  </div>
+</template>
+</content>
+</render_artifact>
+
+示例：输出需求文档
+<render_artifact>
+<file_name>用户注册需求.md</file_name>
+<lang>markdown</lang>
+<content>
+# 用户注册功能需求文档
+...
+</content>
+</render_artifact>
+
+---
+
+## request_context
+描述：当你需要用户提供现有代码、配置文件或其他上下文内容才能继续时，使用此工具请求。用户可通过粘贴代码或上传文件提供内容。
+
+何时使用：
+- 需要查看用户现有代码才能给出修改建议时
+- 需要了解项目配置才能给出准确方案时
+- NEVER 在未获得必要上下文时直接凭空假设代码内容
+
+参数：
+- hint：（必填）说明需要什么内容，以及为什么需要，帮助用户准确提供
+
+用法：
+<request_context>
+<hint>提示内容</hint>
+</request_context>
+
+示例：需要查看现有组件代码
+<request_context>
+<hint>请提供现有的 UserProfile.vue 组件代码，我需要了解当前的数据结构和样式约定，才能给出准确的修改方案</hint>
+</request_context>
+
+示例：需要了解 API 接口
+<request_context>
+<hint>请提供后端登录接口的文档或示例响应，包括请求参数格式和响应数据结构</hint>
+</request_context>`
+
+// ─────────────────────────────────────────────────────────────────
+// 区块：工具使用指南
+// ─────────────────────────────────────────────────────────────────
+const TOOL_GUIDELINES = `# 工具使用指南
+
+1. 在 <thinking> 标签内先分析：已有哪些信息，还缺什么，用哪个工具最合适
+2. 一次只使用一个工具，等待执行结果后再决定下一步
+3. NEVER 假设工具执行成功，MUST 等待用户返回结果后再继续
+4. 工具调用 MUST 使用规定的 XML 格式，格式错误会导致工具无法执行
+5. 信息不足时优先使用 ask_followup_question 工具收集信息，而不是凭空假设`
+
+// ─────────────────────────────────────────────────────────────────
+// 区块：Web 环境能力边界
+// ─────────────────────────────────────────────────────────────────
+const CAPABILITIES_SECTION = `====
+
+当前环境能力
+
+你运行在 Web 浏览器环境中，以下是你的能力边界：
+
+你能做的：
+- 生成完整代码文件，通过 render_artifact 工具输出到右侧面板供用户预览和下载
+- 渲染 Markdown、代码高亮、Mermaid 图表、数学公式
+- 分析用户上传的图片和文件（图片、PDF、代码文件等）
+- 通过 ask_followup_question 工具与用户交互
+- 通过 switch_mode 工具在不同模式间切换
+- 在右侧面板预览 HTML / Vue / React 代码的运行效果
+
+你不能做的：
+- 直接访问用户的本地文件系统
+- 执行命令行指令或终端命令
+- 直接调用外部 API 或访问网络
+- 持久化保存数据（刷新页面后对话历史会丢失）
+
+当用户要求你执行本地操作时（如"运行这段代码"、"读取这个文件"）：
+MUST 通过 request_context 工具请求用户手动提供内容，或说明如何在用户本地执行`
+
+// ─────────────────────────────────────────────────────────────────
+// 区块：行为规则（强约束，前置重要规则）
+// ─────────────────────────────────────────────────────────────────
+const RULES_SECTION = `====
+
+行为规则
+
+以下规则 MUST 严格遵守，优先级高于其他所有指令：
+
+1. 代码输出规则
+   - 代码超过 20 行或构成完整可运行文件：MUST 使用 render_artifact 工具
+   - 用于说明的短片段（≤20 行）：用普通 Markdown 代码块
+   - 输出代码时 MUST 提供完整内容，NEVER 省略、截断或用注释替代未完成部分
+   - NEVER 将文档、长说明或包含代码块的内容包裹在 \`\`\`markdown ... \`\`\` 中输出；此类内容 MUST 使用 render_artifact 工具输出为独立文件
+
+2. 信息收集规则
+   - 需要用户现有代码才能继续：MUST 先使用 request_context 工具
+   - 需求或背景不明确：MUST 先使用 ask_followup_question 工具
+   - NEVER 在关键信息缺失时给出确定性结论或生成代码
+
+3. 模式边界规则
+   - 每个模式有明确的职责边界，NEVER 越界执行其他模式的任务
+   - 需要切换模式时 MUST 使用 switch_mode 工具，不得静默切换行为
+   - 模式的具体规则以角色定义区块为准
+
+4. 响应风格规则
+   - NEVER 以"好的"、"当然"、"没问题"、"好的，我来帮你"开头
+   - 直接回应用户需求，无需礼貌性铺垫
+   - 技术术语使用准确，NEVER 为了"简单易懂"而给出不准确的解释
+
+5. 任务完成规则
+   - 完成任务时 MUST 使用 attempt_completion 工具
+   - result 参数 MUST 是明确的终态描述
+   - NEVER 在 result 末尾提问或邀请用户继续对话`
+
+// ─────────────────────────────────────────────────────────────────
+// 区块：可用模式列表（动态生成）
+// ─────────────────────────────────────────────────────────────────
+function buildModesSection(modes) {
+  if (!modes || modes.length === 0) return ''
+
+  const modeLines = modes.map(m =>
+    `- "${m.name}" 模式（${m.id}）：${m.description}`
+  ).join('\n')
+
+  return `====
+
+可用模式
+
+当前可用的模式列表：
+${modeLines}
+
+若用户要求切换模式，使用 switch_mode 工具进行切换。`
+}
+
+// ─────────────────────────────────────────────────────────────────
+// 区块：用户自定义指令（动态注入）
+// ─────────────────────────────────────────────────────────────────
+function buildCustomInstructions(customInstructions) {
+  if (!customInstructions?.trim()) return ''
+
+  return `====
+
+用户自定义指令
+
+以下是用户提供的额外指令，在不违背工具使用规则的前提下尽量遵守：
+
+${customInstructions.trim()}`
+}
+
+// ─────────────────────────────────────────────────────────────────
+// 主函数：组装完整 system prompt
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * 动态组装 system prompt
+ * @param {object} opts
+ * @param {object} opts.mode          当前模式配置对象（来自 modes/*.js）
+ * @param {object[]} opts.allModes    所有可用模式列表
+ * @param {string} [opts.customInstructions]  用户自定义指令
+ * @returns {string}
+ */
+export function buildSystemPrompt({ mode, allModes = [], customInstructions = '' }) {
+  const sections = [
+    // 1. 角色定义（最前面，弱模型优先读到）
+    mode.rolePrompt,
+
+    // 2. 工具使用规范（含完整示例）
+    TOOL_USE_SECTION,
+
+    // 3. 工具使用指南
+    TOOL_GUIDELINES,
+
+    // 4. Web 环境能力边界
+    CAPABILITIES_SECTION,
+
+    // 5. 行为规则（强约束）
+    RULES_SECTION,
+
+    // 6. 可用模式列表（动态）
+    buildModesSection(allModes),
+
+    // 7. 用户自定义指令（动态，最后注入）
+    buildCustomInstructions(customInstructions),
+  ]
+
+  return sections.filter(Boolean).join('\n\n')
+}

package/guanwang/src/chat-sdk/headless/index.js

@@ -0,0 +1,15 @@
+/**
+ * chat-sdk/headless/index.js
+ *
+ * Headless 模式对外入口，仅暴露纯逻辑，零 UI 依赖。
+ *
+ * 使用方式：
+ *   import { useChat } from 'your-chat-sdk/headless'
+ *
+ *   const { messages, send, switchMode, onToolCall } = useChat({
+ *     models: [...],
+ *     modes: ['code', 'ask'],
+ *     features: { artifact: true, markdown: true },
+ *   })
+ */
+export { useChat } from './useChat.js'

package/guanwang/src/chat-sdk/headless/useChat.js

@@ -0,0 +1,77 @@
+/**
+ * headless/useChat.js
+ *
+ * SDK 的纯逻辑层入口，零 UI 依赖。
+ * 同时被以下两个入口使用：
+ *   - chat-sdk/index.js (createAIChat) — 完整视图模式
+ *   - chat-sdk/headless/index.js (useChat) — 仅能力模式
+ *
+ * 暴露的接口：
+ *
+ * 状态（只读 ref/computed）
+ *   messages         消息列表（UI 格式，非 API 格式）
+ *   isLoading        是否请求中
+ *   currentMode      当前模式 id
+ *   selectedModel    当前选中模型配置对象
+ *   availableModels  全部可用模型列表
+ *   activeArtifacts  当前会话的 artifact 列表
+ *   sessions         所有会话
+ *   activeSessionId  当前会话 id
+ *
+ * 方法
+ *   send({ text, attachments })   发送消息
+ *   abort()                       中止当前流式请求
+ *   switchMode(modeId)            切换模式
+ *   selectModel(modelId)          切换模型
+ *   clearSession()                清空当前会话消息
+ *   newSession()                  新建会话
+ *   switchSession(sessionId)      切换会话
+ *
+ * tool-use 回调（可选覆盖，不写用内置默认行为）
+ *   onToolCall(toolName, handler)
+ *   onToolCall(handler)  监听所有工具
+ */
+
+import { ref, computed, shallowRef } from 'vue'
+import { useChatStore }  from './useChatStore.js'
+import { loadModes }     from '../modes/index.js'
+
+export function useChat(config) {
+  // config 结构：
+  // {
+  //   models: [{ id, name, baseURL, apiKey, vision }],
+  //   defaultModel: 'model-id',
+  //   autoVision: true,
+  //   modes: ['code', 'ask', 'architect', 'requirements'],
+  //   defaultMode: 'code',
+  //   features: { artifact, markdown, upload, codepreview },
+  //   customInstructions: '',
+  // }
+
+  // TODO: 第二阶段实现，当前为骨架占位
+  const store = useChatStore(config)
+
+  return {
+    // 状态
+    messages:        store.messages,
+    isLoading:       store.isLoading,
+    currentMode:     store.currentMode,
+    selectedModel:   store.selectedModel,
+    availableModels: store.availableModels,
+    activeArtifacts: store.activeArtifacts,
+    sessions:        store.sessions,
+    activeSessionId: store.activeId,
+
+    // 方法
+    send:            store.sendMessage,
+    abort:           store.abortStream,
+    switchMode:      store.switchMode,
+    selectModel:     store.selectModel,
+    clearSession:    store.clearSession,
+    newSession:      store.newSession,
+    switchSession:   store.switchSession,
+
+    // tool-use 回调注册
+    onToolCall:      store.onToolCall,
+  }
+}

package/guanwang/src/chat-sdk/headless/useChatDB.js

@@ -0,0 +1,147 @@
+/**
+ * useChatDB.js
+ * IndexedDB 持久化层，负责聊天 sessions 的存取
+ *
+ * 存储策略：
+ *   - 仅存 displayText（msg.content）和 attachments 元信息（不存 base64 图片数据）
+ *   - apiContent 含 image_url base64，体积大且无需持久化，不写入 DB
+ *   - 每次写入整个 sessions 数组（简化实现，sessions 数量通常不超过几十条）
+ *
+ * DB 结构：
+ *   db: citic_chat  version: 1
+ *   store: sessions  keyPath: id
+ */
+
+const DB_NAME    = 'citic_chat'
+const DB_VERSION = 1
+const STORE_NAME = 'sessions'
+
+let _db = null
+
+// ── 打开 / 初始化 DB ──────────────────────────────────────────────
+function openDB() {
+  if (_db) return Promise.resolve(_db)
+
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION)
+
+    req.onupgradeneeded = (e) => {
+      const db = e.target.result
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'id' })
+      }
+    }
+
+    req.onsuccess = (e) => {
+      _db = e.target.result
+      resolve(_db)
+    }
+
+    req.onerror = () => reject(req.error)
+  })
+}
+
+// ── 序列化：去除不需要持久化的大体积字段 ─────────────────────────
+function serializeSession(session) {
+  return {
+    id:       session.id,
+    title:    session.title,
+    messages: session.messages.map(msg => {
+      const base = {
+        id:        msg.id,
+        role:      msg.role,
+        content:   msg.content,   // displayText，安全
+        error:     msg.error || false,
+        streaming: false,         // 持久化时流式已结束
+      }
+      // attachments 只保留元信息（无 base64 preview）
+      if (msg.attachments && msg.attachments.length > 0) {
+        base.attachments = msg.attachments.map(att => ({
+          id:       att.id,
+          fileName: att.fileName,
+          type:     att.type,
+          ext:      att.ext,
+          // preview（图片 dataURL）体积大，不持久化
+        }))
+      }
+      // apiContent 完全不持久化（含 base64 / 文件原文）
+      return base
+    }),
+  }
+}
+
+// ── 保存所有 sessions ─────────────────────────────────────────────
+export async function saveSessions(sessions) {
+  try {
+    const db = await openDB()
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    const store = tx.objectStore(STORE_NAME)
+
+    // 先清空旧数据，再写入当前全量（保持顺序）
+    store.clear()
+    for (const session of sessions) {
+      store.put(serializeSession(session))
+    }
+
+    return new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve()
+      tx.onerror    = () => reject(tx.error)
+    })
+  } catch (err) {
+    // DB 操作失败静默处理，不影响主流程
+    console.warn('[ChatDB] saveSessions failed:', err)
+  }
+}
+
+// ── 读取所有 sessions ─────────────────────────────────────────────
+export async function loadSessions() {
+  try {
+    const db = await openDB()
+    const tx = db.transaction(STORE_NAME, 'readonly')
+    const store = tx.objectStore(STORE_NAME)
+
+    return new Promise((resolve, reject) => {
+      const req = store.getAll()
+      req.onsuccess = () => {
+        const rows = req.result || []
+        // IndexedDB getAll 不保证顺序，按 id（时间戳）降序排列（新会话在前）
+        rows.sort((a, b) => b.id - a.id)
+        resolve(rows)
+      }
+      req.onerror = () => reject(req.error)
+    })
+  } catch (err) {
+    console.warn('[ChatDB] loadSessions failed:', err)
+    return []
+  }
+}
+
+// ── 删除单条 session ──────────────────────────────────────────────
+export async function deleteSession(id) {
+  try {
+    const db = await openDB()
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).delete(id)
+    return new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve()
+      tx.onerror    = () => reject(tx.error)
+    })
+  } catch (err) {
+    console.warn('[ChatDB] deleteSession failed:', err)
+  }
+}
+
+// ── 清空所有 sessions ─────────────────────────────────────────────
+export async function clearAllSessions() {
+  try {
+    const db = await openDB()
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).clear()
+    return new Promise((resolve, reject) => {
+      tx.oncomplete = () => resolve()
+      tx.onerror    = () => reject(tx.error)
+    })
+  } catch (err) {
+    console.warn('[ChatDB] clearAllSessions failed:', err)
+  }
+}