+
+ {messageTree.length === 0 ? (
+
+ ) : (
+ <>
+
+
+ {() => showScrollButton && }
+
+
+ )}
@@ -88,4 +95,4 @@ const Messages = ({ messages }) => {
);
};
-export default Messages;
+export default React.memo(Messages);
diff --git a/client/src/components/Models/MenuItems.jsx b/client/src/components/Models/MenuItems.jsx
index a119bee381..d0a277ea9e 100644
--- a/client/src/components/Models/MenuItems.jsx
+++ b/client/src/components/Models/MenuItems.jsx
@@ -10,7 +10,10 @@ export default function MenuItems({ models, onSelect }) {
id={modelItem._id}
modelName={modelItem.name}
value={modelItem.value}
+ model={modelItem.model || 'chatgptCustom'}
onSelect={onSelect}
+ chatGptLabel={modelItem.chatGptLabel}
+ promptPrefix={modelItem.promptPrefix}
/>
))}
diff --git a/client/src/components/Models/ModelItem.jsx b/client/src/components/Models/ModelItem.jsx
index c3df204351..163c4206fd 100644
--- a/client/src/components/Models/ModelItem.jsx
+++ b/client/src/components/Models/ModelItem.jsx
@@ -7,8 +7,9 @@ import { DialogTrigger } from '../ui/Dialog.tsx';
import RenameButton from '../Conversations/RenameButton';
import TrashIcon from '../svg/TrashIcon';
import manualSWR from '~/utils/fetchers';
+import { getIconOfModel } from '../../utils';
-export default function ModelItem({ modelName, value, onSelect, id }) {
+export default function ModelItem({ modelName, value, model, onSelect, id, chatGptLabel, promptPrefix }) {
const dispatch = useDispatch();
const { customModel } = useSelector((state) => state.submit);
const { initial } = useSelector((state) => state.models);
@@ -27,6 +28,8 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
dispatch(setModels(fetchedModels));
});
+ const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+
if (value === 'chatgptCustom') {
return (
@@ -34,6 +37,7 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
value={value}
className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
>
+ {icon}
{modelName}
$
@@ -47,6 +51,7 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
value={value}
className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
>
+ {icon}
{modelName}
{value === 'chatgpt' && $}
@@ -122,6 +127,9 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
)}
+
+ {icon}
+
{renaming === true ? (
{
mutate();
- const lastSelected = JSON.parse(localStorage.getItem('model'));
- if (lastSelected && lastSelected !== 'chatgptCustom' && initial[lastSelected]) {
- dispatch(setModel(lastSelected));
+ try {
+ const lastSelected = JSON.parse(localStorage.getItem('model'));
+
+ if (lastSelected === 'chatgptCustom') {
+ return;
+ } else if (initial[lastSelected]) {
+ dispatch(setModel(lastSelected));
+ }
+ } catch (err) {
+ console.log(err);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -56,32 +65,32 @@ export default function ModelMenu() {
localStorage.setItem('model', JSON.stringify(model));
}, [model]);
- const onChange = (value, custom = false) => {
- // if (custom) {
- // mutate();
- // }
+ const onChange = (value) => {
if (!value) {
return;
+ } else if (value === model) {
+ return;
} else if (value === 'chatgptCustom') {
- // dispatch(setMessages([]));
+ // return;
} else if (initial[value]) {
dispatch(setModel(value));
dispatch(setDisabled(false));
dispatch(setCustomModel(null));
+ dispatch(setCustomGpt({ chatGptLabel: null, promptPrefix: null }));
} else if (!initial[value]) {
const chatGptLabel = modelMap[value]?.chatGptLabel;
const promptPrefix = modelMap[value]?.promptPrefix;
dispatch(setCustomGpt({ chatGptLabel, promptPrefix }));
dispatch(setModel('chatgptCustom'));
dispatch(setCustomModel(value));
- // if (custom) {
- // setMenuOpen((prevOpen) => !prevOpen);
- // }
+ setMenuOpen(false);
} else if (!modelMap[value]) {
dispatch(setCustomModel(null));
}
// Set new conversation
+ dispatch(setText(''));
+ dispatch(setMessages([]));
dispatch(setNewConvo());
dispatch(setSubmission({}));
};
@@ -148,7 +157,7 @@ export default function ModelMenu() {
{icon}
-
+ event.preventDefault()}>
Select a Model
state.convo);
+ const { conversationId, convos, title } = useSelector((state) => state.convo);
const toggleNavVisible = () => {
setNavVisible((prev) => {
@@ -21,8 +22,6 @@ export default function MobileNav({ setNavVisible }) {
dispatch(setSubmission({}));
}
- const title = convos?.find(element => element?.conversationId == conversationId)?.title || 'New Chat';
-
return (
-
{title}
+
{title || 'New Chat'}