From 5d9bc10cf48322bd40f27f3e05e709c3e5d19246 Mon Sep 17 00:00:00 2001
From: Jiayao Yu <jiayao.yu@gmail.com>
Date: Sun, 26 Mar 2023 08:09:10 -0700
Subject: [PATCH] Allow switching GPT model in the middle of a conversation
 (#181)

* Allow switching model in the middle of a conversation

* Hide model selection menu behind a settings button

* rename

* Touch up the settings icon
---
 components/Chat/Chat.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 1cf1695..d4548c7 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -20,6 +20,7 @@ import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
+import { IconSettings } from "@tabler/icons-react";
 
 interface Props {
   conversation: Conversation;
@@ -56,6 +57,7 @@ export const Chat: FC<Props> = ({
   const { t } = useTranslation('chat');
   const [currentMessage, setCurrentMessage] = useState<Message>();
   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const [showSettings, setShowSettings] = useState<boolean>(false);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
@@ -82,6 +84,10 @@ export const Chat: FC<Props> = ({
     }
   };
 
+  const handleSettings = () => {
+    setShowSettings(!showSettings);
+  };
+
   useEffect(() => {
     scrollToBottom();
     setCurrentMessage(conversation.messages[conversation.messages.length - 2]);
@@ -152,9 +158,21 @@ export const Chat: FC<Props> = ({
               </>
             ) : (
               <>
-                <div className="flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
-                  {t('Model')}: {conversation.model.name}
+              <div className="flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
+                {t('Model')}: {conversation.model.name}
+                <IconSettings className="ml-2 cursor-pointer hover:opacity-50" onClick={handleSettings} size={18} />
+              </div>
+              {showSettings && (
+                <div className="flex flex-col mx-auto pt-8 space-y-10 w-[200px] sm:w-[300px]">
+                  <div className="flex flex-col h-full space-y-4 border p-2 rounded border-neutral-500">
+                    <ModelSelect
+                          model={conversation.model}
+                          models={models}
+                          onModelChange={(model) => onUpdateConversation(conversation, { key: "model", value: model })}
+                        />
+                  </div>
                 </div>
+              )}
 
                 {conversation.messages.map((message, index) => (
                   <ChatMessage