import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { Plugin } from '~/components/svg';
import EndpointOptionsDialog from '../Endpoints/EndpointOptionsDialog';
import { cn, alternateName } from '~/utils/';
import store from '~/store';
const MessageHeader = ({ isSearchView = false }) => {
const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
const conversation = useRecoilValue(store.conversation);
const searchQuery = useRecoilValue(store.searchQuery);
const { endpoint } = conversation;
const isNotClickable = endpoint === 'chatGPTBrowser' || endpoint === 'gptPlugins';
const { model } = conversation;
const plugins = (
<>
•
beta
•
Model: {model}
>
);
const getConversationTitle = () => {
if (isSearchView) {
return `Search: ${searchQuery}`;
} else {
let _title = `${alternateName[endpoint] ?? endpoint}`;
if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
const { chatGptLabel } = conversation;
if (model) {
_title += `: ${model}`;
}
if (chatGptLabel) {
_title += ` as ${chatGptLabel}`;
}
} else if (endpoint === 'google') {
_title = 'PaLM';
const { modelLabel, model } = conversation;
if (model) {
_title += `: ${model}`;
}
if (modelLabel) {
_title += ` as ${modelLabel}`;
}
} else if (endpoint === 'bingAI') {
const { jailbreak, toneStyle } = conversation;
if (toneStyle) {
_title += `: ${toneStyle}`;
}
if (jailbreak) {
_title += ' as Sydney';
}
} else if (endpoint === 'chatGPTBrowser') {
if (model) {
_title += `: ${model}`;
}
} else if (endpoint === 'gptPlugins') {
return plugins;
} else if (endpoint === 'anthropic') {
_title = 'Claude';
} else if (endpoint === null) {
null;
} else {
null;
}
return _title;
}
};
return (
<>
(isNotClickable ? null : setSaveAsDialogShow(true))}
>
{getConversationTitle()}
>
);
};
export default MessageHeader;