From 32cb5f3ceb1920891e038f9c2f860e5bc2c5fb2c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 25 Mar 2024 13:46:06 -0700
Subject: [PATCH] feat: external model info

---
 src/lib/apis/litellm/index.ts                 |  2 +-
 .../chat/ModelSelector/Selector.svelte        | 42 ++++++++++---------
 src/lib/utils/index.ts                        |  4 ++
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/lib/apis/litellm/index.ts b/src/lib/apis/litellm/index.ts
index 302e9c4a3..643146b73 100644
--- a/src/lib/apis/litellm/index.ts
+++ b/src/lib/apis/litellm/index.ts
@@ -33,7 +33,7 @@ export const getLiteLLMModels = async (token: string = '') => {
 					id: model.id,
 					name: model.name ?? model.id,
 					external: true,
-					source: 'litellm'
+					source: 'LiteLLM'
 				}))
 				.sort((a, b) => {
 					return a.name.localeCompare(b.name);
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 870fab2c8..a5e8b12d5 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -12,7 +12,7 @@
 
 	import { user, MODEL_DOWNLOAD_POOL, models } from '$lib/stores';
 	import { toast } from 'svelte-sonner';
-	import { getModels, splitStream } from '$lib/utils';
+	import { capitalizeFirstLetter, getModels, splitStream } from '$lib/utils';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	const i18n = getContext('i18n');
@@ -225,25 +225,27 @@
 							</div>
 
 							{#if item.info.external}
-								<div class=" mr-2">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
-											clip-rule="evenodd"
-										/>
-										<path
-											fill-rule="evenodd"
-											d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
-								</div>
+								<Tooltip content={item.info?.source ?? 'External'}>
+									<div class=" mr-2">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
+												clip-rule="evenodd"
+											/>
+											<path
+												fill-rule="evenodd"
+												d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</div>
+								</Tooltip>
 							{/if}
 						</div>
 
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index ad3e38932..90d5d3c38 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -31,6 +31,10 @@ export const getModels = async (token: string) => {
 // Helper functions
 //////////////////////////
 
+export const capitalizeFirstLetter = (string) => {
+	return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
 export const splitStream = (splitOn) => {
 	let buffer = '';
 	return new TransformStream({