feat(site): add copilot as a provider option in AI Bridge logs filter (#22023)

## Problem

The Copilot provider was missing from the AI Bridge logs filter dropdown, so users couldn't filter interceptions by Copilot. Additionally, the `AIBridgeProviderIcon` component didn't handle the copilot provider, so it would render a fallback question mark icon.

<img width="1392" height="333" alt="Screenshot 2026-02-10 at 09 26 16" src="https://github.com/user-attachments/assets/ecb97400-a4dd-4e88-accc-68d7fdf19b2a" />

## Changes

* Added `copilot` case to `AIBridgeProviderIcon`, using the existing `/icon/github.svg`.
* Added Copilot as a provider option in the filter dropdown.
* Added `MockInterceptionAnthropic` and `MockInterceptionCopilot` mock data with sample prompts, and updated the Storybook stories to use one interception per provider.
This commit is contained in:
Susana Ferreira
2026-02-11 14:42:38 +00:00
committed by GitHub
parent 8e9638c750
commit 5cf97955a0
4 changed files with 68 additions and 3 deletions
@@ -25,6 +25,13 @@ export const AIBridgeProviderIcon = ({
className={cn(iconClassName, props.className)}
/>
);
case "copilot":
return (
<ExternalImage
src="/icon/github.svg"
className={cn(iconClassName, props.className)}
/>
);
default:
return (
<CircleQuestionMarkIcon
@@ -1,4 +1,8 @@
import { MockInterception } from "testHelpers/entities";
import {
MockInterception,
MockInterceptionAnthropic,
MockInterceptionCopilot,
} from "testHelpers/entities";
import type { Meta, StoryObj } from "@storybook/react-vite";
import {
getDefaultFilterProps,
@@ -25,7 +29,11 @@ const defaultFilterProps = getDefaultFilterProps<FilterProps>({
},
});
const interceptions = [MockInterception, MockInterception, MockInterception];
const interceptions = [
MockInterception,
MockInterceptionAnthropic,
MockInterceptionCopilot,
];
const meta: Meta<typeof RequestLogsPageView> = {
title: "pages/AIBridgePage/RequestLogsPageView",
@@ -24,6 +24,13 @@ const AIBRIDGE_PROVIDERS: SelectFilterOption[] = [
<AIBridgeProviderIcon provider="anthropic" className="size-icon-sm" />
),
},
{
label: "Copilot",
value: "copilot",
startIcon: (
<AIBridgeProviderIcon provider="copilot" className="size-icon-sm" />
),
},
];
export const useProviderFilterMenu = ({
+44 -1
View File
@@ -5204,7 +5204,50 @@ export const MockInterception: TypesGen.AIBridgeInterception = {
},
],
metadata: {},
user_prompts: [],
user_prompts: [
{
id: "85154044-818e-4ee4-bac2-87f3ac8f066b",
interception_id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
provider_response_id: "res_1234567890",
prompt: "Hello OpenAI",
metadata: {},
created_at: "2022-05-17T17:39:01.382927298Z",
},
],
tool_usages: [],
api_key_id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
};
export const MockInterceptionAnthropic: TypesGen.AIBridgeInterception = {
...MockInterception,
id: "e5610f5b-2d6c-43db-b1c0-1dfcc6531f04",
provider: "anthropic",
model: "claude-sonnet-4.5",
user_prompts: [
{
id: "c820f31f-0170-4044-8b7c-b1b18747b4fb",
interception_id: "e5610f5b-2d6c-43db-b1c0-1dfcc6531f04",
provider_response_id: "res_2345678901",
prompt: "Hello Anthropic",
metadata: {},
created_at: "2022-05-17T17:39:01.382927298Z",
},
],
};
export const MockInterceptionCopilot: TypesGen.AIBridgeInterception = {
...MockInterception,
id: "22c9d31e-1a1f-464a-b397-562958599aa8",
provider: "copilot",
model: "claude-opus-4-5",
user_prompts: [
{
id: "c6c613d1-177e-416f-95b5-c7f0eeefb922",
interception_id: "22c9d31e-1a1f-464a-b397-562958599aa8",
provider_response_id: "res_3456789012",
prompt: "Hello Copilot",
metadata: {},
created_at: "2022-05-17T17:39:01.382927298Z",
},
],
};