Skip to content

Commit

Permalink
clean up buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhackett1024
bhackett1024 committed Jan 17, 2025
1 parent 56b07bd commit 74fe21d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 108 deletions.
158 changes: 55 additions & 103 deletions app/components/chat/Messages.client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,127 +27,79 @@ export function saveProjectContents(messageId: string, contents: ProjectContents
gProjectContentsByMessageId.set(messageId, contents);
}

// The rewind button is not fully implemented yet.
const EnableRewindButton = false;

export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
const { id, isStreaming = false, messages = [] } = props;
const location = useLocation();

const handleRewind = (messageId: string) => {
const searchParams = new URLSearchParams(location.search);
searchParams.set('rewindTo', messageId);
window.location.search = searchParams.toString();
};

const handleFork = async (messageId: string) => {
try {
if (!db || !chatId.get()) {
toast.error('Chat persistence is not available');
return;
}

const urlId = await forkChat(db, chatId.get()!, messageId);
window.location.href = `/chat/${urlId}`;
} catch (error) {
toast.error('Failed to fork chat: ' + (error as Error).message);
}
};

const getLastMessageProjectContents = (index: number) => {
// The message index is for the model response, and the project
// contents will be associated with the last message present when
// the user prompt was sent to the model. So look back two messages
// for the previous contents.
if (index < 2) {
return null;
return undefined;
}
const previousMessage = messages[index - 2];
return gProjectContentsByMessageId.get(previousMessage.id);
};

return (
<>
<div id={id} ref={ref} className={props.className}>
{messages.length > 0
? messages.map((message, index) => {
const { role, content, id: messageId } = message;
const isUserMessage = role === 'user';
const isFirst = index === 0;
const isLast = index === messages.length - 1;
<div id={id} ref={ref} className={props.className}>
{messages.length > 0
? messages.map((message, index) => {
const { role, content, id: messageId } = message;
const isUserMessage = role === 'user';
const isFirst = index === 0;
const isLast = index === messages.length - 1;

return (
<div
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,
})}
>
{isUserMessage && (
<div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
<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} annotations={message.annotations} />
)}
return (
<div
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,
})}
>
{isUserMessage && (
<div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
<div className="i-ph:user-fill text-xl"></div>
</div>
{!isUserMessage && (
<div className="flex gap-2 flex-col lg:flex-row">
{messageId && (
<WithTooltip tooltip="Revert to this message">
<button
onClick={() => handleRewind(messageId)}
key="i-ph:arrow-u-up-left"
className={classNames(
'i-ph:arrow-u-up-left',
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
)}
/>
</WithTooltip>
)}

<WithTooltip tooltip="Fork chat from this message">
<button
onClick={() => handleFork(messageId)}
key="i-ph:git-fork"
className={classNames(
'i-ph:git-fork',
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
)}
/>
</WithTooltip>

{getAnnotationsTokensUsage(message.annotations) &&
getLastMessageProjectContents(index) && (
<WithTooltip tooltip="Rewind to before this message">
<button
onClick={() => {
const contents = getLastMessageProjectContents(index);
assert(contents);
toast.error("Rewind NYI");
//handleSaveProblem(contents);
}}
className={classNames(
'i-ph:rewind-fill',
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
)}
/>
</WithTooltip>
)}
</div>
)}
<div className="grid grid-col-1 w-full">
{isUserMessage ? (
<UserMessage content={content} />
) : (
<AssistantMessage content={content} annotations={message.annotations} />
)}
</div>
);
})
: null}
{isStreaming && (
<div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
)}
</div>
</>
{!isUserMessage && messageId && getLastMessageProjectContents(index) && EnableRewindButton && (
<div className="flex gap-2 flex-col lg:flex-row">
<WithTooltip tooltip="Rewind to this message">
<button
onClick={() => {
const contents = getLastMessageProjectContents(index);
assert(contents);
}}
key="i-ph:arrow-u-up-left"
className={classNames(
'i-ph:arrow-u-up-left',
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
)}
/>
</WithTooltip>
</div>
)}
</div>
);
})
: null}
{isStreaming && (
<div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
)}
</div>
);
});
5 changes: 0 additions & 5 deletions app/components/chat/chatExportAndImport/ImportButtons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { Message } from 'ai';
import { toast } from 'react-toastify';
import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
import { LoadProblemButton } from '~/components/chat/LoadProblemButton';

type ChatData = {
messages?: Message[]; // Standard Bolt format
Expand Down Expand Up @@ -72,10 +71,6 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
importChat={importChat}
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
/>
<LoadProblemButton
importChat={importChat}
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
/>
</div>
</div>
</div>
Expand Down

0 comments on commit 74fe21d

Please sign in to comment.