diff --git a/src/modules/llms/models-modal/ModelsList.tsx b/src/modules/llms/models-modal/ModelsList.tsx index 087b0ad1e..dac631601 100644 --- a/src/modules/llms/models-modal/ModelsList.tsx +++ b/src/modules/llms/models-modal/ModelsList.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import type { SxProps } from '@mui/joy/styles/types'; import { Box, Chip, IconButton, List, ListItem, ListItemButton, Typography } from '@mui/joy'; import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined'; -import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'; import SdCardOutlinedIcon from '@mui/icons-material/SdCardOutlined'; import TextsmsOutlinedIcon from '@mui/icons-material/TextsmsOutlined'; import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; @@ -12,6 +11,7 @@ import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import type { DModelsServiceId } from '~/common/stores/llms/llms.service.types'; import { DLLM, DLLMId, LLM_IF_ANT_PromptCaching, LLM_IF_GEM_CodeExecution, LLM_IF_OAI_Chat, LLM_IF_OAI_Complete, LLM_IF_OAI_Fn, LLM_IF_OAI_Json, LLM_IF_OAI_PromptCaching, LLM_IF_OAI_Realtime, LLM_IF_OAI_Reasoning, LLM_IF_OAI_Vision } from '~/common/stores/llms/llms.types'; import { GoodTooltip } from '~/common/components/GoodTooltip'; +import { PhGearSixIcon } from '~/common/components/icons/phosphor/PhGearSixIcon'; import { findModelsServiceOrNull, llmsStoreActions } from '~/common/stores/llms/store-llms'; import { useLLMsByService } from '~/common/stores/llms/llms.hooks'; import { useIsMobile } from '~/common/components/useMatchMedia'; @@ -27,6 +27,36 @@ const SHOW_LLM_INTERFACES = false; const absorbListPadding: SxProps = { my: 'calc(var(--ListItem-paddingY) / -2)' }; +const styles = { + liButton: { + border: 'none', + width: '100%', + display: 'flex', + alignItems: 'center', + gap: { + xs: 0.5, + md: 1, + } as const, + } as const, + modelText: { + flex: 1, + wordBreak: 'break-all', + } as const, + modelHiddenText: { + flex: 1, + wordBreak: 'break-all', + color: 'neutral.plainDisabledColor', + } as const, + chip: { + // boxShadow: 'sm', + } as const, + chipFree: { + // boxShadow: 'sm', + boxShadow: 'md', + } as const, +} as const; + + function ModelItem(props: { llm: DLLM, serviceLabel: string, @@ -43,6 +73,9 @@ function ModelItem(props: { // derived const { llm, onModelClicked, onModelSetHidden /*, onModelSetStarred*/ } = props; + const seemsFree = !!llm.pricing?.chat?._isFree; + + const handleLLMConfigure = React.useCallback((event: React.MouseEvent) => { event.stopPropagation(); if (event.shiftKey) { @@ -83,7 +116,7 @@ function ModelItem(props: { tooltip += ' / ' + llm.maxOutputTokens.toLocaleString() + ' max output tokens'; } else tooltip += ' Ā· token count not provided'; - if (llm.pricing?.chat?._isFree) + if (seemsFree) tooltip += '\n\nšŸŽ Free model - refresh to check for pricing updates'; const chipsComponentsMemo = React.useMemo(() => { @@ -115,26 +148,23 @@ function ModelItem(props: { {/* Model Name */} - + {(/*props.isMobile &&*/ llm.userStarred) ? `⭐ ${llm.label}` : llm.label} {/*{labelWithoutDate}{labelDate && Ā· ({labelDate})}*/} + {seemsFree && !llm.label.startsWith('šŸ”—') && free} + {/* Chips */} {SHOW_LLM_INTERFACES ? (chipsComponentsMemo && ( )) : <> - {props.chipChat && chat} - {props.chipCode && code} - {props.chipFast && fast} + {props.chipChat && chat} + {props.chipCode && code} + {props.chipFast && fast} } {/* Action Buttons */} - {/*{!props.isMobile && */} - {/* */} - {/* {llm.userStarred ? : }*/} - {/* */} - {/*}*/} + - {!props.isMobile && - - {llm.hidden ? : } - - } + {/*{!props.isMobile && */} + {/* */} + {/* {llm.userStarred ? : }*/} + {/* */} + {/*}*/} - - - - - + {!props.isMobile && + + {llm.hidden ? : } + + } + + + + + + + +