From 530c0b2326b80fb0fa2cdf583eab03d2f2979f9f Mon Sep 17 00:00:00 2001 From: ryan-crabbe-berri Date: Thu, 11 Jun 2026 12:07:17 -0700 Subject: [PATCH] feat(ui): migrate playground to path routing and colocate its files (#30185) * feat(ui): cut playground over to the /ui/playground path route Follows the api-reference recipe: the sidebar and deep links route llm-playground to the path route, ?page=llm-playground redirects, and the legacy switch arm is deleted. The route's page.tsx was already the real implementation, so no view extraction was needed. * refactor(ui): move playground-owned files into its route folder Per the (dashboard) README convention, page-owned code lives in the page's folder: chat_ui/compareUI/complianceUI components, the chat hooks, and the playground-only llm_calls helpers move under (dashboard)/playground/. Modules with non-playground consumers (chat message primitives; fetch_models, chat_completion, responses_api) stay at their lowest common ancestor in src/components/{chat_ui,llm_calls} because legacy pages still import them. eslint-suppressions entries are re-keyed to the new paths so the grandfathered baseline still applies. * test(ui): teach sidebar e2e spec about migrated path routes The sidebar spec asserted ?page= for every item, which the playground cutover correctly broke: the sidebar now links to /ui/playground and the legacy URL redirects there. Drive the expected URL from the migration fixture (now a page-id -> segment map) so future cutovers only add a fixture entry. Also wrap one import line in AgentBuilderView.tsx that the move left unformatted; the changed- files prettier check flagged it. --- .../e2e_tests/fixtures/migratedPages.ts | 21 ++++--- .../tests/navigation/sidebar.spec.ts | 22 +++++-- ui/litellm-dashboard/eslint-suppressions.json | 44 +++++++------- .../src/app/(dashboard)/page.tsx | 3 - .../components}/chat_ui/A2AMetrics.tsx | 0 .../chat_ui/AdditionalModelSettings.test.tsx | 0 .../chat_ui/AdditionalModelSettings.tsx | 0 .../components}/chat_ui/AgentBuilderView.tsx | 18 ++++-- .../chat_ui/AudioRenderer.test.tsx | 2 +- .../components}/chat_ui/AudioRenderer.tsx | 2 +- .../components}/chat_ui/ChatImageRenderer.tsx | 2 +- .../components}/chat_ui/ChatImageUpload.tsx | 0 .../chat_ui/ChatImageUtils.test.tsx | 2 +- .../components}/chat_ui/ChatImageUtils.tsx | 2 +- .../chat_ui/ChatMessageBubble.test.tsx | 10 ++-- .../components}/chat_ui/ChatMessageBubble.tsx | 14 ++--- .../components}/chat_ui/ChatUI.test.tsx | 6 +- .../playground/components}/chat_ui/ChatUI.tsx | 60 +++++++++---------- .../chat_ui/CodeInterpreterOutput.test.tsx | 0 .../chat_ui/CodeInterpreterOutput.tsx | 0 .../chat_ui/CodeInterpreterTool.tsx | 0 .../chat_ui/EndpointSelector.test.tsx | 0 .../components}/chat_ui/EndpointSelector.tsx | 0 .../chat_ui/EndpointUtils.test.tsx | 8 +-- .../components}/chat_ui/EndpointUtils.tsx | 4 +- .../chat_ui/FilePreviewCard.test.tsx | 0 .../components}/chat_ui/FilePreviewCard.tsx | 0 .../chat_ui/RealtimePlayground.tsx | 2 +- .../chat_ui/ResponsesImageRenderer.tsx | 2 +- .../chat_ui/ResponsesImageUpload.tsx | 0 .../chat_ui/ResponsesImageUtils.tsx | 2 +- .../chat_ui/SearchResultsDisplay.tsx | 2 +- .../components}/chat_ui/SessionManagement.tsx | 4 +- .../components}/chat_ui/chatConstants.ts | 2 +- .../components}/compareUI/CompareUI.test.tsx | 6 +- .../components}/compareUI/CompareUI.tsx | 12 ++-- .../components/ComparisonPanel.test.tsx | 6 +- .../compareUI/components/ComparisonPanel.tsx | 6 +- .../components/MessageDisplay.test.tsx | 6 +- .../compareUI/components/MessageDisplay.tsx | 6 +- .../components/MessageInput.test.tsx | 0 .../compareUI/components/MessageInput.tsx | 0 .../components/ModelSelector.test.tsx | 0 .../compareUI/components/ModelSelector.tsx | 0 .../components/UnifiedSelector.test.tsx | 0 .../compareUI/components/UnifiedSelector.tsx | 0 .../compareUI/endpoint_config.test.ts | 2 +- .../components}/compareUI/endpoint_config.ts | 2 +- .../components}/complianceUI/ComplianceUI.tsx | 2 +- .../playground/hooks}/useChatHistory.test.ts | 0 .../playground/hooks}/useChatHistory.ts | 8 +-- .../playground/hooks}/useCodeInterpreter.ts | 4 +- .../playground/llm_calls/a2a_send_message.tsx | 4 +- .../llm_calls/anthropic_messages.tsx | 4 +- .../llm_calls/audio_speech.test.tsx | 0 .../playground/llm_calls/audio_speech.tsx | 2 +- .../llm_calls/audio_transcriptions.test.tsx | 0 .../llm_calls/audio_transcriptions.tsx | 0 .../llm_calls/embeddings_api.test.tsx | 0 .../playground/llm_calls/embeddings_api.tsx | 0 .../playground/llm_calls/fetch_agents.tsx | 2 +- .../playground/llm_calls/image_edits.tsx | 0 .../playground/llm_calls/image_generation.tsx | 0 .../playground/llm_calls/interactions_api.tsx | 0 .../src/app/(dashboard)/playground/page.tsx | 8 +-- .../cost_tracking_settings.test.tsx | 2 +- .../cost_tracking_settings.tsx | 2 +- .../EvaluationSettingsModal.tsx | 2 +- .../MCPSemanticFilterSettings.test.tsx | 2 +- .../MCPSemanticFilterSettings.tsx | 2 +- .../Fallbacks/AddFallbacks.test.tsx | 4 +- .../RouterSettings/Fallbacks/AddFallbacks.tsx | 2 +- .../Fallbacks/Fallbacks.test.tsx | 4 +- .../add_model/ComplexityRouterConfig.tsx | 2 +- .../add_model/RouterConfigBuilder.tsx | 2 +- .../add_model/add_auto_router_tab.tsx | 2 +- .../cache_settings/CacheFieldRenderer.tsx | 2 +- .../src/components/chat/ChatMessages.tsx | 4 +- .../src/components/chat/ChatPage.tsx | 6 +- .../chat_ui/CodeSnippets.test.tsx | 0 .../{playground => }/chat_ui/CodeSnippets.tsx | 2 +- .../chat_ui/MCPEventsDisplay.tsx | 2 +- .../chat_ui/ReasoningContent.tsx | 0 .../chat_ui/ResponseMetrics.tsx | 0 .../chat_ui/mode_endpoint_mapping.tsx | 0 .../{playground => }/chat_ui/types.ts | 0 .../common_components/ModelSelector.tsx | 2 +- .../RouterSettingsAccordion.tsx | 2 +- .../edit_auto_router_modal.tsx | 2 +- .../llm_calls/chat_completion.test.tsx | 0 .../llm_calls/chat_completion.tsx | 2 +- .../llm_calls/code_interpreter_handler.ts | 0 .../llm_calls/fetch_models.tsx | 2 +- .../llm_calls/responses_api.test.tsx | 0 .../llm_calls/responses_api.tsx | 4 +- .../conversation_panel/MessageBubble.tsx | 2 +- .../conversation_panel/types.ts | 2 +- .../conversation_panel/useConversation.ts | 2 +- .../src/components/public_model_hub.tsx | 6 +- .../S3VectorsConfig.test.tsx | 4 +- .../S3VectorsConfig.tsx | 2 +- .../VectorStoreForm.tsx | 2 +- .../src/utils/migratedPages.test.ts | 7 +++ .../src/utils/migratedPages.ts | 1 + 104 files changed, 214 insertions(+), 184 deletions(-) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/A2AMetrics.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/AdditionalModelSettings.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/AdditionalModelSettings.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/AgentBuilderView.tsx (98%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/AudioRenderer.test.tsx (88%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/AudioRenderer.tsx (90%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatImageRenderer.tsx (95%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatImageUpload.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatImageUtils.test.tsx (99%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatImageUtils.tsx (96%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatMessageBubble.test.tsx (96%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatMessageBubble.tsx (93%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatUI.test.tsx (98%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ChatUI.tsx (97%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/CodeInterpreterOutput.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/CodeInterpreterOutput.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/CodeInterpreterTool.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/EndpointSelector.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/EndpointSelector.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/EndpointUtils.test.tsx (95%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/EndpointUtils.tsx (82%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/FilePreviewCard.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/FilePreviewCard.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/RealtimePlayground.tsx (99%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ResponsesImageRenderer.tsx (94%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ResponsesImageUpload.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/ResponsesImageUtils.tsx (96%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/SearchResultsDisplay.tsx (98%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/SessionManagement.tsx (96%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/chat_ui/chatConstants.ts (95%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/CompareUI.test.tsx (96%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/CompareUI.tsx (98%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/ComparisonPanel.test.tsx (93%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/ComparisonPanel.tsx (97%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/MessageDisplay.test.tsx (94%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/MessageDisplay.tsx (96%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/MessageInput.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/MessageInput.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/ModelSelector.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/ModelSelector.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/UnifiedSelector.test.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/components/UnifiedSelector.tsx (100%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/endpoint_config.test.ts (98%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/compareUI/endpoint_config.ts (98%) rename ui/litellm-dashboard/src/{components/playground => app/(dashboard)/playground/components}/complianceUI/ComplianceUI.tsx (99%) rename ui/litellm-dashboard/src/{components/playground/chat_ui => app/(dashboard)/playground/hooks}/useChatHistory.test.ts (100%) rename ui/litellm-dashboard/src/{components/playground/chat_ui => app/(dashboard)/playground/hooks}/useChatHistory.ts (98%) rename ui/litellm-dashboard/src/{components/playground/chat_ui => app/(dashboard)/playground/hooks}/useCodeInterpreter.ts (88%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/a2a_send_message.tsx (98%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/anthropic_messages.tsx (96%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/audio_speech.test.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/audio_speech.tsx (96%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/audio_transcriptions.test.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/audio_transcriptions.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/embeddings_api.test.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/embeddings_api.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/fetch_agents.tsx (98%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/image_edits.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/image_generation.tsx (100%) rename ui/litellm-dashboard/src/{components => app/(dashboard)}/playground/llm_calls/interactions_api.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/CodeSnippets.test.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/CodeSnippets.tsx (99%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/MCPEventsDisplay.tsx (99%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/ReasoningContent.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/ResponseMetrics.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/mode_endpoint_mapping.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/chat_ui/types.ts (100%) rename ui/litellm-dashboard/src/components/{playground => }/llm_calls/chat_completion.test.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/llm_calls/chat_completion.tsx (99%) rename ui/litellm-dashboard/src/components/{playground => }/llm_calls/code_interpreter_handler.ts (100%) rename ui/litellm-dashboard/src/components/{playground => }/llm_calls/fetch_models.tsx (94%) rename ui/litellm-dashboard/src/components/{playground => }/llm_calls/responses_api.test.tsx (100%) rename ui/litellm-dashboard/src/components/{playground => }/llm_calls/responses_api.tsx (98%) diff --git a/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts b/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts index f2ba66147e..749c3cde17 100644 --- a/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts +++ b/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts @@ -1,16 +1,23 @@ /** - * Source of truth for the App Router migration smoke (tests/migration/migratedPages.spec.ts). + * Source of truth for the App Router migration E2E suites. * - * Add a route segment here once its migration has MERGED to the branch under test. - * Both suites pick it up automatically: - * - default mount: npm run e2e:migration - * - server-root-path mount: SERVER_ROOT_PATH=/ npm run e2e:migration:root + * Add an entry (legacy sidebar page id -> route segment) once a page's migration + * has MERGED to the branch under test. Consumers pick it up automatically: + * - migration smoke (tests/migration/migratedPages.spec.ts), via MIGRATED_E2E_SEGMENTS: + * default mount: npm run e2e:migration + * server-root-path mount: SERVER_ROOT_PATH=/ npm run e2e:migration:root + * - navigation specs that assert per-page URLs (tests/navigation/sidebar.spec.ts) * * Keep this in lockstep with MIGRATED_PAGES in src/utils/migratedPages.ts. - * Pending (uncomment as each PR lands): playground, and the leaf-pages batch + * Pending (add as each PR lands): the leaf-pages batch * (budgets, caching, cost-tracking, guardrails, guardrails-monitor, logs, * mcp-servers, memory, policies, projects, prompts, search-tools, skills, * tag-management, tool-policies, transform-request, ui-theme, vector-stores, * workflows, access-groups). */ -export const MIGRATED_E2E_SEGMENTS: string[] = ["api-reference"]; +export const MIGRATED_E2E_PAGES: Record = { + api_ref: "api-reference", + "llm-playground": "playground", +}; + +export const MIGRATED_E2E_SEGMENTS: string[] = [...new Set(Object.values(MIGRATED_E2E_PAGES))]; diff --git a/ui/litellm-dashboard/e2e_tests/tests/navigation/sidebar.spec.ts b/ui/litellm-dashboard/e2e_tests/tests/navigation/sidebar.spec.ts index b8fb95b764..7ac2e7df39 100644 --- a/ui/litellm-dashboard/e2e_tests/tests/navigation/sidebar.spec.ts +++ b/ui/litellm-dashboard/e2e_tests/tests/navigation/sidebar.spec.ts @@ -4,11 +4,23 @@ import { ADMIN_STORAGE_PATH } from "../../constants"; import { Page } from "../../fixtures/pages"; import { menuLabelToPage } from "../../fixtures/menuMappings"; import { navigateToPage } from "../../helpers/navigation"; +import { MIGRATED_E2E_PAGES } from "../../fixtures/migratedPages"; +import type { Page as PlaywrightPage } from "@playwright/test"; const sidebarButtons = { [Role.ProxyAdmin]: ["Virtual Keys", "Playground", "Models", "Usage", "Teams", "Internal Users", "AI Hub"], }; +/** Migrated pages live at a path route; legacy pages keep the ?page= query param. */ +async function expectPageUrl(page: PlaywrightPage, pageKey: string): Promise { + const migratedSegment = MIGRATED_E2E_PAGES[pageKey]; + if (migratedSegment) { + await expect(page).toHaveURL(new RegExp(`/ui/${migratedSegment}/?($|\\?)`)); + } else { + await expect(page).toHaveURL(new RegExp(`[?&]page=${pageKey}(&|$)`)); + } +} + const roles = [{ role: Role.ProxyAdmin, storage: ADMIN_STORAGE_PATH }]; for (const { role, storage } of roles) { @@ -35,8 +47,7 @@ for (const { role, storage } of roles) { await tab.click(); - // Verify URL contains the correct page query parameter - await expect(page).toHaveURL(new RegExp(`[?&]page=${expectedPage}(&|$)`)); + await expectPageUrl(page, expectedPage); } }); @@ -50,13 +61,14 @@ for (const { role, storage } of roles) { // Test direct navigation to verify the helper function works await navigateToPage(page, Page.ApiKeys); - await expect(page).toHaveURL(new RegExp(`[?&]page=${Page.ApiKeys}(&|$)`)); + await expectPageUrl(page, Page.ApiKeys); await navigateToPage(page, Page.Models); - await expect(page).toHaveURL(new RegExp(`[?&]page=${Page.Models}(&|$)`)); + await expectPageUrl(page, Page.Models); + // Migrated page: /ui?page=llm-playground redirects to the path route await navigateToPage(page, Page.LlmPlayground); - await expect(page).toHaveURL(new RegExp(`[?&]page=${Page.LlmPlayground}(&|$)`)); + await expectPageUrl(page, Page.LlmPlayground); }); }); } diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json index d3169395b4..358064c00a 100644 --- a/ui/litellm-dashboard/eslint-suppressions.json +++ b/ui/litellm-dashboard/eslint-suppressions.json @@ -1533,7 +1533,7 @@ "count": 1 } }, - "src/components/playground/chat_ui/AdditionalModelSettings.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx": { "no-restricted-imports": { "count": 1 }, @@ -1541,17 +1541,17 @@ "count": 2 } }, - "src/components/playground/chat_ui/AgentBuilderView.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx": { "react-hooks/set-state-in-effect": { "count": 5 } }, - "src/components/playground/chat_ui/ChatImageUtils.test.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx": { "max-nested-callbacks": { "count": 1 } }, - "src/components/playground/chat_ui/ChatUI.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx": { "no-restricted-imports": { "count": 1 }, @@ -1562,17 +1562,17 @@ "count": 13 } }, - "src/components/playground/chat_ui/CodeInterpreterOutput.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx": { "no-restricted-syntax": { "count": 2 } }, - "src/components/playground/chat_ui/CodeInterpreterTool.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/playground/chat_ui/RealtimePlayground.tsx": { + "src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx": { "react-hooks/immutability": { "count": 2 }, @@ -1580,22 +1580,22 @@ "count": 1 } }, - "src/components/playground/compareUI/CompareUI.tsx": { + "src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx": { "react-hooks/set-state-in-effect": { "count": 1 } }, - "src/components/playground/compareUI/components/ModelSelector.tsx": { + "src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/playground/complianceUI/ComplianceUI.tsx": { + "src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx": { "react-hooks/preserve-manual-memoization": { "count": 3 } }, - "src/components/playground/llm_calls/a2a_send_message.tsx": { + "src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx": { "max-params": { "count": 2 }, @@ -1603,27 +1603,27 @@ "count": 2 } }, - "src/components/playground/llm_calls/anthropic_messages.tsx": { + "src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx": { "max-params": { "count": 1 } }, - "src/components/playground/llm_calls/audio_speech.tsx": { + "src/app/(dashboard)/playground/llm_calls/audio_speech.tsx": { "max-params": { "count": 1 } }, - "src/components/playground/llm_calls/audio_transcriptions.tsx": { + "src/app/(dashboard)/playground/llm_calls/audio_transcriptions.tsx": { "max-params": { "count": 1 } }, - "src/components/playground/llm_calls/chat_completion.tsx": { + "src/components/llm_calls/chat_completion.tsx": { "max-params": { "count": 1 } }, - "src/components/playground/llm_calls/embeddings_api.tsx": { + "src/app/(dashboard)/playground/llm_calls/embeddings_api.tsx": { "max-params": { "count": 1 }, @@ -1631,22 +1631,22 @@ "count": 1 } }, - "src/components/playground/llm_calls/fetch_agents.tsx": { + "src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx": { "no-restricted-syntax": { "count": 1 } }, - "src/components/playground/llm_calls/image_edits.tsx": { + "src/app/(dashboard)/playground/llm_calls/image_edits.tsx": { "max-params": { "count": 1 } }, - "src/components/playground/llm_calls/image_generation.tsx": { + "src/app/(dashboard)/playground/llm_calls/image_generation.tsx": { "max-params": { "count": 1 } }, - "src/components/playground/llm_calls/interactions_api.tsx": { + "src/app/(dashboard)/playground/llm_calls/interactions_api.tsx": { "max-params": { "count": 1 }, @@ -1654,7 +1654,7 @@ "count": 1 } }, - "src/components/playground/llm_calls/responses_api.tsx": { + "src/components/llm_calls/responses_api.tsx": { "max-params": { "count": 1 } @@ -2250,4 +2250,4 @@ "count": 1 } } -} \ No newline at end of file +} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/page.tsx index 0854b085fa..f26e5dd5ef 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/page.tsx @@ -1,7 +1,6 @@ "use client"; import ModelsAndEndpointsView from "@/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView"; -import PlaygroundPage from "@/app/(dashboard)/playground/page"; import AdminPanel from "@/components/AdminPanel"; import AgentsPanel from "@/components/agents"; import BudgetPanel from "@/components/budgets/budget_panel"; @@ -354,8 +353,6 @@ function CreateKeyPageContent() { premiumUser={premiumUser} teams={teams} /> - ) : page == "llm-playground" ? ( - ) : page == "users" ? ( { it("should render the audio renderer", () => { diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/AudioRenderer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AudioRenderer.tsx similarity index 90% rename from ui/litellm-dashboard/src/components/playground/chat_ui/AudioRenderer.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AudioRenderer.tsx index 48a766283e..4b5a1596c1 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/AudioRenderer.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AudioRenderer.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { MessageType } from "./types"; +import { MessageType } from "@/components/chat_ui/types"; interface AudioRendererProps { message: MessageType; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageRenderer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageRenderer.tsx similarity index 95% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageRenderer.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageRenderer.tsx index 49adaaed8c..f4449bee80 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageRenderer.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageRenderer.tsx @@ -1,6 +1,6 @@ import React from "react"; import Image from "next/image"; -import { MessageType } from "./types"; +import { MessageType } from "@/components/chat_ui/types"; import { shouldShowChatAttachedImage } from "./ChatImageUtils"; import { FilePdfOutlined } from "@ant-design/icons"; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUpload.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUpload.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUpload.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUpload.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUtils.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUtils.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx index ecc4914b0a..ab6c542d70 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUtils.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx @@ -5,7 +5,7 @@ import { createChatDisplayMessage, shouldShowChatAttachedImage, } from "./ChatImageUtils"; -import { MessageType } from "./types"; +import { MessageType } from "@/components/chat_ui/types"; describe("ChatImageUtils", () => { beforeEach(() => { diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUtils.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUtils.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.tsx index 368ba3825e..7a6340d9fd 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageUtils.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.tsx @@ -1,4 +1,4 @@ -import { MessageType } from "./types"; +import { MessageType } from "@/components/chat_ui/types"; export interface ChatMultimodalContent { type: "text" | "image_url"; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatMessageBubble.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.test.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatMessageBubble.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.test.tsx index 7c4c56d5ad..647258b3d4 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatMessageBubble.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.test.tsx @@ -1,8 +1,8 @@ import { render, screen } from "@testing-library/react"; import { describe, it, expect, vi } from "vitest"; import ChatMessageBubble from "./ChatMessageBubble"; -import { EndpointType } from "./mode_endpoint_mapping"; -import { MessageType } from "./types"; +import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; +import { MessageType } from "@/components/chat_ui/types"; // Mock child components to isolate bubble rendering logic vi.mock("react-markdown", () => ({ @@ -17,13 +17,13 @@ vi.mock("react-syntax-highlighter/dist/esm/styles/prism", () => ({ coy: {}, })); -vi.mock("./ReasoningContent", () => ({ +vi.mock("@/components/chat_ui/ReasoningContent", () => ({ default: ({ reasoningContent }: { reasoningContent: string }) => (
{reasoningContent}
), })); -vi.mock("./MCPEventsDisplay", () => ({ +vi.mock("@/components/chat_ui/MCPEventsDisplay", () => ({ default: ({ events }: { events: unknown[] }) =>
{events.length} events
, })); @@ -33,7 +33,7 @@ vi.mock("./SearchResultsDisplay", () => ({ ), })); -vi.mock("./ResponseMetrics", () => ({ +vi.mock("@/components/chat_ui/ResponseMetrics", () => ({ default: ({ timeToFirstToken }: { timeToFirstToken?: number }) => (
TTFT: {timeToFirstToken}
), diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatMessageBubble.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.tsx similarity index 93% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatMessageBubble.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.tsx index b5bff3b70f..27226757c9 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatMessageBubble.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.tsx @@ -3,19 +3,19 @@ import React from "react"; import ReactMarkdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { coy } from "react-syntax-highlighter/dist/esm/styles/prism"; -import { CodeInterpreterResult } from "../llm_calls/code_interpreter_handler"; +import { CodeInterpreterResult } from "@/components/llm_calls/code_interpreter_handler"; import A2AMetrics from "./A2AMetrics"; import AudioRenderer from "./AudioRenderer"; import ChatImageRenderer from "./ChatImageRenderer"; import CodeInterpreterOutput from "./CodeInterpreterOutput"; -import { EndpointType } from "./mode_endpoint_mapping"; -import MCPEventsDisplay from "./MCPEventsDisplay"; -import type { MCPEvent } from "../../mcp_tools/types"; -import ReasoningContent from "./ReasoningContent"; -import ResponseMetrics from "./ResponseMetrics"; +import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; +import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay"; +import type { MCPEvent } from "@/components/mcp_tools/types"; +import ReasoningContent from "@/components/chat_ui/ReasoningContent"; +import ResponseMetrics from "@/components/chat_ui/ResponseMetrics"; import ResponsesImageRenderer from "./ResponsesImageRenderer"; import { SearchResultsDisplay } from "./SearchResultsDisplay"; -import { MessageType } from "./types"; +import { MessageType } from "@/components/chat_ui/types"; interface ChatMessageBubbleProps { message: MessageType; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx index 62bda4933a..9da3e3a4a0 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx @@ -1,15 +1,15 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"; import { beforeEach, describe, expect, it, vi } from "vitest"; import ChatUI from "./ChatUI"; -import * as fetchModelsModule from "../llm_calls/fetch_models"; +import * as fetchModelsModule from "@/components/llm_calls/fetch_models"; // Mock the fetchAvailableModels function -vi.mock("../llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn(), })); // Mock other networking functions that cause errors -vi.mock("../networking", () => ({ +vi.mock("@/components/networking", () => ({ tagListCall: vi.fn().mockResolvedValue({ data: [] }), vectorStoreListCall: vi.fn().mockResolvedValue({ data: [] }), getGuardrailsList: vi.fn().mockResolvedValue({ data: [] }), diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx similarity index 97% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx index 5ba2df607c..db46eb30cb 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx @@ -28,28 +28,28 @@ import ReactMarkdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { coy } from "react-syntax-highlighter/dist/esm/styles/prism"; import { v4 as uuidv4 } from "uuid"; -import GuardrailSelector from "../../guardrails/GuardrailSelector"; -import PolicySelector from "../../policies/PolicySelector"; -import MCPToolArgumentsForm, { MCPToolArgumentsFormRef } from "../../mcp_tools/MCPToolArgumentsForm"; -import { MCPServer } from "../../mcp_tools/types"; -import { ByokCredentialModal } from "../../mcp_tools/ByokCredentialModal"; -import NotificationsManager from "../../molecules/notifications_manager"; -import { callMCPTool, fetchMCPServers, fetchMCPToolsets, listMCPTools } from "../../networking"; -import { MCPToolset } from "../../mcp_tools/types"; -import TagSelector from "../../tag_management/TagSelector"; -import VectorStoreSelector from "../../vector_store_management/VectorStoreSelector"; -import { makeA2ASendMessageRequest } from "../llm_calls/a2a_send_message"; -import { makeAnthropicMessagesRequest } from "../llm_calls/anthropic_messages"; -import { makeOpenAIAudioSpeechRequest } from "../llm_calls/audio_speech"; -import { makeOpenAIAudioTranscriptionRequest } from "../llm_calls/audio_transcriptions"; -import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion"; -import { makeOpenAIEmbeddingsRequest } from "../llm_calls/embeddings_api"; -import { Agent, fetchAvailableAgents } from "../llm_calls/fetch_agents"; -import { fetchAvailableModels, ModelGroup } from "../llm_calls/fetch_models"; -import { makeOpenAIImageEditsRequest } from "../llm_calls/image_edits"; -import { makeOpenAIImageGenerationRequest } from "../llm_calls/image_generation"; -import { makeOpenAIResponsesRequest } from "../llm_calls/responses_api"; -import { makeInteractionsRequest } from "../llm_calls/interactions_api"; +import GuardrailSelector from "@/components/guardrails/GuardrailSelector"; +import PolicySelector from "@/components/policies/PolicySelector"; +import MCPToolArgumentsForm, { MCPToolArgumentsFormRef } from "@/components/mcp_tools/MCPToolArgumentsForm"; +import { MCPServer } from "@/components/mcp_tools/types"; +import { ByokCredentialModal } from "@/components/mcp_tools/ByokCredentialModal"; +import NotificationsManager from "@/components/molecules/notifications_manager"; +import { callMCPTool, fetchMCPServers, fetchMCPToolsets, listMCPTools } from "@/components/networking"; +import { MCPToolset } from "@/components/mcp_tools/types"; +import TagSelector from "@/components/tag_management/TagSelector"; +import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector"; +import { makeA2ASendMessageRequest } from "../../llm_calls/a2a_send_message"; +import { makeAnthropicMessagesRequest } from "../../llm_calls/anthropic_messages"; +import { makeOpenAIAudioSpeechRequest } from "../../llm_calls/audio_speech"; +import { makeOpenAIAudioTranscriptionRequest } from "../../llm_calls/audio_transcriptions"; +import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion"; +import { makeOpenAIEmbeddingsRequest } from "../../llm_calls/embeddings_api"; +import { Agent, fetchAvailableAgents } from "../../llm_calls/fetch_agents"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; +import { makeOpenAIImageEditsRequest } from "../../llm_calls/image_edits"; +import { makeOpenAIImageGenerationRequest } from "../../llm_calls/image_generation"; +import { makeOpenAIResponsesRequest } from "@/components/llm_calls/responses_api"; +import { makeInteractionsRequest } from "../../llm_calls/interactions_api"; import A2AMetrics from "./A2AMetrics"; import AdditionalModelSettings from "./AdditionalModelSettings"; import AudioRenderer from "./AudioRenderer"; @@ -59,23 +59,23 @@ import ChatImageUpload from "./ChatImageUpload"; import { createChatDisplayMessage, createChatMultimodalMessage } from "./ChatImageUtils"; import CodeInterpreterOutput from "./CodeInterpreterOutput"; import CodeInterpreterTool from "./CodeInterpreterTool"; -import { generateCodeSnippet } from "./CodeSnippets"; +import { generateCodeSnippet } from "@/components/chat_ui/CodeSnippets"; import EndpointSelector from "./EndpointSelector"; import FilePreviewCard from "./FilePreviewCard"; import ChatMessageBubble from "./ChatMessageBubble"; -import MCPEventsDisplay from "./MCPEventsDisplay"; -import { EndpointType, getEndpointType } from "./mode_endpoint_mapping"; -import ReasoningContent from "./ReasoningContent"; -import ResponseMetrics, { TokenUsage } from "./ResponseMetrics"; +import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay"; +import { EndpointType, getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; +import ReasoningContent from "@/components/chat_ui/ReasoningContent"; +import ResponseMetrics, { TokenUsage } from "@/components/chat_ui/ResponseMetrics"; import ResponsesImageRenderer from "./ResponsesImageRenderer"; import ResponsesImageUpload from "./ResponsesImageUpload"; import { createDisplayMessage, createMultimodalMessage } from "./ResponsesImageUtils"; import { SearchResultsDisplay } from "./SearchResultsDisplay"; import SessionManagement from "./SessionManagement"; import RealtimePlayground from "./RealtimePlayground"; -import { A2ATaskMetadata, MessageType } from "./types"; -import { useCodeInterpreter } from "./useCodeInterpreter"; -import { useChatHistory } from "./useChatHistory"; +import { A2ATaskMetadata, MessageType } from "@/components/chat_ui/types"; +import { useCodeInterpreter } from "../../hooks/useCodeInterpreter"; +import { useChatHistory } from "../../hooks/useChatHistory"; import { getSecureItem, setSecureItem } from "@/utils/secureStorage"; const { TextArea } = Input; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/CodeInterpreterOutput.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/CodeInterpreterOutput.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/CodeInterpreterOutput.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/CodeInterpreterOutput.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/CodeInterpreterTool.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/CodeInterpreterTool.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointUtils.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.test.tsx similarity index 95% rename from ui/litellm-dashboard/src/components/playground/chat_ui/EndpointUtils.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.test.tsx index 6eb481381a..2bb1395428 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointUtils.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.test.tsx @@ -1,10 +1,10 @@ import { beforeEach, describe, expect, it, vi } from "vitest"; -import type { ModelGroup } from "../llm_calls/fetch_models"; +import type { ModelGroup } from "@/components/llm_calls/fetch_models"; import { determineEndpointType } from "./EndpointUtils"; -import { EndpointType } from "./mode_endpoint_mapping"; +import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; // Mock the getEndpointType function -vi.mock("./mode_endpoint_mapping", () => ({ +vi.mock("@/components/chat_ui/mode_endpoint_mapping", () => ({ EndpointType: { IMAGE: "image", VIDEO: "video", @@ -32,7 +32,7 @@ vi.mock("./mode_endpoint_mapping", () => ({ })); // Import the mocked function -import { getEndpointType } from "./mode_endpoint_mapping"; +import { getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; describe("determineEndpointType", () => { beforeEach(() => { diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointUtils.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.tsx similarity index 82% rename from ui/litellm-dashboard/src/components/playground/chat_ui/EndpointUtils.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.tsx index de337e5638..84579610a4 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointUtils.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.tsx @@ -1,5 +1,5 @@ -import { ModelGroup } from "../llm_calls/fetch_models"; -import { EndpointType, getEndpointType } from "./mode_endpoint_mapping"; +import { ModelGroup } from "@/components/llm_calls/fetch_models"; +import { EndpointType, getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; /** * Determines the appropriate endpoint type based on the selected model diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/FilePreviewCard.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/FilePreviewCard.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/FilePreviewCard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/FilePreviewCard.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx index 88c6efd87b..68a150be8c 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx @@ -3,7 +3,7 @@ import { AudioMutedOutlined, AudioOutlined, CloseCircleOutlined, SendOutlined, SoundOutlined } from "@ant-design/icons"; import { Button, Input, Select, Typography } from "antd"; import React, { useCallback, useEffect, useRef, useState } from "react"; -import { getProxyBaseUrl } from "../../networking"; +import { getProxyBaseUrl } from "@/components/networking"; import { OPEN_AI_VOICE_SELECT_OPTIONS } from "./chatConstants"; const { Text } = Typography; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageRenderer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageRenderer.tsx similarity index 94% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageRenderer.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageRenderer.tsx index a8707ebd21..d459d638c0 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageRenderer.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageRenderer.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { MessageType } from "./types"; +import { MessageType } from "@/components/chat_ui/types"; import { shouldShowAttachedImage } from "./ResponsesImageUtils"; import { FilePdfOutlined } from "@ant-design/icons"; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageUpload.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUpload.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageUpload.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUpload.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageUtils.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUtils.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageUtils.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUtils.tsx index 50dee5c86f..04dfa39d5c 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageUtils.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUtils.tsx @@ -1,4 +1,4 @@ -import { MessageType, MultimodalContent } from "./types"; +import { MessageType, MultimodalContent } from "@/components/chat_ui/types"; export const convertImageToBase64 = (file: File): Promise => { return new Promise((resolve, reject) => { diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/SearchResultsDisplay.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/playground/chat_ui/SearchResultsDisplay.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx index 966dbb67fc..ba84fe95f8 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/SearchResultsDisplay.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Button } from "antd"; -import { VectorStoreSearchResponse } from "./types"; +import { VectorStoreSearchResponse } from "@/components/chat_ui/types"; import { DatabaseOutlined, FileTextOutlined, DownOutlined, RightOutlined } from "@ant-design/icons"; interface SearchResultsDisplayProps { diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/SessionManagement.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/chat_ui/SessionManagement.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx index e782845bfc..87f9d79764 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/SessionManagement.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx @@ -1,8 +1,8 @@ import React from "react"; import { Switch, Tooltip } from "antd"; import { InfoCircleOutlined, CopyOutlined } from "@ant-design/icons"; -import { EndpointType } from "./mode_endpoint_mapping"; -import NotificationsManager from "../../molecules/notifications_manager"; +import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; +import NotificationsManager from "@/components/molecules/notifications_manager"; interface SessionManagementProps { endpointType: string; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/chatConstants.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/chatConstants.ts similarity index 95% rename from ui/litellm-dashboard/src/components/playground/chat_ui/chatConstants.ts rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/chatConstants.ts index 9592a52125..2b59fbad2e 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/chatConstants.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/chatConstants.ts @@ -1,4 +1,4 @@ -import { EndpointType } from "./mode_endpoint_mapping"; +import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; export const OPEN_AI_VOICES = { ALLOY: "alloy", diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx index 8e6da976cb..4278cb6a0e 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx @@ -2,13 +2,13 @@ import { render, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { beforeEach, describe, expect, it, vi } from "vitest"; import CompareUI from "./CompareUI"; -import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion"; +import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion"; -vi.mock("../llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn().mockResolvedValue([{ model_group: "gpt-4" }, { model_group: "gpt-3.5-turbo" }]), })); -vi.mock("../llm_calls/chat_completion", () => ({ +vi.mock("@/components/llm_calls/chat_completion", () => ({ makeOpenAIChatCompletionRequest: vi.fn().mockResolvedValue(undefined), })); diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx index ce738e4cd6..e41ee3ba8f 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx @@ -7,12 +7,12 @@ import { useEffect, useMemo, useState } from "react"; import { v4 as uuidv4 } from "uuid"; import ChatImageUpload from "../chat_ui/ChatImageUpload"; import { createChatDisplayMessage, createChatMultimodalMessage } from "../chat_ui/ChatImageUtils"; -import type { TokenUsage } from "../chat_ui/ResponseMetrics"; -import type { MessageType, VectorStoreSearchResponse } from "../chat_ui/types"; -import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion"; -import { fetchAvailableModels } from "../llm_calls/fetch_models"; -import { Agent, fetchAvailableAgents } from "../llm_calls/fetch_agents"; -import { makeA2AStreamMessageRequest } from "../llm_calls/a2a_send_message"; +import type { TokenUsage } from "@/components/chat_ui/ResponseMetrics"; +import type { MessageType, VectorStoreSearchResponse } from "@/components/chat_ui/types"; +import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion"; +import { fetchAvailableModels } from "@/components/llm_calls/fetch_models"; +import { Agent, fetchAvailableAgents } from "../../llm_calls/fetch_agents"; +import { makeA2AStreamMessageRequest } from "../../llm_calls/a2a_send_message"; import { ComparisonPanel } from "./components/ComparisonPanel"; import { MessageInput } from "./components/MessageInput"; import { diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx similarity index 93% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx index 2aef47f71d..c07ad36760 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx @@ -18,15 +18,15 @@ vi.mock("./UnifiedSelector", () => ({ ), })); -vi.mock("../../../tag_management/TagSelector", () => ({ +vi.mock("@/components/tag_management/TagSelector", () => ({ default: () =>
TagSelector
, })); -vi.mock("../../../vector_store_management/VectorStoreSelector", () => ({ +vi.mock("@/components/vector_store_management/VectorStoreSelector", () => ({ default: () =>
VectorStoreSelector
, })); -vi.mock("../../../guardrails/GuardrailSelector", () => ({ +vi.mock("@/components/guardrails/GuardrailSelector", () => ({ default: () =>
GuardrailSelector
, })); diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx similarity index 97% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx index 1074172974..6ddb5e2794 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/components/ComparisonPanel.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx @@ -3,9 +3,9 @@ import { useState } from "react"; import { ComparisonInstance } from "../CompareUI"; import { MessageDisplay } from "./MessageDisplay"; import { UnifiedSelector } from "./UnifiedSelector"; -import TagSelector from "../../../tag_management/TagSelector"; -import VectorStoreSelector from "../../../vector_store_management/VectorStoreSelector"; -import GuardrailSelector from "../../../guardrails/GuardrailSelector"; +import TagSelector from "@/components/tag_management/TagSelector"; +import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector"; +import GuardrailSelector from "@/components/guardrails/GuardrailSelector"; import { Checkbox, Divider, Popover, Slider } from "antd"; import { SelectorOption, EndpointConfig, isAgentEndpoint, getComparisonSelection } from "../endpoint_config"; diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/MessageDisplay.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.test.tsx similarity index 94% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/MessageDisplay.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.test.tsx index c635e9555f..72a1d41f9f 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/components/MessageDisplay.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.test.tsx @@ -1,15 +1,15 @@ import { render } from "@testing-library/react"; import { describe, expect, it, vi } from "vitest"; -import type { MessageType } from "../../chat_ui/types"; +import type { MessageType } from "@/components/chat_ui/types"; import { MessageDisplay } from "./MessageDisplay"; -vi.mock("../../chat_ui/ReasoningContent", () => ({ +vi.mock("@/components/chat_ui/ReasoningContent", () => ({ default: ({ reasoningContent }: { reasoningContent: string }) => (
{reasoningContent}
), })); -vi.mock("../../chat_ui/ResponseMetrics", () => ({ +vi.mock("@/components/chat_ui/ResponseMetrics", () => ({ default: () =>
ResponseMetrics
, })); diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/MessageDisplay.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/MessageDisplay.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.tsx index 088e45b91b..2e4868d352 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/components/MessageDisplay.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.tsx @@ -4,10 +4,10 @@ import ReactMarkdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { coy } from "react-syntax-highlighter/dist/esm/styles/prism"; import ChatImageRenderer from "../../chat_ui/ChatImageRenderer"; -import ReasoningContent from "../../chat_ui/ReasoningContent"; -import ResponseMetrics from "../../chat_ui/ResponseMetrics"; +import ReasoningContent from "@/components/chat_ui/ReasoningContent"; +import ResponseMetrics from "@/components/chat_ui/ResponseMetrics"; import { SearchResultsDisplay } from "../../chat_ui/SearchResultsDisplay"; -import type { MessageType } from "../../chat_ui/types"; +import type { MessageType } from "@/components/chat_ui/types"; interface MessageDisplayProps { messages: MessageType[]; diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/MessageInput.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageInput.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/MessageInput.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageInput.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/MessageInput.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageInput.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/MessageInput.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageInput.tsx diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/ModelSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/ModelSelector.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/ModelSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/ModelSelector.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/UnifiedSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/UnifiedSelector.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/components/UnifiedSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/compareUI/components/UnifiedSelector.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.tsx diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/endpoint_config.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.test.ts similarity index 98% rename from ui/litellm-dashboard/src/components/playground/compareUI/endpoint_config.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.test.ts index 67ecf32fc2..6463b2f9e5 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/endpoint_config.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.test.ts @@ -12,7 +12,7 @@ import { getComparisonSelection, hasValidSelection, } from "./endpoint_config"; -import { Agent } from "../llm_calls/fetch_agents"; +import { Agent } from "../../llm_calls/fetch_agents"; describe("endpoint_config", () => { it("should export EndpointId constants", () => { diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/endpoint_config.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.ts similarity index 98% rename from ui/litellm-dashboard/src/components/playground/compareUI/endpoint_config.ts rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.ts index c8e39f3ad0..2d1ebdaedd 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/endpoint_config.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.ts @@ -3,7 +3,7 @@ * Add new endpoints here to extend the comparison functionality. */ -import { Agent } from "../llm_calls/fetch_agents"; +import { Agent } from "../../llm_calls/fetch_agents"; // Endpoint identifiers export const EndpointId = { diff --git a/ui/litellm-dashboard/src/components/playground/complianceUI/ComplianceUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/playground/complianceUI/ComplianceUI.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx index 448ddb5d32..cf619057c3 100644 --- a/ui/litellm-dashboard/src/components/playground/complianceUI/ComplianceUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx @@ -9,7 +9,7 @@ import { import { getGuardrailsList, testPoliciesAndGuardrails } from "@/components/networking"; import PolicySelector, { getPolicyOptionEntries } from "@/components/policies/PolicySelector"; import { Policy } from "@/components/policies/types"; -import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion"; +import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion"; import { AlertTriangle, BarChart3, diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/useChatHistory.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useChatHistory.test.ts similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/useChatHistory.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useChatHistory.test.ts diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/useChatHistory.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useChatHistory.ts similarity index 98% rename from ui/litellm-dashboard/src/components/playground/chat_ui/useChatHistory.ts rename to ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useChatHistory.ts index d0da281bcc..6e2a263f59 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/useChatHistory.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useChatHistory.ts @@ -1,8 +1,8 @@ import React, { useState, useEffect } from "react"; -import { MessageType, A2ATaskMetadata } from "./types"; -import { TokenUsage } from "./ResponseMetrics"; -import { MCPEvent } from "../../mcp_tools/types"; -import { truncateString } from "../../../utils/textUtils"; +import { MessageType, A2ATaskMetadata } from "@/components/chat_ui/types"; +import { TokenUsage } from "@/components/chat_ui/ResponseMetrics"; +import { MCPEvent } from "@/components/mcp_tools/types"; +import { truncateString } from "@/utils/textUtils"; export interface UseChatHistoryReturn { // State diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/useCodeInterpreter.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useCodeInterpreter.ts similarity index 88% rename from ui/litellm-dashboard/src/components/playground/chat_ui/useCodeInterpreter.ts rename to ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useCodeInterpreter.ts index 430bee33be..9f32ef072e 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/useCodeInterpreter.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useCodeInterpreter.ts @@ -4,7 +4,7 @@ */ import { useState, useCallback } from "react"; -import { CodeInterpreterResult } from "../llm_calls/code_interpreter_handler"; +import { CodeInterpreterResult } from "@/components/llm_calls/code_interpreter_handler"; export interface UseCodeInterpreterReturn { // State @@ -54,4 +54,4 @@ export function useCodeInterpreter(): UseCodeInterpreterReturn { } // Re-export the type for convenience -export type { CodeInterpreterResult } from "../llm_calls/code_interpreter_handler"; +export type { CodeInterpreterResult } from "@/components/llm_calls/code_interpreter_handler"; diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/a2a_send_message.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/playground/llm_calls/a2a_send_message.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx index 42c1c4cc81..4e01dce0d9 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/a2a_send_message.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx @@ -2,8 +2,8 @@ // A2A Protocol (JSON-RPC 2.0) implementation for sending messages to agents import { v4 as uuidv4 } from "uuid"; -import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "../../networking"; -import { A2ATaskMetadata } from "../chat_ui/types"; +import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "@/components/networking"; +import { A2ATaskMetadata } from "@/components/chat_ui/types"; interface A2AMessagePart { kind: "text"; diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/anthropic_messages.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/llm_calls/anthropic_messages.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx index 5570c7408f..11e7a5e160 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/anthropic_messages.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx @@ -1,6 +1,6 @@ import Anthropic from "@anthropic-ai/sdk"; -import { MessageType } from "../chat_ui/types"; -import { TokenUsage } from "../chat_ui/ResponseMetrics"; +import { MessageType } from "@/components/chat_ui/types"; +import { TokenUsage } from "@/components/chat_ui/ResponseMetrics"; import { getProxyBaseUrl } from "@/components/networking"; import NotificationManager from "@/components/molecules/notifications_manager"; diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/audio_speech.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_speech.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/audio_speech.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_speech.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/audio_speech.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_speech.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/playground/llm_calls/audio_speech.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_speech.tsx index c5d4ae4d68..eda5d6ed66 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/audio_speech.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_speech.tsx @@ -1,7 +1,7 @@ import openai from "openai"; import { getProxyBaseUrl } from "@/components/networking"; import NotificationManager from "@/components/molecules/notifications_manager"; -import type { OpenAIVoice } from "../chat_ui/chatConstants"; +import type { OpenAIVoice } from "../components/chat_ui/chatConstants"; export async function makeOpenAIAudioSpeechRequest( input: string, diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/audio_transcriptions.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_transcriptions.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/audio_transcriptions.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_transcriptions.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/audio_transcriptions.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_transcriptions.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/audio_transcriptions.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_transcriptions.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/embeddings_api.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/embeddings_api.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/embeddings_api.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/embeddings_api.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/embeddings_api.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/embeddings_api.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/embeddings_api.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/embeddings_api.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/fetch_agents.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/playground/llm_calls/fetch_agents.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx index 258adcc93b..0dc589188f 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/fetch_agents.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx @@ -1,6 +1,6 @@ // fetch_agents.tsx -import { getProxyBaseUrl, getGlobalLitellmHeaderName, modelInfoCall } from "../../networking"; +import { getProxyBaseUrl, getGlobalLitellmHeaderName, modelInfoCall } from "@/components/networking"; export interface Agent { agent_id: string; diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/image_edits.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/image_edits.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/image_edits.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/image_edits.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/image_generation.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/image_generation.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/image_generation.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/image_generation.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/interactions_api.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/interactions_api.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/interactions_api.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/interactions_api.tsx diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx index abcbe80a38..c9bca86dc2 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx @@ -1,10 +1,10 @@ "use client"; import { useState, useEffect } from "react"; -import AgentBuilderView from "@/components/playground/chat_ui/AgentBuilderView"; -import ChatUI from "@/components/playground/chat_ui/ChatUI"; -import CompareUI from "@/components/playground/compareUI/CompareUI"; -import ComplianceUI from "@/components/playground/complianceUI/ComplianceUI"; +import AgentBuilderView from "@/app/(dashboard)/playground/components/chat_ui/AgentBuilderView"; +import ChatUI from "@/app/(dashboard)/playground/components/chat_ui/ChatUI"; +import CompareUI from "@/app/(dashboard)/playground/components/compareUI/CompareUI"; +import ComplianceUI from "@/app/(dashboard)/playground/components/complianceUI/ComplianceUI"; import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { fetchProxySettings } from "@/utils/proxyUtils"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx index b0cf4f8262..89711a098f 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx +++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx @@ -33,7 +33,7 @@ vi.mock("./pricing_calculator/index", () => ({ default: () =>
Pricing Calculator
, })); -vi.mock("../playground/llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn().mockResolvedValue([]), })); diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx index 9dade715cb..d9cca4d3c2 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx +++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx @@ -24,7 +24,7 @@ import { DocsMenu } from "../HelpLink"; import HowItWorks from "./how_it_works"; import { useDiscountConfig } from "./use_discount_config"; import { useMarginConfig } from "./use_margin_config"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; const DOCS_LINKS = [ { label: "Custom pricing for models", href: "https://docs.litellm.ai/docs/proxy/custom_pricing" }, diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/EvaluationSettingsModal.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/EvaluationSettingsModal.tsx index 90a2c0d597..0edfa65dfe 100644 --- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/EvaluationSettingsModal.tsx +++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/EvaluationSettingsModal.tsx @@ -1,7 +1,7 @@ import { CloseOutlined, PlayCircleOutlined } from "@ant-design/icons"; import { Button, Modal, Select, Input } from "antd"; import React, { useEffect, useState } from "react"; -import { fetchAvailableModels, type ModelGroup } from "@/components/playground/llm_calls/fetch_models"; +import { fetchAvailableModels, type ModelGroup } from "@/components/llm_calls/fetch_models"; const DEFAULT_PROMPT = `Evaluate whether this guardrail's decision was correct. Analyze the user input, the guardrail action taken, and determine if it was appropriate. diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx index a2288f4003..39542945c4 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx @@ -14,7 +14,7 @@ vi.mock("@/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticF useUpdateMCPSemanticFilterSettings: vi.fn(), })); -vi.mock("@/components/playground/llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn().mockResolvedValue([]), })); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx index c62e752565..38b1420f97 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx @@ -21,7 +21,7 @@ import { } from "antd"; import { QuestionCircleOutlined, CheckCircleOutlined, SaveOutlined } from "@ant-design/icons"; import { useEffect, useState } from "react"; -import { fetchAvailableModels, ModelGroup } from "@/components/playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import MCPSemanticFilterTestPanel from "./MCPSemanticFilterTestPanel"; import { getCurlCommand, runSemanticFilterTest, TestResult } from "./semanticFilterTestUtils"; diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.test.tsx index 0e05c14157..1253532f26 100644 --- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.test.tsx @@ -2,9 +2,9 @@ import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { beforeEach, describe, expect, it, vi } from "vitest"; import AddFallbacks, { Fallbacks } from "./AddFallbacks"; -import * as fetchModelsModule from "../../../playground/llm_calls/fetch_models"; +import * as fetchModelsModule from "@/components/llm_calls/fetch_models"; -vi.mock("../../../playground/llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn(), })); diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx index 8b86ff862f..8147189ddc 100644 --- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx +++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx @@ -9,7 +9,7 @@ import { Button } from "antd"; import React, { useEffect, useState } from "react"; import MessageManager from "@/components/molecules/message_manager"; import NotificationManager from "../../../molecules/notifications_manager"; -import { fetchAvailableModels, ModelGroup } from "../../../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import { AddFallbacksModal } from "./AddFallbacksModal"; import { FallbackGroup } from "./FallbackGroupConfig"; import { FallbackSelectionForm } from "./FallbackSelectionForm"; diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx index 323b71bd5c..513abb7859 100644 --- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx @@ -3,14 +3,14 @@ import userEvent from "@testing-library/user-event"; import { beforeEach, describe, expect, it, vi } from "vitest"; import Fallbacks from "./Fallbacks"; import * as networkingModule from "../../../networking"; -import * as fetchModelsModule from "../../../playground/llm_calls/fetch_models"; +import * as fetchModelsModule from "@/components/llm_calls/fetch_models"; vi.mock("../../../networking", () => ({ getCallbacksCall: vi.fn(), setCallbacksCall: vi.fn(), })); -vi.mock("../../../playground/llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn(), })); diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx index a20cb969e3..d826f3df32 100644 --- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx @@ -1,7 +1,7 @@ import { InfoCircleOutlined } from "@ant-design/icons"; import { Select as AntdSelect, Card, Divider, Space, Tooltip, Typography } from "antd"; import React from "react"; -import { ModelGroup } from "../playground/llm_calls/fetch_models"; +import { ModelGroup } from "@/components/llm_calls/fetch_models"; const { Text } = Typography; diff --git a/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.tsx b/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.tsx index 17c962c7e2..08acf993e2 100644 --- a/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.tsx +++ b/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.tsx @@ -14,7 +14,7 @@ import { Typography, } from "antd"; import React, { useEffect, useState } from "react"; -import { ModelGroup } from "../playground/llm_calls/fetch_models"; +import { ModelGroup } from "@/components/llm_calls/fetch_models"; const { Text } = Typography; diff --git a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx index 6d01e9bf74..9e9a097e3f 100644 --- a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx +++ b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx @@ -6,7 +6,7 @@ import { modelAvailableCall } from "../networking"; import ConnectionErrorDisplay from "./model_connection_test"; import { all_admin_roles } from "@/utils/roles"; import { handleAddAutoRouterSubmit } from "./handle_add_auto_router_submit"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import RouterConfigBuilder from "./RouterConfigBuilder"; import ComplexityRouterConfig from "./ComplexityRouterConfig"; import NotificationManager from "../molecules/notifications_manager"; diff --git a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx b/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx index eeabda23f9..6608b09d26 100644 --- a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx +++ b/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx @@ -4,7 +4,7 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { NumberInput, TextInput } from "@tremor/react"; import { Select } from "antd"; import React, { useEffect, useState } from "react"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import NumericalInput from "../shared/numerical_input"; interface CacheFieldRendererProps { diff --git a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx index 67b5569748..53877be173 100644 --- a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx +++ b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx @@ -7,8 +7,8 @@ import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { coy } from "react-syntax-highlighter/dist/esm/styles/prism"; -import ReasoningContent from "../playground/chat_ui/ReasoningContent"; -import MCPEventsDisplay from "../playground/chat_ui/MCPEventsDisplay"; +import ReasoningContent from "@/components/chat_ui/ReasoningContent"; +import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay"; import { ChatMessage } from "./types"; const { Panel } = Collapse; diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx index 0e729c8ae9..2a7fdb75eb 100644 --- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx +++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx @@ -27,9 +27,9 @@ import ChatMessages from "./ChatMessages"; import MCPConnectPicker from "./MCPConnectPicker"; import MCPAppsPanel from "./MCPAppsPanel"; import MCPCredentialsTab from "./MCPCredentialsTab"; -import { fetchAvailableModels } from "../playground/llm_calls/fetch_models"; -import { makeOpenAIChatCompletionRequest } from "../playground/llm_calls/chat_completion"; -import { makeOpenAIResponsesRequest } from "../playground/llm_calls/responses_api"; +import { fetchAvailableModels } from "@/components/llm_calls/fetch_models"; +import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion"; +import { makeOpenAIResponsesRequest } from "@/components/llm_calls/responses_api"; import type { MCPEvent } from "./types"; import { getProxyBaseUrl } from "@/components/networking"; import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig"; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/CodeSnippets.test.tsx b/ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/CodeSnippets.test.tsx rename to ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/CodeSnippets.tsx b/ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/playground/chat_ui/CodeSnippets.tsx rename to ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.tsx index d38d4dff7a..576b094b5d 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/CodeSnippets.tsx +++ b/ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.tsx @@ -1,6 +1,6 @@ import { MessageType } from "./types"; import { EndpointType } from "./mode_endpoint_mapping"; -import { MCPServer } from "../../mcp_tools/types"; +import { MCPServer } from "@/components/mcp_tools/types"; interface CodeGenMetadata { tags?: string[]; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx b/ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx rename to ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx index cd7ecbf266..e9319169d2 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx +++ b/ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Typography, Collapse } from "antd"; -import type { MCPEvent } from "../../mcp_tools/types"; +import type { MCPEvent } from "@/components/mcp_tools/types"; const { Text } = Typography; const { Panel } = Collapse; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ReasoningContent.tsx b/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ReasoningContent.tsx rename to ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ResponseMetrics.tsx b/ui/litellm-dashboard/src/components/chat_ui/ResponseMetrics.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/ResponseMetrics.tsx rename to ui/litellm-dashboard/src/components/chat_ui/ResponseMetrics.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/mode_endpoint_mapping.tsx b/ui/litellm-dashboard/src/components/chat_ui/mode_endpoint_mapping.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/mode_endpoint_mapping.tsx rename to ui/litellm-dashboard/src/components/chat_ui/mode_endpoint_mapping.tsx diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/types.ts b/ui/litellm-dashboard/src/components/chat_ui/types.ts similarity index 100% rename from ui/litellm-dashboard/src/components/playground/chat_ui/types.ts rename to ui/litellm-dashboard/src/components/chat_ui/types.ts diff --git a/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx b/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx index 24d6696dec..060a8f0f11 100644 --- a/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx +++ b/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react"; import { TextInput, Text } from "@tremor/react"; import { Select } from "antd"; import { RobotOutlined } from "@ant-design/icons"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; interface ModelSelectorProps { accessToken: string; diff --git a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx index 74b968b5b0..0aa274b574 100644 --- a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx +++ b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx @@ -5,7 +5,7 @@ import RouterSettingsForm, { RouterSettingsFormValue } from "../router_settings/ import { Fallbacks } from "../Settings/RouterSettings/Fallbacks/AddFallbacks"; import { FallbackSelectionForm } from "../Settings/RouterSettings/Fallbacks/FallbackSelectionForm"; import { FallbackGroup } from "../Settings/RouterSettings/Fallbacks/FallbackGroupConfig"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; export interface RouterSettingsAccordionValue { router_settings: { diff --git a/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx b/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx index e4e6ebd1da..caa061147d 100644 --- a/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx +++ b/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { Modal, Form, Button, Select as AntdSelect } from "antd"; import { Text, TextInput } from "@tremor/react"; import { modelAvailableCall, modelPatchUpdateCall } from "../networking"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import RouterConfigBuilder from "../add_model/RouterConfigBuilder"; import NotificationsManager from "../molecules/notifications_manager"; diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/chat_completion.test.tsx b/ui/litellm-dashboard/src/components/llm_calls/chat_completion.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/chat_completion.test.tsx rename to ui/litellm-dashboard/src/components/llm_calls/chat_completion.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/chat_completion.tsx b/ui/litellm-dashboard/src/components/llm_calls/chat_completion.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/playground/llm_calls/chat_completion.tsx rename to ui/litellm-dashboard/src/components/llm_calls/chat_completion.tsx index a45c3036f5..54d9273c46 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/chat_completion.tsx +++ b/ui/litellm-dashboard/src/components/llm_calls/chat_completion.tsx @@ -3,7 +3,7 @@ import { ChatCompletionMessageParam } from "openai/resources/chat/completions"; import { TokenUsage } from "../chat_ui/ResponseMetrics"; import { VectorStoreSearchResponse } from "../chat_ui/types"; import { getProxyBaseUrl } from "@/components/networking"; -import { MCPServer, MCPToolset, type MCPEvent } from "../../mcp_tools/types"; +import { MCPServer, MCPToolset, type MCPEvent } from "@/components/mcp_tools/types"; export async function makeOpenAIChatCompletionRequest( chatHistory: { role: string; content: string | any[] }[], diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/code_interpreter_handler.ts b/ui/litellm-dashboard/src/components/llm_calls/code_interpreter_handler.ts similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/code_interpreter_handler.ts rename to ui/litellm-dashboard/src/components/llm_calls/code_interpreter_handler.ts diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/fetch_models.tsx b/ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx similarity index 94% rename from ui/litellm-dashboard/src/components/playground/llm_calls/fetch_models.tsx rename to ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx index 14ba8c2381..6be6b65502 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/fetch_models.tsx +++ b/ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx @@ -1,6 +1,6 @@ // fetch_models.ts -import { modelHubCall } from "../../networking"; +import { modelHubCall } from "@/components/networking"; export interface ModelGroup { model_group: string; diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.test.tsx b/ui/litellm-dashboard/src/components/llm_calls/responses_api.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.test.tsx rename to ui/litellm-dashboard/src/components/llm_calls/responses_api.test.tsx diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx b/ui/litellm-dashboard/src/components/llm_calls/responses_api.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx rename to ui/litellm-dashboard/src/components/llm_calls/responses_api.tsx index 4e88a356cf..d3dd866b36 100644 --- a/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx +++ b/ui/litellm-dashboard/src/components/llm_calls/responses_api.tsx @@ -3,8 +3,8 @@ import { MessageType } from "../chat_ui/types"; import { TokenUsage } from "../chat_ui/ResponseMetrics"; import { getProxyBaseUrl } from "@/components/networking"; import NotificationManager from "@/components/molecules/notifications_manager"; -import type { MCPEvent } from "../../mcp_tools/types"; -import { MCPServer, MCPToolset } from "../../mcp_tools/types"; +import type { MCPEvent } from "@/components/mcp_tools/types"; +import { MCPServer, MCPToolset } from "@/components/mcp_tools/types"; import { CodeInterpreterResult, CodeInterpreterState, diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageBubble.tsx b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageBubble.tsx index 12189f2b2c..7d58465751 100644 --- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageBubble.tsx +++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageBubble.tsx @@ -3,7 +3,7 @@ import { RobotOutlined, UserOutlined } from "@ant-design/icons"; import ReactMarkdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { coy } from "react-syntax-highlighter/dist/esm/styles/prism"; -import ResponseMetrics from "../../../playground/chat_ui/ResponseMetrics"; +import ResponseMetrics from "@/components/chat_ui/ResponseMetrics"; import { Message } from "./types"; interface MessageBubbleProps { diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/types.ts b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/types.ts index b56f7b2f58..33d6f2dc7c 100644 --- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/types.ts +++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/types.ts @@ -1,4 +1,4 @@ -import { TokenUsage } from "../../../playground/chat_ui/ResponseMetrics"; +import { TokenUsage } from "@/components/chat_ui/ResponseMetrics"; export interface Message { role: string; diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/useConversation.ts b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/useConversation.ts index 7b595c777c..e55d8bdead 100644 --- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/useConversation.ts +++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/useConversation.ts @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from "react"; import NotificationsManager from "../../../molecules/notifications_manager"; -import { TokenUsage } from "../../../playground/chat_ui/ResponseMetrics"; +import { TokenUsage } from "@/components/chat_ui/ResponseMetrics"; import { Message } from "./types"; import { convertToDotPrompt, extractVariables } from "../utils"; import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "../../../networking"; diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx index 6ad8db19d8..5299ec0fce 100644 --- a/ui/litellm-dashboard/src/components/public_model_hub.tsx +++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx @@ -18,9 +18,9 @@ import { } from "./networking"; import { Plugin } from "./claude_code_plugins/types"; import SkillHubDashboard from "./AIHub/SkillHubDashboard"; -import { generateCodeSnippet } from "./playground/chat_ui/CodeSnippets"; -import { getEndpointType } from "./playground/chat_ui/mode_endpoint_mapping"; -import { MessageType } from "./playground/chat_ui/types"; +import { generateCodeSnippet } from "@/components/chat_ui/CodeSnippets"; +import { getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; +import { MessageType } from "@/components/chat_ui/types"; import { getProviderLogoAndName } from "./provider_info_helpers"; const { TabPane } = Tabs; diff --git a/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.test.tsx b/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.test.tsx index 459f7ed5dd..b43c74d71a 100644 --- a/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.test.tsx +++ b/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.test.tsx @@ -1,10 +1,10 @@ import { render, screen, fireEvent, waitFor, act } from "@testing-library/react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import S3VectorsConfig from "./S3VectorsConfig"; -import * as fetchModels from "../playground/llm_calls/fetch_models"; +import * as fetchModels from "@/components/llm_calls/fetch_models"; // Mock fetchAvailableModels -vi.mock("../playground/llm_calls/fetch_models", () => ({ +vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn(), })); diff --git a/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx b/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx index 0568f982ba..9f2c8f5e45 100644 --- a/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx +++ b/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { Alert, Form, Input, Select, Tooltip } from "antd"; import { InfoCircleOutlined } from "@ant-design/icons"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; interface S3VectorsConfigProps { accessToken: string | null; diff --git a/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreForm.tsx b/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreForm.tsx index 538292a243..4f0433025b 100644 --- a/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreForm.tsx +++ b/ui/litellm-dashboard/src/components/vector_store_management/VectorStoreForm.tsx @@ -10,7 +10,7 @@ import { getProviderSpecificFields, VectorStoreFieldConfig, } from "../vector_store_providers"; -import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models"; +import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import NotificationsManager from "../molecules/notifications_manager"; interface VectorStoreFormProps { diff --git a/ui/litellm-dashboard/src/utils/migratedPages.test.ts b/ui/litellm-dashboard/src/utils/migratedPages.test.ts index bd4ad7af5b..58958f7b64 100644 --- a/ui/litellm-dashboard/src/utils/migratedPages.test.ts +++ b/ui/litellm-dashboard/src/utils/migratedPages.test.ts @@ -40,6 +40,13 @@ describe("migratedHref / legacyPageHref", () => { expect(MIGRATED_PAGES.api_ref).toBe("api-reference"); expect(MIGRATED_PAGES["api-reference"]).toBe("api-reference"); }); + + it("maps the llm-playground sidebar id to the playground route", async () => { + vi.doMock("@/components/networking", () => ({ serverRootPath: "/" })); + const { MIGRATED_PAGES } = await import("./migratedPages"); + + expect(MIGRATED_PAGES["llm-playground"]).toBe("playground"); + }); }); describe("dev server (NODE_ENV=development)", () => { diff --git a/ui/litellm-dashboard/src/utils/migratedPages.ts b/ui/litellm-dashboard/src/utils/migratedPages.ts index d6f1e7d6f1..d911bf0566 100644 --- a/ui/litellm-dashboard/src/utils/migratedPages.ts +++ b/ui/litellm-dashboard/src/utils/migratedPages.ts @@ -12,6 +12,7 @@ export const MIGRATED_PAGES: Record = { api_ref: "api-reference", // Legacy alias: older bookmarks used the hyphenated ?page=api-reference form. "api-reference": "api-reference", + "llm-playground": "playground", }; function uiBase(): string {