UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2024-11-27 14:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: rework ux for deleting chats (#46)

Browse Source
This commit is contained in:
Dominic Elm 2024-08-21 07:58:43 +02:00 committed by GitHub
parent fcfef742d5
commit 1e11ab6395
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 307 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/bolt/app/components/sidebar/HistoryItem.tsx
View File

@ -1,26 +1,16 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'react-toastify';
import { db, deleteId, type ChatHistory } from '~/lib/persistence';
import { logger } from '~/utils/logger';
import * as Dialog from '@radix-ui/react-dialog';
import { useEffect, useRef, useState } from 'react';
import { type ChatHistoryItem } from '~/lib/persistence';
export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntries: () => void }) {
const [requestingDelete, setRequestingDelete] = useState(false);
interface HistoryItemProps {
item: ChatHistoryItem;
onDelete?: (event: React.UIEvent) => void;
}
export function HistoryItem({ item, onDelete }: HistoryItemProps) {
const [hovering, setHovering] = useState(false);
const hoverRef = useRef<HTMLDivElement>(null);
const deleteItem = useCallback((event: React.UIEvent) => {
event.preventDefault();
if (db) {
deleteId(db, item.id)
.then(() => loadEntries())
.catch((error) => {
toast.error('Failed to delete conversation');
logger.error(error);
});
}
}, []);
useEffect(() => {
let timeout: NodeJS.Timeout | undefined;
@ -34,11 +24,6 @@ export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntr
function mouseLeave() {
setHovering(false);
// wait for animation to finish before unsetting
timeout = setTimeout(() => {
setRequestingDelete(false);
}, 200);
}
hoverRef.current?.addEventListener('mouseenter', mouseEnter);
@ -59,18 +44,17 @@ export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntr
{item.description}
<div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
{hovering && (
<div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary">
{requestingDelete ? (
<button className="i-ph:check scale-110" onClick={deleteItem} />
) : (
<div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-item-contentDanger">
<Dialog.Trigger asChild>
<button
className="i-ph:trash scale-110"
onClick={(event) => {
// we prevent the default so we don't trigger the anchor above
event.preventDefault();
setRequestingDelete(true);
onDelete?.(event);
}}
/>
)}
</Dialog.Trigger>
</div>
)}
</div>

75
packages/bolt/app/components/sidebar/Menu.client.tsx
View File

@ -1,10 +1,12 @@
import { motion, type Variants } from 'framer-motion';
import { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'react-toastify';
import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
import { IconButton } from '~/components/ui/IconButton';
import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
import { db, getAll, type ChatHistory } from '~/lib/persistence';
import { db, deleteId, getAll, type ChatHistoryItem } from '~/lib/persistence';
import { cubicEasingFn } from '~/utils/easings';
import { logger } from '~/utils/logger';
import { HistoryItem } from './HistoryItem';
import { binDates } from './date-binning';
@ -29,10 +31,13 @@ const menuVariants = {
},
} satisfies Variants;
type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
export function Menu() {
const menuRef = useRef<HTMLDivElement>(null);
const [list, setList] = useState<ChatHistory[]>([]);
const [list, setList] = useState<ChatHistoryItem[]>([]);
const [open, setOpen] = useState(false);
const [dialogContent, setDialogContent] = useState<DialogContent>(null);
const loadEntries = useCallback(() => {
if (db) {
@ -43,6 +48,23 @@ export function Menu() {
}
}, []);
const deleteItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
event.preventDefault();
if (db) {
deleteId(db, item.id)
.then(() => loadEntries())
.catch((error) => {
toast.error('Failed to delete conversation');
logger.error(error);
});
}
}, []);
const closeDialog = () => {
setDialogContent(null);
};
useEffect(() => {
if (open) {
loadEntries();
@ -92,16 +114,47 @@ export function Menu() {
<div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
<div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
{list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
{binDates(list).map(({ category, items }) => (
<div key={category} className="mt-4 first:mt-0 space-y-1">
<div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
{category}
<DialogRoot open={dialogContent !== null}>
{binDates(list).map(({ category, items }) => (
<div key={category} className="mt-4 first:mt-0 space-y-1">
<div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
{category}
</div>
{items.map((item) => (
<HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
))}
</div>
{items.map((item) => (
<HistoryItem key={item.id} item={item} loadEntries={loadEntries} />
))}
</div>
))}
))}
<Dialog onBackdrop={closeDialog} onClose={closeDialog}>
{dialogContent?.type === 'delete' && (
<>
<DialogTitle>Delete Chat?</DialogTitle>
<DialogDescription asChild>
<div>
<p>
You are about to delete <strong>{dialogContent.item.description}</strong>.
</p>
<p className="mt-1">Are you sure you want to delete this chat?</p>
</div>
</DialogDescription>
<div className="px-5 pb-4 bg-bolt-elements-background-depth-2 flex gap-2 justify-end">
<DialogButton type="secondary" onClick={closeDialog}>
Cancel
</DialogButton>
<DialogButton
type="danger"
onClick={(event) => {
deleteItem(event, dialogContent.item);
closeDialog();
}}
>
Delete
</DialogButton>
</div>
</>
)}
</Dialog>
</DialogRoot>
</div>
<div className="flex items-center border-t border-bolt-elements-borderColor p-4">
<a href="/logout">

6
packages/bolt/app/components/sidebar/date-binning.ts
View File

@ -1,9 +1,9 @@
import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
import type { ChatHistory } from '~/lib/persistence';
import type { ChatHistoryItem } from '~/lib/persistence';
type Bin = { category: string; items: ChatHistory[] };
type Bin = { category: string; items: ChatHistoryItem[] };
export function binDates(_list: ChatHistory[]) {
export function binDates(_list: ChatHistoryItem[]) {
const list = _list.toSorted((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
const binLookup: Record<string, Bin> = {};

133
packages/bolt/app/components/ui/Dialog.tsx Normal file
View File

@ -0,0 +1,133 @@
import * as RadixDialog from '@radix-ui/react-dialog';
import { motion, type Variants } from 'framer-motion';
import React, { memo, type ReactNode } from 'react';
import { classNames } from '~/utils/classNames';
import { cubicEasingFn } from '~/utils/easings';
import { IconButton } from './IconButton';
export { Close as DialogClose, Root as DialogRoot } from '@radix-ui/react-dialog';
const transition = {
duration: 0.15,
ease: cubicEasingFn,
};
export const dialogBackdropVariants = {
closed: {
opacity: 0,
transition,
},
open: {
opacity: 1,
transition,
},
} satisfies Variants;
export const dialogVariants = {
closed: {
x: '-50%',
y: '-40%',
scale: 0.96,
opacity: 0,
transition,
},
open: {
x: '-50%',
y: '-50%',
scale: 1,
opacity: 1,
transition,
},
} satisfies Variants;
interface DialogButtonProps {
type: 'primary' | 'secondary' | 'danger';
children: ReactNode;
onClick?: (event: React.UIEvent) => void;
}
export const DialogButton = memo(({ type, children, onClick }: DialogButtonProps) => {
return (
<button
className={classNames(
'inline-flex h-[35px] items-center justify-center rounded-lg px-4 text-sm leading-none focus:outline-none',
{
'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text hover:bg-bolt-elements-button-primary-backgroundHover':
type === 'primary',
'bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text hover:bg-bolt-elements-button-secondary-backgroundHover':
type === 'secondary',
'bg-bolt-elements-button-danger-background text-bolt-elements-button-danger-text hover:bg-bolt-elements-button-danger-backgroundHover':
type === 'danger',
},
)}
onClick={onClick}
>
{children}
</button>
);
});
export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.DialogTitleProps) => {
return (
<RadixDialog.Title
className={classNames(
'px-5 py-4 flex items-center justify-between border-b border-bolt-elements-borderColor text-lg font-semibold leading-6 text-bolt-elements-textPrimary',
className,
)}
{...props}
>
{children}
</RadixDialog.Title>
);
});
export const DialogDescription = memo(({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => {
return (
<RadixDialog.Description
className={classNames('px-5 py-4 text-bolt-elements-textPrimary text-md', className)}
{...props}
>
{children}
</RadixDialog.Description>
);
});
interface DialogProps {
children: ReactNode | ReactNode[];
className?: string;
onBackdrop?: (event: React.UIEvent) => void;
onClose?: (event: React.UIEvent) => void;
}
export const Dialog = memo(({ className, children, onBackdrop, onClose }: DialogProps) => {
return (
<RadixDialog.Portal>
<RadixDialog.Overlay onClick={onBackdrop} asChild>
<motion.div
className="bg-black/50 fixed inset-0 z-max"
initial="closed"
animate="open"
exit="closed"
variants={dialogBackdropVariants}
/>
</RadixDialog.Overlay>
<RadixDialog.Content asChild>
<motion.div
className={classNames(
'fixed top-[50%] left-[50%] z-max max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-2 shadow-lg focus:outline-none overflow-hidden',
className,
)}
initial="closed"
animate="open"
exit="closed"
variants={dialogVariants}
>
{children}
<RadixDialog.Close asChild onClick={onClose}>
<IconButton icon="i-ph:x" className="absolute top-[10px] right-[10px]" />
</RadixDialog.Close>
</motion.div>
</RadixDialog.Content>
</RadixDialog.Portal>
);
});

16
packages/bolt/app/lib/persistence/db.ts
View File

@ -1,6 +1,6 @@
import type { Message } from 'ai';
import type { ChatHistory } from './useChatHistory';
import { createScopedLogger } from '~/utils/logger';
import type { ChatHistoryItem } from './useChatHistory';
const logger = createScopedLogger('ChatHistory');
@ -30,13 +30,13 @@ export async function openDatabase(): Promise<IDBDatabase | undefined> {
});
}
export async function getAll(db: IDBDatabase): Promise<ChatHistory[]> {
export async function getAll(db: IDBDatabase): Promise<ChatHistoryItem[]> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('chats', 'readonly');
const store = transaction.objectStore('chats');
const request = store.getAll();
request.onsuccess = () => resolve(request.result as ChatHistory[]);
request.onsuccess = () => resolve(request.result as ChatHistoryItem[]);
request.onerror = () => reject(request.error);
});
}
@ -65,29 +65,29 @@ export async function setMessages(
});
}
export async function getMessages(db: IDBDatabase, id: string): Promise<ChatHistory> {
export async function getMessages(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
return (await getMessagesById(db, id)) || (await getMessagesByUrlId(db, id));
}
export async function getMessagesByUrlId(db: IDBDatabase, id: string): Promise<ChatHistory> {
export async function getMessagesByUrlId(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('chats', 'readonly');
const store = transaction.objectStore('chats');
const index = store.index('urlId');
const request = index.get(id);
request.onsuccess = () => resolve(request.result as ChatHistory);
request.onsuccess = () => resolve(request.result as ChatHistoryItem);
request.onerror = () => reject(request.error);
});
}
export async function getMessagesById(db: IDBDatabase, id: string): Promise<ChatHistory> {
export async function getMessagesById(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('chats', 'readonly');
const store = transaction.objectStore('chats');
const request = store.get(id);
request.onsuccess = () => resolve(request.result as ChatHistory);
request.onsuccess = () => resolve(request.result as ChatHistoryItem);
request.onerror = () => reject(request.error);
});
}

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

@ -1,12 +1,12 @@
import { useNavigate, useLoaderData } from '@remix-run/react';
import { useState, useEffect } from 'react';
import { useLoaderData, useNavigate } from '@remix-run/react';
import type { Message } from 'ai';
import { openDatabase, setMessages, getMessages, getNextId, getUrlId } from './db';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { AnalyticsAction, sendAnalyticsEvent } from '~/lib/analytics';
import { workbenchStore } from '~/lib/stores/workbench';
import { sendAnalyticsEvent, AnalyticsAction } from '~/lib/analytics';
import { getMessages, getNextId, getUrlId, openDatabase, setMessages } from './db';
export interface ChatHistory {
export interface ChatHistoryItem {
id: string;
urlId?: string;
description?: string;

24
packages/bolt/app/styles/variables.scss
View File

@ -16,6 +16,18 @@
--bolt-elements-code-background: theme('colors.gray.100');
--bolt-elements-code-text: theme('colors.gray.950');
--bolt-elements-button-primary-background: theme('colors.alpha.accent.10');
--bolt-elements-button-primary-backgroundHover: theme('colors.alpha.accent.20');
--bolt-elements-button-primary-text: theme('colors.accent.500');
--bolt-elements-button-secondary-background: theme('colors.alpha.gray.5');
--bolt-elements-button-secondary-backgroundHover: theme('colors.alpha.gray.10');
--bolt-elements-button-secondary-text: theme('colors.gray.950');
--bolt-elements-button-danger-background: theme('colors.alpha.red.10');
--bolt-elements-button-danger-backgroundHover: theme('colors.alpha.red.20');
--bolt-elements-button-danger-text: theme('colors.red.500');
--bolt-elements-item-contentDefault: theme('colors.alpha.gray.50');
--bolt-elements-item-contentActive: theme('colors.gray.950');
--bolt-elements-item-contentAccent: theme('colors.accent.700');
@ -110,6 +122,18 @@
--bolt-elements-code-background: theme('colors.gray.800');
--bolt-elements-code-text: theme('colors.white');
--bolt-elements-button-primary-background: theme('colors.alpha.accent.10');
--bolt-elements-button-primary-backgroundHover: theme('colors.alpha.accent.20');
--bolt-elements-button-primary-text: theme('colors.accent.500');
--bolt-elements-button-secondary-background: theme('colors.alpha.white.5');
--bolt-elements-button-secondary-backgroundHover: theme('colors.alpha.white.10');
--bolt-elements-button-secondary-text: theme('colors.white');
--bolt-elements-button-danger-background: theme('colors.alpha.red.10');
--bolt-elements-button-danger-backgroundHover: theme('colors.alpha.red.20');
--bolt-elements-button-danger-text: theme('colors.red.500');
--bolt-elements-item-contentDefault: theme('colors.alpha.white.50');
--bolt-elements-item-contentActive: theme('colors.white');
--bolt-elements-item-contentAccent: theme('colors.accent.500');

1
packages/bolt/package.json
View File

@ -36,6 +36,7 @@
"@iconify-json/svg-spinners": "^1.1.2",
"@lezer/highlight": "^1.2.0",
"@nanostores/react": "^0.7.2",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@remix-run/cloudflare": "^2.10.2",
"@remix-run/cloudflare-pages": "^2.10.2",

17
packages/bolt/uno.config.ts
View File

@ -133,6 +133,23 @@ export default defineConfig({
background: 'var(--bolt-elements-code-background)',
text: 'var(--bolt-elements-code-text)',
},
button: {
primary: {
background: 'var(--bolt-elements-button-primary-background)',
backgroundHover: 'var(--bolt-elements-button-primary-backgroundHover)',
text: 'var(--bolt-elements-button-primary-text)',
},
secondary: {
background: 'var(--bolt-elements-button-secondary-background)',
backgroundHover: 'var(--bolt-elements-button-secondary-backgroundHover)',
text: 'var(--bolt-elements-button-secondary-text)',
},
danger: {
background: 'var(--bolt-elements-button-danger-background)',
backgroundHover: 'var(--bolt-elements-button-danger-backgroundHover)',
text: 'var(--bolt-elements-button-danger-text)',
},
},
item: {
contentDefault: 'var(--bolt-elements-item-contentDefault)',
contentActive: 'var(--bolt-elements-item-contentActive)',

38
pnpm-lock.yaml
View File

@ -95,6 +95,9 @@ importers:
'@nanostores/react':
specifier: ^0.7.2
version: 0.7.2(nanostores@0.10.3)(react@18.3.1)
'@radix-ui/react-dialog':
specifier: ^1.1.1
version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-dropdown-menu':
specifier: ^2.1.1
version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -1296,6 +1299,19 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-dialog@1.1.1':
resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-direction@1.1.0':
resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
peerDependencies:
@ -6597,6 +6613,28 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@radix-ui/primitive': 1.1.0
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-focus-guards': 1.1.0(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
aria-hidden: 1.2.4
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-remove-scroll: 2.5.7(@types/react@18.3.3)(react@18.3.1)
optionalDependencies:
'@types/react': 18.3.3
'@types/react-dom': 18.3.0
'@radix-ui/react-direction@1.1.0(@types/react@18.3.3)(react@18.3.1)':
dependencies:
react: 18.3.1