thatgfsj-code 0.5.0 → 0.6.0

package/src/tui/components/ChatList.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box } from 'ink';
+import { ChatMessage, type MessageData } from './ChatMessage.js';
+
+interface Props {
+  messages: MessageData[];
+  streaming?: string;
+  streamingToolCalls?: Array<{ name: string; args: string }>;
+}
+
+export function ChatList({ messages, streaming, streamingToolCalls }: Props) {
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      {messages.map((msg, i) => (
+        <ChatMessage key={i} message={msg} />
+      ))}
+      {(streaming || streamingToolCalls) && (
+        <ChatMessage
+          message={{
+            role: 'assistant',
+            content: streaming || '',
+            toolCalls: streamingToolCalls,
+          }}
+        />
+      )}
+    </Box>
+  );
+}

package/src/tui/components/ChatMessage.tsx

@@ -0,0 +1,51 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Markdown } from './Markdown.js';
+import { ToolCall, type ToolCallData } from './ToolCall.js';
+
+interface MessageData {
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  toolCalls?: ToolCallData[];
+}
+
+interface Props {
+  message: MessageData;
+}
+
+function UserMessage({ content }: { content: string }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold>You</Text>
+      <Box paddingLeft={2}>
+        <Text>{content}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function AssistantMessage({ content, toolCalls }: { content: string; toolCalls?: ToolCallData[] }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="cyan">AI</Text>
+      {toolCalls && toolCalls.map((tc, i) => (
+        <ToolCall key={i} tool={tc} />
+      ))}
+      {content && (
+        <Box paddingLeft={2} flexDirection="column">
+          <Markdown content={content} />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export function ChatMessage({ message }: Props) {
+  if (message.role === 'user') {
+    return <UserMessage content={message.content} />;
+  }
+  return <AssistantMessage content={message.content} toolCalls={message.toolCalls} />;
+}
+
+export type { MessageData };

package/src/tui/components/Header.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface Props {
+  provider: string;
+  model: string;
+}
+
+export function Header({ provider, model }: Props) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text bold color="cyan"> ⚡ Thatgfsj Code </Text>
+        <Text dimColor> v0.6.0</Text>
+        <Text dimColor> │ </Text>
+        <Text dimColor>{provider} / {model}</Text>
+      </Box>
+      <Text dimColor>{'─'.repeat(60)}</Text>
+    </Box>
+  );
+}

package/src/tui/components/Markdown.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource react */
+import React, { useMemo } from 'react';
+import { Text } from 'ink';
+import { marked } from 'marked';
+import TerminalRenderer from 'marked-terminal';
+
+// Configure marked to use terminal renderer
+marked.setOptions({
+  // @ts-ignore - marked-terminal types are incomplete
+  renderer: new TerminalRenderer({
+    showSectionPrefix: false,
+    tab: 2,
+  }),
+});
+
+interface Props {
+  content: string;
+}
+
+export function Markdown({ content }: Props) {
+  const rendered = useMemo(() => {
+    try {
+      const result = marked.parse(content);
+      // marked.parse returns string | Promise<string> depending on async option
+      if (typeof result === 'string') {
+        return result.trimEnd();
+      }
+      return content;
+    } catch {
+      return content;
+    }
+  }, [content]);
+
+  return <Text>{rendered}</Text>;
+}

package/src/tui/components/Thinking.tsx

@@ -0,0 +1,19 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+
+interface Props {
+  message?: string;
+}
+
+export function Thinking({ message = 'Thinking' }: Props) {
+  return (
+    <Box>
+      <Text color="cyan">
+        <Spinner type="dots" />
+      </Text>
+      <Text dimColor> {message}</Text>
+    </Box>
+  );
+}

package/src/tui/components/ToolCall.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface ToolCallData {
+  name: string;
+  args: string;
+  result?: string;
+  isError?: boolean;
+}
+
+interface Props {
+  tool: ToolCallData;
+}
+
+function formatArgs(args: string): string {
+  try {
+    const obj = JSON.parse(args);
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return '';
+    return entries
+      .map(([k, v]) => {
+        const val = typeof v === 'string' && v.length > 60
+          ? v.slice(0, 60) + '...'
+          : JSON.stringify(v);
+        return `${k}=${val}`;
+      })
+      .join(' ');
+  } catch {
+    return args.length > 80 ? args.slice(0, 80) + '...' : args;
+  }
+}
+
+function formatResult(output: string, maxLines = 15): { text: string; truncated: boolean } {
+  const lines = output.split('\n');
+  if (lines.length <= maxLines) {
+    return { text: output, truncated: false };
+  }
+  return {
+    text: lines.slice(0, maxLines).join('\n'),
+    truncated: true,
+  };
+}
+
+export function ToolCall({ tool }: Props) {
+  const argsStr = formatArgs(tool.args);
+  const result = tool.result ? formatResult(tool.result) : null;
+
+  return (
+    <Box flexDirection="column" marginY={0}>
+      <Box>
+        <Text color="yellow"> ⚙ </Text>
+        <Text bold color="yellow">{tool.name}</Text>
+        {argsStr && <Text dimColor> {argsStr}</Text>}
+      </Box>
+      {result && (
+        <Box paddingLeft={4} flexDirection="column">
+          {result.text.split('\n').map((line, i) => (
+            <Text key={i} dimColor={tool.isError} color={tool.isError ? 'red' : undefined}>
+              {tool.isError ? '✖ ' : '│ '}{line}
+            </Text>
+          ))}
+          {result.truncated && (
+            <Text dimColor>│ ... (truncated)</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export type { ToolCallData };

package/src/tui/components/UserInput.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource react */
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+
+interface Props {
+  onSubmit: (input: string) => void;
+  disabled?: boolean;
+}
+
+export function UserInput({ onSubmit, disabled }: Props) {
+  const [value, setValue] = useState('');
+  const [cursorPos, setCursorPos] = useState(0);
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (disabled) return;
+
+    if (key.return) {
+      const trimmed = value.trim();
+      if (trimmed) {
+        if (trimmed === 'exit' || trimmed === 'quit') {
+          exit();
+          return;
+        }
+        setHistory(prev => [...prev, trimmed]);
+        setHistoryIdx(-1);
+        onSubmit(trimmed);
+        setValue('');
+        setCursorPos(0);
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      if (history.length > 0) {
+        const newIdx = historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);
+        setHistoryIdx(newIdx);
+        setValue(history[newIdx]);
+        setCursorPos(history[newIdx].length);
+      }
+      return;
+    }
+
+    if (key.downArrow) {
+      if (historyIdx >= 0) {
+        const newIdx = historyIdx + 1;
+        if (newIdx >= history.length) {
+          setHistoryIdx(-1);
+          setValue('');
+          setCursorPos(0);
+        } else {
+          setHistoryIdx(newIdx);
+          setValue(history[newIdx]);
+          setCursorPos(history[newIdx].length);
+        }
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      if (cursorPos > 0) {
+        setValue(v => v.slice(0, cursorPos - 1) + v.slice(cursorPos));
+        setCursorPos(p => p - 1);
+      }
+      return;
+    }
+
+    if (key.leftArrow) {
+      setCursorPos(p => Math.max(0, p - 1));
+      return;
+    }
+
+    if (key.rightArrow) {
+      setCursorPos(p => Math.min(value.length, p + 1));
+      return;
+    }
+
+    if (key.ctrl && input === 'c') {
+      exit();
+      return;
+    }
+
+    // Regular character input
+    if (input && !key.ctrl && !key.meta) {
+      setValue(v => v.slice(0, cursorPos) + input + v.slice(cursorPos));
+      setCursorPos(p => p + input.length);
+    }
+  });
+
+  const prefix = disabled ? '  ' : '❯ ';
+
+  return (
+    <Box>
+      <Text bold color="cyan">{prefix}</Text>
+      <Text>{value}</Text>
+      {!disabled && <Text color="cyan">█</Text>}
+    </Box>
+  );
+}

package/src/tui/hooks/useChat.ts

@@ -0,0 +1,154 @@
+import { useState, useCallback, useRef } from 'react';
+import type { MessageData } from '../components/ChatMessage.js';
+import type { ToolCallData } from '../components/ToolCall.js';
+import type { App } from '../../app/index.js';
+
+interface ChatState {
+  messages: MessageData[];
+  isThinking: boolean;
+  streaming: string;
+  streamingToolCalls: ToolCallData[];
+}
+
+export function useChat(app: App) {
+  const [state, setState] = useState<ChatState>({
+    messages: [],
+    isThinking: false,
+    streaming: '',
+    streamingToolCalls: [],
+  });
+  const processingRef = useRef(false);
+
+  const sendMessage = useCallback(async (input: string) => {
+    if (processingRef.current) return;
+    processingRef.current = true;
+
+    // Add user message
+    setState(prev => ({
+      ...prev,
+      messages: [...prev.messages, { role: 'user', content: input }],
+      isThinking: true,
+      streaming: '',
+      streamingToolCalls: [],
+    }));
+
+    app.session.addMessage('user', input);
+
+    let fullContent = '';
+    let currentToolCalls: ToolCallData[] = [];
+
+    try {
+      const stream = app.streamResponse();
+
+      for await (const chunk of stream) {
+        // Check for tool messages
+        if (chunk.includes('@@TOOL@@')) {
+          const parts = chunk.split('\n');
+          for (const part of parts) {
+            if (part.startsWith('@@TOOL@@')) {
+              try {
+                const data = JSON.parse(part.slice(8));
+                if (data.action === 'call') {
+                  // Tool call - show it immediately
+                  currentToolCalls.push({
+                    name: data.name,
+                    args: data.args || '',
+                  });
+                  setState(prev => ({
+                    ...prev,
+                    isThinking: false,
+                    streamingToolCalls: [...currentToolCalls],
+                  }));
+                } else if (data.action === 'result') {
+                  // Tool result - update the last tool call
+                  const lastIdx = currentToolCalls.length - 1;
+                  if (lastIdx >= 0) {
+                    currentToolCalls[lastIdx] = {
+                      ...currentToolCalls[lastIdx],
+                      result: data.output || data.error || '',
+                      isError: !!data.error,
+                    };
+                  }
+                  setState(prev => ({
+                    ...prev,
+                    streamingToolCalls: [...currentToolCalls],
+                    isThinking: true, // Continue thinking after tool
+                  }));
+                }
+              } catch {
+                // Not a tool message, treat as text
+                fullContent += part;
+                setState(prev => ({
+                  ...prev,
+                  isThinking: false,
+                  streaming: fullContent,
+                }));
+              }
+            } else if (part) {
+              fullContent += part;
+              setState(prev => ({
+                ...prev,
+                isThinking: false,
+                streaming: fullContent,
+              }));
+            }
+          }
+        } else {
+          // Regular text chunk
+          fullContent += chunk;
+          setState(prev => ({
+            ...prev,
+            isThinking: false,
+            streaming: fullContent,
+          }));
+        }
+      }
+
+      // Finalize: add the complete message
+      if (fullContent.trim() || currentToolCalls.length > 0) {
+        app.session.addMessage('assistant', fullContent);
+      }
+
+      setState(prev => ({
+        ...prev,
+        messages: [
+          ...prev.messages,
+          ...(fullContent.trim() || currentToolCalls.length > 0
+            ? [{
+                role: 'assistant' as const,
+                content: fullContent,
+                toolCalls: currentToolCalls.length > 0 ? currentToolCalls : undefined,
+              }]
+            : []),
+        ],
+        streaming: '',
+        streamingToolCalls: [],
+        isThinking: false,
+      }));
+
+      app.session.truncate();
+
+    } catch (error: any) {
+      setState(prev => ({
+        ...prev,
+        messages: [
+          ...prev.messages,
+          ...(fullContent.trim()
+            ? [{ role: 'assistant' as const, content: fullContent }]
+            : []),
+          { role: 'assistant', content: `Error: ${error.message}` },
+        ],
+        streaming: '',
+        streamingToolCalls: [],
+        isThinking: false,
+      }));
+    }
+
+    processingRef.current = false;
+  }, [app]);
+
+  return {
+    ...state,
+    sendMessage,
+  };
+}

package/src/tui/hooks/useCommands.ts

@@ -0,0 +1,63 @@
+import { useCallback } from 'react';
+import type { App } from '../../app/index.js';
+
+interface CommandResult {
+  handled: boolean;
+  output?: string;
+}
+
+export function useCommands(app: App) {
+  const handleCommand = useCallback((input: string): CommandResult => {
+    const cmd = input.toLowerCase().trim();
+
+    switch (cmd) {
+      case 'help':
+        return {
+          handled: true,
+          output: [
+            'Commands:',
+            '  help     Show this help',
+            '  tools    List available tools',
+            '  model    Show current model',
+            '  clear    Clear screen',
+            '  exit     Exit',
+            '',
+            'Keyboard:',
+            '  ↑/↓      Browse history',
+            '  Ctrl+C   Exit',
+          ].join('\n'),
+        };
+
+      case 'tools':
+        return {
+          handled: true,
+          output: app.tools.list()
+            .map(t => `  ${t.name.padEnd(16)} ${t.description}`)
+            .join('\n'),
+        };
+
+      case 'model': {
+        const c = app.config.get();
+        return {
+          handled: true,
+          output: [
+            `  Provider:       ${c.provider}`,
+            `  Model:          ${c.model}`,
+            `  Base URL:       ${c.baseUrl || 'default'}`,
+            `  API Key:        ${c.apiKey ? '••••' + c.apiKey.slice(-4) : 'not set'}`,
+            `  Context Length: ${c.contextLength || 50} messages`,
+          ].join('\n'),
+        };
+      }
+
+      case 'clear':
+        // Handled separately in the App component
+        return { handled: true };
+
+      default:
+        return { handled: false };
+    }
+  }, [app]);
+
+  return { handleCommand };
+}

package/src/tui/index.ts

@@ -1,8 +1,6 @@
 /**
- * TUI Module - Terminal User Interface
+ * TUI Module - Ink-based Terminal UI
  */
 
-export { REPL } from './repl.js';
-export { REPLInput } from './input.js';
-export { REPLOutput } from './output.js';
+export { TuiApp } from './app.js';
 export { WelcomeScreen } from './welcome.js';

package/src/tui/welcome.ts

@@ -89,17 +89,17 @@ export class WelcomeScreen {
       console.log(chalk.bold('  3. Choose Model'));
       console.log();
 
+      let model: string;
       if (isCustomProvider(providerName)) {
         console.log(chalk.gray('    Enter model name for your relay station'));
         console.log(chalk.gray('    e.g. gpt-4o-mini, claude-sonnet-4-20250514'));
         console.log();
-        const model = await ask(chalk.cyan('    Model ❯ '));
+        model = await ask(chalk.cyan('    Model ❯ '));
         if (!model) {
           console.log(chalk.red('    ❌ Model name required'));
           rl.close();
           return;
         }
-        this.saveConfig(providerName, model, apiKey, baseUrl);
       } else {
         const models = getModelsForProvider(providerName);
         models.forEach((m, i) => {
@@ -107,12 +107,30 @@ export class WelcomeScreen {
           console.log(`    ${num}  ${chalk.white(m.name)}  ${chalk.gray(m.desc)}`);
         });
         console.log();
-
         const modelChoice = await ask(chalk.cyan('    ❯ '));
         const selectedModel = models[parseInt(modelChoice) - 1] || models[0];
-        this.saveConfig(providerName, selectedModel.id, apiKey, baseUrl);
+        model = selectedModel.id;
       }
 
+      // ── Step 4: Context Length ───────────────────────────
+      console.log();
+      console.log(chalk.bold('  4. Context Length'));
+      console.log();
+      console.log(chalk.gray('    Max messages kept in conversation history'));
+      console.log(chalk.gray('    Higher = more context, more tokens used'));
+      console.log();
+      console.log(chalk.cyan('    1') + '  20  ' + chalk.gray('(short,节省 token)'));
+      console.log(chalk.cyan('    2') + '  50  ' + chalk.gray('(default,推荐)'));
+      console.log(chalk.cyan('    3') + '  100 ' + chalk.gray('(long,长对话)'));
+      console.log(chalk.cyan('    4') + '  200 ' + chalk.gray('(very long,超长对话)'));
+      console.log();
+      const ctxChoice = await ask(chalk.cyan('    ❯ '));
+      const ctxMap: Record<string, number> = { '1': 20, '2': 50, '3': 100, '4': 200 };
+      const contextLength = ctxMap[ctxChoice] || 50;
+
+      // ── Save ────────────────────────────────────────────
+      this.saveConfig(providerName, model, apiKey, baseUrl, contextLength);
+
       // ── Done ────────────────────────────────────────────
       console.log();
       console.log(line);
@@ -128,7 +146,7 @@ export class WelcomeScreen {
     }
   }
 
-  private static saveConfig(provider: ProviderName, model: string, apiKey: string, baseUrl?: string): void {
+  private static saveConfig(provider: ProviderName, model: string, apiKey: string, baseUrl?: string, contextLength = 50): void {
     const configDir = join(homedir(), '.thatgfsj');
     const configPath = join(configDir, 'config.json');
 
@@ -142,6 +160,7 @@ export class WelcomeScreen {
       apiKey,
       temperature: 0.7,
       maxTokens: 4096,
+      contextLength,
     };
 
     if (baseUrl) config.baseUrl = baseUrl;

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "node16",
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
@@ -12,7 +12,9 @@
     "resolveJsonModule": true,
     "declaration": true,
     "declarationMap": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]