diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx
index a927944ee..aedc3c5d6 100644
--- a/src/components/ApiMenu/ApiMenu.tsx
+++ b/src/components/ApiMenu/ApiMenu.tsx
@@ -2,13 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import useStore from '@store/store';
 
-import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
-
 import PopupModal from '@components/PopupModal';
 
 import { availableEndpoints, defaultAPIEndpoint } from '@constants/auth';
 
-import DownChevronArrow from '@icon/DownChevronArrow';
+import DropDown from '@components/DropDown';
 
 const ApiMenu = ({
   setIsModalOpen,
@@ -144,44 +142,16 @@ const ApiEndpointSelector = ({
   _apiEndpoint: string;
   _setApiEndpoint: React.Dispatch<React.SetStateAction<string>>;
 }) => {
-  const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
-
   return (
     <div className='w-[40vw] relative flex-1'>
-      <button
-        className='btn btn-neutral btn-small flex justify-between w-full'
-        type='button'
-        aria-label='expand api menu'
-        onClick={() => setDropDown((prev) => !prev)}
-      >
-        <span className='truncate'>{_apiEndpoint}</span>
-        <DownChevronArrow />
-      </button>
-      <div
-        id='dropdown'
-        ref={dropDownRef}
-        className={`${
-          dropDown ? '' : 'hidden'
-        } absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90 w-32 w-full`}
-      >
-        <ul
-          className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0'
-          aria-labelledby='dropdownDefaultButton'
-        >
-          {availableEndpoints.map((endpoint) => (
-            <li
-              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer truncate'
-              onClick={() => {
-                _setApiEndpoint(endpoint);
-                setDropDown(false);
-              }}
-              key={endpoint}
-            >
-              {endpoint}
-            </li>
-          ))}
-        </ul>
-      </div>
+      <DropDown
+        selected={_apiEndpoint}
+        selections={availableEndpoints.map((e) => ({ value: e, label: e }))}
+        dropDownStyles={['w-32', 'w-full']}
+        onClick={(value) => {
+          _setApiEndpoint(value);
+        }}
+      />
     </div>
   );
 };
diff --git a/src/components/Chat/ChatContent/ChatContent.tsx b/src/components/Chat/ChatContent/ChatContent.tsx
index 1671db444..2de426563 100644
--- a/src/components/Chat/ChatContent/ChatContent.tsx
+++ b/src/components/Chat/ChatContent/ChatContent.tsx
@@ -64,16 +64,19 @@ const ChatContent = () => {
               <NewMessageButton messageIndex={-1} />
             )}
             {messages?.map((message, index) => (
-              (advancedMode || index !== 0 || message.role !== 'system') && (
-                <React.Fragment key={index}>
-                  <Message
-                    role={message.role}
-                    content={message.content}
-                    messageIndex={index}
-                  />
-                  {!generating && advancedMode && <NewMessageButton messageIndex={index} />}
-                </React.Fragment>
-              )
+              <React.Fragment key={index}>
+                <Message
+                  role={message.role}
+                  content={message.content}
+                  messageIndex={index}
+                  generating={generating}
+                  versions={message.versions}
+                  versionIdx={message.versionIndex}
+                />
+                {!generating && advancedMode && (
+                  <NewMessageButton messageIndex={index} />
+                )}
+              </React.Fragment>
             ))}
           </div>
 
@@ -81,6 +84,7 @@ const ChatContent = () => {
             role={inputRole}
             content=''
             messageIndex={stickyIndex}
+            generating={generating}
             sticky
           />
           {error !== '' && (
@@ -105,7 +109,7 @@ const ChatContent = () => {
                 : 'md:max-w-3xl lg:max-w-3xl xl:max-w-4xl'
             }`}
           >
-            {useStore.getState().generating || (
+            {generating || (
               <div className='md:w-[calc(100%-50px)] flex gap-4 flex-wrap justify-center'>
                 <DownloadChat saveRef={saveRef} />
                 <ShareGPT />
diff --git a/src/components/Chat/ChatContent/Message/Button/BaseButton.tsx b/src/components/Chat/ChatContent/Message/Button/BaseButton.tsx
new file mode 100644
index 000000000..6cae8909f
--- /dev/null
+++ b/src/components/Chat/ChatContent/Message/Button/BaseButton.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const BaseButton = ({
+  onClick,
+  icon,
+  disabled = false,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  icon: React.ReactElement;
+  disabled?: boolean;
+}) => {
+  return (
+    <div className='text-gray-400 flex self-end lg:self-center justify-center gap-3 md:gap-4 visible'>
+      <button
+        className={`p-1 rounded-md dark:text-gray-400 md:invisible md:group-hover:visible ${
+          disabled
+            ? 'disabled:dark:hover:text-gray-400 cursor-default'
+            : 'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+        }`}
+        onClick={disabled ? () => {} : onClick}
+        disabled={disabled}
+      >
+        {icon}
+      </button>
+    </div>
+  );
+};
+
+export default BaseButton;
diff --git a/src/components/Chat/ChatContent/Message/Button/LeftButton.tsx b/src/components/Chat/ChatContent/Message/Button/LeftButton.tsx
new file mode 100644
index 000000000..269a28fb5
--- /dev/null
+++ b/src/components/Chat/ChatContent/Message/Button/LeftButton.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import DownChevronArrow from '@icon/DownChevronArrow';
+
+import BaseButton from './BaseButton';
+
+const LeftButton = ({
+  disabled,
+  onClick,
+}: {
+  disabled: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <BaseButton
+      icon={<DownChevronArrow className='rotate-90 m-1' />}
+      disabled={disabled}
+      onClick={onClick}
+    />
+  );
+};
+
+export default LeftButton;
diff --git a/src/components/Chat/ChatContent/Message/Button/RightButton.tsx b/src/components/Chat/ChatContent/Message/Button/RightButton.tsx
new file mode 100644
index 000000000..064aabd75
--- /dev/null
+++ b/src/components/Chat/ChatContent/Message/Button/RightButton.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import DownChevronArrow from '@icon/DownChevronArrow';
+
+import BaseButton from './BaseButton';
+
+const RightButton = ({
+  disabled,
+  onClick,
+}: {
+  disabled: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <BaseButton
+      icon={
+        <DownChevronArrow
+          className='rotate-[270deg] m-1'
+        />
+      }
+      disabled={disabled}
+      onClick={onClick}
+    />
+  );
+};
+
+export default RightButton;
diff --git a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
index e61ba00f9..9328dbe71 100644
--- a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
+++ b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
@@ -40,7 +40,7 @@ const CommandPrompt = ({
   }, [prompts]);
 
   return (
-    <div className='relative max-wd-sm' ref={dropDownRef}>
+    <div className='relative max-wd-sm' ref={dropDownRef as React.RefObject<HTMLDivElement>}>
       <button
         className='btn btn-neutral btn-small'
         aria-label='prompt library'
diff --git a/src/components/Chat/ChatContent/Message/Message.tsx b/src/components/Chat/ChatContent/Message/Message.tsx
index 53904b7a3..fccab51fa 100644
--- a/src/components/Chat/ChatContent/Message/Message.tsx
+++ b/src/components/Chat/ChatContent/Message/Message.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DropDown from '@components/DropDown';
+
 import useStore from '@store/store';
 
+import { ChatInterface, Role, roles } from '@type/chat';
+
 import Avatar from './Avatar';
 import MessageContent from './MessageContent';
 
-import { Role } from '@type/chat';
-import RoleSelector from './RoleSelector';
+import LeftButton from './Button/LeftButton';
+import RightButton from './Button/RightButton';
 
 // const backgroundStyle: { [role in Role]: string } = {
 //   user: 'dark:bg-gray-800',
@@ -19,15 +25,67 @@ const Message = React.memo(
     role,
     content,
     messageIndex,
+    generating,
+    versions,
+    versionIdx,
     sticky = false,
   }: {
     role: Role;
     content: string;
     messageIndex: number;
+    generating: boolean;
+    versions?: string[] | undefined;
+    versionIdx?: number | undefined;
     sticky?: boolean;
   }) => {
+    const { t } = useTranslation();
+
+    const setChats = useStore((state) => state.setChats);
+    const setInputRole = useStore((state) => state.setInputRole);
+
     const hideSideMenu = useStore((state) => state.hideSideMenu);
     const advancedMode = useStore((state) => state.advancedMode);
+    const currentChatIndex = useStore((state) => state.currentChatIndex);
+
+    const previousVersion = () => {
+      if (versions && versions.length !== undefined) {
+        const idx = versionIdx !== undefined ? versionIdx : versions.length - 1;
+        return idx - 1;
+      }
+      return undefined;
+    };
+
+    const hasPreviousVersion = () => {
+      const previous = previousVersion();
+      return previous !== undefined && previous >= 0;
+    };
+
+    const nextVersion = () => {
+      if (versions && versions.length !== undefined) {
+        const idx = versionIdx !== undefined ? versionIdx : versions.length - 1;
+        return idx + 1;
+      }
+      return undefined;
+    };
+
+    const hasNextVersion = () => {
+      const next = nextVersion();
+      return next !== undefined && versions && next < versions.length;
+    };
+
+    const setVersion = (index: number, content: string) => {
+      const updatedChats: ChatInterface[] = JSON.parse(
+        JSON.stringify(useStore.getState().chats)
+      );
+
+      const updatedMessages = updatedChats[currentChatIndex].messages;
+      let version = updatedMessages[messageIndex];
+
+      version.content = content;
+      version.versionIndex = index;
+
+      setChats(updatedChats);
+    };
 
     return (
       <div
@@ -44,12 +102,57 @@ const Message = React.memo(
         >
           <Avatar role={role} />
           <div className='w-[calc(100%-50px)] '>
-            {advancedMode &&
-              <RoleSelector
-                role={role}
-                messageIndex={messageIndex}
-                sticky={sticky}
-              />}
+            <div className='relative flex flex-row justify-between items-center; gap-1 md:gap-3 lg:w-[calc(100%-115px)]'>
+              {advancedMode && (
+                <DropDown
+                  selected={t(role)}
+                  selections={roles.map((r) => ({ value: r, label: t(r) }))}
+                  onClick={(value) => {
+                    if (!sticky) {
+                      const updatedChats: ChatInterface[] = JSON.parse(
+                        JSON.stringify(useStore.getState().chats)
+                      );
+                      updatedChats[currentChatIndex].messages[
+                        messageIndex
+                      ].role = value as Role;
+                      setChats(updatedChats);
+                    } else {
+                      setInputRole(value as Role);
+                    }
+                  }}
+                />
+              )}
+
+              {!sticky && versions?.length && versions.length > 1 && (
+                <div className='flex items-center justify-center'>
+                  <LeftButton
+                    disabled={generating || !hasPreviousVersion()}
+                    onClick={() => {
+                      const previous = previousVersion();
+
+                      if (previous !== undefined && previous >= 0) {
+                        setVersion(previous, versions[previous]);
+                      }
+                    }}
+                  />
+
+                  <span className='text-xs pl-2 pr-2'>{`${
+                    (versionIdx || 0) + 1
+                  } / ${versions.length}`}</span>
+
+                  <RightButton
+                    disabled={generating || !hasNextVersion()}
+                    onClick={() => {
+                      const next = nextVersion();
+
+                      if (next !== undefined && next <= versions.length - 1) {
+                        setVersion(next, versions[next]);
+                      }
+                    }}
+                  />
+                </div>
+              )}
+            </div>
             <MessageContent
               role={role}
               content={content}
diff --git a/src/components/Chat/ChatContent/Message/RoleSelector.tsx b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
deleted file mode 100644
index 196331ab0..000000000
--- a/src/components/Chat/ChatContent/Message/RoleSelector.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import useStore from '@store/store';
-
-import DownChevronArrow from '@icon/DownChevronArrow';
-import { ChatInterface, Role, roles } from '@type/chat';
-
-import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
-
-const RoleSelector = React.memo(
-  ({
-    role,
-    messageIndex,
-    sticky,
-  }: {
-    role: Role;
-    messageIndex: number;
-    sticky?: boolean;
-  }) => {
-    const { t } = useTranslation();
-    const setInputRole = useStore((state) => state.setInputRole);
-    const setChats = useStore((state) => state.setChats);
-    const currentChatIndex = useStore((state) => state.currentChatIndex);
-
-    const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
-
-    return (
-      <div className='prose dark:prose-invert relative'>
-        <button
-          className='btn btn-neutral btn-small flex gap-1'
-          aria-label={t(role) as string}
-          type='button'
-          onClick={() => setDropDown((prev) => !prev)}
-        >
-          {t(role)}
-          <DownChevronArrow />
-        </button>
-        <div
-          ref={dropDownRef}
-          id='dropdown'
-          className={`${
-            dropDown ? '' : 'hidden'
-          } absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90`}
-        >
-          <ul
-            className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0'
-            aria-labelledby='dropdownDefaultButton'
-          >
-            {roles.map((r) => (
-              <li
-                className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer'
-                onClick={() => {
-                  if (!sticky) {
-                    const updatedChats: ChatInterface[] = JSON.parse(
-                      JSON.stringify(useStore.getState().chats)
-                    );
-                    updatedChats[currentChatIndex].messages[messageIndex].role =
-                      r;
-                    setChats(updatedChats);
-                  } else {
-                    setInputRole(r);
-                  }
-                  setDropDown(false);
-                }}
-                key={r}
-              >
-                {t(r)}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    );
-  }
-);
-export default RoleSelector;
diff --git a/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx
deleted file mode 100644
index cba121180..000000000
--- a/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-const BaseButton = ({
-  onClick,
-  icon,
-  buttonProps,
-}: {
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-  icon: React.ReactElement;
-  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
-}) => {
-  return (
-    <div className='text-gray-400 flex self-end lg:self-center justify-center gap-3 md:gap-4  visible'>
-      <button
-        className='p-1 rounded-md hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible'
-        onClick={onClick}
-        {...buttonProps}
-      >
-        {icon}
-      </button>
-    </div>
-  );
-};
-
-export default BaseButton;
diff --git a/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx
index 6d2f1772f..884373b3e 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import TickIcon from '@icon/TickIcon';
 import CopyIcon from '@icon/CopyIcon';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 const CopyButton = ({
   onClick,
diff --git a/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx
index 235e6d1a4..ad0d1be6f 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 
 import DeleteIcon from '@icon/DeleteIcon';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 const DeleteButton = memo(
   ({
diff --git a/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx
index b42d836d4..63476eb36 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import DownChevronArrow from '@icon/DownChevronArrow';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 const DownButton = ({
   onClick,
diff --git a/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx
index a1715e95f..b401c6ae1 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 
 import EditIcon2 from '@icon/EditIcon2';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 const EditButton = memo(
   ({
diff --git a/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
index 60d6cbbb4..feb5b126f 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import useStore from '@store/store';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 import MarkdownIcon from '@icon/MarkdownIcon';
 import FileTextIcon from '@icon/FileTextIcon';
diff --git a/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx
index a270cd4a5..3c319a104 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import RefreshIcon from '@icon/RefreshIcon';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 const RefreshButton = ({
   onClick,
diff --git a/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx
index e8470d97e..c38e64948 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import DownChevronArrow from '@icon/DownChevronArrow';
 
-import BaseButton from './BaseButton';
+import BaseButton from '../../Button/BaseButton';
 
 const UpButton = ({
   onClick,
diff --git a/src/components/Chat/ChatContent/Message/View/ContentView.tsx b/src/components/Chat/ChatContent/Message/View/ContentView.tsx
index ad4c415a9..1ef6de8c3 100644
--- a/src/components/Chat/ChatContent/Message/View/ContentView.tsx
+++ b/src/components/Chat/ChatContent/Message/View/ContentView.tsx
@@ -5,6 +5,8 @@ import React, {
   useState,
 } from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import ReactMarkdown from 'react-markdown';
 import { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
 
@@ -23,6 +25,8 @@ import { ChatInterface } from '@type/chat';
 
 import { codeLanguageSubset } from '@constants/chat';
 
+import PopupModal from '@components/PopupModal';
+
 import RefreshButton from './Button/RefreshButton';
 import UpButton from './Button/UpButton';
 import DownButton from './Button/DownButton';
@@ -48,6 +52,7 @@ const ContentView = memo(
     const { handleSubmit } = useSubmit();
 
     const [isDelete, setIsDelete] = useState<boolean>(false);
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
     const currentChatIndex = useStore((state) => state.currentChatIndex);
     const setChats = useStore((state) => state.setChats);
@@ -57,6 +62,8 @@ const ContentView = memo(
     const inlineLatex = useStore((state) => state.inlineLatex);
     const markdownMode = useStore((state) => state.markdownMode);
 
+    const { t } = useTranslation();
+
     const handleDelete = () => {
       const updatedChats: ChatInterface[] = JSON.parse(
         JSON.stringify(useStore.getState().chats)
@@ -89,14 +96,42 @@ const ContentView = memo(
       handleMove('down');
     };
 
-    const handleRefresh = () => {
+    const handleRefresh = (force: boolean = false) => {
       const updatedChats: ChatInterface[] = JSON.parse(
         JSON.stringify(useStore.getState().chats)
       );
       const updatedMessages = updatedChats[currentChatIndex].messages;
-      updatedMessages.splice(updatedMessages.length - 1, 1);
+
+      let subsequentMessages = updatedMessages.reduce(
+        (result: number[], _, index: number) => {
+          if (index > messageIndex) {
+            result.push(index);
+          }
+          return result;
+        },
+        []
+      );
+
+      const originalMessages = updatedChats[currentChatIndex].messages.map(
+        (message) => ({ ...message })
+      );
+
+      if (subsequentMessages.length) {
+        if (force) {
+          for (let i of subsequentMessages.sort((a, b) => b - a)) {
+            updatedChats[currentChatIndex].messages.splice(i, 1);
+          }
+        } else {
+          setIsModalOpen(true);
+          return;
+        }
+      }
+
       setChats(updatedChats);
-      handleSubmit();
+      setIsModalOpen(false);
+
+      // We specify that this is a regeneration and pass the original chat state in case of errors
+      handleSubmit({ regeneration: true, originalMessages });
     };
 
     const handleCopy = () => {
@@ -140,8 +175,8 @@ const ContentView = memo(
             <>
               {!useStore.getState().generating &&
                 role === 'assistant' &&
-                messageIndex === lastMessageIndex && (
-                  <RefreshButton onClick={handleRefresh} />
+                messageIndex == lastMessageIndex && (
+                  <RefreshButton onClick={() => handleRefresh()} />
                 )}
               {messageIndex !== 0 && <UpButton onClick={handleMoveUp} />}
               {messageIndex !== lastMessageIndex && (
@@ -173,6 +208,14 @@ const ContentView = memo(
             </>
           )}
         </div>
+        {isModalOpen && (
+          <PopupModal
+            setIsModalOpen={setIsModalOpen}
+            title={t('warning') as string}
+            message={t('clearMessageWarning') as string}
+            handleConfirm={() => handleRefresh(true)}
+          />
+        )}
       </>
     );
   }
diff --git a/src/components/DropDown/DropDown.tsx b/src/components/DropDown/DropDown.tsx
new file mode 100644
index 000000000..919bc0577
--- /dev/null
+++ b/src/components/DropDown/DropDown.tsx
@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import useDropDown from '@hooks/useDropDown';
+
+import DownChevronArrow from '@icon/DownChevronArrow';
+
+type Selection = { value: string; label: string; };
+
+const DropDown = ({
+  selected,
+  selections,
+  onClick,
+  dropDownStyles,
+  icon = <DownChevronArrow />,
+}: {
+  selected: string | ReactNode | React.ReactElement;
+  selections: Selection[];
+  onClick: (value: string) => void;
+  icon?: React.ReactElement;
+  dropDownStyles?: string[];
+}) => {
+  const {
+    buttonRef,
+    dropDown,
+    setDropDown,
+    dropDownRef,
+    openDirection,
+    setCheckPosition,
+  } = useDropDown();
+
+  return (
+    <div className='prose dark:prose-invert relative'>
+      <button
+        ref={buttonRef}
+        className='btn btn-neutral btn-small flex gap-1 justify-between w-full'
+        type='button'
+        onClick={() => {
+          setDropDown((prev) => !prev);
+          setCheckPosition(true);
+        }}
+      >
+        <span className="truncate">{selected}</span>
+        {icon}
+      </button>
+      <div
+        ref={dropDownRef as React.RefObject<HTMLDivElement>}
+        id='dropdown'
+        className={`${
+          dropDown ? '' : 'hidden'
+        } absolute z-10 bg-white text-gray-800 group opacity-90 border-b border-black/10 ${
+          openDirection === 'down' ? 'top-full' : 'bottom-full'
+        } rounded-lg shadow-xl dark:border-gray-900/50 dark:text-gray-100 dark:bg-gray-800 ${
+          dropDownStyles && dropDownStyles.join(' ')
+        }`}
+      >
+        <ul
+          className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0'
+          aria-labelledby='dropdownDefaultButton'
+        >
+          {selections.map((r) => (
+            <li
+              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white truncate cursor-pointer'
+              onClick={() => {
+                onClick(r.value);
+                setDropDown(false);
+              }}
+              key={r.value}
+            >
+              {r.label}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default DropDown;
diff --git a/src/components/DropDown/index.ts b/src/components/DropDown/index.ts
new file mode 100644
index 000000000..d76df1b0f
--- /dev/null
+++ b/src/components/DropDown/index.ts
@@ -0,0 +1 @@
+export { default } from './DropDown';
diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 42b144c29..c1ad17f65 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -230,7 +230,7 @@ const ChatFolder = ({
             <>
               <div
                 className='relative md:hidden group-hover/folder:md:inline'
-                ref={paletteRef}
+                ref={paletteRef as React.RefObject<HTMLDivElement>}
               >
                 <button
                   className='p-1 hover:text-white'
diff --git a/src/hooks/useDropDown.ts b/src/hooks/useDropDown.ts
new file mode 100644
index 000000000..02bb92232
--- /dev/null
+++ b/src/hooks/useDropDown.ts
@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useRef } from 'react';
+import useHideOnOutsideClick from './useHideOnOutsideClick';
+
+const useDropDown = () => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
+
+  const [openDirection, setOpenDirection] = useState('down');
+  const [checkPosition, setCheckPosition] = useState(false);
+
+  const checkOpenDirection = () => {
+    if (!buttonRef.current || !dropDownRef.current) return;
+    const buttonRect = buttonRef.current.getBoundingClientRect();
+    const dropDownRect = dropDownRef.current.getBoundingClientRect();
+    setOpenDirection(
+      buttonRect.bottom + dropDownRect.height > window.innerHeight
+        ? 'up'
+        : 'down'
+    );
+  };
+
+  useEffect(() => {
+    if (checkPosition) {
+      checkOpenDirection();
+      setCheckPosition(false);
+    }
+  }, [checkPosition]);
+
+  useEffect(() => {
+    window.addEventListener('resize', checkOpenDirection);
+    return () => {
+      window.removeEventListener('resize', checkOpenDirection);
+    };
+  }, []);
+
+  return {
+    buttonRef,
+    dropDown,
+    setDropDown,
+    dropDownRef,
+    openDirection,
+    setCheckPosition,
+  };
+};
+
+export default useDropDown;
\ No newline at end of file
diff --git a/src/hooks/useHideOnOutsideClick.ts b/src/hooks/useHideOnOutsideClick.ts
index 261aeb287..d746bd62a 100644
--- a/src/hooks/useHideOnOutsideClick.ts
+++ b/src/hooks/useHideOnOutsideClick.ts
@@ -3,15 +3,16 @@ import React, { useEffect, useRef, useState } from 'react';
 const useHideOnOutsideClick = (): [
   boolean,
   React.Dispatch<React.SetStateAction<boolean>>,
-  React.RefObject<HTMLDivElement>
+  React.RefObject<HTMLElement>
 ] => {
-  const elementRef = useRef<HTMLDivElement>(null);
+  const elementRef = useRef<HTMLElement>(null);
   const [showElement, setShowElement] = useState<boolean>(false);
 
-  const handleClickOutside = (event: MouseEvent) => {
+  const handleClickOutside = (event: MouseEvent | TouchEvent) => {
     if (
       elementRef.current &&
-      !elementRef.current.contains(event.target as Node)
+      event.target instanceof Node &&
+      !elementRef.current.contains(event.target)
     ) {
       setShowElement(false);
     }
@@ -21,12 +22,15 @@ const useHideOnOutsideClick = (): [
     // Bind the event listener only if the element is show.
     if (showElement) {
       document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('touchstart', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
     }
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
     };
   }, [showElement, elementRef]);
 
diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts
index cd6efc5aa..9d997228c 100644
--- a/src/hooks/useSubmit.ts
+++ b/src/hooks/useSubmit.ts
@@ -51,30 +51,49 @@ const useSubmit = () => {
     return data.choices[0].message.content;
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async ({
+    regeneration = false,
+    originalMessages = [],
+  }: {
+    regeneration?: boolean;
+    originalMessages?: MessageInterface[];
+  } = {}) => {
     const chats = useStore.getState().chats;
     if (generating || !chats) return;
 
     const updatedChats: ChatInterface[] = JSON.parse(JSON.stringify(chats));
+    const tempMessages = updatedChats[currentChatIndex].messages;
 
-    updatedChats[currentChatIndex].messages.push({
-      role: 'assistant',
-      content: '',
-    });
+    if (regeneration) {
+      let regenerating = tempMessages[tempMessages.length - 1];
+      const versions: string[] =
+        regenerating.versions !== undefined ? regenerating.versions : [];
+      regenerating.content = '';
+      regenerating.versions = versions;
+      regenerating.versionIndex = versions.length;
+    } else {
+      tempMessages.push({
+        role: 'assistant',
+        content: '',
+        versions: [],
+        versionIndex: 0,
+      });
+    }
 
     setChats(updatedChats);
     setGenerating(true);
 
     try {
       let stream;
-      if (chats[currentChatIndex].messages.length === 0)
+      if (updatedChats[currentChatIndex].messages.length === 0)
         throw new Error('No messages submitted!');
 
       const messages = limitMessageTokens(
-        chats[currentChatIndex].messages,
-        chats[currentChatIndex].config.max_tokens,
-        chats[currentChatIndex].config.model
+        updatedChats[currentChatIndex].messages,
+        updatedChats[currentChatIndex].config.max_tokens,
+        updatedChats[currentChatIndex].config.model
       );
+
       if (messages.length === 0) throw new Error('Message exceed max token!');
 
       // no api key (free)
@@ -108,6 +127,8 @@ const useSubmit = () => {
         const reader = stream.getReader();
         let reading = true;
         let partial = '';
+        let hasVersion = false;
+
         while (reading && useStore.getState().generating) {
           const { done, value } = await reader.read();
           const result = parseEventSource(
@@ -131,8 +152,25 @@ const useSubmit = () => {
             const updatedChats: ChatInterface[] = JSON.parse(
               JSON.stringify(useStore.getState().chats)
             );
+
             const updatedMessages = updatedChats[currentChatIndex].messages;
-            updatedMessages[updatedMessages.length - 1].content += resultString;
+            let inference = updatedMessages[updatedMessages.length - 1];
+
+            inference.content += resultString;
+
+            if (inference.versions !== undefined) {
+              if (!hasVersion) {
+                inference.versions.push(resultString);
+                hasVersion = true;
+              } else {
+                inference.versions[inference.versions.length - 1] +=
+                  resultString;
+              }
+            } else {
+              inference.versions = [resultString];
+              hasVersion = true;
+            }
+
             setChats(updatedChats);
           }
         }
@@ -200,7 +238,16 @@ const useSubmit = () => {
       const err = (e as Error).message;
       console.log(err);
       setError(err);
+
+      if (regeneration && originalMessages.length) {
+        updatedChats[currentChatIndex].messages = originalMessages;
+      } else {
+        updatedChats[currentChatIndex].messages.pop();
+      }
+
+      setChats(updatedChats);
     }
+
     setGenerating(false);
   };
 
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 5b706952a..7d899f83a 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -7,6 +7,8 @@ export const roles: Role[] = ['user', 'assistant', 'system'];
 export interface MessageInterface {
   role: Role;
   content: string;
+  versions?: string[];
+  versionIndex?: number;
 }
 
 export interface ChatInterface {
diff --git a/src/utils/messageUtils.ts b/src/utils/messageUtils.ts
index e4aacde0c..36f18a47f 100644
--- a/src/utils/messageUtils.ts
+++ b/src/utils/messageUtils.ts
@@ -84,7 +84,7 @@ export const limitMessageTokens = (
     }
   }
 
-  return limitedMessages;
+  return limitedMessages.map(({ role, content }) => ({ role, content }));
 };
 
 export const updateTotalTokenUsed = (