From f2727275b2171ec851ff8ab035a25aa4004c4496 Mon Sep 17 00:00:00 2001
From: Nathan Sarrazin <sarrazin.nathan@gmail.com>
Date: Tue, 21 Jan 2025 12:29:57 +0100
Subject: [PATCH] feat: add indicator for reasoning models in /models page

---
 src/routes/+layout.server.ts   |  1 +
 src/routes/models/+page.svelte | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 6115940d3a9..30c0e7a03db 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -213,6 +213,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, fetch }) => {
 			datasetUrl: model.datasetUrl,
 			displayName: model.displayName,
 			description: model.description,
+			reasoning: !!model.reasoning,
 			logoUrl: model.logoUrl,
 			promptExamples: model.promptExamples,
 			parameters: model.parameters,
diff --git a/src/routes/models/+page.svelte b/src/routes/models/+page.svelte
index 0aa77a5d820..9d59ac66a79 100644
--- a/src/routes/models/+page.svelte
+++ b/src/routes/models/+page.svelte
@@ -88,6 +88,22 @@
 								<CarbonImage class="text-xxs text-blue-700 dark:text-blue-500" />
 							</span>
 						{/if}
+						{#if model.reasoning}
+							<span
+								title="This model supports reasoning."
+								class="ml-auto grid size-[21px] place-items-center rounded-lg border border-purple-300 dark:border-purple-700"
+								aria-label="Model supports reasoning"
+								role="img"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32">
+									<path
+										class="stroke-purple-700"
+										style="stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50;"
+										d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
+									/>
+								</svg>
+							</span>
+						{/if}
 						{#if model.id === $settings.activeModel}
 							<span
 								class="rounded-full border border-blue-500 bg-blue-500/5 px-2 py-0.5 text-xs text-blue-500 dark:border-blue-500 dark:bg-blue-500/10"