Skip to content

Commit

Permalink
📱 chat bot responsiveness updated 💄
Browse files Browse the repository at this point in the history
  • Loading branch information
@sinanptm
sinanptm committed Oct 7, 2024
1 parent b7835ba commit 978d248
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 62 deletions.
6 changes: 3 additions & 3 deletions client/components/page-components/chatbot/ChatBotButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Chatbot = () => {
return null;
}
return (
<div className="fixed bottom-4 right-4 z-50">
<div className="fixed sm:bottom-4 bottom-10 right-6 sm sm:right-4 z-50">
<AnimatePresence>
{!isOpen && (
<motion.div
Expand All @@ -39,15 +39,15 @@ const Chatbot = () => {
<ButtonV2
onClick={() => setIsOpen(true)}
variant={"ringHover"}
className="rounded-full w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-green-600 shadow-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
className="rounded-full w-16 h-16 md:w-20 md:h-20 bg-green-600 shadow-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
aria-label="Open chat"
>
<Image
src={'/assets/icons/utils/robot.svg'}
width={23}
height={23}
alt='Robot'
className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 fill-white"
className="h-6 w-6 md:h-8 md:w-8 fill-white"
/>
</ButtonV2>
</motion.div>
Expand Down
21 changes: 10 additions & 11 deletions client/components/page-components/chatbot/ChatBotCardHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,31 @@ import { ButtonV2 } from "@/components/button/ButtonV2"
import { CardHeader } from "@/components/ui/card"
import Image from "next/image"


const ChatBotCardHeader = ({ handleClose }: { handleClose: () => void }) => {
return (
<CardHeader className="flex flex-row items-center justify-between space-y-0 py-4 px-6 bg-green-900 text-white">
<div className="flex items-center space-x-3">
<CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 sm:py-4 px-4 sm:px-6 bg-green-900 text-white">
<div className="flex items-center space-x-2 sm:space-x-3">
<Image
src={'/assets/icons/utils/robot.svg'}
width={23}
height={23}
width={20}
height={20}
alt='Robot'
className="h-7 w-6 text-white"
className="h-5 w-5 sm:h-6 sm:w-6 text-white"
/>
<h2 className="text-xl font-semibold">Ayurvedic Assistant</h2>
<h2 className="text-lg sm:text-xl font-semibold">Ayurvedic Assistant</h2>
</div>
<ButtonV2
onClick={handleClose}
variant="ghost"
size="icon"
className="h-10 w-10 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
className="h-8 w-8 sm:h-10 sm:w-10 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
aria-label="Close chat"
>
<Image
src={'/assets/icons/x.svg'}
className="h-5 w-5"
width={23}
height={23}
className="h-4 w-4 sm:h-5 sm:w-5"
width={20}
height={20}
alt="Close"
/>
</ButtonV2>
Expand Down
10 changes: 5 additions & 5 deletions client/components/page-components/chatbot/ChatBotController.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,20 @@ type ChatBotControllerProps = {

const ChatBotController = ({ inputMessage, setInputMessage, sendMessage, isSending }: ChatBotControllerProps) => {
return (
<CardFooter className="pt-3 bg-dark-300">
<CardFooter className="pt-2 sm:pt-3 bg-dark-300">
<form
onSubmit={(e) => {
e.preventDefault();
if (!isSending) sendMessage();
}}
className="flex w-full items-center space-x-3"
className="flex w-full items-center space-x-2 sm:space-x-3"
>
<Input
type="text"
placeholder="Type your message..."
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
className="flex-grow bg-dark-100 text-white placeholder-gray-400 border-gray-600 focus:border-green-500 focus:ring-green-500 text-sm py-3 rounded-full"
className="flex-grow bg-dark-100 text-white placeholder-gray-400 border-gray-600 focus:border-green-500 focus:ring-green-500 text-xs sm:text-sm py-2 sm:py-3 rounded-full"
aria-label="Type your message"
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
Expand All @@ -38,11 +38,11 @@ const ChatBotController = ({ inputMessage, setInputMessage, sendMessage, isSendi
type="submit"
variant={"ringHover"}
size="icon"
className="rounded-full bg-green-600 hover:bg-green-700 transition-colors duration-200"
className="rounded-full bg-green-600 hover:bg-green-700 transition-colors duration-200 h-8 w-8 sm:h-10 sm:w-10"
aria-label="Send message"
disabled={isSending || inputMessage.trim() === ''}
>
<Send className={`h-5 w-5 ${isSending ? 'animate-pulse' : ''}`} />
<Send className={`h-4 w-4 sm:h-5 sm:w-5 ${isSending ? 'animate-pulse' : ''}`} />
</ButtonV2>
</form>
</CardFooter>
Expand Down
5 changes: 2 additions & 3 deletions client/components/page-components/chatbot/ChatSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,14 @@ const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }}
transition={{ type: "spring", stiffness: 260, damping: 20, bounce: 0.50 }}
className="fixed inset-2 sm:inset-auto sm:right-6 sm:bottom-6 sm:w-[400px] md:w-[450px] lg:w-[500px] max-h-[calc(100vh-2rem)] z-50"
className="fixed inset-x-0 bottom-0 sm:inset-auto sm:right-6 sm:bottom-6 sm:w-[400px] md:w-[450px] lg:w-[500px] h-[80vh] sm:h-[600px] max-h-[800px] z-50"
>
{isAuthenticated ? (
<Card className="h-full sm:h-[600px] max-h-[800px] flex flex-col shadow-2xl border-primary/10 bg-dark-200 rounded-2xl overflow-hidden">
<Card className="h-full flex flex-col shadow-2xl border-primary/10 bg-dark-200 rounded-t-2xl sm:rounded-2xl overflow-hidden">
<MessageDisplay
isLoading={isLoading}
messages={messages}
handleClose={handleClose}
isMessagePending={isPending}
isTyping={isTyping}
/>
<ChatBotController
Expand Down
29 changes: 14 additions & 15 deletions client/components/page-components/chatbot/MessageDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ type Props = {
handleClose: () => void;
messages: IChatBotMessage[];
isLoading: boolean;
isMessagePending: boolean;
isTyping: boolean;
}

const MessageDisplay = ({ handleClose, messages, isLoading, isMessagePending, isTyping }: Props) => {
const MessageDisplay = ({ handleClose, messages, isLoading, isTyping }: Props) => {
const scrollAreaRef = useRef<HTMLDivElement>(null);
const bottomRef = useRef<HTMLDivElement>(null);
const [expandedMessages, setExpandedMessages] = useState<Set<string>>(new Set());
Expand Down Expand Up @@ -52,26 +51,26 @@ const MessageDisplay = ({ handleClose, messages, isLoading, isMessagePending, is
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className={`flex mb-6 ${!msg.isBotMessage ? 'justify-end' : 'justify-start'}`}
className={`flex mb-2 sm:mb-4 ${!msg.isBotMessage ? 'justify-end' : 'justify-start'}`}
>
<div className={`flex items-end space-x-3 ${!msg.isBotMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${!msg.isBotMessage ? 'bg-green-600' : 'bg-gray-600'}`}>
<div className={`flex items-end space-x-2 sm:space-x-3 ${!msg.isBotMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
<div className={`w-6 h-6 sm:w-8 sm:h-8 flex rounded-full items-center justify-center ${!msg.isBotMessage ? 'bg-green-600' : 'bg-gray-600'}`}>
<Image
src={!msg.isBotMessage ? '/assets/icons/circle-user.svg' : '/assets/icons/utils/robot.svg'}
width={23}
height={23}
width={16}
height={16}
alt={!msg.isBotMessage ? 'User' : 'Robot'}
className="h-5 w-5 text-white"
className="h-3 w-3 sm:h-4 sm:w-4"
/>
</div>
<div className={`max-w-[75%] p-4 rounded-2xl shadow-md ${msg.isBotMessage ? 'bg-green-600 text-white' : 'bg-gray-700 text-white'}`}>
<ReactMarkdown className="text-sm">
<div className={`max-w-[80%] text-xs sm:text-sm p-2 sm:p-3 rounded-xl sm:rounded-2xl shadow-md ${msg.isBotMessage ? 'bg-green-600' : 'bg-gray-700'}`}>
<ReactMarkdown className="text-xs sm:text-sm">
{isLongMessage && !isExpanded ? `${messageContent.slice(0, 150)}...` : messageContent}
</ReactMarkdown>
{isLongMessage && (
<button
onClick={() => toggleMessageExpansion(messageId)}
className="text-xs mt-2 text-blue-300 hover:text-blue-100 transition-colors"
className="text-xs mt-1 sm:mt-2 text-blue-300 hover:text-blue-100 transition-colors"
>
{isExpanded ? 'Read less' : 'Read more'}
</button>
Expand All @@ -86,10 +85,10 @@ const MessageDisplay = ({ handleClose, messages, isLoading, isMessagePending, is
<>
<CardContent className="flex-grow p-0">
<ChatBotCardHeader handleClose={handleClose} />
<ScrollArea className="h-[calc(100vh-16rem)] sm:h-[460px] w-full p-6" ref={scrollAreaRef}>
<ScrollArea className="flex-grow h-[calc(80vh-8rem)] sm:h-[460px] w-full p-3 sm:p-4" ref={scrollAreaRef}>
{isLoading ? (
<div className="flex justify-center items-center h-full">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-green-500"></div>
<div className="animate-spin rounded-full h-6 w-6 sm:h-8 sm:w-8 border-t-2 border-b-2 border-green-500"></div>
</div>
) : (
<>
Expand All @@ -101,9 +100,9 @@ const MessageDisplay = ({ handleClose, messages, isLoading, isMessagePending, is
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
className="flex justify-end mb-6"
className="flex justify-end mb-4"
>
<div className="bg-gray-700 p-3 rounded-full">
<div className="bg-gray-700 p-2 sm:p-3 rounded-full">
<div className="typing-indicator">
<span></span>
<span></span>
Expand Down
52 changes: 27 additions & 25 deletions client/components/page-components/chatbot/NotAuthenticated.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ButtonV2 } from "@/components/button/ButtonV2"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { LogIn, X } from "lucide-react"
import { LogIn } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

Expand All @@ -10,33 +10,35 @@ interface NotAuthenticatedProps {

const NotAuthenticated: React.FC<NotAuthenticatedProps> = ({ onClose }) => {
return (
<Card className="h-full sm:h-[600px] max-h-[800px] justify-center flex flex-col shadow-2xl border-primary/10 bg-dark-200 rounded-2xl overflow-hidden relative">
<ButtonV2
onClick={onClose}
variant="ghost"
size="icon"
className="absolute top-4 right-4 h-10 w-10 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
aria-label="Close"
>
<Image
src='/assets/icons/x.svg'
width={20}
height={20}
alt="Close"
className="h-5 w-5"
/>
</ButtonV2>
<CardHeader className="text-center">
<CardTitle className="text-2xl font-bold">😑 Authentication Required</CardTitle>
<CardDescription>Please log in to access your messages</CardDescription>
<Card className="h-[80vh] sm:h-[600px] flex flex-col justify-between shadow-2xl border-primary/10 bg-dark-200 rounded-t-2xl sm:rounded-2xl overflow-hidden">
<CardHeader className="relative pt-8 pb-4 px-4 sm:px-6 text-center">
<ButtonV2
onClick={onClose}
variant="ghost"
size="icon"
className="absolute top-2 right-2 h-8 w-8 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
aria-label="Close"
>
<Image
src='/assets/icons/x.svg'
width={16}
height={16}
alt="Close"
className="h-4 w-4"
/>
</ButtonV2>
<CardTitle className="text-lg sm:text-xl font-bold mb-2">Authentication Required</CardTitle>
<CardDescription className="text-xs sm:text-sm">Please log in to access your messages</CardDescription>
</CardHeader>
<CardContent className="flex justify-center">
<LogIn className="h-24 w-24 text-primary" />
<CardContent className="flex-grow flex items-center justify-center p-4">
<div className="bg-green-600/20 rounded-full p-4 sm:p-6">
<LogIn className="h-12 w-12 sm:h-16 sm:w-16 text-green-500" />
</div>
</CardContent>
<CardFooter className="flex justify-center">
<ButtonV2 asChild variant="expandIcon" Icon={LogIn} iconPlacement="right">
<CardFooter className="flex justify-center p-4">
<ButtonV2 asChild variant="expandIcon" Icon={LogIn} iconPlacement="right" className="w-full sm:w-auto text-sm">
<Link href="/signin">
Sign in
Sign in to Continue
</Link>
</ButtonV2>
</CardFooter>
Expand Down

1 comment on commit 978d248

@vercel
Copy link

@vercel vercel bot commented on 978d248 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

avm-care – ./

avm-care.vercel.app
avm-care-git-main-sinans-projects-8d312afe.vercel.app
avm-care-sinans-projects-8d312afe.vercel.app

Please sign in to comment.