Add optional docs link to config field messages (#23569)

* add optional docs link to config field messages

* docs tweaks

* add field messages for model dimensions

web/src/components/config-form/ConfigFieldMessage.tsx

@@ -1,6 +1,13 @@
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { LuInfo, LuTriangleAlert, LuCircleAlert } from "react-icons/lu";
+import {
+  LuInfo,
+  LuTriangleAlert,
+  LuCircleAlert,
+  LuExternalLink,
+} from "react-icons/lu";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 import type { MessageSeverity } from "./section-configs/types";
 
 const severityVariantMap: Record<
@@ -28,13 +35,18 @@ function SeverityIcon({ severity }: { severity: string }) {
 type ConfigFieldMessageProps = {
   messageKey: string;
   severity: string;
+  values?: Record<string, unknown>;
+  docLink?: string;
 };
 
 export function ConfigFieldMessage({
   messageKey,
   severity,
+  values,
+  docLink,
 }: ConfigFieldMessageProps) {
-  const { t } = useTranslation("views/settings");
+  const { t } = useTranslation(["views/settings", "common"]);
+  const { getLocaleDocUrl } = useDocDomain();
 
   return (
     <Alert
@@ -42,7 +54,22 @@ export function ConfigFieldMessage({
       className="flex items-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-2"
     >
       <SeverityIcon severity={severity} />
-      <AlertDescription>{t(messageKey)}</AlertDescription>
+      <AlertDescription>
+        <div className="flex flex-col gap-1">
+          <span>{t(messageKey, values)}</span>
+          {docLink && (
+            <Link
+              to={getLocaleDocUrl(docLink)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center underline"
+            >
+              {t("readTheDocumentation", { ns: "common" })}
+              <LuExternalLink className="ml-2 inline-flex size-3" />
+            </Link>
+          )}
+        </div>
+      </AlertDescription>
     </Alert>
   );
 }