style: shortcut for start to search model

src/components/auto-tooltip/title-tip.tsx

@@ -24,7 +24,7 @@ const TitleTip: React.FC<TitleTipProps> = (props) => {
       <div
         style={{
           width: 'max-content',
-          maxWidth: 250,
+          maxWidth: 300,
           paddingInline: 10
         }}
       >

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);

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 <kbd>/</kbd> 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',

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 <kbd>/</kbd> 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 ==========

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 <kbd>/</kbd> 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 ==========

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': '按 <kbd>/</kbd> 开始从 {source} 搜索模型',
   'model.form.ollamatips':
     '提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
   'models.sort.name': '名称',

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<any>(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 (
-    <Input
+    <SearchInputWrapper>
-      ref={inputRef}
+      <Input
-      onPressEnter={onSearch}
+        ref={inputRef}
-      onChange={onChange}
+        onPressEnter={onSearch}
-      allowClear
+        onChange={handleOnChange}
-      placeholder={intl.formatMessage(
+        onFocus={(e) => {
-        {
+          setIsFocused(true);
-          id: 'model.deploy.search.placeholder'
+          e.stopPropagation();
-        },
+        }}
-        { source: modelSourceValueMap[modelSource] }
+        onBlur={(e) => {
+          setIsFocused(false);
+          e.stopPropagation();
+        }}
+        allowClear
+        prefix={
+          <IconFont
+            className="font-size-16"
+            type={
+              modelSource === modelSourceMap.huggingface_value
+                ? 'icon-huggingface'
+                : 'icon-tu2'
+            }
+          ></IconFont>
+        }
+      ></Input>
+      {!value && !isFocused && (
+        <Holder
+          dangerouslySetInnerHTML={{
+            __html: intl.formatMessage(
+              {
+                id: 'model.deploy.search.placeholder'
+              },
+              { source: modelSourceValueMap[modelSource] }
+            )
+          }}
+        ></Holder>
       )}
-      prefix={
+    </SearchInputWrapper>
-        <IconFont
-          className="font-size-16"
-          type={
-            modelSource === modelSourceMap.huggingface_value
-              ? 'icon-huggingface'
-              : 'icon-tu2'
-          }
-        ></IconFont>
-      }
-    ></Input>
   );
 };