From e44318c605b8a78f113922b7c0ac7973db54ea89 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 3 Apr 2025 14:32:20 -0700
Subject: [PATCH] refactor to have 1 folder for llm api calls

---
 .../src/components/chat_ui.tsx                | 44 +------------------
 .../chat_ui/llm_calls/chat_completion.tsx     | 44 +++++++++++++++++++
 2 files changed, 46 insertions(+), 42 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/chat_ui/llm_calls/chat_completion.tsx

diff --git a/ui/litellm-dashboard/src/components/chat_ui.tsx b/ui/litellm-dashboard/src/components/chat_ui.tsx
index c505a954b8e..1491a57b49e 100644
--- a/ui/litellm-dashboard/src/components/chat_ui.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui.tsx
@@ -24,8 +24,7 @@ import {
 
 import { message, Select } from "antd";
 import { modelAvailableCall } from "./networking";
-import openai from "openai";
-import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
+import { makeOpenAIChatCompletionRequest } from "./chat_ui/llm_calls/chat_completion";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { Typography } from "antd";
 import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -38,45 +37,6 @@ interface ChatUIProps {
   disabledPersonalKeyCreation: boolean;
 }
 
-async function generateModelResponse(
-  chatHistory: { role: string; content: string }[],
-  updateUI: (chunk: string, model: string) => void,
-  selectedModel: string,
-  accessToken: string
-) {
-  // base url should be the current base_url
-  const isLocal = process.env.NODE_ENV === "development";
-  if (isLocal !== true) {
-    console.log = function () {};
-  }
-  console.log("isLocal:", isLocal);
-  const proxyBaseUrl = isLocal
-    ? "http://localhost:4000"
-    : window.location.origin;
-  const client = new openai.OpenAI({
-    apiKey: accessToken, // Replace with your OpenAI API key
-    baseURL: proxyBaseUrl, // Replace with your OpenAI API base URL
-    dangerouslyAllowBrowser: true, // using a temporary litellm proxy key
-  });
-
-  try {
-    const response = await client.chat.completions.create({
-      model: selectedModel,
-      stream: true,
-      messages: chatHistory as ChatCompletionMessageParam[],
-    });
-
-    for await (const chunk of response) {
-      console.log(chunk);
-      if (chunk.choices[0].delta.content) {
-        updateUI(chunk.choices[0].delta.content, chunk.model);
-      }
-    }
-  } catch (error) {
-    message.error(`Error occurred while generating model response. Please try again. Error: ${error}`, 20);
-  }
-}
-
 const ChatUI: React.FC<ChatUIProps> = ({
   accessToken,
   token,
@@ -208,7 +168,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
 
     try {
       if (selectedModel) {
-        await generateModelResponse(
+        await makeOpenAIChatCompletionRequest(
           apiChatHistory,
           (chunk, model) => updateUI("assistant", chunk, model),
           selectedModel,
diff --git a/ui/litellm-dashboard/src/components/chat_ui/llm_calls/chat_completion.tsx b/ui/litellm-dashboard/src/components/chat_ui/llm_calls/chat_completion.tsx
new file mode 100644
index 00000000000..25cc6412438
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat_ui/llm_calls/chat_completion.tsx
@@ -0,0 +1,44 @@
+
+import openai from "openai";
+import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
+import { message } from "antd";
+
+export async function makeOpenAIChatCompletionRequest(
+    chatHistory: { role: string; content: string }[],
+    updateUI: (chunk: string, model: string) => void,
+    selectedModel: string,
+    accessToken: string
+  ) {
+    // base url should be the current base_url
+    const isLocal = process.env.NODE_ENV === "development";
+    if (isLocal !== true) {
+      console.log = function () {};
+    }
+    console.log("isLocal:", isLocal);
+    const proxyBaseUrl = isLocal
+      ? "http://localhost:4000"
+      : window.location.origin;
+    const client = new openai.OpenAI({
+      apiKey: accessToken, // Replace with your OpenAI API key
+      baseURL: proxyBaseUrl, // Replace with your OpenAI API base URL
+      dangerouslyAllowBrowser: true, // using a temporary litellm proxy key
+    });
+  
+    try {
+      const response = await client.chat.completions.create({
+        model: selectedModel,
+        stream: true,
+        messages: chatHistory as ChatCompletionMessageParam[],
+      });
+  
+      for await (const chunk of response) {
+        console.log(chunk);
+        if (chunk.choices[0].delta.content) {
+          updateUI(chunk.choices[0].delta.content, chunk.model);
+        }
+      }
+    } catch (error) {
+      message.error(`Error occurred while generating model response. Please try again. Error: ${error}`, 20);
+    }
+  }
+  
\ No newline at end of file