diff --git a/src/data/demos.ts b/src/data/demos.ts index af9291d..5f3d651 100644 --- a/src/data/demos.ts +++ b/src/data/demos.ts @@ -1,4 +1,9 @@ import type { PromptEnvelope } from '../types/protocol' +import { demoA } from './demos/demo-a' +import { demoB } from './demos/demo-b' +import { demoC } from './demos/demo-c' +import { demoD } from './demos/demo-d' +import { demoE } from './demos/demo-e' export interface DemoScenario { id: string @@ -7,984 +12,6 @@ export interface DemoScenario { envelope: PromptEnvelope } -const now = Date.now() - -// ============================================================ -// Scenario A: Simple chat + system prompt + memory -// ============================================================ -const demoA: PromptEnvelope = { - version: '1.0', - model: 'gpt-4-turbo', - messages: [ - { - id: 'a-1', - role: 'system', - segments: [ - { - kind: 'static_var', - name: 'current_date', - value: '2026年6月7日', - description: '当前对话日期，注入到 System Prompt 模板中', - }, - { - kind: 'static_var', - name: 'language', - value: '中文（简体）', - description: '模型回复的首选语言', - }, - { - kind: 'static_var', - name: 'user_name', - value: '小明', - description: '当前用户名称', - }, - { - kind: 'system_prompt', - content: `当前日期：{{current_date}} -用户名称：{{user_name}} -回复语言：{{language}} - -你是 HCI 课程设计助手。你帮助学生对聊天界面的信息架构进行批判性思考。 -回答应简洁、有结构，鼓励学生从用户体验角度分析问题。 -如果学生对某个概念不清楚，用通俗的例子解释，不要用术语堆砌。`, - collapsed: true, - }, - { - kind: 'memory', - description: - '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。记忆随对话自动更新，你也可以手动编辑或删除。', - items: [ - { - title: '用户背景', - content: '设计系研二学生，正在做 HCI 课程设计，关注 LLM 交互的透明性', - }, - { - title: '偏好', - content: '喜欢简洁的表达，反感术语堆砌。倾向用图示辅助理解。', - }, - { - title: '上次对话', - content: '讨论过 chatbox UI 过度封装的问题，确认了 9 种需要区分的 prompt 类型', - }, - ], - collapsed: true, - }, - { - kind: 'tool_overview', - items: [ - { - name: 'search', - description: '搜索学术文献和设计案例', - parameters: 'query: string, limit?: number', - schema: { - type: 'object', - properties: { - query: { type: 'string', description: '搜索关键词' }, - limit: { type: 'number', description: '返回结果数量上限' }, - }, - required: ['query'], - }, - }, - { - name: 'get_example', - description: '获取 UI 设计案例截图和说明', - parameters: 'topic: string, count?: number', - schema: { - type: 'object', - properties: { - topic: { type: 'string', description: '设计主题' }, - count: { type: 'number', description: '案例数量' }, - }, - required: ['topic'], - }, - }, - ], - collapsed: true, - }, - ], - timestamp: now - 300000, - }, - { - id: 'a-2', - role: 'user', - segments: [ - { - kind: 'text', - content: '你好，我想讨论一下我设计的聊天协议方案。你觉得 9 种 prompt 类型的分类合理吗？', - }, - ], - timestamp: now - 240000, - }, - { - id: 'a-3', - role: 'assistant', - segments: [ - { - kind: 'text', - content: - '我觉得你的 9 种分类很全面！从信息架构的角度看，你已经覆盖了 LLM 上下文的三个主要来源：\n\n1. **静态配置**（变量、system prompt）\n2. **能力声明**（skills、tools）\n3. **动态输入**（文档、长文本、多模态）\n\n加上工具调用的过程性信息，形成了一个完整的上下文可见性模型。这种分类本身就值得在课程设计中展开讨论。', - }, - ], - timestamp: now - 180000, - }, - ], -} - -// ============================================================ -// Scenario B: Tool call flow — code execution (success + failure) -// ============================================================ -const demoB: PromptEnvelope = { - version: '1.0', - model: 'gpt-4-turbo', - messages: [ - { - id: 'b-1', - role: 'system', - segments: [ - { - kind: 'static_var', - name: 'current_date', - value: '2026年6月7日', - description: '当前日期', - }, - { - kind: 'static_var', - name: 'language', - value: '中文（简体）', - description: '模型回复的首选语言', - }, - { - kind: 'system_prompt', - content: `当前日期：{{current_date}}，回复语言：{{language}}。 - -你是一个编程助手，可以帮助用户编写、调试和优化代码。你可以在安全沙箱中执行代码，也可以查阅技术文档。`, - collapsed: true, - }, - { - kind: 'tool_overview', - items: [ - { - name: 'execute_code', - description: '在安全沙箱中执行代码并返回输出', - parameters: 'language: string, code: string', - schema: { - type: 'object', - properties: { - language: { type: 'string', enum: ['python', 'javascript', 'typescript'], description: '编程语言' }, - code: { type: 'string', description: '要执行的代码' }, - }, - required: ['language', 'code'], - }, - }, - { - name: 'lookup_api', - description: '查阅技术文档和 API 参考', - parameters: 'query: string, source: string', - schema: { - type: 'object', - properties: { - query: { type: 'string', description: 'API 或函数名称' }, - source: { type: 'string', enum: ['python', 'mdn', 'react', 'node'], description: '文档来源（必填）' }, - }, - required: ['query', 'source'], - }, - }, - ], - collapsed: true, - }, - ], - timestamp: now - 200000, - }, - { - id: 'b-2', - role: 'user', - segments: [ - { - kind: 'text', - content: '帮我写一个 Python 函数，统计文本中每个单词的出现频率，然后运行测试一下。', - }, - ], - timestamp: now - 180000, - }, - { - id: 'b-3', - role: 'assistant', - segments: [ - { - kind: 'text', - content: '好的，我来写一个词频统计函数并用示例文本测试：', - }, - { - kind: 'tool_call_request', - toolName: 'execute_code', - arguments: { - language: 'python', - code: `def word_frequency(text): - """统计文本中每个单词的出现频率，按频率降序排列""" - import re - words = re.findall(r'\\b\\w+\\b', text.lower()) - freq = {} - for w in words: - freq[w] = freq.get(w, 0) + 1 - return dict(sorted(freq.items(), key=lambda x: x[1], reverse=True)) - -sample = "hello world hello python world python python" -result = word_frequency(sample) -for word, count in result.items(): - print(f"{word}: {count}")`, - }, - collapsed: false, - }, - ], - timestamp: now - 160000, - }, - { - id: 'b-4', - role: 'assistant', - segments: [ - { - kind: 'tool_call_result', - toolName: 'execute_code', - success: true, - result: `python: 3 -world: 2 -hello: 2`, - collapsed: true, - }, - ], - timestamp: now - 140000, - }, - { - id: 'b-5', - role: 'assistant', - segments: [ - { - kind: 'text', - content: '运行成功！其实用 `collections.Counter` 可以让代码更简洁。让我查一下 Python 官方文档确认 Counter 的 API 细节——', - }, - { - kind: 'tool_call_request', - toolName: 'lookup_api', - arguments: { - query: 'collections.Counter most_common', - }, - collapsed: false, - }, - ], - timestamp: now - 130000, - }, - { - id: 'b-6', - role: 'assistant', - segments: [ - { - kind: 'tool_call_result', - toolName: 'lookup_api', - success: false, - result: 'Error: lookup_api requires "source" parameter (python | mdn | react | node). Please specify the documentation source and retry.', - collapsed: false, - }, - ], - timestamp: now - 120000, - }, - ], -} - -// ============================================================ -// Scenario C: Long text + document + image -// ============================================================ -const longArticleContent_C = '# 大语言模型交互中的上下文透明性问题\n\n## 摘要\n\n近年来，以 ChatGPT 为代表的对话式 AI 产品迅速普及。然而，这些产品的交互设计普遍存在"上下文不透明"的问题——用户无法了解模型在生成回复时参考了哪些信息、使用了哪些工具、被施加了怎样的约束。\n\n## 1. 问题定义\n\n当前的聊天界面（chatbox UI）将 LLM 的完整上下文封装在黑盒之中。用户看到的是一个"魔法对话框"：输入问题，得到回答。但这个过程掩盖了大量关键信息：\n\n- **System Prompt**：模型的行为准则和角色设定，直接决定了回复的风格和边界\n- **User Memory**：跨对话持久化的用户信息，可能包含过时或不准确的记忆\n- **Tools & Skills**：模型可调用的外部能力，用户可能完全不知道它们的存在\n- **Variable Injection**：模板变量在用户不知情的情况下被替换为具体值\n\n这种不透明性导致了一系列用户体验问题：信任缺失、纠错困难、意外行为难以解释。\n\n## 2. 设计目标\n\n本文提出一套"Prompt Envelope Protocol"——一种结构化的 prompt 表达格式，使得：\n\n1. 每种上下文元素都有明确的视觉呈现\n2. 用户可以按需展开或折叠细节\n3. 协议可以无损导出为标准 API 格式\n4. 视觉语言保持简约，不增加认知负荷\n\n## 3. 核心设计原则\n\n### 3.1 信息密度梯度\n\n核心对话文本始终可见，元信息默认折叠。用户不会在每次对话中都被无关的 system prompt 和工具列表淹没。\n\n### 3.2 颜色编码系统\n\n每种上下文类型有独立的颜色标记，形成可学习的视觉语言：\n- 蓝色 = 变量\n- 灰色 = 系统指令\n- 紫色 = 用户记忆\n- 绿色 = 技能\n- 橙色 = 工具\n\n### 3.3 协议即视图\n\n折叠状态存储在协议数据中而非 UI 状态中。这意味着相同的协议数据在任何渲染器下都产生相同的视图——协议本身就是 view model。' - -const demoC: PromptEnvelope = { - version: '1.0', - model: 'gpt-4-turbo', - messages: [ - { - id: 'c-1', - role: 'system', - segments: [ - { - kind: 'static_var', - name: 'current_date', - value: '2026年6月7日', - description: '当前日期', - }, - { - kind: 'static_var', - name: 'language', - value: '中文（简体）', - description: '文档审阅的默认输出语言', - }, - { - kind: 'system_prompt', - content: `当前日期：{{current_date}}，回复语言：{{language}}。 - -你是文档审阅助手。帮助用户分析长文档、提取要点、回答关于文档内容的问题。`, - collapsed: true, - }, - { - kind: 'skills', - description: - 'Skills 是模型可调用的内置能力（slash commands）。输入 / 开头即可触发，无需等待模型推理。当前对话中启用以下 skills：', - items: [ - { - name: 'summarize', - description: '生成文档摘要 — 支持多种粒度（一句话/段落级/全文级）', - detail: '对用户提供的文档生成结构化摘要。支持三种粒度：一句话概览（≤50字）、段落级摘要（保存关键论点）、全文级摘要（保留章节结构）。输出为 Markdown 格式。', - triggers: ['帮我总结一下', '概括这篇文章', '这个文档说了什么', '摘要'], - instructions: '你是一个专业的文档摘要助手。当用户请求摘要时：\n1. 先确认用户需要的粒度（简要/段落/全文）\n2. 提取核心论点和支撑证据\n3. 使用 Markdown 层级结构输出\n4. 在末尾标注信息来源（章节/页码）', - }, - { - name: 'translate', - description: '翻译文档内容 — 支持中英互译，保留原文格式', - detail: '将文档内容翻译为目标语言。保留原始 Markdown 格式、代码块、表格结构。支持术语表自定义（通过附加参数）。默认输出：中文 ↔ 英文。', - triggers: ['翻译', 'translate', '翻成中文', '译成英文'], - instructions: '你是专业翻译助手。翻译规则：\n1. 保留所有 Markdown 格式和代码块\n2. 术语一致性——同一术语全文统一译法\n3. 学术文本保留原文关键术语括号标注\n4. 表格和列表结构不变', - }, - { - name: 'qa', - description: '基于文档回答具体问题 — 带引用溯源', - detail: '基于用户提供的文档内容回答具体问题。每个回答都附带文档引用（章节/段落号），用户可以点击引用跳转到原文位置。支持追问和澄清。', - triggers: ['文档中', '根据文章', '论文里提到', '这段说的是'], - instructions: '你基于文档回答用户问题。规则：\n1. 每个陈述必须引用文档出处\n2. 如果文档中没有相关信息，明确告知\n3. 区分"文档直接陈述"和"你的推理延伸"\n4. 不确定时提出澄清问题', - }, - ], - collapsed: true, - }, - ], - timestamp: now - 150000, - }, - { - id: 'c-2', - role: 'user', - segments: [ - { - kind: 'text', - content: '帮我审阅这篇论文草稿，看看结构上有什么问题：', - }, - { - kind: 'long_text', - content: longArticleContent_C, - charCount: longArticleContent_C.length, - collapsed: true, - }, - { - kind: 'document', - fileName: 'hci-paper-draft.pdf', - mimeType: 'application/pdf', - snippet: - '# 大语言模型交互中的上下文透明性问题\n\n## 摘要\n\n近年来，以 ChatGPT 为代表的对话式 AI 产品迅速普及。然而，这些产品的交互设计普遍存在"上下文不透明"的问题——用户无法了解模型在生成回复时参考了哪些信息...', - sizeBytes: 245760, - }, - { - kind: 'media', - mediaType: 'image', - url: '', - altText: '论文框架图：Context Layers 分层示意图', - }, - ], - timestamp: now - 120000, - }, - { - id: 'c-3', - role: 'assistant', - segments: [ - { - kind: 'text', - content: - '我读完了你的草稿。整体框架很清晰，但有几个建议：\n\n1. **第3节的设计原则**是目前最强的部分，可以考虑将这部分提前到第2节\n2. "信息密度梯度"这个概念很有原创性，建议在摘要中就提及\n3. 缺少用户研究部分——如果你有做可用性测试的计划，可以加一节"4. 评估方法"\n4. 颜色编码系统部分写得很好，可以加一个视觉化的表格来展示颜色-类型映射\n\n需要我展开其中某一点吗？', - }, - ], - timestamp: now - 60000, - }, - ], -} - -// ============================================================ -// Scenario D: Comprehensive — all 9 segments -// ============================================================ -const comprehensiveArticleContent = '在过去的18个月里，我们对127名LLM聊天产品用户进行了纵向研究。研究分为三个阶段：基线观察期（3个月）、干预实验期（6个月）、后续跟踪期（9个月）。在干预实验期，我们为实验组用户提供了一套上下文可视化工具，包括：system prompt查看面板、memory编辑界面、tool call实时展示和long text折叠功能。对照组使用标准的聊天界面。\n\n实验组在以下维度上表现出显著改善：\n- 任务完成率提升 23.4%（p < 0.01）\n- 纠错响应时间缩短 41.7%（p < 0.001）\n- 用户信任度评分从 3.2/5 提升至 4.1/5\n- 对话轮次平均减少 2.8 轮（更高效的信息交换）\n\n这些结果表明上下文透明性不仅仅是"nice to have"的设计细节，而是直接影响LLM交互效率的关键因素。特别是在以下场景中效果最为显著：\n1. 长文档分析：用户能够看到哪些文档片段被模型引用\n2. 多工具调用：工具链的可视化帮助用户理解推理过程\n3. 跨会话任务：memory可见性减少重复说明\n\n我们建议将上下文透明性作为LLM聊天产品的基础设计原则，而非可选特性。' - -const demoD: PromptEnvelope = { - version: '1.0', - model: 'gpt-4-turbo', - messages: [ - // --- System message with all structural segments --- - { - id: 'd-1', - role: 'system', - segments: [ - { - kind: 'static_var', - name: 'current_date', - value: '2026年6月7日', - description: '当前对话日期', - }, - { - kind: 'static_var', - name: 'language', - value: '中文（简体）', - description: '模型回复的首选语言', - }, - { - kind: 'static_var', - name: 'knowledge_cutoff', - value: '2026年1月', - description: '模型训练数据截止日期', - }, - { - kind: 'static_var', - name: 'user_name', - value: '小明', - description: '当前用户名称', - }, - { - kind: 'system_prompt', - content: `当前日期：{{current_date}} -用户：{{user_name}} -回复语言：{{language}} -知识截止：{{knowledge_cutoff}} - -你是 Claude，一个 HCI 研究助手。你的角色是帮助学生批判性地思考聊天界面的设计问题。 - -核心原则： -- 鼓励从用户体验角度分析，而非技术实现角度 -- 用具体例子说明抽象概念 -- 如果学生的方案有改进空间，以提问的方式引导而非直接批评 -- 始终记住你拥有工具调用、skills 和跨对话 memory 能力，但不必每次都全部用到`, - collapsed: true, - }, - { - kind: 'memory', - description: - '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。记忆随对话自动更新，你也可以手动编辑或删除。', - items: [ - { - title: '用户身份', - content: '小明，设计系研二，HCI 方向。正在做课程设计项目。', - }, - { - title: '项目背景', - content: '设计一个透明化 LLM 上下文的聊天协议。已确定了 9 种 prompt 类型的分类方案。', - }, - { - title: '沟通偏好', - content: '喜欢用图示和表格辅助理解。反感过度术语化。需要看到具体例子。', - }, - { - title: '上次进度', - content: '用户已确认了 MVP 范围：Web 应用，数据协议+视觉规范，可导出 OpenAI Format。', - }, - ], - collapsed: true, - }, - { - kind: 'skills', - description: - 'Skills 是模型可调用的内置能力（slash commands）。输入 / 开头即可触发，无需等待模型推理。当前对话中可用以下 skills：', - items: [ - { - name: 'deep-research', - description: '深度研究 — 多源搜索、交叉验证、生成引用报告', - detail: '这是一个多阶段研究技能。第一阶段：并行执行多个定向搜索（学术文献、行业报告、新闻、开源项目）。第二阶段：获取高相关性来源的完整内容。第三阶段：对每个声明进行三方交叉验证。第四阶段：生成包含引用来源的结构化报告。适合需要高质量、可验证答案的场景。', - triggers: ['深入调研', '全面分析', '研究一下', '查证', '给我一个研究报告', '这个领域有哪些'], - instructions: '你是深度研究助手。工作流程：\n1. 分析用户问题，拆解为 3-5 个子问题\n2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻）\n3. 抓取高相关性页面全文\n4. 交叉验证：至少两个独立来源确认同一个关键事实\n5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明\n6. 每个声明确标注来源 URL 和可信度评级', - }, - { - name: 'code-review', - description: '代码审查 — 发现正确性 bug 和简化/效率优化机会', - detail: '审查当前分支的代码变更，按两个维度分析：(1) 正确性问题：空值、边界条件、竞态、资源泄漏；(2) 质量改进：重复代码、过度复杂、性能瓶颈。按置信度分级输出，每个发现包含文件路径、行号、问题描述和修复建议。', - triggers: ['review', '审查', '帮我看看代码', '代码有什么问题', '检查一下'], - instructions: '你是代码审查专家。审查规则：\n1. 首先读取 diff 内容（git diff）\n2. 正确性维度扫描：空值处理、边界条件、竞态条件、异常处理\n3. 质量维度扫描：重复代码、过长函数、深层嵌套、无用变量\n4. 每个发现标注：严重度（高/中/低）、文件路径、行号\n5. 提供具体的修复代码片段\n6. 避免纯风格的评论（交给 formatter）', - }, - { - name: 'verify', - description: '行为验证 — 运行应用并观察行为来确认变更生效', - detail: '启动应用、运行测试、或执行指定命令，并观察输出来验证某个变更是否按预期工作。支持多种验证策略：单元测试、端到端测试、手动检查输出。适合 PR 合并前的最终确认环节。', - triggers: ['验证', '测试一下', '确认', '检查是否生效', '跑一下', '运行'], - instructions: '你是验证助手。验证流程：\n1. 确认待验证的变更是什么\n2. 选择验证策略：优先自动测试，其次手动观察\n3. 运行相关测试套件\n4. 如果测试通过，启动应用确认关键路径\n5. 输出验证报告：测试结果 + 观察到的问题 + 置信度', - }, - { - name: 'simplify', - description: '代码简化 — 审查代码的复用性、简洁性和效率并应用修复', - detail: '只关注代码质量改进（不找 bug）。扫描变更文件，发现：可抽取的共享逻辑、可合并的重复代码、不必要的中间变量、可简化表达式。直接应用修复到工作树。需要 code-review 先跑完后再用此技能。', - triggers: ['简化', '重构', '精简', '优化这段代码', '能不能更简单'], - instructions: '你是代码简化专家。简化规则：\n1. 只做质量改进，不改变行为\n2. 发现重复代码 → 提取为函数/变量\n3. 发现过长函数 → 提取子步骤\n4. 发现不必要的中间变量 → 内联\n5. 发现深层嵌套 → 卫语句（guard clause）扁平化\n6. 修改后运行全部测试确认无回归', - }, - { - name: 'loop', - description: '定时循环 — 按指定间隔重复执行一个命令或 prompt', - detail: '设置一个定时任务，每隔指定时间（5分钟、30分钟、1小时等）自动执行一个提示词或命令。适合 CI 监控、定时检查、长期运行的自动化任务。任务在后台运行，不会阻塞当前对话。', - triggers: ['定时', '每隔', '循环', '持续监控', '定期检查', '每分钟'], - instructions: '你是定时任务助手。循环配置：\n1. 确认循环间隔和任务内容\n2. 首次执行立即运行一次\n3. 后续按间隔自动触发\n4. 每次执行输出简短状态摘要\n5. 用户可以随时说"停止循环"来终止\n6. 长时间循环（>1小时）使用持久化模式', - }, - ], - collapsed: true, - }, - { - kind: 'tool_overview', - items: [ - { - name: 'search', - description: '搜索学术文献和设计案例', - parameters: 'query: string, limit?: number', - schema: { - type: 'object', - properties: { - query: { type: 'string', description: '搜索关键词' }, - limit: { type: 'number', description: '返回结果数量' }, - }, - required: ['query'], - }, - }, - { - name: 'read_file', - description: '读取文件内容', - parameters: 'path: string', - schema: { - type: 'object', - properties: { - path: { type: 'string', description: '文件路径' }, - }, - required: ['path'], - }, - }, - { - name: 'fetch_url', - description: '获取网页内容并转为 markdown', - parameters: 'url: string', - schema: { - type: 'object', - properties: { - url: { type: 'string', description: '网页 URL' }, - }, - required: ['url'], - }, - }, - { - name: 'run_code', - description: '在沙箱中执行代码', - parameters: 'language: string, code: string', - schema: { - type: 'object', - properties: { - language: { type: 'string', enum: ['python', 'javascript', 'r'], description: '编程语言' }, - code: { type: 'string', description: '代码内容' }, - }, - required: ['language', 'code'], - }, - }, - ], - collapsed: true, - }, - ], - timestamp: now - 600000, - }, - // --- User message 1 --- - { - id: 'd-2', - role: 'user', - segments: [ - { - kind: 'text', - content: '你好！我在准备课程设计的文献综述部分。我找到了一篇相关的研究报告，帮我分析一下它是否可以支持我的论点。', - }, - { - kind: 'long_text', - content: comprehensiveArticleContent, - charCount: comprehensiveArticleContent.length, - collapsed: true, - }, - { - kind: 'document', - fileName: 'context-transparency-study-2025.pdf', - mimeType: 'application/pdf', - snippet: - 'DOI: 10.1145/3613904.3642000\n\nContext Transparency in LLM-Powered Chat Interfaces: A Longitudinal Study with 127 Users\n\nIn the past 18 months, we conducted a longitudinal study...', - sizeBytes: 2457600, - }, - { - kind: 'media', - mediaType: 'image', - url: '', - altText: 'Fig 3: 实验组 vs 对照组任务完成率对比图（p<0.01）', - }, - ], - timestamp: now - 500000, - }, - // --- Assistant response --- - { - id: 'd-3', - role: 'assistant', - segments: [ - { - kind: 'text', - content: '这是一篇非常有力的参考文献！它恰恰支持了你的核心论点——上下文透明性是"基础设计原则，而非可选特性"。', - }, - ], - timestamp: now - 480000, - }, - // --- Assistant tool call --- - { - id: 'd-4', - role: 'assistant', - segments: [ - { - kind: 'tool_call_request', - toolName: 'search', - arguments: { - query: 'LLM context transparency HCI chat interface user study 2024 2025', - limit: 5, - }, - collapsed: false, - }, - ], - timestamp: now - 470000, - }, - { - id: 'd-5', - role: 'assistant', - segments: [ - { - kind: 'tool_call_result', - toolName: 'search', - success: true, - result: `Found 5 results: - -1. "Transparent AI: Designing Explainable Chat Interfaces" — CHI 2024 - → 提出了"分层透明度"框架，与本项目的"信息密度梯度"高度一致 - -2. "User Mental Models of LLM Context" — CSCW 2025 - → 发现 78% 的用户低估了 system prompt 对输出的影响 - -3. "Folding as a Visual Strategy for Complex Chat UIs" — DIS 2024 - → 验证了折叠/展开对降低认知负荷的效果 - -4. "Beyond the Black Box: Visualizing LLM Reasoning in Chat" — TOCHI 2025 - → 工具调用可视化的用户研究，与本项目的 tool call request/result 设计一致 - -5. "Memory-Aware Interfaces for Persistent LLM Interactions" — IUI 2025 - → 讨论了用户记忆的可编辑性和可遗忘性`, - collapsed: true, - }, - ], - timestamp: now - 450000, - }, - // --- Assistant final response --- - { - id: 'd-6', - role: 'assistant', - segments: [ - { - kind: 'text', - content: `搜索结果显示，你的研究方向和当前学术界的热点高度一致。以下是我对文献支持度的评估： - -**强相关（可直接引用）：** -- 第2篇（CSCW 2025）直接量化了用户对 LLM 上下文的理解不足——这是你"问题定义"部分的关键论据 -- 第3篇（DIS 2024）为你的"折叠设计"提供了实证基础 - -**建议阅读方向：** -- 第1篇的"分层透明度"框架可以与你的 9 种类型分类做对比讨论 -- 第5篇的 memory 可编辑性可能是你下一个值得探索的方向 - -这篇研究报告 + 这5篇文献构成了一个很好的文献基础。需要我帮你整理成引用格式吗？`, - }, - ], - timestamp: now - 400000, - }, - ], -} - -// ============================================================ -// Scenario E: Agent 主动触发 Skill（渐进式披露 + 工具调用） -// ============================================================ -const demoE: PromptEnvelope = { - version: '1.0', - model: 'claude-opus-4-8', - messages: [ - // --- System message: 加载 skills + memory + tools --- - { - id: 'e-1', - role: 'system', - segments: [ - { - kind: 'static_var', - name: 'current_date', - value: '2026年6月7日', - description: '当前对话日期', - }, - { - kind: 'static_var', - name: 'language', - value: '中文（简体）', - description: '模型回复的首选语言', - }, - { - kind: 'static_var', - name: 'knowledge_cutoff', - value: '2026年1月', - description: '模型训练数据截止日期', - }, - { - kind: 'system_prompt', - content: `当前日期：{{current_date}} -回复语言：{{language}} -知识截止：{{knowledge_cutoff}} - -你是 HCI 课程设计助手，具备 Anthropic Skills 机制。 - -你有以下 skills 可用。用户输入以 / 开头的命令时会直接触发对应 skill。你也可以在分析用户意图后，主动建议合适的 skill。 - -回复风格：简洁、有结构、给出可操作建议。`, - collapsed: true, - }, - { - kind: 'memory', - description: - '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。', - items: [ - { - title: '用户背景', - content: '小明，设计系研二，HCI 方向。正在做课程设计，课题是 LLM 上下文透明性。', - }, - { - title: '当前进度', - content: '已完成 MVP 开发（React + TypeScript 聊天界面），展示了 9 种 Segment 的差异化渲染。', - }, - { - title: '关注点', - content: '关心 Anthropic Skills 的渐进式披露机制能否作为 HCI 课程中的交互设计案例。', - }, - ], - collapsed: true, - }, - { - kind: 'skills', - description: - 'Skills 是模型可调用的内置能力。输入 / 触发，或根据对话上下文由 Agent 自动判断并调用。当前可用以下 skills：', - items: [ - { - name: 'deep-research', - description: '深度研究 — 多源搜索、交叉验证、生成引用报告', - detail: '多阶段研究技能：(1) 拆解问题为子问题 (2) 并行搜索多源 (3) 抓取全文 (4) 三方交叉验证 (5) 生成结构化引用报告。适合需要高质量、可验证答案的场景。', - triggers: ['深入调研', '全面分析', '研究一下', '给我一个研究报告'], - instructions: '深度研究工作流程：\n1. 分析用户问题，拆解为 3-5 个子问题\n2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻）\n3. 抓取高相关性页面全文\n4. 交叉验证：至少两个独立来源确认同一关键事实\n5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明\n6. 每声明标注来源和可信度评级', - }, - { - name: 'code-review', - description: '代码审查 — 发现正确性 bug 和简化/效率优化机会', - detail: '审查当前分支变更，按正确性和质量两个维度分析。每个发现附带文件路径、行号、问题描述和修复建议。', - triggers: ['review', '审查', '帮我看看代码', '代码有什么问题'], - instructions: '代码审查流程：\n1. 读取 git diff\n2. 正确性扫描：空值、边界、竞态、异常处理\n3. 质量扫描：重复代码、过长函数、深层嵌套\n4. 每个发现标注严重度、文件、行号\n5. 提供修复代码片段', - }, - { - name: 'verify', - description: '行为验证 — 运行应用并观察行为来确认变更生效', - detail: '启动应用或运行测试来验证变更是否按预期工作。支持自动测试和手动观察两种策略。', - triggers: ['验证', '测试一下', '确认', '检查是否生效', '跑一下'], - instructions: '验证流程：\n1. 确认待验证变更\n2. 选择策略（自动测试 或 手动观察）\n3. 运行测试套件\n4. 输出验证报告：测试结果 + 问题 + 置信度', - }, - { - name: 'simplify', - description: '代码简化 — 审查并优化代码的复用性和简洁性', - detail: '只做质量改进（不改行为）。发现重复代码、过度复杂、不必要的中间变量等，直接应用修复。', - triggers: ['简化', '重构', '精简', '优化', '能不能更简单'], - instructions: '简化规则：\n1. 只改进质量不改变行为\n2. 重复代码 → 提取函数\n3. 过长函数 → 提取子步骤\n4. 深层嵌套 → 卫语句扁平化\n5. 修复后运行全部测试确认无回归', - }, - { - name: 'loop', - description: '定时循环 — 按指定间隔重复执行命令或 prompt', - detail: '设置定时任务，每隔指定时间自动执行。适合 CI 监控、定时检查。后台运行，不阻塞对话。', - triggers: ['定时', '每隔', '循环', '持续监控', '定期'], - instructions: '循环配置：\n1. 确认间隔和任务内容\n2. 首次执行立即运行\n3. 后续按间隔自动触发\n4. 用户可说"停止"来终止', - }, - ], - collapsed: true, - }, - { - kind: 'tool_overview', - items: [ - { - name: 'run_skill', - description: '执行一个 Skill（slash command）', - parameters: 'skill_name: string, input: string', - schema: { - type: 'object', - properties: { - skill_name: { type: 'string', description: 'Skill 名称' }, - input: { type: 'string', description: '传递给 skill 的用户输入' }, - }, - required: ['skill_name', 'input'], - }, - }, - ], - collapsed: true, - }, - ], - timestamp: now - 360000, - }, - // --- User message: 触发 research 需求 --- - { - id: 'e-2', - role: 'user', - segments: [ - { - kind: 'text', - content: '我想深入了解 Anthropic Skills 的渐进式披露机制（Progressive Disclosure），作为我的 HCI 课程论文的案例研究对象。请帮我调研一下这个机制的设计原理、交互模式和学术界相关讨论。', - }, - ], - timestamp: now - 300000, - }, - // --- Assistant: 判断需要 research，主动触发 /deep-research --- - { - id: 'e-3', - role: 'assistant', - segments: [ - { - kind: 'text', - content: `你的课程论文选题很棒！Anthropic Skills 的渐进式披露机制确实是一个很好的 HCI 案例分析对象——它以 **三阶段信息展开**（overview → detail → full instructions）来降低认知负荷，同时保持功能的可发现性。 - -让我用 \`/deep-research\` skill 做一个系统性调研：`, - }, - { - kind: 'tool_call_request', - toolName: 'run_skill', - arguments: { - skill_name: 'deep-research', - input: 'Anthropic Skills progressive disclosure mechanism — design principles, interaction patterns, HCI academic discussions, related concepts (progressive disclosure in UX, Nielsen\'s heuristics, information architecture patterns for AI interfaces)', - }, - collapsed: false, - }, - ], - timestamp: now - 280000, - }, - // --- Skill 触发：指令以 tool_call_result 形式追加到对话 --- - { - id: 'e-4', - role: 'assistant', - segments: [ - { - kind: 'tool_call_result', - toolName: 'run_skill', - success: true, - result: `[/deep-research 已触发] - -深度研究工作流程： -1. 分析用户问题，拆解为 3-5 个子问题 -2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻） -3. 抓取高相关性页面全文 -4. 交叉验证：至少两个独立来源确认同一关键事实 -5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明 -6. 每声明标注来源和可信度评级`, - collapsed: true, - }, - ], - timestamp: now - 270000, - }, - // --- Skill execution result --- - { - id: 'e-5', - role: 'assistant', - segments: [ - { - kind: 'tool_call_result', - toolName: 'run_skill', - success: true, - result: `[/deep-research] 执行完成 · 搜索 12 个来源 · 抓取 8 篇全文 · 交叉验证通过 - -## 摘要 - -Anthropic Skills 的渐进式披露机制是一种三层信息架构，专门为 AI 代理的可扩展功能系统设计。核心思想："仅在用户需要时才展示细节"，与 Nielsen 的经典可用性原则高度一致。 - -## 分项发现 - -### 1. 三层披露模型 - -| 层次 | 内容 | 触发时机 | -|------|------|---------| -| L1 概览 | 名称 + 一句话描述 | 始终可见（skills 面板） | -| L2 详情 | 功能说明 + 触发条件 + 参数 | 用户点击展开 | -| L3 指令 | 完整 system prompt 正文 | 用户再次点击"查看注入指令" | - -**设计原理**：这是 "information on demand" 模式的实现——信息存在但不喧嚣。L1 提供识别（recognition），L2 提供评估（evaluation），L3 提供理解（understanding）。 - -### 2. 与经典 HCI 理论的对应 - -- **Nielsen 的 Flexibility & Efficiency heuristics**：L1 满足新手（可识别），L3 满足专家（可审阅） -- **Shneiderman 的 Visual Information Seeking Mantra**："Overview first, zoom and filter, then details-on-demand"——三层模型完美映射到 overview → zoom → details 流程 -- **Cognitive Load Theory (Sweller)**：L1 层只占用工作记忆的极小空间，L2/L3 按需加载 - -### 3. 与其他 AI 产品的对比 - -- **OpenAI GPTs**：配置页是扁平表单，缺乏渐进式展开 → 认知负荷高 -- **Gemini Gems**：类似 GPTs，所有配置信息同时可见 -- **Anthropic Skills**：三层的文件系统式浏览——/ 触发、描述预览、then 深入 - -### 4. 交互模式创新 - -Skills 采用了 **slash command + 自然语言** 的双模触发： -- 显式触发：用户输入 \`/skill-name\` -- 隐式触发：Agent 根据对话上下文判断并建议使用 skill - -这在 HCI 上称为 "mixed-initiative interaction"。 - -### 5. 学术相关文献 - -1. "Progressive Disclosure in Mobile UI" (CHI 2016) — 实验证明渐进式展开减少 37% 的错误操作 -2. "Designing for Mixed-Initiative Interaction" (TOCHI 2020) — Agent 主动建议 vs 用户显式触发的用户偏好研究 -3. "Information Scent in AI Interfaces" (CSCW 2024) — 讨论了 skills 描述如何帮助用户形成"信息气味" - -## 证据表 - -| 声明 | 来源 | 可信度 | -|------|------|--------| -| 三层披露模型 | Anthropic Agent SDK 文档 | ★★★★★ | -| 37% 错误减少 | CHI 2016 实验 | ★★★★ | -| Mixed-initiative | TOCHI 2020 | ★★★★ | - -## 限定说明 - -Anthropic Skills 机制仍在快速迭代中。上述分析基于 2026 年 6 月的公开文档和代码。建议在论文中标注版本时间。`, - collapsed: false, - }, - ], - timestamp: now - 260000, - }, - // --- Assistant: 综合报告 --- - { - id: 'e-6', - role: 'assistant', - segments: [ - { - kind: 'text', - content: `## 调研结论 - -基于 \`/deep-research\` 的交叉验证结果，我建议你的论文从以下角度分析 Skills 渐进式披露： - -### 🎯 最佳分析框架 - -**Shneiderman 的 "Overview first, zoom and filter, then details-on-demand"** 是最贴切的理论框架——Skills 的三层模型几乎是对这个 mantra 的精确工程实现。 - -### 📐 可量化的 HCI 指标 - -1. **信息可发现性**：L1 概览层——用户能否快速识别需要的 skill（recognition over recall） -2. **认知负荷**：对比"全量展示"vs"渐进式披露"的工作记忆占用 -3. **操作效率**：slash command 显式触发 vs Agent 隐式建议的完成时间对比 - -### 🔗 建议引用的关键文献 - -- CHI 2016 的渐进式披露实验（有量化数据支持你的设计论点） -- TOCHI 2020 的 mixed-initiative 研究（对应双模触发机制） -- Anthropic 2025 的 Skills Architecture RFC（一手来源） - -需要我帮你生成论文的文献综述部分吗？`, - }, - ], - timestamp: now - 240000, - }, - ], -} - export const demos: DemoScenario[] = [ { id: 'a', diff --git a/src/data/demos/demo-a.ts b/src/data/demos/demo-a.ts new file mode 100644 index 0000000..23bf9c4 --- /dev/null +++ b/src/data/demos/demo-a.ts @@ -0,0 +1,121 @@ +import type { PromptEnvelope } from '../../types/protocol' + +const now = Date.now() + +export const demoA: PromptEnvelope = { + version: '1.0', + model: 'gpt-4-turbo', + messages: [ + { + id: 'a-1', + role: 'system', + segments: [ + { + kind: 'static_var', + name: 'current_date', + value: '2026年6月7日', + description: '当前对话日期，注入到 System Prompt 模板中', + }, + { + kind: 'static_var', + name: 'language', + value: '中文（简体）', + description: '模型回复的首选语言', + }, + { + kind: 'static_var', + name: 'user_name', + value: '小明', + description: '当前用户名称', + }, + { + kind: 'system_prompt', + content: `当前日期：{{current_date}} +用户名称：{{user_name}} +回复语言：{{language}} + +你是 HCI 课程设计助手。你帮助学生对聊天界面的信息架构进行批判性思考。 +回答应简洁、有结构，鼓励学生从用户体验角度分析问题。 +如果学生对某个概念不清楚，用通俗的例子解释，不要用术语堆砌。`, + collapsed: true, + }, + { + kind: 'memory', + description: + '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。记忆随对话自动更新，你也可以手动编辑或删除。', + items: [ + { + title: '用户背景', + content: '设计系研二学生，正在做 HCI 课程设计，关注 LLM 交互的透明性', + }, + { + title: '偏好', + content: '喜欢简洁的表达，反感术语堆砌。倾向用图示辅助理解。', + }, + { + title: '上次对话', + content: '讨论过 chatbox UI 过度封装的问题，确认了 9 种需要区分的 prompt 类型', + }, + ], + collapsed: true, + }, + { + kind: 'tool_overview', + items: [ + { + name: 'search', + description: '搜索学术文献和设计案例', + parameters: 'query: string, limit?: number', + schema: { + type: 'object', + properties: { + query: { type: 'string', description: '搜索关键词' }, + limit: { type: 'number', description: '返回结果数量上限' }, + }, + required: ['query'], + }, + }, + { + name: 'get_example', + description: '获取 UI 设计案例截图和说明', + parameters: 'topic: string, count?: number', + schema: { + type: 'object', + properties: { + topic: { type: 'string', description: '设计主题' }, + count: { type: 'number', description: '案例数量' }, + }, + required: ['topic'], + }, + }, + ], + collapsed: true, + }, + ], + timestamp: now - 300000, + }, + { + id: 'a-2', + role: 'user', + segments: [ + { + kind: 'text', + content: '你好，我想讨论一下我设计的聊天协议方案。你觉得 9 种 prompt 类型的分类合理吗？', + }, + ], + timestamp: now - 240000, + }, + { + id: 'a-3', + role: 'assistant', + segments: [ + { + kind: 'text', + content: + '我觉得你的 9 种分类很全面！从信息架构的角度看，你已经覆盖了 LLM 上下文的三个主要来源：\n\n1. **静态配置**（变量、system prompt）\n2. **能力声明**（skills、tools）\n3. **动态输入**（文档、长文本、多模态）\n\n加上工具调用的过程性信息，形成了一个完整的上下文可见性模型。这种分类本身就值得在课程设计中展开讨论。', + }, + ], + timestamp: now - 180000, + }, + ], +} diff --git a/src/data/demos/demo-b.ts b/src/data/demos/demo-b.ts new file mode 100644 index 0000000..a576293 --- /dev/null +++ b/src/data/demos/demo-b.ts @@ -0,0 +1,160 @@ +import type { PromptEnvelope } from '../../types/protocol' + +const now = Date.now() + +export const demoB: PromptEnvelope = { + version: '1.0', + model: 'gpt-4-turbo', + messages: [ + { + id: 'b-1', + role: 'system', + segments: [ + { + kind: 'static_var', + name: 'current_date', + value: '2026年6月7日', + description: '当前日期', + }, + { + kind: 'static_var', + name: 'language', + value: '中文（简体）', + description: '模型回复的首选语言', + }, + { + kind: 'system_prompt', + content: `当前日期：{{current_date}}，回复语言：{{language}}。 + +你是一个编程助手，可以帮助用户编写、调试和优化代码。你可以在安全沙箱中执行代码，也可以查阅技术文档。`, + collapsed: true, + }, + { + kind: 'tool_overview', + items: [ + { + name: 'execute_code', + description: '在安全沙箱中执行代码并返回输出', + parameters: 'language: string, code: string', + schema: { + type: 'object', + properties: { + language: { type: 'string', enum: ['python', 'javascript', 'typescript'], description: '编程语言' }, + code: { type: 'string', description: '要执行的代码' }, + }, + required: ['language', 'code'], + }, + }, + { + name: 'lookup_api', + description: '查阅技术文档和 API 参考', + parameters: 'query: string, source: string', + schema: { + type: 'object', + properties: { + query: { type: 'string', description: 'API 或函数名称' }, + source: { type: 'string', enum: ['python', 'mdn', 'react', 'node'], description: '文档来源（必填）' }, + }, + required: ['query', 'source'], + }, + }, + ], + collapsed: true, + }, + ], + timestamp: now - 200000, + }, + { + id: 'b-2', + role: 'user', + segments: [ + { + kind: 'text', + content: '帮我写一个 Python 函数，统计文本中每个单词的出现频率，然后运行测试一下。', + }, + ], + timestamp: now - 180000, + }, + { + id: 'b-3', + role: 'assistant', + segments: [ + { + kind: 'text', + content: '好的，我来写一个词频统计函数并用示例文本测试：', + }, + { + kind: 'tool_call_request', + toolName: 'execute_code', + arguments: { + language: 'python', + code: `def word_frequency(text): + """统计文本中每个单词的出现频率，按频率降序排列""" + import re + words = re.findall(r'\\b\\w+\\b', text.lower()) + freq = {} + for w in words: + freq[w] = freq.get(w, 0) + 1 + return dict(sorted(freq.items(), key=lambda x: x[1], reverse=True)) + +sample = "hello world hello python world python python" +result = word_frequency(sample) +for word, count in result.items(): + print(f"{word}: {count}")`, + }, + collapsed: false, + }, + ], + timestamp: now - 160000, + }, + { + id: 'b-4', + role: 'assistant', + segments: [ + { + kind: 'tool_call_result', + toolName: 'execute_code', + success: true, + result: `python: 3 +world: 2 +hello: 2`, + collapsed: true, + }, + ], + timestamp: now - 140000, + }, + { + id: 'b-5', + role: 'assistant', + segments: [ + { + kind: 'text', + content: '运行成功！其实用 `collections.Counter` 可以让代码更简洁。让我查一下 Python 官方文档确认 Counter 的 API 细节——', + }, + { + kind: 'tool_call_request', + toolName: 'lookup_api', + arguments: { + query: 'collections.Counter most_common', + }, + collapsed: false, + }, + ], + timestamp: now - 130000, + }, + { + id: 'b-6', + role: 'assistant', + segments: [ + { + kind: 'tool_call_result', + toolName: 'lookup_api', + success: false, + result: 'Error: lookup_api requires "source" parameter (python | mdn | react | node). Please specify the documentation source and retry.', + collapsed: false, + }, + ], + timestamp: now - 120000, + }, + ], +} diff --git a/src/data/demos/demo-c.ts b/src/data/demos/demo-c.ts new file mode 100644 index 0000000..3158f4f --- /dev/null +++ b/src/data/demos/demo-c.ts @@ -0,0 +1,132 @@ +import type { PromptEnvelope } from '../../types/protocol' +import { getSkills } from '../skills' + +const now = Date.now() + +const longArticleContent_C = `# 大语言模型交互中的上下文透明性问题 + +## 摘要 + +近年来，以 ChatGPT 为代表的对话式 AI 产品迅速普及。然而，这些产品的交互设计普遍存在"上下文不透明"的问题——用户无法了解模型在生成回复时参考了哪些信息、使用了哪些工具、被施加了怎样的约束。 + +## 1. 问题定义 + +当前的聊天界面（chatbox UI）将 LLM 的完整上下文封装在黑盒之中。用户看到的是一个"魔法对话框"：输入问题，得到回答。但这个过程掩盖了大量关键信息： + +- **System Prompt**：模型的行为准则和角色设定，直接决定了回复的风格和边界 +- **User Memory**：跨对话持久化的用户信息，可能包含过时或不准确的记忆 +- **Tools & Skills**：模型可调用的外部能力，用户可能完全不知道它们的存在 +- **Variable Injection**：模板变量在用户不知情的情况下被替换为具体值 + +这种不透明性导致了一系列用户体验问题：信任缺失、纠错困难、意外行为难以解释。 + +## 2. 设计目标 + +本文提出一套"Prompt Envelope Protocol"——一种结构化的 prompt 表达格式，使得： + +1. 每种上下文元素都有明确的视觉呈现 +2. 用户可以按需展开或折叠细节 +3. 协议可以无损导出为标准 API 格式 +4. 视觉语言保持简约，不增加认知负荷 + +## 3. 核心设计原则 + +### 3.1 信息密度梯度 + +核心对话文本始终可见，元信息默认折叠。用户不会在每次对话中都被无关的 system prompt 和工具列表淹没。 + +### 3.2 颜色编码系统 + +每种上下文类型有独立的颜色标记，形成可学习的视觉语言： +- 蓝色 = 变量 +- 灰色 = 系统指令 +- 紫色 = 用户记忆 +- 绿色 = 技能 +- 橙色 = 工具 + +### 3.3 协议即视图 + +折叠状态存储在协议数据中而非 UI 状态中。这意味着相同的协议数据在任何渲染器下都产生相同的视图——协议本身就是 view model。` + +export const demoC: PromptEnvelope = { + version: '1.0', + model: 'gpt-4-turbo', + messages: [ + { + id: 'c-1', + role: 'system', + segments: [ + { + kind: 'static_var', + name: 'current_date', + value: '2026年6月7日', + description: '当前日期', + }, + { + kind: 'static_var', + name: 'language', + value: '中文（简体）', + description: '文档审阅的默认输出语言', + }, + { + kind: 'system_prompt', + content: `当前日期：{{current_date}}，回复语言：{{language}}。 + +你是文档审阅助手。帮助用户分析长文档、提取要点、回答关于文档内容的问题。`, + collapsed: true, + }, + { + kind: 'skills', + description: + 'Skills 是模型可调用的内置能力（slash commands）。输入 / 开头即可触发，无需等待模型推理。当前对话中启用以下 skills：', + items: getSkills(['summarize', 'translate', 'qa']), + collapsed: true, + }, + ], + timestamp: now - 150000, + }, + { + id: 'c-2', + role: 'user', + segments: [ + { + kind: 'text', + content: '帮我审阅这篇论文草稿，看看结构上有什么问题：', + }, + { + kind: 'long_text', + content: longArticleContent_C, + charCount: longArticleContent_C.length, + collapsed: true, + }, + { + kind: 'document', + fileName: 'hci-paper-draft.pdf', + mimeType: 'application/pdf', + snippet: + '# 大语言模型交互中的上下文透明性问题\n\n## 摘要\n\n近年来，以 ChatGPT 为代表的对话式 AI 产品迅速普及。然而，这些产品的交互设计普遍存在"上下文不透明"的问题——用户无法了解模型在生成回复时参考了哪些信息...', + sizeBytes: 245760, + }, + { + kind: 'media', + mediaType: 'image', + url: '', + altText: '论文框架图：Context Layers 分层示意图', + }, + ], + timestamp: now - 120000, + }, + { + id: 'c-3', + role: 'assistant', + segments: [ + { + kind: 'text', + content: + '我读完了你的草稿。整体框架很清晰，但有几个建议：\n\n1. **第3节的设计原则**是目前最强的部分，可以考虑将这部分提前到第2节\n2. "信息密度梯度"这个概念很有原创性，建议在摘要中就提及\n3. 缺少用户研究部分——如果你有做可用性测试的计划，可以加一节"4. 评估方法"\n4. 颜色编码系统部分写得很好，可以加一个视觉化的表格来展示颜色-类型映射\n\n需要我展开其中某一点吗？', + }, + ], + timestamp: now - 60000, + }, + ], +} diff --git a/src/data/demos/demo-d.ts b/src/data/demos/demo-d.ts new file mode 100644 index 0000000..577ec87 --- /dev/null +++ b/src/data/demos/demo-d.ts @@ -0,0 +1,273 @@ +import type { PromptEnvelope } from '../../types/protocol' +import { getSkills } from '../skills' + +const now = Date.now() + +const comprehensiveArticleContent = `在过去的18个月里，我们对127名LLM聊天产品用户进行了纵向研究。研究分为三个阶段：基线观察期（3个月）、干预实验期（6个月）、后续跟踪期（9个月）。在干预实验期，我们为实验组用户提供了一套上下文可视化工具，包括：system prompt查看面板、memory编辑界面、tool call实时展示和long text折叠功能。对照组使用标准的聊天界面。 + +实验组在以下维度上表现出显著改善： +- 任务完成率提升 23.4%（p < 0.01） +- 纠错响应时间缩短 41.7%（p < 0.001） +- 用户信任度评分从 3.2/5 提升至 4.1/5 +- 对话轮次平均减少 2.8 轮（更高效的信息交换） + +这些结果表明上下文透明性不仅仅是"nice to have"的设计细节，而是直接影响LLM交互效率的关键因素。特别是在以下场景中效果最为显著： +1. 长文档分析：用户能够看到哪些文档片段被模型引用 +2. 多工具调用：工具链的可视化帮助用户理解推理过程 +3. 跨会话任务：memory可见性减少重复说明 + +我们建议将上下文透明性作为LLM聊天产品的基础设计原则，而非可选特性。` + +export const demoD: PromptEnvelope = { + version: '1.0', + model: 'gpt-4-turbo', + messages: [ + // --- System message with all structural segments --- + { + id: 'd-1', + role: 'system', + segments: [ + { + kind: 'static_var', + name: 'current_date', + value: '2026年6月7日', + description: '当前对话日期', + }, + { + kind: 'static_var', + name: 'language', + value: '中文（简体）', + description: '模型回复的首选语言', + }, + { + kind: 'static_var', + name: 'knowledge_cutoff', + value: '2026年1月', + description: '模型训练数据截止日期', + }, + { + kind: 'static_var', + name: 'user_name', + value: '小明', + description: '当前用户名称', + }, + { + kind: 'system_prompt', + content: `当前日期：{{current_date}} +用户：{{user_name}} +回复语言：{{language}} +知识截止：{{knowledge_cutoff}} + +你是 Claude，一个 HCI 研究助手。你的角色是帮助学生批判性地思考聊天界面的设计问题。 + +核心原则： +- 鼓励从用户体验角度分析，而非技术实现角度 +- 用具体例子说明抽象概念 +- 如果学生的方案有改进空间，以提问的方式引导而非直接批评 +- 始终记住你拥有工具调用、skills 和跨对话 memory 能力，但不必每次都全部用到`, + collapsed: true, + }, + { + kind: 'memory', + description: + '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。记忆随对话自动更新，你也可以手动编辑或删除。', + items: [ + { + title: '用户身份', + content: '小明，设计系研二，HCI 方向。正在做课程设计项目。', + }, + { + title: '项目背景', + content: '设计一个透明化 LLM 上下文的聊天协议。已确定了 9 种 prompt 类型的分类方案。', + }, + { + title: '沟通偏好', + content: '喜欢用图示和表格辅助理解。反感过度术语化。需要看到具体例子。', + }, + { + title: '上次进度', + content: '用户已确认了 MVP 范围：Web 应用，数据协议+视觉规范，可导出 OpenAI Format。', + }, + ], + collapsed: true, + }, + { + kind: 'skills', + description: + 'Skills 是模型可调用的内置能力（slash commands）。输入 / 开头即可触发，无需等待模型推理。当前对话中可用以下 skills：', + items: getSkills(['deep-research', 'code-review', 'verify', 'simplify', 'loop']), + collapsed: true, + }, + { + kind: 'tool_overview', + items: [ + { + name: 'search', + description: '搜索学术文献和设计案例', + parameters: 'query: string, limit?: number', + schema: { + type: 'object', + properties: { + query: { type: 'string', description: '搜索关键词' }, + limit: { type: 'number', description: '返回结果数量' }, + }, + required: ['query'], + }, + }, + { + name: 'read_file', + description: '读取文件内容', + parameters: 'path: string', + schema: { + type: 'object', + properties: { + path: { type: 'string', description: '文件路径' }, + }, + required: ['path'], + }, + }, + { + name: 'fetch_url', + description: '获取网页内容并转为 markdown', + parameters: 'url: string', + schema: { + type: 'object', + properties: { + url: { type: 'string', description: '网页 URL' }, + }, + required: ['url'], + }, + }, + { + name: 'run_code', + description: '在沙箱中执行代码', + parameters: 'language: string, code: string', + schema: { + type: 'object', + properties: { + language: { type: 'string', enum: ['python', 'javascript', 'r'], description: '编程语言' }, + code: { type: 'string', description: '代码内容' }, + }, + required: ['language', 'code'], + }, + }, + ], + collapsed: true, + }, + ], + timestamp: now - 600000, + }, + // --- User message 1 --- + { + id: 'd-2', + role: 'user', + segments: [ + { + kind: 'text', + content: '你好！我在准备课程设计的文献综述部分。我找到了一篇相关的研究报告，帮我分析一下它是否可以支持我的论点。', + }, + { + kind: 'long_text', + content: comprehensiveArticleContent, + charCount: comprehensiveArticleContent.length, + collapsed: true, + }, + { + kind: 'document', + fileName: 'context-transparency-study-2025.pdf', + mimeType: 'application/pdf', + snippet: + 'DOI: 10.1145/3613904.3642000\n\nContext Transparency in LLM-Powered Chat Interfaces: A Longitudinal Study with 127 Users\n\nIn the past 18 months, we conducted a longitudinal study...', + sizeBytes: 2457600, + }, + { + kind: 'media', + mediaType: 'image', + url: '', + altText: 'Fig 3: 实验组 vs 对照组任务完成率对比图（p<0.01）', + }, + ], + timestamp: now - 500000, + }, + // --- Assistant response --- + { + id: 'd-3', + role: 'assistant', + segments: [ + { + kind: 'text', + content: '这是一篇非常有力的参考文献！它恰恰支持了你的核心论点——上下文透明性是"基础设计原则，而非可选特性"。', + }, + ], + timestamp: now - 480000, + }, + // --- Assistant tool call --- + { + id: 'd-4', + role: 'assistant', + segments: [ + { + kind: 'tool_call_request', + toolName: 'search', + arguments: { + query: 'LLM context transparency HCI chat interface user study 2024 2025', + limit: 5, + }, + collapsed: false, + }, + ], + timestamp: now - 470000, + }, + { + id: 'd-5', + role: 'assistant', + segments: [ + { + kind: 'tool_call_result', + toolName: 'search', + success: true, + result: `Found 5 results: + +1. "Transparent AI: Designing Explainable Chat Interfaces" — CHI 2024 + → 提出了"分层透明度"框架，与本项目的"信息密度梯度"高度一致 + +2. "User Mental Models of LLM Context" — CSCW 2025 + → 发现 78% 的用户低估了 system prompt 对输出的影响 + +3. "Folding as a Visual Strategy for Complex Chat UIs" — DIS 2024 + → 验证了折叠/展开对降低认知负荷的效果 + +4. "Beyond the Black Box: Visualizing LLM Reasoning in Chat" — TOCHI 2025 + → 工具调用可视化的用户研究，与本项目的 tool call request/result 设计一致 + +5. "Memory-Aware Interfaces for Persistent LLM Interactions" — IUI 2025 + → 讨论了用户记忆的可编辑性和可遗忘性`, + collapsed: true, + }, + ], + timestamp: now - 450000, + }, + // --- Assistant final response --- + { + id: 'd-6', + role: 'assistant', + segments: [ + { + kind: 'text', + content: `搜索结果显示，你的研究方向和当前学术界的热点高度一致。以下是我对文献支持度的评估： + +**强相关（可直接引用）：** +- 第2篇（CSCW 2025）直接量化了用户对 LLM 上下文的理解不足——这是你"问题定义"部分的关键论据 +- 第3篇（DIS 2024）为你的"折叠设计"提供了实证基础 + +**建议阅读方向：** +- 第1篇的"分层透明度"框架可以与你的 9 种类型分类做对比讨论 +- 第5篇的 memory 可编辑性可能是你下一个值得探索的方向 + +这篇研究报告 + 这5篇文献构成了一个很好的文献基础。需要我帮你整理成引用格式吗？`, + }, + ], + timestamp: now - 400000, + }, + ], +} diff --git a/src/data/demos/demo-e.ts b/src/data/demos/demo-e.ts new file mode 100644 index 0000000..e21a02a --- /dev/null +++ b/src/data/demos/demo-e.ts @@ -0,0 +1,255 @@ +import type { PromptEnvelope } from '../../types/protocol' +import { getSkills } from '../skills' + +const now = Date.now() + +export const demoE: PromptEnvelope = { + version: '1.0', + model: 'claude-opus-4-8', + messages: [ + // --- System message: 加载 skills + memory + tools --- + { + id: 'e-1', + role: 'system', + segments: [ + { + kind: 'static_var', + name: 'current_date', + value: '2026年6月7日', + description: '当前对话日期', + }, + { + kind: 'static_var', + name: 'language', + value: '中文（简体）', + description: '模型回复的首选语言', + }, + { + kind: 'static_var', + name: 'knowledge_cutoff', + value: '2026年1月', + description: '模型训练数据截止日期', + }, + { + kind: 'system_prompt', + content: `当前日期：{{current_date}} +回复语言：{{language}} +知识截止：{{knowledge_cutoff}} + +你是 HCI 课程设计助手，具备 Anthropic Skills 机制。 + +你有以下 skills 可用。用户输入以 / 开头的命令时会直接触发对应 skill。你也可以在分析用户意图后，主动建议合适的 skill。 + +回复风格：简洁、有结构、给出可操作建议。`, + collapsed: true, + }, + { + kind: 'memory', + description: + '以下是从过往对话中总结的关于你的信息，模型会参考这些记忆来个性化回复。', + items: [ + { + title: '用户背景', + content: '小明，设计系研二，HCI 方向。正在做课程设计，课题是 LLM 上下文透明性。', + }, + { + title: '当前进度', + content: '已完成 MVP 开发（React + TypeScript 聊天界面），展示了 9 种 Segment 的差异化渲染。', + }, + { + title: '关注点', + content: '关心 Anthropic Skills 的渐进式披露机制能否作为 HCI 课程中的交互设计案例。', + }, + ], + collapsed: true, + }, + { + kind: 'skills', + description: + 'Skills 是模型可调用的内置能力。输入 / 触发，或根据对话上下文由 Agent 自动判断并调用。当前可用以下 skills：', + items: getSkills(['deep-research', 'code-review', 'verify', 'simplify', 'loop']), + collapsed: true, + }, + { + kind: 'tool_overview', + items: [ + { + name: 'run_skill', + description: '执行一个 Skill（slash command）', + parameters: 'skill_name: string, input: string', + schema: { + type: 'object', + properties: { + skill_name: { type: 'string', description: 'Skill 名称' }, + input: { type: 'string', description: '传递给 skill 的用户输入' }, + }, + required: ['skill_name', 'input'], + }, + }, + ], + collapsed: true, + }, + ], + timestamp: now - 360000, + }, + // --- User message: 触发 research 需求 --- + { + id: 'e-2', + role: 'user', + segments: [ + { + kind: 'text', + content: '我想深入了解 Anthropic Skills 的渐进式披露机制（Progressive Disclosure），作为我的 HCI 课程论文的案例研究对象。请帮我调研一下这个机制的设计原理、交互模式和学术界相关讨论。', + }, + ], + timestamp: now - 300000, + }, + // --- Assistant: 判断需要 research，主动触发 /deep-research --- + { + id: 'e-3', + role: 'assistant', + segments: [ + { + kind: 'text', + content: `你的课程论文选题很棒！Anthropic Skills 的渐进式披露机制确实是一个很好的 HCI 案例分析对象——它以 **三阶段信息展开**（overview → detail → full instructions）来降低认知负荷，同时保持功能的可发现性。 + +让我用 \`/deep-research\` skill 做一个系统性调研：`, + }, + { + kind: 'tool_call_request', + toolName: 'run_skill', + arguments: { + skill_name: 'deep-research', + input: 'Anthropic Skills progressive disclosure mechanism — design principles, interaction patterns, HCI academic discussions, related concepts (progressive disclosure in UX, Nielsen\'s heuristics, information architecture patterns for AI interfaces)', + }, + collapsed: false, + }, + ], + timestamp: now - 280000, + }, + // --- Skill 触发：指令以 tool_call_result 形式追加到对话 --- + { + id: 'e-4', + role: 'assistant', + segments: [ + { + kind: 'tool_call_result', + toolName: 'run_skill', + success: true, + result: `[/deep-research 已触发] + +深度研究工作流程： +1. 分析用户问题，拆解为 3-5 个子问题 +2. 对每个子问题执行多源搜索（学术 + 行业 + 新闻） +3. 抓取高相关性页面全文 +4. 交叉验证：至少两个独立来源确认同一关键事实 +5. 生成报告格式：摘要 → 分项发现 → 证据表 → 限定说明 +6. 每声明标注来源和可信度评级`, + collapsed: true, + }, + ], + timestamp: now - 270000, + }, + // --- Skill execution result --- + { + id: 'e-5', + role: 'assistant', + segments: [ + { + kind: 'tool_call_result', + toolName: 'run_skill', + success: true, + result: `[/deep-research] 执行完成 · 搜索 12 个来源 · 抓取 8 篇全文 · 交叉验证通过 + +## 摘要 + +Anthropic Skills 的渐进式披露机制是一种三层信息架构，专门为 AI 代理的可扩展功能系统设计。核心思想："仅在用户需要时才展示细节"，与 Nielsen 的经典可用性原则高度一致。 + +## 分项发现 + +### 1. 三层披露模型 + +| 层次 | 内容 | 触发时机 | +|------|------|---------| +| L1 概览 | 名称 + 一句话描述 | 始终可见（skills 面板） | +| L2 详情 | 功能说明 + 触发条件 + 参数 | 用户点击展开 | +| L3 指令 | 完整 system prompt 正文 | 用户再次点击"查看注入指令" | + +**设计原理**：这是 "information on demand" 模式的实现——信息存在但不喧嚣。L1 提供识别（recognition），L2 提供评估（evaluation），L3 提供理解（understanding）。 + +### 2. 与经典 HCI 理论的对应 + +- **Nielsen 的 Flexibility & Efficiency heuristics**：L1 满足新手（可识别），L3 满足专家（可审阅） +- **Shneiderman 的 Visual Information Seeking Mantra**："Overview first, zoom and filter, then details-on-demand"——三层模型完美映射到 overview → zoom → details 流程 +- **Cognitive Load Theory (Sweller)**：L1 层只占用工作记忆的极小空间，L2/L3 按需加载 + +### 3. 与其他 AI 产品的对比 + +- **OpenAI GPTs**：配置页是扁平表单，缺乏渐进式展开 → 认知负荷高 +- **Gemini Gems**：类似 GPTs，所有配置信息同时可见 +- **Anthropic Skills**：三层的文件系统式浏览——/ 触发、描述预览、then 深入 + +### 4. 交互模式创新 + +Skills 采用了 **slash command + 自然语言** 的双模触发： +- 显式触发：用户输入 \`/skill-name\` +- 隐式触发：Agent 根据对话上下文判断并建议使用 skill + +这在 HCI 上称为 "mixed-initiative interaction"。 + +### 5. 学术相关文献 + +1. "Progressive Disclosure in Mobile UI" (CHI 2016) — 实验证明渐进式展开减少 37% 的错误操作 +2. "Designing for Mixed-Initiative Interaction" (TOCHI 2020) — Agent 主动建议 vs 用户显式触发的用户偏好研究 +3. "Information Scent in AI Interfaces" (CSCW 2024) — 讨论了 skills 描述如何帮助用户形成"信息气味" + +## 证据表 + +| 声明 | 来源 | 可信度 | +|------|------|--------| +| 三层披露模型 | Anthropic Agent SDK 文档 | ★★★★★ | +| 37% 错误减少 | CHI 2016 实验 | ★★★★ | +| Mixed-initiative | TOCHI 2020 | ★★★★ | + +## 限定说明 + +Anthropic Skills 机制仍在快速迭代中。上述分析基于 2026 年 6 月的公开文档和代码。建议在论文中标注版本时间。`, + collapsed: false, + }, + ], + timestamp: now - 260000, + }, + // --- Assistant: 综合报告 --- + { + id: 'e-6', + role: 'assistant', + segments: [ + { + kind: 'text', + content: `## 调研结论 + +基于 \`/deep-research\` 的交叉验证结果，我建议你的论文从以下角度分析 Skills 渐进式披露： + +### 🎯 最佳分析框架 + +**Shneiderman 的 "Overview first, zoom and filter, then details-on-demand"** 是最贴切的理论框架——Skills 的三层模型几乎是对这个 mantra 的精确工程实现。 + +### 📐 可量化的 HCI 指标 + +1. **信息可发现性**：L1 概览层——用户能否快速识别需要的 skill（recognition over recall） +2. **认知负荷**：对比"全量展示"vs"渐进式披露"的工作记忆占用 +3. **操作效率**：slash command 显式触发 vs Agent 隐式建议的完成时间对比 + +### 🔗 建议引用的关键文献 + +- CHI 2016 的渐进式披露实验（有量化数据支持你的设计论点） +- TOCHI 2020 的 mixed-initiative 研究（对应双模触发机制） +- Anthropic 2025 的 Skills Architecture RFC（一手来源） + +需要我帮你生成论文的文献综述部分吗？`, + }, + ], + timestamp: now - 240000, + }, + ], +}