diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 59ccb49..1881a50 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,7 +1,9 @@ +import MainChat from "@/components/main-chat/main-chat"; export default function Home() { return (
+
) } diff --git a/frontend/src/components/chat-list/chat-list.module.css b/frontend/src/components/chat-list/chat-list.module.css new file mode 100644 index 0000000..8902d8c --- /dev/null +++ b/frontend/src/components/chat-list/chat-list.module.css @@ -0,0 +1,47 @@ +.chatList { + display: flex; + flex-direction: column; + gap: 10px; + padding: 16px; +} + +.messageContainer { + display: flex; + align-items: flex-start; +} + +.botContainer { + justify-content: flex-start; +} + +.userContainer { + justify-content: flex-end; +} + +.avatar { + margin-right: 8px; +} + +.card { + max-width: 80%; + padding: 3px; + border-radius: 16px; + font-size: 0.875rem; + line-height: 1.25rem; + word-wrap: break-word; +} + +.cardBody { + padding: 4px 8px; +} + +.bot { + background-color: #f1f5f9; + align-self: flex-start; +} + +.user { + background-color: #e6f1fe; + color: #006FEE; + align-self: flex-end; +} diff --git a/frontend/src/components/chat-list/chat-list.tsx b/frontend/src/components/chat-list/chat-list.tsx new file mode 100644 index 0000000..2b01d32 --- /dev/null +++ b/frontend/src/components/chat-list/chat-list.tsx @@ -0,0 +1,35 @@ +import { Avatar, Card, CardBody } from "@nextui-org/react"; +import classes from "./chat-list.module.css" +import { Message } from "../main-chat/main-chat"; + +interface ChatListProps { + messages: Message[]; +} + +export default function ChatList({ messages }: ChatListProps) { + return ( +
+ {messages.map((msg, index) => ( +
+ {msg.type === "bot" && ( + + )} + + +

{msg.text}

+ + +
+ ))} +
+ ); +} diff --git a/frontend/src/components/main-chat/main-chat.tsx b/frontend/src/components/main-chat/main-chat.tsx new file mode 100644 index 0000000..e69e1d7 --- /dev/null +++ b/frontend/src/components/main-chat/main-chat.tsx @@ -0,0 +1,60 @@ +'use client'; + +import { useState } from "react"; +import ChatList from "@/components/chat-list/chat-list"; +import SearchBar from "@/components/search-bar/search-bar"; +import { Spacer } from "@nextui-org/react"; + +export type Message = { + type: "user" | "bot", + text: string +} + +export default function MainChat() { + const [messages, setMessages] = useState([ + { type: "bot", text: "Hello! How can I help you today?" } + ]); + const [userInput, setUserInput] = useState(""); + const [botResponse, setBotResponse] = useState(""); + const [isBotResponseGenerating, setIsBotResponseGenerating] = useState(false); + + const handleUserInput = (input: string) => { + setMessages((prevMessages) => [ + ...prevMessages, + { type: "user", text: input } + ]); + setUserInput(""); + }; + + const handleBotResponse = (response: string) => { + setMessages((prevMessages) => [ + ...prevMessages, + { type: "bot", text: response } + ]); + setBotResponse(""); + }; + + //TODO: Change bot response simulation to backend API + const simulateBotResponse = (userMessage: string) => { + setIsBotResponseGenerating(true); + setTimeout(() => { + const botReply = `Bot response to: ${userMessage}`; + handleBotResponse(botReply); + setIsBotResponseGenerating(false); + }, 1000); + }; + + return ( + <> + + + + + ) +} diff --git a/frontend/src/components/main-layout/main-layout.module.css b/frontend/src/components/main-layout/main-layout.module.css index 838417b..4bbffa9 100644 --- a/frontend/src/components/main-layout/main-layout.module.css +++ b/frontend/src/components/main-layout/main-layout.module.css @@ -1,6 +1,6 @@ .contentWrapper { padding: 2em 5em; margin: 0 auto; - max-width: 1200px; + max-width: 800px; box-sizing: border-box; } diff --git a/frontend/src/components/search-bar/search-bar.module.css b/frontend/src/components/search-bar/search-bar.module.css new file mode 100644 index 0000000..61dfbc4 --- /dev/null +++ b/frontend/src/components/search-bar/search-bar.module.css @@ -0,0 +1,8 @@ +.searchBar textarea::placeholder{ + font-style: italic; + color: rgba(0, 0, 0, 0.2); +} + +.endContent { + margin-top: auto +} diff --git a/frontend/src/components/search-bar/search-bar.tsx b/frontend/src/components/search-bar/search-bar.tsx new file mode 100644 index 0000000..1715478 --- /dev/null +++ b/frontend/src/components/search-bar/search-bar.tsx @@ -0,0 +1,45 @@ +import { Button, Spinner, Textarea } from "@nextui-org/react"; +import { SearchIcon } from './search-icon'; +import classes from './search-bar.module.css'; + +interface SearchBarProps { + userInput: string; + setUserInput: React.Dispatch>; + handleUserInput: (message: string) => void; + simulateBotResponse: (userMessage: string) => void; + isBotResponseGenerating: boolean +} + +export default function SearchBar({ userInput, setUserInput, handleUserInput, simulateBotResponse, isBotResponseGenerating }: SearchBarProps) { + + const handleSend = () => { + if (userInput.trim()) { + handleUserInput(userInput); + simulateBotResponse(userInput); + } + }; + + return ( + <> +