fix(web): show the container host note on all self-hosted providers (#13858) to release v4.5 (#13867)

Co-authored-by: Jamison Lahman <jamison@lahman.dev>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: 3 people

web/src/sections/modals/languageModels/CustomModal.tsx

@@ -18,6 +18,7 @@ import {
   DisplayNameField,
   ModelAccessField,
   ModalWrapper,
+  useApiBaseSubDescription,
 } from "@/sections/modals/languageModels/shared";
 import { useCustomProviderNames } from "@/lib/languageModels/hooks";
 import InputTypeInField from "@/refresh-components/form/InputTypeInField";
@@ -245,6 +246,7 @@ export default function CustomModal({
 }: LLMProviderFormProps) {
   const isOnboarding = variant === "onboarding";
   const { mutate } = useSWRConfig();
+  const apiBaseSubDescription = useApiBaseSubDescription();
 
   const onClose = () => onOpenChange?.(false);
 
@@ -393,7 +395,7 @@ export default function CustomModal({
         subDescription="Paste your API key if your model provider requires authentication."
       />
 
-      <APIBaseField optional />
+      <APIBaseField optional subDescription={apiBaseSubDescription} />
 
       <InputPadder>
         <InputVertical

web/src/sections/modals/languageModels/LMStudioModal.tsx

@@ -3,7 +3,6 @@
 import { useSWRConfig } from "swr";
 import { useFormikContext } from "formik";
 import { InputDivider, toast } from "@opal/layouts";
-import { markdown } from "@opal/utils";
 import {
   LLMProviderFormProps,
   LLMProviderName,
@@ -20,11 +19,11 @@ import { LLMProviderConfiguredSource } from "@/lib/analytics/utils";
 import {
   APIKeyField,
   APIBaseField,
-  CONTAINERIZED_HOST_NOTE,
   ModelSelectionField,
   DisplayNameField,
   ModelAccessField,
   ModalWrapper,
+  useApiBaseSubDescription,
 } from "@/sections/modals/languageModels/shared";
 import { fetchModels } from "@/lib/languageModels/svc";
 import { refreshLlmProviderCaches } from "@/lib/languageModels/cache";
@@ -47,7 +46,9 @@ function LMStudioModalInternals({
   isOnboarding,
 }: LMStudioModalInternalsProps) {
   const formikProps = useFormikContext<LMStudioModalValues>();
-  const settings = useSettings();
+  const apiBaseSubDescription = useApiBaseSubDescription(
+    "The base URL for your LM Studio server."
+  );
 
   const isFetchDisabled = !formikProps.values.api_base;
 
@@ -75,13 +76,7 @@ function LMStudioModalInternals({
   return (
     <>
       <APIBaseField
-        subDescription={
-          settings.is_containerized
-            ? markdown(
-                `The base URL for your LM Studio server. ${CONTAINERIZED_HOST_NOTE}`
-              )
-            : "The base URL for your LM Studio server."
-        }
+        subDescription={apiBaseSubDescription}
         placeholder="Your LM Studio API base URL"
       />
 

web/src/sections/modals/languageModels/OllamaModal.tsx

@@ -4,7 +4,6 @@ import { Dispatch, SetStateAction, useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import { useFormikContext } from "formik";
 import { InputDivider, InputVertical, toast } from "@opal/layouts";
-import { markdown } from "@opal/utils";
 import PasswordInputTypeInField from "@/refresh-components/form/PasswordInputTypeInField";
 import {
   LLMProviderFormProps,
@@ -20,11 +19,11 @@ import {
 import { submitProvider } from "@/sections/modals/languageModels/svc";
 import { LLMProviderConfiguredSource } from "@/lib/analytics/utils";
 import {
-  CONTAINERIZED_HOST_NOTE,
   ModelSelectionField,
   DisplayNameField,
   ModelAccessField,
   ModalWrapper,
+  useApiBaseSubDescription,
 } from "@/sections/modals/languageModels/shared";
 import { fetchOllamaModels } from "@/lib/languageModels/svc";
 import { Card, Tabs } from "@opal/components";
@@ -56,7 +55,9 @@ function OllamaModalInternals({
   setTab,
 }: OllamaModalInternalsProps) {
   const formikProps = useFormikContext<OllamaModalValues>();
-  const settings = useSettings();
+  const apiBaseSubDescription = useApiBaseSubDescription(
+    "The base URL for your Ollama instance."
+  );
 
   const isFetchDisabled = useMemo(
     () =>
@@ -104,13 +105,7 @@ function OllamaModalInternals({
               <InputVertical
                 withLabel="api_base"
                 title="API Base URL"
-                subDescription={
-                  settings.is_containerized
-                    ? markdown(
-                        `The base URL for your Ollama instance. ${CONTAINERIZED_HOST_NOTE}`
-                      )
-                    : "The base URL for your Ollama instance."
-                }
+                subDescription={apiBaseSubDescription}
               >
                 <InputTypeInField
                   name="api_base"

web/src/sections/modals/languageModels/OpenAICompatibleModal.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { markdown } from "@opal/utils";
 import { useSWRConfig } from "swr";
 import { useFormikContext } from "formik";
 import { InputDivider, toast } from "@opal/layouts";
@@ -25,6 +24,7 @@ import {
   DisplayNameField,
   ModelAccessField,
   ModalWrapper,
+  useApiBaseSubDescription,
 } from "@/sections/modals/languageModels/shared";
 import { refreshLlmProviderCaches } from "@/lib/languageModels/cache";
 
@@ -43,6 +43,10 @@ function OpenAICompatibleModalInternals({
   isOnboarding,
 }: OpenAICompatibleModalInternalsProps) {
   const formikProps = useFormikContext<OpenAICompatibleModalValues>();
+  const apiBaseSubDescription = useApiBaseSubDescription(
+    "Paste your OpenAI-compatible endpoint URL.",
+    "[Learn More](https://docs.litellm.ai/docs/providers/openai_compatible)"
+  );
 
   const isFetchDisabled = !formikProps.values.api_base;
 
@@ -67,9 +71,7 @@ function OpenAICompatibleModalInternals({
   return (
     <>
       <APIBaseField
-        subDescription={markdown(
-          "Paste your OpenAI-compatible endpoint URL. [Learn More](https://docs.litellm.ai/docs/providers/openai_compatible)"
-        )}
+        subDescription={apiBaseSubDescription}
         placeholder="http://localhost:8000/v1"
       />
 

web/src/sections/modals/languageModels/shared.tsx

@@ -55,6 +55,7 @@ import useUsers from "@/hooks/useUsers";
 import { UserRole } from "@/lib/types";
 import { Modal } from "@opal/components";
 import { getProvider } from "@/lib/languageModels";
+import { useSettings } from "@/lib/settings/hooks";
 
 // ─── DisplayNameField ────────────────────────────────────────────────────────
 
@@ -124,7 +125,27 @@ export function APIKeyField({
  * `host.docker.internal`.
  */
 export const CONTAINERIZED_HOST_NOTE =
-  "With Onyx running in a container, `host.docker.internal` acts like `localhost` inside the container.";
+  "With Onyx running in a container, use `host.docker.internal` in place of `localhost` to reach a service on your host.";
+
+/**
+ * Builds the API Base URL `subDescription` for self-hosted and custom
+ * providers. These point at a service on the admin's own machine, which
+ * `localhost` does not reach from inside a container — so when Onyx is
+ * containerized, {@link CONTAINERIZED_HOST_NOTE} goes between `description`
+ * and `suffix`.
+ */
+export function useApiBaseSubDescription(
+  description?: string,
+  suffix?: string
+): RichStr | undefined {
+  const settings = useSettings();
+  const sentences = [
+    description,
+    settings.is_containerized ? CONTAINERIZED_HOST_NOTE : undefined,
+    suffix,
+  ].filter((sentence) => sentence !== undefined);
+  return sentences.length > 0 ? markdown(sentences.join(" ")) : undefined;
+}
 
 export interface APIBaseFieldProps {
   optional?: boolean;