KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Jiayao Yu 2023-03-26 08:09:10 -07:00 committed by GitHub
parent 0bd7d86174
commit 5d9bc10cf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/Chat/Chat.tsx
View File

@ -20,6 +20,7 @@ import { ChatMessage } from './ChatMessage';
import { ErrorMessageDiv } from './ErrorMessageDiv'; import { ErrorMessageDiv } from './ErrorMessageDiv';
import { ModelSelect } from './ModelSelect'; import { ModelSelect } from './ModelSelect';
import { SystemPrompt } from './SystemPrompt'; import { SystemPrompt } from './SystemPrompt';
import { IconSettings } from "@tabler/icons-react";
interface Props { interface Props {
conversation: Conversation; conversation: Conversation;
@ -56,6 +57,7 @@ export const Chat: FC<Props> = ({
const { t } = useTranslation('chat'); const { t } = useTranslation('chat');
const [currentMessage, setCurrentMessage] = useState<Message>(); const [currentMessage, setCurrentMessage] = useState<Message>();
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true); const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
const [showSettings, setShowSettings] = useState<boolean>(false);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const chatContainerRef = useRef<HTMLDivElement>(null); const chatContainerRef = useRef<HTMLDivElement>(null);
@ -82,6 +84,10 @@ export const Chat: FC<Props> = ({
} }
}; };
const handleSettings = () => {
setShowSettings(!showSettings);
};
useEffect(() => { useEffect(() => {
scrollToBottom(); scrollToBottom();
setCurrentMessage(conversation.messages[conversation.messages.length - 2]); setCurrentMessage(conversation.messages[conversation.messages.length - 2]);
@ -154,7 +160,19 @@ 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"> <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} {t('Model')}: {conversation.model.name}
<IconSettings className="ml-2 cursor-pointer hover:opacity-50" onClick={handleSettings} size={18} />
</div> </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) => ( {conversation.messages.map((message, index) => (
<ChatMessage <ChatMessage