diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index b89f9c8623..9e5c3dce6d 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -42,8 +42,6 @@ export default function Conversation({
dispatch(setEmptyMessage());
const convo = { title, error: false, conversationId: id, chatGptLabel, promptPrefix };
- // debugging
- console.log(model, chatGptLabel, promptPrefix);
if (bingData) {
const {
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index ac74285be0..cfda8e524f 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -1,8 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import TextWrapper from './TextWrapper';
import { useSelector, useDispatch } from 'react-redux';
-import GPTIcon from '../svg/GPTIcon';
-import BingIcon from '../svg/BingIcon';
import HoverButtons from './HoverButtons';
import SiblingSwitch from './SiblingSwitch';
import Spinner from '../svg/Spinner';
@@ -11,6 +9,7 @@ import { setMessages } from '~/store/messageSlice';
import { setSubmitState, setSubmission } from '~/store/submitSlice';
import { setText } from '~/store/textSlice';
import { setConversation } from '../../store/convoSlice';
+import { getIconOfModel } from '../../utils';
const MultiMessage = ({
messageList,
@@ -103,52 +102,12 @@ export default function Message({
className:
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
};
-
- const bgColors = {
- chatgpt: 'rgb(16, 163, 127)',
- chatgptBrowser: 'rgb(25, 207, 207)',
- bingai: '',
- sydney: ''
- };
-
- const isBing = sender === 'bingai' || sender === 'sydney';
-
- let icon = (
-
- User
-
- );
- //`${sender}:`;
-
- let backgroundColor = bgColors[sender];
-
- if (!isCreatedByUser) {
+
+ const icon = getIconOfModel({ sender, isCreatedByUser, model, chatGptLabel, promptPrefix, error });
+
+ if (!isCreatedByUser)
props.className =
'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
- }
-
- if ((!isCreatedByUser && backgroundColor) || isBing) {
- icon = (
-
- {isBing ? : }
- {error && (
-
- !
-
- )}
-
- );
- }
const wrapText = (text) => ;
diff --git a/client/src/components/Models/MenuItems.jsx b/client/src/components/Models/MenuItems.jsx
index a119bee381..23e54633cd 100644
--- a/client/src/components/Models/MenuItems.jsx
+++ b/client/src/components/Models/MenuItems.jsx
@@ -2,6 +2,7 @@ import React from 'react';
import ModelItem from './ModelItem';
export default function MenuItems({ models, onSelect }) {
+ console.log(models)
return (
<>
{models.map((modelItem) => (
@@ -11,6 +12,8 @@ export default function MenuItems({ models, onSelect }) {
modelName={modelItem.name}
value={modelItem.value}
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..e6153e8002 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, 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: value, 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 ? (
{
+ const bgColors = {
+ chatgpt: 'rgb(16, 163, 127)',
+ chatgptBrowser: 'rgb(25, 207, 207)',
+ bingai: 'transparent',
+ sydney: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
+ chatgptCustom: 'rgb(0, 163, 255)',
+ };
+
+ if (isCreatedByUser)
+ return (
+
+ User
+
+ )
+ else if (!isCreatedByUser) {
+ // TODO: use model from convo, rather than submit
+ // const { model, chatGptLabel, promptPrefix } = convo;
+ console.log(model, chatGptLabel)
+ let background = bgColors[model];
+ const isBing = model === 'bingai' || model === 'sydney';
+
+ return (
+
+ {isBing ? : }
+ {error && (
+
+ !
+
+ )}
+
+ );
+ } else
+ return (
+
+ {chatGptLabel}
+
+ )
+}