From 665e913387e07d37dd23b04c4804ab7ea1c9ef4a Mon Sep 17 00:00:00 2001
From: chunxtan <chunxiaotan99@gmail.com>
Date: Sat, 9 Nov 2024 12:27:51 +0800
Subject: [PATCH 1/3] add chat search bar

---
 frontend/src/app/page.tsx                     |  2 ++
 .../main-layout/main-layout.module.css        |  2 +-
 .../search-bar/search-bar.module.css          |  3 +++
 .../src/components/search-bar/search-bar.tsx  | 25 +++++++++++++++++
 .../src/components/search-bar/search-icon.jsx | 27 +++++++++++++++++++
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/search-bar/search-bar.module.css
 create mode 100644 frontend/src/components/search-bar/search-bar.tsx
 create mode 100644 frontend/src/components/search-bar/search-icon.jsx

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 59ccb49..a14956c 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,7 +1,9 @@
+import SearchBar from "@/components/search-bar/search-bar";
 
 export default function Home() {
     return (
         <main>
+            <SearchBar />
         </main>
     )
 }
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..82a2ec7
--- /dev/null
+++ b/frontend/src/components/search-bar/search-bar.module.css
@@ -0,0 +1,3 @@
+.searchButton {
+    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..fdf797d
--- /dev/null
+++ b/frontend/src/components/search-bar/search-bar.tsx
@@ -0,0 +1,25 @@
+import { Button, Textarea } from "@nextui-org/react";
+import { SearchIcon } from './search-icon';
+import classes from './search-bar.module.css';
+
+export default function SearchBar() {
+
+    return (
+        <>
+            <Textarea
+                type="text"
+                size="md"
+                radius="lg"
+                color="primary"
+                label="How can we help?"
+                labelPlacement="outside"
+                placeholder="I am a dialysis patient in need of financial assistance and food support after being retrenched due to Covid-19."
+                endContent={
+                    <Button className={classes.searchButton} isIconOnly size="sm" radius="full" >
+                        <SearchIcon />
+                    </Button>
+                }
+                />
+        </>
+    )
+}
diff --git a/frontend/src/components/search-bar/search-icon.jsx b/frontend/src/components/search-bar/search-icon.jsx
new file mode 100644
index 0000000..870d10d
--- /dev/null
+++ b/frontend/src/components/search-bar/search-icon.jsx
@@ -0,0 +1,27 @@
+export const SearchIcon = (props) => (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="gray"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="gray"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );

From 4d68878b43d9b231cbbbcb6a26a43513cf78737a Mon Sep 17 00:00:00 2001
From: chunxtan <chunxiaotan99@gmail.com>
Date: Sun, 10 Nov 2024 16:10:27 +0800
Subject: [PATCH 2/3] add chat list

---
 frontend/src/app/page.tsx                     |  4 +-
 .../components/chat-list/chat-list.module.css | 47 +++++++++++++++++++
 .../src/components/chat-list/chat-list.tsx    | 35 ++++++++++++++
 .../src/components/main-chat/main-chat.tsx    | 47 +++++++++++++++++++
 .../search-bar/search-bar.module.css          |  5 ++
 .../src/components/search-bar/search-bar.tsx  | 21 +++++++--
 6 files changed, 154 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/chat-list/chat-list.module.css
 create mode 100644 frontend/src/components/chat-list/chat-list.tsx
 create mode 100644 frontend/src/components/main-chat/main-chat.tsx

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a14956c..1881a50 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,9 +1,9 @@
-import SearchBar from "@/components/search-bar/search-bar";
+import MainChat from "@/components/main-chat/main-chat";
 
 export default function Home() {
     return (
         <main>
-            <SearchBar />
+            <MainChat />
         </main>
     )
 }
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 (
+        <div className={classes.chatList}>
+          {messages.map((msg, index) => (
+            <div key={index} className={`${classes.messageContainer} ${msg.type === "user" ? classes.userContainer : classes.botContainer}`}>
+              {msg.type === "bot" && (
+                <Avatar
+                  name="S"
+                  size="sm"
+                  className={classes.avatar}
+                />
+              )}
+              <Card
+                className={`${classes.card} ${msg.type === "user" ? classes.user : classes.bot}`}
+                fullWidth={false}
+                radius="lg"
+                shadow="none"
+              >
+                <CardBody className={classes.cardBody}>
+                  <p>{msg.text}</p>
+                </CardBody>
+              </Card>
+            </div>
+          ))}
+        </div>
+    );
+}
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..9cbfbc2
--- /dev/null
+++ b/frontend/src/components/main-chat/main-chat.tsx
@@ -0,0 +1,47 @@
+'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<Message[]>([
+        { type: "bot", text: "Hello! How can I help you today?" }
+    ]);
+    const [userInput, setUserInput] = useState("");
+    const [botResponse, setBotResponse] = useState("");
+
+    const handleUserInput = (input: string) => {
+        setMessages((prevMessages) => [
+            ...prevMessages,
+            { type: "user", text: input }
+        ]);
+        setUserInput("");
+    };
+
+    const handleBotResponse = (response: string) => {
+        setMessages((prevMessages) => [
+            ...prevMessages,
+            { type: "bot", text: response }
+        ]);
+        setBotResponse("");
+    };
+
+    return (
+        <>
+            <ChatList messages={messages} />
+            <Spacer y={4} />
+            <SearchBar
+                userInput={userInput}
+                setUserInput={setUserInput}
+                handleUserInput={handleUserInput}
+            />
+        </>
+    )
+}
diff --git a/frontend/src/components/search-bar/search-bar.module.css b/frontend/src/components/search-bar/search-bar.module.css
index 82a2ec7..7bb5c25 100644
--- a/frontend/src/components/search-bar/search-bar.module.css
+++ b/frontend/src/components/search-bar/search-bar.module.css
@@ -1,3 +1,8 @@
+.searchBar textarea::placeholder{
+    font-style: italic;
+    color: rgba(0, 0, 0, 0.2);
+}
+
 .searchButton {
     margin-top: auto
 }
diff --git a/frontend/src/components/search-bar/search-bar.tsx b/frontend/src/components/search-bar/search-bar.tsx
index fdf797d..dc8d6dd 100644
--- a/frontend/src/components/search-bar/search-bar.tsx
+++ b/frontend/src/components/search-bar/search-bar.tsx
@@ -2,11 +2,26 @@ import { Button, Textarea } from "@nextui-org/react";
 import { SearchIcon } from './search-icon';
 import classes from './search-bar.module.css';
 
-export default function SearchBar() {
+interface SearchBarProps {
+    userInput: string;
+    setUserInput: React.Dispatch<React.SetStateAction<string>>;
+    handleUserInput: (message: string) => void;
+}
+
+export default function SearchBar({ userInput, setUserInput, handleUserInput }: SearchBarProps) {
+
+    const handleSend = () => {
+        if (userInput.trim()) {
+          handleUserInput(userInput);
+        }
+    };
 
     return (
         <>
             <Textarea
+                value={userInput}
+                onChange={(e) => setUserInput(e.target.value)}
+                className={classes.searchBar}
                 type="text"
                 size="md"
                 radius="lg"
@@ -15,11 +30,11 @@ export default function SearchBar() {
                 labelPlacement="outside"
                 placeholder="I am a dialysis patient in need of financial assistance and food support after being retrenched due to Covid-19."
                 endContent={
-                    <Button className={classes.searchButton} isIconOnly size="sm" radius="full" >
+                    <Button className={classes.searchButton} isIconOnly size="sm" radius="full" onClick={handleSend}>
                         <SearchIcon />
                     </Button>
                 }
-                />
+            />
         </>
     )
 }

From 0b94a627ef059f639a760b6cb8d74d8ae89c198f Mon Sep 17 00:00:00 2001
From: chunxtan <chunxiaotan99@gmail.com>
Date: Sun, 10 Nov 2024 16:23:54 +0800
Subject: [PATCH 3/3] add spinner to chat input area for bot response
 generation

---
 frontend/src/components/main-chat/main-chat.tsx     | 13 +++++++++++++
 .../src/components/search-bar/search-bar.module.css |  2 +-
 frontend/src/components/search-bar/search-bar.tsx   | 11 ++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/main-chat/main-chat.tsx b/frontend/src/components/main-chat/main-chat.tsx
index 9cbfbc2..e69e1d7 100644
--- a/frontend/src/components/main-chat/main-chat.tsx
+++ b/frontend/src/components/main-chat/main-chat.tsx
@@ -16,6 +16,7 @@ export default function MainChat() {
     ]);
     const [userInput, setUserInput] = useState("");
     const [botResponse, setBotResponse] = useState("");
+    const [isBotResponseGenerating, setIsBotResponseGenerating] = useState<boolean>(false);
 
     const handleUserInput = (input: string) => {
         setMessages((prevMessages) => [
@@ -33,6 +34,16 @@ export default function MainChat() {
         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 (
         <>
             <ChatList messages={messages} />
@@ -41,6 +52,8 @@ export default function MainChat() {
                 userInput={userInput}
                 setUserInput={setUserInput}
                 handleUserInput={handleUserInput}
+                simulateBotResponse={simulateBotResponse}
+                isBotResponseGenerating={isBotResponseGenerating}
             />
         </>
     )
diff --git a/frontend/src/components/search-bar/search-bar.module.css b/frontend/src/components/search-bar/search-bar.module.css
index 7bb5c25..61dfbc4 100644
--- a/frontend/src/components/search-bar/search-bar.module.css
+++ b/frontend/src/components/search-bar/search-bar.module.css
@@ -3,6 +3,6 @@
     color: rgba(0, 0, 0, 0.2);
 }
 
-.searchButton {
+.endContent {
     margin-top: auto
 }
diff --git a/frontend/src/components/search-bar/search-bar.tsx b/frontend/src/components/search-bar/search-bar.tsx
index dc8d6dd..1715478 100644
--- a/frontend/src/components/search-bar/search-bar.tsx
+++ b/frontend/src/components/search-bar/search-bar.tsx
@@ -1,4 +1,4 @@
-import { Button, Textarea } from "@nextui-org/react";
+import { Button, Spinner, Textarea } from "@nextui-org/react";
 import { SearchIcon } from './search-icon';
 import classes from './search-bar.module.css';
 
@@ -6,13 +6,16 @@ interface SearchBarProps {
     userInput: string;
     setUserInput: React.Dispatch<React.SetStateAction<string>>;
     handleUserInput: (message: string) => void;
+    simulateBotResponse: (userMessage: string) => void;
+    isBotResponseGenerating: boolean
 }
 
-export default function SearchBar({ userInput, setUserInput, handleUserInput }: SearchBarProps) {
+export default function SearchBar({ userInput, setUserInput, handleUserInput, simulateBotResponse, isBotResponseGenerating }: SearchBarProps) {
 
     const handleSend = () => {
         if (userInput.trim()) {
           handleUserInput(userInput);
+          simulateBotResponse(userInput);
         }
     };
 
@@ -30,7 +33,9 @@ export default function SearchBar({ userInput, setUserInput, handleUserInput }:
                 labelPlacement="outside"
                 placeholder="I am a dialysis patient in need of financial assistance and food support after being retrenched due to Covid-19."
                 endContent={
-                    <Button className={classes.searchButton} isIconOnly size="sm" radius="full" onClick={handleSend}>
+                    isBotResponseGenerating
+                    ? <Spinner className={classes.endContent} size="sm" />
+                    : <Button className={classes.endContent} isIconOnly size="sm" radius="full" onClick={handleSend}>
                         <SearchIcon />
                     </Button>
                 }