closer-code 1.0.0 → 1.0.1

package/src/components/fullscreen-conversation.jsx

@@ -0,0 +1,157 @@
+/**
+ * 全屏对话组件
+ *
+ * 特点：
+ * - 占满整个屏幕
+ * - 不限制高度，自然滚动
+ * - 方便查看完整历史和复制内容
+ * - 使用终端自带滚动
+ * - 工具详情与对话混排显示
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ToolRenderer } from './tool-renderers/index.jsx';
+
+/**
+ * 工具执行卡片组件（全屏模式专用 - 简洁版）
+ */
+function ToolExecutionCard({ tool }) {
+  const statusConfig = {
+    pending: { icon: '⏳', color: 'gray' },
+    running: { icon: '⚡', color: 'yellow' },
+    success: { icon: '✓', color: 'green' },
+    error: { icon: '✗', color: 'red' }
+  };
+  
+  const status = tool.status || 'pending';
+  const { icon, color } = statusConfig[status];
+  
+  return (
+    <Box flexDirection="column" marginY={1} width="100%">
+      {/* 工具标题 - 简洁样式 */}
+      <Box>
+        <Text color={color}>{icon} </Text>
+        <Text color="gray">🔧 </Text>
+        <Text bold>{tool.tool}</Text>
+        {tool.duration && <Text dim> ({tool.duration}ms)</Text>}
+      </Box>
+      
+      {/* 工具详情 */}
+      <Box paddingLeft={2}>
+        <ToolRenderer tool={tool} maxHeight={20} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * 全屏对话组件（使用 React.memo 优化渲染性能）
+ */
+const FullscreenConversation = React.memo(function FullscreenConversation({ messages, tokenStats, toolExecutions = [], showTools = true }) {
+
+  // 计算token使用颜色
+  const getTokenColor = () => {
+    const percentage = tokenStats.percentage || 0;
+    if (percentage < 70) return 'green';
+    if (percentage < 90) return 'yellow';
+    return 'red';
+  };
+
+  // 将消息和工具执行按时间顺序混合
+  const getMixedContent = () => {
+    const content = [];
+
+    // 添加消息
+    messages.forEach((message, index) => {
+      content.push({
+        type: 'message',
+        data: message,
+        key: message.key || `msg-${index}`,
+        timestamp: message.timestamp || index
+      });
+    });
+
+    // 添加工具执行（仅在 showTools 为 true 时）
+    if (showTools) {
+      toolExecutions.forEach((tool, index) => {
+        content.push({
+          type: 'tool',
+          data: tool,
+          key: tool.id || `tool-${index}`,
+          timestamp: tool.id || Date.now() + index
+        });
+      });
+    }
+
+    // 按时间戳排序（保持原有顺序，工具执行插入到对应位置）
+    // 由于消息没有精确时间戳，我们保持消息在前，工具在后的顺序
+    // 实际上工具执行是在 AI 响应过程中发生的，所以放在消息之后
+    return content;
+  };
+
+  const mixedContent = getMixedContent();
+
+  return (
+    <Box flexDirection="column" height="100%" paddingX={1}>
+      {/* 顶部状态栏 - 简洁无边框 */}
+      <Box paddingX={1} marginBottom={1} justifyContent="space-between">
+        <Text dim>📺 全屏模式 (Ctrl+G 退出)</Text>
+        <Text color={getTokenColor()} dim>
+          {tokenStats.total?.toLocaleString() || 0}/{tokenStats.limit?.toLocaleString() || 4096}
+        </Text>
+      </Box>
+
+      {/* 混合内容列表 - 不限制高度 */}
+      <Box flexDirection="column" flexGrow={1}>
+        {mixedContent.length === 0 ? (
+          <Box justifyContent="center" alignItems="center">
+            <Text dim>暂无消息</Text>
+          </Box>
+        ) : (
+          mixedContent.map((item, index) => {
+            if (item.type === 'message') {
+              const message = item.data;
+              const isUser = message.role === 'user';
+              const isSystem = message.role === 'system';
+              const isError = message.role === 'error';
+
+              const color = isUser ? 'cyan' : isError ? 'red' : isSystem ? 'yellow' : 'white';
+
+              return (
+                <Box key={item.key} flexDirection="column" marginBottom={1} width="100%">
+                  <Box width="100%">
+                    <Text bold color={color}>
+                      {isUser ? '👤 用户' : isError ? '❌ 错误' : isSystem ? 'ℹ️ 系统' : '🤖 助手'}
+                    </Text>
+                  </Box>
+                  <Box width="100%">
+                    <Text color={color}>
+                      {typeof message.content === 'string'
+                        ? message.content
+                        : JSON.stringify(message.content, null, 2)}
+                    </Text>
+                  </Box>
+                  {/* 简洁分隔 */}
+                  <Box marginTop={1} />
+                </Box>
+              );
+            } else if (item.type === 'tool') {
+              return (
+                <ToolExecutionCard key={item.key} tool={item.data} />
+              );
+            }
+            return null;
+          })
+        )}
+      </Box>
+
+      {/* 底部提示 - 简洁无边框 */}
+      <Box paddingX={1} marginTop={1}>
+        <Text dim>💡 鼠标选择复制 | 滚轮滚动 | Ctrl+G 返回 | Ctrl+T {showTools ? '隐藏' : '显示'}工具</Text>
+      </Box>
+    </Box>
+  );
+});
+
+export default FullscreenConversation;

package/src/components/ink-text-input/index.jsx

@@ -0,0 +1,324 @@
+/**
+ * Enhanced TextInput Component
+ *
+ * Forked from ink-text-input with the following enhancements:
+ * - Added cursorPosition prop for external cursor control
+ * - Added onCursorChange callback to notify cursor position changes
+ * - Implemented Ctrl+A (jump to start)
+ * - Implemented Ctrl+E (jump to end)
+ * - Implemented Ctrl+B (move back one character)
+ * - Implemented Ctrl+F (move forward one character)
+ * - Implemented Ctrl+U (delete to start)
+ * - Implemented Ctrl+K (delete to end)
+ * - Implemented Ctrl+W (delete previous word)
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Text, useInput } from 'ink';
+import chalk from 'chalk';
+import { supportsJobControl } from '../../utils/platform.js';
+
+export function EnhancedTextInput({
+  value: originalValue = '',
+  placeholder = '',
+  focus = true,
+  mask,
+  highlightPastedText = false,
+  showCursor = true,
+  cursorPosition: externalCursorPosition,
+  onCursorChange,
+  onChange,
+  onSubmit,
+  onEnterMultiline,
+  enableShortcuts = true
+}) {
+  // 初始化光标位置
+  const getInitialCursorOffset = () => {
+    if (externalCursorPosition !== undefined) {
+      return externalCursorPosition;
+    }
+    return (originalValue || '').length;
+  };
+
+  const [state, setState] = useState({
+    cursorOffset: getInitialCursorOffset(),
+    cursorWidth: 0
+  });
+
+  const { cursorOffset, cursorWidth } = state;
+
+  // 同步外部 cursorPosition 变化
+  useEffect(() => {
+    if (externalCursorPosition !== undefined && externalCursorPosition !== cursorOffset) {
+      setState({
+        cursorOffset: externalCursorPosition,
+        cursorWidth: 0
+      });
+    }
+  }, [externalCursorPosition]);
+
+  // 当 value 变化时，调整光标位置
+  useEffect(() => {
+    setState(previousState => {
+      if (!focus || !showCursor) {
+        return previousState;
+      }
+
+      const newValue = originalValue || '';
+
+      // 如果光标超出范围，调整到末尾
+      if (previousState.cursorOffset > newValue.length) {
+        const newOffset = newValue.length;
+        // 通知父组件
+        if (onCursorChange) {
+          onCursorChange(newOffset);
+        }
+        return {
+          cursorOffset: newOffset,
+          cursorWidth: 0
+        };
+      }
+
+      return previousState;
+    });
+  }, [originalValue, focus, showCursor, onCursorChange]);
+
+  const cursorActualWidth = highlightPastedText ? cursorWidth : 0;
+  const value = mask ? mask.repeat(originalValue.length) : originalValue;
+
+  let renderedValue = value;
+  let renderedPlaceholder = placeholder ? chalk.grey(placeholder) : undefined;
+
+  // 渲染光标（fake cursor）
+  if (showCursor && focus) {
+    renderedPlaceholder =
+      placeholder.length > 0
+        ? chalk.inverse(placeholder[0]) + chalk.grey(placeholder.slice(1))
+        : chalk.inverse(' ');
+
+    renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
+
+    let i = 0;
+    for (const char of value) {
+      renderedValue +=
+        i >= cursorOffset - cursorActualWidth && i <= cursorOffset
+          ? chalk.inverse(char)
+          : char;
+      i++;
+    }
+
+    if (value.length > 0 && cursorOffset === value.length) {
+      renderedValue += chalk.inverse(' ');
+    }
+  }
+
+  useInput((input, key) => {
+    // 不处理的按键（由主组件处理）
+    if (key.upArrow ||
+        key.downArrow ||
+        (key.ctrl && input === 'c') ||
+        (key.ctrl && input === 'z') ||
+        (key.ctrl && input === 't') ||
+        (key.ctrl && input === 'g') ||
+        key.tab ||
+        (key.shift && key.tab)) {
+      return;
+    }
+
+    // Ctrl+Enter: 进入多行模式
+    if (key.ctrl && key.return && onEnterMultiline) {
+      onEnterMultiline();
+      return;
+    }
+
+    // Enter 键
+    if (key.return) {
+      if (onSubmit) {
+        onSubmit(originalValue);
+      }
+      return;
+    }
+
+    let nextCursorOffset = cursorOffset;
+    let nextValue = originalValue;
+    let nextCursorWidth = 0;
+
+    // 快捷键处理
+    if (enableShortcuts && key.ctrl) {
+      // Ctrl+A: 跳到行首
+      if (input === 'a') {
+        nextCursorOffset = 0;
+        setState({
+          cursorOffset: nextCursorOffset,
+          cursorWidth: 0
+        });
+        if (onCursorChange) {
+          onCursorChange(nextCursorOffset);
+        }
+        return;
+      }
+
+      // Ctrl+E: 跳到行尾
+      if (input === 'e') {
+        nextCursorOffset = originalValue.length;
+        setState({
+          cursorOffset: nextCursorOffset,
+          cursorWidth: 0
+        });
+        if (onCursorChange) {
+          onCursorChange(nextCursorOffset);
+        }
+        return;
+      }
+
+      // Ctrl+B: 向后移动一个字符（相当于左箭头）
+      if (input === 'b') {
+        nextCursorOffset = Math.max(0, cursorOffset - 1);
+        setState({
+          cursorOffset: nextCursorOffset,
+          cursorWidth: 0
+        });
+        if (onCursorChange) {
+          onCursorChange(nextCursorOffset);
+        }
+        return;
+      }
+
+      // Ctrl+F: 向前移动一个字符（相当于右箭头）
+      if (input === 'f') {
+        nextCursorOffset = Math.min(originalValue.length, cursorOffset + 1);
+        setState({
+          cursorOffset: nextCursorOffset,
+          cursorWidth: 0
+        });
+        if (onCursorChange) {
+          onCursorChange(nextCursorOffset);
+        }
+        return;
+      }
+
+      // Ctrl+U: 删除到行首
+      if (input === 'u') {
+        if (cursorOffset > 0) {
+          nextValue = originalValue.slice(cursorOffset);
+          onChange(nextValue);
+          nextCursorOffset = 0;
+          setState({
+            cursorOffset: nextCursorOffset,
+            cursorWidth: 0
+          });
+          if (onCursorChange) {
+            onCursorChange(nextCursorOffset);
+          }
+        }
+        return;
+      }
+
+      // Ctrl+K: 删除到行尾
+      if (input === 'k') {
+        if (cursorOffset < originalValue.length) {
+          nextValue = originalValue.slice(0, cursorOffset);
+          onChange(nextValue);
+          setState({
+            cursorOffset: nextCursorOffset,
+            cursorWidth: 0
+          });
+        }
+        return;
+      }
+
+      // Ctrl+W: 删除前一个单词
+      if (input === 'w') {
+        if (cursorOffset > 0) {
+          const beforeCursor = originalValue.slice(0, cursorOffset);
+          const afterCursor = originalValue.slice(cursorOffset);
+
+          // 找到前一个单词的边界
+          const newBefore = beforeCursor.replace(/\S+\s*$/, '');
+          nextCursorOffset = newBefore.length;
+          nextValue = newBefore + afterCursor;
+
+          onChange(nextValue);
+          setState({
+            cursorOffset: nextCursorOffset,
+            cursorWidth: 0
+          });
+          if (onCursorChange) {
+            onCursorChange(nextCursorOffset);
+          }
+        }
+        return;
+      }
+    }
+
+    // 左箭头
+    if (key.leftArrow) {
+      if (showCursor) {
+        nextCursorOffset--;
+      }
+    }
+    // 右箭头
+    else if (key.rightArrow) {
+      if (showCursor) {
+        nextCursorOffset++;
+      }
+    }
+    // Backspace 或 Delete
+    else if (key.backspace || key.delete) {
+      if (cursorOffset > 0) {
+        nextValue =
+          originalValue.slice(0, cursorOffset - 1) +
+            originalValue.slice(cursorOffset, originalValue.length);
+        nextCursorOffset--;
+      }
+    }
+    // 普通字符输入
+    else {
+      nextValue =
+        originalValue.slice(0, cursorOffset) +
+          input +
+          originalValue.slice(cursorOffset, originalValue.length);
+      nextCursorOffset += input.length;
+
+      if (input.length > 1) {
+        nextCursorWidth = input.length;
+      }
+    }
+
+    // 边界检查
+    if (nextCursorOffset < 0) {
+      nextCursorOffset = 0;
+    }
+
+    if (nextCursorOffset > nextValue.length) {
+      nextCursorOffset = nextValue.length;
+    }
+
+    setState({
+      cursorOffset: nextCursorOffset,
+      cursorWidth: nextCursorWidth
+    });
+
+    // 通知父组件光标位置变化
+    if (onCursorChange && nextCursorOffset !== cursorOffset) {
+      onCursorChange(nextCursorOffset);
+    }
+
+    // 通知父组件值变化
+    if (nextValue !== originalValue) {
+      onChange(nextValue);
+    }
+  }, { isActive: focus });
+
+  return (
+    <Text>
+      {placeholder
+        ? value.length > 0
+          ? renderedValue
+          : renderedPlaceholder
+        : renderedValue}
+    </Text>
+  );
+}
+
+export default EnhancedTextInput;