[Request] 模型选择列表,当鼠标在模型上停留的时候可否显示描述提示?

[SAnBlog]

🥰 需求描述

当多个厂家模型过多的时候,给朋友们用他们不清楚每个模型的能力和强度,需要写点描述

🧐 解决方案

可以在*_MODEL_LIST中进行扩展,如+glm-4-plus=GLM-4-Plus(智谱全自研 GLM 大模型的最新版本，各项性能与 GPT-4o 等第一梯队模型持平)

📝 补充信息

No response

[lobehubbot]

👀 @SAnBlog

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

🥰 Description of requirements

When there are too many models from multiple manufacturers, and they don’t know the capabilities and strength of each model for friends to use, they need to write some descriptions.

🧐 Solution

It can be expanded in *_MODEL_LIST, such as +glm-4-plus=GLM-4-Plus (the latest version of the GLM large model developed by Zhipu, its performance is the same as the first-tier models such as GPT-4o)

📝 Supplementary information

No response

[dosubot[bot]]

I found a similar open issue that requests adding a feature to display a model's description when hovering over it in the model selection list. You can check it out here ^[1].

To implement this feature, you can modify the OptionRender component to include a description tooltip. Here is an example of how you can do it:

import { Tooltip } from '@lobehub/ui'; // Ensure Tooltip is imported

const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure, removed }) => {
  const model = useUserStore((s) => modelProviderSelectors.getModelCardById(id)(s), isEqual);
  const { t } = useTranslation('components');
  const theme = useTheme();
  // if there is isCustom, it means it is a user defined custom model
  if (model?.isCustom || isAzure) return <CustomModelOption id={id} provider={provider} />;
  return (
    <Tooltip title={model?.description || 'No description available'}>
      <Flexbox
        align={'center'}
        gap={8}
        horizontal
        justify={'space-between'}
        style={{ paddingInlineEnd: 8 }}
      >
        <Flexbox align={'center'} gap={8} horizontal>
          <ModelIcon model={id} size={32} />
          <Flexbox>
            <Flexbox align={'center'} gap={8} horizontal>
              {displayName}
              <ModelInfoTags directionReverse placement={'top'} {...model!} />
            </Flexbox>
            <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
              {id}
            </Typography.Text>
          </Flexbox>
        </Flexbox>
        {removed && (
          <Tooltip
            overlayStyle={{ maxWidth: 300 }}
            placement={'top'}
            style={{ pointerEvents: 'none' }}
            title={t('ModelSelect.removed')}
          >
            <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />
          </Tooltip>
        )}
      </Flexbox>
    </Tooltip>
  );
});

export default OptionRender;

This code wraps the entire Flexbox component inside a Tooltip component, which will display the model's description when hovered over. If the model does not have a description, it will display "No description available" ^[2][3].

To continue talking to Dosu, mention @dosu.

[sxjeru]

@arvinxx 请问目前 ChatModelCard 中的 description 有显示出来吗？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@arvinxx Is the description in ChatModelCard currently displayed?

[arvinxx]

@sxjeru 没有，后续可以用这个来显示

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@sxjeru No, you can use this to display later