diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx index bf995a3d..4bfc038c 100644 --- a/app/components/chat/BaseChat.tsx +++ b/app/components/chat/BaseChat.tsx @@ -3,13 +3,13 @@ * Preventing TS checks with files presented in the video for a better presentation. */ import type { Message } from 'ai'; -import React, { type RefCallback, useCallback, useEffect, useState } from 'react'; +import React, { type RefCallback, useEffect, useState } from 'react'; import { ClientOnly } from 'remix-utils/client-only'; import { Menu } from '~/components/sidebar/Menu.client'; import { IconButton } from '~/components/ui/IconButton'; import { Workbench } from '~/components/workbench/Workbench.client'; import { classNames } from '~/utils/classNames'; -import { MODEL_LIST, PROVIDER_LIST, initializeModelList } from '~/utils/constants'; +import { PROVIDER_LIST } from '~/utils/constants'; import { Messages } from './Messages.client'; import { SendButton } from './SendButton.client'; import { APIKeyManager, getApiKeysFromCookies } from './APIKeyManager'; @@ -25,13 +25,13 @@ import GitCloneButton from './GitCloneButton'; import FilePreview from './FilePreview'; import { ModelSelector } from '~/components/chat/ModelSelector'; import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition'; -import type { IProviderSetting, ProviderInfo } from '~/types/model'; +import type { ProviderInfo } from '~/types/model'; import { ScreenshotStateManager } from './ScreenshotStateManager'; import { toast } from 'react-toastify'; import StarterTemplates from './StarterTemplates'; import type { ActionAlert } from '~/types/actions'; import ChatAlert from './ChatAlert'; -import { LLMManager } from '~/lib/modules/llm/manager'; +import type { ModelInfo } from '~/lib/modules/llm/types'; const TEXTAREA_MIN_HEIGHT = 76; @@ -102,35 +102,13 @@ export const BaseChat = React.forwardRef( ) => { const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; const [apiKeys, setApiKeys] = useState>(getApiKeysFromCookies()); - const [modelList, setModelList] = useState(MODEL_LIST); + const [modelList, setModelList] = useState([]); const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false); const [isListening, setIsListening] = useState(false); const [recognition, setRecognition] = useState(null); const [transcript, setTranscript] = useState(''); const [isModelLoading, setIsModelLoading] = useState('all'); - const getProviderSettings = useCallback(() => { - let providerSettings: Record | undefined = undefined; - - try { - const savedProviderSettings = Cookies.get('providers'); - - if (savedProviderSettings) { - const parsedProviderSettings = JSON.parse(savedProviderSettings); - - if (typeof parsedProviderSettings === 'object' && parsedProviderSettings !== null) { - providerSettings = parsedProviderSettings; - } - } - } catch (error) { - console.error('Error loading Provider Settings from cookies:', error); - - // Clear invalid cookie data - Cookies.remove('providers'); - } - - return providerSettings; - }, []); useEffect(() => { console.log(transcript); }, [transcript]); @@ -169,7 +147,6 @@ export const BaseChat = React.forwardRef( useEffect(() => { if (typeof window !== 'undefined') { - const providerSettings = getProviderSettings(); let parsedApiKeys: Record | undefined = {}; try { @@ -177,17 +154,18 @@ export const BaseChat = React.forwardRef( setApiKeys(parsedApiKeys); } catch (error) { console.error('Error loading API keys from cookies:', error); - - // Clear invalid cookie data Cookies.remove('apiKeys'); } + setIsModelLoading('all'); - initializeModelList({ apiKeys: parsedApiKeys, providerSettings }) - .then((modelList) => { - setModelList(modelList); + fetch('/api/models') + .then((response) => response.json()) + .then((data) => { + const typedData = data as { modelList: ModelInfo[] }; + setModelList(typedData.modelList); }) .catch((error) => { - console.error('Error initializing model list:', error); + console.error('Error fetching model list:', error); }) .finally(() => { setIsModelLoading(undefined); @@ -200,29 +178,24 @@ export const BaseChat = React.forwardRef( setApiKeys(newApiKeys); Cookies.set('apiKeys', JSON.stringify(newApiKeys)); - const provider = LLMManager.getInstance(import.meta.env || process.env || {}).getProvider(providerName); + setIsModelLoading(providerName); - if (provider && provider.getDynamicModels) { - setIsModelLoading(providerName); + let providerModels: ModelInfo[] = []; - try { - const providerSettings = getProviderSettings(); - const staticModels = provider.staticModels; - const dynamicModels = await provider.getDynamicModels( - newApiKeys, - providerSettings, - import.meta.env || process.env || {}, - ); - - setModelList((preModels) => { - const filteredOutPreModels = preModels.filter((x) => x.provider !== providerName); - return [...filteredOutPreModels, ...staticModels, ...dynamicModels]; - }); - } catch (error) { - console.error('Error loading dynamic models:', error); - } - setIsModelLoading(undefined); + try { + const response = await fetch(`/api/models/${encodeURIComponent(providerName)}`); + const data = await response.json(); + providerModels = (data as { modelList: ModelInfo[] }).modelList; + } catch (error) { + console.error('Error loading dynamic models for:', providerName, error); } + + // Only update models for the specific provider + setModelList((prevModels) => { + const otherModels = prevModels.filter((model) => model.provider !== providerName); + return [...otherModels, ...providerModels]; + }); + setIsModelLoading(undefined); }; const startListening = () => { diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx index b2d97e31..68cc73e2 100644 --- a/app/components/workbench/Preview.tsx +++ b/app/components/workbench/Preview.tsx @@ -1,5 +1,5 @@ -import { useStore } from '@nanostores/react'; import { memo, useCallback, useEffect, useRef, useState } from 'react'; +import { useStore } from '@nanostores/react'; import { IconButton } from '~/components/ui/IconButton'; import { workbenchStore } from '~/lib/stores/workbench'; import { PortDropdown } from './PortDropdown'; @@ -7,6 +7,19 @@ import { ScreenshotSelector } from './ScreenshotSelector'; type ResizeSide = 'left' | 'right' | null; +interface WindowSize { + name: string; + width: number; + height: number; +} + +const WINDOW_SIZES: WindowSize[] = [ + { name: 'Mobile (375x667)', width: 375, height: 667 }, + { name: 'Tablet (768x1024)', width: 768, height: 1024 }, + { name: 'Laptop (1366x768)', width: 1366, height: 768 }, + { name: 'Desktop (1920x1080)', width: 1920, height: 1080 }, +]; + export const Preview = memo(() => { const iframeRef = useRef(null); const containerRef = useRef(null); @@ -15,6 +28,7 @@ export const Preview = memo(() => { const [activePreviewIndex, setActivePreviewIndex] = useState(0); const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); + const [isPreviewOnly, setIsPreviewOnly] = useState(false); const hasSelectedPreview = useRef(false); const previews = useStore(workbenchStore.previews); const activePreview = previews[activePreviewIndex]; @@ -27,7 +41,7 @@ export const Preview = memo(() => { const [isDeviceModeOn, setIsDeviceModeOn] = useState(false); // Use percentage for width - const [widthPercent, setWidthPercent] = useState(37.5); // 375px assuming 1000px window width initially + const [widthPercent, setWidthPercent] = useState(37.5); const resizingState = useRef({ isResizing: false, @@ -37,8 +51,10 @@ export const Preview = memo(() => { windowWidth: window.innerWidth, }); - // Define the scaling factor - const SCALING_FACTOR = 2; // Adjust this value to increase/decrease sensitivity + const SCALING_FACTOR = 2; + + const [isWindowSizeDropdownOpen, setIsWindowSizeDropdownOpen] = useState(false); + const [selectedWindowSize, setSelectedWindowSize] = useState(WINDOW_SIZES[0]); useEffect(() => { if (!activePreview) { @@ -79,7 +95,6 @@ export const Preview = memo(() => { [], ); - // When previews change, display the lowest port if user hasn't selected a preview useEffect(() => { if (previews.length > 1 && !hasSelectedPreview.current) { const minPortIndex = previews.reduce(findMinPortIndex, 0); @@ -122,7 +137,6 @@ export const Preview = memo(() => { return; } - // Prevent text selection document.body.style.userSelect = 'none'; resizingState.current.isResizing = true; @@ -134,7 +148,7 @@ export const Preview = memo(() => { document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); - e.preventDefault(); // Prevent any text selection on mousedown + e.preventDefault(); }; const onMouseMove = (e: MouseEvent) => { @@ -145,7 +159,6 @@ export const Preview = memo(() => { const dx = e.clientX - resizingState.current.startX; const windowWidth = resizingState.current.windowWidth; - // Apply scaling factor to increase sensitivity const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR; let newWidthPercent = resizingState.current.startWidthPercent; @@ -156,7 +169,6 @@ export const Preview = memo(() => { newWidthPercent = resizingState.current.startWidthPercent - dxPercent; } - // Clamp the width between 10% and 90% newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90)); setWidthPercent(newWidthPercent); @@ -168,17 +180,12 @@ export const Preview = memo(() => { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); - // Restore text selection document.body.style.userSelect = ''; }; - // Handle window resize to ensure widthPercent remains valid useEffect(() => { const handleWindowResize = () => { - /* - * Optional: Adjust widthPercent if necessary - * For now, since widthPercent is relative, no action is needed - */ + // Optional: Adjust widthPercent if necessary }; window.addEventListener('resize', handleWindowResize); @@ -188,7 +195,6 @@ export const Preview = memo(() => { }; }, []); - // A small helper component for the handle's "grip" icon const GripIcon = () => (
{
); + const openInNewWindow = (size: WindowSize) => { + if (activePreview?.baseUrl) { + const match = activePreview.baseUrl.match(/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/); + + if (match) { + const previewId = match[1]; + const previewUrl = `/webcontainer/preview/${previewId}`; + const newWindow = window.open( + previewUrl, + '_blank', + `noopener,noreferrer,width=${size.width},height=${size.height},menubar=no,toolbar=no,location=no,status=no`, + ); + + if (newWindow) { + newWindow.focus(); + } + } else { + console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl); + } + } + }; + return ( -
+
{isPortDropdownOpen && (
setIsPortDropdownOpen(false)} /> )} @@ -225,10 +256,7 @@ export const Preview = memo(() => { onClick={() => setIsSelectionMode(!isSelectionMode)} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} /> -
+
{ /> )} - {/* Device mode toggle button */} - {/* Fullscreen toggle button */} + setIsPreviewOnly(!isPreviewOnly)} + title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'} + /> + + +
+ openInNewWindow(selectedWindowSize)} + title={`Open Preview in ${selectedWindowSize.name} Window`} + /> + setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)} + className="ml-1" + title="Select Window Size" + /> + + {isWindowSizeDropdownOpen && ( + <> +
setIsWindowSizeDropdownOpen(false)} /> +
+ {WINDOW_SIZES.map((size) => ( + + ))} +
+ + )} +
{ title="preview" className="border-none w-full h-full bg-white" src={iframeUrl} - allowFullScreen + sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin" + allow="cross-origin-isolated" /> { {isDeviceModeOn && ( <> - {/* Left handle */}
startResizing(e, 'left')} style={{ @@ -333,7 +400,6 @@ export const Preview = memo(() => {
- {/* Right handle */}
startResizing(e, 'right')} style={{ diff --git a/app/lib/api/cookies.ts b/app/lib/api/cookies.ts new file mode 100644 index 00000000..fa6862ea --- /dev/null +++ b/app/lib/api/cookies.ts @@ -0,0 +1,33 @@ +export function parseCookies(cookieHeader: string | null) { + const cookies: Record = {}; + + if (!cookieHeader) { + return cookies; + } + + // Split the cookie string by semicolons and spaces + const items = cookieHeader.split(';').map((cookie) => cookie.trim()); + + items.forEach((item) => { + const [name, ...rest] = item.split('='); + + if (name && rest.length > 0) { + // Decode the name and value, and join value parts in case it contains '=' + const decodedName = decodeURIComponent(name.trim()); + const decodedValue = decodeURIComponent(rest.join('=').trim()); + cookies[decodedName] = decodedValue; + } + }); + + return cookies; +} + +export function getApiKeysFromCookie(cookieHeader: string | null): Record { + const cookies = parseCookies(cookieHeader); + return cookies.apiKeys ? JSON.parse(cookies.apiKeys) : {}; +} + +export function getProviderSettingsFromCookie(cookieHeader: string | null): Record { + const cookies = parseCookies(cookieHeader); + return cookies.providers ? JSON.parse(cookies.providers) : {}; +} diff --git a/app/lib/modules/llm/manager.ts b/app/lib/modules/llm/manager.ts index 5b134218..88ae28c9 100644 --- a/app/lib/modules/llm/manager.ts +++ b/app/lib/modules/llm/manager.ts @@ -83,7 +83,7 @@ export class LLMManager { let enabledProviders = Array.from(this._providers.values()).map((p) => p.name); - if (providerSettings) { + if (providerSettings && Object.keys(providerSettings).length > 0) { enabledProviders = enabledProviders.filter((p) => providerSettings[p].enabled); } diff --git a/app/lib/modules/llm/providers/github.ts b/app/lib/modules/llm/providers/github.ts new file mode 100644 index 00000000..f346cdd1 --- /dev/null +++ b/app/lib/modules/llm/providers/github.ts @@ -0,0 +1,52 @@ +import { BaseProvider } from '~/lib/modules/llm/base-provider'; +import type { ModelInfo } from '~/lib/modules/llm/types'; +import type { IProviderSetting } from '~/types/model'; +import type { LanguageModelV1 } from 'ai'; +import { createOpenAI } from '@ai-sdk/openai'; + +export default class GithubProvider extends BaseProvider { + name = 'Github'; + getApiKeyLink = 'https://github.com/settings/personal-access-tokens'; + + config = { + apiTokenKey: 'GITHUB_API_KEY', + }; +// find more in https://github.com/marketplace?type=models + staticModels: ModelInfo[] = [ + { name: 'gpt-4o', label: 'GPT-4o', provider: 'Github', maxTokenAllowed: 8000 }, + { name: 'o1', label: 'o1-preview', provider: 'Github', maxTokenAllowed: 100000 }, + { name: 'o1-mini', label: 'o1-mini', provider: 'Github', maxTokenAllowed: 8000 }, + { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'Github', maxTokenAllowed: 8000 }, + { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'Github', maxTokenAllowed: 8000 }, + { name: 'gpt-4', label: 'GPT-4', provider: 'Github', maxTokenAllowed: 8000 }, + { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'Github', maxTokenAllowed: 8000 }, + ]; + + getModelInstance(options: { + model: string; + serverEnv: Env; + apiKeys?: Record; + providerSettings?: Record; + }): LanguageModelV1 { + const { model, serverEnv, apiKeys, providerSettings } = options; + + const { apiKey } = this.getProviderBaseUrlAndKey({ + apiKeys, + providerSettings: providerSettings?.[this.name], + serverEnv: serverEnv as any, + defaultBaseUrlKey: '', + defaultApiTokenKey: 'GITHUB_API_KEY', + }); + + if (!apiKey) { + throw new Error(`Missing API key for ${this.name} provider`); + } + + const openai = createOpenAI({ + baseURL: 'https://models.inference.ai.azure.com', + apiKey, + }); + + return openai(model); + } +} diff --git a/app/lib/modules/llm/registry.ts b/app/lib/modules/llm/registry.ts index dbbe27ea..6edba6d8 100644 --- a/app/lib/modules/llm/registry.ts +++ b/app/lib/modules/llm/registry.ts @@ -15,6 +15,7 @@ import TogetherProvider from './providers/together'; import XAIProvider from './providers/xai'; import HyperbolicProvider from './providers/hyperbolic'; import AmazonBedrockProvider from './providers/amazon-bedrock'; +import GithubProvider from './providers/github'; export { AnthropicProvider, @@ -34,4 +35,5 @@ export { TogetherProvider, LMStudioProvider, AmazonBedrockProvider, + GithubProvider, }; diff --git a/app/lib/stores/previews.ts b/app/lib/stores/previews.ts index 79480d1c..28954844 100644 --- a/app/lib/stores/previews.ts +++ b/app/lib/stores/previews.ts @@ -1,27 +1,192 @@ import type { WebContainer } from '@webcontainer/api'; import { atom } from 'nanostores'; +// Extend Window interface to include our custom property +declare global { + interface Window { + _tabId?: string; + } +} + export interface PreviewInfo { port: number; ready: boolean; baseUrl: string; } +// Create a broadcast channel for preview updates +const PREVIEW_CHANNEL = 'preview-updates'; + export class PreviewsStore { #availablePreviews = new Map(); #webcontainer: Promise; + #broadcastChannel: BroadcastChannel; + #lastUpdate = new Map(); + #watchedFiles = new Set(); + #refreshTimeouts = new Map(); + #REFRESH_DELAY = 300; + #storageChannel: BroadcastChannel; previews = atom([]); constructor(webcontainerPromise: Promise) { this.#webcontainer = webcontainerPromise; + this.#broadcastChannel = new BroadcastChannel(PREVIEW_CHANNEL); + this.#storageChannel = new BroadcastChannel('storage-sync-channel'); + + // Listen for preview updates from other tabs + this.#broadcastChannel.onmessage = (event) => { + const { type, previewId } = event.data; + + if (type === 'file-change') { + const timestamp = event.data.timestamp; + const lastUpdate = this.#lastUpdate.get(previewId) || 0; + + if (timestamp > lastUpdate) { + this.#lastUpdate.set(previewId, timestamp); + this.refreshPreview(previewId); + } + } + }; + + // Listen for storage sync messages + this.#storageChannel.onmessage = (event) => { + const { storage, source } = event.data; + + if (storage && source !== this._getTabId()) { + this._syncStorage(storage); + } + }; + + // Override localStorage setItem to catch all changes + if (typeof window !== 'undefined') { + const originalSetItem = localStorage.setItem; + + localStorage.setItem = (...args) => { + originalSetItem.apply(localStorage, args); + this._broadcastStorageSync(); + }; + } this.#init(); } + // Generate a unique ID for this tab + private _getTabId(): string { + if (typeof window !== 'undefined') { + if (!window._tabId) { + window._tabId = Math.random().toString(36).substring(2, 15); + } + + return window._tabId; + } + + return ''; + } + + // Sync storage data between tabs + private _syncStorage(storage: Record) { + if (typeof window !== 'undefined') { + Object.entries(storage).forEach(([key, value]) => { + try { + const originalSetItem = Object.getPrototypeOf(localStorage).setItem; + originalSetItem.call(localStorage, key, value); + } catch (error) { + console.error('[Preview] Error syncing storage:', error); + } + }); + + // Force a refresh after syncing storage + const previews = this.previews.get(); + previews.forEach((preview) => { + const previewId = this.getPreviewId(preview.baseUrl); + + if (previewId) { + this.refreshPreview(previewId); + } + }); + + // Reload the page content + if (typeof window !== 'undefined' && window.location) { + const iframe = document.querySelector('iframe'); + + if (iframe) { + iframe.src = iframe.src; + } + } + } + } + + // Broadcast storage state to other tabs + private _broadcastStorageSync() { + if (typeof window !== 'undefined') { + const storage: Record = {}; + + for (let i = 0; i < localStorage.length; i++) { + const key = localStorage.key(i); + + if (key) { + storage[key] = localStorage.getItem(key) || ''; + } + } + + this.#storageChannel.postMessage({ + type: 'storage-sync', + storage, + source: this._getTabId(), + timestamp: Date.now(), + }); + } + } + async #init() { const webcontainer = await this.#webcontainer; + // Listen for server ready events + webcontainer.on('server-ready', (port, url) => { + console.log('[Preview] Server ready on port:', port, url); + this.broadcastUpdate(url); + + // Initial storage sync when preview is ready + this._broadcastStorageSync(); + }); + + try { + // Watch for file changes + const watcher = await webcontainer.fs.watch('**/*', { persistent: true }); + + // Use the native watch events + (watcher as any).addEventListener('change', async () => { + const previews = this.previews.get(); + + for (const preview of previews) { + const previewId = this.getPreviewId(preview.baseUrl); + + if (previewId) { + this.broadcastFileChange(previewId); + } + } + }); + + // Watch for DOM changes that might affect storage + if (typeof window !== 'undefined') { + const observer = new MutationObserver((_mutations) => { + // Broadcast storage changes when DOM changes + this._broadcastStorageSync(); + }); + + observer.observe(document.body, { + childList: true, + subtree: true, + characterData: true, + attributes: true, + }); + } + } catch (error) { + console.error('[Preview] Error setting up watchers:', error); + } + + // Listen for port events webcontainer.on('port', (port, type, url) => { let previewInfo = this.#availablePreviews.get(port); @@ -44,6 +209,101 @@ export class PreviewsStore { previewInfo.baseUrl = url; this.previews.set([...previews]); + + if (type === 'open') { + this.broadcastUpdate(url); + } }); } + + // Helper to extract preview ID from URL + getPreviewId(url: string): string | null { + const match = url.match(/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/); + return match ? match[1] : null; + } + + // Broadcast state change to all tabs + broadcastStateChange(previewId: string) { + const timestamp = Date.now(); + this.#lastUpdate.set(previewId, timestamp); + + this.#broadcastChannel.postMessage({ + type: 'state-change', + previewId, + timestamp, + }); + } + + // Broadcast file change to all tabs + broadcastFileChange(previewId: string) { + const timestamp = Date.now(); + this.#lastUpdate.set(previewId, timestamp); + + this.#broadcastChannel.postMessage({ + type: 'file-change', + previewId, + timestamp, + }); + } + + // Broadcast update to all tabs + broadcastUpdate(url: string) { + const previewId = this.getPreviewId(url); + + if (previewId) { + const timestamp = Date.now(); + this.#lastUpdate.set(previewId, timestamp); + + this.#broadcastChannel.postMessage({ + type: 'file-change', + previewId, + timestamp, + }); + } + } + + // Method to refresh a specific preview + refreshPreview(previewId: string) { + // Clear any pending refresh for this preview + const existingTimeout = this.#refreshTimeouts.get(previewId); + + if (existingTimeout) { + clearTimeout(existingTimeout); + } + + // Set a new timeout for this refresh + const timeout = setTimeout(() => { + const previews = this.previews.get(); + const preview = previews.find((p) => this.getPreviewId(p.baseUrl) === previewId); + + if (preview) { + preview.ready = false; + this.previews.set([...previews]); + + requestAnimationFrame(() => { + preview.ready = true; + this.previews.set([...previews]); + }); + } + + this.#refreshTimeouts.delete(previewId); + }, this.#REFRESH_DELAY); + + this.#refreshTimeouts.set(previewId, timeout); + } +} + +// Create a singleton instance +let previewsStore: PreviewsStore | null = null; + +export function usePreviewStore() { + if (!previewsStore) { + /* + * Initialize with a Promise that resolves to WebContainer + * This should match how you're initializing WebContainer elsewhere + */ + previewsStore = new PreviewsStore(Promise.resolve({} as WebContainer)); + } + + return previewsStore; } diff --git a/app/routes/api.enhancer.ts b/app/routes/api.enhancer.ts index 5d16ac25..5f6db1f0 100644 --- a/app/routes/api.enhancer.ts +++ b/app/routes/api.enhancer.ts @@ -1,34 +1,13 @@ import { type ActionFunctionArgs } from '@remix-run/cloudflare'; - -//import { StreamingTextResponse, parseStreamPart } from 'ai'; import { streamText } from '~/lib/.server/llm/stream-text'; import { stripIndents } from '~/utils/stripIndent'; -import type { IProviderSetting, ProviderInfo } from '~/types/model'; +import type { ProviderInfo } from '~/types/model'; +import { getApiKeysFromCookie, getProviderSettingsFromCookie } from '~/lib/api/cookies'; export async function action(args: ActionFunctionArgs) { return enhancerAction(args); } -function parseCookies(cookieHeader: string) { - const cookies: any = {}; - - // Split the cookie string by semicolons and spaces - const items = cookieHeader.split(';').map((cookie) => cookie.trim()); - - items.forEach((item) => { - const [name, ...rest] = item.split('='); - - if (name && rest) { - // Decode the name and value, and join value parts in case it contains '=' - const decodedName = decodeURIComponent(name.trim()); - const decodedValue = decodeURIComponent(rest.join('=').trim()); - cookies[decodedName] = decodedValue; - } - }); - - return cookies; -} - async function enhancerAction({ context, request }: ActionFunctionArgs) { const { message, model, provider } = await request.json<{ message: string; @@ -55,12 +34,8 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) { } const cookieHeader = request.headers.get('Cookie'); - - // Parse the cookie's value (returns an object or null if no cookie exists) - const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}'); - const providerSettings: Record = JSON.parse( - parseCookies(cookieHeader || '').providers || '{}', - ); + const apiKeys = getApiKeysFromCookie(cookieHeader); + const providerSettings = getProviderSettingsFromCookie(cookieHeader); try { const result = await streamText({ diff --git a/app/routes/api.llmcall.ts b/app/routes/api.llmcall.ts index 0fc3c85e..a4a77551 100644 --- a/app/routes/api.llmcall.ts +++ b/app/routes/api.llmcall.ts @@ -1,34 +1,24 @@ import { type ActionFunctionArgs } from '@remix-run/cloudflare'; - -//import { StreamingTextResponse, parseStreamPart } from 'ai'; import { streamText } from '~/lib/.server/llm/stream-text'; import type { IProviderSetting, ProviderInfo } from '~/types/model'; import { generateText } from 'ai'; -import { getModelList, PROVIDER_LIST } from '~/utils/constants'; +import { PROVIDER_LIST } from '~/utils/constants'; import { MAX_TOKENS } from '~/lib/.server/llm/constants'; +import { LLMManager } from '~/lib/modules/llm/manager'; +import type { ModelInfo } from '~/lib/modules/llm/types'; +import { getApiKeysFromCookie, getProviderSettingsFromCookie } from '~/lib/api/cookies'; export async function action(args: ActionFunctionArgs) { return llmCallAction(args); } -function parseCookies(cookieHeader: string) { - const cookies: any = {}; - - // Split the cookie string by semicolons and spaces - const items = cookieHeader.split(';').map((cookie) => cookie.trim()); - - items.forEach((item) => { - const [name, ...rest] = item.split('='); - - if (name && rest) { - // Decode the name and value, and join value parts in case it contains '=' - const decodedName = decodeURIComponent(name.trim()); - const decodedValue = decodeURIComponent(rest.join('=').trim()); - cookies[decodedName] = decodedValue; - } - }); - - return cookies; +async function getModelList(options: { + apiKeys?: Record; + providerSettings?: Record; + serverEnv?: Record; +}) { + const llmManager = LLMManager.getInstance(import.meta.env); + return llmManager.updateModelList(options); } async function llmCallAction({ context, request }: ActionFunctionArgs) { @@ -58,12 +48,8 @@ async function llmCallAction({ context, request }: ActionFunctionArgs) { } const cookieHeader = request.headers.get('Cookie'); - - // Parse the cookie's value (returns an object or null if no cookie exists) - const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}'); - const providerSettings: Record = JSON.parse( - parseCookies(cookieHeader || '').providers || '{}', - ); + const apiKeys = getApiKeysFromCookie(cookieHeader); + const providerSettings = getProviderSettingsFromCookie(cookieHeader); if (streamOutput) { try { @@ -105,8 +91,8 @@ async function llmCallAction({ context, request }: ActionFunctionArgs) { } } else { try { - const MODEL_LIST = await getModelList({ apiKeys, providerSettings, serverEnv: context.cloudflare.env as any }); - const modelDetails = MODEL_LIST.find((m) => m.name === model); + const models = await getModelList({ apiKeys, providerSettings, serverEnv: context.cloudflare.env as any }); + const modelDetails = models.find((m: ModelInfo) => m.name === model); if (!modelDetails) { throw new Error('Model not found'); diff --git a/app/routes/api.models.$provider.ts b/app/routes/api.models.$provider.ts new file mode 100644 index 00000000..d6081762 --- /dev/null +++ b/app/routes/api.models.$provider.ts @@ -0,0 +1,2 @@ +import { loader } from './api.models'; +export { loader }; diff --git a/app/routes/api.models.ts b/app/routes/api.models.ts index ace4ef00..13588f90 100644 --- a/app/routes/api.models.ts +++ b/app/routes/api.models.ts @@ -1,6 +1,84 @@ import { json } from '@remix-run/cloudflare'; -import { MODEL_LIST } from '~/utils/constants'; +import { LLMManager } from '~/lib/modules/llm/manager'; +import type { ModelInfo } from '~/lib/modules/llm/types'; +import type { ProviderInfo } from '~/types/model'; +import { getApiKeysFromCookie, getProviderSettingsFromCookie } from '~/lib/api/cookies'; -export async function loader() { - return json(MODEL_LIST); +interface ModelsResponse { + modelList: ModelInfo[]; + providers: ProviderInfo[]; + defaultProvider: ProviderInfo; +} + +let cachedProviders: ProviderInfo[] | null = null; +let cachedDefaultProvider: ProviderInfo | null = null; + +function getProviderInfo(llmManager: LLMManager) { + if (!cachedProviders) { + cachedProviders = llmManager.getAllProviders().map((provider) => ({ + name: provider.name, + staticModels: provider.staticModels, + getApiKeyLink: provider.getApiKeyLink, + labelForGetApiKey: provider.labelForGetApiKey, + icon: provider.icon, + })); + } + + if (!cachedDefaultProvider) { + const defaultProvider = llmManager.getDefaultProvider(); + cachedDefaultProvider = { + name: defaultProvider.name, + staticModels: defaultProvider.staticModels, + getApiKeyLink: defaultProvider.getApiKeyLink, + labelForGetApiKey: defaultProvider.labelForGetApiKey, + icon: defaultProvider.icon, + }; + } + + return { providers: cachedProviders, defaultProvider: cachedDefaultProvider }; +} + +export async function loader({ + request, + params, +}: { + request: Request; + params: { provider?: string }; +}): Promise { + const llmManager = LLMManager.getInstance(import.meta.env); + + // Get client side maintained API keys and provider settings from cookies + const cookieHeader = request.headers.get('Cookie'); + const apiKeys = getApiKeysFromCookie(cookieHeader); + const providerSettings = getProviderSettingsFromCookie(cookieHeader); + + const { providers, defaultProvider } = getProviderInfo(llmManager); + + let modelList: ModelInfo[] = []; + + if (params.provider) { + // Only update models for the specific provider + const provider = llmManager.getProvider(params.provider); + + if (provider) { + const staticModels = provider.staticModels; + const dynamicModels = provider.getDynamicModels + ? await provider.getDynamicModels(apiKeys, providerSettings, import.meta.env) + : []; + modelList = [...staticModels, ...dynamicModels]; + } + } else { + // Update all models + modelList = await llmManager.updateModelList({ + apiKeys, + providerSettings, + serverEnv: import.meta.env, + }); + } + + return json({ + modelList, + providers, + defaultProvider, + }); } diff --git a/app/routes/webcontainer.preview.$id.tsx b/app/routes/webcontainer.preview.$id.tsx new file mode 100644 index 00000000..a52ccf92 --- /dev/null +++ b/app/routes/webcontainer.preview.$id.tsx @@ -0,0 +1,92 @@ +import { json, type LoaderFunctionArgs } from '@remix-run/cloudflare'; +import { useLoaderData } from '@remix-run/react'; +import { useCallback, useEffect, useRef, useState } from 'react'; + +const PREVIEW_CHANNEL = 'preview-updates'; + +export async function loader({ params }: LoaderFunctionArgs) { + const previewId = params.id; + + if (!previewId) { + throw new Response('Preview ID is required', { status: 400 }); + } + + return json({ previewId }); +} + +export default function WebContainerPreview() { + const { previewId } = useLoaderData(); + const iframeRef = useRef(null); + const broadcastChannelRef = useRef(); + const [previewUrl, setPreviewUrl] = useState(''); + + // Handle preview refresh + const handleRefresh = useCallback(() => { + if (iframeRef.current && previewUrl) { + // Force a clean reload + iframeRef.current.src = ''; + requestAnimationFrame(() => { + if (iframeRef.current) { + iframeRef.current.src = previewUrl; + } + }); + } + }, [previewUrl]); + + // Notify other tabs that this preview is ready + const notifyPreviewReady = useCallback(() => { + if (broadcastChannelRef.current && previewUrl) { + broadcastChannelRef.current.postMessage({ + type: 'preview-ready', + previewId, + url: previewUrl, + timestamp: Date.now(), + }); + } + }, [previewId, previewUrl]); + + useEffect(() => { + // Initialize broadcast channel + broadcastChannelRef.current = new BroadcastChannel(PREVIEW_CHANNEL); + + // Listen for preview updates + broadcastChannelRef.current.onmessage = (event) => { + if (event.data.previewId === previewId) { + if (event.data.type === 'refresh-preview' || event.data.type === 'file-change') { + handleRefresh(); + } + } + }; + + // Construct the WebContainer preview URL + const url = `https://${previewId}.local-credentialless.webcontainer-api.io`; + setPreviewUrl(url); + + // Set the iframe src + if (iframeRef.current) { + iframeRef.current.src = url; + } + + // Notify other tabs that this preview is ready + notifyPreviewReady(); + + // Cleanup + return () => { + broadcastChannelRef.current?.close(); + }; + }, [previewId, handleRefresh, notifyPreviewReady]); + + return ( +
+