iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: implement light and dark theme (#30)

Browse Source
This commit is contained in:
Dominic Elm
2024-08-08 15:56:36 +02:00
committed by GitHub
parent e8447db417
commit 4b59a79baa
35 changed files with 799 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
packages/bolt/app/components/chat/Artifact.tsx
View File

@@ -4,7 +4,6 @@ import { computed } from 'nanostores';
import { memo, useEffect, useRef, useState } from 'react';
import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
import type { ActionState } from '~/lib/runtime/action-runner';
import { chatStore } from '~/lib/stores/chat';
import { workbenchStore } from '~/lib/stores/workbench';
import { classNames } from '~/utils/classNames';
import { cubicEasingFn } from '~/utils/easings';
@@ -29,7 +28,6 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
const userToggledActions = useRef(false);
const [showActions, setShowActions] = useState(false);
const chat = useStore(chatStore);
const artifacts = useStore(workbenchStore.artifacts);
const artifact = artifacts[messageId];
@@ -51,27 +49,21 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
}, [actions]);
return (
<div className="flex flex-col overflow-hidden border rounded-lg w-full">
<div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
<div className="flex">
<button
className="flex items-stretch bg-gray-50/25 w-full overflow-hidden"
className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover 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 && !chat.aborted ? (
<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 className="px-5 p-3.5 w-full text-left">
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
<div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
</div>
</button>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
<AnimatePresence>
{actions.length && (
<motion.button
@@ -79,7 +71,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
animate={{ width: 'auto' }}
exit={{ width: 0 }}
transition={{ duration: 0.15, ease: cubicEasingFn }}
className="hover:bg-gray-200"
className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
onClick={toggleActions}
>
<div className="p-4">
@@ -98,7 +90,8 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
exit={{ height: '0px' }}
transition={{ duration: 0.15 }}
>
<div className="p-4 text-left border-t">
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
<div className="p-5 text-left bg-bolt-elements-actions-background">
<ActionList actions={actions} />
</div>
</motion.div>
@@ -108,29 +101,6 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
);
});
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;
@@ -140,7 +110,12 @@ function ShellCodeBlock({ classsName, code }: ShellCodeBlockProps) {
return (
<div
className={classNames('text-xs', classsName)}
dangerouslySetInnerHTML={{ __html: shellHighlighter.codeToHtml(code, { lang: 'shell', theme: 'dark-plus' }) }}
dangerouslySetInnerHTML={{
__html: shellHighlighter.codeToHtml(code, {
lang: 'shell',
theme: 'dark-plus',
}),
}}
></div>
);
}
@@ -160,6 +135,7 @@ const ActionList = memo(({ actions }: ActionListProps) => {
<ul className="list-none space-y-2.5">
{actions.map((action, index) => {
const { status, type, content } = action;
const isLast = index === actions.length - 1;
return (
<motion.li
@@ -172,21 +148,24 @@ const ActionList = memo(({ actions }: ActionListProps) => {
ease: cubicEasingFn,
}}
>
<div className="flex items-center gap-1.5">
<div className={classNames('text-lg', getTextColor(action.status))}>
<div className="flex items-center gap-1.5 text-sm">
<div className={classNames('text-lg', getIconColor(action.status))}>
{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>
<div className="i-ph:check"></div>
) : status === 'failed' || status === 'aborted' ? (
<div className="i-ph:x-circle-duotone"></div>
<div className="i-ph:x"></div>
) : null}
</div>
{type === 'file' ? (
<div>
Create <code className="bg-gray-100 text-gray-700">{action.filePath}</code>
Create{' '}
<code className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md">
{action.filePath}
</code>
</div>
) : type === 'shell' ? (
<div className="flex items-center w-full min-h-[28px]">
@@ -194,7 +173,14 @@ const ActionList = memo(({ actions }: ActionListProps) => {
</div>
) : null}
</div>
{type === 'shell' && <ShellCodeBlock classsName="mt-1" code={content} />}
{type === 'shell' && (
<ShellCodeBlock
classsName={classNames('mt-1', {
'mb-3.5': !isLast,
})}
code={content}
/>
)}
</motion.li>
);
})}
@@ -202,3 +188,26 @@ const ActionList = memo(({ actions }: ActionListProps) => {
</motion.div>
);
});
function getIconColor(status: ActionState['status']) {
switch (status) {
case 'pending': {
return 'text-bolt-elements-textTertiary';
}
case 'running': {
return 'text-bolt-elements-loader-progress';
}
case 'complete': {
return 'text-bolt-elements-icon-success';
}
case 'aborted': {
return 'text-bolt-elements-textSecondary';
}
case 'failed': {
return 'text-bolt-elements-icon-error';
}
default: {
return undefined;
}
}
}

42
packages/bolt/app/components/chat/BaseChat.tsx
View File

@@ -32,7 +32,7 @@ const EXAMPLE_PROMPTS = [
{ text: 'How do I center a div?' },
];
const TEXTAREA_MIN_HEIGHT = 72;
const TEXTAREA_MIN_HEIGHT = 76;
export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
(
@@ -56,14 +56,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
return (
<div ref={ref} className="relative flex h-full w-full overflow-hidden ">
<div ref={ref} className="relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1">
<ClientOnly>{() => <Menu />}</ClientOnly>
<div ref={scrollRef} className="flex overflow-scroll w-full h-full">
<div className="flex flex-col w-full h-full px-6">
{!chatStarted && (
<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>
<h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">
Where ideas begin
</h1>
<p className="mb-4 text-center text-bolt-elements-textSecondary">
Bring ideas to life in seconds or get help on existing projects.
</p>
</div>
)}
<div
@@ -76,7 +80,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
return chatStarted ? (
<Messages
ref={messageRef}
className="flex flex-col w-full flex-1 max-w-2xl px-4 pb-10 mx-auto z-1"
className="flex flex-col w-full flex-1 max-w-2xl px-4 pb-6 mx-auto z-1"
messages={messages}
isStreaming={isStreaming}
/>
@@ -90,12 +94,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
>
<div
className={classNames(
'shadow-sm border border-gray-200 bg-white/85 backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background 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`}
className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent`}
onKeyDown={(event) => {
if (event.key === 'Enter') {
if (event.shiftKey) {
@@ -136,44 +140,42 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</ClientOnly>
<div className="flex justify-between text-sm p-4 pt-2">
<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
title="Enhance prompt"
disabled={input.length === 0 || enhancingPrompt}
className={classNames({
'opacity-100!': enhancingPrompt,
'text-accent! pr-1.5 enabled:hover:bg-accent/12!': promptEnhanced,
'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
promptEnhanced,
})}
onClick={() => enhancePrompt?.()}
>
{enhancingPrompt ? (
<>
<div className="i-svg-spinners:90-ring-with-bg text-black text-xl"></div>
<div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl"></div>
<div className="ml-1.5">Enhancing prompt...</div>
</>
) : (
<>
<div className="i-blitz:stars text-xl"></div>
<div className="i-bolt:stars text-xl"></div>
{promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
</>
)}
</IconButton>
</div>
{input.length > 3 ? (
<div className="text-xs">
Use <kbd className="bg-gray-100 p-1 rounded-md">Shift</kbd> +{' '}
<kbd className="bg-gray-100 p-1 rounded-md">Return</kbd> for a new line
<div className="text-xs text-bolt-elements-textTertiary">
Use <kbd className="kdb">Shift</kbd> + <kbd className="kdb">Return</kbd> for a new line
</div>
) : null}
</div>
</div>
<div className="bg-white pb-6">{/* Ghost Element */}</div>
<div className="bg-bolt-elements-background-depth-1 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]">
<div id="examples" className="relative w-full max-w-2xl mx-auto mt-8 flex justify-center">
<div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
{EXAMPLE_PROMPTS.map((examplePrompt, index) => {
return (
<button
@@ -181,7 +183,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
onClick={(event) => {
sendMessage?.(event, examplePrompt.text);
}}
className="group flex items-center gap-2 bg-transparent text-gray-500 hover:text-gray-1000"
className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
>
{examplePrompt.text}
<div className="i-ph:arrow-bend-down-left" />

38
packages/bolt/app/components/chat/Chat.client.tsx
View File

@@ -1,7 +1,7 @@
import type { Message } from 'ai';
import { useChat } from 'ai/react';
import { useAnimate } from 'framer-motion';
import { useEffect, useRef, useState } from 'react';
import { memo, useEffect, useRef, useState } from 'react';
import { cssTransition, toast, ToastContainer } from 'react-toastify';
import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
import { useChatHistory } from '~/lib/persistence';
@@ -9,7 +9,7 @@ import { chatStore } from '~/lib/stores/chat';
import { workbenchStore } from '~/lib/stores/workbench';
import { fileModificationsToHTML } from '~/utils/diff';
import { cubicEasingFn } from '~/utils/easings';
import { createScopedLogger } from '~/utils/logger';
import { createScopedLogger, renderLogger } from '~/utils/logger';
import { BaseChat } from './BaseChat';
const toastAnimation = cssTransition({
@@ -20,12 +20,40 @@ const toastAnimation = cssTransition({
const logger = createScopedLogger('Chat');
export function Chat() {
renderLogger.trace('Chat');
const { ready, initialMessages, storeMessageHistory } = useChatHistory();
return (
<>
{ready && <ChatImpl initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
<ToastContainer position="bottom-right" stacked pauseOnFocusLoss transition={toastAnimation} />
<ToastContainer
closeButton={({ closeToast }) => {
return (
<button className="Toastify__close-button" onClick={closeToast}>
<div className="i-ph:x text-lg" />
</button>
);
}}
icon={({ type }) => {
/**
* @todo Handle more types if we need them. This may require extra color palettes.
*/
switch (type) {
case 'success': {
return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
}
case 'error': {
return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
}
}
return undefined;
}}
position="bottom-right"
pauseOnFocusLoss
transition={toastAnimation}
/>
</>
);
}
@@ -35,7 +63,7 @@ interface ChatProps {
storeMessageHistory: (messages: Message[]) => Promise<void>;
}
export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProps) => {
useShortcuts();
const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -199,4 +227,4 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
}}
/>
);
}
});

61
packages/bolt/app/components/chat/Markdown.module.scss
View File

@@ -1,10 +1,5 @@
$font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace,
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
$color-text: #333;
$color-heading: #2c3e50;
$color-link: #3498db;
$color-code-bg: #f8f8f8;
$color-blockquote-border: #dfe2e5;
$font-mono: ui-monospace, 'Fira Code', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
$code-font-size: 13px;
@mixin not-inside-actions {
&:not(:has(:global(.actions)), :global(.actions *)) {
@@ -14,31 +9,35 @@ $color-blockquote-border: #dfe2e5;
.MarkdownContent {
line-height: 1.6;
color: $color-text;
color: var(--bolt-elements-textPrimary);
> *:not(:last-child) {
margin-bottom: 16px;
margin-block-end: 16px;
}
:global(.artifact) {
margin: 1.5em 0;
}
:is(h1, h2, h3, h4, h5, h6) {
@include not-inside-actions {
margin-top: 24px;
margin-bottom: 16px;
margin-block-start: 24px;
margin-block-end: 16px;
font-weight: 600;
line-height: 1.25;
color: $color-heading;
color: var(--bolt-elements-textPrimary);
}
}
h1 {
font-size: 2em;
border-bottom: 1px solid #eaecef;
border-bottom: 1px solid var(--bolt-elements-borderColor);
padding-bottom: 0.3em;
}
h2 {
font-size: 1.5em;
border-bottom: 1px solid #eaecef;
border-bottom: 1px solid var(--bolt-elements-borderColor);
padding-bottom: 0.3em;
}
@@ -60,13 +59,14 @@ $color-blockquote-border: #dfe2e5;
}
p:not(:last-of-type) {
margin-top: 0;
margin-bottom: 16px;
margin-block-start: 0;
margin-block-end: 16px;
}
a {
color: $color-link;
color: var(--bolt-elements-messages-linkColor);
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: underline;
@@ -75,12 +75,13 @@ $color-blockquote-border: #dfe2e5;
:not(pre) > code {
font-family: $font-mono;
font-size: 14px;
border-radius: 6px;
padding: 0.2em 0.4em;
font-size: $code-font-size;
@include not-inside-actions {
background-color: $color-code-bg;
border-radius: 6px;
padding: 0.2em 0.4em;
background-color: var(--bolt-elements-messages-inlineCode-background);
color: var(--bolt-elements-messages-inlineCode-text);
}
}
@@ -91,7 +92,7 @@ $color-blockquote-border: #dfe2e5;
pre:has(> code) {
font-family: $font-mono;
font-size: 14px;
font-size: $code-font-size;
background: transparent;
overflow-x: auto;
min-width: 0;
@@ -100,15 +101,15 @@ $color-blockquote-border: #dfe2e5;
blockquote {
margin: 0;
padding: 0 1em;
color: #6a737d;
border-left: 0.25em solid $color-blockquote-border;
color: var(--bolt-elements-textTertiary);
border-left: 0.25em solid var(--bolt-elements-borderColor);
}
:is(ul, ol) {
@include not-inside-actions {
padding-left: 2em;
margin-top: 0;
margin-bottom: 24px;
margin-block-start: 0;
margin-block-end: 16px;
}
}
@@ -127,11 +128,11 @@ $color-blockquote-border: #dfe2e5;
li {
@include not-inside-actions {
& + li {
margin-top: 8px;
margin-block-start: 8px;
}
> *:not(:last-child) {
margin-bottom: 16px;
margin-block-end: 16px;
}
}
}
@@ -145,14 +146,14 @@ $color-blockquote-border: #dfe2e5;
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: #e1e4e8;
background-color: var(--bolt-elements-borderColor);
border: 0;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 16px;
margin-block-end: 16px;
:is(th, td) {
padding: 6px 13px;

44
packages/bolt/app/components/chat/Messages.client.tsx
View File

@@ -17,49 +17,41 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
return (
<div id={id} ref={ref} className={props.className}>
{messages.length > 0
? messages.map((message, i) => {
? messages.map((message, index) => {
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';
const isUserMessage = role === 'user';
const isFirst = index === 0;
const isLast = index === messages.length - 1;
return (
<div
key={message.id}
className={classNames('relative overflow-hidden rounded-md p-[1px]', {
key={index}
className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
isStreaming && isLast,
'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,
})}
>
{isUserMessage && (
<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,
},
'flex items-center justify-center min-w-[34px] min-h-[34px] bg-white text-gray-600 rounded-full p-1 self-start',
)}
>
<div className={isUserMessage ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
</div>
<div className="grid grid-col-1 w-full">
{isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
<div className="i-ph:user-fill text-xl"></div>
</div>
)}
<div className="grid grid-col-1 w-full">
{isUserMessage ? <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>}
{isStreaming && (
<div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
)}
</div>
);
});

2
packages/bolt/app/components/chat/SendButton.client.tsx
View File

@@ -13,7 +13,7 @@ export function SendButton({ show, isStreaming, onClick }: SendButtonProps) {
<AnimatePresence>
{show ? (
<motion.button
className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent hover:brightness-110 color-white rounded-md w-[34px] h-[34px]"
className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme"
transition={{ ease: customEasingFn, duration: 0.17 }}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}

2
packages/bolt/app/components/chat/UserMessage.tsx
View File

@@ -7,7 +7,7 @@ interface UserMessageProps {
export function UserMessage({ content }: UserMessageProps) {
return (
<div className="overflow-hidden">
<div className="overflow-hidden pt-[4px]">
<Markdown>{sanitizeUserMessage(content)}</Markdown>
</div>
);