LibreChat/client/src/components/Messages/MessageHeader.jsx

import React, { useState } from 'react';
import { useRecoilValue } from 'recoil';
import EndpointOptionsDialog from '../Endpoints/EndpointOptionsDialog';
import { Button } from '../ui/Button.tsx';

import store from '~/store';

const clipPromptPrefix = str => {
  if (typeof str !== 'string') {
    return null;
  } else if (str.length > 10) {
    return str.slice(0, 10) + '...';
  } else {
    return 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 {
      let _title = `${endpoint}`;

      if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
        const { chatGptLabel, model } = conversation;
        if (model) _title += `: ${model}`;
        if (chatGptLabel) _title += ` as ${chatGptLabel}`;
      } else if (endpoint === 'bingAI') {
        const { jailbreak, toneStyle } = conversation;
        if (toneStyle) _title += `: ${toneStyle}`;
        if (jailbreak) _title += ` as Sydney`;
      } else if (endpoint === 'chatGPTBrowser') {
        const { model } = conversation;
        if (model) _title += `: ${model}`;
      } else if (endpoint === null) {
        null;
      } else {
        null;
      }
      return _title;
    }
  };

  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}
      >
        <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
        open={saveAsDialogShow}
        onOpenChange={setSaveAsDialogShow}
        preset={conversation}
      />
    </>
  );
};

export default MessageHeader;