[8.x] Wrap inference service in avatar for dark mode support (#212092) (

#212165)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Wrap inference service in avatar for dark mode support
(#212092)](#212092)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Michael
DeFazio","email":"michael.defazio@elastic.co"},"sourceCommit":{"committedDate":"2025-02-21T22:25:54Z","message":"Wrap
inference service in avatar for dark mode support (#212092)\n\n##
Summary\n\nWraps the logos in our service provider list in an avatar so
they are\nvisible in dark mode.\n\n![CleanShot 2025-02-21 at 09
34\n11@2x](https://github.com/user-attachments/assets/5bc83ee3-265b-4a8f-a811-cc0d8fd1cfd6)\n\nThis
does not change the selected state for a provider. These logos
will\nstill look poorly in dark mode, but this seemed like a larger
effort\n(perhaps someone can help make that more seamless).\n\nWe could
also just remove the logo when selected. The logos are\nbeneficial when
finding a preferred service, but possibly less so once\nI've chosen
one.\n\n![CleanShot 2025-02-21 at 09
34\n19@2x](https://github.com/user-attachments/assets/00ee3cac-3e6d-4b77-ae00-a88dda62506e)\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Samiul Monir
<samiul.monir@elastic.co>","sha":"1a9315c07d1e6cad9a1125ac57d0ab001f323f5d","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","ci:project-deploy-elasticsearch","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"Wrap
inference service in avatar for dark mode
support","number":212092,"url":"https://github.com/elastic/kibana/pull/212092","mergeCommit":{"message":"Wrap
inference service in avatar for dark mode support (#212092)\n\n##
Summary\n\nWraps the logos in our service provider list in an avatar so
they are\nvisible in dark mode.\n\n![CleanShot 2025-02-21 at 09
34\n11@2x](https://github.com/user-attachments/assets/5bc83ee3-265b-4a8f-a811-cc0d8fd1cfd6)\n\nThis
does not change the selected state for a provider. These logos
will\nstill look poorly in dark mode, but this seemed like a larger
effort\n(perhaps someone can help make that more seamless).\n\nWe could
also just remove the logo when selected. The logos are\nbeneficial when
finding a preferred service, but possibly less so once\nI've chosen
one.\n\n![CleanShot 2025-02-21 at 09
34\n19@2x](https://github.com/user-attachments/assets/00ee3cac-3e6d-4b77-ae00-a88dda62506e)\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Samiul Monir
<samiul.monir@elastic.co>","sha":"1a9315c07d1e6cad9a1125ac57d0ab001f323f5d"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212092","number":212092,"mergeCommit":{"message":"Wrap
inference service in avatar for dark mode support (#212092)\n\n##
Summary\n\nWraps the logos in our service provider list in an avatar so
they are\nvisible in dark mode.\n\n![CleanShot 2025-02-21 at 09
34\n11@2x](https://github.com/user-attachments/assets/5bc83ee3-265b-4a8f-a811-cc0d8fd1cfd6)\n\nThis
does not change the selected state for a provider. These logos
will\nstill look poorly in dark mode, but this seemed like a larger
effort\n(perhaps someone can help make that more seamless).\n\nWe could
also just remove the logo when selected. The logos are\nbeneficial when
finding a preferred service, but possibly less so once\nI've chosen
one.\n\n![CleanShot 2025-02-21 at 09
34\n19@2x](https://github.com/user-attachments/assets/00ee3cac-3e6d-4b77-ae00-a88dda62506e)\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Samiul Monir
<samiul.monir@elastic.co>","sha":"1a9315c07d1e6cad9a1125ac57d0ab001f323f5d"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Michael DeFazio <michael.defazio@elastic.co>

x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx

@@ -97,14 +97,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
     }
   }, []);
 
-  const providerIcon = useMemo(
-    () =>
-      Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
-        ? SERVICE_PROVIDERS[config?.provider as ServiceProviderKeys].icon
-        : undefined,
-    [config?.provider]
-  );
-
   const providerName = useMemo(
     () =>
       Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
@@ -252,7 +244,7 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
         isDisabled={isEdit}
         isInvalid={isInvalid}
         fullWidth
-        icon={!config?.provider ? { type: 'sparkles', side: 'left' } : providerIcon}
+        icon={!config?.provider ? { type: 'sparkles', side: 'left' } : undefined}
       >
         <EuiFieldText
           onClick={toggleProviderPopover}
@@ -278,7 +270,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
       isEdit,
       onClearProvider,
       config?.provider,
-      providerIcon,
       toggleProviderPopover,
       handleProviderKeyboardOpen,
       providerName,

x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHighlight, EuiIcon } from '@elastic/eui';
+import { EuiAvatar, EuiHighlight } from '@elastic/eui';
 import React from 'react';
 
 import { ServiceProviderKeys } from '../../../constants';
@@ -112,7 +112,14 @@ export const ServiceProviderIcon: React.FC<ServiceProviderProps> = ({ providerKe
   const provider = SERVICE_PROVIDERS[providerKey];
 
   return provider ? (
-    <EuiIcon data-test-subj={`icon-service-provider-${providerKey}`} type={provider.icon} />
+    <EuiAvatar
+      name={providerKey}
+      data-test-subj={`icon-service-provider-${providerKey}`}
+      iconType={provider.icon}
+      color="#fff"
+      size="s"
+      type="space"
+    />
   ) : null;
 };