Add src/app/chatbot/page.tsx

2026-06-11 16:23:44 +00:00
parent 25a89db5ca
commit 1312ce2409
1 changed files with 132 additions and 0 deletions
--- a/src/app/chatbot/page.tsx
+++ b/src/app/chatbot/page.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React, { useState, useRef, useEffect } from "react";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+interface Message {
+  id: number;
+  text: string;
+  sender: "user" | "bot";
+}
+
+const ChatbotPage = () => {
+  const [messages, setMessages] = useState<Message[]>([
+    { id: 1, text: "Hi there! How can I help you today?", sender: "bot" },
+  ]);
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim() === "") return;
+
+    const newUserMessage: Message = {
+      id: messages.length + 1,
+      text: input,
+      sender: "user"};
+    setMessages((prevMessages) => [...prevMessages, newUserMessage]);
+    setInput("");
+
+    // Simulate bot response
+    setTimeout(() => {
+      const botResponse: Message = {
+        id: messages.length + 2,
+        text: `You said: "${input}". I'm just a simple chatbot for now, but I'm learning!`, // Basic logic
+        sender: "bot"};
+      setMessages((prevMessages) => [...prevMessages, botResponse]);
+    }, 1000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="large"
+      background="noiseDiagonalGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "About",                id: "/"},
+              {
+                name: "Menu",                id: "/"},
+              {
+                name: "Specials",                id: "/"},
+              {
+                name: "Testimonials",                id: "/"},
+              {
+                name: "FAQs",                id: "/"},
+              {
+                name: "Contact",                id: "/"},
+              {
+                name: "Chatbot",                id: "/chatbot"}
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/17th-years-anniversary-3d-celebration-design_460848-10584.jpg"
+            logoAlt="Café in der 12 Logo"
+            brandName="Café in der 12"
+          />
+        </div>
+
+        <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-background relative z-10">
+          <h1 className="text-4xl font-bold mb-8 text-foreground">Chatbot Demo</h1>
+          <div className="w-full max-w-lg bg-card rounded-lg shadow-lg flex flex-col h-[70vh]">
+            <div className="flex-1 p-4 overflow-y-auto custom-scrollbar">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`flex mb-4 ${message.sender === "user" ? "justify-end" : "justify-start"}`}
+                >
+                  <div
+                    className={`max-w-[70%] p-3 rounded-lg ${message.sender === "user"
+                      ? "bg-primary-cta text-white" : "bg-accent text-foreground"}
+                    `}
+                  >
+                    {message.text}
+                  </div>
+                </div>
+              ))}
+              <div ref={messagesEndRef} />
+            </div>
+            <form onSubmit={handleSendMessage} className="border-t border-gray-700 p-4 flex">
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Type your message..."
+                className="flex-1 bg-background-accent text-foreground border border-gray-600 rounded-l-lg p-3 outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+              <button
+                type="submit"
+                className="bg-primary-cta text-white px-6 py-3 rounded-r-lg hover:opacity-90 transition-opacity"
+              >
+                Send
+              </button>
+            </form>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+};
+
+export default ChatbotPage;