Merge pull request #24 from kovarike/website-feature

create chat

next.config.mjs

@@ -37,6 +37,16 @@ const config = {
         destination: "/",
         permanent: true,
       },
+      {
+        source: "/video",
+        destination: "/",
+        permanent: true,
+      },
+      {
+        source: "/chat",
+        destination: "/",
+        permanent: true,
+      },
     ];
   },
 };

src/app/chat/chat.tsx

@@ -0,0 +1,46 @@
+// import { Message } from "./message";
+
+// export default function Chat() {
+//   const messages = [
+//     { id: 1, text: "Hello!", sender: "user" },
+//     { id: 2, text: "Hi there!", sender: "bot" },
+//     { id: 3, text: "How can I help you?", sender: "bot" },
+//     { id: 4, text: "Hello!", sender: "user" },
+//     { id: 5, text: "Hi there!", sender: "bot" },
+//     { id: 6, text: "How can I help you?", sender: "bot" },
+//     { id: 7, text: "Hello!", sender: "user" },
+//     { id: 8, text: "Hi there!", sender: "bot" },
+//     { id: 9, text: "How can I help you?", sender: "bot" },
+//     { id: 10, text: "Hello!", sender: "user" },
+//     { id: 11, text: "Hi there!", sender: "bot" },
+//     { id: 12, text: "How can I help you?", sender: "bot" },
+//     { id: 13, text: "How can I help you?", sender: "bot" },
+//     { id: 14, text: "Hello!", sender: "user" },
+//     { id: 15, text: "Hi there!", sender: "bot" },
+//     { id: 16, text: "Essas configurações devem fornecer uma aparência mais próxima ao WhatsApp para os componentes de chat.", sender: "bot" },
+//   ];
+
+//   return (
+//     <div className="w-full h-full overflow-y-scroll bg-gray-100 p-4 flex flex-col space-y-2">
+//       {messages.map((message) => (
+//         <Message key={message.id} text={message.text} sender={message.sender} />
+//       ))}
+//     </div>
+//   );
+// }
+
+import { Message } from "./message";
+
+interface ChatProps {
+  messages: { id: number; text: string; sender: string }[];
+}
+
+export default function Chat({ messages }: ChatProps) {
+  return (
+    <div className="w-full h-full overflow-y-scroll bg-gray-100 p-4 flex flex-col space-y-2">
+      {messages.map((message) => (
+        <Message key={message.id} text={message.text} sender={message.sender} />
+      ))}
+    </div>
+  );
+}

src/app/chat/chatheader.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { MenuIcon, XCircle } from "lucide-react";
+
+interface HeaderProps {
+  children?: React.ReactNode;
+}
+
+
+export function ChatHeader({ children }: HeaderProps) {
+
+  return (
+    <div className="bg-algorithms-bg-profile py-10 px-6 text-center relative w-full h-12 max-h-12 m-0 rounded-t-3xl">
+      <nav className="hidden md:flex w-[300px] absolute top-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-gray-400 px-6 py-3 rounded-full shadow-lg space-x-6">
+        <button className="hover:text-white"><XCircle/></button>
+
+        <button className="hover:text-white"><MenuIcon/></button>
+      </nav>
+
+    </div>
+  );
+}
+
+
+

src/app/chat/message.tsx

@@ -0,0 +1,17 @@
+interface MessageProps {
+    text: string;
+    sender: "user" | "bot" | string;
+  }
+
+  export function Message({ text, sender }: MessageProps) {
+    return (
+      <div
+        className={`p-2 my-2 rounded-lg max-w-xs ${
+          sender === "user" ? "bg-algorithms-bg-profile text-black self-end" : "bg-gray-300 text-black self-start"
+        }`}
+        style={{ wordBreak: "break-word" }}
+      >
+        {text}
+      </div>
+    );
+  }

src/app/chat/page.tsx

@@ -0,0 +1,79 @@
+// "use client"
+// import { useEffect } from "react";
+// import { ContainerFull } from "@/components/containerfull";
+// import CustomInput from "../video/input";
+// import { Header } from "@/components/header";
+// import { ChatHeader } from "./chatheader";
+// import Chat from "./chat";
+
+// export default function Home() {
+//   useEffect(() => {
+//     const handleContextMenu = (event: MouseEvent) => {
+//       event.preventDefault();
+//     };
+
+//     const handleKeyDown = (event: KeyboardEvent) => {
+//       // Allow basic functionalities like Ctrl+C, Ctrl+V, etc.
+//       const allowedKeys = ["c", "v", "x", "a", "z", "y"];
+//       if ((event.ctrlKey || event.metaKey) && !allowedKeys.includes(event.key.toLowerCase())) {
+//         event.preventDefault();
+//       }
+//     };
+
+//     document.addEventListener("contextmenu", handleContextMenu);
+//     document.addEventListener("keydown", handleKeyDown);
+
+//     return () => {
+//       document.removeEventListener("contextmenu", handleContextMenu);
+//       document.removeEventListener("keydown", handleKeyDown);
+//     };
+//   }, []);
+
+//   return (
+//     <ContainerFull>
+//       <Header />
+//       <div className="relative flex flex-col items-center border-t-2 border-r-2 border-l-2 border-gray-300 bg-white mx-auto text-black p-4 md:mt-10 rounded-3xl max-w-4xl w-[850px] h-[850px] max-h-h-[850px]">
+//         <ChatHeader />
+//         <Chat />
+//         <CustomInput />
+//       </div>
+//     </ContainerFull>
+//   );
+// }
+
+"use client"
+import { useState } from "react";
+import { ContainerFull } from "@/components/containerfull";
+import CustomInput from "../video/input";
+import { Header } from "@/components/header";
+import { ChatHeader } from "./chatheader";
+import Chat from "./chat";
+import {useDisableContextMenu} from "./useDisableContextMenu";
+
+export default function Home() {
+  useDisableContextMenu();
+
+  const [messages, setMessages] = useState([
+    { id: 1, text: "Hello!", sender: "user" },
+    { id: 2, text: "Hi there!", sender: "bot" },
+    { id: 3, text: "How can I help you?", sender: "bot" },
+  ]);
+
+  const handleSendMessage = (message: string) => {
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      { id: prevMessages.length + 1, text: message, sender: "user" },
+    ]);
+  };
+
+  return (
+    <ContainerFull>
+      <Header />
+      <div className="relative flex flex-col items-center border-t-2 border-r-2 border-l-2 border-gray-300 bg-white mx-auto text-black p-4 md:mt-10 rounded-3xl max-w-4xl w-[850px] h-[850px] max-h-h-[850px]">
+        <ChatHeader />
+        <Chat messages={messages} />
+        <CustomInput onSendMessage={handleSendMessage} />
+      </div>
+    </ContainerFull>
+  );
+}

src/app/chat/useDisableContextMenu.ts

@@ -0,0 +1,28 @@
+"use client"
+import { useEffect } from "react";
+
+export function useDisableContextMenu() {
+  useEffect(() => {
+    const handleContextMenu = (event: MouseEvent) => {
+      event.preventDefault();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Allow basic functionalities like Ctrl+C, Ctrl+V, etc.
+      const allowedKeys = ["c", "v", "x", "a", "z", "y"];
+      if ((event.ctrlKey || event.metaKey) && !allowedKeys.includes(event.key.toLowerCase())) {
+        event.preventDefault();
+      }
+    };
+
+    document.addEventListener("contextmenu", handleContextMenu);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("contextmenu", handleContextMenu);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+};
+
+

src/app/layout.tsx

@@ -42,7 +42,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="pt-br">
+    <html lang="pt-br" className="bg-algorithms-bg-profile">
     <head>
       <meta name="robots" content="index, follow" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />

src/app/page.tsx

@@ -2,7 +2,6 @@
 import { ContainerFull } from "@/components/containerfull";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
-import { Loading } from "@/components/loading";
 import { Toaster } from "sonner";
 import { Avatar } from "@/components/avatar";
 
@@ -21,7 +20,7 @@ const languages = [
 
 const LanguageCards = () => {
   return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 w-full">
       {languages.map((lang) => (
         <div
           key={lang.name}
@@ -40,8 +39,8 @@ export default function Home() {
     <>
       <ContainerFull>
         <Header />
-        <main className="min-h-screen bg-algorithms-bg-profile flex flex-col items-center px-4 md:px-0">
-          <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-4 bg-black text-white p-4 mt-10 rounded-3xl max-w-4xl w-full">
+        <main className="min-h-screen bg-algorithms-bg-profile flex flex-col items-center px-4 md:px-0 w-full">
+          <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-4 bg-black text-white p-4 md:mt-10 rounded-3xl max-w-4xl w-full">
             <div className="mt-6 flex flex-col p-3 items-center justify-center rounded-md bg-algorithms-bg-profile space-y-2">
               <Avatar alt="Danilo" border size="Xlarge" src="https://avatars.githubusercontent.com/u/149837519?v=4" />
               <div className="flex flex-col md:flex-row items-center justify-center gap-4 bg-transparent text-white p-3">

src/app/video/input.tsx

@@ -1,50 +1,69 @@
+"use client"
+import { ArchiveIcon } from 'lucide-react';
+import React, { useState, useRef, useEffect } from 'react';
+import { FaPaperPlane } from 'react-icons/fa'; // Para os ícones
 
-import React, { useState } from 'react';
-import { FaPaperPlane, FaSmile, FaMicrophone } from 'react-icons/fa'; // Para os ícones
+interface CustomInputProps {
+  onSendMessage: (message: string) => void;
+}
 
-const CustomInput: React.FC = () => {
+const CustomInput: React.FC<CustomInputProps> = ({ onSendMessage }) => {
   const [message, setMessage] = useState<string>('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const handleSendMessage = () => {
     if (message.trim()) {
-      // Lógica para enviar a mensagem
-      console.log('Mensagem enviada:', message);
+      onSendMessage(message);
       setMessage('');
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto'; // Reset the height
+      }
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [message]);
+
   return (
-    <div className="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4 flex items-center justify-between border-t-2 border-gray-300">
+    <div className="bottom-0 left-0 right-0 bg-algorithms-bg-profile shadow-lg p-4 flex items-center justify-between border-t-2 border-gray-300 rounded-b-3xl w-full h-20 max-h-20 mx-auto my-0">
       <div className="flex items-center space-x-4 w-full">
         {/* Ícone de Emoji */}
         <button className="text-gray-600 hover:text-gray-900">
-          <FaSmile size={22} />
+          <ArchiveIcon size={22} />
         </button>
 
-        {/* Input de Texto */}
-        <input
-          type="text"
+        {/* Textarea de Texto */}
+        <textarea
+          ref={textareaRef}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
           placeholder="Digite uma mensagem..."
-          className="w-full p-2 bg-gray-100 rounded-full border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          className="w-full py-4 px-5 bg-white rounded-3xl border-2 border-gray-300/85 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-300 resize-none overflow-hidden"
+          rows={1}
+          style={{ maxHeight: '80px' }}
         />
-
-        {/* Ícone de Microfone (poderia ser usado para gravação de áudio) */}
-        <button className="text-gray-600 hover:text-gray-900">
-          <FaMicrophone size={22} />
-        </button>
       </div>
 
-      {/* Botão de Enviar */}
       <button
         onClick={handleSendMessage}
-        className="ml-2 p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="ml-2 p-3 flex items-center justify-center rounded-full bg-transparent text-black border-2 hover:bg-gray-300/85 focus:outline-none focus:ring-2 border-gray-300/85 focus:border-gray-300 focus:ring-algorithms-bg-profile"
       >
         <FaPaperPlane size={22} />
       </button>
     </div>
   );
 };
 
-export default CustomInput;
+export default CustomInput;

src/components/header.tsx

@@ -1,3 +1,4 @@
+"use client"
 interface HeaderProps {
   children?: React.ReactNode;
 }
@@ -33,5 +34,4 @@ export function Header({ children }: HeaderProps) {
 }
 
 
-<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/c/c-original.svg" />