Add AI provider icons into model selector #1904

rSnapkoOpenOps · 2026-01-30T12:51:57Z

https://67d165c65ae89f986943666d-iyhembmirv.chromatic.com/?path=/docs/components-aichat-aimodelselector--docs

linear · 2026-01-30T12:52:00Z

OPS-3509 Update styles of model selector

Copilot

Pull request overview

This PR adds AI provider icons to the model selector component, enhancing the visual experience by displaying provider-specific icons alongside model names.

Changes:

Introduced 11 new provider icon components (OpenAI, Anthropic, Gemini, Mistral, Grok, DeepSeek, Perplexity, Cohere, Cerebras, DeepInfra, Together.ai)
Updated model selector to display provider icons alongside model names
Modified data structure from simple string arrays to objects containing both model name and provider information

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/ui-components/src/icons/*.icon.tsx	Added icon components for various AI providers
packages/ui-components/src/components/ai-chat-container/ai-provider-icon.tsx	Created provider icon mapping component that selects appropriate icon based on provider
packages/ui-components/src/components/ai-chat-container/ai-model-selector.tsx	Updated to accept and display model objects with provider information
packages/ui-components/src/stories/ai-chat/ai-model-selector.stories.tsx	Updated stories with model objects including provider information
packages/ui-components/src/components/assistant-ui/step-settings-assistant-ui-chat-container.tsx	Updated type definition to accept new model structure
packages/react-ui/src/app/features/ai/lib/ai-model-selector-hook.ts	Modified to transform model strings into objects with provider information

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-30T12:56:07Z

packages/ui-components/src/components/ai-chat-container/ai-model-selector.tsx

+                        <div className="flex items-center gap-2 flex-1">
+                          <AiProviderIcon
+                            provider={model.provider}
+                            className="text-muted-foreground"
+                          />
+                          <span>{model.name}</span>
+                        </div>
                        <Check
                          size={16}
                          className={cn(
                            'mr-2',
-                            selectedModel === model
+                            selectedModel === model.name
                              ? 'opacity-100'
                              : 'opacity-0',
                          )}
                        />


The Check icon appears after the model name/provider icon, but the layout order suggests it should appear at the end. Consider moving the Check icon inside the flex container or adjusting the flex layout to ensure proper alignment of all elements (icon, name, and check mark).

Not sure I understand the point, but it's fine imo

Copilot · 2026-01-30T12:56:07Z

packages/ui-components/src/icons/gemini.icon.tsx

+        <path
+          d="M13.744 7.22331C12.6365 6.75184 11.6295 6.07273 10.7773 5.22264C9.59057 4.03353 8.74392 2.54831 8.32532 0.921308C8.30695 0.849046 8.26502 0.784967 8.20617 0.739197C8.14731 0.693428 8.07487 0.668579 8.00032 0.668579C7.92576 0.668579 7.85332 0.693428 7.79447 0.739197C7.73561 0.784967 7.69368 0.849046 7.67532 0.921308C7.25583 2.5481 6.40904 4.03315 5.22265 5.22264C4.3704 6.07263 3.36342 6.75172 2.25598 7.22331C1.82265 7.40998 1.37732 7.55998 0.921316 7.67531C0.848611 7.69317 0.783995 7.7349 0.737802 7.79382C0.691608 7.85274 0.666504 7.92544 0.666504 8.00031C0.666504 8.07518 0.691608 8.14788 0.737802 8.2068C0.783995 8.26572 0.848611 8.30744 0.921316 8.32531C1.37732 8.43998 1.82132 8.58998 2.25598 8.77664C3.36348 9.24811 4.37049 9.92722 5.22265 10.7773C6.40971 11.9666 7.25661 13.452 7.67532 15.0793C7.69318 15.152 7.73491 15.2166 7.79382 15.2628C7.85274 15.309 7.92545 15.3341 8.00032 15.3341C8.07518 15.3341 8.14789 15.309 8.20681 15.2628C8.26573 15.2166 8.30745 15.152 8.32532 15.0793C8.43998 14.6226 8.58998 14.1786 8.77665 13.744C9.24809 12.6365 9.9272 11.6294 10.7773 10.7773C11.9667 9.59052 13.4521 8.74386 15.0793 8.32531C15.1516 8.30694 15.2157 8.26502 15.2614 8.20616C15.3072 8.1473 15.332 8.07487 15.332 8.00031C15.332 7.92575 15.3072 7.85332 15.2614 7.79446C15.2157 7.7356 15.1516 7.69368 15.0793 7.67531C14.6229 7.56047 14.1763 7.40932 13.744 7.22331Z"
+          fill={color}
+        />
+        <path
+          d="M13.744 7.22331C12.6365 6.75184 11.6295 6.07273 10.7773 5.22264C9.59057 4.03353 8.74392 2.54831 8.32532 0.921308C8.30695 0.849046 8.26502 0.784967 8.20617 0.739197C8.14731 0.693428 8.07487 0.668579 8.00032 0.668579C7.92576 0.668579 7.85332 0.693428 7.79447 0.739197C7.73561 0.784967 7.69368 0.849046 7.67532 0.921308C7.25583 2.5481 6.40904 4.03315 5.22265 5.22264C4.3704 6.07263 3.36342 6.75172 2.25598 7.22331C1.82265 7.40998 1.37732 7.55998 0.921316 7.67531C0.848611 7.69317 0.783995 7.7349 0.737802 7.79382C0.691608 7.85274 0.666504 7.92544 0.666504 8.00031C0.666504 8.07518 0.691608 8.14788 0.737802 8.2068C0.783995 8.26572 0.848611 8.30744 0.921316 8.32531C1.37732 8.43998 1.82132 8.58998 2.25598 8.77664C3.36348 9.24811 4.37049 9.92722 5.22265 10.7773C6.40971 11.9666 7.25661 13.452 7.67532 15.0793C7.69318 15.152 7.73491 15.2166 7.79382 15.2628C7.85274 15.309 7.92545 15.3341 8.00032 15.3341C8.07518 15.3341 8.14789 15.309 8.20681 15.2628C8.26573 15.2166 8.30745 15.152 8.32532 15.0793C8.43998 14.6226 8.58998 14.1786 8.77665 13.744C9.24809 12.6365 9.9272 11.6294 10.7773 10.7773C11.9667 9.59052 13.4521 8.74386 15.0793 8.32531C15.1516 8.30694 15.2157 8.26502 15.2614 8.20616C15.3072 8.1473 15.332 8.07487 15.332 8.00031C15.332 7.92575 15.3072 7.85332 15.2614 7.79446C15.2157 7.7356 15.1516 7.69368 15.0793 7.67531C14.6229 7.56047 14.1763 7.40932 13.744 7.22331Z"
+          fill={color}
+        />
+        <path
+          d="M13.744 7.22331C12.6365 6.75184 11.6295 6.07273 10.7773 5.22264C9.59057 4.03353 8.74392 2.54831 8.32532 0.921308C8.30695 0.849046 8.26502 0.784967 8.20617 0.739197C8.14731 0.693428 8.07487 0.668579 8.00032 0.668579C7.92576 0.668579 7.85332 0.693428 7.79447 0.739197C7.73561 0.784967 7.69368 0.849046 7.67532 0.921308C7.25583 2.5481 6.40904 4.03315 5.22265 5.22264C4.3704 6.07263 3.36342 6.75172 2.25598 7.22331C1.82265 7.40998 1.37732 7.55998 0.921316 7.67531C0.848611 7.69317 0.783995 7.7349 0.737802 7.79382C0.691608 7.85274 0.666504 7.92544 0.666504 8.00031C0.666504 8.07518 0.691608 8.14788 0.737802 8.2068C0.783995 8.26572 0.848611 8.30744 0.921316 8.32531C1.37732 8.43998 1.82132 8.58998 2.25598 8.77664C3.36348 9.24811 4.37049 9.92722 5.22265 10.7773C6.40971 11.9666 7.25661 13.452 7.67532 15.0793C7.69318 15.152 7.73491 15.2166 7.79382 15.2628C7.85274 15.309 7.92545 15.3341 8.00032 15.3341C8.07518 15.3341 8.14789 15.309 8.20681 15.2628C8.26573 15.2166 8.30745 15.152 8.32532 15.0793C8.43998 14.6226 8.58998 14.1786 8.77665 13.744C9.24809 12.6365 9.9272 11.6294 10.7773 10.7773C11.9667 9.59052 13.4521 8.74386 15.0793 8.32531C15.1516 8.30694 15.2157 8.26502 15.2614 8.20616C15.3072 8.1473 15.332 8.07487 15.332 8.00031C15.332 7.92575 15.3072 7.85332 15.2614 7.79446C15.2157 7.7356 15.1516 7.69368 15.0793 7.67531C14.6229 7.56047 14.1763 7.40932 13.744 7.22331Z"
+          fill={color}
+        />
+        <path
+          d="M13.744 7.22331C12.6365 6.75184 11.6295 6.07273 10.7773 5.22264C9.59057 4.03353 8.74392 2.54831 8.32532 0.921308C8.30695 0.849046 8.26502 0.784967 8.20617 0.739197C8.14731 0.693428 8.07487 0.668579 8.00032 0.668579C7.92576 0.668579 7.85332 0.693428 7.79447 0.739197C7.73561 0.784967 7.69368 0.849046 7.67532 0.921308C7.25583 2.5481 6.40904 4.03315 5.22265 5.22264C4.3704 6.07263 3.36342 6.75172 2.25598 7.22331C1.82265 7.40998 1.37732 7.55998 0.921316 7.67531C0.848611 7.69317 0.783995 7.7349 0.737802 7.79382C0.691608 7.85274 0.666504 7.92544 0.666504 8.00031C0.666504 8.07518 0.691608 8.14788 0.737802 8.2068C0.783995 8.26572 0.848611 8.30744 0.921316 8.32531C1.37732 8.43998 1.82132 8.58998 2.25598 8.77664C3.36348 9.24811 4.37049 9.92722 5.22265 10.7773C6.40971 11.9666 7.25661 13.452 7.67532 15.0793C7.69318 15.152 7.73491 15.2166 7.79382 15.2628C7.85274 15.309 7.92545 15.3341 8.00032 15.3341C8.07518 15.3341 8.14789 15.309 8.20681 15.2628C8.26573 15.2166 8.30745 15.152 8.32532 15.0793C8.43998 14.6226 8.58998 14.1786 8.77665 13.744C9.24809 12.6365 9.9272 11.6294 10.7773 10.7773C11.9667 9.59052 13.4521 8.74386 15.0793 8.32531C15.1516 8.30694 15.2157 8.26502 15.2614 8.20616C15.3072 8.1473 15.332 8.07487 15.332 8.00031C15.332 7.92575 15.3072 7.85332 15.2614 7.79446C15.2157 7.7356 15.1516 7.69368 15.0793 7.67531C14.6229 7.56047 14.1763 7.40932 13.744 7.22331Z"
+          fill={color}
+        />


The same path element is duplicated four times in the SVG. This creates unnecessary code bloat and makes the icon harder to maintain. Remove the duplicate path elements and keep only one instance.

it's inside svg, I don't what to change it

alexandrudanpop · 2026-02-02T14:32:10Z

@rSnapkoOpenOps I think it would be nice to also display this icon in the selected model label, not just in the dropdown

…onents

sonarqubecloud · 2026-02-02T15:45:17Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Add AI provider icons into model selector

ddbaa3d

rSnapkoOpenOps marked this pull request as ready for review January 30, 2026 12:55

Copilot AI review requested due to automatic review settings January 30, 2026 12:55

Copilot AI reviewed Jan 30, 2026

View reviewed changes

rSnapkoOpenOps requested review from alexandrudanpop and cezudas January 30, 2026 13:03

Add Google icon and update AI provider handling for Google Vertex AI

86a46ed

rSnapkoOpenOps added 3 commits February 2, 2026 16:13

Add provider icon for selected model in AI model selector

d4efc62

Add selectedProvider handling to AI model selector and related comp…

2c309bb

…onents

Add selectedProvider args to AI model selector stories

12db5b5

alexandrudanpop approved these changes Feb 3, 2026

View reviewed changes

rSnapkoOpenOps merged commit 741368b into main Feb 3, 2026
96 of 110 checks passed

rSnapkoOpenOps deleted the feat/add-icon-to-model-selector branch February 3, 2026 08:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add AI provider icons into model selector #1904

Add AI provider icons into model selector #1904

Uh oh!

rSnapkoOpenOps commented Jan 30, 2026 •

edited

Loading

Uh oh!

linear bot commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

rSnapkoOpenOps Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

rSnapkoOpenOps Jan 30, 2026

Uh oh!

alexandrudanpop commented Feb 2, 2026

Uh oh!

sonarqubecloud bot commented Feb 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add AI provider icons into model selector #1904

Add AI provider icons into model selector #1904

Uh oh!

Conversation

rSnapkoOpenOps commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear bot commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

rSnapkoOpenOps Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

rSnapkoOpenOps Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

alexandrudanpop commented Feb 2, 2026

Uh oh!

sonarqubecloud bot commented Feb 2, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rSnapkoOpenOps commented Jan 30, 2026 •

edited

Loading