mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-05-08 06:04:44 +00:00
Merge branch 'stackblitz-labs:main' into FEAT_BoltDYI_NEW_SETTINGS_UI
This commit is contained in:
Stijnus
GitHub
commit
9230ef3b55
@ -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<HTMLDivElement, BaseChatProps>(
|
||||
) => {
|
||||
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
|
||||
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 [isListening, setIsListening] = useState(false);
|
||||
const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
|
||||
const [transcript, setTranscript] = useState('');
|
||||
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(() => {
|
||||
console.log(transcript);
|
||||
}, [transcript]);
|
||||
@ -169,7 +147,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const providerSettings = getProviderSettings();
|
||||
let parsedApiKeys: Record<string, string> | undefined = {};
|
||||
|
||||
try {
|
||||
@ -177,17 +154,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
|
||||
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<HTMLDivElement, BaseChatProps>(
|
||||
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 = () => {
|
||||
|
||||
@ -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<HTMLIFrameElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(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<number>(37.5); // 375px assuming 1000px window width initially
|
||||
const [widthPercent, setWidthPercent] = useState<number>(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<WindowSize>(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 = () => (
|
||||
<div
|
||||
style={{
|
||||
@ -213,8 +219,33 @@ export const Preview = memo(() => {
|
||||
</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 (
|
||||
<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 && (
|
||||
<div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
|
||||
)}
|
||||
@ -225,10 +256,7 @@ export const Preview = memo(() => {
|
||||
onClick={() => setIsSelectionMode(!isSelectionMode)}
|
||||
className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
<input
|
||||
title="URL"
|
||||
ref={inputRef}
|
||||
@ -261,26 +289,65 @@ export const Preview = memo(() => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Device mode toggle button */}
|
||||
<IconButton
|
||||
icon="i-ph:devices"
|
||||
onClick={toggleDeviceMode}
|
||||
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
|
||||
icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'}
|
||||
onClick={toggleFullscreen}
|
||||
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 className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto">
|
||||
<div
|
||||
style={{
|
||||
width: isDeviceModeOn ? `${widthPercent}%` : '100%',
|
||||
height: '100%', // Always full height
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
background: '#fff',
|
||||
position: 'relative',
|
||||
@ -294,7 +361,8 @@ export const Preview = memo(() => {
|
||||
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"
|
||||
/>
|
||||
<ScreenshotSelector
|
||||
isSelectionMode={isSelectionMode}
|
||||
@ -308,7 +376,6 @@ export const Preview = memo(() => {
|
||||
|
||||
{isDeviceModeOn && (
|
||||
<>
|
||||
{/* Left handle */}
|
||||
<div
|
||||
onMouseDown={(e) => startResizing(e, 'left')}
|
||||
style={{
|
||||
@ -333,7 +400,6 @@ export const Preview = memo(() => {
|
||||
<GripIcon />
|
||||
</div>
|
||||
|
||||
{/* Right handle */}
|
||||
<div
|
||||
onMouseDown={(e) => startResizing(e, 'right')}
|
||||
style={{
|
||||
|
||||
33
app/lib/api/cookies.ts
Normal file
33
app/lib/api/cookies.ts
Normal 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) : {};
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
52
app/lib/modules/llm/providers/github.ts
Normal file
52
app/lib/modules/llm/providers/github.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
};
|
||||
|
||||
@ -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<number, PreviewInfo>();
|
||||
#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[]>([]);
|
||||
|
||||
constructor(webcontainerPromise: Promise<WebContainer>) {
|
||||
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<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() {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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<string, IProviderSetting> = JSON.parse(
|
||||
parseCookies(cookieHeader || '').providers || '{}',
|
||||
);
|
||||
const apiKeys = getApiKeysFromCookie(cookieHeader);
|
||||
const providerSettings = getProviderSettingsFromCookie(cookieHeader);
|
||||
|
||||
try {
|
||||
const result = await streamText({
|
||||
|
||||
@ -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<string, string>;
|
||||
providerSettings?: Record<string, IProviderSetting>;
|
||||
serverEnv?: Record<string, string>;
|
||||
}) {
|
||||
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<string, IProviderSetting> = 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');
|
||||
|
||||
2
app/routes/api.models.$provider.ts
Normal file
2
app/routes/api.models.$provider.ts
Normal file
@ -0,0 +1,2 @@
|
||||
import { loader } from './api.models';
|
||||
export { loader };
|
||||
@ -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<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
92
app/routes/webcontainer.preview.$id.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,4 @@
|
||||
import type { IProviderSetting } from '~/types/model';
|
||||
|
||||
import { LLMManager } from '~/lib/modules/llm/manager';
|
||||
import type { ModelInfo } from '~/lib/modules/llm/types';
|
||||
import type { Template } from '~/types/template';
|
||||
|
||||
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 DEFAULT_PROVIDER = llmManager.getDefaultProvider();
|
||||
|
||||
let MODEL_LIST = llmManager.getModelList();
|
||||
|
||||
const providerBaseUrlEnvKeys: Record<string, { baseUrlKey?: string; apiTokenKey?: string }> = {};
|
||||
export const providerBaseUrlEnvKeys: Record<string, { baseUrlKey?: string; apiTokenKey?: string }> = {};
|
||||
PROVIDER_LIST.forEach((provider) => {
|
||||
providerBaseUrlEnvKeys[provider.name] = {
|
||||
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
|
||||
|
||||
export const STARTER_TEMPLATES: Template[] = [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user