From 5e895cb3d51e8a47b6845a7595e165363da6703e Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Tue, 15 Oct 2024 23:16:56 -0600
Subject: [PATCH] feat: add litellm integrations UI (#5028)

---
 app/src/components/project/IntegrationIcons.tsx | 17 +++++++++++++++++
 app/src/components/project/Integrations.tsx     |  9 +++++++++
 2 files changed, 26 insertions(+)

diff --git a/app/src/components/project/IntegrationIcons.tsx b/app/src/components/project/IntegrationIcons.tsx
index e9f95adf6b..61ca620e40 100644
--- a/app/src/components/project/IntegrationIcons.tsx
+++ b/app/src/components/project/IntegrationIcons.tsx
@@ -465,3 +465,20 @@ export const BedrockSVG = () => (
     </g>
   </svg>
 );
+
+export const IntegrationSVG = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.2593 6.61905C19.0126 7.16696 18.7815 8.04669 18.5292 9.00706C18.4235 9.40941 18.3141 9.82591 18.1982 10.2381H23.1482C23.7004 10.2381 24.1482 10.6858 24.1482 11.2381V17.0307C24.5195 16.902 24.8948 16.7804 25.2572 16.663C26.122 16.383 26.9141 16.1264 27.4074 15.8525C29.0175 14.9587 30.6667 17.4728 30.6667 19.4716C30.6667 21.4703 29.0371 23.9954 27.4074 23.0906C26.914 22.8166 26.1217 22.56 25.2569 22.2799L25.2568 22.2799C24.8945 22.1625 24.5194 22.041 24.1482 21.9124V27.3333C24.1482 27.8856 23.7004 28.3333 23.1482 28.3333H8.85186C8.29957 28.3333 7.85186 27.8856 7.85186 27.3333V21.9159C7.48052 22.0446 7.10529 22.1662 6.74283 22.2836C5.8781 22.5636 5.086 22.8202 4.59263 23.0941C2.98259 23.9879 1.33337 21.4738 1.33337 19.475C1.33337 17.4763 2.963 14.9511 4.59263 15.856C5.08608 16.13 5.87835 16.3866 6.74324 16.6667C7.10558 16.7841 7.48066 16.9056 7.85186 17.0342V11.2381C7.85186 10.6858 8.29957 10.2381 8.85186 10.2381H13.8018C13.686 9.82578 13.5765 9.40914 13.4708 9.00667L13.4708 9.00661L13.4708 9.00659L13.4707 9.00657L13.4707 9.00656C13.2185 8.04639 12.9875 7.16687 12.7408 6.61905C11.9359 4.83128 14.2 3 16.0001 3C17.8001 3 20.0742 4.80952 19.2593 6.61905ZM12.2564 21.0247C11.9603 21.3049 11.5203 21.259 11.2731 20.9233C11.0258 20.5877 11.0663 20.0881 11.3625 19.8087L15.5529 15.8503C15.5746 15.8294 15.5991 15.8157 15.6237 15.8019C15.6363 15.7949 15.6489 15.7879 15.6611 15.7799C15.6701 15.7739 15.6788 15.7676 15.6874 15.7614C15.7062 15.7477 15.7248 15.7342 15.7464 15.7245C15.8281 15.688 15.9133 15.6667 15.9999 15.6667C16.0865 15.6667 16.1717 15.688 16.2534 15.7245C16.275 15.7342 16.2936 15.7478 16.3124 15.7614C16.321 15.7676 16.3296 15.7739 16.3386 15.7799C16.3509 15.7879 16.3635 15.7949 16.376 15.8019C16.4006 15.8157 16.4251 15.8294 16.4469 15.8503L20.6373 19.8087C20.9341 20.0881 20.9739 20.5877 20.7267 20.9233C20.4801 21.259 20.0402 21.3049 19.7433 21.0247L16.6983 18.1485V28.3333H15.9999H15.1852L15.3015 18.1485L12.2564 21.0247Z"
+      fill="var(--ac-global-text-color-900)"
+    />
+  </svg>
+);
diff --git a/app/src/components/project/Integrations.tsx b/app/src/components/project/Integrations.tsx
index f9e8cde1a1..320499ae1e 100644
--- a/app/src/components/project/Integrations.tsx
+++ b/app/src/components/project/Integrations.tsx
@@ -8,6 +8,7 @@ import {
   DSPYSVG,
   GroqSVG,
   HaystackSVG,
+  IntegrationSVG,
   LangChainSVG,
   LlamaIndexSVG,
   MistralAISVG,
@@ -183,6 +184,14 @@ const PYTHON_INTEGRATIONS: IntegrationLinkProps[] = [
       "https://github.com/Arize-ai/openinference/tree/main/python/instrumentation/openinference-instrumentation-crewai",
     icon: <CrewAISVG />,
   },
+  {
+    name: "LiteLLM",
+    docsHref:
+      "https://docs.arize.com/phoenix/tracing/integrations-tracing/litellm",
+    githubHref:
+      "https://github.com/Arize-ai/openinference/tree/main/python/instrumentation/openinference-instrumentation-litellm",
+    icon: <IntegrationSVG />,
+  },
 ];
 
 const integrationsListCSS = css`