feat: add first version of workbench, increase token limit, improve system prompt

packages/bolt/app/components/workbench/EditorPanel.tsx

@@ -0,0 +1,21 @@
+import { useStore } from '@nanostores/react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { themeStore } from '../../lib/stores/theme';
+import CodeMirrorEditor from '../editor/codemirror/CodeMirrorEditor';
+import { FileTreePanel } from './FileTreePanel';
+
+export function EditorPanel() {
+  const theme = useStore(themeStore);
+
+  return (
+    <PanelGroup direction="horizontal">
+      <Panel defaultSize={30} minSize={20} collapsible={false}>
+        <FileTreePanel />
+      </Panel>
+      <PanelResizeHandle />
+      <Panel defaultSize={70} minSize={20}>
+        <CodeMirrorEditor theme={theme} settings={{ tabSize: 2 }} />
+      </Panel>
+    </PanelGroup>
+  );
+}

packages/bolt/app/components/workbench/FileTree.tsx

@@ -0,0 +1,3 @@
+export function FileTree() {
+  return <div>File Tree</div>;
+}

packages/bolt/app/components/workbench/FileTreePanel.tsx

@@ -0,0 +1,9 @@
+import { FileTree } from './FileTree';
+
+export function FileTreePanel() {
+  return (
+    <div className="border-r h-full p-4">
+      <FileTree />
+    </div>
+  );
+}

packages/bolt/app/components/workbench/Preview.tsx

@@ -0,0 +1,63 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { workbenchStore } from '../../lib/stores/workbench';
+import { IconButton } from '../ui/IconButton';
+
+export const Preview = memo(() => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [activePreviewIndex] = useState(0);
+  const previews = useStore(workbenchStore.previews);
+  const activePreview = previews[activePreviewIndex];
+
+  const [url, setUrl] = useState('');
+  const [iframeUrl, setIframeUrl] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (activePreview && !iframeUrl) {
+      const { baseUrl } = activePreview;
+
+      setUrl(baseUrl);
+      setIframeUrl(baseUrl);
+    }
+  }, [activePreview, iframeUrl]);
+
+  const reloadPreview = () => {
+    if (iframeRef.current) {
+      iframeRef.current.src = iframeRef.current.src;
+    }
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      <div className="bg-gray-100 rounded-t-lg p-2 flex items-center space-x-1.5">
+        <div className="i-ph:circle-fill text-[#FF5F57]"></div>
+        <div className="i-ph:circle-fill text-[#FEBC2E]"></div>
+        <div className="i-ph:circle-fill text-[#29CC41]"></div>
+        <div className="flex-grow"></div>
+      </div>
+      <div className="bg-white p-2 flex items-center gap-1">
+        <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
+        <div className="flex items-center gap-1 flex-grow bg-gray-100 rounded-full px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 hover:focus-within:bg-white focus-within:bg-white focus-within:ring-2 focus-within:ring-accent">
+          <div className="bg-white rounded-full p-[2px] -ml-1">
+            <div className="i-ph:info-bold text-lg"></div>
+          </div>
+          <input
+            className="w-full bg-transparent outline-none"
+            type="text"
+            value={url}
+            onChange={(event) => {
+              setUrl(event.target.value);
+            }}
+          />
+        </div>
+      </div>
+      <div className="flex-1 bg-white border-t">
+        {activePreview ? (
+          <iframe ref={iframeRef} className="border-none w-full h-full" src={iframeUrl}></iframe>
+        ) : (
+          <div className="flex w-full h-full justify-center items-center">No preview available</div>
+        )}
+      </div>
+    </div>
+  );
+});

packages/bolt/app/components/workbench/Workbench.client.tsx

@@ -0,0 +1,69 @@
+import { useStore } from '@nanostores/react';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { workbenchStore } from '../../lib/stores/workbench';
+import { cubicEasingFn } from '../../utils/easings';
+import { IconButton } from '../ui/IconButton';
+import { EditorPanel } from './EditorPanel';
+import { Preview } from './Preview';
+
+interface WorkspaceProps {
+  chatStarted?: boolean;
+}
+
+const workbenchVariants = {
+  closed: {
+    width: 0,
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+  open: {
+    width: '100%',
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+} satisfies Variants;
+
+export function Workbench({ chatStarted }: WorkspaceProps) {
+  const showWorkbench = useStore(workbenchStore.showWorkbench);
+
+  return (
+    chatStarted && (
+      <AnimatePresence>
+        {showWorkbench && (
+          <motion.div initial="closed" animate="open" exit="closed" variants={workbenchVariants}>
+            <div className="fixed top-[calc(var(--header-height)+1.5rem)] bottom-[calc(1.5rem-1px)] w-[50vw] mr-4 z-0">
+              <div className="flex flex-col bg-white border border-gray-200 shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
+                <div className="px-3 py-2 border-b border-gray-200">
+                  <IconButton
+                    icon="i-ph:x-circle"
+                    className="ml-auto"
+                    size="xxl"
+                    onClick={() => {
+                      workbenchStore.showWorkbench.set(false);
+                    }}
+                  />
+                </div>
+                <div className="flex-1 overflow-hidden">
+                  <PanelGroup direction="vertical">
+                    <Panel defaultSize={50} minSize={20}>
+                      <EditorPanel />
+                    </Panel>
+                    <PanelResizeHandle />
+                    <Panel defaultSize={50} minSize={20}>
+                      <Preview />
+                    </Panel>
+                  </PanelGroup>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    )
+  );
+}