diff --git a/src/components/auto-tooltip/title-tip.tsx b/src/components/auto-tooltip/title-tip.tsx index 524ac6f1..272a7e04 100644 --- a/src/components/auto-tooltip/title-tip.tsx +++ b/src/components/auto-tooltip/title-tip.tsx @@ -24,7 +24,7 @@ const TitleTip: React.FC = (props) => {
diff --git a/src/global.less b/src/global.less index 4f6c3dc5..70fd0466 100644 --- a/src/global.less +++ b/src/global.less @@ -827,18 +827,19 @@ body { .ant-tooltip-content { .ant-tooltip-inner { + width: max-content; + max-width: 300px; + + .text-tertiary { + color: var(--color-white-secondary); + } + a { color: var(--ant-color-link-hover); } } } -.ant-tooltip-inner { - .text-tertiary { - color: var(--color-white-secondary); - } -} - .light-downloading-tooltip { &.ant-tooltip .ant-tooltip-arrow::before { background: var(--color-white-1); diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts index 65ea2741..fb3a1a73 100644 --- a/src/locales/en-US/models.ts +++ b/src/locales/en-US/models.ts @@ -21,7 +21,8 @@ export default { 'model.form.ollama.model': 'Ollama Model', 'model.form.ollamaholder': 'Please select or input model name', 'model.deploy.sort': 'Sort', - 'model.deploy.search.placeholder': 'Search models from {source}', + 'model.deploy.search.placeholder': + 'Type / to search models from {source}', 'model.form.ollamatips': 'Tip: The following are the preconfigured Ollama models in GPUStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.', 'models.sort.name': 'Name', diff --git a/src/locales/ja-JP/models.ts b/src/locales/ja-JP/models.ts index dd38ee2c..11cfecdf 100644 --- a/src/locales/ja-JP/models.ts +++ b/src/locales/ja-JP/models.ts @@ -21,7 +21,8 @@ export default { 'model.form.ollama.model': 'Ollamaモデル', 'model.form.ollamaholder': 'モデル名を選択または入力してください', 'model.deploy.sort': '並び替え', - 'model.deploy.search.placeholder': '{source}からモデルを検索', + 'model.deploy.search.placeholder': + 'Type / to search models from {source}', 'model.form.ollamatips': 'ヒント: 以下はGPUStackで事前設定されたOllamaモデルです。希望するモデルを選択するか、右側の【{name}】入力ボックスにデプロイしたいモデルを直接入力してください。', 'models.sort.name': '名前', @@ -142,4 +143,5 @@ export default { // 10. 'models.form.distribution.tips, // 11. 'models.form.check.passed', // 12. 'models.form.check.claims', +// 13. 'model.deploy.search.placeholder', // ========== End of To-Do List ========== diff --git a/src/locales/ru-RU/models.ts b/src/locales/ru-RU/models.ts index cf5963b6..2bb8d798 100644 --- a/src/locales/ru-RU/models.ts +++ b/src/locales/ru-RU/models.ts @@ -21,7 +21,8 @@ export default { 'model.form.ollama.model': 'Модель Ollama', 'model.form.ollamaholder': 'Выберите или введите название модели', 'model.deploy.sort': 'Сортировка', - 'model.deploy.search.placeholder': 'Поиск моделей в {source}', + 'model.deploy.search.placeholder': + 'Type / to search models from {source}', 'model.form.ollamatips': 'Подсказка: ниже представлены предустановленные модели Ollama в GPUStack. Выберите нужную или введите модель для развертывания в поле 【{name}】 справа.', 'models.sort.name': 'По имени', @@ -134,4 +135,5 @@ export default { // ========== To-Do: Translate Keys (Remove After Translation) ========== // 1. 'models.form.check.passed', // 2. 'models.form.partialoffload.tips +// 3. 'model.deploy.search.placeholder' // ========== End of To-Do List ========== diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index ce2bf5cf..5fcbfedd 100644 --- a/src/locales/zh-CN/models.ts +++ b/src/locales/zh-CN/models.ts @@ -23,7 +23,7 @@ export default { 'model.form.ollama.model': 'Ollama 模型', 'model.form.ollamaholder': '请选择或输入模型名称', 'model.deploy.sort': '排序', - 'model.deploy.search.placeholder': '从 {source} 搜索模型', + 'model.deploy.search.placeholder': '按 / 开始从 {source} 搜索模型', 'model.form.ollamatips': '提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。', 'models.sort.name': '名称', diff --git a/src/pages/llmodels/components/search-input.tsx b/src/pages/llmodels/components/search-input.tsx index 31b9a8cf..df8a8667 100644 --- a/src/pages/llmodels/components/search-input.tsx +++ b/src/pages/llmodels/components/search-input.tsx @@ -4,8 +4,26 @@ import { useIntl } from '@umijs/max'; import { Input } from 'antd'; import React, { useRef } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; +import styled from 'styled-components'; import { modelSourceMap, modelSourceValueMap } from '../config'; +const SearchInputWrapper = styled.div` + position: relative; + width: 100%; +`; +const Holder = styled.div` + pointer-events: none; + position: absolute; + top: 12px; + left: 34px; + color: var(--ant-color-text-quaternary); + z-index: 10; + kbd { + border: 1px solid var(--ant-color-border); + border-radius: 3px; + padding: 0 2px; + } +`; const SearchInput: React.FC<{ modelSource: string; onChange: (e: any) => void; @@ -14,35 +32,58 @@ const SearchInput: React.FC<{ const { onSearch, onChange, modelSource } = props; const intl = useIntl(); const inputRef = useRef(null); + const [isFocused, setIsFocused] = React.useState(false); + const [value, setValue] = React.useState(''); useHotkeys(hotkeys.FOCUS, (e: any) => { e.preventDefault(); inputRef.current?.focus?.(); }); + const handleOnChange = (e: any) => { + setValue(e.target.value); + onChange(e); + }; + return ( - + { + setIsFocused(true); + e.stopPropagation(); + }} + onBlur={(e) => { + setIsFocused(false); + e.stopPropagation(); + }} + allowClear + prefix={ + + } + > + {!value && !isFocused && ( + )} - prefix={ - - } - > + ); };