UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Organize chat component

Browse Source
This commit is contained in:
Strider Wilson 2025-05-27 10:34:58 -04:00
parent 833fab6c14
commit 3697dcebd6
16 changed files with 1026 additions and 627 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

623
app/components/chat/Chat.client.tsx
View File

@ -1,623 +0,0 @@
/*
* @ts-nocheck
* Preventing TS checks with files presented in the video for a better presentation.
*/
import { useStore } from '@nanostores/react';
import { useAnimate } from 'framer-motion';
import { memo, useEffect, useRef, useState } from 'react';
import { cssTransition, toast, ToastContainer } from 'react-toastify';
import { useSnapScroll } from '~/lib/hooks';
import { handleChatTitleUpdate, useChatHistory, type ResumeChatInfo } from '~/lib/persistence';
import { database } from '~/lib/persistence/chats';
import { chatStore } from '~/lib/stores/chat';
import { cubicEasingFn } from '~/utils/easings';
import { renderLogger } from '~/utils/logger';
import { BaseChat } from './BaseChat';
import Cookies from 'js-cookie';
import { useSearchParams } from '@remix-run/react';
import {
simulationAddData,
simulationFinishData,
simulationRepositoryUpdated,
sendChatMessage,
type ChatReference,
abortChatMessage,
resumeChatMessage,
} from '~/lib/replay/ChatManager';
import { getIFrameSimulationData } from '~/lib/replay/Recording';
import { getCurrentIFrame } from '~/components/workbench/Preview';
import { getCurrentMouseData } from '~/components/workbench/PointSelector';
import { anthropicNumFreeUsesCookieName, maxFreeUses } from '~/utils/freeUses';
import { ChatMessageTelemetry, pingTelemetry } from '~/lib/hooks/pingTelemetry';
import type { RejectChangeData } from './ApproveChange';
import { assert, generateRandomId } from '~/lib/replay/ReplayProtocolClient';
import { getMessagesRepositoryId, getPreviousRepositoryId, type Message } from '~/lib/persistence/message';
import { useAuthStatus } from '~/lib/stores/auth';
import { debounce } from '~/utils/debounce';
import { supabaseSubmitFeedback } from '~/lib/supabase/feedback';
import { supabaseAddRefund } from '~/lib/supabase/peanuts';
const toastAnimation = cssTransition({
enter: 'animated fadeInRight',
exit: 'animated fadeOutRight',
});
let gLastChatMessages: Message[] | undefined;
export function getLastChatMessages() {
return gLastChatMessages;
}
async function flushSimulationData() {
//console.log("FlushSimulationData");
const iframe = getCurrentIFrame();
if (!iframe) {
return;
}
const simulationData = await getIFrameSimulationData(iframe);
if (!simulationData.length) {
return;
}
//console.log("HaveSimulationData", simulationData.length);
// Add the simulation data to the chat.
simulationAddData(simulationData);
}
setInterval(async () => {
flushSimulationData();
}, 1000);
export function Chat() {
renderLogger.trace('Chat');
const { ready, initialMessages, resumeChat, storeMessageHistory } = useChatHistory();
return (
<>
{ready && (
<ChatImpl initialMessages={initialMessages} resumeChat={resumeChat} storeMessageHistory={storeMessageHistory} />
)}
<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}
/>
</>
);
}
interface ChatProps {
initialMessages: Message[];
resumeChat: ResumeChatInfo | undefined;
storeMessageHistory: (messages: Message[]) => void;
}
let gNumAborts = 0;
let gActiveChatMessageTelemetry: ChatMessageTelemetry | undefined;
async function clearActiveChat() {
gActiveChatMessageTelemetry = undefined;
}
function mergeResponseMessage(msg: Message, messages: Message[]): Message[] {
const lastMessage = messages[messages.length - 1];
if (lastMessage.id == msg.id) {
messages.pop();
assert(lastMessage.type == 'text', 'Last message must be a text message');
assert(msg.type == 'text', 'Message must be a text message');
messages.push({
...msg,
content: lastMessage.content + msg.content,
});
} else {
messages.push(msg);
}
return messages;
}
// Get the index of the last message that will be present after rewinding.
// This is the last message which is either a user message or has a repository change.
function getRewindMessageIndexAfterReject(messages: Message[], messageId: string): number {
for (let i = messages.length - 1; i >= 0; i--) {
const { id, role, repositoryId } = messages[i];
if (role == 'user') {
return i;
}
if (repositoryId && id != messageId) {
return i;
}
}
console.error('No rewind message found', messages, messageId);
return -1;
}
export const ChatImpl = memo((props: ChatProps) => {
const { initialMessages, resumeChat: initialResumeChat, storeMessageHistory } = props;
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
const [searchParams] = useSearchParams();
const { isLoggedIn } = useAuthStatus();
// Input currently in the textarea.
const [input, setInput] = useState('');
/*
* This is set when the user has triggered a chat message and the response hasn't finished
* being generated.
*/
const [pendingMessageId, setPendingMessageId] = useState<string | undefined>(undefined);
// Last status we heard for the pending message.
const [pendingMessageStatus, setPendingMessageStatus] = useState('');
// If we are listening to responses from a chat started in an earlier session,
// this will be set. This is equivalent to having a pending message but is
// handled differently.
const [resumeChat, setResumeChat] = useState<ResumeChatInfo | undefined>(initialResumeChat);
const [messages, setMessages] = useState<Message[]>(initialMessages);
const showChat = useStore(chatStore.showChat);
const [animationScope, animate] = useAnimate();
useEffect(() => {
const prompt = searchParams.get('prompt');
if (prompt) {
setInput(prompt);
}
}, [searchParams]);
// Load any repository in the initial messages.
useEffect(() => {
const repositoryId = getMessagesRepositoryId(initialMessages);
if (repositoryId) {
simulationRepositoryUpdated(repositoryId);
}
}, [initialMessages]);
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
useEffect(() => {
chatStore.started.set(initialMessages.length > 0);
}, []);
useEffect(() => {
storeMessageHistory(messages);
}, [messages]);
const abort = () => {
stop();
gNumAborts++;
chatStore.aborted.set(true);
setPendingMessageId(undefined);
setPendingMessageStatus('');
setResumeChat(undefined);
const chatId = chatStore.currentChat.get()?.id;
if (chatId) {
database.updateChatLastMessage(chatId, null, null);
}
if (gActiveChatMessageTelemetry) {
gActiveChatMessageTelemetry.abort('StopButtonClicked');
clearActiveChat();
abortChatMessage();
}
};
useEffect(() => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = 'auto';
const scrollHeight = textarea.scrollHeight;
textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
}
}, [input, textareaRef]);
const runAnimation = async () => {
if (chatStarted) {
return;
}
await Promise.all([
animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
]);
chatStore.started.set(true);
setChatStarted(true);
};
const sendMessage = async (messageInput?: string) => {
const _input = messageInput || input;
const numAbortsAtStart = gNumAborts;
if (_input.length === 0 || pendingMessageId || resumeChat) {
return;
}
gActiveChatMessageTelemetry = new ChatMessageTelemetry(messages.length);
if (!isLoggedIn) {
const numFreeUses = +(Cookies.get(anthropicNumFreeUsesCookieName) || 0);
if (numFreeUses >= maxFreeUses) {
toast.error('Please login to continue using Nut.');
gActiveChatMessageTelemetry.abort('NoFreeUses');
clearActiveChat();
return;
}
Cookies.set(anthropicNumFreeUsesCookieName, (numFreeUses + 1).toString());
}
const chatId = generateRandomId();
setPendingMessageId(chatId);
const userMessage: Message = {
id: `user-${chatId}`,
role: 'user',
type: 'text',
content: _input,
};
let newMessages = [...messages, userMessage];
imageDataList.forEach((imageData, index) => {
const imageMessage: Message = {
id: `image-${chatId}-${index}`,
role: 'user',
type: 'image',
dataURL: imageData,
};
newMessages.push(imageMessage);
});
setMessages(newMessages);
// Add file cleanup here
setUploadedFiles([]);
setImageDataList([]);
await flushSimulationData();
simulationFinishData();
chatStore.aborted.set(false);
runAnimation();
const addResponseMessage = (msg: Message) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
const existingRepositoryId = getMessagesRepositoryId(newMessages);
newMessages = mergeResponseMessage(msg, [...newMessages]);
setMessages(newMessages);
// Update the repository as soon as it has changed.
const responseRepositoryId = getMessagesRepositoryId(newMessages);
if (responseRepositoryId && existingRepositoryId != responseRepositoryId) {
simulationRepositoryUpdated(responseRepositoryId);
}
};
const onChatTitle = (title: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatTitle', title);
const currentChat = chatStore.currentChat.get();
if (currentChat) {
handleChatTitleUpdate(currentChat.id, title);
}
};
const onChatStatus = debounce((status: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatStatus', status);
setPendingMessageStatus(status);
}, 500);
const references: ChatReference[] = [];
const mouseData = getCurrentMouseData();
if (mouseData) {
references.push({
kind: 'element',
selector: mouseData.selector,
x: mouseData.x,
y: mouseData.y,
width: mouseData.width,
height: mouseData.height,
});
}
try {
await sendChatMessage(newMessages, references, {
onResponsePart: addResponseMessage,
onTitle: onChatTitle,
onStatus: onChatStatus,
});
} catch (e) {
if (gNumAborts == numAbortsAtStart) {
toast.error('Error sending message');
console.error('Error sending message', e);
}
}
if (gNumAborts != numAbortsAtStart) {
return;
}
gActiveChatMessageTelemetry.finish();
clearActiveChat();
setPendingMessageId(undefined);
setInput('');
textareaRef.current?.blur();
};
useEffect(() => {
(async () => {
if (!initialResumeChat) {
return;
}
const numAbortsAtStart = gNumAborts;
let newMessages = messages;
// The response messages we get may overlap with the ones we already have.
// Look for this and remove any existing message when we receive the first
// piece of a response message.
//
// Messages we have already received a portion of a response for.
const hasReceivedResponse = new Set<string>();
const addResponseMessage = (msg: Message) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
if (!hasReceivedResponse.has(msg.id)) {
hasReceivedResponse.add(msg.id);
newMessages = newMessages.filter((m) => m.id != msg.id);
}
const existingRepositoryId = getMessagesRepositoryId(newMessages);
newMessages = mergeResponseMessage(msg, [...newMessages]);
setMessages(newMessages);
// Update the repository as soon as it has changed.
const responseRepositoryId = getMessagesRepositoryId(newMessages);
if (responseRepositoryId && existingRepositoryId != responseRepositoryId) {
simulationRepositoryUpdated(responseRepositoryId);
}
};
const onChatTitle = (title: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatTitle', title);
const currentChat = chatStore.currentChat.get();
if (currentChat) {
handleChatTitleUpdate(currentChat.id, title);
}
};
const onChatStatus = debounce((status: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatStatus', status);
setPendingMessageStatus(status);
}, 500);
try {
await resumeChatMessage(initialResumeChat.protocolChatId, initialResumeChat.protocolChatResponseId, {
onResponsePart: addResponseMessage,
onTitle: onChatTitle,
onStatus: onChatStatus,
});
} catch (e) {
toast.error('Error resuming chat');
console.error('Error resuming chat', e);
}
if (gNumAborts != numAbortsAtStart) {
return;
}
setResumeChat(undefined);
const chatId = chatStore.currentChat.get()?.id;
if (chatId) {
database.updateChatLastMessage(chatId, null, null);
}
})();
}, [initialResumeChat]);
const flashScreen = async () => {
const flash = document.createElement('div');
flash.style.position = 'fixed';
flash.style.top = '0';
flash.style.left = '0';
flash.style.width = '100%';
flash.style.height = '100%';
flash.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
flash.style.zIndex = '9999';
flash.style.pointerEvents = 'none';
document.body.appendChild(flash);
// Fade out and remove after 500ms
setTimeout(() => {
flash.style.transition = 'opacity 0.5s';
flash.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(flash);
}, 500);
}, 200);
};
const onApproveChange = async (messageId: string) => {
console.log('ApproveChange', messageId);
setMessages(
messages.map((message) => {
if (message.id == messageId) {
return {
...message,
approved: true,
};
}
return message;
}),
);
await flashScreen();
pingTelemetry('ApproveChange', {
numMessages: messages.length,
});
};
const onRejectChange = async (messageId: string, data: RejectChangeData) => {
console.log('RejectChange', messageId, data);
// Find the last message that will be present after rewinding. This is the
// last message which is either a user message or has a repository change.
const messageIndex = getRewindMessageIndexAfterReject(messages, messageId);
if (messageIndex < 0) {
toast.error('Rewind message not found');
return;
}
const message = messages.find((m) => m.id == messageId);
if (!message) {
toast.error('Message not found');
return;
}
if (message.peanuts) {
await supabaseAddRefund(message.peanuts);
}
const previousRepositoryId = getPreviousRepositoryId(messages, messageIndex + 1);
setMessages(messages.slice(0, messageIndex + 1));
simulationRepositoryUpdated(previousRepositoryId);
let shareProjectSuccess = false;
if (data.shareProject) {
const feedbackData: any = {
explanation: data.explanation,
chatMessages: messages,
};
shareProjectSuccess = await supabaseSubmitFeedback(feedbackData);
}
pingTelemetry('RejectChange', {
shareProject: data.shareProject,
shareProjectSuccess,
numMessages: messages.length,
});
};
/**
* Handles the change event for the textarea and updates the input state.
* @param event - The change event from the textarea.
*/
const onTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setInput(event.target.value);
};
const [messageRef, scrollRef] = useSnapScroll();
gLastChatMessages = messages;
return (
<BaseChat
ref={animationScope}
textareaRef={textareaRef}
input={input}
showChat={showChat}
chatStarted={chatStarted}
hasPendingMessage={pendingMessageId !== undefined || resumeChat !== undefined}
pendingMessageStatus={pendingMessageStatus}
sendMessage={sendMessage}
messageRef={messageRef}
scrollRef={scrollRef}
handleInputChange={(e) => {
onTextareaChange(e);
}}
handleStop={abort}
messages={messages}
uploadedFiles={uploadedFiles}
setUploadedFiles={setUploadedFiles}
imageDataList={imageDataList}
setImageDataList={setImageDataList}
onApproveChange={onApproveChange}
onRejectChange={onRejectChange}
/>
);
});

56
app/components/chat/ChatComponent/Chat.client.tsx Normal file
View File

@ -0,0 +1,56 @@
/*
* @ts-nocheck
* Preventing TS checks with files presented in the video for a better presentation.
*/
import { cssTransition, ToastContainer } from 'react-toastify';
import { useChatHistory } from '~/lib/persistence';
import { renderLogger } from '~/utils/logger';
import ChatImplementer from './components/ChatImplementer/ChatImplementer';
import flushSimulationData from './functions/flushSimulation';
const toastAnimation = cssTransition({
enter: 'animated fadeInRight',
exit: 'animated fadeOutRight',
});
setInterval(async () => {
flushSimulationData();
}, 1000);
export function Chat() {
renderLogger.trace('Chat');
const { ready, initialMessages, resumeChat, storeMessageHistory } = useChatHistory();
return (
<>
{ready && (
<ChatImplementer initialMessages={initialMessages} resumeChat={resumeChat} storeMessageHistory={storeMessageHistory} />
)}
<ToastContainer
closeButton={({ closeToast }) => {
return (
<button className="Toastify__close-button" onClick={closeToast}>
<div className="i-ph:x text-lg" />
</button>
);
}}
icon={({ type }) => {
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}
/>
</>
);
}

476
app/components/chat/ChatComponent/components/ChatImplementer/ChatImplementer.tsx Normal file
View File

@ -0,0 +1,476 @@
import { useStore } from '@nanostores/react';
import { useAnimate } from 'framer-motion';
import { memo, useEffect, useRef, useState } from 'react';
import { toast } from 'react-toastify';
import { useSnapScroll } from '~/lib/hooks';
import { handleChatTitleUpdate, type ResumeChatInfo } from '~/lib/persistence';
import { database } from '~/lib/persistence/chats';
import { chatStore } from '~/lib/stores/chat';
import { cubicEasingFn } from '~/utils/easings';
import { BaseChat } from '../../../BaseChat/BaseChat';
import Cookies from 'js-cookie';
import { useSearchParams } from '@remix-run/react';
import {
simulationFinishData,
simulationRepositoryUpdated,
sendChatMessage,
type ChatReference,
abortChatMessage,
resumeChatMessage,
} from '~/lib/replay/ChatManager';
import { getCurrentMouseData } from '~/components/workbench/PointSelector';
import { anthropicNumFreeUsesCookieName, maxFreeUses } from '~/utils/freeUses';
import { ChatMessageTelemetry, pingTelemetry } from '~/lib/hooks/pingTelemetry';
import type { RejectChangeData } from '../../../ApproveChange';
import { generateRandomId } from '~/lib/replay/ReplayProtocolClient';
import { getMessagesRepositoryId, getPreviousRepositoryId, type Message } from '~/lib/persistence/message';
import { useAuthStatus } from '~/lib/stores/auth';
import { debounce } from '~/utils/debounce';
import { supabaseSubmitFeedback } from '~/lib/supabase/feedback';
import { supabaseAddRefund } from '~/lib/supabase/peanuts';
import mergeResponseMessage from '../../functions/mergeResponseMessages';
import flushSimulationData from '../../functions/flushSimulation';
import getRewindMessageIndexAfterReject from '../../functions/getRewindMessageIndexAfterReject';
import flashScreen from '../../functions/flashScreen';
interface ChatProps {
initialMessages: Message[];
resumeChat: ResumeChatInfo | undefined;
storeMessageHistory: (messages: Message[]) => void;
}
let gNumAborts = 0;
let gActiveChatMessageTelemetry: ChatMessageTelemetry | undefined;
async function clearActiveChat() {
gActiveChatMessageTelemetry = undefined;
}
let gLastChatMessages: Message[] | undefined;
export function getLastChatMessages() {
return gLastChatMessages;
}
const ChatImplementer = memo((props: ChatProps) => {
const { initialMessages, resumeChat: initialResumeChat, storeMessageHistory } = props;
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
const [searchParams] = useSearchParams();
const { isLoggedIn } = useAuthStatus();
const [input, setInput] = useState('');
const [pendingMessageId, setPendingMessageId] = useState<string | undefined>(undefined);
const [pendingMessageStatus, setPendingMessageStatus] = useState('');
const [resumeChat, setResumeChat] = useState<ResumeChatInfo | undefined>(initialResumeChat);
const [messages, setMessages] = useState<Message[]>(initialMessages);
const showChat = useStore(chatStore.showChat);
const [animationScope, animate] = useAnimate();
useEffect(() => {
const prompt = searchParams.get('prompt');
if (prompt) {
setInput(prompt);
}
}, [searchParams]);
useEffect(() => {
const repositoryId = getMessagesRepositoryId(initialMessages);
if (repositoryId) {
simulationRepositoryUpdated(repositoryId);
}
}, [initialMessages]);
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
useEffect(() => {
chatStore.started.set(initialMessages.length > 0);
}, []);
useEffect(() => {
storeMessageHistory(messages);
}, [messages]);
const abort = () => {
stop();
gNumAborts++;
chatStore.aborted.set(true);
setPendingMessageId(undefined);
setPendingMessageStatus('');
setResumeChat(undefined);
const chatId = chatStore.currentChat.get()?.id;
if (chatId) {
database.updateChatLastMessage(chatId, null, null);
}
if (gActiveChatMessageTelemetry) {
gActiveChatMessageTelemetry.abort('StopButtonClicked');
clearActiveChat();
abortChatMessage();
}
};
useEffect(() => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = 'auto';
const scrollHeight = textarea.scrollHeight;
textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
}
}, [input, textareaRef]);
const runAnimation = async () => {
if (chatStarted) {
return;
}
await Promise.all([
animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
]);
chatStore.started.set(true);
setChatStarted(true);
};
const sendMessage = async (messageInput?: string) => {
const _input = messageInput || input;
const numAbortsAtStart = gNumAborts;
if (_input.length === 0 || pendingMessageId || resumeChat) {
return;
}
gActiveChatMessageTelemetry = new ChatMessageTelemetry(messages.length);
if (!isLoggedIn) {
const numFreeUses = +(Cookies.get(anthropicNumFreeUsesCookieName) || 0);
if (numFreeUses >= maxFreeUses) {
toast.error('Please login to continue using Nut.');
gActiveChatMessageTelemetry.abort('NoFreeUses');
clearActiveChat();
return;
}
Cookies.set(anthropicNumFreeUsesCookieName, (numFreeUses + 1).toString());
}
const chatId = generateRandomId();
setPendingMessageId(chatId);
const userMessage: Message = {
id: `user-${chatId}`,
role: 'user',
type: 'text',
content: _input,
};
let newMessages = [...messages, userMessage];
imageDataList.forEach((imageData, index) => {
const imageMessage: Message = {
id: `image-${chatId}-${index}`,
role: 'user',
type: 'image',
dataURL: imageData,
};
newMessages.push(imageMessage);
});
setMessages(newMessages);
setUploadedFiles([]);
setImageDataList([]);
await flushSimulationData();
simulationFinishData();
chatStore.aborted.set(false);
runAnimation();
const addResponseMessage = (msg: Message) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
const existingRepositoryId = getMessagesRepositoryId(newMessages);
newMessages = mergeResponseMessage(msg, [...newMessages]);
setMessages(newMessages);
const responseRepositoryId = getMessagesRepositoryId(newMessages);
if (responseRepositoryId && existingRepositoryId != responseRepositoryId) {
simulationRepositoryUpdated(responseRepositoryId);
}
};
const onChatTitle = (title: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatTitle', title);
const currentChat = chatStore.currentChat.get();
if (currentChat) {
handleChatTitleUpdate(currentChat.id, title);
}
};
const onChatStatus = debounce((status: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatStatus', status);
setPendingMessageStatus(status);
}, 500);
const references: ChatReference[] = [];
const mouseData = getCurrentMouseData();
if (mouseData) {
references.push({
kind: 'element',
selector: mouseData.selector,
x: mouseData.x,
y: mouseData.y,
width: mouseData.width,
height: mouseData.height,
});
}
try {
await sendChatMessage(newMessages, references, {
onResponsePart: addResponseMessage,
onTitle: onChatTitle,
onStatus: onChatStatus,
});
} catch (e) {
if (gNumAborts == numAbortsAtStart) {
toast.error('Error sending message');
console.error('Error sending message', e);
}
}
if (gNumAborts != numAbortsAtStart) {
return;
}
gActiveChatMessageTelemetry.finish();
clearActiveChat();
setPendingMessageId(undefined);
setInput('');
textareaRef.current?.blur();
};
useEffect(() => {
(async () => {
if (!initialResumeChat) {
return;
}
const numAbortsAtStart = gNumAborts;
let newMessages = messages;
const hasReceivedResponse = new Set<string>();
const addResponseMessage = (msg: Message) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
if (!hasReceivedResponse.has(msg.id)) {
hasReceivedResponse.add(msg.id);
newMessages = newMessages.filter((m) => m.id != msg.id);
}
const existingRepositoryId = getMessagesRepositoryId(newMessages);
newMessages = mergeResponseMessage(msg, [...newMessages]);
setMessages(newMessages);
const responseRepositoryId = getMessagesRepositoryId(newMessages);
if (responseRepositoryId && existingRepositoryId != responseRepositoryId) {
simulationRepositoryUpdated(responseRepositoryId);
}
};
const onChatTitle = (title: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatTitle', title);
const currentChat = chatStore.currentChat.get();
if (currentChat) {
handleChatTitleUpdate(currentChat.id, title);
}
};
const onChatStatus = debounce((status: string) => {
if (gNumAborts != numAbortsAtStart) {
return;
}
console.log('ChatStatus', status);
setPendingMessageStatus(status);
}, 500);
try {
await resumeChatMessage(initialResumeChat.protocolChatId, initialResumeChat.protocolChatResponseId, {
onResponsePart: addResponseMessage,
onTitle: onChatTitle,
onStatus: onChatStatus,
});
} catch (e) {
toast.error('Error resuming chat');
console.error('Error resuming chat', e);
}
if (gNumAborts != numAbortsAtStart) {
return;
}
setResumeChat(undefined);
const chatId = chatStore.currentChat.get()?.id;
if (chatId) {
database.updateChatLastMessage(chatId, null, null);
}
})();
}, [initialResumeChat]);
const onApproveChange = async (messageId: string) => {
console.log('ApproveChange', messageId);
setMessages(
messages.map((message) => {
if (message.id == messageId) {
return {
...message,
approved: true,
};
}
return message;
}),
);
await flashScreen();
pingTelemetry('ApproveChange', {
numMessages: messages.length,
});
};
const onRejectChange = async (messageId: string, data: RejectChangeData) => {
console.log('RejectChange', messageId, data);
const messageIndex = getRewindMessageIndexAfterReject(messages, messageId);
if (messageIndex < 0) {
toast.error('Rewind message not found');
return;
}
const message = messages.find((m) => m.id == messageId);
if (!message) {
toast.error('Message not found');
return;
}
if (message.peanuts) {
await supabaseAddRefund(message.peanuts);
}
const previousRepositoryId = getPreviousRepositoryId(messages, messageIndex + 1);
setMessages(messages.slice(0, messageIndex + 1));
simulationRepositoryUpdated(previousRepositoryId);
let shareProjectSuccess = false;
if (data.shareProject) {
const feedbackData: any = {
explanation: data.explanation,
chatMessages: messages,
};
shareProjectSuccess = await supabaseSubmitFeedback(feedbackData);
}
pingTelemetry('RejectChange', {
shareProject: data.shareProject,
shareProjectSuccess,
numMessages: messages.length,
});
};
/**
* Handles the change event for the textarea and updates the input state.
* @param event - The change event from the textarea.
*/
const onTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setInput(event.target.value);
};
const [messageRef, scrollRef] = useSnapScroll();
gLastChatMessages = messages;
return (
<BaseChat
ref={animationScope}
textareaRef={textareaRef}
input={input}
showChat={showChat}
chatStarted={chatStarted}
hasPendingMessage={pendingMessageId !== undefined || resumeChat !== undefined}
pendingMessageStatus={pendingMessageStatus}
sendMessage={sendMessage}
messageRef={messageRef}
scrollRef={scrollRef}
handleInputChange={(e) => {
onTextareaChange(e);
}}
handleStop={abort}
messages={messages}
uploadedFiles={uploadedFiles}
setUploadedFiles={setUploadedFiles}
imageDataList={imageDataList}
setImageDataList={setImageDataList}
onApproveChange={onApproveChange}
onRejectChange={onRejectChange}
/>
);
});
export default ChatImplementer;

22
app/components/chat/ChatComponent/functions/flashScreen.ts Normal file
View File

@ -0,0 +1,22 @@
const flashScreen = async () => {
const flash = document.createElement('div');
flash.style.position = 'fixed';
flash.style.top = '0';
flash.style.left = '0';
flash.style.width = '100%';
flash.style.height = '100%';
flash.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
flash.style.zIndex = '9999';
flash.style.pointerEvents = 'none';
document.body.appendChild(flash);
setTimeout(() => {
flash.style.transition = 'opacity 0.5s';
flash.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(flash);
}, 500);
}, 200);
};
export default flashScreen;

26
app/components/chat/ChatComponent/functions/flushSimulation.ts Normal file
View File

@ -0,0 +1,26 @@
import { getIFrameSimulationData } from "~/lib/replay/Recording";
import { simulationAddData } from "~/lib/replay/ChatManager";
import { getCurrentIFrame } from "~/components/workbench/Preview";
async function flushSimulationData() {
//console.log("FlushSimulationData");
const iframe = getCurrentIFrame();
if (!iframe) {
return;
}
const simulationData = await getIFrameSimulationData(iframe);
if (!simulationData.length) {
return;
}
//console.log("HaveSimulationData", simulationData.length);
// Add the simulation data to the chat.
simulationAddData(simulationData);
};
export default flushSimulationData;

18
app/components/chat/ChatComponent/functions/getRewindMessageIndexAfterReject.ts Normal file
View File

@ -0,0 +1,18 @@
import type { Message } from "~/lib/persistence/message";
function getRewindMessageIndexAfterReject(messages: Message[], messageId: string): number {
for (let i = messages.length - 1; i >= 0; i--) {
const { id, role, repositoryId } = messages[i];
if (role == 'user') {
return i;
}
if (repositoryId && id != messageId) {
return i;
}
}
console.error('No rewind message found', messages, messageId);
return -1;
};
export default getRewindMessageIndexAfterReject;

20
app/components/chat/ChatComponent/functions/mergeResponseMessages.ts Normal file
View File

@ -0,0 +1,20 @@
import type { Message } from "~/lib/persistence/message";
import { assert } from "~/lib/replay/ReplayProtocolClient";
function mergeResponseMessage(msg: Message, messages: Message[]): Message[] {
const lastMessage = messages[messages.length - 1];
if (lastMessage.id == msg.id) {
messages.pop();
assert(lastMessage.type == 'text', 'Last message must be a text message');
assert(msg.type == 'text', 'Message must be a text message');
messages.push({
...msg,
content: lastMessage.content + msg.content,
});
} else {
messages.push(msg);
}
return messages;
};
export default mergeResponseMessage;

206
app/components/chat/MessageInput/MessageInput.tsx Normal file
View File

@ -0,0 +1,206 @@
import React from 'react';
import { ClientOnly } from 'remix-utils/client-only';
import { IconButton } from '~/components/ui/IconButton';
import { classNames } from '~/utils/classNames';
import { SendButton } from '../SendButton.client';
import { SpeechRecognitionButton } from '../SpeechRecognition';
export interface MessageInputProps {
textareaRef?: React.RefObject<HTMLTextAreaElement>;
input?: string;
handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
handleSendMessage?: (event: React.UIEvent) => void;
handleStop?: () => void;
hasPendingMessage?: boolean;
chatStarted?: boolean;
uploadedFiles?: File[];
setUploadedFiles?: (files: File[]) => void;
imageDataList?: string[];
setImageDataList?: (dataList: string[]) => void;
isListening?: boolean;
onStartListening?: () => void;
onStopListening?: () => void;
minHeight?: number;
maxHeight?: number;
}
export const MessageInput: React.FC<MessageInputProps> = ({
textareaRef,
input = '',
handleInputChange = () => {},
handleSendMessage = () => {},
handleStop = () => {},
hasPendingMessage = false,
chatStarted = false,
uploadedFiles = [],
setUploadedFiles = () => {},
imageDataList = [],
setImageDataList = () => {},
isListening = false,
onStartListening = () => {},
onStopListening = () => {},
minHeight = 76,
maxHeight = 200,
}) => {
const handleFileUpload = () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const base64Image = e.target?.result as string;
setUploadedFiles([...uploadedFiles, file]);
setImageDataList([...imageDataList, base64Image]);
};
reader.readAsDataURL(file);
}
};
input.click();
};
const handlePaste = async (e: React.ClipboardEvent) => {
const items = e.clipboardData?.items;
if (!items) {
return;
}
for (const item of items) {
if (item.type.startsWith('image/')) {
e.preventDefault();
const file = item.getAsFile();
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const base64Image = e.target?.result as string;
setUploadedFiles([...uploadedFiles, file]);
setImageDataList([...imageDataList, base64Image]);
};
reader.readAsDataURL(file);
}
break;
}
}
};
return (
<div className={classNames('relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg')}>
<textarea
ref={textareaRef}
className={classNames(
'w-full pl-4 pt-4 pr-25 outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm',
'transition-all duration-200',
'hover:border-bolt-elements-focus',
)}
onDragEnter={(e) => {
e.preventDefault();
e.currentTarget.style.border = '2px solid #1488fc';
}}
onDragOver={(e) => {
e.preventDefault();
e.currentTarget.style.border = '2px solid #1488fc';
}}
onDragLeave={(e) => {
e.preventDefault();
e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
}}
onDrop={(e) => {
e.preventDefault();
e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
const files = Array.from(e.dataTransfer.files);
files.forEach((file) => {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
const base64Image = e.target?.result as string;
setUploadedFiles([...uploadedFiles, file]);
setImageDataList([...imageDataList, base64Image]);
};
reader.readAsDataURL(file);
}
});
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
if (event.shiftKey) {
return;
}
event.preventDefault();
if (hasPendingMessage) {
handleStop();
return;
}
if (event.nativeEvent.isComposing) {
return;
}
handleSendMessage(event);
}
}}
value={input}
onChange={handleInputChange}
onPaste={handlePaste}
style={{
minHeight,
maxHeight,
}}
placeholder={chatStarted ? 'How can we help you?' : 'What do you want to build?'}
translate="no"
/>
<ClientOnly>
{() => (
<SendButton
show={(hasPendingMessage || input.length > 0 || uploadedFiles.length > 0) && chatStarted}
hasPendingMessage={hasPendingMessage}
onClick={(event) => {
if (hasPendingMessage) {
handleStop();
return;
}
if (input.length > 0 || uploadedFiles.length > 0) {
handleSendMessage(event);
}
}}
/>
)}
</ClientOnly>
<div className="flex justify-between items-center text-sm p-4 pt-2">
<div className="flex gap-1 items-center">
<IconButton title="Upload file" className="transition-all" onClick={handleFileUpload}>
<div className="i-ph:paperclip text-xl"></div>
</IconButton>
<SpeechRecognitionButton
isListening={isListening}
onStart={onStartListening}
onStop={onStopListening}
disabled={hasPendingMessage}
/>
</div>
{input.length > 3 ? (
<div className="text-xs text-bolt-elements-textTertiary">
Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
<kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> a new line
</div>
) : null}
</div>
</div>
);
};

34
app/components/chat/SearchInput/SearchInput.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
interface SearchInputProps {
onSearch: (text: string) => void;
onChange: (text: string) => void;
}
export const SearchInput: React.FC<SearchInputProps> = ({ onSearch, onChange }) => {
return (
<div className="placeholder-bolt-elements-textTertiary" style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }}>
<input
type="text"
placeholder="Search"
onKeyDown={(event) => {
if (event.key === 'Enter') {
onSearch(event.currentTarget.value);
}
}}
onChange={(event) => {
onChange(event.target.value);
}}
style={{
width: '200px',
padding: '0.5rem',
marginTop: '0.5rem',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '0.9rem',
textAlign: 'left',
}}
/>
</div>
);
};

2
app/components/header/Feedback.tsx
View File

@ -2,7 +2,7 @@ import { toast } from 'react-toastify';
import ReactModal from 'react-modal';
import { useState } from 'react';
import { supabaseSubmitFeedback } from '~/lib/supabase/feedback';
import { getLastChatMessages } from '~/components/chat/Chat.client';
import { getLastChatMessages } from '~/utils/chat/messageUtils';
ReactModal.setAppElement('#root');

67
app/hooks/useSpeechRecognition.ts Normal file
View File

@ -0,0 +1,67 @@
import { useState, useEffect } from 'react';
interface UseSpeechRecognitionProps {
onTranscriptChange: (transcript: string) => void;
}
export const useSpeechRecognition = ({ onTranscriptChange }: UseSpeechRecognitionProps) => {
const [isListening, setIsListening] = useState(false);
const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
const [transcript, setTranscript] = useState('');
useEffect(() => {
if (typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map((result) => result[0])
.map((result) => result.transcript)
.join('');
setTranscript(transcript);
onTranscriptChange(transcript);
};
recognition.onerror = (event) => {
console.error('Speech recognition error:', event.error);
setIsListening(false);
};
setRecognition(recognition);
}
}, [onTranscriptChange]);
const startListening = () => {
if (recognition) {
recognition.start();
setIsListening(true);
}
};
const stopListening = () => {
if (recognition) {
recognition.stop();
setIsListening(false);
}
};
const abortListening = () => {
if (recognition) {
recognition.abort();
setTranscript('');
setIsListening(false);
}
};
return {
isListening,
transcript,
startListening,
stopListening,
abortListening,
};
};

4
app/lib/persistence/message.ts
View File

@ -16,12 +16,12 @@ interface MessageBase {
approved?: boolean;
}
interface MessageText extends MessageBase {
export interface MessageText extends MessageBase {
type: 'text';
content: string;
}
interface MessageImage extends MessageBase {
export interface MessageImage extends MessageBase {
type: 'image';
dataURL: string;
}

2
app/routes/_index.tsx
View File

@ -2,7 +2,7 @@ import { json, type MetaFunction } from '~/lib/remix-types';
import { Suspense } from 'react';
import { ClientOnly } from 'remix-utils/client-only';
import { BaseChat } from '~/components/chat/BaseChat/BaseChat';
import { Chat } from '~/components/chat/Chat/Chat.client';
import { Chat } from '~/components/chat/ChatComponent/Chat.client';
import { PageContainer } from '~/layout/PageContainer';
export const meta: MetaFunction = () => {
return [{ title: 'Nut' }];

27
app/types/chat.ts Normal file
View File

@ -0,0 +1,27 @@
import type { Message, MessageImage, MessageText } from '~/lib/persistence/message';
import type { ResumeChatInfo } from '~/lib/persistence/useChatHistory';
import type { RejectChangeData } from '../components/chat/ApproveChange';
export interface ChatProps {
initialMessages: Message[];
resumeChat: ResumeChatInfo | undefined;
storeMessageHistory: (messages: Message[]) => void;
}
export interface ChatImplProps extends ChatProps {
onApproveChange?: (messageId: string) => Promise<void>;
onRejectChange?: (messageId: string, data: RejectChangeData) => Promise<void>;
}
// Re-export types we need
export type { Message, MessageImage, MessageText, ResumeChatInfo };
export interface UserMessage extends MessageText {
role: 'user';
type: 'text';
}
export interface UserImageMessage extends MessageImage {
role: 'user';
type: 'image';
}

44
app/utils/chat/messageUtils.ts Normal file
View File

@ -0,0 +1,44 @@
import { assert } from '~/lib/replay/ReplayProtocolClient';
import type { Message } from '~/lib/persistence/message';
let gLastChatMessages: Message[] | undefined;
export function getLastChatMessages() {
return gLastChatMessages;
}
export function setLastChatMessages(messages: Message[] | undefined) {
gLastChatMessages = messages;
}
export function mergeResponseMessage(msg: Message, messages: Message[]): Message[] {
const lastMessage = messages[messages.length - 1];
if (lastMessage.id == msg.id) {
messages.pop();
assert(lastMessage.type == 'text', 'Last message must be a text message');
assert(msg.type == 'text', 'Message must be a text message');
messages.push({
...msg,
content: lastMessage.content + msg.content,
});
} else {
messages.push(msg);
}
return messages;
}
// Get the index of the last message that will be present after rewinding.
// This is the last message which is either a user message or has a repository change.
export function getRewindMessageIndexAfterReject(messages: Message[], messageId: string): number {
for (let i = messages.length - 1; i >= 0; i--) {
const { id, role, repositoryId } = messages[i];
if (role == 'user') {
return i;
}
if (repositoryId && id != messageId) {
return i;
}
}
console.error('No rewind message found', messages, messageId);
return -1;
}

26
app/utils/chat/simulationUtils.ts Normal file
View File

@ -0,0 +1,26 @@
import { getIFrameSimulationData } from '~/lib/replay/Recording';
import { getCurrentIFrame } from '~/components/workbench/Preview';
import { simulationAddData } from '~/lib/replay/ChatManager';
export async function flushSimulationData() {
const iframe = getCurrentIFrame();
if (!iframe) {
return;
}
const simulationData = await getIFrameSimulationData(iframe);
if (!simulationData.length) {
return;
}
simulationAddData(simulationData);
}
// Set up the interval in a separate function that can be called once
export function setupSimulationInterval() {
setInterval(async () => {
flushSimulationData();
}, 1000);
}