File size: 3,329 Bytes
9705b6c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import type { TPreset } from 'librechat-data-provider';
import { Plugin } from '~/components/svg';
import EndpointOptionsDialog from '../Endpoints/EndpointOptionsDialog';
import { cn, alternateName } from '~/utils/';
import { useLocalize } from '~/hooks';
import store from '~/store';
const MessageHeader = ({ isSearchView = false }) => {
const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
const conversation = useRecoilValue(store.conversation);
const searchQuery = useRecoilValue(store.searchQuery);
const localize = useLocalize();
if (!conversation) {
return null;
}
const { endpoint, model } = conversation;
if (!endpoint) {
return null;
}
const isNotClickable = endpoint === 'chatGPTBrowser';
const plugins = (
<>
<Plugin /> <span className="px-1">•</span>
{/* <span className="py-0.25 ml-1 rounded bg-blue-200 px-1 text-[10px] font-semibold uppercase text-[#4559A4]">
beta
</span>
<span className="px-1">•</span> */}
{localize('com_ui_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 (
<>
<div
className={cn(
'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 hover:bg-opacity-30 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:bg-opacity-100',
isNotClickable ? '' : 'cursor-pointer ',
)}
onClick={() => (isNotClickable ? null : setSaveAsDialogShow(true))}
>
<div className="flex flex-1 flex-grow items-center justify-center gap-1 p-1 text-gray-600 dark:text-gray-200 sm:p-0">
{getConversationTitle()}
</div>
</div>
<EndpointOptionsDialog
open={saveAsDialogShow}
onOpenChange={setSaveAsDialogShow}
preset={conversation as TPreset}
/>
</>
);
};
export default MessageHeader;
|