fss-link 1.0.40 → 1.0.45

package/dist/ui/components/OpenAIEndpointDialog.tsx

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { TextInput } from './shared/TextInput.js';
+import { getFSSLinkDatabase } from '../../config/database.js';
+
+interface CustomEndpoint {
+  id?: number;
+  name: string;
+  url: string;
+  description?: string;
+  isDefault: boolean;
+}
+
+interface OpenAIEndpointDialogProps {
+  providerId: number;
+  onSelect: (endpoint: CustomEndpoint | null) => void;
+  onCancel: () => void;
+}
+
+const COMMON_ENDPOINTS: CustomEndpoint[] = [
+  {
+    name: 'OpenAI Official',
+    url: 'https://api.openai.com/v1',
+    description: 'Official OpenAI API endpoint',
+    isDefault: true
+  },
+  {
+    name: 'Azure OpenAI',
+    url: 'https://your-resource.openai.azure.com',
+    description: 'Azure OpenAI Service endpoint (update URL)',
+    isDefault: false
+  },
+  {
+    name: 'Custom Local',
+    url: 'http://localhost:8000/v1',
+    description: 'Local OpenAI-compatible server',
+    isDefault: false
+  }
+];
+
+export function OpenAIEndpointDialog({ 
+  providerId, 
+  onSelect, 
+  onCancel 
+}: OpenAIEndpointDialogProps) {
+  const [savedEndpoints, setSavedEndpoints] = useState<CustomEndpoint[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [mode, setMode] = useState<'select' | 'add'>('select');
+  const [newEndpoint, setNewEndpoint] = useState({
+    name: '',
+    url: '',
+    description: ''
+  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [inputField, setInputField] = useState<'name' | 'url' | 'description'>('name');
+
+  // Load saved endpoints
+  useEffect(() => {
+    const loadEndpoints = async () => {
+      try {
+        const db = await getFSSLinkDatabase();
+        const saved = await db.getCustomEndpoints(providerId);
+        setSavedEndpoints(saved.map(e => ({
+          id: e.id,
+          name: e.name,
+          url: e.url,
+          description: e.description,
+          isDefault: Boolean(e.is_default)
+        })));
+      } catch (error) {
+        console.error('Failed to load endpoints:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadEndpoints();
+  }, [providerId]);
+
+  // Combine saved and common endpoints
+  const allEndpoints = [...savedEndpoints, ...COMMON_ENDPOINTS];
+
+  useKeypress((input, key) => {
+    if (mode === 'select') {
+      if (key?.upArrow) {
+        setSelectedIndex(Math.max(0, selectedIndex - 1));
+      } else if (key?.downArrow) {
+        setSelectedIndex(Math.min(allEndpoints.length, selectedIndex + 1));
+      } else if (key?.return) {
+        if (selectedIndex === allEndpoints.length) {
+          // Add new endpoint option selected
+          setMode('add');
+        } else {
+          // Endpoint selected
+          onSelect(allEndpoints[selectedIndex]);
+        }
+      } else if (key?.escape || input === 'q') {
+        onCancel();
+      }
+    } else if (mode === 'add') {
+      if (key?.escape) {
+        setMode('select');
+      } else if (key?.tab) {
+        // Move to next field
+        const fields: Array<'name' | 'url' | 'description'> = ['name', 'url', 'description'];
+        const currentIndex = fields.indexOf(inputField);
+        const nextIndex = (currentIndex + 1) % fields.length;
+        setInputField(fields[nextIndex]);
+      } else if (key?.return && inputField === 'description') {
+        // Save new endpoint
+        if (newEndpoint.name && newEndpoint.url) {
+          saveNewEndpoint();
+        }
+      }
+    }
+  });
+
+  const saveNewEndpoint = async () => {
+    try {
+      const db = await getFSSLinkDatabase();
+      const endpointId = await db.saveCustomEndpoint(
+        providerId,
+        newEndpoint.name,
+        newEndpoint.url,
+        newEndpoint.description || undefined,
+        false // Not default by default
+      );
+
+      const savedEndpoint: CustomEndpoint = {
+        id: endpointId,
+        name: newEndpoint.name,
+        url: newEndpoint.url,
+        description: newEndpoint.description,
+        isDefault: false
+      };
+
+      setSavedEndpoints([...savedEndpoints, savedEndpoint]);
+      onSelect(savedEndpoint);
+    } catch (error) {
+      console.error('Failed to save endpoint:', error);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text color={Colors.AccentBlue}>Loading saved endpoints...</Text>
+      </Box>
+    );
+  }
+
+  if (mode === 'add') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text color={Colors.AccentBlue} bold>
+          Add Custom Endpoint
+        </Text>
+        <Text color={Colors.Gray} marginBottom={1}>
+          Tab to move between fields, Enter to save, Escape to cancel
+        </Text>
+
+        <Box marginBottom={1}>
+          <Text color={inputField === 'name' ? Colors.AccentGreen : Colors.Gray}>
+            Name: 
+          </Text>
+          <TextInput
+            value={newEndpoint.name}
+            onChange={(value) => setNewEndpoint(prev => ({ ...prev, name: value }))}
+            isActive={inputField === 'name'}
+            placeholder="e.g., My Custom API"
+          />
+        </Box>
+
+        <Box marginBottom={1}>
+          <Text color={inputField === 'url' ? Colors.AccentGreen : Colors.Gray}>
+            URL: 
+          </Text>
+          <TextInput
+            value={newEndpoint.url}
+            onChange={(value) => setNewEndpoint(prev => ({ ...prev, url: value }))}
+            isActive={inputField === 'url'}
+            placeholder="https://api.example.com/v1"
+          />
+        </Box>
+
+        <Box marginBottom={1}>
+          <Text color={inputField === 'description' ? Colors.AccentGreen : Colors.Gray}>
+            Description: 
+          </Text>
+          <TextInput
+            value={newEndpoint.description}
+            onChange={(value) => setNewEndpoint(prev => ({ ...prev, description: value }))}
+            isActive={inputField === 'description'}
+            placeholder="Optional description"
+          />
+        </Box>
+
+        <Text color={Colors.Gray} fontSize={0.8}>
+          {newEndpoint.name && newEndpoint.url 
+            ? "Press Enter to save endpoint" 
+            : "Name and URL are required"}
+        </Text>
+      </Box>
+    );
+  }
+
+  const options = [
+    ...allEndpoints.map(endpoint => ({
+      label: endpoint.name,
+      description: `${endpoint.url}${endpoint.description ? ` - ${endpoint.description}` : ''}`,
+      value: endpoint
+    })),
+    {
+      label: '+ Add New Endpoint',
+      description: 'Create a custom endpoint configuration',
+      value: 'add'
+    }
+  ];
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text color={Colors.AccentBlue} bold marginBottom={1}>
+        Select OpenAI Endpoint
+      </Text>
+      
+      <Text color={Colors.Gray} marginBottom={1}>
+        Choose from saved endpoints or add a new one
+      </Text>
+
+      <RadioButtonSelect
+        options={options}
+        selectedIndex={selectedIndex}
+        onSelect={(option) => {
+          if (option.value === 'add') {
+            setMode('add');
+          } else {
+            onSelect(option.value as CustomEndpoint);
+          }
+        }}
+        colors={{
+          selected: Colors.AccentGreen,
+          unselected: Colors.Gray,
+          description: Colors.Comment
+        }}
+      />
+
+      <Text color={Colors.Gray} marginTop={1} fontSize={0.8}>
+        ↑/↓ navigate, Enter select, q/Escape cancel
+      </Text>
+    </Box>
+  );
+}

package/dist/ui/components/OpenAIKeyPrompt.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import { OpenAIKeyPrompt } from './OpenAIKeyPrompt.js';
+
+describe('OpenAIKeyPrompt', () => {
+  it('should render the prompt correctly', () => {
+    const onSubmit = vi.fn();
+    const onCancel = vi.fn();
+
+    const { lastFrame } = render(
+      <OpenAIKeyPrompt onSubmit={onSubmit} onCancel={onCancel} />,
+    );
+
+    expect(lastFrame()).toContain('OpenAI Configuration Required');
+    expect(lastFrame()).toContain('https://platform.openai.com/api-keys');
+    expect(lastFrame()).toContain(
+      'Press Enter to continue, Tab/↑↓ to navigate, Esc to cancel',
+    );
+  });
+
+  it('should show the component with proper styling', () => {
+    const onSubmit = vi.fn();
+    const onCancel = vi.fn();
+
+    const { lastFrame } = render(
+      <OpenAIKeyPrompt onSubmit={onSubmit} onCancel={onCancel} />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('OpenAI Configuration Required');
+    expect(output).toContain('API Key:');
+    expect(output).toContain('Base URL:');
+    expect(output).toContain('Model:');
+    expect(output).toContain(
+      'Press Enter to continue, Tab/↑↓ to navigate, Esc to cancel',
+    );
+  });
+
+  it('should handle paste with control characters', async () => {
+    const onSubmit = vi.fn();
+    const onCancel = vi.fn();
+
+    const { stdin } = render(
+      <OpenAIKeyPrompt onSubmit={onSubmit} onCancel={onCancel} />,
+    );
+
+    // Simulate paste with control characters
+    const pasteWithControlChars = '\x1b[200~sk-test123\x1b[201~';
+    stdin.write(pasteWithControlChars);
+
+    // Wait a bit for processing
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // The component should have filtered out the control characters
+    // and only kept 'sk-test123'
+    expect(onSubmit).not.toHaveBeenCalled(); // Should not submit yet
+  });
+});

package/dist/ui/components/OpenAIKeyPrompt.tsx

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Colors } from '../colors.js';
+
+interface OpenAIKeyPromptProps {
+  onSubmit: (apiKey: string, baseUrl: string, model: string) => void;
+  onCancel: () => void;
+}
+
+export function OpenAIKeyPrompt({
+  onSubmit,
+  onCancel,
+}: OpenAIKeyPromptProps): React.JSX.Element {
+  const [apiKey, setApiKey] = useState('');
+  const [baseUrl, setBaseUrl] = useState('');
+  const [model, setModel] = useState('');
+  const [currentField, setCurrentField] = useState<
+    'apiKey' | 'baseUrl' | 'model'
+  >('apiKey');
+
+  useInput((input, key) => {
+    // 过滤粘贴相关的控制序列
+    let cleanInput = (input || '')
+      // 过滤 ESC 开头的控制序列（如 \u001b[200~、\u001b[201~ 等）
+      .replace(/\u001b\[[0-9;]*[a-zA-Z]/g, '') // eslint-disable-line no-control-regex
+      // 过滤粘贴开始标记 [200~
+      .replace(/\[200~/g, '')
+      // 过滤粘贴结束标记 [201~
+      .replace(/\[201~/g, '')
+      // 过滤单独的 [ 和 ~ 字符（可能是粘贴标记的残留）
+      .replace(/^\[|~$/g, '');
+
+    // 再过滤所有不可见字符（ASCII < 32，除了回车换行）
+    cleanInput = cleanInput
+      .split('')
+      .filter((ch) => ch.charCodeAt(0) >= 32)
+      .join('');
+
+    if (cleanInput.length > 0) {
+      if (currentField === 'apiKey') {
+        setApiKey((prev) => prev + cleanInput);
+      } else if (currentField === 'baseUrl') {
+        setBaseUrl((prev) => prev + cleanInput);
+      } else if (currentField === 'model') {
+        setModel((prev) => prev + cleanInput);
+      }
+      return;
+    }
+
+    // 检查是否是 Enter 键（通过检查输入是否包含换行符）
+    if (input.includes('\n') || input.includes('\r')) {
+      if (currentField === 'apiKey') {
+        // 允许空 API key 跳转到下一个字段，让用户稍后可以返回修改
+        setCurrentField('baseUrl');
+        return;
+      } else if (currentField === 'baseUrl') {
+        setCurrentField('model');
+        return;
+      } else if (currentField === 'model') {
+        // 只有在提交时才检查 API key 是否为空
+        if (apiKey.trim()) {
+          onSubmit(apiKey.trim(), baseUrl.trim(), model.trim());
+        } else {
+          // 如果 API key 为空，回到 API key 字段
+          setCurrentField('apiKey');
+        }
+      }
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    // Handle Tab key for field navigation
+    if (key.tab) {
+      if (currentField === 'apiKey') {
+        setCurrentField('baseUrl');
+      } else if (currentField === 'baseUrl') {
+        setCurrentField('model');
+      } else if (currentField === 'model') {
+        setCurrentField('apiKey');
+      }
+      return;
+    }
+
+    // Handle arrow keys for field navigation
+    if (key.upArrow) {
+      if (currentField === 'baseUrl') {
+        setCurrentField('apiKey');
+      } else if (currentField === 'model') {
+        setCurrentField('baseUrl');
+      }
+      return;
+    }
+
+    if (key.downArrow) {
+      if (currentField === 'apiKey') {
+        setCurrentField('baseUrl');
+      } else if (currentField === 'baseUrl') {
+        setCurrentField('model');
+      }
+      return;
+    }
+
+    // Handle backspace - check both key.backspace and delete key
+    if (key.backspace || key.delete) {
+      if (currentField === 'apiKey') {
+        setApiKey((prev) => prev.slice(0, -1));
+      } else if (currentField === 'baseUrl') {
+        setBaseUrl((prev) => prev.slice(0, -1));
+      } else if (currentField === 'model') {
+        setModel((prev) => prev.slice(0, -1));
+      }
+      return;
+    }
+  });
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={Colors.AccentBlue}
+      flexDirection="column"
+      padding={1}
+      width="100%"
+    >
+      <Text bold color={Colors.AccentBlue}>
+        OpenAI Configuration Required
+      </Text>
+      <Box marginTop={1}>
+        <Text>
+          Please enter your OpenAI configuration. You can get an API key from{' '}
+          <Text color={Colors.AccentBlue}>
+            https://platform.openai.com/api-keys
+          </Text>
+        </Text>
+      </Box>
+      <Box marginTop={1} flexDirection="row">
+        <Box width={12}>
+          <Text
+            color={currentField === 'apiKey' ? Colors.AccentBlue : Colors.Gray}
+          >
+            API Key:
+          </Text>
+        </Box>
+        <Box flexGrow={1}>
+          <Text>
+            {currentField === 'apiKey' ? '> ' : '  '}
+            {apiKey || ' '}
+          </Text>
+        </Box>
+      </Box>
+      <Box marginTop={1} flexDirection="row">
+        <Box width={12}>
+          <Text
+            color={currentField === 'baseUrl' ? Colors.AccentBlue : Colors.Gray}
+          >
+            Base URL:
+          </Text>
+        </Box>
+        <Box flexGrow={1}>
+          <Text>
+            {currentField === 'baseUrl' ? '> ' : '  '}
+            {baseUrl}
+          </Text>
+        </Box>
+      </Box>
+      <Box marginTop={1} flexDirection="row">
+        <Box width={12}>
+          <Text
+            color={currentField === 'model' ? Colors.AccentBlue : Colors.Gray}
+          >
+            Model:
+          </Text>
+        </Box>
+        <Box flexGrow={1}>
+          <Text>
+            {currentField === 'model' ? '> ' : '  '}
+            {model}
+          </Text>
+        </Box>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={Colors.Gray}>
+          Press Enter to continue, Tab/↑↓ to navigate, Esc to cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/dist/ui/components/PrepareLabel.tsx

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text } from 'ink';
+import { Colors } from '../colors.js';
+
+interface PrepareLabelProps {
+  label: string;
+  matchedIndex?: number;
+  userInput: string;
+  textColor: string;
+  highlightColor?: string;
+}
+
+export const PrepareLabel: React.FC<PrepareLabelProps> = ({
+  label,
+  matchedIndex,
+  userInput,
+  textColor,
+  highlightColor = Colors.AccentYellow,
+}) => {
+  if (
+    matchedIndex === undefined ||
+    matchedIndex < 0 ||
+    matchedIndex >= label.length ||
+    userInput.length === 0
+  ) {
+    return <Text color={textColor}>{label}</Text>;
+  }
+
+  const start = label.slice(0, matchedIndex);
+  const match = label.slice(matchedIndex, matchedIndex + userInput.length);
+  const end = label.slice(matchedIndex + userInput.length);
+
+  return (
+    <Text>
+      <Text color={textColor}>{start}</Text>
+      <Text color="black" bold backgroundColor={highlightColor}>
+        {match}
+      </Text>
+      <Text color={textColor}>{end}</Text>
+    </Text>
+  );
+};