Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-03 02:59:07 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(components): replace spans with Ellipsis for model labels

Browse Source 
Use Ellipsis component to handle text overflow in model labels for better readability
This commit is contained in:
icarus 2025-09-27 14:27:19 +08:00
parent 56580e3fac
commit 3111979bb4
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/src/components/ApiModelLabel.tsx
View File

@ -3,6 +3,8 @@ import { getModelLogo } from '@renderer/config/models'
import { ApiModel } from '@renderer/types'
import React from 'react'
import Ellipsis from './Ellipsis'
export interface ModelLabelProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
model?: ApiModel
classNames?: {
@ -18,9 +20,9 @@ export const ApiModelLabel: React.FC<ModelLabelProps> = ({ model, className, cla
return (
<div className={cn('flex items-center gap-1', className, classNames?.container)} {...props}>
<Avatar src={model ? getModelLogo(model.id) : undefined} className={cn('h-4 w-4', classNames?.avatar)} />
<span className={classNames?.modelName}>{model?.name}</span>
<Ellipsis className={classNames?.modelName}>{model?.name}</Ellipsis>
<span className={classNames?.divider}> | </span>
<span className={classNames?.providerName}>{model?.provider}</span>
<Ellipsis className={classNames?.providerName}>{model?.provider_name}</Ellipsis>
</div>
)
}