added reset button

components/Chat/Chat.tsx

@@ -3,34 +3,42 @@ import { FC } from "react";
 import { ChatInput } from "./ChatInput";
 import { ChatLoader } from "./ChatLoader";
 import { ChatMessage } from "./ChatMessage";
+import { ResetChat } from "./ResetChat";
 
 interface Props {
   messages: Message[];
   loading: boolean;
   onSend: (message: Message) => void;
+  onReset: () => void;
 }
 
-export const Chat: FC<Props> = ({ messages, loading, onSend }) => {
+export const Chat: FC<Props> = ({ messages, loading, onSend, onReset }) => {
   return (
-    <div className="flex flex-col rounded-lg px-2 sm:p-4 sm:border border-neutral-300">
-      {messages.map((message, index) => (
-        <div
-          key={index}
-          className="my-1 sm:my-1.5"
-        >
-          <ChatMessage message={message} />
-        </div>
-      ))}
+    <>
+      <div className="flex flex-row justify-between items-center mb-4 sm:mb-8">
+        <ResetChat onReset={onReset} />
+      </div>
 
-      {loading && (
-        <div className="my-1 sm:my-1.5">
-          <ChatLoader />
-        </div>
-      )}
+      <div className="flex flex-col rounded-lg px-2 sm:p-4 sm:border border-neutral-300">
+        {messages.map((message, index) => (
+          <div
+            key={index}
+            className="my-1 sm:my-1.5"
+          >
+            <ChatMessage message={message} />
+          </div>
+        ))}
 
-      <div className="mt-4 sm:mt-8 bottom-[56px] left-0 w-full">
-        <ChatInput onSend={onSend} />
+        {loading && (
+          <div className="my-1 sm:my-1.5">
+            <ChatLoader />
+          </div>
+        )}
+
+        <div className="mt-4 sm:mt-8 bottom-[56px] left-0 w-full">
+          <ChatInput onSend={onSend} />
+        </div>
       </div>
-    </div>
+    </>
   );
 };

components/Chat/ResetChat.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+
+interface Props {
+  onReset: () => void;
+}
+
+export const ResetChat: FC<Props> = ({ onReset }) => {
+  return (
+    <div className="flex flex-row items-center">
+      <button
+        className="text-sm sm:text-base text-neutral-900 font-semibold rounded-lg px-4 py-2 bg-neutral-200 hover:bg-neutral-300 focus:outline-none focus:ring-1 focus:ring-neutral-300"
+        onClick={() => onReset()}
+      >
+        Reset
+      </button>
+    </div>
+  );
+};
+;

pages/index.tsx

@@ -76,6 +76,15 @@ export default function Home() {
     }
   };
 
+  const handleReset = () => {
+    setMessages([
+      {
+        role: "assistant",
+        content: `Hi there! I'm Chatbot UI, an AI assistant. I can help you with things like answering questions, providing information, and helping with tasks. How can I help you?`
+      }
+    ]);
+  };
+
   useEffect(() => {
     scrollToBottom();
   }, [messages]);
@@ -116,6 +125,7 @@ export default function Home() {
               messages={messages}
               loading={loading}
               onSend={handleSend}
+              onReset={handleReset}
             />
             <div ref={messagesEndRef} />
           </div>