Update layout and add tooltips (#483)
This commit is contained in:
Jeremy
GitHub
parent
5190b109c9
commit
affd387d03
4 changed files with 107 additions and 48 deletions
|
|
@ -142,5 +142,5 @@
|
|||
}
|
||||
|
||||
.suggestion-highlight {
|
||||
@apply bg-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-400/50 dark:text-yellow-50 dark:bg-yellow-400/40;
|
||||
@apply bg-blue-100 hover:bg-blue-200 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-400/40;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,13 @@ import {
|
|||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import useSWR, { useSWRConfig } from 'swr';
|
||||
import { useDebounceCallback, useWindowSize } from 'usehooks-ts';
|
||||
import {
|
||||
useCopyToClipboard,
|
||||
useDebounceCallback,
|
||||
useWindowSize,
|
||||
} from 'usehooks-ts';
|
||||
|
||||
import { Document, Suggestion } from '@/db/schema';
|
||||
import { fetcher } from '@/lib/utils';
|
||||
|
|
@ -18,13 +23,14 @@ import { fetcher } from '@/lib/utils';
|
|||
import { DiffView } from './diffview';
|
||||
import { DocumentSkeleton } from './document-skeleton';
|
||||
import { Editor } from './editor';
|
||||
import { CrossIcon, DeltaIcon, RedoIcon, UndoIcon } from './icons';
|
||||
import { CopyIcon, CrossIcon, DeltaIcon, RedoIcon, UndoIcon } from './icons';
|
||||
import { Markdown } from './markdown';
|
||||
import { Message as PreviewMessage } from './message';
|
||||
import { MultimodalInput } from './multimodal-input';
|
||||
import { Toolbar } from './toolbar';
|
||||
import { useScrollToBottom } from './use-scroll-to-bottom';
|
||||
import { VersionFooter } from './version-footer';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||||
export interface UICanvas {
|
||||
title: string;
|
||||
documentId: string;
|
||||
|
|
@ -233,6 +239,8 @@ export function Canvas({
|
|||
const { width: windowWidth, height: windowHeight } = useWindowSize();
|
||||
const isMobile = windowWidth ? windowWidth < 768 : false;
|
||||
|
||||
const [_, copyToClipboard] = useCopyToClipboard();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="flex flex-row h-dvh w-dvw fixed top-0 left-0 z-50 bg-muted"
|
||||
|
|
@ -243,10 +251,10 @@ export function Canvas({
|
|||
{!isMobile && (
|
||||
<motion.div
|
||||
className="relative w-[400px] bg-muted dark:bg-background h-dvh shrink-0"
|
||||
initial={{ opacity: 0, x: 10, scale: 1 }}
|
||||
initial={{ opacity: 0, x: windowWidth - 420, scale: 1 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
x: windowWidth - 400,
|
||||
scale: 1,
|
||||
transition: {
|
||||
delay: 0.2,
|
||||
|
|
@ -255,7 +263,12 @@ export function Canvas({
|
|||
damping: 30,
|
||||
},
|
||||
}}
|
||||
exit={{ opacity: 0, x: 10, scale: 0.95, transition: { delay: 0 } }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
x: windowWidth - 420,
|
||||
scale: 0.95,
|
||||
transition: { delay: 0 },
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{!isCurrentVersion && (
|
||||
|
|
@ -349,7 +362,7 @@ export function Canvas({
|
|||
}
|
||||
: {
|
||||
opacity: 1,
|
||||
x: 400,
|
||||
x: 0,
|
||||
y: 0,
|
||||
height: windowHeight,
|
||||
width: windowWidth ? windowWidth - 400 : 'calc(100dvw-400px)',
|
||||
|
|
@ -411,33 +424,62 @@ export function Canvas({
|
|||
</div>
|
||||
|
||||
<div className="flex flex-row gap-1">
|
||||
<div
|
||||
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
|
||||
onClick={() => {
|
||||
handleVersionChange('prev');
|
||||
}}
|
||||
>
|
||||
<UndoIcon size={18} />
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
|
||||
onClick={() => {
|
||||
handleVersionChange('next');
|
||||
}}
|
||||
>
|
||||
<RedoIcon size={18} />
|
||||
</div>
|
||||
<div
|
||||
className={cx(
|
||||
'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700',
|
||||
{ 'bg-muted dark:bg-zinc-700': mode === 'diff' }
|
||||
)}
|
||||
onClick={() => {
|
||||
handleVersionChange('toggle');
|
||||
}}
|
||||
>
|
||||
<DeltaIcon size={18} />
|
||||
</div>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
|
||||
onClick={() => {
|
||||
copyToClipboard(canvas.content);
|
||||
toast.success('Copied to clipboard!');
|
||||
}}
|
||||
>
|
||||
<CopyIcon size={18} />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Copy to clipboard</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
|
||||
onClick={() => {
|
||||
handleVersionChange('prev');
|
||||
}}
|
||||
>
|
||||
<UndoIcon size={18} />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>View Previous version</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
|
||||
onClick={() => {
|
||||
handleVersionChange('next');
|
||||
}}
|
||||
>
|
||||
<RedoIcon size={18} />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>View Next version</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div
|
||||
className={cx(
|
||||
'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700',
|
||||
{ 'bg-muted dark:bg-zinc-700': mode === 'diff' }
|
||||
)}
|
||||
onClick={() => {
|
||||
handleVersionChange('toggle');
|
||||
}}
|
||||
>
|
||||
<DeltaIcon size={18} />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>View changes</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -468,6 +510,19 @@ export function Canvas({
|
|||
{suggestions ? (
|
||||
<div className="md:hidden h-dvh w-12 shrink-0" />
|
||||
) : null}
|
||||
|
||||
<AnimatePresence>
|
||||
{isCurrentVersion && (
|
||||
<Toolbar
|
||||
isToolbarVisible={isToolbarVisible}
|
||||
setIsToolbarVisible={setIsToolbarVisible}
|
||||
append={append}
|
||||
isLoading={isLoading}
|
||||
stop={stop}
|
||||
setMessages={setMessages}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -482,19 +537,6 @@ export function Canvas({
|
|||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence>
|
||||
{isCurrentVersion && (
|
||||
<Toolbar
|
||||
isToolbarVisible={isToolbarVisible}
|
||||
setIsToolbarVisible={setIsToolbarVisible}
|
||||
append={append}
|
||||
isLoading={isLoading}
|
||||
stop={stop}
|
||||
setMessages={setMessages}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -745,3 +745,20 @@ export const PlusIcon = ({ size = 16 }: { size?: number }) => (
|
|||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CopyIcon = ({ size = 16 }: { size?: number }) => (
|
||||
<svg
|
||||
height={size}
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
style={{ color: 'currentcolor' }}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -346,7 +346,7 @@ export const Toolbar = ({
|
|||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<motion.div
|
||||
className="cursor-pointer fixed right-6 bottom-6 p-1.5 border rounded-full shadow-lg bg-background flex flex-col justify-end"
|
||||
className="cursor-pointer absolute right-6 bottom-6 p-1.5 border rounded-full shadow-lg bg-background flex flex-col justify-end"
|
||||
initial={{ opacity: 0, y: -20, scale: 1 }}
|
||||
animate={
|
||||
isToolbarVisible
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue