Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e9191607ad | |||
| 030b1e5c3f |
@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { MessageSquare, Send, Bot, User } from "lucide-react";
|
||||
import { Bot, User, Send } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ChatPage() {
|
||||
@@ -33,25 +33,26 @@ export default function ChatPage() {
|
||||
|
||||
<main className="min-h-screen pt-32 pb-20 flex flex-col items-center px-4 md:px-8">
|
||||
<div className="max-w-4xl w-full flex flex-col gap-6">
|
||||
<div className="bg-card/30 backdrop-blur-2xl border border-white/10 rounded-3xl p-8 shadow-2xl flex-grow overflow-y-auto min-h-[500px] flex flex-col gap-4">
|
||||
<div className="relative overflow-hidden bg-white/5 backdrop-blur-3xl border border-white/20 rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.12)] flex-grow min-h-[500px] flex flex-col gap-6">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none" />
|
||||
{messages.map((msg, i) => (
|
||||
<div key={i} className={`flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
|
||||
{msg.role === 'bot' ? <Bot size={20} /> : <User size={20} />}
|
||||
<div key={i} className={`relative flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center shrink-0">
|
||||
{msg.role === 'bot' ? <Bot size={20} className="text-white" /> : <User size={20} className="text-white" />}
|
||||
</div>
|
||||
<div className={`p-4 rounded-2xl ${msg.role === 'user' ? 'bg-primary-cta text-white' : 'bg-white/5 text-foreground'}`}>
|
||||
<div className={`p-4 px-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-lg ${msg.role === 'user' ? 'bg-primary-cta text-white' : 'bg-black/20 text-white'}`}>
|
||||
{msg.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-card/30 backdrop-blur-2xl border border-white/10 rounded-full p-2 flex items-center gap-2">
|
||||
<div className="bg-white/5 backdrop-blur-3xl border border-white/20 rounded-full p-2 flex items-center gap-2 shadow-xl">
|
||||
<input
|
||||
className="flex-grow bg-transparent px-6 py-3 outline-none text-foreground placeholder:text-foreground/50"
|
||||
className="flex-grow bg-transparent px-6 py-4 outline-none text-white placeholder:text-white/40"
|
||||
placeholder="Type your message..."
|
||||
/>
|
||||
<button className="p-4 rounded-full bg-primary-cta text-white">
|
||||
<button className="p-4 rounded-full bg-primary-cta text-white hover:opacity-90 transition-opacity">
|
||||
<Send size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user