Option for clear all messages (#222)

Co-authored-by: ryanhex53 <ouyang.em@gmail.com>

components/Chat/Chat.tsx

@@ -5,24 +5,16 @@ import {
   Message,
   OpenAIModel,
 } from '@/types';
-import {
-  FC,
-  memo,
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { throttle } from '@/utils';
+import { IconClearAll, IconSettings } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { FC, memo, MutableRefObject, useEffect, useRef, useState } from 'react';
 import { ChatInput } from './ChatInput';
 import { ChatLoader } from './ChatLoader';
 import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
-import { IconSettings } from '@tabler/icons-react';
-import { throttle } from '@/utils';
 
 interface Props {
   conversation: Conversation;
@@ -70,6 +62,12 @@ export const Chat: FC<Props> = memo(
       setShowSettings(!showSettings);
     };
 
+    const onClearAll = () => {
+      if (confirm(t<string>('Are you sure you want to clear all messages?'))) {
+        onUpdateConversation(conversation, { key: 'messages', value: [] });
+      }
+    };
+
     const scrollDown = () => {
       if (autoScrollEnabled) {
         messagesEndRef.current?.scrollIntoView(true);
@@ -182,6 +180,11 @@ export const Chat: FC<Props> = memo(
                       onClick={handleSettings}
                       size={18}
                     />
+                    <IconClearAll
+                      className="ml-2 cursor-pointer hover:opacity-50"
+                      onClick={onClearAll}
+                      size={18}
+                    />
                   </div>
                   {showSettings && (
                     <div className="mx-auto flex w-[200px] flex-col space-y-10 pt-8 sm:w-[300px]">