feat: open option dialog when click messageHeader

This commit is contained in:
Wentao Lyu 2023-04-04 01:23:37 +08:00
parent d2579b44d1
commit 089d99e679

View file

@ -17,30 +17,10 @@ const clipPromptPrefix = str => {
const MessageHeader = ({ isSearchView = false }) => {
const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
const [extended, setExtended] = useState(false);
const conversation = useRecoilValue(store.conversation);
const searchQuery = useRecoilValue(store.searchQuery);
const { endpoint } = conversation;
let options = [];
if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
options.push(['model', conversation?.model]);
options.push(['chatGptLabel', conversation?.chatGptLabel]);
options.push(['promptPrefix', clipPromptPrefix(conversation?.promptPrefix)]);
options.push(['temperature', conversation?.temperature]);
options.push(['top_p', conversation?.top_p]);
options.push(['presence_penalty', conversation?.presence_penalty]);
} else if (endpoint === 'bingAI') {
options.push(['jailbreak', !!conversation?.jailbreak]);
options.push(['toneStyle', conversation?.toneStyle]);
} else if (endpoint === 'chatGPTBrowser') {
options.push(['model', conversation?.model]);
}
const triggerExtend = () => {
setExtended(prevState => !prevState);
};
const getConversationTitle = () => {
if (isSearchView) return `Search: ${searchQuery}`;
else {
@ -69,29 +49,10 @@ const MessageHeader = ({ isSearchView = false }) => {
return (
<>
<div
className={
'dark:text-gray-450 w-full gap-1 border-b border-black/10 bg-gray-50 text-sm text-gray-500 transition-all hover:bg-gray-100 dark:border-gray-900/50 dark:bg-gray-700 dark:hover:bg-gray-600' +
(extended ? ' max-h-[500px]' : ' max-h-[45px]')
}
onClick={triggerExtend}
className="dark:text-gray-450 w-full cursor-pointer gap-1 border-b border-black/10 bg-gray-50 text-sm text-gray-500 transition-all hover:bg-gray-100 dark:border-gray-900/50 dark:bg-gray-700 dark:hover:bg-gray-600"
onClick={() => setSaveAsDialogShow(true)}
>
<div className="d-block flex w-full items-center justify-center p-3">{getConversationTitle()}</div>
{extended ? (
<div className="d-block relative w-full border-t border-black/10 p-3 dark:border-gray-900/50 ">
<div className="relative m-auto flex flex-wrap items-center justify-start md:max-w-2xl lg:max-w-2xl xl:max-w-3xl">
{options.map(([key, value]) => (
<div
key={key}
className="w-1/2 xl:w-1/3"
>
<strong>{key}:</strong> {value || 'null'}
</div>
))}
</div>
<Button onClick={() => setSaveAsDialogShow(true)}>View</Button>
</div>
) : null}
</div>
<EndpointOptionsDialog