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

Wrap database in async suspense value (#36)

Browse Source
This commit is contained in:
Mateusz Burzyński 2025-02-20 20:05:57 +01:00 committed by GitHub
parent 12cd21f1d3
commit 6acb94b5af
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 51 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/components/chat/Messages.client.tsx
View File

@ -4,7 +4,6 @@ import { classNames } from '~/utils/classNames';
import { AssistantMessage, getAnnotationsTokensUsage } from './AssistantMessage';
import { UserMessage } from './UserMessage';
import { useLocation } from '@remix-run/react';
import { db, chatId } from '~/lib/persistence/useChatHistory';
import { forkChat } from '~/lib/persistence/db';
import { toast } from 'react-toastify';
import WithTooltip from '~/components/ui/Tooltip';
@ -29,7 +28,7 @@ export function saveProjectContents(messageId: string, contents: ProjectContents
}
function hasFileModifications(content: string) {
return content.includes("__boltArtifact__");
return content.includes('__boltArtifact__');
}
export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
@ -95,27 +94,27 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
)}
</div>
{!isUserMessage &&
messageId &&
onRewind &&
getLastMessageProjectContents(index) &&
hasFileModifications(content) && (
<div className="flex gap-2 flex-col lg:flex-row">
<WithTooltip tooltip="Undo changes in this message">
<button
onClick={() => {
const info = getLastMessageProjectContents(index);
assert(info);
onRewind(info.messageId, info.contents.content);
}}
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>
)}
messageId &&
onRewind &&
getLastMessageProjectContents(index) &&
hasFileModifications(content) && (
<div className="flex gap-2 flex-col lg:flex-row">
<WithTooltip tooltip="Undo changes in this message">
<button
onClick={() => {
const info = getLastMessageProjectContents(index);
assert(info);
onRewind(info.messageId, info.contents.content);
}}
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>
)}
</Suspense>
</div>
);

3
app/components/settings/data/DataTab.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useNavigate } from '@remix-run/react';
import Cookies from 'js-cookie';
import { toast } from 'react-toastify';
import { db, deleteById, getAll, setMessages } from '~/lib/persistence';
import { database, deleteById, getAll, setMessages } from '~/lib/persistence';
import { logStore } from '~/lib/stores/logs';
import { classNames } from '~/utils/classNames';
import type { Message } from 'ai';
@ -31,6 +31,7 @@ interface ApiKeys {
}
export default function DataTab() {
const db = database?.read();
const navigate = useNavigate();
const [isDeleting, setIsDeleting] = useState(false);

3
app/components/sidebar/Menu.client.tsx
View File

@ -5,7 +5,7 @@ import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from
import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
import { SettingsWindow } from '~/components/settings/SettingsWindow';
import { SettingsButton } from '~/components/ui/SettingsButton';
import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
import { database, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
import { cubicEasingFn } from '~/utils/easings';
import { logger } from '~/utils/logger';
import { HistoryItem } from './HistoryItem';
@ -39,6 +39,7 @@ const menuVariants = {
type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
export const Menu = () => {
const db = database?.read();
const { duplicateCurrentChat, exportChat } = useChatHistory();
const menuRef = useRef<HTMLDivElement>(null);
const [list, setList] = useState<ChatHistoryItem[]>([]);

15
app/lib/asyncSuspenseValue.ts
View File

@ -32,6 +32,21 @@ export function createAsyncSuspenseValue<T>(getValue: () => Promise<T>) {
};
const asyncValue = {
load: async () => {
if (!record) {
return load();
}
switch (record.status) {
case 'pending':
return record.promise;
case 'resolved':
return record.value;
case 'rejected':
throw record.error;
}
},
read() {
if (!record) {
throw load();

3
app/lib/hooks/useEditChatDescription.ts
View File

@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import {
chatId as chatIdStore,
db,
database,
description as descriptionStore,
getMessages,
updateChatDescription,
@ -44,6 +44,7 @@ export function useEditChatDescription({
customChatId,
syncWithGlobalStore,
}: EditChatDescriptionOptions): EditChatDescriptionHook {
const db = database?.read();
const chatIdFromStore = useStore(chatIdStore);
const [editing, setEditing] = useState(false);
const [currentDescription, setCurrentDescription] = useState(initialDescription);

10
app/lib/persistence/useChatHistory.ts
View File

@ -15,6 +15,7 @@ import {
createChatFromMessages,
} from './db';
import { loadProblem } from '~/components/chat/LoadProblemButton';
import { createAsyncSuspenseValue } from '../asyncSuspenseValue';
export interface ChatHistoryItem {
id: string;
@ -26,14 +27,19 @@ export interface ChatHistoryItem {
const persistenceEnabled = !import.meta.env.VITE_DISABLE_PERSISTENCE;
export const db = persistenceEnabled ? await openDatabase() : undefined;
export const database = persistenceEnabled ? createAsyncSuspenseValue(openDatabase) : undefined;
if (typeof document !== 'undefined') {
database?.preload();
}
export const chatId = atom<string | undefined>(undefined);
export const description = atom<string | undefined>(undefined);
export function useChatHistory() {
const db = database?.read();
const navigate = useNavigate();
const { id: mixedId, problemId } = useLoaderData<{ id?: string, problemId?: string }>() ?? {};
const { id: mixedId, problemId } = useLoaderData<{ id?: string; problemId?: string }>() ?? {};
const [searchParams] = useSearchParams();
const [initialMessages, setInitialMessages] = useState<Message[]>([]);