Added reset chat button in main chat view

src/app/page.tsx

@@ -82,6 +82,10 @@ export default function Home() {
     }
   };
 
+  const onResetChat = () => {
+    setChats([]);
+  };
+
   return (
     <>
       <main className="flex-1 space-y-4 overflow-y-auto px-3" ref={mainDiv}>
@@ -115,7 +119,7 @@ export default function Home() {
           </h2>
         )}
 
-        <Chat isFetchLoading={isFetchLoading} chats={chats} mainDiv={mainDiv} />
+        <Chat isFetchLoading={isFetchLoading} chats={chats} mainDiv={mainDiv} onReset={onResetChat} />
       </main>
       <section className="sticky top-[100vh] py-3">
         <ChatInput

src/components/chat.tsx

@@ -1,17 +1,20 @@
-import { useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { useScrollBottom } from '@/hooks/use-scroll-bottom';
 import { ChatMessages } from './chat-messages';
 import { Spinner } from './spinner';
 import { PageDownButton } from './page-down-button';
 import { ChatRole, TChatMessage, TCreateImageData, TMessage } from '@/lib/types';
+import { Button } from './ui/button';
+import { ResetIcon } from '@radix-ui/react-icons';
 
 interface ChatProps {
   isFetchLoading: boolean;
   chats: TMessage[];
   mainDiv: React.RefObject<HTMLDivElement>;
+  onReset: () => void;
 }
 
-export const Chat: React.FC<ChatProps> = ({ isFetchLoading, chats, mainDiv }) => {
+export const Chat: React.FC<ChatProps> = ({ isFetchLoading, chats, mainDiv, onReset }) => {
   const chatsDiv = useRef<HTMLDivElement>(null);
   const { isScrollBottom } = useScrollBottom(mainDiv);
 
@@ -68,6 +71,7 @@ export const Chat: React.FC<ChatProps> = ({ isFetchLoading, chats, mainDiv }) =>
     <>
       <div className="w-full space-y-4" ref={chatsDiv}>
         {chats.map((message, index) => render(message, index))}
+        <ResetChatButton onClick={onReset} />
         {isFetchLoading && <Spinner />}
       </div>
 
@@ -80,3 +84,12 @@ export const Chat: React.FC<ChatProps> = ({ isFetchLoading, chats, mainDiv }) =>
     </>
   );
 };
+
+const ResetChatButton: FC<{ onClick: () => void }> = ({ onClick }) => {
+  return (
+    <Button variant="secondary" onClick={onClick}>
+      <ResetIcon className="h-4 w-4 pe-1" />
+      Reset Chat
+    </Button>
+  );
+};

src/components/model-alts.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
-import { buttonVariants } from '@/components/ui/button';
 import { ModelMenu } from './model-menu';
 import { Spinner } from './spinner';
 import { TApiSettingsSchema, TModelResponseSchema } from '@/lib/types';