refactor: workbench store and move logic into action runner (#4)
This commit is contained in:
@@ -1,48 +1,24 @@
|
||||
import { atom, map, type MapStore, type ReadableAtom, type WritableAtom } from 'nanostores';
|
||||
import type { EditorDocument, ScrollPosition } from '../../components/editor/codemirror/CodeMirrorEditor';
|
||||
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 { chatStore } from './chat';
|
||||
import { EditorStore } from './editor';
|
||||
import { FilesStore, type FileMap } from './files';
|
||||
import { PreviewsStore } from './previews';
|
||||
|
||||
const MIN_SPINNER_TIME = 200;
|
||||
|
||||
export type BaseActionState = BoltAction & {
|
||||
status: 'running' | 'complete' | 'pending' | 'aborted';
|
||||
executing: boolean;
|
||||
abort?: () => void;
|
||||
};
|
||||
|
||||
export type FailedActionState = BoltAction &
|
||||
Omit<BaseActionState, 'status'> & {
|
||||
status: 'failed';
|
||||
error: string;
|
||||
};
|
||||
|
||||
export type ActionState = BaseActionState | FailedActionState;
|
||||
|
||||
type BaseActionUpdate = Partial<Pick<BaseActionState, 'status' | 'executing' | 'abort'>>;
|
||||
|
||||
export type ActionStateUpdate =
|
||||
| BaseActionUpdate
|
||||
| (Omit<BaseActionUpdate, 'status'> & { status: 'failed'; error: string });
|
||||
|
||||
export interface ArtifactState {
|
||||
title: string;
|
||||
closed: boolean;
|
||||
currentActionPromise: Promise<void>;
|
||||
actions: MapStore<Record<string, ActionState>>;
|
||||
runner: ActionRunner;
|
||||
}
|
||||
|
||||
export type ArtifactUpdateState = Pick<ArtifactState, 'title' | 'closed'>;
|
||||
|
||||
type Artifacts = MapStore<Record<string, ArtifactState>>;
|
||||
|
||||
export class WorkbenchStore {
|
||||
#actionRunner = new ActionRunner(webcontainer);
|
||||
#previewsStore = new PreviewsStore(webcontainer);
|
||||
#filesStore = new FilesStore(webcontainer);
|
||||
#editorStore = new EditorStore(webcontainer);
|
||||
@@ -102,148 +78,63 @@ export class WorkbenchStore {
|
||||
}
|
||||
|
||||
abortAllActions() {
|
||||
for (const [, artifact] of Object.entries(this.artifacts.get())) {
|
||||
for (const [, action] of Object.entries(artifact.actions.get())) {
|
||||
if (action.status === 'running') {
|
||||
action.abort?.();
|
||||
}
|
||||
}
|
||||
}
|
||||
// TODO: what do we wanna do and how do we wanna recover from this?
|
||||
}
|
||||
|
||||
addArtifact({ id, messageId, title }: ArtifactCallbackData) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const artifactKey = getArtifactKey(id, messageId);
|
||||
const artifact = artifacts[artifactKey];
|
||||
addArtifact({ messageId, title }: ArtifactCallbackData) {
|
||||
const artifact = this.#getArtifact(messageId);
|
||||
|
||||
if (artifact) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.artifacts.setKey(artifactKey, {
|
||||
this.artifacts.setKey(messageId, {
|
||||
title,
|
||||
closed: false,
|
||||
actions: map({}),
|
||||
currentActionPromise: Promise.resolve(),
|
||||
runner: new ActionRunner(webcontainer),
|
||||
});
|
||||
}
|
||||
|
||||
updateArtifact({ id, messageId }: ArtifactCallbackData, state: Partial<ArtifactState>) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const key = getArtifactKey(id, messageId);
|
||||
const artifact = artifacts[key];
|
||||
updateArtifact({ messageId }: ArtifactCallbackData, state: Partial<ArtifactUpdateState>) {
|
||||
const artifact = this.#getArtifact(messageId);
|
||||
|
||||
if (!artifact) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.artifacts.setKey(key, { ...artifact, ...state });
|
||||
this.artifacts.setKey(messageId, { ...artifact, ...state });
|
||||
}
|
||||
|
||||
async addAction(data: ActionCallbackData) {
|
||||
const { artifactId, messageId, actionId } = data;
|
||||
const { messageId } = data;
|
||||
|
||||
const artifacts = this.artifacts.get();
|
||||
const key = getArtifactKey(artifactId, messageId);
|
||||
const artifact = artifacts[key];
|
||||
const artifact = this.#getArtifact(messageId);
|
||||
|
||||
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', executing: false });
|
||||
|
||||
artifact.currentActionPromise.then(() => {
|
||||
if (chatStore.get().aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.#updateAction(key, actionId, { status: 'running' });
|
||||
});
|
||||
artifact.runner.addAction(data);
|
||||
}
|
||||
|
||||
async runAction(data: ActionCallbackData) {
|
||||
const { artifactId, messageId, actionId } = data;
|
||||
const { messageId } = data;
|
||||
|
||||
const artifacts = this.artifacts.get();
|
||||
const key = getArtifactKey(artifactId, messageId);
|
||||
const artifact = artifacts[key];
|
||||
const artifact = this.#getArtifact(messageId);
|
||||
|
||||
if (!artifact) {
|
||||
unreachable('Artifact not found');
|
||||
}
|
||||
|
||||
const actions = artifact.actions.get();
|
||||
const action = actions[actionId];
|
||||
|
||||
if (!action) {
|
||||
unreachable('Expected action to exist');
|
||||
}
|
||||
|
||||
if (action.executing || action.status === 'complete' || action.status === 'failed' || action.status === 'aborted') {
|
||||
return;
|
||||
}
|
||||
|
||||
artifact.currentActionPromise = artifact.currentActionPromise.then(async () => {
|
||||
if (chatStore.get().aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
|
||||
this.#updateAction(key, actionId, {
|
||||
status: 'running',
|
||||
executing: true,
|
||||
abort: () => {
|
||||
abortController.abort();
|
||||
this.#updateAction(key, actionId, { status: 'aborted' });
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
this.#actionRunner.runAction(data, abortController.signal),
|
||||
new Promise((resolve) => setTimeout(resolve, MIN_SPINNER_TIME)),
|
||||
]);
|
||||
|
||||
if (!abortController.signal.aborted) {
|
||||
this.#updateAction(key, actionId, { status: 'complete' });
|
||||
}
|
||||
} catch (error) {
|
||||
this.#updateAction(key, actionId, { status: 'failed', error: 'Action failed' });
|
||||
|
||||
throw error;
|
||||
} finally {
|
||||
this.#updateAction(key, actionId, { executing: false });
|
||||
}
|
||||
});
|
||||
artifact.runner.runAction(data);
|
||||
}
|
||||
|
||||
#updateAction(artifactId: string, actionId: string, newState: ActionStateUpdate) {
|
||||
#getArtifact(id: string) {
|
||||
const artifacts = this.artifacts.get();
|
||||
const artifact = artifacts[artifactId];
|
||||
|
||||
if (!artifact) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actions = artifact.actions.get();
|
||||
|
||||
artifact.actions.setKey(actionId, { ...actions[actionId], ...newState });
|
||||
return artifacts[id];
|
||||
}
|
||||
}
|
||||
|
||||
export function getArtifactKey(artifactId: string, messageId: string) {
|
||||
return `${artifactId}_${messageId}`;
|
||||
}
|
||||
|
||||
export const workbenchStore = new WorkbenchStore();
|
||||
|
||||
if (import.meta.hot) {
|
||||
|
||||
Reference in New Issue
Block a user