feat: add first version of workbench, increase token limit, improve system prompt
This commit is contained in:
42
packages/bolt/app/lib/stores/previews.ts
Normal file
42
packages/bolt/app/lib/stores/previews.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { WebContainer } from '@webcontainer/api';
|
||||
import { atom } from 'nanostores';
|
||||
|
||||
export interface PreviewInfo {
|
||||
port: number;
|
||||
ready: boolean;
|
||||
baseUrl: string;
|
||||
}
|
||||
|
||||
export class PreviewsStore {
|
||||
#availablePreviews = new Map<number, PreviewInfo>();
|
||||
#webcontainer: Promise<WebContainer>;
|
||||
|
||||
previews = atom<PreviewInfo[]>([]);
|
||||
|
||||
constructor(webcontainerPromise: Promise<WebContainer>) {
|
||||
this.#webcontainer = webcontainerPromise;
|
||||
|
||||
this.#init();
|
||||
}
|
||||
|
||||
async #init() {
|
||||
const webcontainer = await this.#webcontainer;
|
||||
|
||||
webcontainer.on('port', (port, type, url) => {
|
||||
let previewInfo = this.#availablePreviews.get(port);
|
||||
|
||||
const previews = this.previews.get();
|
||||
|
||||
if (!previewInfo) {
|
||||
previewInfo = { port, ready: type === 'open', baseUrl: url };
|
||||
this.#availablePreviews.set(port, previewInfo);
|
||||
previews.push(previewInfo);
|
||||
}
|
||||
|
||||
previewInfo.ready = type === 'open';
|
||||
previewInfo.baseUrl = url;
|
||||
|
||||
this.previews.set([...previews]);
|
||||
});
|
||||
}
|
||||
}
|
||||
33
packages/bolt/app/lib/stores/theme.ts
Normal file
33
packages/bolt/app/lib/stores/theme.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { atom } from 'nanostores';
|
||||
|
||||
export type Theme = 'dark' | 'light';
|
||||
|
||||
export const kTheme = 'bolt_theme';
|
||||
|
||||
export function themeIsDark() {
|
||||
return themeStore.get() === 'dark';
|
||||
}
|
||||
|
||||
export const themeStore = atom<Theme>(initStore());
|
||||
|
||||
function initStore() {
|
||||
if (!import.meta.env.SSR) {
|
||||
const persistedTheme = localStorage.getItem(kTheme) as Theme | undefined;
|
||||
const themeAttribute = document.querySelector('html')?.getAttribute('data-theme');
|
||||
|
||||
return persistedTheme ?? (themeAttribute as Theme) ?? 'light';
|
||||
}
|
||||
|
||||
return 'light';
|
||||
}
|
||||
|
||||
export function toggleTheme() {
|
||||
const currentTheme = themeStore.get();
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
themeStore.set(newTheme);
|
||||
|
||||
localStorage.setItem(kTheme, newTheme);
|
||||
|
||||
document.querySelector('html')?.setAttribute('data-theme', newTheme);
|
||||
}
|
||||
153
packages/bolt/app/lib/stores/workbench.ts
Normal file
153
packages/bolt/app/lib/stores/workbench.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
import { atom, map, type MapStore, type WritableAtom } from 'nanostores';
|
||||
import type { BoltAction } from '../../types/actions';
|
||||
import { unreachable } from '../../utils/unreachable';
|
||||
import { ActionRunner } from '../runtime/action-runner';
|
||||
import type { ActionCallbackData, ArtifactCallbackData } from '../runtime/message-parser';
|
||||
import { webcontainer } from '../webcontainer';
|
||||
import { PreviewsStore } from './previews';
|
||||
|
||||
export type RunningState = BoltAction & {
|
||||
status: 'running' | 'complete' | 'pending' | 'aborted';
|
||||
abort?: () => void;
|
||||
};
|
||||
|
||||
export type FailedState = BoltAction & {
|
||||
status: 'failed';
|
||||
error: string;
|
||||
abort?: () => void;
|
||||
};
|
||||
|
||||
export type ActionState = RunningState | FailedState;
|
||||
|
||||
export type ActionStateUpdate =
|
||||
| { status: 'running' | 'complete' | 'pending' | 'aborted'; abort?: () => void }
|
||||
| { status: 'failed'; error: string; abort?: () => void }
|
||||
| { abort?: () => void };
|
||||
|
||||
export interface ArtifactState {
|
||||
title: string;
|
||||
closed: boolean;
|
||||
currentActionPromise: Promise<void>;
|
||||
actions: MapStore<Record<string, ActionState>>;
|
||||
}
|
||||
|
||||
type Artifacts = MapStore<Record<string, ArtifactState>>;
|
||||
|
||||
export class WorkbenchStore {
|
||||
#actionRunner = new ActionRunner(webcontainer);
|
||||
#previewsStore = new PreviewsStore(webcontainer);
|
||||
|
||||
artifacts: Artifacts = import.meta.hot?.data.artifacts ?? map({});
|
||||
|
||||
showWorkbench: WritableAtom<boolean> = import.meta.hot?.data.showWorkbench ?? atom(false);
|
||||
|
||||
get previews() {
|
||||
return this.#previewsStore.previews;
|
||||
}
|
||||
|
||||
setShowWorkbench(show: boolean) {
|
||||
this.showWorkbench.set(show);
|
||||
}
|
||||
|
||||
addArtifact({ id, messageId, title }: ArtifactCallbackData) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const artifactKey = getArtifactKey(id, messageId);
|
||||
const artifact = artifacts[artifactKey];
|
||||
|
||||
if (artifact) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.artifacts.setKey(artifactKey, {
|
||||
title,
|
||||
closed: false,
|
||||
actions: map({}),
|
||||
currentActionPromise: Promise.resolve(),
|
||||
});
|
||||
}
|
||||
|
||||
updateArtifact({ id, messageId }: ArtifactCallbackData, state: Partial<ArtifactState>) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const key = getArtifactKey(id, messageId);
|
||||
const artifact = artifacts[key];
|
||||
|
||||
if (!artifact) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.artifacts.setKey(key, { ...artifact, ...state });
|
||||
}
|
||||
|
||||
async runAction(data: ActionCallbackData) {
|
||||
const { artifactId, messageId, actionId } = data;
|
||||
|
||||
const artifacts = this.artifacts.get();
|
||||
const key = getArtifactKey(artifactId, messageId);
|
||||
const artifact = artifacts[key];
|
||||
|
||||
if (!artifact) {
|
||||
unreachable('Artifact not found');
|
||||
}
|
||||
|
||||
const actions = artifact.actions.get();
|
||||
const action = actions[actionId];
|
||||
|
||||
if (action) {
|
||||
return;
|
||||
}
|
||||
|
||||
artifact.actions.setKey(actionId, { ...data.action, status: 'pending' });
|
||||
|
||||
artifact.currentActionPromise = artifact.currentActionPromise.then(async () => {
|
||||
try {
|
||||
let abortController: AbortController | undefined;
|
||||
|
||||
if (data.action.type === 'shell') {
|
||||
abortController = new AbortController();
|
||||
}
|
||||
|
||||
let aborted = false;
|
||||
|
||||
this.#updateAction(key, actionId, {
|
||||
status: 'running',
|
||||
abort: () => {
|
||||
aborted = true;
|
||||
abortController?.abort();
|
||||
},
|
||||
});
|
||||
|
||||
await this.#actionRunner.runAction(data, abortController?.signal);
|
||||
|
||||
this.#updateAction(key, actionId, { status: aborted ? 'aborted' : 'complete' });
|
||||
} catch (error) {
|
||||
this.#updateAction(key, actionId, { status: 'failed', error: 'Action failed' });
|
||||
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#updateAction(artifactId: string, actionId: string, newState: ActionStateUpdate) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const artifact = artifacts[artifactId];
|
||||
|
||||
if (!artifact) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actions = artifact.actions.get();
|
||||
|
||||
artifact.actions.setKey(actionId, { ...actions[actionId], ...newState });
|
||||
}
|
||||
}
|
||||
|
||||
export function getArtifactKey(artifactId: string, messageId: string) {
|
||||
return `${artifactId}_${messageId}`;
|
||||
}
|
||||
|
||||
export const workbenchStore = new WorkbenchStore();
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.data.artifacts = workbenchStore.artifacts;
|
||||
import.meta.hot.data.showWorkbench = workbenchStore.showWorkbench;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import type { WebContainer } from '@webcontainer/api';
|
||||
import { atom, map, type MapStore, type WritableAtom } from 'nanostores';
|
||||
import { webcontainer } from '~/lib/webcontainer';
|
||||
|
||||
interface WorkspaceStoreOptions {
|
||||
webcontainer: Promise<WebContainer>;
|
||||
}
|
||||
|
||||
interface ArtifactState {
|
||||
title: string;
|
||||
closed: boolean;
|
||||
actions: any /* TODO */;
|
||||
}
|
||||
|
||||
export class WorkspaceStore {
|
||||
#webcontainer: Promise<WebContainer>;
|
||||
|
||||
artifacts: MapStore<Record<string, ArtifactState>> = import.meta.hot?.data.artifacts ?? map({});
|
||||
showWorkspace: WritableAtom<boolean> = import.meta.hot?.data.showWorkspace ?? atom(false);
|
||||
|
||||
constructor({ webcontainer }: WorkspaceStoreOptions) {
|
||||
this.#webcontainer = webcontainer;
|
||||
}
|
||||
|
||||
updateArtifact(id: string, state: Partial<ArtifactState>) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const artifact = artifacts[id];
|
||||
|
||||
this.artifacts.setKey(id, { ...artifact, ...state });
|
||||
}
|
||||
|
||||
runAction() {
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
|
||||
export const workspaceStore = new WorkspaceStore({ webcontainer });
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.data.artifacts = workspaceStore.artifacts;
|
||||
import.meta.hot.data.showWorkspace = workspaceStore.showWorkspace;
|
||||
}
|
||||
Reference in New Issue
Block a user