feat: an easier way to use different bing styles (#264)

src/components/ConversationCard/index.jsx

@@ -10,7 +10,7 @@ import FileSaver from 'file-saver'
 import { render } from 'preact'
 import FloatingToolbar from '../FloatingToolbar'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
-import { Models } from '../../config/index.mjs'
+import { ModelMode, Models } from '../../config/index.mjs'
 import { useTranslation } from 'react-i18next'
 import DeleteButton from '../DeleteButton'
 import { useConfig } from '../../hooks/use-config.mjs'
@@ -233,13 +233,25 @@ function ConversationCard(props) {
               else setSession(newSession)
             }}
           >
-            {config.activeApiModes.map((key) => {
-              const model = Models[key]
-              return (
-                <option value={key} key={key} selected={key === session.modelName}>
-                  {t(model.desc)}
-                </option>
-              )
+            {config.activeApiModes.map((modelName) => {
+              let desc
+              if (modelName.includes('-')) {
+                const splits = modelName.split('-')
+                if (splits[0] in Models)
+                  desc = `${t(Models[splits[0]].desc)} (${t(ModelMode[splits[1]])})`
+              } else {
+                if (modelName in Models) desc = t(Models[modelName].desc)
+              }
+              if (desc)
+                return (
+                  <option
+                    value={modelName}
+                    key={modelName}
+                    selected={modelName === session.modelName}
+                  >
+                    {desc}
+                  </option>
+                )
             })}
           </select>
         </span>