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

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>
);
});