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

Fix lint errors

Browse Source
This commit is contained in:
Strider Wilson 2025-05-28 09:39:09 -04:00
parent 0fa11ed5b0
commit d5ab6511e5
21 changed files with 531 additions and 526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Header.tsx
View File

@ -11,4 +11,4 @@ export const Header: React.FC = () => {
</nav>
</header>
);
};
};

2
app/components/auth/ClientAuth/ClientAuth.tsx
View File

@ -158,4 +158,4 @@ export function ClientAuth() {
)}
</>
);
}
}

13
app/components/auth/ClientAuth/SignInForm.tsx
View File

@ -44,10 +44,8 @@ export function SignInForm({ onToggleForm }: SignInFormProps) {
return (
<>
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
Welcome Back
</h2>
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">Welcome Back</h2>
<button
type="button"
onClick={handleGoogleSignIn}
@ -109,13 +107,10 @@ export function SignInForm({ onToggleForm }: SignInFormProps) {
<p className="mt-6 text-center text-bolt-elements-textSecondary">
Don't have an account?{' '}
<button
onClick={onToggleForm}
className="text-green-500 hover:text-green-600 font-medium bg-transparent"
>
<button onClick={onToggleForm} className="text-green-500 hover:text-green-600 font-medium bg-transparent">
Sign Up
</button>
</p>
</>
);
}
}

15
app/components/auth/ClientAuth/SignUpForm.tsx
View File

@ -16,7 +16,7 @@ export function SignUpForm({ onToggleForm }: SignUpFormProps) {
const handleSignUp = async (e: React.FormEvent) => {
e.preventDefault();
if (password !== confirmPassword) {
toast.error('Passwords do not match');
return;
@ -51,10 +51,8 @@ export function SignUpForm({ onToggleForm }: SignUpFormProps) {
return (
<>
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
Create Account
</h2>
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">Create Account</h2>
<button
type="button"
onClick={handleGoogleSignIn}
@ -130,13 +128,10 @@ export function SignUpForm({ onToggleForm }: SignUpFormProps) {
<p className="mt-6 text-center text-bolt-elements-textSecondary">
Already have an account?{' '}
<button
onClick={onToggleForm}
className="text-green-500 hover:text-green-600 font-medium bg-transparent"
>
<button onClick={onToggleForm} className="text-green-500 hover:text-green-600 font-medium bg-transparent">
Sign In
</button>
</p>
</>
);
}
}

39
app/components/chat/BaseChat/BaseChat.tsx
View File

@ -7,18 +7,18 @@ import { ClientOnly } from 'remix-utils/client-only';
import { Menu } from '~/components/sidebar/Menu.client';
import { Workbench } from '~/components/workbench/Workbench.client';
import { classNames } from '~/utils/classNames';
import { Messages } from '../Messages.client';
import { Messages } from '~/components/chat/Messages.client';
import { type Message } from '~/lib/persistence/message';
import * as Tooltip from '@radix-ui/react-tooltip';
import { IntroSection } from './components/IntroSection/IntroSection';
import { SearchInput } from '../SearchInput/SearchInput';
import { ChatPromptContainer } from './components/ChatPromptContainer/ChatPromptContainer';
import { IntroSection } from '~/components/chat/BaseChat/components/IntroSection/IntroSection';
import { SearchInput } from '~/components/chat/SearchInput/SearchInput';
import { ChatPromptContainer } from '~/components/chat/BaseChat/components/ChatPromptContainer/ChatPromptContainer';
import { useSpeechRecognition } from '~/hooks/useSpeechRecognition';
import styles from './BaseChat.module.scss';
import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
import { ExampleLibraryApps } from '~/components/app-library/ExampleLibraryApps';
import type { RejectChangeData } from '../ApproveChange';
import { type MessageInputProps } from '../MessageInput/MessageInput';
import type { RejectChangeData } from '~/components/chat/ApproveChange';
import { type MessageInputProps } from '~/components/chat/MessageInput/MessageInput';
export const TEXTAREA_MIN_HEIGHT = 76;
@ -47,7 +47,7 @@ type ExtendedMessage = Message & {
repositoryId?: string;
peanuts?: boolean;
approved?: boolean;
}
};
export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
(
@ -75,17 +75,19 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
) => {
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
const [rejectFormOpen, setRejectFormOpen] = React.useState(false);
const [pendingFilterText, setPendingFilterText] = React.useState('');
const [filterText, setFilterText] = React.useState('');
const onTranscriptChange = useCallback((transcript: string) => {
if (handleInputChange) {
const syntheticEvent = {
target: { value: transcript },
} as React.ChangeEvent<HTMLTextAreaElement>;
handleInputChange(syntheticEvent);
}
}, [handleInputChange]);
const onTranscriptChange = useCallback(
(transcript: string) => {
if (handleInputChange) {
const syntheticEvent = {
target: { value: transcript },
} as React.ChangeEvent<HTMLTextAreaElement>;
handleInputChange(syntheticEvent);
}
},
[handleInputChange],
);
const { isListening, startListening, stopListening, abortListening } = useSpeechRecognition({
onTranscriptChange,
@ -198,10 +200,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
<div className="text-bolt-elements-textSecondary text-center max-w-chat mx-auto">
Browse these auto-generated apps for a place to start
</div>
<SearchInput
onSearch={setFilterText}
onChange={setPendingFilterText}
/>
<SearchInput onSearch={setFilterText} />
<ExampleLibraryApps filterText={filterText} />
</>
)}

12
app/components/chat/BaseChat/components/ChatPromptContainer/ChatPromptContainer.tsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { classNames } from '~/utils/classNames';
import FilePreview from '../../../FilePreview';
import { ScreenshotStateManager } from '../../../ScreenshotStateManager';
import FilePreview from '~/components/chat/FilePreview';
import { ScreenshotStateManager } from '~/components/chat/ScreenshotStateManager';
import { ClientOnly } from 'remix-utils/client-only';
import ApproveChange from '../../../ApproveChange';
import { MessageInput } from '../../../MessageInput/MessageInput';
import styles from '../../BaseChat.module.scss';
import ApproveChange from '~/components/chat/ApproveChange';
import { MessageInput } from '~/components/chat/MessageInput/MessageInput';
import styles from '~/components/chat/BaseChat/BaseChat.module.scss';
interface ChatPromptContainerProps {
chatStarted: boolean;
@ -98,4 +98,4 @@ export const ChatPromptContainer: React.FC<ChatPromptContainerProps> = ({
{!rejectFormOpen && <MessageInput {...messageInputProps} />}
</div>
);
};
};

2
app/components/chat/BaseChat/components/IntroSection/IntroSection.tsx
View File

@ -11,4 +11,4 @@ export const IntroSection: React.FC = () => {
</p>
</div>
);
};
};

8
app/components/chat/ChatComponent/Chat.client.tsx
View File

@ -3,7 +3,7 @@
* 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 { useChatHistory } from '~/lib/persistence';
import { renderLogger } from '~/utils/logger';
import ChatImplementer from './components/ChatImplementer/ChatImplementer';
import flushSimulationData from './functions/flushSimulation';
@ -25,7 +25,11 @@ export function Chat() {
return (
<>
{ready && (
<ChatImplementer initialMessages={initialMessages} resumeChat={resumeChat} storeMessageHistory={storeMessageHistory} />
<ChatImplementer
initialMessages={initialMessages}
resumeChat={resumeChat}
storeMessageHistory={storeMessageHistory}
/>
)}
<ToastContainer
closeButton={({ closeToast }) => {

759
app/components/chat/ChatComponent/components/ChatImplementer/ChatImplementer.tsx
View File

@ -7,7 +7,7 @@ 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 { BaseChat } from '~/components/chat/BaseChat/BaseChat';
import Cookies from 'js-cookie';
import { useSearchParams } from '@remix-run/react';
import {
@ -21,24 +21,24 @@ import {
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 type { RejectChangeData } from '~/components/chat/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';
import mergeResponseMessage from '~/components/chat/ChatComponent/functions/mergeResponseMessages';
import flushSimulationData from '~/components/chat/ChatComponent/functions/flushSimulation';
import getRewindMessageIndexAfterReject from '~/components/chat/ChatComponent/functions/getRewindMessageIndexAfterReject';
import flashScreen from '~/components/chat/ChatComponent/functions/flashScreen';
interface ChatProps {
initialMessages: Message[];
resumeChat: ResumeChatInfo | undefined;
storeMessageHistory: (messages: Message[]) => void;
initialMessages: Message[];
resumeChat: ResumeChatInfo | undefined;
storeMessageHistory: (messages: Message[]) => void;
}
let gNumAborts = 0;
let gActiveChatMessageTelemetry: ChatMessageTelemetry | undefined;
@ -54,423 +54,422 @@ export function getLastChatMessages() {
}
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');
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();
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);
Cookies.set(anthropicNumFreeUsesCookieName, (numFreeUses + 1).toString());
}
const chatId = generateRandomId();
setPendingMessageId(chatId);
const userMessage: Message = {
id: `user-${chatId}`,
role: 'user',
type: 'text',
content: _input,
};
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}`,
let newMessages = [...messages, userMessage];
imageDataList.forEach((imageData, index) => {
const imageMessage: Message = {
id: `image-${chatId}-${index}`,
role: 'user',
type: 'text',
content: _input,
type: 'image',
dataURL: imageData,
};
let newMessages = [...messages, userMessage];
imageDataList.forEach((imageData, index) => {
const imageMessage: Message = {
id: `image-${chatId}-${index}`,
role: 'user',
type: 'image',
dataURL: imageData,
};
newMessages.push(imageMessage);
});
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);
setUploadedFiles([]);
setImageDataList([]);
await flushSimulationData();
simulationFinishData();
chatStore.aborted.set(false);
runAnimation();
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);
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, {
await resumeChatMessage(initialResumeChat.protocolChatId, initialResumeChat.protocolChatResponseId, {
onResponsePart: addResponseMessage,
onTitle: onChatTitle,
onStatus: onChatStatus,
});
} catch (e) {
if (gNumAborts == numAbortsAtStart) {
toast.error('Error sending message');
console.error('Error sending message', e);
}
toast.error('Error resuming chat');
console.error('Error resuming chat', 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);
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,
};
}
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}
/>
return message;
}),
);
});
export default ChatImplementer;
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;

34
app/components/chat/ChatComponent/functions/flashScreen.ts
View File

@ -1,22 +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);
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(() => {
flash.style.transition = 'opacity 0.5s';
flash.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(flash);
}, 500);
}, 200);
document.body.removeChild(flash);
}, 500);
}, 200);
};
export default flashScreen;
export default flashScreen;

44
app/components/chat/ChatComponent/functions/flushSimulation.ts
View File

@ -1,26 +1,26 @@
import { getIFrameSimulationData } from "~/lib/replay/Recording";
import { simulationAddData } from "~/lib/replay/ChatManager";
import { getCurrentIFrame } from "~/components/workbench/Preview";
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);
};
//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;

26
app/components/chat/ChatComponent/functions/getRewindMessageIndexAfterReject.ts
View File

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

32
app/components/chat/ChatComponent/functions/mergeResponseMessages.ts
View File

@ -1,20 +1,20 @@
import type { Message } from "~/lib/persistence/message";
import { assert } from "~/lib/replay/ReplayProtocolClient";
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;
};
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;

6
app/components/chat/MessageInput/MessageInput.tsx
View File

@ -2,8 +2,8 @@ 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';
import { SendButton } from '~/components/chat/SendButton.client';
import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
export interface MessageInputProps {
textareaRef?: React.RefObject<HTMLTextAreaElement>;
@ -203,4 +203,4 @@ export const MessageInput: React.FC<MessageInputProps> = ({
</div>
</div>
);
};
};

13
app/components/chat/SearchInput/SearchInput.tsx
View File

@ -2,12 +2,14 @@ import React from 'react';
interface SearchInputProps {
onSearch: (text: string) => void;
onChange: (text: string) => void;
}
export const SearchInput: React.FC<SearchInputProps> = ({ onSearch, onChange }) => {
export const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
return (
<div className="placeholder-bolt-elements-textTertiary" style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }}>
<div
className="placeholder-bolt-elements-textTertiary"
style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }}
>
<input
type="text"
placeholder="Search"
@ -16,9 +18,6 @@ export const SearchInput: React.FC<SearchInputProps> = ({ onSearch, onChange })
onSearch(event.currentTarget.value);
}
}}
onChange={(event) => {
onChange(event.target.value);
}}
style={{
width: '200px',
padding: '0.5rem',
@ -31,4 +30,4 @@ export const SearchInput: React.FC<SearchInputProps> = ({ onSearch, onChange })
/>
</div>
);
};
};

22
app/components/icons/google-icon.tsx
View File

@ -1,10 +1,22 @@
export function GoogleIcon() {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.171 8.368h-.67v-.035H10v3.333h4.709A4.998 4.998 0 0 1 5 10a5 5 0 0 1 5-5c1.275 0 2.434.48 3.317 1.266l2.357-2.357A8.295 8.295 0 0 0 10 1.667a8.334 8.334 0 1 0 8.171 6.7z" fill="#FFC107"/>
<path d="M2.628 6.121l2.734 2.008a4.998 4.998 0 0 1 4.638-3.13c1.275 0 2.434.482 3.317 1.267l2.357-2.357A8.295 8.295 0 0 0 10 1.667 8.329 8.329 0 0 0 2.628 6.12z" fill="#FF3D00"/>
<path d="M10 18.333a8.294 8.294 0 0 0 5.587-2.163l-2.579-2.183A4.963 4.963 0 0 1 10 15a4.998 4.998 0 0 1-4.701-3.311L2.58 13.783A8.327 8.327 0 0 0 10 18.333z" fill="#4CAF50"/>
<path d="M18.171 8.368H17.5v-.034H10v3.333h4.71a5.017 5.017 0 0 1-1.703 2.321l2.58 2.182c-.182.166 2.746-2.003 2.746-6.17 0-.559-.057-1.104-.162-1.632z" fill="#1976D2"/>
<path
d="M18.171 8.368h-.67v-.035H10v3.333h4.709A4.998 4.998 0 0 1 5 10a5 5 0 0 1 5-5c1.275 0 2.434.48 3.317 1.266l2.357-2.357A8.295 8.295 0 0 0 10 1.667a8.334 8.334 0 1 0 8.171 6.7z"
fill="#FFC107"
/>
<path
d="M2.628 6.121l2.734 2.008a4.998 4.998 0 0 1 4.638-3.13c1.275 0 2.434.482 3.317 1.267l2.357-2.357A8.295 8.295 0 0 0 10 1.667 8.329 8.329 0 0 0 2.628 6.12z"
fill="#FF3D00"
/>
<path
d="M10 18.333a8.294 8.294 0 0 0 5.587-2.163l-2.579-2.183A4.963 4.963 0 0 1 10 15a4.998 4.998 0 0 1-4.701-3.311L2.58 13.783A8.327 8.327 0 0 0 10 18.333z"
fill="#4CAF50"
/>
<path
d="M18.171 8.368H17.5v-.034H10v3.333h4.71a5.017 5.017 0 0 1-1.703 2.321l2.58 2.182c-.182.166 2.746-2.003 2.746-6.17 0-.559-.057-1.104-.162-1.632z"
fill="#1976D2"
/>
</svg>
);
}
}

2
app/hooks/useSpeechRecognition.ts
View File

@ -64,4 +64,4 @@ export const useSpeechRecognition = ({ onTranscriptChange }: UseSpeechRecognitio
stopListening,
abortListening,
};
};
};

8
app/layout/PageContainer.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Header } from '../components/header/Header';
import BackgroundRays from '../components/ui/BackgroundRays';
import { Header } from '~/components/header/Header';
import BackgroundRays from '~/components/ui/BackgroundRays';
interface PageContainerProps {
children: React.ReactNode;
@ -11,9 +11,7 @@ export const PageContainer: React.FC<PageContainerProps> = ({ children }) => {
<div className="h-screen w-full flex flex-col bg-bolt-elements-background-depth-1 dark:bg-black overflow-hidden">
<Header />
<BackgroundRays />
<div className="flex-1 w-full overflow-y-auto page-content">
{children}
</div>
<div className="flex-1 w-full overflow-y-auto page-content">{children}</div>
</div>
);
};

4
app/types/chat.ts
View File

@ -1,6 +1,6 @@
import type { Message, MessageImage, MessageText } from '~/lib/persistence/message';
import type { ResumeChatInfo } from '~/lib/persistence/useChatHistory';
import type { RejectChangeData } from '../components/chat/ApproveChange';
import type { RejectChangeData } from '~/components/chat/ApproveChange';
export interface ChatProps {
initialMessages: Message[];
@ -24,4 +24,4 @@ export interface UserMessage extends MessageText {
export interface UserImageMessage extends MessageImage {
role: 'user';
type: 'image';
}
}

11
app/utils/chat/messageUtils.ts
View File

@ -13,10 +13,13 @@ export function setLastChatMessages(messages: Message[] | undefined) {
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,
@ -24,21 +27,23 @@ export function mergeResponseMessage(msg: Message, messages: Message[]): Message
} 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;
}
}

3
app/utils/chat/simulationUtils.ts
View File

@ -18,9 +18,8 @@ export async function flushSimulationData() {
simulationAddData(simulationData);
}
// Set up the interval in a separate function that can be called once
export function setupSimulationInterval() {
setInterval(async () => {
flushSimulationData();
}, 1000);
}
}