feat: refactor layout and introduce workspace panel and fix some bugs

2024-11-27 14:32:46 +00:00 · 2024-07-12 17:25:41 +02:00 · 2024-07-12 17:25:41 +02:00 · ab9d59a30d
commit ab9d59a30d
parent 5fa2ee53cc
16 changed files with 297 additions and 211 deletions
--- a/packages/bolt/app/components/Header.tsx
+++ b/packages/bolt/app/components/Header.tsx
@ -2,7 +2,7 @@ import { IconButton } from './ui/IconButton';

 export function Header() {
  return (
-    <header className="flex items-center bg-white p-4 border-b border-gray-200">
+    <header className="flex items-center bg-white p-4 border-b border-gray-200 h-[var(--header-height)]">
      <div className="flex items-center gap-2">
        <div className="text-2xl font-semibold text-accent">Bolt</div>
      </div>
--- a/packages/bolt/app/components/chat/Artifact.tsx
+++ b/packages/bolt/app/components/chat/Artifact.tsx
@ -3,17 +3,22 @@ import { workspaceStore } from '~/lib/stores/workspace';

 interface ArtifactProps {
  messageId: string;
-  onClick?: () => void;
 }

-export function Artifact({ messageId, onClick }: ArtifactProps) {
+export function Artifact({ messageId }: ArtifactProps) {
  const artifacts = useStore(workspaceStore.artifacts);

  const artifact = artifacts[messageId];

  return (
-    <button className="flex border rounded-lg overflow-hidden items-stretch bg-gray-50/25 w-full" onClick={onClick}>
-      <div className="border-r flex items-center px-6 bg-gray-50">
+    <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>
        ) : (
--- a/packages/bolt/app/components/chat/BaseChat.tsx
+++ b/packages/bolt/app/components/chat/BaseChat.tsx
@ -1,8 +1,11 @@
+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 { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';

 interface BaseChatProps {
@ -10,6 +13,8 @@ interface BaseChatProps {
  messagesSlot?: React.ReactNode;
  workspaceSlot?: React.ReactNode;
  chatStarted?: boolean;
+  isStreaming?: boolean;
+  messages?: Message[];
  enhancingPrompt?: boolean;
  promptEnhanced?: boolean;
  input?: string;
@ -27,10 +32,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
    {
      textareaRef,
      chatStarted = false,
+      isStreaming = false,
      enhancingPrompt = false,
      promptEnhanced = false,
-      messagesSlot,
-      workspaceSlot,
+      messages,
      input = '',
      sendMessage,
      handleInputChange,
@ -41,14 +46,14 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;

    return (
-      <div ref={ref} className="h-full flex w-full overflow-scroll px-6">
-        <div className="flex flex-col items-center w-full h-full">
-          <div id="chat" className="w-full">
+      <div ref={ref} className="relative flex h-full w-full overflow-hidden ">
+        <div className="flex overflow-scroll w-full h-full">
+          <div id="chat" className="flex flex-col w-full h-full px-6">
            {!chatStarted && (
-              <div id="intro" className="mt-[20vh] mb-14 max-w-2xl mx-auto">
+              <div id="intro" className="mt-[20vh] mb-14 max-w-3xl mx-auto">
                <h2 className="text-4xl text-center font-bold text-slate-800 mb-2">Where ideas begin.</h2>
                <p className="mb-14 text-center">Bring ideas to life in seconds or get help on existing projects.</p>
-                <div className="grid max-md:grid-cols-[repeat(2,1fr)] md:grid-cols-[repeat(2,minmax(200px,1fr))] gap-4">
+                <div className="grid max-md:grid-cols-[repeat(1,1fr)] md:grid-cols-[repeat(2,minmax(300px,1fr))] gap-4">
                  {EXAMPLES.map((suggestion, index) => (
                    <button key={index} className="p-4 rounded-lg shadow-xs bg-white border border-gray-200 text-left">
                      {suggestion.text}
@ -57,20 +62,29 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                </div>
              </div>
            )}
-            {messagesSlot}
-          </div>
            <div
-            className={classNames('w-full md:max-w-[720px] mx-auto', {
-              'fixed bg-bolt-elements-app-backgroundColor bottom-0': chatStarted,
+              className={classNames('pt-10', {
+                'h-full flex flex-col': chatStarted,
+              })}
+            >
+              <ClientOnly>
+                {() => {
+                  return chatStarted ? (
+                    <Messages
+                      className="flex flex-col w-full flex-1 max-w-3xl px-4 pb-10 mx-auto z-1"
+                      messages={messages}
+                      isStreaming={isStreaming}
+                    />
+                  ) : null;
+                }}
+              </ClientOnly>
+              <div
+                className={classNames('relative w-full max-w-3xl md:mx-auto z-2', {
+                  'sticky bottom-0 bg-bolt-elements-app-backgroundColor': chatStarted,
                })}
              >
                <div
-              className={classNames(
-                'relative shadow-sm border border-gray-200 md:mb-6 bg-white rounded-lg overflow-hidden',
-                {
-                  'max-md:rounded-none max-md:border-x-none': chatStarted,
-                },
-              )}
+                  className={classNames('shadow-sm mb-6 border border-gray-200 bg-white rounded-lg overflow-hidden')}
                >
                  <textarea
                    ref={textareaRef}
@ -102,6 +116,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    <div className="flex gap-1 items-center">
                      <IconButton icon="i-ph:microphone-duotone" className="-ml-1" />
                      <IconButton icon="i-ph:plus-circle-duotone" />
+                      <IconButton icon="i-ph:pencil-simple-duotone" />
                      <IconButton
                        disabled={input.length === 0 || enhancingPrompt}
                        className={classNames({
@ -133,7 +148,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                </div>
              </div>
            </div>
-        {workspaceSlot}
+          </div>
+          <ClientOnly>{() => <Workspace chatStarted={chatStarted} />}</ClientOnly>
+        </div>
      </div>
    );
  },
--- a/packages/bolt/app/components/chat/Chat.client.tsx
+++ b/packages/bolt/app/components/chat/Chat.client.tsx
@ -1,13 +1,12 @@
 import { useChat } from 'ai/react';
-import { cubicBezier, useAnimate } from 'framer-motion';
+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 { BaseChat } from './BaseChat';
-import { Messages } from './Messages';

 const logger = createScopedLogger('Chat');
-const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);

 export function Chat() {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -61,10 +60,7 @@ export function Chat() {
      return;
    }

-    await Promise.all([
-      animate('#chat', { height: '100%' }, { duration: 0.3, ease: customEasingFn }),
-      animate('#intro', { opacity: 0, display: 'none' }, { duration: 0.15, ease: customEasingFn }),
-    ]);
+    await animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn });

    setChatStarted(true);
  };
@ -87,17 +83,11 @@ export function Chat() {
      textareaRef={textareaRef}
      input={input}
      chatStarted={chatStarted}
+      isStreaming={isLoading}
      enhancingPrompt={enhancingPrompt}
      promptEnhanced={promptEnhanced}
      sendMessage={sendMessage}
      handleInputChange={handleInputChange}
-      messagesSlot={
-        chatStarted ? (
-          <Messages
-            classNames={{
-              root: 'h-full pt-10',
-              messagesContainer: 'max-w-2xl mx-auto max-md:pb-[calc(140px+1.5rem)] md:pb-[calc(140px+3rem)]',
-            }}
      messages={messages.map((message, i) => {
        if (message.role === 'user') {
          return message;
@ -108,10 +98,6 @@ export function Chat() {
          content: parsedMessages[i] || '',
        };
      })}
-            isLoading={isLoading}
-          />
-        ) : null
-      }
      enhancePrompt={() => {
        enhancePrompt(input, (input) => {
          setInput(input);
--- a/packages/bolt/app/components/chat/CodeBlock.tsx
+++ b/packages/bolt/app/components/chat/CodeBlock.tsx
@ -64,7 +64,7 @@ export const CodeBlock = memo(({ code, language, theme }: CodeBlockProps) => {
      >
        <button
          className={classNames(
-            'flex items-center p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+            '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,
--- a/packages/bolt/app/components/chat/Markdown.module.scss
+++ b/packages/bolt/app/components/chat/Markdown.module.scss
@ -95,7 +95,7 @@ $color-blockquote-border: #dfe2e5;
  :is(ul, ol) {
    padding-left: 2em;
    margin-top: 0;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
  }

  ul {
@ -106,6 +106,14 @@ $color-blockquote-border: #dfe2e5;
    list-style-type: decimal;
  }

+  li + li {
+    margin-top: 8px;
+  }
+
+  li > *:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
  img {
    max-width: 100%;
    box-sizing: border-box;
--- a/packages/bolt/app/components/chat/Markdown.tsx
+++ b/packages/bolt/app/components/chat/Markdown.tsx
@ -1,5 +1,5 @@
-import { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
+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';
@ -16,10 +16,8 @@ interface MarkdownProps {
 export const Markdown = memo(({ children }: MarkdownProps) => {
  logger.trace('Render');

-  return (
-    <ReactMarkdown
-      className={styles.MarkdownContent}
-      components={{
+  const components = useMemo<Components>(() => {
+    return {
      div: ({ className, children, node, ...props }) => {
        if (className?.includes('__boltArtifact__')) {
          const messageId = node?.properties.dataMessageId as string;
@ -56,7 +54,13 @@ export const Markdown = memo(({ children }: MarkdownProps) => {

        return <pre {...rest}>{children}</pre>;
      },
-      }}
+    };
+  }, []);
+
+  return (
+    <ReactMarkdown
+      className={styles.MarkdownContent}
+      components={components}
      remarkPlugins={remarkPlugins}
      rehypePlugins={rehypePlugins}
    >
--- a/packages/bolt/app/components/chat/Messages.client.tsx
+++ b/packages/bolt/app/components/chat/Messages.client.tsx
@ -0,0 +1,62 @@
+import type { Message } from 'ai';
+import { classNames } from '~/utils/classNames';
+import { AssistantMessage } from './AssistantMessage';
+import { UserMessage } from './UserMessage';
+
+interface MessagesProps {
+  id?: string;
+  className?: string;
+  isStreaming?: boolean;
+  messages?: Message[];
+}
+
+export function Messages(props: MessagesProps) {
+  const { id, isStreaming = false, messages = [] } = props;
+
+  return (
+    <div id={id} className={props.className}>
+      {messages.length > 0
+        ? messages.map((message, i) => {
+            const { role, content } = message;
+            const isUser = role === 'user';
+            const isFirst = i === 0;
+            const isLast = i === messages.length - 1;
+            const isUserMessage = message.role === 'user';
+            const isAssistantMessage = message.role === 'assistant';
+
+            return (
+              <div
+                key={message.id}
+                className={classNames('relative overflow-hidden rounded-md p-[1px]', {
+                  'mt-4': !isFirst,
+                  'bg-gray-200': isUserMessage || !isStreaming || (isStreaming && isAssistantMessage && !isLast),
+                  'bg-gradient-to-b from-gray-200 to-transparent': isStreaming && isAssistantMessage && isLast,
+                })}
+              >
+                <div
+                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.375rem-1px)]', {
+                    'bg-white': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                    'bg-gradient-to-b from-white from-30% to-transparent': isStreaming && isLast,
+                  })}
+                >
+                  <div
+                    className={classNames(
+                      'flex items-center justify-center min-w-[34px] min-h-[34px] text-gray-600 rounded-md p-1 self-start',
+                      {
+                        'bg-gray-100': isUserMessage,
+                        'bg-accent text-xl': isAssistantMessage,
+                      },
+                    )}
+                  >
+                    <div className={isUserMessage ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
+                  </div>
+                  {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                </div>
+              </div>
+            );
+          })
+        : null}
+      {isStreaming && <div className="text-center w-full i-svg-spinners:3-dots-fade text-4xl mt-4"></div>}
+    </div>
+  );
+}
--- a/packages/bolt/app/components/chat/Messages.tsx
+++ b/packages/bolt/app/components/chat/Messages.tsx
@ -1,55 +0,0 @@
-import type { Message } from 'ai';
-import { useRef } from 'react';
-import { classNames } from '~/utils/classNames';
-import { AssistantMessage } from './AssistantMessage';
-import { UserMessage } from './UserMessage';
-
-interface MessagesProps {
-  id?: string;
-  classNames?: { root?: string; messagesContainer?: string };
-  isLoading?: boolean;
-  messages?: Message[];
-}
-
-export function Messages(props: MessagesProps) {
-  const { id, isLoading, messages = [] } = props;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div id={id} ref={containerRef} className={props.classNames?.root}>
-      <div className={classNames('flex flex-col', props.classNames?.messagesContainer)}>
-        {messages.length > 0
-          ? messages.map((message, i) => {
-              const { role, content } = message;
-              const isUser = role === 'user';
-              const isFirst = i === 0;
-
-              return (
-                <div
-                  key={message.id}
-                  className={classNames('flex gap-4 border rounded-md p-6 bg-white/80 backdrop-blur-sm', {
-                    'mt-4': !isFirst,
-                  })}
-                >
-                  <div
-                    className={classNames(
-                      'flex items-center justify-center min-w-[34px] min-h-[34px] text-gray-600 rounded-md p-1 self-start',
-                      {
-                        'bg-gray-100': role === 'user',
-                        'bg-accent text-xl': role === 'assistant',
-                      },
-                    )}
-                  >
-                    <div className={role === 'user' ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
-                  </div>
-                  {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
-                </div>
-              );
-            })
-          : null}
-        {isLoading && <div className="text-center w-full i-svg-spinners:3-dots-fade text-4xl mt-4"></div>}
-      </div>
-    </div>
-  );
-}
--- a/packages/bolt/app/components/ui/IconButton.tsx
+++ b/packages/bolt/app/components/ui/IconButton.tsx
@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';

-type IconSize = 'sm' | 'md' | 'xl';
+type IconSize = 'sm' | 'md' | 'xl' | 'xxl';

 interface BaseIconButtonProps {
  size?: IconSize;
@ -64,7 +64,9 @@ function getIconSize(size: IconSize) {
    return 'text-sm';
  } else if (size === 'md') {
    return 'text-md';
-  } else {
+  } else if (size === 'xl') {
    return 'text-xl';
+  } else {
+    return 'text-2xl';
  }
 }
--- a/packages/bolt/app/components/workspace/Workspace.client.tsx
+++ b/packages/bolt/app/components/workspace/Workspace.client.tsx
@ -0,0 +1,55 @@
+import { useStore } from '@nanostores/react';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import { IconButton } from '~/components/ui/IconButton';
+import { cubicEasingFn } from '~/utils/easings';
+import { workspaceStore } from '../../lib/stores/workspace';
+
+interface WorkspaceProps {
+  chatStarted?: boolean;
+}
+
+const workspaceVariants = {
+  closed: {
+    width: 0,
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+  open: {
+    width: '100%',
+    transition: {
+      duration: 0.5,
+      type: 'spring',
+    },
+  },
+} satisfies Variants;
+
+export function Workspace({ chatStarted }: WorkspaceProps) {
+  const showWorkspace = useStore(workspaceStore.showWorkspace);
+
+  return (
+    chatStarted && (
+      <AnimatePresence>
+        {showWorkspace && (
+          <motion.div initial="closed" animate="open" exit="closed" variants={workspaceVariants}>
+            <div className="fixed top-[calc(var(--header-height)+1.5rem)] bottom-6 w-[50vw] mr-4 z-0">
+              <div className="bg-white border border-gray-200 shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
+                <header className="px-3 py-2 border-b border-gray-200">
+                  <IconButton
+                    icon="i-ph:x-circle"
+                    className="ml-auto"
+                    size="xxl"
+                    onClick={() => {
+                      workspaceStore.showWorkspace.set(false);
+                    }}
+                  />
+                </header>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    )
+  );
+}
--- a/packages/bolt/app/components/workspace/WorkspacePanel.tsx
+++ b/packages/bolt/app/components/workspace/WorkspacePanel.tsx
@ -1,3 +0,0 @@
-export function Workspace() {
-  return <div>WORKSPACE PANEL</div>;
-}
--- a/packages/bolt/app/routes/api.enhancer.ts
+++ b/packages/bolt/app/routes/api.enhancer.ts
@ -19,7 +19,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
        {
          role: 'user',
          content: stripIndents`
-            I want you to improve the following prompt.
+            I want you to improve the user prompt that is wrapped in \`<original_prompt>\` tags.

            IMPORTANT: Only respond with the improved prompt and nothing else!

--- a/packages/bolt/app/styles/index.scss
+++ b/packages/bolt/app/styles/index.scss
@ -14,7 +14,7 @@ body {
    mask: linear-gradient(-25deg, transparent 60%, white);
    pointer-events: none;
    position: fixed;
-    top: 0;
+    top: -8px;
    transform-style: flat;
    width: 100vw;
    z-index: -1;
--- a/packages/bolt/app/styles/variables.scss
+++ b/packages/bolt/app/styles/variables.scss
@ -16,6 +16,8 @@
 * Hierarchy: Element Token -> (Element Token | Color Tokens) -> Primitives
 */
 :root {
+  --header-height: 65px;
+
  /* App */
  --bolt-elements-app-backgroundColor: var(--bolt-background-primary);
 }
--- a/packages/bolt/app/utils/easings.ts
+++ b/packages/bolt/app/utils/easings.ts
@ -0,0 +1,3 @@
+import { cubicBezier } from 'framer-motion';
+
+export const cubicEasingFn = cubicBezier(0.4, 0, 0.2, 1);