mirror of
https://github.com/harivansh-afk/asap.it.git
synced 2026-04-18 20:03:36 +00:00
first commit
This commit is contained in:
commit
1cdbffff09
200 changed files with 30007 additions and 0 deletions
127
app/components/sidebar/HistoryItem.tsx
Normal file
127
app/components/sidebar/HistoryItem.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import { useParams } from '@remix-run/react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { type ChatHistoryItem } from '~/lib/persistence';
|
||||
import WithTooltip from '~/components/ui/Tooltip';
|
||||
import { useEditChatDescription } from '~/lib/hooks';
|
||||
|
||||
interface HistoryItemProps {
|
||||
item: ChatHistoryItem;
|
||||
onDelete?: (event: React.UIEvent) => void;
|
||||
onDuplicate?: (id: string) => void;
|
||||
exportChat: (id?: string) => void;
|
||||
}
|
||||
|
||||
export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
|
||||
const { id: urlId } = useParams();
|
||||
const isActiveChat = urlId === item.urlId;
|
||||
|
||||
const { editing, handleChange, handleBlur, handleSubmit, handleKeyDown, currentDescription, toggleEditMode } =
|
||||
useEditChatDescription({
|
||||
initialDescription: item.description,
|
||||
customChatId: item.id,
|
||||
syncWithGlobalStore: isActiveChat,
|
||||
});
|
||||
|
||||
const renderDescriptionForm = (
|
||||
<form onSubmit={handleSubmit} className="flex-1 flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 mr-2"
|
||||
autoFocus
|
||||
value={currentDescription}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="i-ph:check scale-110 hover:text-bolt-elements-item-contentAccent"
|
||||
onMouseDown={handleSubmit}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1',
|
||||
{ '[&&]:text-bolt-elements-textPrimary bg-bolt-elements-background-depth-3': isActiveChat },
|
||||
)}
|
||||
>
|
||||
{editing ? (
|
||||
renderDescriptionForm
|
||||
) : (
|
||||
<a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
|
||||
{currentDescription}
|
||||
<div
|
||||
className={classNames(
|
||||
'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 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-22 group-hover:from-99%',
|
||||
{ 'from-bolt-elements-background-depth-3 w-10 ': isActiveChat },
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center p-1 text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ChatActionButton
|
||||
toolTipContent="Export chat"
|
||||
icon="i-ph:download-simple"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
exportChat(item.id);
|
||||
}}
|
||||
/>
|
||||
{onDuplicate && (
|
||||
<ChatActionButton
|
||||
toolTipContent="Duplicate chat"
|
||||
icon="i-ph:copy"
|
||||
onClick={() => onDuplicate?.(item.id)}
|
||||
/>
|
||||
)}
|
||||
<ChatActionButton
|
||||
toolTipContent="Rename chat"
|
||||
icon="i-ph:pencil-fill"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
toggleEditMode();
|
||||
}}
|
||||
/>
|
||||
<Dialog.Trigger asChild>
|
||||
<ChatActionButton
|
||||
toolTipContent="Delete chat"
|
||||
icon="i-ph:trash"
|
||||
className="[&&]:hover:text-bolt-elements-button-danger-text"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onDelete?.(event);
|
||||
}}
|
||||
/>
|
||||
</Dialog.Trigger>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ChatActionButton = ({
|
||||
toolTipContent,
|
||||
icon,
|
||||
className,
|
||||
onClick,
|
||||
}: {
|
||||
toolTipContent: string;
|
||||
icon: string;
|
||||
className?: string;
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
btnTitle?: string;
|
||||
}) => {
|
||||
return (
|
||||
<WithTooltip tooltip={toolTipContent}>
|
||||
<button
|
||||
type="button"
|
||||
className={`scale-110 mr-2 hover:text-bolt-elements-item-contentAccent ${icon} ${className ? className : ''}`}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</WithTooltip>
|
||||
);
|
||||
};
|
||||
214
app/components/sidebar/Menu.client.tsx
Normal file
214
app/components/sidebar/Menu.client.tsx
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
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 { 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 { cubicEasingFn } from '~/utils/easings';
|
||||
import { logger } from '~/utils/logger';
|
||||
import { HistoryItem } from './HistoryItem';
|
||||
import { binDates } from './date-binning';
|
||||
import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
|
||||
|
||||
const menuVariants = {
|
||||
closed: {
|
||||
opacity: 0,
|
||||
visibility: 'hidden',
|
||||
left: '-150px',
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
ease: cubicEasingFn,
|
||||
},
|
||||
},
|
||||
open: {
|
||||
opacity: 1,
|
||||
visibility: 'initial',
|
||||
left: 0,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
ease: cubicEasingFn,
|
||||
},
|
||||
},
|
||||
} satisfies Variants;
|
||||
|
||||
type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
|
||||
|
||||
export const Menu = () => {
|
||||
const { duplicateCurrentChat, exportChat } = useChatHistory();
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const [list, setList] = useState<ChatHistoryItem[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [dialogContent, setDialogContent] = useState<DialogContent>(null);
|
||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||
|
||||
const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({
|
||||
items: list,
|
||||
searchFields: ['description'],
|
||||
});
|
||||
|
||||
const loadEntries = useCallback(() => {
|
||||
if (db) {
|
||||
getAll(db)
|
||||
.then((list) => list.filter((item) => item.urlId && item.description))
|
||||
.then(setList)
|
||||
.catch((error) => toast.error(error.message));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const deleteItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (db) {
|
||||
deleteById(db, item.id)
|
||||
.then(() => {
|
||||
loadEntries();
|
||||
|
||||
if (chatId.get() === item.id) {
|
||||
// hard page navigation to clear the stores
|
||||
window.location.pathname = '/';
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error('Failed to delete conversation');
|
||||
logger.error(error);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const closeDialog = () => {
|
||||
setDialogContent(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadEntries();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
const enterThreshold = 40;
|
||||
const exitThreshold = 40;
|
||||
|
||||
function onMouseMove(event: MouseEvent) {
|
||||
if (event.pageX < enterThreshold) {
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
if (menuRef.current && event.clientX > menuRef.current.getBoundingClientRect().right + exitThreshold) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
|
||||
event.preventDefault();
|
||||
setDialogContent({ type: 'delete', item });
|
||||
};
|
||||
|
||||
const handleDuplicate = async (id: string) => {
|
||||
await duplicateCurrentChat(id);
|
||||
loadEntries(); // Reload the list after duplication
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={menuRef}
|
||||
initial="closed"
|
||||
animate={open ? 'open' : 'closed'}
|
||||
variants={menuVariants}
|
||||
className="flex selection-accent flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
|
||||
>
|
||||
<div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
|
||||
<div className="flex-1 flex flex-col h-full w-full overflow-hidden">
|
||||
<div className="p-4 select-none">
|
||||
<a
|
||||
href="/"
|
||||
className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
|
||||
>
|
||||
<span className="inline-block i-bolt:chat scale-110" />
|
||||
Start new chat
|
||||
</a>
|
||||
</div>
|
||||
<div className="pl-4 pr-4 my-2">
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
onChange={handleSearchChange}
|
||||
aria-label="Search chats"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
|
||||
<div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
|
||||
{filteredList.length === 0 && (
|
||||
<div className="pl-2 text-bolt-elements-textTertiary">
|
||||
{list.length === 0 ? 'No previous conversations' : 'No matches found'}
|
||||
</div>
|
||||
)}
|
||||
<DialogRoot open={dialogContent !== null}>
|
||||
{binDates(filteredList).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}
|
||||
exportChat={exportChat}
|
||||
onDelete={(event) => handleDeleteClick(event, item)}
|
||||
onDuplicate={() => handleDuplicate(item.id)}
|
||||
/>
|
||||
))}
|
||||
</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 justify-between border-t border-bolt-elements-borderColor p-4">
|
||||
<SettingsButton onClick={() => setIsSettingsOpen(true)} />
|
||||
<ThemeSwitch />
|
||||
</div>
|
||||
</div>
|
||||
<SettingsWindow open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
59
app/components/sidebar/date-binning.ts
Normal file
59
app/components/sidebar/date-binning.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
|
||||
import type { ChatHistoryItem } from '~/lib/persistence';
|
||||
|
||||
type Bin = { category: string; items: ChatHistoryItem[] };
|
||||
|
||||
export function binDates(_list: ChatHistoryItem[]) {
|
||||
const list = _list.toSorted((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
|
||||
|
||||
const binLookup: Record<string, Bin> = {};
|
||||
const bins: Array<Bin> = [];
|
||||
|
||||
list.forEach((item) => {
|
||||
const category = dateCategory(new Date(item.timestamp));
|
||||
|
||||
if (!(category in binLookup)) {
|
||||
const bin = {
|
||||
category,
|
||||
items: [item],
|
||||
};
|
||||
|
||||
binLookup[category] = bin;
|
||||
|
||||
bins.push(bin);
|
||||
} else {
|
||||
binLookup[category].items.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return bins;
|
||||
}
|
||||
|
||||
function dateCategory(date: Date) {
|
||||
if (isToday(date)) {
|
||||
return 'Today';
|
||||
}
|
||||
|
||||
if (isYesterday(date)) {
|
||||
return 'Yesterday';
|
||||
}
|
||||
|
||||
if (isThisWeek(date)) {
|
||||
// e.g., "Monday"
|
||||
return format(date, 'eeee');
|
||||
}
|
||||
|
||||
const thirtyDaysAgo = subDays(new Date(), 30);
|
||||
|
||||
if (isAfter(date, thirtyDaysAgo)) {
|
||||
return 'Last 30 Days';
|
||||
}
|
||||
|
||||
if (isThisYear(date)) {
|
||||
// e.g., "July"
|
||||
return format(date, 'MMMM');
|
||||
}
|
||||
|
||||
// e.g., "July 2023"
|
||||
return format(date, 'MMMM yyyy');
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue