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

2024-07-17 20:54:46 +02:00
parent b4420a22bb
commit 621b8804d8
50 changed files with 2979 additions and 423 deletions
--- a/packages/bolt/app/components/chat/Artifact.tsx
+++ b/packages/bolt/app/components/chat/Artifact.tsx
@@ -1,34 +1,176 @@
 import { useStore } from '@nanostores/react';
-import { workspaceStore } from '~/lib/stores/workspace';
+import { AnimatePresence, motion } from 'framer-motion';
+import { computed } from 'nanostores';
+import { useState } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import { getArtifactKey, workbenchStore, type ActionState } from '../../lib/stores/workbench';
+import { classNames } from '../../utils/classNames';
+import { cubicEasingFn } from '../../utils/easings';
+import { IconButton } from '../ui/IconButton';
+
+const highlighterOptions = {
+  langs: ['shell'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const shellHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.shellHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.shellHighlighter = shellHighlighter;
+}

 interface ArtifactProps {
+  artifactId: string;
  messageId: string;
 }

-export function Artifact({ messageId }: ArtifactProps) {
-  const artifacts = useStore(workspaceStore.artifacts);
+export function Artifact({ artifactId, messageId }: ArtifactProps) {
+  const [showActions, setShowActions] = useState(false);

-  const artifact = artifacts[messageId];
+  const artifacts = useStore(workbenchStore.artifacts);
+  const artifact = artifacts[getArtifactKey(artifactId, messageId)];
+
+  const actions = useStore(
+    computed(artifact.actions, (actions) => {
+      return Object.values(actions);
+    }),
+  );

  return (
-    <button
-      className="flex border rounded-lg overflow-hidden items-stretch bg-gray-50/25 w-full"
-      onClick={() => {
-        const showWorkspace = workspaceStore.showWorkspace.get();
-        workspaceStore.showWorkspace.set(!showWorkspace);
-      }}
-    >
-      <div className="border-r flex items-center px-6 bg-gray-100/50">
-        {!artifact?.closed ? (
-          <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
-        ) : (
-          <div className="i-ph:code-bold scale-130 text-gray-600"></div>
+    <div className="flex flex-col overflow-hidden border rounded-lg w-full">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-gray-50/25 w-full overflow-hidden"
+          onClick={() => {
+            const showWorkbench = workbenchStore.showWorkbench.get();
+            workbenchStore.showWorkbench.set(!showWorkbench);
+          }}
+        >
+          <div className="flex items-center px-6 bg-gray-100/50">
+            {!artifact?.closed ? (
+              <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
+            ) : (
+              <div className="i-ph:code-bold scale-130 text-gray-600"></div>
+            )}
+          </div>
+          <div className="px-4 p-3 w-full text-left">
+            <div className="w-full">{artifact?.title}</div>
+            <small className="inline-block w-full w-full">Click to open Workbench</small>
+          </div>
+        </button>
+        <AnimatePresence>
+          {actions.length && (
+            <motion.button
+              initial={{ width: 0 }}
+              animate={{ width: 'auto' }}
+              exit={{ width: 0 }}
+              transition={{ duration: 0.15, ease: cubicEasingFn }}
+              className="hover:bg-gray-200"
+              onClick={() => setShowActions(!showActions)}
+            >
+              <div className="p-4">
+                <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {showActions && actions.length > 0 && (
+          <motion.div
+            className="actions"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="p-4 text-left border-t">
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15 }}
+              >
+                <h4 className="font-semibold mb-2">Actions</h4>
+                <ul className="list-none space-y-2.5">
+                  {actions.map((action, index) => {
+                    const { status, type, content, abort } = action;
+
+                    return (
+                      <li key={index} className={classNames(getTextColor(action.status))}>
+                        <div className="flex items-center gap-1.5">
+                          <div className="text-lg">
+                            {status === 'running' ? (
+                              <div className="i-svg-spinners:90-ring-with-bg"></div>
+                            ) : status === 'pending' ? (
+                              <div className="i-ph:circle-duotone"></div>
+                            ) : status === 'complete' ? (
+                              <div className="i-ph:check-circle-duotone"></div>
+                            ) : status === 'failed' || status === 'aborted' ? (
+                              <div className="i-ph:x-circle-duotone"></div>
+                            ) : null}
+                          </div>
+                          {type === 'file' ? (
+                            <div>
+                              Create <code className="bg-gray-100 text-gray-700">{action.filePath}</code>
+                            </div>
+                          ) : type === 'shell' ? (
+                            <div className="flex items-center w-full min-h-[28px]">
+                              <span className="flex-1">Run command</span>
+                              {abort !== undefined && status === 'running' && (
+                                <IconButton icon="i-ph:x-circle" size="xl" onClick={() => abort()} />
+                              )}
+                            </div>
+                          ) : null}
+                        </div>
+                        {type === 'shell' && <ShellCodeBlock classsName="mt-1" code={content} />}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </motion.div>
+            </div>
+          </motion.div>
        )}
-      </div>
-      <div className="flex flex-col items-center px-4 p-2.5">
-        <div className="text-left w-full">{artifact?.title}</div>
-        <small className="w-full text-left">Click to open code</small>
-      </div>
-    </button>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function getTextColor(status: ActionState['status']) {
+  switch (status) {
+    case 'pending': {
+      return 'text-gray-500';
+    }
+    case 'running': {
+      return 'text-gray-1000';
+    }
+    case 'complete': {
+      return 'text-positive-600';
+    }
+    case 'aborted': {
+      return 'text-gray-600';
+    }
+    case 'failed': {
+      return 'text-negative-600';
+    }
+    default: {
+      return undefined;
+    }
+  }
+}
+
+interface ShellCodeBlockProps {
+  classsName?: string;
+  code: string;
+}
+
+function ShellCodeBlock({ classsName, code }: ShellCodeBlockProps) {
+  return (
+    <div
+      className={classNames('text-xs', classsName)}
+      dangerouslySetInnerHTML={{ __html: shellHighlighter.codeToHtml(code, { lang: 'shell', theme: 'dark-plus' }) }}
+    ></div>
  );
 }
--- a/packages/bolt/app/components/chat/BaseChat.tsx
+++ b/packages/bolt/app/components/chat/BaseChat.tsx
@@ -2,16 +2,14 @@ import type { Message } from 'ai';
 import type { LegacyRef } from 'react';
 import React from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
-import { IconButton } from '~/components/ui/IconButton';
-import { Workspace } from '~/components/workspace/Workspace.client';
-import { classNames } from '~/utils/classNames';
+import { classNames } from '../../utils/classNames';
+import { IconButton } from '../ui/IconButton';
+import { Workbench } from '../workbench/Workbench.client';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';

 interface BaseChatProps {
  textareaRef?: LegacyRef<HTMLTextAreaElement> | undefined;
-  messagesSlot?: React.ReactNode;
-  workspaceSlot?: React.ReactNode;
  chatStarted?: boolean;
  isStreaming?: boolean;
  messages?: Message[];
@@ -80,14 +78,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
              </ClientOnly>
              <div
                className={classNames('relative w-full max-w-3xl md:mx-auto z-2', {
-                  'sticky bottom-0 bg-bolt-elements-app-backgroundColor': chatStarted,
+                  'sticky bottom-0': chatStarted,
                })}
              >
                <div
-                  className={classNames('shadow-sm mb-6 border border-gray-200 bg-white rounded-lg overflow-hidden')}
+                  className={classNames(
+                    'shadow-sm border border-gray-200 bg-white/85 backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
+                  )}
                >
                  <textarea
                    ref={textareaRef}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none bg-transparent`}
                    onKeyDown={(event) => {
                      if (event.key === 'Enter') {
                        if (event.shiftKey) {
@@ -103,7 +104,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    onChange={(event) => {
                      handleInputChange?.(event);
                    }}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none`}
                    style={{
                      minHeight: TEXTAREA_MIN_HEIGHT,
                      maxHeight: TEXTAREA_MAX_HEIGHT,
@@ -146,10 +146,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    ) : null}
                  </div>
                </div>
+                <div className="bg-white pb-6">{/* Ghost Element */}</div>
              </div>
            </div>
          </div>
-          <ClientOnly>{() => <Workspace chatStarted={chatStarted} />}</ClientOnly>
+          <ClientOnly>{() => <Workbench chatStarted={chatStarted} />}</ClientOnly>
        </div>
      </div>
    );
--- a/packages/bolt/app/components/chat/Chat.client.tsx
+++ b/packages/bolt/app/components/chat/Chat.client.tsx
@@ -1,9 +1,9 @@
 import { useChat } from 'ai/react';
 import { useAnimate } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
-import { useMessageParser, usePromptEnhancer } from '~/lib/hooks';
-import { cubicEasingFn } from '~/utils/easings';
-import { createScopedLogger } from '~/utils/logger';
+import { useMessageParser, usePromptEnhancer } from '../../lib/hooks';
+import { cubicEasingFn } from '../../utils/easings';
+import { createScopedLogger } from '../../utils/logger';
 import { BaseChat } from './BaseChat';

 const logger = createScopedLogger('Chat');
--- a/packages/bolt/app/components/chat/CodeBlock.tsx
+++ b/packages/bolt/app/components/chat/CodeBlock.tsx
@@ -1,82 +1,81 @@
 import { memo, useEffect, useState } from 'react';
-import {
-  bundledLanguages,
-  codeToHtml,
-  isSpecialLang,
-  type BundledLanguage,
-  type BundledTheme,
-  type SpecialLanguage,
-} from 'shiki';
-import { classNames } from '~/utils/classNames';
-import { createScopedLogger } from '~/utils/logger';
+import { bundledLanguages, codeToHtml, isSpecialLang, type BundledLanguage, type SpecialLanguage } from 'shiki';
+import { classNames } from '../../utils/classNames';
+import { createScopedLogger } from '../../utils/logger';
 import styles from './CodeBlock.module.scss';

 const logger = createScopedLogger('CodeBlock');

 interface CodeBlockProps {
+  className?: string;
  code: string;
-  language?: BundledLanguage;
-  theme?: BundledTheme | SpecialLanguage;
+  language?: BundledLanguage | SpecialLanguage;
+  theme?: 'light-plus' | 'dark-plus';
+  disableCopy?: boolean;
 }

-export const CodeBlock = memo(({ code, language, theme }: CodeBlockProps) => {
-  const [html, setHTML] = useState<string | undefined>(undefined);
-  const [copied, setCopied] = useState(false);
+export const CodeBlock = memo(
+  ({ className, code, language = 'plaintext', theme = 'dark-plus', disableCopy = false }: CodeBlockProps) => {
+    const [html, setHTML] = useState<string | undefined>(undefined);
+    const [copied, setCopied] = useState(false);

-  const copyToClipboard = () => {
-    if (copied) {
-      return;
-    }
+    const copyToClipboard = () => {
+      if (copied) {
+        return;
+      }

-    navigator.clipboard.writeText(code);
+      navigator.clipboard.writeText(code);

-    setCopied(true);
+      setCopied(true);

-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
-
-  useEffect(() => {
-    if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
-      logger.warn(`Unsupported language '${language}'`);
-    }
-
-    logger.trace(`Language = ${language}`);
-
-    const processCode = async () => {
-      setHTML(await codeToHtml(code, { lang: language ?? 'plaintext', theme: theme ?? 'dark-plus' }));
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
    };

-    processCode();
-  }, [code]);
+    useEffect(() => {
+      if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
+        logger.warn(`Unsupported language '${language}'`);
+      }

-  return (
-    <div className="relative group">
-      <div
-        className={classNames(
-          styles.CopyButtonContainer,
-          'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
-          {
-            'rounded-l-0 opacity-100': copied,
-          },
-        )}
-      >
-        <button
+      logger.trace(`Language = ${language}`);
+
+      const processCode = async () => {
+        setHTML(await codeToHtml(code, { lang: language, theme }));
+      };
+
+      processCode();
+    }, [code]);
+
+    return (
+      <div className={classNames('relative group text-left', className)}>
+        <div
          className={classNames(
-            'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+            styles.CopyButtonContainer,
+            'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
            {
-              'before:opacity-0': !copied,
-              'before:opacity-100': copied,
+              'rounded-l-0 opacity-100': copied,
            },
          )}
-          title="Copy Code"
-          onClick={() => copyToClipboard()}
        >
-          <div className="i-ph:clipboard-text-duotone"></div>
-        </button>
+          {!disableCopy && (
+            <button
+              className={classNames(
+                'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+                {
+                  'before:opacity-0': !copied,
+                  'before:opacity-100': copied,
+                },
+              )}
+              title="Copy Code"
+              onClick={() => copyToClipboard()}
+            >
+              <div className="i-ph:clipboard-text-duotone"></div>
+            </button>
+          )}
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
      </div>
-      <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
-    </div>
-  );
-});
+    );
+  },
+);
--- a/packages/bolt/app/components/chat/Markdown.module.scss
+++ b/packages/bolt/app/components/chat/Markdown.module.scss
@@ -6,6 +6,12 @@ $color-link: #3498db;
 $color-code-bg: #f8f8f8;
 $color-blockquote-border: #dfe2e5;

+@mixin not-inside-actions {
+  &:not(:has(:global(.actions)), :global(.actions *)) {
+    @content;
+  }
+}
+
 .MarkdownContent {
  line-height: 1.6;
  color: $color-text;
@@ -15,11 +21,13 @@ $color-blockquote-border: #dfe2e5;
  }

  :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-    color: $color-heading;
+    @include not-inside-actions {
+      margin-top: 24px;
+      margin-bottom: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: $color-heading;
+    }
  }

  h1 {
@@ -68,9 +76,12 @@ $color-blockquote-border: #dfe2e5;
  :not(pre) > code {
    font-family: $font-mono;
    font-size: 14px;
-    background-color: $color-code-bg;
    border-radius: 6px;
    padding: 0.2em 0.4em;
+
+    @include not-inside-actions {
+      background-color: $color-code-bg;
+    }
  }

  pre {
@@ -83,6 +94,7 @@ $color-blockquote-border: #dfe2e5;
    font-size: 14px;
    background: transparent;
    overflow-x: auto;
+    min-width: 0;
  }

  blockquote {
@@ -93,25 +105,35 @@ $color-blockquote-border: #dfe2e5;
  }

  :is(ul, ol) {
-    padding-left: 2em;
-    margin-top: 0;
-    margin-bottom: 24px;
+    @include not-inside-actions {
+      padding-left: 2em;
+      margin-top: 0;
+      margin-bottom: 24px;
+    }
  }

  ul {
-    list-style-type: disc;
+    @include not-inside-actions {
+      list-style-type: disc;
+    }
  }

  ol {
-    list-style-type: decimal;
+    @include not-inside-actions {
+      list-style-type: decimal;
+    }
  }

-  li + li {
-    margin-top: 8px;
-  }
+  li {
+    @include not-inside-actions {
+      & + li {
+        margin-top: 8px;
+      }

-  li > *:not(:last-child) {
-    margin-bottom: 16px;
+      > *:not(:last-child) {
+        margin-bottom: 16px;
+      }
+    }
  }

  img {
--- a/packages/bolt/app/components/chat/Markdown.tsx
+++ b/packages/bolt/app/components/chat/Markdown.tsx
@@ -1,10 +1,11 @@
 import { memo, useMemo } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import type { BundledLanguage } from 'shiki';
-import { createScopedLogger } from '~/utils/logger';
-import { rehypePlugins, remarkPlugins } from '~/utils/markdown';
+import { createScopedLogger } from '../../utils/logger';
+import { rehypePlugins, remarkPlugins } from '../../utils/markdown';
 import { Artifact } from './Artifact';
 import { CodeBlock } from './CodeBlock';
+
 import styles from './Markdown.module.scss';

 const logger = createScopedLogger('MarkdownComponent');
@@ -20,13 +21,18 @@ export const Markdown = memo(({ children }: MarkdownProps) => {
    return {
      div: ({ className, children, node, ...props }) => {
        if (className?.includes('__boltArtifact__')) {
+          const artifactId = node?.properties.dataArtifactId as string;
          const messageId = node?.properties.dataMessageId as string;

-          if (!messageId) {
-            logger.warn(`Invalud message id ${messageId}`);
+          if (!artifactId) {
+            logger.debug(`Invalid artifact id ${messageId}`);
          }

-          return <Artifact messageId={messageId} />;
+          if (!messageId) {
+            logger.debug(`Invalid message id ${messageId}`);
+          }
+
+          return <Artifact artifactId={artifactId} messageId={messageId} />;
        }

        return (
--- a/packages/bolt/app/components/chat/Messages.client.tsx
+++ b/packages/bolt/app/components/chat/Messages.client.tsx
@@ -1,5 +1,5 @@
 import type { Message } from 'ai';
-import { classNames } from '~/utils/classNames';
+import { classNames } from '../../utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';

@@ -50,7 +50,9 @@ export function Messages(props: MessagesProps) {
                  >
                    <div className={isUserMessage ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
                  </div>
-                  {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  <div className="grid grid-col-1 w-full">
+                    {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  </div>
                </div>
              </div>
            );