@yivan-lab/pretty-please 1.0.0

package/src/components/Chat.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text } from 'ink'
+import Spinner from 'ink-spinner'
+import { MarkdownDisplay } from './MarkdownDisplay.js'
+import { chatWithAI } from '../ai.js'
+import { getChatRoundCount } from '../chat-history.js'
+import { theme } from '../ui/theme.js'
+
+interface ChatProps {
+  prompt: string
+  debug?: boolean
+  showRoundCount?: boolean
+  onComplete: () => void
+}
+
+type Status = 'thinking' | 'streaming' | 'done' | 'error'
+
+interface DebugInfo {
+  sysinfo: string
+  model: string
+  systemPrompt: string
+  userPrompt: string
+  chatHistory: any[]
+}
+
+/**
+ * Chat 组件 - AI 对话模式
+ * 使用正常渲染，完成后保持最后一帧在终端
+ */
+export function Chat({ prompt, debug, showRoundCount, onComplete }: ChatProps) {
+  const [status, setStatus] = useState<Status>('thinking')
+  const [content, setContent] = useState('')
+  const [duration, setDuration] = useState(0)
+  const [debugInfo, setDebugInfo] = useState<DebugInfo | null>(null)
+  const [roundCount] = useState(getChatRoundCount())
+
+  useEffect(() => {
+    const startTime = Date.now()
+
+    // 流式输出回调
+    const onChunk = (chunk: string) => {
+      setStatus('streaming')
+      setContent((prev) => prev + chunk)
+    }
+
+    // 调用 AI
+    chatWithAI(prompt, { debug: debug || false, onChunk })
+      .then((result: any) => {
+        const endTime = Date.now()
+        setDuration(endTime - startTime)
+        setStatus('done')
+
+        if (debug && typeof result === 'object' && 'debug' in result) {
+          setDebugInfo(result.debug)
+        }
+
+        setTimeout(onComplete, 100)
+      })
+      .catch((error: any) => {
+        setStatus('error')
+        setContent(error.message)
+        setTimeout(onComplete, 100)
+      })
+  }, [prompt, debug, onComplete])
+
+  return (
+    <Box flexDirection="column">
+      {/* 显示对话轮数 */}
+      {showRoundCount && roundCount > 0 && (
+        <Box marginBottom={1}>
+          <Text color={theme.text.secondary}>(对话轮数: {roundCount})</Text>
+        </Box>
+      )}
+
+      {/* 动态区域：思考状态 */}
+      {status === 'thinking' && (
+        <Box>
+          <Text color={theme.info}>
+            <Spinner type="dots" /> 思考中...
+          </Text>
+        </Box>
+      )}
+
+      {/* 输出内容区域 */}
+      {(status === 'streaming' || status === 'done') && content && (
+        <Box marginLeft={2} marginRight={2}>
+          <MarkdownDisplay text={content} terminalWidth={96} />
+        </Box>
+      )}
+
+      {/* 错误状态 */}
+      {status === 'error' && (
+        <Box marginTop={1} marginLeft={2}>
+          <Text color={theme.error}>❌ 错误: {content}</Text>
+        </Box>
+      )}
+
+      {/* 完成后显示耗时 */}
+      {status === 'done' && duration > 0 && (
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>({(duration / 1000).toFixed(2)}s)</Text>
+        </Box>
+      )}
+
+      {/* 调试信息 */}
+      {debugInfo && (
+        <Box flexDirection="column" marginY={1}>
+          <Text color={theme.accent}>━━━ 调试信息 ━━━</Text>
+          <Text color={theme.text.secondary}>系统信息: {debugInfo.sysinfo}</Text>
+          <Text color={theme.text.secondary}>模型: {debugInfo.model}</Text>
+          <Text color={theme.text.secondary}>
+            对话历史轮数: {Math.floor(debugInfo.chatHistory.length / 2)}
+          </Text>
+          <Text color={theme.text.secondary}>System Prompt:</Text>
+          <Text dimColor>{debugInfo.systemPrompt}</Text>
+          <Text color={theme.text.secondary}>User Prompt: {debugInfo.userPrompt}</Text>
+          <Text color={theme.accent}>━━━━━━━━━━━━━━━━</Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/ChatStatus.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { getChatRoundCount, getChatHistoryFilePath } from '../chat-history.js'
+import { theme } from '../ui/theme.js'
+
+interface ChatStatusProps {
+  onComplete?: () => void
+}
+
+/**
+ * ChatStatus 组件 - 显示对话状态信息
+ */
+export const ChatStatus: React.FC<ChatStatusProps> = ({ onComplete }) => {
+  const roundCount = getChatRoundCount()
+  const historyFile = getChatHistoryFilePath()
+
+  React.useEffect(() => {
+    if (onComplete) {
+      setTimeout(onComplete, 100)
+    }
+  }, [onComplete])
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text bold>💬 AI 对话模式</Text>
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+      <Box marginTop={1}>
+        <Text color={theme.primary}>  当前对话轮数: </Text>
+        <Text>{roundCount}</Text>
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  历史文件:     </Text>
+        <Text>{historyFile}</Text>
+      </Box>
+
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={theme.text.secondary}>用法:</Text>
+        <Box>
+          <Text color={theme.primary}>  pls chat &lt;问题&gt;</Text>
+          <Text color={theme.text.secondary}>    与 AI 对话</Text>
+        </Box>
+        <Box>
+          <Text color={theme.primary}>  pls chat clear</Text>
+          <Text color={theme.text.secondary}>     清空对话历史</Text>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/src/components/CodeColorizer.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { Text, Box } from 'ink'
+import { common, createLowlight } from 'lowlight'
+import type { Root, Element, Text as HastText, ElementContent, RootContent } from 'hast'
+import { theme } from '../ui/theme.js'
+
+// 创建 lowlight 实例
+const lowlight = createLowlight(common)
+
+// 语法高亮颜色映射
+const syntaxColors: Record<string, string> = {
+  'hljs-keyword': theme.code.keyword,
+  'hljs-string': theme.code.string,
+  'hljs-function': theme.code.function,
+  'hljs-comment': theme.code.comment,
+  'hljs-number': theme.primary,
+  'hljs-built_in': theme.secondary,
+  'hljs-title': theme.accent,
+  'hljs-variable': theme.text.primary,
+  'hljs-type': theme.info,
+  'hljs-operator': theme.text.secondary,
+}
+
+/**
+ * 渲染 HAST 语法树节点
+ */
+function renderHastNode(
+  node: Root | Element | HastText | RootContent,
+  inheritedColor: string | undefined
+): React.ReactNode {
+  if (node.type === 'text') {
+    const color = inheritedColor || theme.code.text
+    return <Text color={color}>{node.value}</Text>
+  }
+
+  if (node.type === 'element') {
+    const nodeClasses: string[] = (node.properties?.['className'] as string[]) || []
+    let elementColor: string | undefined = undefined
+
+    // 查找颜色
+    for (let i = nodeClasses.length - 1; i >= 0; i--) {
+      const className = nodeClasses[i]
+      if (syntaxColors[className]) {
+        elementColor = syntaxColors[className]
+        break
+      }
+    }
+
+    const colorToPassDown = elementColor || inheritedColor
+
+    // 递归渲染子节点
+    const children = node.children?.map((child: ElementContent, index: number) => (
+      <React.Fragment key={index}>
+        {renderHastNode(child, colorToPassDown)}
+      </React.Fragment>
+    ))
+
+    return <React.Fragment>{children}</React.Fragment>
+  }
+
+  if (node.type === 'root') {
+    if (!node.children || node.children.length === 0) {
+      return null
+    }
+
+    return node.children?.map((child: RootContent, index: number) => (
+      <React.Fragment key={index}>
+        {renderHastNode(child, inheritedColor)}
+      </React.Fragment>
+    ))
+  }
+
+  return null
+}
+
+/**
+ * 高亮并渲染一行代码
+ */
+function highlightLine(line: string, language: string | null): React.ReactNode {
+  try {
+    const highlighted = !language || !lowlight.registered(language)
+      ? lowlight.highlightAuto(line)
+      : lowlight.highlight(language, line)
+
+    const rendered = renderHastNode(highlighted, undefined)
+    return rendered !== null ? rendered : line
+  } catch {
+    return line
+  }
+}
+
+interface ColorizeCodeProps {
+  code: string
+  language?: string | null
+  showLineNumbers?: boolean
+}
+
+/**
+ * 代码高亮组件
+ */
+function ColorizeCodeInternal({ code, language = null, showLineNumbers = false }: ColorizeCodeProps) {
+  const codeToHighlight = code.replace(/\n$/, '')
+  const lines = codeToHighlight.split('\n')
+  const padWidth = String(lines.length).length
+
+  const renderedLines = lines.map((line, index) => {
+    const contentToRender = highlightLine(line, language)
+
+    return (
+      <Box key={index} minHeight={1}>
+        {showLineNumbers && (
+          <Text color={theme.text.dim}>
+            {`${String(index + 1).padStart(padWidth, ' ')} `}
+          </Text>
+        )}
+        <Text color={theme.code.text}>{contentToRender}</Text>
+      </Box>
+    )
+  })
+
+  return (
+    <Box flexDirection="column" paddingLeft={1} paddingRight={1} paddingY={1} borderStyle="round" borderColor={theme.border}>
+      {renderedLines}
+    </Box>
+  )
+}
+
+export const ColorizeCode = React.memo(ColorizeCodeInternal)

package/src/components/CommandBox.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { theme } from '../ui/theme.js'
+
+interface CommandBoxProps {
+  command: string
+  title?: string
+}
+
+/**
+ * 计算字符串的显示宽度（中文占2个宽度）
+ */
+function getDisplayWidth(str: string): number {
+  let width = 0
+  for (const char of str) {
+    // 中文、日文、韩文等宽字符占 2 个宽度
+    if (char.match(/[\u4e00-\u9fff\u3400-\u4dbf\uff00-\uffef\u3000-\u303f]/)) {
+      width += 2
+    } else {
+      width += 1
+    }
+  }
+  return width
+}
+
+/**
+ * CommandBox 组件 - 显示带边框和标题的命令框
+ */
+export const CommandBox: React.FC<CommandBoxProps> = ({ command, title = '生成命令' }) => {
+  const lines = command.split('\n')
+  const titleWidth = getDisplayWidth(title)
+  const maxContentWidth = Math.max(...lines.map(l => getDisplayWidth(l)))
+  const boxWidth = Math.max(maxContentWidth + 4, titleWidth + 6, 20)
+
+  // 顶部边框：┌─ 生成命令 ─────┐
+  const topPadding = boxWidth - titleWidth - 5
+  const topBorder = '┌─ ' + title + ' ' + '─'.repeat(topPadding) + '┐'
+
+  // 底部边框
+  const bottomBorder = '└' + '─'.repeat(boxWidth - 2) + '┘'
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text color={theme.warning}>{topBorder}</Text>
+      {lines.map((line, index) => {
+        const lineWidth = getDisplayWidth(line)
+        const padding = ' '.repeat(boxWidth - lineWidth - 4)
+        return (
+          <Text key={index}>
+            <Text color={theme.warning}>│ </Text>
+            <Text color={theme.primary}>{line}</Text>
+            <Text>{padding}</Text>
+            <Text color={theme.warning}> │</Text>
+          </Text>
+        )
+      })}
+      <Text color={theme.warning}>{bottomBorder}</Text>
+    </Box>
+  )
+}

package/src/components/CommandGenerator.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text } from 'ink'
+import Spinner from 'ink-spinner'
+import { generateCommand } from '../ai.js'
+import { detectBuiltin, formatBuiltins } from '../builtin-detector.js'
+import { CommandBox } from './CommandBox.js'
+import { ConfirmationPrompt } from './ConfirmationPrompt.js'
+import { Duration } from './Duration.js'
+import { theme } from '../ui/theme.js'
+
+interface CommandGeneratorProps {
+  prompt: string
+  debug?: boolean
+  onComplete: (result: {
+    command?: string
+    confirmed?: boolean
+    cancelled?: boolean
+    hasBuiltin?: boolean
+    builtins?: string[]
+    debugInfo?: any
+    error?: string
+  }) => void
+}
+
+type State =
+  | { type: 'thinking' }
+  | { type: 'showing_command'; command: string; hasBuiltin: boolean; builtins: string[] }
+  | { type: 'cancelled'; command: string }
+  | { type: 'error'; error: string }
+
+interface DebugInfo {
+  sysinfo: string
+  model: string
+  systemPrompt: string
+  userPrompt: string
+}
+
+/**
+ * CommandGenerator 组件 - 命令生成和确认（仅用于交互）
+ * 不执行命令，执行交给调用方用原生方式处理
+ */
+export const CommandGenerator: React.FC<CommandGeneratorProps> = ({ prompt, debug, onComplete }) => {
+  const [state, setState] = useState<State>({ type: 'thinking' })
+  const [thinkDuration, setThinkDuration] = useState(0)
+  const [debugInfo, setDebugInfo] = useState<DebugInfo | null>(null)
+
+  // 初始化：调用 AI 生成命令
+  useEffect(() => {
+    const thinkStart = Date.now()
+
+    generateCommand(prompt, { debug: debug || false })
+      .then((result: any) => {
+        const command = debug && typeof result === 'object' ? result.command : result
+        const thinkEnd = Date.now()
+        setThinkDuration(thinkEnd - thinkStart)
+
+        if (debug && typeof result === 'object' && 'debug' in result) {
+          setDebugInfo(result.debug)
+        }
+
+        // 检测 builtin
+        const { hasBuiltin, builtins } = detectBuiltin(command)
+
+        setState({
+          type: 'showing_command',
+          command,
+          hasBuiltin,
+          builtins,
+        })
+
+        // 如果是 builtin，直接完成（不执行）
+        if (hasBuiltin) {
+          setTimeout(() => {
+            onComplete({
+              command,
+              confirmed: false,
+              hasBuiltin: true,
+              builtins,
+              debugInfo: debugInfo || undefined,
+            })
+          }, 100)
+        }
+      })
+      .catch((error: any) => {
+        setState({ type: 'error', error: error.message })
+        setTimeout(() => {
+          onComplete({ error: error.message })
+        }, 100)
+      })
+  }, [prompt, debug])
+
+  // 处理确认
+  const handleConfirm = () => {
+    if (state.type === 'showing_command') {
+      // 返回命令和确认状态，让调用方执行
+      onComplete({
+        command: state.command,
+        confirmed: true,
+        debugInfo: debugInfo || undefined,
+      })
+    }
+  }
+
+  // 处理取消
+  const handleCancel = () => {
+    if (state.type === 'showing_command') {
+      setState({ type: 'cancelled', command: state.command })
+      setTimeout(() => {
+        onComplete({
+          command: state.command,
+          cancelled: true,
+        })
+      }, 100)
+    }
+  }
+
+  return (
+    <Box flexDirection="column">
+      {/* 思考阶段 */}
+      {state.type === 'thinking' && (
+        <Box>
+          <Text color={theme.info}>
+            <Spinner type="dots" /> 正在思考...
+          </Text>
+        </Box>
+      )}
+
+      {/* 思考完成 */}
+      {state.type !== 'thinking' && thinkDuration > 0 && (
+        <Box>
+          <Text color={theme.success}>✓ 思考完成 </Text>
+          <Duration ms={thinkDuration} />
+        </Box>
+      )}
+
+      {/* 调试信息 */}
+      {debugInfo && (
+        <Box flexDirection="column" marginY={1}>
+          <Text color={theme.accent}>━━━ 调试信息 ━━━</Text>
+          <Text color={theme.text.secondary}>系统信息: {debugInfo.sysinfo}</Text>
+          <Text color={theme.text.secondary}>模型: {debugInfo.model}</Text>
+          <Text color={theme.text.secondary}>System Prompt:</Text>
+          <Text dimColor>{debugInfo.systemPrompt}</Text>
+          <Text color={theme.text.secondary}>User Prompt: {debugInfo.userPrompt}</Text>
+          <Text color={theme.accent}>━━━━━━━━━━━━━━━━</Text>
+        </Box>
+      )}
+
+      {/* 显示命令 */}
+      {(state.type === 'showing_command' || state.type === 'cancelled') && (
+        <CommandBox command={state.command} />
+      )}
+
+      {/* Builtin 警告 */}
+      {state.type === 'showing_command' && state.hasBuiltin && (
+        <Box flexDirection="column" marginY={1}>
+          <Text color={theme.error}>
+            ⚠️  此命令包含 shell 内置命令（{formatBuiltins(state.builtins)}），无法在子进程中生效
+          </Text>
+          <Text color={theme.warning}>💡 请手动复制到终端执行</Text>
+        </Box>
+      )}
+
+      {/* 确认提示 */}
+      {state.type === 'showing_command' && !state.hasBuiltin && (
+        <ConfirmationPrompt prompt="执行？" onConfirm={handleConfirm} onCancel={handleCancel} />
+      )}
+
+      {/* 取消 */}
+      {state.type === 'cancelled' && (
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>已取消执行</Text>
+        </Box>
+      )}
+
+      {/* 错误 */}
+      {state.type === 'error' && (
+        <Box marginTop={1}>
+          <Text color={theme.error}>❌ 错误: {state.error}</Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/ConfigDisplay.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { getConfig, maskApiKey } from '../config.js'
+import { theme } from '../ui/theme.js'
+import path from 'path'
+import os from 'os'
+
+const CONFIG_FILE = path.join(os.homedir(), '.please', 'config.json')
+
+interface ConfigDisplayProps {
+  onComplete?: () => void
+}
+
+/**
+ * ConfigDisplay 组件 - 显示当前配置
+ */
+export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({ onComplete }) => {
+  const config = getConfig()
+
+  React.useEffect(() => {
+    if (onComplete) {
+      setTimeout(onComplete, 100)
+    }
+  }, [onComplete])
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text bold>当前配置:</Text>
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+      <Box>
+        <Text color={theme.primary}>  apiKey:           </Text>
+        <Text>{maskApiKey(config.apiKey)}</Text>
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  baseUrl:          </Text>
+        <Text>{config.baseUrl}</Text>
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  model:            </Text>
+        <Text>{config.model}</Text>
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  shellHook:        </Text>
+        {config.shellHook ? (
+          <Text color={theme.success}>已启用</Text>
+        ) : (
+          <Text color={theme.text.secondary}>未启用</Text>
+        )}
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  chatHistoryLimit: </Text>
+        <Text>{config.chatHistoryLimit} 轮</Text>
+      </Box>
+
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+      <Text color={theme.text.secondary}>配置文件: {CONFIG_FILE}</Text>
+    </Box>
+  )
+}