rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: overflow bug & improve style

Browse source
This commit is contained in:
swve 2024-01-01 19:16:18 +01:00
parent 19d8db9a20
commit a9d038e5e3
1 changed files with 28 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

40
apps/web/components/AI/AIActivityAsk.tsx
View file

@ -2,7 +2,7 @@ import { useSession } from '@components/Contexts/SessionContext'
import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai'; import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai';
import Avvvatars from 'avvvatars-react'; import Avvvatars from 'avvvatars-react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { FlaskConical, Keyboard, Sparkle, Sparkles, X } from 'lucide-react' import { FlaskConical, Keyboard, MessageCircle, Sparkle, Sparkles, X } from 'lucide-react'
import Image from 'next/image'; import Image from 'next/image';
import { send } from 'process'; import { send } from 'process';
import learnhouseAI_icon from "public/learnhouse_ai_simple.png"; import learnhouseAI_icon from "public/learnhouse_ai_simple.png";
@ -19,8 +19,9 @@ function AIActivityAsk(props: AIActivityAskProps) {
const [isAIModalOpen, setIsAIModalOpen] = React.useState(false); const [isAIModalOpen, setIsAIModalOpen] = React.useState(false);
return ( return (
<div> <div className=''>
<ActivityChatMessageBox isAIModalOpen={isAIModalOpen} setIsAIModalOpen={setIsAIModalOpen} activity={props.activity} /> <ActivityChatMessageBox isAIModalOpen={isAIModalOpen} setIsAIModalOpen={setIsAIModalOpen} activity={props.activity} />
<div <div
onClick={() => setIsAIModalOpen(true)} onClick={() => setIsAIModalOpen(true)}
@ -62,9 +63,13 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
? 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 ' ? 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 '
: 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30'; : 'ring-1 ring-inset ring-white/10 bg-transparent w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30';
React.useEffect(() => { useEffect(() => {
if (props.isAIModalOpen) {
}, [session]); document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
}, [props.isAIModalOpen]);
function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) { function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
@ -117,10 +122,11 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }} animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
transition={{ type: "spring", bounce: 0.35, duration: 1.7, mass: 0.2, velocity: 2 }} transition={{ type: "spring", bounce: 0.35, duration: 1.7, mass: 0.2, velocity: 2 }}
className='fixed top-0 left-0 w-full h-full z-50 flex justify-center items-center ' className='fixed top-0 left-0 w-full h-full z-50 flex justify-center items-center '
style={{ pointerEvents: 'none' }}
> >
<div <div
style={{ style={{
pointerEvents: 'auto',
background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)' background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)'
}} }}
className="bg-black z-50 rounded-2xl max-w-screen-2xl w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md"> className="bg-black z-50 rounded-2xl max-w-screen-2xl w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md">
@ -149,9 +155,9 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
<div ref={messagesEndRef} /> <div ref={messagesEndRef} />
</div> </div>
) : ( ) : (
<AIMessagePlaceHolder /> <AIMessagePlaceHolder sendMessage={sendMessage} activity_uuid={props.activity.activity_uuid} />
)} )}
<div className='flex space-x-2'> <div className='flex space-x-2 items-center'>
<div className=''> <div className=''>
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" /> <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" />
</div> </div>
@ -159,6 +165,9 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
<input onKeyDown={handleKeyDown} onChange={handleChange} disabled={isWaitingForResponse} value={chatInputValue} placeholder='Ask AI About this Lecture' type="text" className={inputClass} name="" id="" /> <input onKeyDown={handleKeyDown} onChange={handleChange} disabled={isWaitingForResponse} value={chatInputValue} placeholder='Ask AI About this Lecture' type="text" className={inputClass} name="" id="" />
</div> </div>
<div className=''>
<MessageCircle size={20} className='text-white/50 hover:cursor-pointer' onClick={() => sendMessage(chatInputValue)} />
</div>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@ -202,16 +211,17 @@ function AIMessage(props: AIMessageProps) {
) )
} }
const AIMessagePlaceHolder = () => { const AIMessagePlaceHolder = (props : {activity_uuid : string, sendMessage : any}) => {
const session = useSession() as any;
return ( return (
<div className='flex-col h-[237px] w-full'> <div className='flex-col h-[237px] w-full'>
<div className='flex flex-col text-center justify-center pt-5'> <div className='flex flex-col text-center justify-center pt-12'>
<Image width={80} className='mx-auto' src={learnhouseAI_logo_black} alt="" /> <Image width={80} className='mx-auto' src={learnhouseAI_logo_black} alt="" />
<p className='pt-3 text-xl text-white/60'>How can we help today ?</p> <p className='pt-3 text-2xl font-semibold text-white/60'>Hello {session.user.username}, How can we help today ?</p>
<div className='questions flex space-x-2 mx-auto pt-3 flex-wrap w-[500px] justify-center'> <div className='questions flex space-x-3 mx-auto pt-14 flex-wrap justify-center'>
<span className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>Explain in simple examples</span> <span onClick={() => props.sendMessage('Explain this Course in Simple examples.')} className='py-1.5 px-6 text-xs font-semibold text-white/30 rounded-full shadow-2xl bg-black/20 mb-3 outline outline-gray-400/5 cursor-pointer'>Explain in simple examples</span>
<span className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>Generate flashcards</span> <span onClick={() => props.sendMessage('Generate flashcards about this course and this lecture.')} className='py-1.5 px-6 text-xs font-semibold text-white/30 rounded-full shadow-2xl bg-black/20 mb-3 outline outline-gray-400/5 cursor-pointer'>Generate flashcards</span>
<span className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>Break down in concepts</span> <span onClick={() => props.sendMessage('Break down this Course in concepts.')} className='py-1.5 px-6 text-xs font-semibold text-white/30 rounded-full shadow-2xl bg-black/20 mb-3 outline outline-gray-400/5 cursor-pointer'>Break down in concepts</span>
</div> </div>
</div> </div>
</div> </div>