Show shorter model name

src/lib/Chat.svelte

@@ -40,6 +40,7 @@
   import { openModal } from 'svelte-modals'
   import PromptInput from './PromptInput.svelte'
   import { ChatRequest } from './ChatRequest.svelte'
+  import { getModelDetail } from './Models.svelte'
 
   export let params = { chatId: '' }
   const chatId: number = parseInt(params.chatId)
@@ -423,7 +424,7 @@
   <div class="content has-text-centered running-total-container">
     {#each Object.entries(chat.usage || {}) as [model, usage]}
     <p class="is-size-7 running-totals">
-      <em>{model}</em> total <span class="has-text-weight-bold">{usage.total_tokens}</span>
+      <em>{getModelDetail(model || '').label || model}</em> total <span class="has-text-weight-bold">{usage.total_tokens}</span>
       tokens ~= <span class="has-text-weight-bold">${getPrice(usage, model).toFixed(6)}</span>
     </p>
     {/each}

src/lib/EditMessage.svelte

@@ -11,6 +11,7 @@
   import { openModal } from 'svelte-modals'
   import PromptConfirm from './PromptConfirm.svelte'
   import { getImage } from './ImageStore.svelte'
+  import { getModelDetail } from './Models.svelte'
 
   export let message:Message
   export let chatId:number
@@ -245,7 +246,7 @@
       <p class="is-size-7 message-note">System Prompt</p>
     {:else if message.usage}
       <p class="is-size-7 message-note">
-        <em>{message.model || defaultModel}</em> using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
+        <em>{getModelDetail(message.model || '').label || message.model || defaultModel}</em> using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
         tokens ~= <span class="has-text-weight-bold">${getPrice(message.usage, message.model || defaultModel).toFixed(6)}</span>
       </p>
     {/if}

src/lib/Models.svelte

@@ -252,7 +252,8 @@ export async function getModelOptions (): Promise<SelectOption[]> {
 
   const modelOptions:SelectOption[] = Object.keys(supportedModels).reduce((a, m) => {
         let disabled
-        switch (getModelDetail(m).type) {
+        const modelDetail = getModelDetail(m)
+        switch (modelDetail.type) {
           case 'Petals':
             disabled = !gSettings.enablePetals
             break
@@ -262,7 +263,7 @@ export async function getModelOptions (): Promise<SelectOption[]> {
         }
         const o:SelectOption = {
           value: m,
-          text: m,
+          text: modelDetail.label || m,
           disabled
         }
         a.push(o)