feat(ui): style sidebar and landing page (#27)

packages/bolt/app/components/chat/BaseChat.tsx

@@ -1,15 +1,15 @@
 import type { Message } from 'ai';
-import React, { type LegacyRef, type RefCallback } from 'react';
+import React, { type RefCallback } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
+import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
 import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
 import { Messages } from './Messages.client';
-import { Menu } from '~/components/sidemenu/Menu.client';
 import { SendButton } from './SendButton.client';
 
 interface BaseChatProps {
-  textareaRef?: LegacyRef<HTMLTextAreaElement> | undefined;
+  textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
   messageRef?: RefCallback<HTMLDivElement> | undefined;
   scrollRef?: RefCallback<HTMLDivElement> | undefined;
   chatStarted?: boolean;
@@ -19,12 +19,18 @@ interface BaseChatProps {
   promptEnhanced?: boolean;
   input?: string;
   handleStop?: () => void;
-  sendMessage?: (event: React.UIEvent) => void;
+  sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   enhancePrompt?: () => void;
 }
 
-const EXAMPLES = [{ text: 'Example' }, { text: 'Example' }, { text: 'Example' }, { text: 'Example' }];
+const EXAMPLE_PROMPTS = [
+  { text: 'Build a todo app in React using Tailwind' },
+  { text: 'Build a simple blog using Astro' },
+  { text: 'Create a cookie consent form using Material UI' },
+  { text: 'Make a space invaders game' },
+  { text: 'How do I can center a div?' },
+];
 
 const TEXTAREA_MIN_HEIGHT = 72;
 
@@ -53,22 +59,15 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       <div ref={ref} className="relative flex h-full w-full overflow-hidden ">
         <ClientOnly>{() => <Menu />}</ClientOnly>
         <div ref={scrollRef} className="flex overflow-scroll w-full h-full">
-          <div id="chat" className="flex flex-col w-full h-full px-6">
+          <div className="flex flex-col w-full h-full px-6">
             {!chatStarted && (
-              <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(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}
-                    </button>
-                  ))}
-                </div>
+              <div id="intro" className="mt-[26vh] max-w-2xl mx-auto">
+                <h1 className="text-5xl text-center font-bold text-slate-800 mb-2">Where ideas begin</h1>
+                <p className="mb-4 text-center">Bring ideas to life in seconds or get help on existing projects.</p>
               </div>
             )}
             <div
-              className={classNames('pt-10', {
+              className={classNames('pt-6', {
                 'h-full flex flex-col': chatStarted,
               })}
             >
@@ -77,7 +76,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   return chatStarted ? (
                     <Messages
                       ref={messageRef}
-                      className="flex flex-col w-full flex-1 max-w-3xl px-4 pb-10 mx-auto z-1"
+                      className="flex flex-col w-full flex-1 max-w-2xl px-4 pb-10 mx-auto z-1"
                       messages={messages}
                       isStreaming={isStreaming}
                     />
@@ -85,7 +84,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 }}
               </ClientOnly>
               <div
-                className={classNames('relative w-full max-w-3xl md:mx-auto z-2', {
+                className={classNames('relative w-full max-w-2xl md:mx-auto z-2', {
                   'sticky bottom-0': chatStarted,
                 })}
               >
@@ -172,6 +171,26 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 <div className="bg-white pb-6">{/* Ghost Element */}</div>
               </div>
             </div>
+            {!chatStarted && (
+              <div id="examples" className="relative w-full max-w-2xl mx-auto text-center mt-8 flex justify-center">
+                <div className="flex flex-col items-center space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
+                  {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
+                    return (
+                      <button
+                        key={index}
+                        onClick={(event) => {
+                          sendMessage?.(event, examplePrompt.text);
+                        }}
+                        className="group flex items-center gap-2 bg-transparent text-gray-500 hover:text-gray-1000"
+                      >
+                        {examplePrompt.text}
+                        <div className="i-ph:arrow-bend-down-left" />
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>

packages/bolt/app/components/chat/Chat.client.tsx

@@ -44,7 +44,7 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
 
   const [animationScope, animate] = useAnimate();
 
-  const { messages, isLoading, input, handleInputChange, setInput, handleSubmit, stop, append } = useChat({
+  const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
     api: '/api/chat',
     onError: (error) => {
       logger.error('Request failed\n\n', error);
@@ -61,6 +61,10 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
 
   const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
 
+  useEffect(() => {
+    chatStore.setKey('started', initialMessages.length > 0);
+  }, []);
+
   useEffect(() => {
     parseMessages(messages, isLoading);
 
@@ -101,13 +105,20 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
       return;
     }
 
-    await animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn });
+    await Promise.all([
+      animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
+      animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
+    ]);
+
+    chatStore.setKey('started', true);
 
     setChatStarted(true);
   };
 
-  const sendMessage = async (event: React.UIEvent) => {
-    if (input.length === 0 || isLoading) {
+  const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
+    const _input = messageInput || input;
+
+    if (_input.length === 0 || isLoading) {
       return;
     }
 
@@ -136,9 +147,7 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
        * manually reset the input and we'd have to manually pass in file attachments. However, those
        * aren't relevant here.
        */
-      append({ role: 'user', content: `${diff}\n\n${input}` });
-
-      setInput('');
+      append({ role: 'user', content: `${diff}\n\n${_input}` });
 
       /**
        * After sending a new message we reset all modifications since the model
@@ -146,9 +155,11 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
        */
       workbenchStore.resetAllFileModifications();
     } else {
-      handleSubmit(event);
+      append({ role: 'user', content: _input });
     }
 
+    setInput('');
+
     resetEnhancer();
 
     textareaRef.current?.blur();

packages/bolt/app/components/header/Header.tsx

@@ -1,20 +1,26 @@
+import { useStore } from '@nanostores/react';
 import { ClientOnly } from 'remix-utils/client-only';
-import { IconButton } from '~/components/ui/IconButton';
+import { chatStore } from '~/lib/stores/chat';
+import { classNames } from '~/utils/classNames';
 import { OpenStackBlitz } from './OpenStackBlitz.client';
 
 export function Header() {
+  const chat = useStore(chatStore);
+
   return (
-    <header className="flex items-center bg-white p-4 border-b border-gray-200 h-[var(--header-height)]">
+    <header
+      className={classNames('flex items-center bg-white p-5 border-b h-[var(--header-height)]', {
+        'border-transparent': !chat.started,
+        'border-gray-200': chat.started,
+      })}
+    >
       <div className="flex items-center gap-2">
         <a href="/" className="text-2xl font-semibold text-accent">
-          Bolt
+          <img src="/logo_text.svg" width="60px" alt="Bolt Logo" />
         </a>
       </div>
       <div className="ml-auto flex gap-2">
         <ClientOnly>{() => <OpenStackBlitz />}</ClientOnly>
-        <a href="/logout">
-          <IconButton icon="i-ph:sign-out" />
-        </a>
       </div>
     </header>
   );

packages/bolt/app/components/sidebar/HistoryItem.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { db, deleteId, type ChatHistory } from '~/lib/persistence';
+import { logger } from '~/utils/logger';
+
+export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntries: () => void }) {
+  const [requestingDelete, setRequestingDelete] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const hoverRef = useRef<HTMLDivElement>(null);
+
+  const deleteItem = useCallback((event: React.UIEvent) => {
+    event.preventDefault();
+
+    if (db) {
+      deleteId(db, item.id)
+        .then(() => loadEntries())
+        .catch((error) => {
+          toast.error('Failed to delete conversation');
+          logger.error(error);
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined;
+
+    function mouseEnter() {
+      setHovering(true);
+
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    }
+
+    function mouseLeave() {
+      setHovering(false);
+
+      // wait for animation to finish before unsetting
+      timeout = setTimeout(() => {
+        setRequestingDelete(false);
+      }, 200);
+    }
+
+    hoverRef.current?.addEventListener('mouseenter', mouseEnter);
+    hoverRef.current?.addEventListener('mouseleave', mouseLeave);
+
+    return () => {
+      hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
+      hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={hoverRef}
+      className="group rounded-md hover:bg-gray-100 overflow-hidden flex justify-between items-center px-2 py-1"
+    >
+      <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
+        {item.description}
+        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-white group-hover:from-gray-100 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
+          {hovering && (
+            <div className="flex items-center p-1">
+              {requestingDelete ? (
+                <button className="i-ph:check text-gray-600 hover:text-gray-1000 scale-110" onClick={deleteItem} />
+              ) : (
+                <button
+                  className="i-ph:trash text-gray-600 hover:text-gray-1000 scale-110"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    setRequestingDelete(true);
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </a>
+    </div>
+  );
+}

packages/bolt/app/components/sidebar/Menu.client.tsx

@@ -0,0 +1,114 @@
+import { motion, type Variants } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { IconButton } from '~/components/ui/IconButton';
+import { db, getAll, type ChatHistory } from '~/lib/persistence';
+import { cubicEasingFn } from '~/utils/easings';
+import { HistoryItem } from './HistoryItem';
+import { binDates } from './date-binning';
+
+const menuVariants = {
+  closed: {
+    opacity: 0,
+    left: '-150px',
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+  open: {
+    opacity: 1,
+    left: 0,
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+} satisfies Variants;
+
+export function Menu() {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [list, setList] = useState<ChatHistory[]>([]);
+  const [open, setOpen] = useState(false);
+
+  const loadEntries = useCallback(() => {
+    if (db) {
+      getAll(db)
+        .then((list) => list.filter((item) => item.urlId && item.description))
+        .then(setList)
+        .catch((error) => toast.error(error.message));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      loadEntries();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    function onMouseMove(event: MouseEvent) {
+      if (event.pageX < 80) {
+        setOpen(true);
+      }
+    }
+
+    function onMouseLeave(_event: MouseEvent) {
+      setOpen(false);
+    }
+
+    menuRef.current?.addEventListener('mouseleave', onMouseLeave);
+    window.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      menuRef.current?.removeEventListener('mouseleave', onMouseLeave);
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+
+  return (
+    <motion.div
+      ref={menuRef}
+      initial="closed"
+      animate={open ? 'open' : 'closed'}
+      variants={menuVariants}
+      className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-white border-r rounded-r-3xl border-gray-200 z-max shadow-xl text-sm"
+    >
+      <div className="flex items-center p-4 h-[var(--header-height)]">
+        <img src="/logo_text.svg" width="60px" alt="Bolt Logo" />
+      </div>
+      <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
+        <div className="p-4">
+          <a
+            href="/"
+            className="flex gap-2 items-center text-accent-600 rounded-md bg-accent-600/12 hover:bg-accent-600/15 p-2 font-medium"
+          >
+            <span className="inline-block i-blitz:chat scale-110" />
+            Start new chat
+          </a>
+        </div>
+        <div className="font-semibold pl-6 pr-5 my-2">Your Chats</div>
+        <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
+          {list.length === 0 && <div className="pl-2 text-gray">No previous conversations</div>}
+          {binDates(list).map(({ category, items }) => (
+            <div key={category} className="mt-4 first:mt-0 space-y-1">
+              <div className="text-gray sticky top-0 z-20 bg-white pl-2 pt-2 pb-1">{category}</div>
+              {items.map((item) => (
+                <HistoryItem key={item.id} item={item} loadEntries={loadEntries} />
+              ))}
+            </div>
+          ))}
+        </div>
+        <div className="flex items-center border-t p-4">
+          <a href="/logout">
+            <IconButton className="p-1.5 gap-1.5">
+              <>
+                Logout <span className="i-ph:sign-out text-lg" />
+              </>
+            </IconButton>
+          </a>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

packages/bolt/app/components/sidebar/date-binning.ts

@@ -1,5 +1,5 @@
+import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
 import type { ChatHistory } from '~/lib/persistence';
-import { format, isToday, isYesterday, isThisWeek, isThisYear, subDays, isAfter } from 'date-fns';
 
 type Bin = { category: string; items: ChatHistory[] };
 
@@ -19,6 +19,7 @@ export function binDates(_list: ChatHistory[]) {
       };
 
       binLookup[category] = bin;
+
       bins.push(bin);
     } else {
       binLookup[category].items.push(item);
@@ -38,7 +39,8 @@ function dateCategory(date: Date) {
   }
 
   if (isThisWeek(date)) {
-    return format(date, 'eeee'); // e.g. "Monday"
+    // e.g., "Monday"
+    return format(date, 'eeee');
   }
 
   const thirtyDaysAgo = subDays(new Date(), 30);
@@ -48,8 +50,10 @@ function dateCategory(date: Date) {
   }
 
   if (isThisYear(date)) {
-    return format(date, 'MMMM'); // e.g., "July"
+    // e.g., "July"
+    return format(date, 'MMMM');
   }
 
-  return format(date, 'MMMM yyyy'); // e.g. "July 2023"
+  // e.g., "July 2023"
+  return format(date, 'MMMM yyyy');
 }

packages/bolt/app/components/sidemenu/HistoryItem.tsx

@@ -1,88 +0,0 @@
-import { toast } from 'react-toastify';
-import { useCallback, useEffect, useState, useRef } from 'react';
-import { motion, type Variants } from 'framer-motion';
-import { cubicEasingFn } from '~/utils/easings';
-import { IconButton } from '~/components/ui/IconButton';
-import { db, deleteId, type ChatHistory } from '~/lib/persistence';
-
-const iconVariants = {
-  closed: {
-    transform: 'translate(40px,0)',
-    opacity: 0,
-    transition: {
-      duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
-  open: {
-    transform: 'translate(0,0)',
-    opacity: 1,
-    transition: {
-      duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
-} satisfies Variants;
-
-export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntries: () => void }) {
-  const [requestingDelete, setRequestingDelete] = useState(false);
-  const [hovering, setHovering] = useState(false);
-  const hoverRef = useRef<HTMLDivElement>(null);
-
-  const deleteItem = useCallback(() => {
-    if (db) {
-      deleteId(db, item.id)
-        .then(() => loadEntries())
-        .catch((error) => toast.error(error.message));
-    }
-  }, []);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout | undefined;
-
-    function mouseEnter() {
-      setHovering(true);
-
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    }
-
-    function mouseLeave() {
-      setHovering(false);
-
-      // wait for animation to finish before unsetting
-      timeout = setTimeout(() => {
-        setRequestingDelete(false);
-      }, 200);
-    }
-
-    hoverRef.current?.addEventListener('mouseenter', mouseEnter);
-    hoverRef.current?.addEventListener('mouseleave', mouseLeave);
-
-    return () => {
-      hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
-      hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
-    };
-  }, []);
-
-  return (
-    <div className="ml-3 mr-1">
-      <div
-        ref={hoverRef}
-        className="rounded-md hover:bg-gray-200 p-1 overflow-hidden flex justify-between items-center"
-      >
-        <a href={`/chat/${item.urlId}`} className="truncate block pr-1">
-          {item.description}
-        </a>
-        <motion.div initial="closed" animate={hovering ? 'open' : 'closed'} variants={iconVariants}>
-          {requestingDelete ? (
-            <IconButton icon="i-ph:check" onClick={deleteItem} />
-          ) : (
-            <IconButton icon="i-ph:trash" onClick={() => setRequestingDelete(true)} />
-          )}
-        </motion.div>
-      </div>
-    </div>
-  );
-}

packages/bolt/app/components/sidemenu/Menu.client.tsx

@@ -1,99 +0,0 @@
-import { Fragment, useEffect, useState, useRef, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { motion, type Variants } from 'framer-motion';
-import { cubicEasingFn } from '~/utils/easings';
-import { db, getAll, type ChatHistory } from '~/lib/persistence';
-import { HistoryItem } from './HistoryItem';
-import { binDates } from './date-binning';
-
-const menuVariants = {
-  closed: {
-    left: '-400px',
-    transition: {
-      duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
-  open: {
-    left: 0,
-    transition: {
-      duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
-} satisfies Variants;
-
-export function Menu() {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [list, setList] = useState<ChatHistory[]>([]);
-  const [open, setOpen] = useState(false);
-
-  const loadEntries = useCallback(() => {
-    if (db) {
-      getAll(db)
-        .then((list) => list.filter((item) => item.urlId && item.description))
-        .then(setList)
-        .catch((error) => toast.error(error.message));
-    }
-  }, []);
-
-  useEffect(() => {
-    if (open) {
-      loadEntries();
-    }
-  }, [open]);
-
-  useEffect(() => {
-    function onMouseMove(event: MouseEvent) {
-      if (event.pageX < 80) {
-        setOpen(true);
-      }
-    }
-
-    function onMouseLeave(_event: MouseEvent) {
-      setOpen(false);
-    }
-
-    menuRef.current?.addEventListener('mouseleave', onMouseLeave);
-    window.addEventListener('mousemove', onMouseMove);
-
-    return () => {
-      menuRef.current?.removeEventListener('mouseleave', onMouseLeave);
-      window.removeEventListener('mousemove', onMouseMove);
-    };
-  }, []);
-
-  return (
-    <motion.div
-      ref={menuRef}
-      initial="closed"
-      animate={open ? 'open' : 'closed'}
-      variants={menuVariants}
-      className="flex flex-col side-menu fixed left-[-400px] top-0 w-[400px] h-full bg-white border-r border-gray-200 z-max"
-    >
-      <div className="flex items-center border-b border-gray-200 bg-white p-4 h-[var(--header-height)]">
-        <a href="/" className="text-2xl font-semibold">
-          Bolt
-        </a>
-      </div>
-      <div className="m-4 ml-2 mt-7">
-        <a href="/" className="text-white rounded-md bg-accent-600 p-2 font-semibold">
-          Start new chat
-        </a>
-      </div>
-      <div className="font-semibold m-2 ml-4">Your Chats</div>
-      <div className="overflow-auto pb-2">
-        {list.length === 0 && <div className="ml-4 text-gray">No previous conversations</div>}
-        {binDates(list).map(({ category, items }) => (
-          <Fragment key={category}>
-            <div className="ml-4 text-gray m-2">{category}</div>
-            {items.map((item) => (
-              <HistoryItem key={item.id} item={item} loadEntries={loadEntries} />
-            ))}
-          </Fragment>
-        ))}
-      </div>
-      <div className="border-t border-gray-200 h-[var(--header-height)]" />
-    </motion.div>
-  );
-}

packages/bolt/app/lib/stores/chat.ts

@@ -1,5 +1,6 @@
 import { map } from 'nanostores';
 
 export const chatStore = map({
+  started: false,
   aborted: false,
 });

packages/bolt/app/styles/index.scss

@@ -4,30 +4,6 @@
 @import './components/terminal.scss';
 @import './components/resize-handle.scss';
 
-body {
-  --at-apply: bg-bolt-elements-app-backgroundColor;
-
-  font-family: 'Inter', sans-serif;
-
-  &:before {
-    --line: color-mix(in lch, canvasText, transparent 93%);
-    --size: 50px;
-
-    content: '';
-    height: 100vh;
-    mask: linear-gradient(-25deg, transparent 60%, white);
-    pointer-events: none;
-    position: fixed;
-    top: -8px;
-    transform-style: flat;
-    width: 100vw;
-    z-index: -1;
-    background:
-      linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
-      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
-  }
-}
-
 html,
 body {
   height: 100%;

packages/bolt/icons/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.73 8.856-.015-.04-.009-.022.024.062Zm0 0c-.05.115-.104.223-.175.323a1.6 1.6 0 0 1-.377.377c-.1.07-.207.125-.323.175l-.04-.016-.022-.008s0 0 0 0L8.75 9.69l-.22-.085-.06-.023h0l-.127-.049-.18.467L9.73 8.856Zm-.98 1.454h0Zm0 0 .043-.017s0 0 0 0l-.044.017Zm-7.462-.567a.5.5 0 0 0-.027-.256A6.233 6.233 0 0 1 .75 7a6.25 6.25 0 1 1 12.459.724l-.483-.188A5.75 5.75 0 1 0 1.67 9.162v.001l.012.03h0c.044.107.078.193.093.263l.488-.11-.488.11c.016.07.023.127.023.2 0 .072-.013.153-.03.25h0l-.004.026h0l-.345 2.073a.5.5 0 0 0 .575.576l2.073-.346h0l.027-.004h0c.096-.017.177-.03.25-.03a.85.85 0 0 1 .2.023c.07.016.156.05.262.093h0l.03.012h.001a5.734 5.734 0 0 0 2.698.396l.188.484a6.233 6.233 0 0 1-3.074-.416l-.136-.055a.5.5 0 0 0-.257-.027l-.027.004h0l-.004.001-.075.012h-.001l-2.392.4h0a3.565 3.565 0 0 1-.293.04.605.605 0 0 1-.289-.037.583.583 0 0 1-.306-.307.604.604 0 0 1-.038-.289c.006-.08.023-.18.041-.292h0l.399-2.393h0l.013-.076h0V9.77l.004-.027Zm9.178-1.76a.5.5 0 0 0-.933 0l-.157.408.206.079-.206-.08-.017.046s0 0 0 0c-.084.218-.136.348-.211.453a1.1 1.1 0 0 1-.26.26c-.105.074-.234.127-.453.21h0l-.045.018h0l-.407.156a.5.5 0 0 0 0 .934l.407.156.079-.205-.079.205.045.018h0c.219.083.348.136.454.21.1.072.187.16.259.26.075.105.127.235.211.453l.246-.094-.246.094.017.045.157.407a.5.5 0 0 0 .933 0l.157-.407h0l.017-.045h0c.084-.218.136-.348.211-.453a1.1 1.1 0 0 1 .26-.26c.105-.074.234-.127.452-.21 0 0 0 0 0 0l.046-.018.407-.156a.5.5 0 0 0 0-.934l-.407-.156-.079.205.079-.205-.045-.018h0c-.219-.083-.348-.136-.454-.21a1.1 1.1 0 0 1-.259-.26c-.075-.105-.127-.235-.21-.453h0l-.018-.045h0l-.157-.407ZM10 6.5c.03 0 .056.018.066.046l.69 1.793c.096.249.142.37.212.467a.957.957 0 0 0 .225.226c.098.07.219.116.467.212l1.794.69a.071.071 0 0 1 0 .133l-1.794.69c-.248.095-.369.142-.467.211a.957.957 0 0 0-.225.226c-.07.097-.116.218-.212.467l-.69 1.793a.071.071 0 0 1-.133 0l-.69-1.793c-.096-.249-.142-.37-.212-.467a.957.957 0 0 0-.225-.226c-.098-.07-.219-.116-.467-.211l-1.794-.69a.071.071 0 0 1 0-.134l1.794-.69c.248-.095.369-.142.467-.211a.957.957 0 0 0 .225-.226c.07-.098.116-.218.212-.467l.69-1.793A.071.071 0 0 1 10 6.5Z"/></svg>

packages/bolt/public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95" height="83" fill="none"><g filter="url(#a)"><path fill="url(#b)" d="M66.657 0H28.343a7.948 7.948 0 0 0-6.887 3.979L2.288 37.235a7.948 7.948 0 0 0 0 7.938L21.456 78.43a7.948 7.948 0 0 0 6.887 3.979h38.314a7.948 7.948 0 0 0 6.886-3.98l19.17-33.256a7.948 7.948 0 0 0 0-7.938L73.542 3.98A7.948 7.948 0 0 0 66.657 0Z"/></g><g filter="url(#c)"><path fill="#fff" fill-rule="evenodd" d="M50.642 59.608c-3.468 0-6.873-1.261-8.827-3.973l-.69 3.198-12.729 6.762 1.374-6.762 9.27-42.04h11.35l-3.279 14.818c2.649-2.9 5.108-3.973 8.26-3.973 6.81 0 11.35 4.477 11.35 12.675 0 8.45-5.233 19.295-16.079 19.295Zm4.351-16.9c0 3.91-2.774 6.874-6.368 6.874-2.018 0-3.847-.757-5.045-2.08l1.766-7.757c1.324-1.324 2.837-2.08 4.603-2.08 2.711 0 5.044 2.017 5.044 5.044Z" clip-rule="evenodd"/></g><defs><filter id="a" width="92.549" height="82.409" x="1.226" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1.717"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/><feBlend in2="shape" result="effect1_innerShadow_615_13380"/></filter><filter id="c" width="38.326" height="48.802" x="28.396" y="16.793" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".072"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.95 0"/><feBlend in2="shape" result="effect1_innerShadow_615_13380"/></filter><linearGradient id="b" x1="47.5" x2="47.5" y1="0" y2="82.409" gradientUnits="userSpaceOnUse"><stop stop-color="#2B5CFF"/><stop offset="1" stop-color="#1A3799"/></linearGradient></defs></svg>

packages/bolt/public/logo_text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="119" height="51" fill="none"><path fill="#000" d="M56.316 44.986c-10.9 0-16.445-6.334-16.445-14.252 0-9.374 7.521-17.861 18.42-17.861 10.9 0 16.446 6.334 16.446 14.251 0 9.374-7.521 17.862-18.421 17.862Zm.446-10.071c3.824 0 6.247-3.42 6.247-7.22 0-3.041-1.976-4.751-5.163-4.751-3.825 0-6.247 3.42-6.247 7.22 0 3.04 1.976 4.75 5.163 4.75ZM86.347 44.225H74.874l9.37-42.246h11.473l-9.37 42.246Z"/><path fill="#000" fill-rule="evenodd" d="M22.488 44.986c-3.505 0-6.947-1.267-8.923-3.99l-.697 3.211L0 51l1.39-6.793L10.76 1.98h11.473L18.92 16.863c2.677-2.913 5.163-3.99 8.35-3.99 6.884 0 11.473 4.497 11.473 12.731 0 8.487-5.29 19.382-16.254 19.382Zm4.398-16.975c0 3.927-2.804 6.904-6.437 6.904-2.04 0-3.889-.76-5.1-2.09l1.785-7.791c1.339-1.33 2.868-2.09 4.653-2.09 2.741 0 5.1 2.027 5.1 5.067Z" clip-rule="evenodd"/><path fill="#000" d="M107.654 44.986c-6.629 0-11.346-2.407-11.346-7.728 0-.443.064-1.52.255-2.407l2.486-11.337h-5.1l2.232-9.881h5.099l1.849-8.36L115.973 0l-1.371 5.285-1.849 8.348H119l-2.231 9.88h-6.247l-1.657 7.475a8.266 8.266 0 0 0-.191 1.456c0 1.457.892 2.47 2.868 2.47.574 0 1.403-.19 1.594-.316v9.12c-1.211.824-3.378 1.267-5.482 1.267Z"/></svg>