Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/improve sidebar #422

Merged
merged 3 commits into from
Nov 26, 2024
Merged

Feat/improve sidebar #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dafe934
fix: sidebar scroll always showing up
SujalXplores Nov 25, 2024
b8b25ba
refactor: improve history item hover states and interactions
SujalXplores Nov 25, 2024
0ebd4a6
fix: tooltip UI
SujalXplores Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 30 additions & 63 deletions app/components/sidebar/HistoryItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as Dialog from '@radix-ui/react-dialog';
import { useEffect, useRef, useState } from 'react';
import { type ChatHistoryItem } from '~/lib/persistence';
import WithTooltip from '~/components/ui/Tooltip';

Expand All @@ -11,78 +10,46 @@ interface HistoryItemProps {
}

export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
const [hovering, setHovering] = useState(false);
const hoverRef = useRef<HTMLDivElement>(null);

useEffect(() => {
let timeout: NodeJS.Timeout | undefined;

function mouseEnter() {
setHovering(true);

if (timeout) {
clearTimeout(timeout);
}
}

function mouseLeave() {
setHovering(false);
}

hoverRef.current?.addEventListener('mouseenter', mouseEnter);
hoverRef.current?.addEventListener('mouseleave', mouseLeave);

return () => {
hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
};
}, []);

return (
<div
ref={hoverRef}
className="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"
>
<div className="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">
<a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
{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 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%">
{hovering && (
<div className="flex items-center p-1 text-bolt-elements-textSecondary">
<WithTooltip tooltip="Export chat">
<div className="flex items-center p-1 text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity">
<WithTooltip tooltip="Export chat">
<button
type="button"
className="i-ph:download-simple scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
onClick={(event) => {
event.preventDefault();
exportChat(item.id);
}}
title="Export chat"
/>
</WithTooltip>
{onDuplicate && (
<WithTooltip tooltip="Duplicate chat">
<button
className="i-ph:download-simple scale-110 mr-2"
type="button"
className="i-ph:copy scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
onClick={() => onDuplicate?.(item.id)}
title="Duplicate chat"
/>
</WithTooltip>
)}
<Dialog.Trigger asChild>
<WithTooltip tooltip="Delete chat">
<button
type="button"
className="i-ph:trash scale-110 hover:text-bolt-elements-button-danger-text"
onClick={(event) => {
event.preventDefault();
exportChat(item.id);

//exportChat(item.messages, item.description);
onDelete?.(event);
}}
title="Export chat"
/>
</WithTooltip>
{onDuplicate && (
<WithTooltip tooltip="Duplicate chat">
<button
className="i-ph:copy scale-110 mr-2"
onClick={() => onDuplicate?.(item.id)}
title="Duplicate chat"
/>
</WithTooltip>
)}
<Dialog.Trigger asChild>
<WithTooltip tooltip="Delete chat">
<button
className="i-ph:trash scale-110"
onClick={(event) => {
// we prevent the default so we don't trigger the anchor above
event.preventDefault();
onDelete?.(event);
}}
/>
</WithTooltip>
</Dialog.Trigger>
</div>
)}
</Dialog.Trigger>
</div>
</div>
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/sidebar/Menu.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export function Menu() {
</a>
</div>
<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">
<div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
{list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
<DialogRoot open={dialogContent !== null}>
{binDates(list).map(({ category, items }) => (
Expand Down
58 changes: 46 additions & 12 deletions app/components/ui/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React from 'react';
import * as Tooltip from '@radix-ui/react-tooltip';
import type { ReactNode } from 'react';

interface ToolTipProps {
tooltip: string;
children: ReactNode | ReactNode[];
interface TooltipProps {
tooltip: React.ReactNode;
children: React.ReactNode;
sideOffset?: number;
className?: string;
arrowClassName?: string;
tooltipStyle?: any; //TODO better type
tooltipStyle?: React.CSSProperties;
position?: 'top' | 'bottom' | 'left' | 'right';
maxWidth?: number;
delay?: number;
}

const WithTooltip = ({
Expand All @@ -18,18 +19,51 @@ const WithTooltip = ({
className = '',
arrowClassName = '',
tooltipStyle = {},
}: ToolTipProps) => {
position = 'top',
maxWidth = 250,
delay = 0,
}: TooltipProps) => {
return (
<Tooltip.Root>
<Tooltip.Root delayDuration={delay}>
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className={`bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg ${className}`}
side={position}
className={`
z-[2000]
px-2.5
py-1.5
max-h-[300px]
select-none
rounded-md
bg-bolt-elements-background-depth-3
text-bolt-elements-textPrimary
text-sm
leading-tight
shadow-lg
animate-in
fade-in-0
zoom-in-95
data-[state=closed]:animate-out
data-[state=closed]:fade-out-0
data-[state=closed]:zoom-out-95
${className}
`}
sideOffset={sideOffset}
style={{ zIndex: 2000, backgroundColor: 'white', ...tooltipStyle }}
style={{
maxWidth,
...tooltipStyle,
}}
>
{tooltip}
<Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
<div className="break-words">{tooltip}</div>
<Tooltip.Arrow
className={`
fill-bolt-elements-background-depth-3
${arrowClassName}
`}
width={12}
height={6}
/>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
Expand Down