WIP, custom API Modes

src/components/ConversationCard/index.jsx

@@ -11,6 +11,7 @@ import {
   isFirefox,
   isMobile,
   isSafari,
+  isUsingModelName,
   modelNameToDesc,
 } from '../../utils'
 import {
@@ -25,7 +26,7 @@ import FileSaver from 'file-saver'
 import { render } from 'preact'
 import FloatingToolbar from '../FloatingToolbar'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
-import { bingWebModelKeys, getUserConfig, Models } from '../../config/index.mjs'
+import { getUserConfig, isUsingBingWebModel, Models } from '../../config/index.mjs'
 import { useTranslation } from 'react-i18next'
 import DeleteButton from '../DeleteButton'
 import { useConfig } from '../../hooks/use-config.mjs'
@@ -61,8 +62,7 @@ function ConversationCard(props) {
   const windowSize = useClampWindowSize([750, 1500], [250, 1100])
   const bodyRef = useRef(null)
   const [completeDraggable, setCompleteDraggable] = useState(false)
-  // `.some` for multi mode models. e.g. bingFree4-balanced
-  const useForegroundFetch = bingWebModelKeys.some((n) => session.modelName.includes(n))
+  const useForegroundFetch = isUsingBingWebModel(session)
   const [apiModes, setApiModes] = useState([])
 
   /**
@@ -247,7 +247,7 @@ function ConversationCard(props) {
         }
         try {
           const bingToken = (await getUserConfig()).bingAccessToken
-          if (session.modelName.includes('bingFreeSydney'))
+          if (isUsingModelName('bingFreeSydney', session))
             await generateAnswersWithBingWebApi(
               fakePort,
               session.question,
@@ -390,7 +390,11 @@ function ConversationCard(props) {
                 ...session,
                 modelName,
                 apiMode,
-                aiName: modelNameToDesc(apiMode ? apiModeToModelName(apiMode) : modelName, t),
+                aiName: modelNameToDesc(
+                  apiMode ? apiModeToModelName(apiMode) : modelName,
+                  t,
+                  config.customModelName,
+                ),
               }
               if (config.autoRegenAfterSwitchModel && conversationItemData.length > 0)
                 getRetryFn(newSession)()
@@ -399,7 +403,7 @@ function ConversationCard(props) {
           >
             {apiModes.map((apiMode, index) => {
               const modelName = apiModeToModelName(apiMode)
-              const desc = modelNameToDesc(modelName, t)
+              const desc = modelNameToDesc(modelName, t, config.customModelName)
               if (desc) {
                 return (
                   <option value={index} key={index} selected={isApiModeSelected(apiMode, session)}>
@@ -551,7 +555,6 @@ function ConversationCard(props) {
             key={idx}
             type={data.type}
             descName={data.type === 'answer' && session.aiName}
-            modelName={data.type === 'answer' && session.modelName}
             onRetry={idx === conversationItemData.length - 1 ? retryFn : null}
           />
         ))}

src/components/ConversationItem/index.jsx

@@ -5,30 +5,18 @@ import ReadButton from '../ReadButton'
 import PropTypes from 'prop-types'
 import MarkdownRender from '../MarkdownRender/markdown.jsx'
 import { useTranslation } from 'react-i18next'
-import { isUsingCustomModel } from '../../config/index.mjs'
-import { useConfig } from '../../hooks/use-config.mjs'
 
-function AnswerTitle({ descName, modelName }) {
+function AnswerTitle({ descName }) {
   const { t } = useTranslation()
-  const config = useConfig()
 
-  return (
-    <p style="white-space: nowrap;">
-      {descName && modelName
-        ? `${t(descName)}${
-            isUsingCustomModel({ modelName }) ? ' (' + config.customModelName + ')' : ''
-          }:`
-        : t('Loading...')}
-    </p>
-  )
+  return <p style="white-space: nowrap;">{descName ? `${descName}:` : t('Loading...')}</p>
 }
 
 AnswerTitle.propTypes = {
   descName: PropTypes.string,
-  modelName: PropTypes.string,
 }
 
-export function ConversationItem({ type, content, descName, modelName, onRetry }) {
+export function ConversationItem({ type, content, descName, onRetry }) {
   const { t } = useTranslation()
   const [collapsed, setCollapsed] = useState(false)
 
@@ -67,17 +55,17 @@ export function ConversationItem({ type, content, descName, modelName, onRetry }
       return (
         <div className={'chatgptbox-' + type} dir="auto">
           <div className="gpt-header">
-            <AnswerTitle descName={descName} modelName={modelName} />
+            <AnswerTitle descName={descName} />
             <div className="gpt-util-group">
               {onRetry && (
                 <span title={t('Retry')} className="gpt-util-icon" onClick={onRetry}>
                   <SyncIcon size={14} />
                 </span>
               )}
-              {modelName && (
+              {descName && (
                 <CopyButton contentFn={() => content.replace(/\n<hr\/>$/, '')} size={14} />
               )}
-              {modelName && <ReadButton contentFn={() => content} size={14} />}
+              {descName && <ReadButton contentFn={() => content} size={14} />}
               {!collapsed ? (
                 <span
                   title={t('Collapse')}
@@ -141,7 +129,6 @@ ConversationItem.propTypes = {
   type: PropTypes.oneOf(['question', 'answer', 'error']).isRequired,
   content: PropTypes.string.isRequired,
   descName: PropTypes.string,
-  modelName: PropTypes.string,
   onRetry: PropTypes.func,
 }