UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-05-08 14:14:41 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'stackblitz-labs:main' into FEAT_BoltDYI_NEW_SETTINGS_UI

Browse Source
This commit is contained in:
Stijnus 2025-01-18 13:49:03 +01:00 committed by GitHub
commit 9230ef3b55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 663 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
app/components/chat/BaseChat.tsx
View File

@ -3,13 +3,13 @@
* Preventing TS checks with files presented in the video for a better presentation. * Preventing TS checks with files presented in the video for a better presentation.
*/ */
import type { Message } from 'ai'; 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 { ClientOnly } from 'remix-utils/client-only';
import { Menu } from '~/components/sidebar/Menu.client'; import { Menu } from '~/components/sidebar/Menu.client';
import { IconButton } from '~/components/ui/IconButton'; import { IconButton } from '~/components/ui/IconButton';
import { Workbench } from '~/components/workbench/Workbench.client'; import { Workbench } from '~/components/workbench/Workbench.client';
import { classNames } from '~/utils/classNames'; 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 { Messages } from './Messages.client';
import { SendButton } from './SendButton.client'; import { SendButton } from './SendButton.client';
import { APIKeyManager, getApiKeysFromCookies } from './APIKeyManager'; import { APIKeyManager, getApiKeysFromCookies } from './APIKeyManager';
@ -25,13 +25,13 @@ import GitCloneButton from './GitCloneButton';
import FilePreview from './FilePreview'; import FilePreview from './FilePreview';
import { ModelSelector } from '~/components/chat/ModelSelector'; import { ModelSelector } from '~/components/chat/ModelSelector';
import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition'; import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
import type { IProviderSetting, ProviderInfo } from '~/types/model'; import type { ProviderInfo } from '~/types/model';
import { ScreenshotStateManager } from './ScreenshotStateManager'; import { ScreenshotStateManager } from './ScreenshotStateManager';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import StarterTemplates from './StarterTemplates'; import StarterTemplates from './StarterTemplates';
import type { ActionAlert } from '~/types/actions'; import type { ActionAlert } from '~/types/actions';
import ChatAlert from './ChatAlert'; import ChatAlert from './ChatAlert';
import { LLMManager } from '~/lib/modules/llm/manager'; import type { ModelInfo } from '~/lib/modules/llm/types';
const TEXTAREA_MIN_HEIGHT = 76; const TEXTAREA_MIN_HEIGHT = 76;
@ -102,35 +102,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
) => { ) => {
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
const [apiKeys, setApiKeys] = useState<Record<string, string>>(getApiKeysFromCookies()); const [apiKeys, setApiKeys] = useState<Record<string, string>>(getApiKeysFromCookies());
const [modelList, setModelList] = useState(MODEL_LIST); const [modelList, setModelList] = useState<ModelInfo[]>([]);
const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false); const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
const [isListening, setIsListening] = useState(false); const [isListening, setIsListening] = useState(false);
const [recognition, setRecognition] = useState<SpeechRecognition | null>(null); const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
const [transcript, setTranscript] = useState(''); const [transcript, setTranscript] = useState('');
const [isModelLoading, setIsModelLoading] = useState<string | undefined>('all'); const [isModelLoading, setIsModelLoading] = useState<string | undefined>('all');
const getProviderSettings = useCallback(() => {
let providerSettings: Record<string, IProviderSetting> | 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(() => { useEffect(() => {
console.log(transcript); console.log(transcript);
}, [transcript]); }, [transcript]);
@ -169,7 +147,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
useEffect(() => { useEffect(() => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const providerSettings = getProviderSettings();
let parsedApiKeys: Record<string, string> | undefined = {}; let parsedApiKeys: Record<string, string> | undefined = {};
try { try {
@ -177,17 +154,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
setApiKeys(parsedApiKeys); setApiKeys(parsedApiKeys);
} catch (error) { } catch (error) {
console.error('Error loading API keys from cookies:', error); console.error('Error loading API keys from cookies:', error);
// Clear invalid cookie data
Cookies.remove('apiKeys'); Cookies.remove('apiKeys');
} }
setIsModelLoading('all'); setIsModelLoading('all');
initializeModelList({ apiKeys: parsedApiKeys, providerSettings }) fetch('/api/models')
.then((modelList) => { .then((response) => response.json())
setModelList(modelList); .then((data) => {
const typedData = data as { modelList: ModelInfo[] };
setModelList(typedData.modelList);
}) })
.catch((error) => { .catch((error) => {
console.error('Error initializing model list:', error); console.error('Error fetching model list:', error);
}) })
.finally(() => { .finally(() => {
setIsModelLoading(undefined); setIsModelLoading(undefined);
@ -200,29 +178,24 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
setApiKeys(newApiKeys); setApiKeys(newApiKeys);
Cookies.set('apiKeys', JSON.stringify(newApiKeys)); Cookies.set('apiKeys', JSON.stringify(newApiKeys));
const provider = LLMManager.getInstance(import.meta.env || process.env || {}).getProvider(providerName);
if (provider && provider.getDynamicModels) {
setIsModelLoading(providerName); setIsModelLoading(providerName);
try { let providerModels: ModelInfo[] = [];
const providerSettings = getProviderSettings();
const staticModels = provider.staticModels;
const dynamicModels = await provider.getDynamicModels(
newApiKeys,
providerSettings,
import.meta.env || process.env || {},
);
setModelList((preModels) => { try {
const filteredOutPreModels = preModels.filter((x) => x.provider !== providerName); const response = await fetch(`/api/models/${encodeURIComponent(providerName)}`);
return [...filteredOutPreModels, ...staticModels, ...dynamicModels]; const data = await response.json();
}); providerModels = (data as { modelList: ModelInfo[] }).modelList;
} catch (error) { } catch (error) {
console.error('Error loading dynamic models:', 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); setIsModelLoading(undefined);
}
}; };
const startListening = () => { const startListening = () => {

120
app/components/workbench/Preview.tsx
View File

@ -1,5 +1,5 @@
import { useStore } from '@nanostores/react';
import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useStore } from '@nanostores/react';
import { IconButton } from '~/components/ui/IconButton'; import { IconButton } from '~/components/ui/IconButton';
import { workbenchStore } from '~/lib/stores/workbench'; import { workbenchStore } from '~/lib/stores/workbench';
import { PortDropdown } from './PortDropdown'; import { PortDropdown } from './PortDropdown';
@ -7,6 +7,19 @@ import { ScreenshotSelector } from './ScreenshotSelector';
type ResizeSide = 'left' | 'right' | null; 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(() => { export const Preview = memo(() => {
const iframeRef = useRef<HTMLIFrameElement>(null); const iframeRef = useRef<HTMLIFrameElement>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
@ -15,6 +28,7 @@ export const Preview = memo(() => {
const [activePreviewIndex, setActivePreviewIndex] = useState(0); const [activePreviewIndex, setActivePreviewIndex] = useState(0);
const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false); const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
const [isPreviewOnly, setIsPreviewOnly] = useState(false);
const hasSelectedPreview = useRef(false); const hasSelectedPreview = useRef(false);
const previews = useStore(workbenchStore.previews); const previews = useStore(workbenchStore.previews);
const activePreview = previews[activePreviewIndex]; const activePreview = previews[activePreviewIndex];
@ -27,7 +41,7 @@ export const Preview = memo(() => {
const [isDeviceModeOn, setIsDeviceModeOn] = useState(false); const [isDeviceModeOn, setIsDeviceModeOn] = useState(false);
// Use percentage for width // Use percentage for width
const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially const [widthPercent, setWidthPercent] = useState<number>(37.5);
const resizingState = useRef({ const resizingState = useRef({
isResizing: false, isResizing: false,
@ -37,8 +51,10 @@ export const Preview = memo(() => {
windowWidth: window.innerWidth, windowWidth: window.innerWidth,
}); });
// Define the scaling factor const SCALING_FACTOR = 2;
const SCALING_FACTOR = 2; // Adjust this value to increase/decrease sensitivity
const [isWindowSizeDropdownOpen, setIsWindowSizeDropdownOpen] = useState(false);
const [selectedWindowSize, setSelectedWindowSize] = useState<WindowSize>(WINDOW_SIZES[0]);
useEffect(() => { useEffect(() => {
if (!activePreview) { 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(() => { useEffect(() => {
if (previews.length > 1 && !hasSelectedPreview.current) { if (previews.length > 1 && !hasSelectedPreview.current) {
const minPortIndex = previews.reduce(findMinPortIndex, 0); const minPortIndex = previews.reduce(findMinPortIndex, 0);
@ -122,7 +137,6 @@ export const Preview = memo(() => {
return; return;
} }
// Prevent text selection
document.body.style.userSelect = 'none'; document.body.style.userSelect = 'none';
resizingState.current.isResizing = true; resizingState.current.isResizing = true;
@ -134,7 +148,7 @@ export const Preview = memo(() => {
document.addEventListener('mousemove', onMouseMove); document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp); document.addEventListener('mouseup', onMouseUp);
e.preventDefault(); // Prevent any text selection on mousedown e.preventDefault();
}; };
const onMouseMove = (e: MouseEvent) => { const onMouseMove = (e: MouseEvent) => {
@ -145,7 +159,6 @@ export const Preview = memo(() => {
const dx = e.clientX - resizingState.current.startX; const dx = e.clientX - resizingState.current.startX;
const windowWidth = resizingState.current.windowWidth; const windowWidth = resizingState.current.windowWidth;
// Apply scaling factor to increase sensitivity
const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR; const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
let newWidthPercent = resizingState.current.startWidthPercent; let newWidthPercent = resizingState.current.startWidthPercent;
@ -156,7 +169,6 @@ export const Preview = memo(() => {
newWidthPercent = resizingState.current.startWidthPercent - dxPercent; newWidthPercent = resizingState.current.startWidthPercent - dxPercent;
} }
// Clamp the width between 10% and 90%
newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90)); newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90));
setWidthPercent(newWidthPercent); setWidthPercent(newWidthPercent);
@ -168,17 +180,12 @@ export const Preview = memo(() => {
document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('mouseup', onMouseUp);
// Restore text selection
document.body.style.userSelect = ''; document.body.style.userSelect = '';
}; };
// Handle window resize to ensure widthPercent remains valid
useEffect(() => { useEffect(() => {
const handleWindowResize = () => { const handleWindowResize = () => {
/* // Optional: Adjust widthPercent if necessary
* Optional: Adjust widthPercent if necessary
* For now, since widthPercent is relative, no action is needed
*/
}; };
window.addEventListener('resize', handleWindowResize); 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 GripIcon = () => (
<div <div
style={{ style={{
@ -213,8 +219,33 @@ export const Preview = memo(() => {
</div> </div>
); );
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 ( return (
<div ref={containerRef} className="w-full h-full flex flex-col relative"> <div
ref={containerRef}
className={`w-full h-full flex flex-col relative ${isPreviewOnly ? 'fixed inset-0 z-50 bg-white' : ''}`}
>
{isPortDropdownOpen && ( {isPortDropdownOpen && (
<div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} /> <div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
)} )}
@ -225,10 +256,7 @@ export const Preview = memo(() => {
onClick={() => setIsSelectionMode(!isSelectionMode)} onClick={() => setIsSelectionMode(!isSelectionMode)}
className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
/> />
<div <div className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
>
<input <input
title="URL" title="URL"
ref={inputRef} ref={inputRef}
@ -261,26 +289,65 @@ export const Preview = memo(() => {
/> />
)} )}
{/* Device mode toggle button */}
<IconButton <IconButton
icon="i-ph:devices" icon="i-ph:devices"
onClick={toggleDeviceMode} onClick={toggleDeviceMode}
title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'} title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'}
/> />
{/* Fullscreen toggle button */} <IconButton
icon="i-ph:layout-light"
onClick={() => setIsPreviewOnly(!isPreviewOnly)}
title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'}
/>
<IconButton <IconButton
icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'} icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'}
onClick={toggleFullscreen} onClick={toggleFullscreen}
title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'} title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
/> />
<div className="relative">
<IconButton
icon="i-ph:arrow-square-out"
onClick={() => openInNewWindow(selectedWindowSize)}
title={`Open Preview in ${selectedWindowSize.name} Window`}
/>
<IconButton
icon="i-ph:caret-down"
onClick={() => setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)}
className="ml-1"
title="Select Window Size"
/>
{isWindowSizeDropdownOpen && (
<>
<div className="fixed inset-0 z-50" onClick={() => setIsWindowSizeDropdownOpen(false)} />
<div className="absolute right-0 top-full mt-1 z-50 bg-bolt-elements-background-depth-2 rounded-lg shadow-lg border border-bolt-elements-borderColor overflow-hidden">
{WINDOW_SIZES.map((size) => (
<button
key={size.name}
className="w-full px-4 py-2 text-left hover:bg-bolt-elements-background-depth-3 text-sm whitespace-nowrap"
onClick={() => {
setSelectedWindowSize(size);
setIsWindowSizeDropdownOpen(false);
openInNewWindow(size);
}}
>
{size.name}
</button>
))}
</div>
</>
)}
</div>
</div> </div>
<div className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto"> <div className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto">
<div <div
style={{ style={{
width: isDeviceModeOn ? `${widthPercent}%` : '100%', width: isDeviceModeOn ? `${widthPercent}%` : '100%',
height: '100%', // Always full height height: '100%',
overflow: 'visible', overflow: 'visible',
background: '#fff', background: '#fff',
position: 'relative', position: 'relative',
@ -294,7 +361,8 @@ export const Preview = memo(() => {
title="preview" title="preview"
className="border-none w-full h-full bg-white" className="border-none w-full h-full bg-white"
src={iframeUrl} 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"
/> />
<ScreenshotSelector <ScreenshotSelector
isSelectionMode={isSelectionMode} isSelectionMode={isSelectionMode}
@ -308,7 +376,6 @@ export const Preview = memo(() => {
{isDeviceModeOn && ( {isDeviceModeOn && (
<> <>
{/* Left handle */}
<div <div
onMouseDown={(e) => startResizing(e, 'left')} onMouseDown={(e) => startResizing(e, 'left')}
style={{ style={{
@ -333,7 +400,6 @@ export const Preview = memo(() => {
<GripIcon /> <GripIcon />
</div> </div>
{/* Right handle */}
<div <div
onMouseDown={(e) => startResizing(e, 'right')} onMouseDown={(e) => startResizing(e, 'right')}
style={{ style={{

33
app/lib/api/cookies.ts Normal file
View File

@ -0,0 +1,33 @@
export function parseCookies(cookieHeader: string | null) {
const cookies: Record<string, string> = {};
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<string, string> {
const cookies = parseCookies(cookieHeader);
return cookies.apiKeys ? JSON.parse(cookies.apiKeys) : {};
}
export function getProviderSettingsFromCookie(cookieHeader: string | null): Record<string, any> {
const cookies = parseCookies(cookieHeader);
return cookies.providers ? JSON.parse(cookies.providers) : {};
}

2
app/lib/modules/llm/manager.ts
View File

@ -83,7 +83,7 @@ export class LLMManager {
let enabledProviders = Array.from(this._providers.values()).map((p) => p.name); 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); enabledProviders = enabledProviders.filter((p) => providerSettings[p].enabled);
} }

52
app/lib/modules/llm/providers/github.ts Normal file
View File

@ -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<string, string>;
providerSettings?: Record<string, IProviderSetting>;
}): 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);
}
}

2
app/lib/modules/llm/registry.ts
View File

@ -15,6 +15,7 @@ import TogetherProvider from './providers/together';
import XAIProvider from './providers/xai'; import XAIProvider from './providers/xai';
import HyperbolicProvider from './providers/hyperbolic'; import HyperbolicProvider from './providers/hyperbolic';
import AmazonBedrockProvider from './providers/amazon-bedrock'; import AmazonBedrockProvider from './providers/amazon-bedrock';
import GithubProvider from './providers/github';
export { export {
AnthropicProvider, AnthropicProvider,
@ -34,4 +35,5 @@ export {
TogetherProvider, TogetherProvider,
LMStudioProvider, LMStudioProvider,
AmazonBedrockProvider, AmazonBedrockProvider,
GithubProvider,
}; };

260
app/lib/stores/previews.ts
View File

@ -1,27 +1,192 @@
import type { WebContainer } from '@webcontainer/api'; import type { WebContainer } from '@webcontainer/api';
import { atom } from 'nanostores'; import { atom } from 'nanostores';
// Extend Window interface to include our custom property
declare global {
interface Window {
_tabId?: string;
}
}
export interface PreviewInfo { export interface PreviewInfo {
port: number; port: number;
ready: boolean; ready: boolean;
baseUrl: string; baseUrl: string;
} }
// Create a broadcast channel for preview updates
const PREVIEW_CHANNEL = 'preview-updates';
export class PreviewsStore { export class PreviewsStore {
#availablePreviews = new Map<number, PreviewInfo>(); #availablePreviews = new Map<number, PreviewInfo>();
#webcontainer: Promise<WebContainer>; #webcontainer: Promise<WebContainer>;
#broadcastChannel: BroadcastChannel;
#lastUpdate = new Map<string, number>();
#watchedFiles = new Set<string>();
#refreshTimeouts = new Map<string, NodeJS.Timeout>();
#REFRESH_DELAY = 300;
#storageChannel: BroadcastChannel;
previews = atom<PreviewInfo[]>([]); previews = atom<PreviewInfo[]>([]);
constructor(webcontainerPromise: Promise<WebContainer>) { constructor(webcontainerPromise: Promise<WebContainer>) {
this.#webcontainer = webcontainerPromise; 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(); 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<string, string>) {
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<string, string> = {};
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() { async #init() {
const webcontainer = await this.#webcontainer; 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) => { webcontainer.on('port', (port, type, url) => {
let previewInfo = this.#availablePreviews.get(port); let previewInfo = this.#availablePreviews.get(port);
@ -44,6 +209,101 @@ export class PreviewsStore {
previewInfo.baseUrl = url; previewInfo.baseUrl = url;
this.previews.set([...previews]); 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;
} }

33
app/routes/api.enhancer.ts
View File

@ -1,34 +1,13 @@
import { type ActionFunctionArgs } from '@remix-run/cloudflare'; import { type ActionFunctionArgs } from '@remix-run/cloudflare';
//import { StreamingTextResponse, parseStreamPart } from 'ai';
import { streamText } from '~/lib/.server/llm/stream-text'; import { streamText } from '~/lib/.server/llm/stream-text';
import { stripIndents } from '~/utils/stripIndent'; 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) { export async function action(args: ActionFunctionArgs) {
return enhancerAction(args); 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) { async function enhancerAction({ context, request }: ActionFunctionArgs) {
const { message, model, provider } = await request.json<{ const { message, model, provider } = await request.json<{
message: string; message: string;
@ -55,12 +34,8 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {
} }
const cookieHeader = request.headers.get('Cookie'); const cookieHeader = request.headers.get('Cookie');
const apiKeys = getApiKeysFromCookie(cookieHeader);
// Parse the cookie's value (returns an object or null if no cookie exists) const providerSettings = getProviderSettingsFromCookie(cookieHeader);
const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
const providerSettings: Record<string, IProviderSetting> = JSON.parse(
parseCookies(cookieHeader || '').providers || '{}',
);
try { try {
const result = await streamText({ const result = await streamText({

44
app/routes/api.llmcall.ts
View File

@ -1,34 +1,24 @@
import { type ActionFunctionArgs } from '@remix-run/cloudflare'; import { type ActionFunctionArgs } from '@remix-run/cloudflare';
//import { StreamingTextResponse, parseStreamPart } from 'ai';
import { streamText } from '~/lib/.server/llm/stream-text'; import { streamText } from '~/lib/.server/llm/stream-text';
import type { IProviderSetting, ProviderInfo } from '~/types/model'; import type { IProviderSetting, ProviderInfo } from '~/types/model';
import { generateText } from 'ai'; 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 { 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) { export async function action(args: ActionFunctionArgs) {
return llmCallAction(args); return llmCallAction(args);
} }
function parseCookies(cookieHeader: string) { async function getModelList(options: {
const cookies: any = {}; apiKeys?: Record<string, string>;
providerSettings?: Record<string, IProviderSetting>;
// Split the cookie string by semicolons and spaces serverEnv?: Record<string, string>;
const items = cookieHeader.split(';').map((cookie) => cookie.trim()); }) {
const llmManager = LLMManager.getInstance(import.meta.env);
items.forEach((item) => { return llmManager.updateModelList(options);
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 llmCallAction({ context, request }: ActionFunctionArgs) { async function llmCallAction({ context, request }: ActionFunctionArgs) {
@ -58,12 +48,8 @@ async function llmCallAction({ context, request }: ActionFunctionArgs) {
} }
const cookieHeader = request.headers.get('Cookie'); const cookieHeader = request.headers.get('Cookie');
const apiKeys = getApiKeysFromCookie(cookieHeader);
// Parse the cookie's value (returns an object or null if no cookie exists) const providerSettings = getProviderSettingsFromCookie(cookieHeader);
const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
const providerSettings: Record<string, IProviderSetting> = JSON.parse(
parseCookies(cookieHeader || '').providers || '{}',
);
if (streamOutput) { if (streamOutput) {
try { try {
@ -105,8 +91,8 @@ async function llmCallAction({ context, request }: ActionFunctionArgs) {
} }
} else { } else {
try { try {
const MODEL_LIST = await getModelList({ apiKeys, providerSettings, serverEnv: context.cloudflare.env as any }); const models = await getModelList({ apiKeys, providerSettings, serverEnv: context.cloudflare.env as any });
const modelDetails = MODEL_LIST.find((m) => m.name === model); const modelDetails = models.find((m: ModelInfo) => m.name === model);
if (!modelDetails) { if (!modelDetails) {
throw new Error('Model not found'); throw new Error('Model not found');

2
app/routes/api.models.$provider.ts Normal file
View File

@ -0,0 +1,2 @@
import { loader } from './api.models';
export { loader };

84
app/routes/api.models.ts
View File

@ -1,6 +1,84 @@
import { json } from '@remix-run/cloudflare'; 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() { interface ModelsResponse {
return json(MODEL_LIST); 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<Response> {
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<ModelsResponse>({
modelList,
providers,
defaultProvider,
});
} }

92
app/routes/webcontainer.preview.$id.tsx Normal file
View File

@ -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<typeof loader>();
const iframeRef = useRef<HTMLIFrameElement>(null);
const broadcastChannelRef = useRef<BroadcastChannel>();
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 (
<div className="w-full h-full">
<iframe
ref={iframeRef}
title="WebContainer Preview"
className="w-full h-full border-none"
sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
allow="cross-origin-isolated"
loading="eager"
onLoad={notifyPreviewReady}
/>
</div>
);
}

35
app/utils/constants.ts
View File

@ -1,7 +1,4 @@
import type { IProviderSetting } from '~/types/model';
import { LLMManager } from '~/lib/modules/llm/manager'; import { LLMManager } from '~/lib/modules/llm/manager';
import type { ModelInfo } from '~/lib/modules/llm/types';
import type { Template } from '~/types/template'; import type { Template } from '~/types/template';
export const WORK_DIR_NAME = 'project'; export const WORK_DIR_NAME = 'project';
@ -17,9 +14,7 @@ const llmManager = LLMManager.getInstance(import.meta.env);
export const PROVIDER_LIST = llmManager.getAllProviders(); export const PROVIDER_LIST = llmManager.getAllProviders();
export const DEFAULT_PROVIDER = llmManager.getDefaultProvider(); export const DEFAULT_PROVIDER = llmManager.getDefaultProvider();
let MODEL_LIST = llmManager.getModelList(); export const providerBaseUrlEnvKeys: Record<string, { baseUrlKey?: string; apiTokenKey?: string }> = {};
const providerBaseUrlEnvKeys: Record<string, { baseUrlKey?: string; apiTokenKey?: string }> = {};
PROVIDER_LIST.forEach((provider) => { PROVIDER_LIST.forEach((provider) => {
providerBaseUrlEnvKeys[provider.name] = { providerBaseUrlEnvKeys[provider.name] = {
baseUrlKey: provider.config.baseUrlKey, baseUrlKey: provider.config.baseUrlKey,
@ -27,34 +22,6 @@ PROVIDER_LIST.forEach((provider) => {
}; };
}); });
// Export the getModelList function using the manager
export async function getModelList(options: {
apiKeys?: Record<string, string>;
providerSettings?: Record<string, IProviderSetting>;
serverEnv?: Record<string, string>;
}) {
return await llmManager.updateModelList(options);
}
async function initializeModelList(options: {
env?: Record<string, string>;
providerSettings?: Record<string, IProviderSetting>;
apiKeys?: Record<string, string>;
}): Promise<ModelInfo[]> {
const { providerSettings, apiKeys, env } = options;
const list = await getModelList({
apiKeys,
providerSettings,
serverEnv: env,
});
MODEL_LIST = list || MODEL_LIST;
return list;
}
// initializeModelList({})
export { initializeModelList, providerBaseUrlEnvKeys, MODEL_LIST };
// starter Templates // starter Templates
export const STARTER_TEMPLATES: Template[] = [ export const STARTER_TEMPLATES: Template[] = [