From 547d4b620cf1de0a56cdf8ac209e0002a00ebd11 Mon Sep 17 00:00:00 2001
From: Seif Ghazi <seif.ghazi@shopify.com>
Date: Mon, 4 Aug 2025 23:05:28 -0400
Subject: [PATCH] Standardize model check logic in react

---
 web/app/components/RequestDetailContent.tsx | 7 ++++---
 web/app/routes/_index.tsx                   | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/app/components/RequestDetailContent.tsx b/web/app/components/RequestDetailContent.tsx
index 4e399fd..6b291c1 100644
--- a/web/app/components/RequestDetailContent.tsx
+++ b/web/app/components/RequestDetailContent.tsx
@@ -22,6 +22,7 @@ import {
 } from 'lucide-react';
 import { MessageContent } from './MessageContent';
 import { formatJSON } from '../utils/formatters';
+import { getChatCompletionsEndpoint, getProviderName } from '../utils/models';
 
 interface Request {
   id: number;
@@ -152,7 +153,7 @@ export default function RequestDetailContent({ request, onGrade }: RequestDetail
             <div className="flex items-center space-x-3">
               <span className="text-gray-500 font-medium min-w-[80px]">Endpoint:</span>
               <code className="text-blue-600 bg-blue-50 px-2 py-1 rounded font-mono text-xs border border-blue-200">
-                {request.routedModel && request.routedModel.startsWith('gpt-') ? '/v1/chat/completions' : request.endpoint}
+                {getChatCompletionsEndpoint(request.routedModel, request.endpoint)}
               </code>
             </div>
           </div>
@@ -352,14 +353,14 @@ export default function RequestDetailContent({ request, onGrade }: RequestDetail
                             {request.routedModel}
                           </code>
                           <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full border border-blue-200">
-                            {request.routedModel.startsWith('gpt-') || request.routedModel.startsWith('o') ? 'OpenAI' : 'Anthropic'}
+                            {getProviderName(request.routedModel)}
                           </span>
                         </div>
                       </div>
                       <div className="text-right">
                         <div className="text-xs text-gray-500 mb-1">Target Endpoint</div>
                         <code className="text-xs bg-white px-2 py-1 rounded font-mono border border-gray-200">
-                          {request.routedModel.startsWith('gpt-') ? '/v1/chat/completions' : '/v1/messages'}
+                          {getChatCompletionsEndpoint(request.routedModel)}
                         </code>
                       </div>
                     </div>
diff --git a/web/app/routes/_index.tsx b/web/app/routes/_index.tsx
index c1b7d1e..9908607 100644
--- a/web/app/routes/_index.tsx
+++ b/web/app/routes/_index.tsx
@@ -34,6 +34,7 @@ import {
 
 import RequestDetailContent from "../components/RequestDetailContent";
 import { ConversationThread } from "../components/ConversationThread";
+import { getChatCompletionsEndpoint } from "../utils/models";
 
 export const meta: MetaFunction = () => {
   return [
@@ -697,7 +698,7 @@ export default function Index() {
                           
                           {/* Endpoint */}
                           <div className="text-xs text-gray-600 font-mono mb-1">
-                            {request.routedModel && request.routedModel.startsWith('gpt-') ? '/v1/chat/completions' : request.endpoint}
+                            {getChatCompletionsEndpoint(request.routedModel, request.endpoint)}
                           </div>
                           
                           {/* Metrics Row */}