@tombcato/ai-selector-core 0.1.0

package/src/storage.ts

@@ -0,0 +1,78 @@
+/**
+ * AI Provider Selector - Storage Utilities
+ * Abstraction layer for config persistence
+ */
+
+import type { AIConfig, StorageAdapter } from './types';
+
+const STORAGE_KEY = 'ai_provider_config';
+
+/**
+ * Default localStorage adapter
+ */
+export const localStorageAdapter: StorageAdapter = {
+    get: (key: string) => {
+        if (typeof window === 'undefined') return null;
+        return localStorage.getItem(key);
+    },
+    set: (key: string, value: string) => {
+        if (typeof window === 'undefined') return;
+        localStorage.setItem(key, value);
+    },
+    remove: (key: string) => {
+        if (typeof window === 'undefined') return;
+        localStorage.removeItem(key);
+    },
+};
+
+/**
+ * Create a config storage instance
+ */
+export interface StorageOptions {
+    serialize?: (data: any) => string;
+    deserialize?: (data: string) => any;
+}
+
+export function createConfigStorage(
+    adapter: StorageAdapter = localStorageAdapter,
+    options: StorageOptions = {}
+) {
+    const serialize = options.serialize || JSON.stringify;
+    const deserialize = options.deserialize || JSON.parse;
+
+    return {
+        /**
+         * Save AI config
+         */
+        save(config: AIConfig): void {
+            try {
+                const serialized = serialize(config);
+                adapter.set(STORAGE_KEY, serialized);
+            } catch (e) {
+                console.error('Failed to save config:', e);
+            }
+        },
+
+        /**
+         * Load AI config
+         */
+        load(): AIConfig | null {
+            const raw = adapter.get(STORAGE_KEY);
+            if (!raw) return null;
+            try {
+                return deserialize(raw) as AIConfig;
+            } catch (e) {
+                console.error('Failed to load config:', e);
+                return null;
+            }
+        },
+
+        /**
+         * Clear AI config
+         */
+        clear(): void {
+            adapter.remove(STORAGE_KEY);
+        },
+    };
+}
+

package/src/strategies.ts

@@ -0,0 +1,251 @@
+import type { Provider, Model } from './types';
+
+export interface ProviderStrategy {
+    format: string;
+    // 模型列表
+    getModelsEndpoint?: (baseUrl: string, apiKey: string) => string;
+    parseModelsResponse?: (data: any) => Model[];
+    // 聊天 (也用于连接测试)
+    getChatEndpoint: (baseUrl: string, apiKey: string, model: string) => string;
+    buildChatPayload: (model: string, messages: Array<{ role: string; content: string }>, maxTokens: number) => Record<string, unknown>;
+    parseChatResponse: (data: any) => string;
+    // Headers
+    buildHeaders: (apiKey: string) => Record<string, string>;
+}
+
+export const defaultParseModelsResponse = (data: any): Model[] => {
+    if (Array.isArray(data?.data)) {
+        return data.data
+            .filter((m: any) => m.id)
+            .map((m: any) => {
+                const name =
+                    m.name ||
+                    (m.id.split('/').pop() ?? '')
+                        .replace(/[-_]/g, ' ')
+                        .replace(/\b\w/g, (c: string) => c.toUpperCase());
+                return {
+                    id: m.id,
+                    name,
+                    created: m.created || 0,
+                } as any;
+            })
+            .sort((a: any, b: any) => (b.created || 0) - (a.created || 0)); // 最新的排在前面
+    }
+    return [];
+};
+
+const openaiStrategy: ProviderStrategy = {
+    format: 'openai',
+    getModelsEndpoint: (baseUrl) => `${baseUrl}/models`,
+    getChatEndpoint: (baseUrl) => `${baseUrl}/chat/completions`,
+    buildHeaders: (apiKey) => ({
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+    }),
+    buildChatPayload: (model, messages, maxTokens) => ({
+        model,
+        messages,
+        max_tokens: maxTokens,
+    }),
+    parseChatResponse: (data) => {
+        return data.choices?.[0]?.message?.content || '';
+    },
+};
+
+const anthropicStrategy: ProviderStrategy = {
+    format: 'anthropic',
+    getChatEndpoint: (baseUrl) => `${baseUrl}/messages`,
+    buildHeaders: (apiKey) => ({
+        'Content-Type': 'application/json',
+        'x-api-key': apiKey,
+        'anthropic-version': '2023-06-01',
+    }),
+    buildChatPayload: (model, messages, maxTokens) => ({
+        model,
+        messages,
+        max_tokens: maxTokens,
+    }),
+    parseChatResponse: (data) => {
+        return data.content?.[0]?.text || '';
+    },
+};
+
+const geminiStrategy: ProviderStrategy = {
+    format: 'gemini',
+    getModelsEndpoint: (baseUrl, apiKey) => `${baseUrl}/models?key=${apiKey}`,
+    getChatEndpoint: (baseUrl, apiKey, model) => `${baseUrl}/models/${model}:generateContent?key=${apiKey}`,
+    buildHeaders: () => ({
+        'Content-Type': 'application/json',
+    }),
+    buildChatPayload: (_model, messages, maxTokens) => {
+        // 转换 OpenAI 格式的 messages 为 Gemini 格式
+        const contents = messages.map(m => ({
+            role: m.role === 'assistant' ? 'model' : 'user',
+            parts: [{ text: m.content }],
+        }));
+        return {
+            contents,
+            generationConfig: { maxOutputTokens: maxTokens },
+        };
+    },
+    parseChatResponse: (data) => {
+        return data.candidates?.[0]?.content?.parts?.[0]?.text || '';
+    },
+    // Gemini 返回格式: { models: [{ name: "models/gemini-pro", ... }] }
+    parseModelsResponse: (data) => {
+        if (Array.isArray(data.models)) {
+            return data.models
+                .filter((m: any) => m.supportedGenerationMethods?.includes('generateContent'))
+                .map((m: any) => ({
+                    id: m.name.replace('models/', ''), // "models/gemini-pro" -> "gemini-pro"
+                    name: m.displayName || m.name.replace('models/', ''),
+                    created: m.created || 0,
+                }))
+                .sort((a: any, b: any) => (b.created || 0) - (a.created || 0));
+        }
+        return [];
+    },
+};
+
+const cohereStrategy: ProviderStrategy = {
+    format: 'cohere',
+    getModelsEndpoint: (baseUrl) => `${baseUrl}/models`,
+    getChatEndpoint: (baseUrl) => `${baseUrl}/chat`,
+    buildHeaders: (apiKey) => ({
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+    }),
+    buildChatPayload: (model, messages, maxTokens) => {
+        // Cohere 使用不同的格式: message 是当前消息, chat_history 是历史
+        const lastMessage = messages[messages.length - 1];
+        const chatHistory = messages.slice(0, -1).map(m => ({
+            role: m.role === 'assistant' ? 'CHATBOT' : 'USER',
+            message: m.content,
+        }));
+        return {
+            model,
+            message: lastMessage.content,
+            chat_history: chatHistory,
+            max_tokens: maxTokens,
+        };
+    },
+    parseChatResponse: (data) => {
+        return data.text || '';
+    },
+};
+
+export const strategyRegistry: Record<string, ProviderStrategy> = {
+    openai: openaiStrategy,
+    anthropic: anthropicStrategy,
+    gemini: geminiStrategy,
+    cohere: cohereStrategy,
+};
+
+export function getStrategy(format: string): ProviderStrategy {
+    return strategyRegistry[format] || openaiStrategy;
+}
+
+// ============================================================================
+// 纯前端直连聊天函数
+// ============================================================================
+
+export interface DirectChatOptions {
+    apiFormat: string;
+    baseUrl: string;
+    apiKey: string;
+    model: string;
+    messages: Array<{ role: string; content: string }>;
+    maxTokens?: number;
+}
+
+export interface DirectChatResult {
+    success: boolean;
+    content?: string;
+    message?: string;
+    latencyMs?: number;
+}
+
+/**
+ * 纯前端直连 AI 厂商进行聊天
+ * 注意: 这会将 API Key 暴露在浏览器中，仅适用于 Demo/测试场景
+ */
+export async function sendDirectChat(options: DirectChatOptions): Promise<DirectChatResult> {
+    const { apiFormat, baseUrl, apiKey, model, messages, maxTokens = 2048 } = options;
+    const strategy = getStrategy(apiFormat);
+
+    const endpoint = strategy.getChatEndpoint(baseUrl, apiKey, model);
+    const headers = strategy.buildHeaders(apiKey);
+    const payload = strategy.buildChatPayload(model, messages, maxTokens);
+
+    const startTime = performance.now();
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify(payload),
+        });
+
+        const latencyMs = Math.round(performance.now() - startTime);
+
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            return {
+                success: false,
+                message: errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`,
+                latencyMs,
+            };
+        }
+
+        const data = await response.json();
+        const content = strategy.parseChatResponse(data);
+
+        return {
+            success: true,
+            content,
+            latencyMs,
+        };
+    } catch (e) {
+        return {
+            success: false,
+            message: e instanceof Error ? e.message : '网络错误',
+        };
+    }
+}
+
+// ============================================================================
+// 连接测试函数 (复用聊天接口)
+// ============================================================================
+
+export interface TestConnectionOptions {
+    apiFormat: string;
+    baseUrl: string;
+    apiKey: string;
+    model: string;
+}
+
+export interface TestConnectionResult {
+    success: boolean;
+    latencyMs?: number;
+    message?: string;
+}
+
+/**
+ * 测试 AI 厂商连接 (通过发送一个简单的聊天请求)
+ */
+export async function testDirectConnection(options: TestConnectionOptions): Promise<TestConnectionResult> {
+    const result = await sendDirectChat({
+        apiFormat: options.apiFormat,
+        baseUrl: options.baseUrl,
+        apiKey: options.apiKey,
+        model: options.model,
+        messages: [{ role: 'user', content: 'Hi' }],
+        maxTokens: 5, // 最小 token 数，节省成本
+    });
+
+    return {
+        success: result.success,
+        latencyMs: result.latencyMs,
+        message: result.success ? undefined : result.message,
+    };
+}

package/src/styles.css

@@ -0,0 +1,244 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+
+    /* Scoped Preflight / Reset for apmsu-root */
+    .apmsu-root {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        -moz-tab-size: 4;
+        tab-size: 4;
+        @apply mx-auto box-border;
+    }
+
+    /* 按钮 */
+    .apmsu-btn {
+        @apply inline-flex items-center justify-center rounded-md text-xs font-medium transition-all duration-200 h-10 px-4 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    .apmsu-btn-primary {
+        @apply bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90;
+    }
+
+    .apmsu-btn-success {
+        @apply bg-green-600 text-white hover:bg-green-700;
+    }
+
+    .apmsu-btn-ghost {
+        @apply bg-transparent hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300;
+    }
+
+    /* 输入框 */
+    .apmsu-input {
+        @apply flex h-11 w-full rounded-lg border bg-gray-100/30 dark:bg-zinc-800/50 px-4 py-2.5 text-sm shadow-sm placeholder:text-gray-400 dark:placeholder:text-zinc-500 focus:outline-none transition-colors;
+    }
+
+    .apmsu-input-default {
+        @apply border-gray-200 dark:border-zinc-700 focus:border-zinc-500 dark:focus:border-zinc-500 hover:border-gray-300 dark:hover:border-zinc-600;
+        border-width: 1px;
+        /* Ensure border width as preflight is disabled */
+    }
+
+    .apmsu-input-error {
+        @apply border-red-500 dark:border-red-500/50 focus-visible:ring-red-500 dark:bg-red-500/5;
+        border-width: 1px;
+    }
+
+    .apmsu-input-success {
+        @apply border-green-500 dark:border-green-500/50 focus-visible:ring-green-500 dark:bg-green-500/5;
+        border-width: 1px;
+    }
+
+    /* 下拉框 */
+    .apmsu-select-trigger {
+        @apply flex h-11 w-full min-w-0 items-center justify-between whitespace-nowrap rounded-lg border border-gray-200 dark:border-zinc-700 bg-gray-100/20 dark:bg-zinc-800/50 px-4 py-2.5 text-sm shadow-sm focus:outline-none focus:border-zinc-500 dark:focus:border-zinc-500 hover:border-gray-300 dark:hover:border-zinc-600 transition-colors;
+        border-width: 1px;
+    }
+
+    .apmsu-dropdown {
+        @apply absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-xl;
+        border-width: 1px;
+
+        /* 动画初始状态 */
+        max-height: 0;
+        opacity: 0;
+        transform-origin: top;
+        transform: translateY(-8px) scale(0.98);
+        pointer-events: none;
+        visibility: hidden;
+
+        /* 过渡效果 */
+        transition:
+            max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+            opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+            transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+            visibility 0s linear 0.4s;
+    }
+
+    .apmsu-dropdown-open {
+        max-height: 480px;
+        /* 足够大的高度以容纳内容 */
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
+        visibility: visible;
+        transition-delay: 0s;
+    }
+
+    .apmsu-dropdown-item {
+        @apply w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all cursor-pointer active:scale-[0.98];
+        background: transparent;
+        border: none;
+        text-align: left;
+    }
+
+    .apmsu-dropdown-item-active {
+        @apply bg-zinc-100 dark:bg-zinc-800;
+    }
+
+    /* 标签 */
+    .apmsu-label {
+        @apply text-xs font-medium leading-none block mb-2 uppercase tracking-wider text-gray-500 dark:text-zinc-500;
+    }
+
+    /* 文本 */
+    .apmsu-error-text {
+        @apply text-xs text-red-500 dark:text-red-400;
+    }
+
+    .apmsu-hint-text {
+        @apply text-xs text-gray-400 dark:text-zinc-500;
+    }
+
+    .apmsu-success-text {
+        @apply text-xs text-green-600 dark:text-green-400;
+    }
+
+    /* 卡片 */
+    .apmsu-card {
+        @apply bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-sm p-6 space-y-5;
+        border-width: 1px;
+    }
+
+    /* 图标 */
+    .apmsu-icon-spin {
+        @apply w-4 h-4 animate-spin text-gray-400;
+    }
+
+    .apmsu-icon-success {
+        @apply w-4 h-4 text-green-500;
+    }
+
+    .apmsu-icon-error {
+        @apply w-4 h-4 text-red-500;
+    }
+
+    /* Provider 图标 - dark mode 反转 */
+    .apmsu-provider-icon {
+        @apply w-4 h-4 flex-shrink-0;
+    }
+
+    /* 下拉箭头 */
+    .apmsu-chevron {
+        @apply w-4 h-4 opacity-50 flex-shrink-0 transition-transform duration-200;
+    }
+
+    /* Placeholder 文本 */
+    .apmsu-placeholder {
+        @apply text-gray-400 dark:text-zinc-500;
+    }
+
+    /* 表单字段容器 */
+    .apmsu-field {
+        @apply space-y-2;
+    }
+
+    /* 分割线 */
+    .apmsu-divider {
+        @apply border-b border-gray-100 dark:border-zinc-800;
+    }
+}
+
+/* Dark mode 下 provider 图标反转颜色 */
+.dark .apmsu-provider-icon {
+    filter: invert(1) hue-rotate(180deg);
+}
+
+/* 自定义滚动条 */
+.apmsu-root ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.apmsu-root ::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.apmsu-root ::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.5);
+    border-radius: 4px;
+}
+
+.apmsu-root ::-webkit-scrollbar-thumb:hover {
+    background: rgba(156, 163, 175, 0.7);
+}
+
+.apmsu-root.dark ::-webkit-scrollbar-thumb {
+    background: rgba(82, 82, 91, 0.6);
+}
+
+.apmsu-root.dark ::-webkit-scrollbar-thumb:hover {
+    background: rgba(82, 82, 91, 0.8);
+}
+
+/* 下拉框滚动条 */
+.apmsu-dropdown::-webkit-scrollbar,
+.apmsu-dropdown *::-webkit-scrollbar {
+    width: 6px;
+}
+
+.apmsu-dropdown::-webkit-scrollbar-thumb,
+.apmsu-dropdown *::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.4);
+    border-radius: 3px;
+}
+
+.apmsu-dropdown::-webkit-scrollbar-track,
+.apmsu-dropdown *::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.dark .apmsu-dropdown::-webkit-scrollbar-thumb,
+.dark .apmsu-dropdown *::-webkit-scrollbar-thumb {
+    background: rgba(82, 82, 91, 0.5);
+}
+
+@keyframes apmsu-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.apmsu-fade-in {
+    animation: apmsu-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Vue Transition Classes */
+.apmsu-fade-enter-active {
+    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.apmsu-fade-enter-from {
+    opacity: 0;
+}
+
+.apmsu-fade-leave-active {
+    display: none;
+}