foliko 1.0.0

package/cli/src/ui/chat-ui.js

@@ -0,0 +1,272 @@
+/**
+ * 聊天界面组件
+ * 处理用户输入、粘贴检测、输出渲染
+ */
+
+const readline = require('readline')
+const { EventEmitter } = require('events')
+const { CLEAR_LINE, CYAN, DIM, GREEN, RED, YELLOW, colored } = require('../utils/ansi')
+const { render, renderLine } = require('../utils/markdown')
+
+class ChatUI extends EventEmitter {
+  constructor(agent) {
+    super()
+    this.agent = agent
+    this.rl = null
+    this.currentLine = ''
+    this.lines = []
+    this.pasteId = 0
+    this.isFirstLine = true
+
+    // 粘贴检测
+    this.lastKeyTime = 0
+    this.pasteBuffer = ''
+    this.isPasting = false
+  }
+
+  /**
+   * 启动聊天界面
+   */
+  start() {
+    this.setupReadline()
+    this.printWelcome()
+    this.prompt()
+  }
+
+  /**
+   * 设置 readline
+   */
+  setupReadline() {
+    this.rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+      crlfDelay: Infinity
+    })
+
+    // 使用 keypress 事件支持特殊按键
+    readline.emitKeypressEvents(process.stdin)
+
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true)
+    }
+
+    // 监听按键
+    process.stdin.on('keypress', this.handleKey.bind(this))
+
+    // 退出时清理
+    process.on('exit', () => {
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false)
+      }
+    })
+
+    process.on('SIGINT', () => {
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false)
+      }
+      process.exit(0)
+    })
+  }
+
+  /**
+   * 打印欢迎信息
+   */
+  printWelcome() {
+    console.log(`${colored('Foliko', CYAN)} - 持续对话聊天`)
+    console.log(`${colored('Ctrl+C', DIM)} 退出 | ${colored('Ctrl+Enter', DIM)} 换行 | ${colored('Enter', DIM)} 发送\n`)
+  }
+
+  /**
+   * 显示提示符
+   */
+  prompt() {
+    const prefix = this.isFirstLine ? colored('You: ', GREEN) : colored('> ', DIM)
+    process.stdout.write(`\r${CLEAR_LINE}${prefix}${this.currentLine}`)
+  }
+
+  /**
+   * 处理按键
+   */
+  handleKey(str, key) {
+    // Ctrl+C 退出
+    if (key.ctrl && key.name === 'c') {
+      console.log('\n再见！')
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false)
+      }
+      process.exit(0)
+      return
+    }
+
+    // Enter 发送
+    if (key.name === 'return') {
+      this.handleSubmit()
+      return
+    }
+
+    // Ctrl+Enter 换行
+    if (key.ctrl && key.name === 'return') {
+      this.lines.push(this.currentLine)
+      this.currentLine = ''
+      this.isFirstLine = false
+      this.prompt()
+      return
+    }
+
+    // Backspace 退格
+    if (key.name === 'backspace') {
+      if (this.currentLine.length > 0) {
+        this.currentLine = this.currentLine.slice(0, -1)
+        this.prompt()
+      } else if (this.lines.length > 0) {
+        this.currentLine = this.lines.pop()
+        this.isFirstLine = this.lines.length === 0
+        this.prompt()
+      }
+      return
+    }
+
+    // 普通字符
+    if (str && !key.ctrl && !key.meta) {
+      // 直接添加到当前行
+      this.currentLine += str
+      this.prompt()
+    }
+  }
+
+  /**
+   * 处理粘贴
+   */
+  handlePaste() {
+    if (this.pasteBuffer.includes('\n')) {
+      const allLines = this.pasteBuffer.split('\n')
+      this.lines.push(...allLines.slice(0, -1))
+      this.currentLine = allLines[allLines.length - 1]
+      this.isFirstLine = false
+      this.pasteId++
+
+      console.log(`\n${CLEAR_LINE}${colored(`[Pasted text #${this.pasteId} +${this.lines.length + 1} lines]`, CYAN)}`)
+    } else {
+      this.currentLine = this.pasteBuffer
+      this.lines = []
+    }
+    this.pasteBuffer = ''
+  }
+
+  /**
+   * 处理发送
+   */
+  async handleSubmit() {
+    const content = this.lines.length > 0
+      ? [...this.lines, this.currentLine].join('\n')
+      : this.currentLine
+
+    const trimmed = content.trim()
+
+    // 显示空行
+    console.log()
+
+    // 退出命令
+    if (trimmed.toLowerCase() === 'exit' || trimmed.toLowerCase() === 'quit') {
+      console.log('再见！')
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false)
+      }
+      process.exit(0)
+      return
+    }
+
+    if (!trimmed) {
+      this.resetInput()
+      this.prompt()
+      return
+    }
+
+    // 重置输入
+    this.resetInput()
+
+    // 发送消息
+    await this.sendMessage(trimmed)
+  }
+
+  /**
+   * 重置输入状态
+   */
+  resetInput() {
+    this.currentLine = ''
+    this.lines = []
+    this.isFirstLine = true
+    this.pasteId = 0
+    this.isPasting = false
+    this.pasteBuffer = ''
+  }
+
+  /**
+   * 发送消息并显示响应
+   */
+  async sendMessage(message) {
+    console.log(colored('Agent:', GREEN))
+    console.log()
+
+    try {
+      let lineBuffer = ''
+      // 渲染状态追踪
+      const renderState = { inThink: false, inCodeBlock: false }
+
+      // 检查是否还有孤立的代理对
+      const hasOrphanedSurrogate = (str) => {
+        if (!str || str.length === 0) return false
+        let i = 0
+        while (i < str.length) {
+          const code = str.charCodeAt(i)
+          if (code >= 0xD800 && code <= 0xDBFF) {
+            const nextCode = str.charCodeAt(i + 1)
+            if (nextCode >= 0xDC00 && nextCode <= 0xDFFF) {
+              i += 2
+              continue
+            }
+            return true // 孤立的高代理
+          }
+          i++
+        }
+        return false
+      }
+
+      for await (const chunk of this.agent.chatStream(message)) {
+        if (chunk.type === 'text') {
+          lineBuffer += chunk.text
+
+          // 如果有孤立代理对，等待下一个chunk补充
+          if (hasOrphanedSurrogate(lineBuffer)) {
+            continue
+          }
+
+          // 当有一行完整内容时，渲染并输出
+          while (lineBuffer.includes('\n')) {
+            const nlIndex = lineBuffer.indexOf('\n')
+            const line = lineBuffer.substring(0, nlIndex)
+            lineBuffer = lineBuffer.substring(nlIndex + 1)
+            if (line.trim()) {
+              console.log(renderLine(line, renderState))
+            }
+          }
+        } else if (chunk.type === 'tool-call') {
+          console.log(`\n${colored('[工具调用]', YELLOW)} ${chunk.toolName}`)
+        } else if (chunk.type === 'error') {
+          console.error(`\n${colored('[错误]', RED)} ${chunk.error}`)
+        }
+      }
+
+      // 输出剩余内容
+      if (lineBuffer.trim()) {
+        console.log(renderLine(lineBuffer, renderState))
+      }
+    } catch (err) {
+      console.error(`\n${colored('[错误]', RED)} ${err.message}\n`)
+    }
+
+    this.prompt()
+  }
+}
+
+module.exports = { ChatUI }

package/cli/src/utils/ansi.js

@@ -0,0 +1,40 @@
+/**
+ * ANSI 转义序列工具
+ */
+
+const CLEAR = '\x1B[0m'
+const CLEAR_LINE = '\x1B[2K'
+
+// 颜色
+const RED = '\x1B[31m'
+const GREEN = '\x1B[32m'
+const YELLOW = '\x1B[33m'
+const BLUE = '\x1B[34m'
+const MAGENTA = '\x1B[35m'
+const CYAN = '\x1B[36m'
+const WHITE = '\x1B[37m'
+const DIM = '\x1B[2m'
+const BOLD = '\x1B[1m'
+
+/**
+ * 创建带颜色的字符串
+ */
+function colored(text, color) {
+  if (!color) return text
+  return `${color}${text}${CLEAR}`
+}
+
+module.exports = {
+  CLEAR,
+  CLEAR_LINE,
+  RED,
+  GREEN,
+  YELLOW,
+  BLUE,
+  MAGENTA,
+  CYAN,
+  WHITE,
+  DIM,
+  BOLD,
+  colored
+}

package/cli/src/utils/markdown.js

@@ -0,0 +1,296 @@
+/**
+ * 简单的流式 Markdown 渲染器
+ * 支持: **粗体**, *斜体*, `代码`, ```代码块```, # 标题, 列表, 引用, <think>思考
+ */
+
+const {
+  BOLD, DIM, CLEAR, RED, GREEN, YELLOW, CYAN, BLUE, MAGENTA, WHITE
+} = require('./ansi')
+
+// Markdown 标记对应的 ANSI 样式
+const STYLES = {
+  bold: { prefix: BOLD, suffix: CLEAR },
+  italic: { prefix: DIM, suffix: CLEAR },
+  code: { prefix: CYAN, suffix: CLEAR },  // dim = 暗色
+  codeBlock: { prefix: YELLOW, suffix: CLEAR },  // yellow = 黄色
+  h1: { prefix: BOLD, suffix: CLEAR },  // bold white
+  h2: { prefix: BOLD, suffix: CLEAR },  // bold white
+  h3: { prefix: BOLD, suffix: CLEAR },
+  link: { prefix: '\x1B[34m\x1B[4m', suffix: CLEAR },  // blue underline
+  list: { prefix: DIM, suffix: CLEAR },  // dim = 暗色
+  blockquote: { prefix: DIM, suffix: CLEAR },  // dim = 暗色
+  think: { prefix: `\x1B[38;5;240m`, suffix: CLEAR },  // yellow = 黄色
+}
+
+/**
+ * 验证并修复UTF-16代理对
+ */
+function fixSurrogates(text) {
+  if (!text) return ''
+  const result = []
+  let i = 0
+  while (i < text.length) {
+    const char = text[i]
+    const code = text.charCodeAt(i)
+    // 高代理
+    if (code >= 0xD800 && code <= 0xDBFF) {
+      const nextCode = text.charCodeAt(i + 1)
+      // 如果有低代理，配对
+      if (nextCode >= 0xDC00 && nextCode <= 0xDFFF) {
+        result.push(char + text[i + 1])
+        i += 2
+        continue
+      }
+      // 孤立的高代理，替换为方框
+      result.push('\uFFFD')
+      i += 1
+      continue
+    }
+    // 低代理（不应该单独出现）
+    if (code >= 0xDC00 && code <= 0xDFFF) {
+      result.push('\uFFFD')
+      i += 1
+      continue
+    }
+    result.push(char)
+    i++
+  }
+  return result.join('')
+}
+
+/**
+ * 渲染单行 markdown（流式友好，简单处理）
+ */
+function renderInline(text) {
+  if (!text) return ''
+
+  // 修复不完整的代理对
+  const fixed = fixSurrogates(text)
+  let result = fixed
+  
+
+  // 处理行内代码 `code`
+  result = result.replace(/`([^`]+)`/g, (match, code) => {
+    return `${STYLES.code.prefix}${code}${STYLES.code.suffix}`
+  })
+
+  // 处理 **粗体**
+  result = result.replace(/\*\*([^*]+)\*\*/g, (match, bold) => {
+    return `${STYLES.bold.prefix}${bold}${STYLES.bold.suffix}`
+  })
+
+  // 处理 *斜体*（不匹配已处理的粗体内部）
+  result = result.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, (match, italic) => {
+    return `${STYLES.italic.prefix}${italic}${STYLES.italic.suffix}`
+  })
+
+  // 处理 ~~删除线~~ (简单处理)
+  result = result.replace(/~~([^~]+)~~/g, (match, strikethrough) => {
+    return `${DIM}${strikethrough}${CLEAR}`
+  })
+
+  // 处理行内链接 [text](url) -> text
+  result = result.replace(/\[([^\]]+)\]\([^)]+\)/g, (match, text) => {
+    return `${STYLES.link.prefix}${text}${STYLES.link.suffix}`
+  })
+
+  return result
+}
+
+/**
+ * 渲染包含思考标签的行
+ */
+function renderThink(line, state = { inThink: false }) {
+  // <think>思考内容</think> -> 思考内容用暗色显示
+  let result = ''
+
+  let i = 0
+  let lastEnd = 0
+
+  // 如果在思考块中但这行没有开始标签，在行首添加黄色前缀
+  if (state.inThink && !line.includes('<think>')) {
+    result += STYLES.think.prefix
+  }
+
+  while (i < line.length) {
+    // 检查 <think> (7个字符)
+    if (line.substring(i, i + 7) === '<think>') {
+      if (i > lastEnd) {
+        result += renderInline(line.substring(lastEnd, i))
+      }
+      result += STYLES.think.prefix + '<think>'
+      i += 7
+      lastEnd = i
+      state.inThink = true
+      // 如果这行只有<think>标签，不要在这里添加CLEAR
+      // 后续行会继续使用黄色
+      if (i >= line.length) {
+        // 没有更多内容，return时不添加CLEAR，保持黄色状态
+        return result
+      }
+      continue
+    }
+
+    // 检查</think> (8个字符)
+    if (line.substring(i, i + 8) === '</think>') {
+      if (i > lastEnd) {
+        result += line.substring(lastEnd, i) + STYLES.think.suffix
+      }
+      result += '</think>' + CLEAR
+      i += 8
+      lastEnd = i
+      state.inThink = false
+      continue
+    }
+
+    i++
+  }
+
+  if (lastEnd < line.length) {
+    result += renderInline(line.substring(lastEnd))
+  }
+
+  return result
+}
+
+/**
+ * 渲染一行 markdown（处理标题、列表等）
+ * state: { inThink: boolean, inCodeBlock: boolean } - 状态，会被修改
+ */
+function renderLine(line, state = { inThink: false, inCodeBlock: false }) {
+  // 思考标签 - 保留首尾换行符
+  const leadingNL = line.match(/^\n*/)[0]
+  const trailingNL = line.match(/\n*$/)[0]
+  const trimmed = line.trim()
+
+  // 代码块处理
+  if (trimmed.startsWith('```')) {
+    if (state.inCodeBlock) {
+      // 结束代码块
+      state.inCodeBlock = false
+      return `\`\`\`${trimmed.slice(3) ? ' ' + trimmed.slice(3) : ''}${STYLES.codeBlock.suffix}`
+    } else {
+      // 开始代码块
+      state.inCodeBlock = true
+      const lang = trimmed.slice(3).trim()
+      return `${STYLES.codeBlock.prefix}\`\`\`${lang ? ' ' + lang : ''}`
+    }
+  }
+
+  // 如果在代码块中，整行用代码样式
+  if (state.inCodeBlock) {
+    return `${STYLES.codeBlock.prefix}${line}${STYLES.codeBlock.suffix}`
+  }
+
+  // 如果在思考块中或者有思考标签
+  if (state.inThink || trimmed.includes('<think>') || trimmed.includes('</think>')) {
+    const result = leadingNL + renderThink(trimmed, state) + trailingNL
+    return result
+  }
+
+  // 标题
+  if (line.startsWith('### ')) {
+    return `${STYLES.h3.prefix}${renderInline(line.substring(4))}${STYLES.h3.suffix}`
+  }
+  if (line.startsWith('## ')) {
+    return `${STYLES.h2.prefix}${renderInline(line.substring(3))}${STYLES.h2.suffix}`
+  }
+  if (line.startsWith('# ')) {
+    return `${STYLES.h1.prefix}${renderInline(line.substring(2))}${STYLES.h1.suffix}`
+  }
+
+  // 无序列表
+  if (line.match(/^[-*+] /)) {
+    return line.replace(/^([-*+] )(.*)/, (match, bullet, content) => {
+      return `${STYLES.list.prefix}${bullet}${CLEAR}${renderInline(content)}`
+    })
+  }
+
+  // 有序列表
+  if (line.match(/^\d+\. /)) {
+    return line.replace(/^(\d+\. )(.*)/, (match, bullet, content) => {
+      return `${STYLES.list.prefix}${bullet}${CLEAR}${renderInline(content)}`
+    })
+  }
+
+  // 引用
+  if (line.startsWith('> ')) {
+    return line.replace(/^> (.*)/, (match, content) => {
+      return `${STYLES.blockquote.prefix}| ${renderInline(content)}${STYLES.blockquote.suffix}`
+    })
+  }
+
+  return renderInline(line)
+}
+
+/**
+ * 渲染完整的 markdown 文本
+ */
+function render(text) {
+  if (!text) return ''
+
+  const lines = text.split('\n')
+  const rendered = []
+
+  let inCodeBlock = false
+
+  for (const line of lines) {
+    // 代码块
+    if (line.startsWith('```')) {
+      if (inCodeBlock) {
+        rendered.push(`\`\`\`${STYLES.codeBlock.suffix}`)
+        inCodeBlock = false
+      } else {
+        const lang = line.substring(3).trim() || ''
+        rendered.push(`${STYLES.codeBlock.prefix}\`\`\`${lang ? ' ' + lang : ''}`)
+        inCodeBlock = true
+      }
+      continue
+    }
+
+    if (inCodeBlock) {
+      rendered.push(`${STYLES.codeBlock.prefix}${line}${STYLES.codeBlock.suffix}`)
+    } else {
+      rendered.push(renderLine(line))
+    }
+  }
+
+  return rendered.join('\n')
+}
+
+/**
+ * 流式渲染 - 每次返回一个完整的行
+ * 返回 { done: boolean, line: string }
+ */
+function* streamRender(text) {
+  if (!text) return
+
+  const lines = text.split('\n')
+  let inCodeBlock = false
+
+  for (const line of lines) {
+    // 代码块
+    if (line.startsWith('```')) {
+      if (inCodeBlock) {
+        yield { done: false, line: `${STYLES.codeBlock.suffix}` }
+        inCodeBlock = false
+      } else {
+        const lang = line.substring(3).trim() || ''
+        yield { done: false, line: `${STYLES.codeBlock.prefix}\`\`\`${lang ? ' ' + lang : ''}` }
+        inCodeBlock = true
+      }
+      continue
+    }
+    
+
+    if (inCodeBlock) {
+      yield { done: false, line: `${STYLES.codeBlock.prefix}${line}${STYLES.codeBlock.suffix}` }
+    } else {
+      yield { done: false, line: renderLine(line) }
+    }
+  }
+
+  yield { done: true }
+}
+
+module.exports = { render, renderInline, renderLine, streamRender, STYLES }