diff --git a/packages/dashboard/app/components/NewTaskModal.tsx b/packages/dashboard/app/components/NewTaskModal.tsx index d812421b8..0b56cdc13 100644 --- a/packages/dashboard/app/components/NewTaskModal.tsx +++ b/packages/dashboard/app/components/NewTaskModal.tsx @@ -1,9 +1,10 @@ -import { useState, useCallback, useEffect, useRef } from "react"; +import { useState, useCallback, useEffect, useRef, useMemo } from "react"; import type { Task, TaskCreateInput } from "@kb/core"; import type { ToastType } from "../hooks/useToast"; import { uploadAttachment, fetchModels, updateTask } from "../api"; import type { ModelInfo } from "../api"; import { filterModels } from "../utils/modelFilter"; +import { ProviderIcon } from "./ProviderIcon"; const ALLOWED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]; @@ -57,6 +58,13 @@ function ModelCombobox({ return acc; }, {}); + // Get current provider from value for icon display + const currentProvider = useMemo(() => { + if (!value) return null; + const slashIdx = value.indexOf("/"); + return slashIdx === -1 ? null : value.slice(0, slashIdx); + }, [value]); + const optionsList = [ { type: "default" as const, value: "", label: "Use default" }, ...Object.entries(modelsByProvider).flatMap(([provider, providerModels]) => [ @@ -191,6 +199,11 @@ function ModelCombobox({ aria-expanded={isOpen} aria-label={label} > + {currentProvider && ( + + + + )} {selectedDisplayText} @@ -247,7 +260,8 @@ function ModelCombobox({ className="model-combobox-optgroup" data-index={groupStartIndex} > - {provider} + + {provider} {providerModels.map((m) => { const optionValue = `${m.provider}/${m.id}`; diff --git a/packages/dashboard/app/components/ProviderIcon.tsx b/packages/dashboard/app/components/ProviderIcon.tsx index 89e6b5a8f..91c2d789c 100644 --- a/packages/dashboard/app/components/ProviderIcon.tsx +++ b/packages/dashboard/app/components/ProviderIcon.tsx @@ -11,7 +11,7 @@ const sizeMap = { lg: 24, }; -// Anthropic "A" monogram logo - diamond-shaped stylized A in warm tan +// Anthropic "A" logo from SimpleIcons function AnthropicIcon({ size, color }: { size: number; color: string }) { return ( - ); } -// OpenAI spiral flower logo - green +// OpenAI flower logo from Iconify/SimpleIcons function OpenAIIcon({ size, color }: { size: number; color: string }) { return ( - - ); } -// Google Gemini sparkle icon - blue +// Google Gemini sparkle logo from SimpleIcons function GeminiIcon({ size, color }: { size: number; color: string }) { return ( - ); } -// Ollama llama head logo - white +// Ollama llama head logo from SimpleIcons function OllamaIcon({ size, color }: { size: number; color: string }) { return ( - {/* Llama head silhouette */} - {/* Ears */} - - - {/* Eyes */} - - - {/* Nose */} - ); }