dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clean up editor code and reorganize contents (#478)

Browse source
This commit is contained in:
Jeremy 2024-11-01 15:31:54 +05:30 • committed by GitHub
parent b3aa3cb18a
commit 5190b109c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 475 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

83
components/custom/suggestion.tsx
View file

@ -1,12 +1,12 @@
'use client';
import { motion } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';
import { useWindowSize } from 'usehooks-ts';
import { UISuggestion } from '@/lib/editor/suggestions';
import { CrossIcon, MessageIcon } from './icons';
import useWindowSize from './use-window-size';
import { Button } from '../ui/button';
export const Suggestion = ({
@ -19,43 +19,52 @@ export const Suggestion = ({
const [isExpanded, setIsExpanded] = useState(false);
const { width: windowWidth } = useWindowSize();
return !isExpanded ? (
<div
className="absolute cursor-pointer text-muted-foreground -right-8 p-1"
onClick={() => {
setIsExpanded(true);
}}
>
<MessageIcon size={windowWidth && windowWidth < 768 ? 16 : 14} />
</div>
) : (
<motion.div
className="absolute bg-background p-3 flex flex-col gap-3 rounded-2xl border text-sm w-56 shadow-xl z-50 -right-12 md:-right-20"
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
whileHover={{ scale: 1.05 }}
>
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center gap-2">
<div className="size-4 bg-muted-foreground/25 rounded-full" />
<div className="font-medium">Assistant</div>
</div>
<div
className="text-xs text-gray-500 cursor-pointer"
return (
<AnimatePresence>
{!isExpanded ? (
<motion.div
className="absolute cursor-pointer text-muted-foreground -right-8 p-1"
onClick={() => {
setIsExpanded(false);
setIsExpanded(true);
}}
whileHover={{ scale: 1.1 }}
>
<CrossIcon size={12} />
</div>
</div>
<div>{suggestion.description}</div>
<Button
variant="outline"
className="w-fit py-1.5 px-3 rounded-full"
onClick={onApply}
>
Apply
</Button>
</motion.div>
<MessageIcon size={windowWidth && windowWidth < 768 ? 16 : 14} />
</motion.div>
) : (
<motion.div
key={suggestion.id}
className="absolute bg-background p-3 flex flex-col gap-3 rounded-2xl border text-sm w-56 shadow-xl z-50 -right-12 md:-right-16"
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: -20 }}
exit={{ opacity: 0, y: -10 }}
whileHover={{ scale: 1.05 }}
>
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center gap-2">
<div className="size-4 bg-muted-foreground/25 rounded-full" />
<div className="font-medium">Assistant</div>
</div>
<div
className="text-xs text-gray-500 cursor-pointer"
onClick={() => {
setIsExpanded(false);
}}
>
<CrossIcon size={12} />
</div>
</div>
<div>{suggestion.description}</div>
<Button
variant="outline"
className="w-fit py-1.5 px-3 rounded-full"
onClick={onApply}
>
Apply
</Button>
</motion.div>
)}
</AnimatePresence>
);
};