prompt optimze loading (#5461)

packages/web/i18n/en/app.json

@@ -18,8 +18,10 @@
   "Optimizer_EmptyPrompt": "Please enter optimization requirements",
   "Optimizer_Generating": "Generating...",
   "Optimizer_Placeholder": "How do you want to write or optimize prompt words?",
+  "Optimizer_Placeholder_loading": "Generating...please wait",
   "Optimizer_Reoptimize": "Re-optimize",
   "Optimizer_Replace": "replace",
+  "Optimizer_Tooltip": "AI Optimization",
   "Role_setting": "Permission",
   "Run": "Execute",
   "Search_dataset": "Search dataset",

packages/web/i18n/zh-CN/app.json

@@ -18,8 +18,10 @@
   "Optimizer_EmptyPrompt": "请输入优化要求",
   "Optimizer_Generating": "生成中…",
   "Optimizer_Placeholder": "你希望如何编写或优化提示词？",
+  "Optimizer_Placeholder_loading": "正在生成...请稍候",
   "Optimizer_Reoptimize": "重新优化",
   "Optimizer_Replace": "替换",
+  "Optimizer_Tooltip": "AI 优化",
   "Role_setting": "权限设置",
   "Run": "运行",
   "Search_dataset": "搜索知识库",

packages/web/i18n/zh-Hant/app.json

@@ -18,8 +18,10 @@
   "Optimizer_EmptyPrompt": "請輸入優化要求",
   "Optimizer_Generating": "生成中…",
   "Optimizer_Placeholder": "你希望如何編寫或優化提示詞？",
+  "Optimizer_Placeholder_loading": "正在生成...請稍候",
   "Optimizer_Reoptimize": "重新優化",
   "Optimizer_Replace": "替換",
+  "Optimizer_Tooltip": "AI 優化",
   "Role_setting": "權限設定",
   "Run": "執行",
   "Search_dataset": "搜尋知識庫",

projects/app/src/components/common/PromptEditor/OptimizerPopover/index.tsx

@@ -12,6 +12,7 @@ import { useLocalStorageState } from 'ahooks';
 import AIModelSelector from '../../../Select/AIModelSelector';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { onOptimizePrompt } from '@/web/common/api/fetch';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 
 export type OptimizerPromptProps = {
   onChangeText: (text: string) => void;
@@ -120,7 +121,9 @@ const OptimizerPopover = ({
       <MyPopover
         Trigger={
           <Flex {...iconButtonStyle}>
-            <MyIcon name={'optimizer'} w={'18px'} />
+            <MyTooltip label={t('app:Optimizer_Tooltip')}>
+              <MyIcon name={'optimizer'} w={'18px'} />
+            </MyTooltip>
           </Flex>
         }
         trigger="click"
@@ -155,7 +158,7 @@ const OptimizerPopover = ({
               )}
               {/* Button */}
               <Flex mb={3} alignItems={'center'} gap={3}>
-                {!loading && (
+                {!loading ? (
                   <>
                     {!optimizedResult && !!defaultPrompt && (
                       <Button
@@ -197,22 +200,24 @@ const OptimizerPopover = ({
                         </Button>
                       </>
                     )}
-                  </>
-                )}
 
-                <Box flex={1} />
+                    <Box flex={1} />
-                {modelOptions && modelOptions.length > 0 && (
+                    {modelOptions && modelOptions.length > 0 && (
-                  <AIModelSelector
+                      <AIModelSelector
-                    borderColor={'transparent'}
+                        borderColor={'transparent'}
-                    _hover={{
+                        _hover={{
-                      border: '1px solid',
+                          border: '1px solid',
-                      borderColor: 'primary.400'
+                          borderColor: 'primary.400'
-                    }}
+                        }}
-                    size={'sm'}
+                        size={'sm'}
-                    value={selectedModel}
+                        value={selectedModel}
-                    list={modelOptions}
+                        list={modelOptions}
-                    onChange={setSelectedModel}
+                        onChange={setSelectedModel}
-                  />
+                      />
+                    )}
+                  </>
+                ) : (
+                  <MyIcon name={'common/ellipsis'} w={6} ml={3} color={'myGray.400'} />
                 )}
               </Flex>
 
@@ -229,7 +234,11 @@ const OptimizerPopover = ({
               >
                 <MyIcon name={'optimizer'} alignSelf={'flex-start'} mt={0.5} w={5} />
                 <Textarea
-                  placeholder={t('app:Optimizer_Placeholder')}
+                  placeholder={
+                    !loading
+                      ? t('app:Optimizer_Placeholder')
+                      : t('app:Optimizer_Placeholder_loading')
+                  }
                   resize={'none'}
                   rows={1}
                   minHeight={'24px'}