From f56e29b82911fc3177dcc4a597592eba7fc6a4ab Mon Sep 17 00:00:00 2001
From: Webifi <john@webifi.com>
Date: Mon, 24 Jul 2023 15:53:04 -0500
Subject: [PATCH] Show shorter model name

---
 src/lib/Chat.svelte        | 3 ++-
 src/lib/EditMessage.svelte | 3 ++-
 src/lib/Models.svelte      | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index ebe6874..027173c 100644
--- a/src/lib/Chat.svelte
+++ b/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}
diff --git a/src/lib/EditMessage.svelte b/src/lib/EditMessage.svelte
index 39c527e..05565d6 100644
--- a/src/lib/EditMessage.svelte
+++ b/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}
diff --git a/src/lib/Models.svelte b/src/lib/Models.svelte
index 1324e22..b879b9e 100644
--- a/src/lib/Models.svelte
+++ b/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)