mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: overflow bug & improve style
This commit is contained in:
swve
parent
19d8db9a20
commit
a9d038e5e3
1 changed files with 28 additions and 18 deletions
|
|
@ -2,7 +2,7 @@ import { useSession } from '@components/Contexts/SessionContext'
|
|||
import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai';
|
||||
import Avvvatars from 'avvvatars-react';
|
||||
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 { send } from 'process';
|
||||
import learnhouseAI_icon from "public/learnhouse_ai_simple.png";
|
||||
|
|
@ -19,8 +19,9 @@ function AIActivityAsk(props: AIActivityAskProps) {
|
|||
const [isAIModalOpen, setIsAIModalOpen] = React.useState(false);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className=''>
|
||||
<ActivityChatMessageBox isAIModalOpen={isAIModalOpen} setIsAIModalOpen={setIsAIModalOpen} activity={props.activity} />
|
||||
<div
|
||||
onClick={() => setIsAIModalOpen(true)}
|
||||
|
|
@ -59,12 +60,16 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
|
|||
|
||||
// TODO : come up with a better way to handle this
|
||||
const inputClass = isWaitingForResponse
|
||||
? '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';
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
}, [session]);
|
||||
useEffect(() => {
|
||||
if (props.isAIModalOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
}, [props.isAIModalOpen]);
|
||||
|
||||
function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
|
||||
if (event.key === 'Enter') {
|
||||
|
|
@ -116,11 +121,12 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
|
|||
initial={{ y: 20, opacity: 0.3, filter: 'blur(5px)' }}
|
||||
animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
|
||||
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
|
||||
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%)'
|
||||
}}
|
||||
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>
|
||||
) : (
|
||||
<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=''>
|
||||
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={session.user.user_uuid} style="shape" />
|
||||
</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="" />
|
||||
|
||||
</div>
|
||||
<div className=''>
|
||||
<MessageCircle size={20} className='text-white/50 hover:cursor-pointer' onClick={() => sendMessage(chatInputValue)} />
|
||||
</div>
|
||||
</div>
|
||||
</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 (
|
||||
<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="" />
|
||||
<p className='pt-3 text-xl text-white/60'>How can we help today ?</p>
|
||||
<div className='questions flex space-x-2 mx-auto pt-3 flex-wrap w-[500px] 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 className='py-1.5 px-6 text-sm font-semibold text-white/50 rounded-full bg-black/20 mb-3'>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>
|
||||
<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-3 mx-auto pt-14 flex-wrap justify-center'>
|
||||
<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 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 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue