Spaces:
Sleeping
Sleeping
File size: 3,780 Bytes
5ca6cf1 8172156 5ca6cf1 8172156 5ca6cf1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import { useEffect, useRef } from "react";
import { motion } from "motion/react";
import { Bot } from "lucide-react";
import type { Message } from "./types";
import MessageBubble from "./MessageBubble";
import maintivalogo from "@/assets/maintiva-logo.jpg";
const WELCOME_FEATURES = [
{ emoji: "📊", title: "Data Analysis", desc: "Get actionable insights and root cause" },
{ emoji: "🧠", title: "Knowledge Based", desc: "Handbook, SOP, Documents, or Databases" },
{ emoji: "🎤", title: "Voice Mode", desc: "Ask questions using your voice" },
{ emoji: "💬", title: "Natural language", desc: "Natural interaction" },
];
interface ChatWindowProps {
messages: Message[];
isLoading: boolean;
streamingMsgId: string | null;
userName?: string;
}
export default function ChatWindow({ messages, isLoading, streamingMsgId, userName }: ChatWindowProps) {
const firstName = userName?.split(" ")[0] ?? "";
const bottomRef = useRef<HTMLDivElement>(null);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages, isLoading]);
if (messages.length === 0 && !isLoading) {
return (
<div className="flex-1 overflow-y-auto flex flex-col items-center justify-center gap-6 px-4 sm:px-6 xl:px-8 pb-4">
<motion.div
className="flex flex-col items-center gap-4 xl:gap-6 w-full max-w-sm sm:max-w-md xl:max-w-2xl"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
<div className="w-20 h-20 xl:w-28 xl:h-28 rounded-3xl bg-gradient-to-br from-brand-green-light to-brand-green shadow-xl shadow-brand-green/25 flex items-center justify-center">
<Bot className="h-10 w-10 xl:h-14 xl:w-14 text-white" />
</div>
<div className="text-center">
<h2 className="text-2xl xl:text-4xl font-bold text-neutral-900">
{firstName ? `Hi, ${firstName}! 👋` : "Hello! 👋"}
</h2>
<p className="mt-2 text-neutral-500 text-sm xl:text-base leading-relaxed">
Welcome to{" "}
<span className="inline-flex items-center gap-1 font-bold text-neutral-800 align-middle">
<img src={maintivalogo} alt="Maintiva" className="h-4 w-4 xl:h-5 xl:w-5 rounded-sm object-contain" />
Maintiva Agent
</span>{" "}
Turn your data into fast, intelligent decisions. Instantly uncover root causes, spot hidden patterns, and resolve issues before they escalate.
</p>
</div>
<div className="grid grid-cols-2 xl:grid-cols-4 gap-3 xl:gap-4 w-full mt-2">
{WELCOME_FEATURES.map((f) => (
<div
key={f.title}
className="flex flex-col gap-1 xl:gap-2 p-3 xl:p-4 rounded-xl bg-white border border-neutral-100 shadow-sm text-left"
>
<span className="text-xl xl:text-3xl">{f.emoji}</span>
<span className="text-sm xl:text-base font-semibold text-neutral-800">{f.title}</span>
<span className="text-xs xl:text-sm text-neutral-400">{f.desc}</span>
</div>
))}
</div>
</motion.div>
</div>
);
}
return (
<div className="flex-1 overflow-y-auto py-4 space-y-1">
{/* Constrain message width on large/seminar screens */}
<div className="w-full max-w-4xl xl:max-w-5xl mx-auto">
{messages.map((message) => (
<MessageBubble
key={message.id}
message={message}
isStreamingPlaceholder={streamingMsgId === message.id}
/>
))}
<div ref={bottomRef} />
</div>
</div>
);
}
|