chore : code generator preview hint (#10188)

web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx

@@ -105,6 +105,15 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       <div className='text-[13px] text-gray-400'>{t('appDebug.codegen.loading')}</div>
     </div>
   )
+  const renderNoData = (
+    <div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'>
+      <Generator className='w-14 h-14 text-gray-300' />
+      <div className='leading-5 text-center text-[13px] font-normal text-gray-400'>
+        <div>{t('appDebug.codegen.noDataLine1')}</div>
+        <div>{t('appDebug.codegen.noDataLine2')}</div>
+      </div>
+    </div>
+  )
 
   return (
     <Modal
@@ -157,6 +166,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
         </div>
         {isLoading && renderLoading}
+        {!isLoading && !res && renderNoData}
         {(!isLoading && res) && (
           <div className='w-0 grow p-6 pb-0 h-full'>
             <div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.codegen.resTitle')}</div>

web/i18n/en-US/app-debug.ts

@@ -224,6 +224,8 @@ const translation = {
     description: 'The Code Generator uses configured models to generate high-quality code based on your instructions. Please provide clear and detailed instructions.',
     instruction: 'Instructions',
     instructionPlaceholder: 'Enter detailed description of the code you want to generate.',
+    noDataLine1: 'Describe your use case on the left,',
+    noDataLine2: 'the code preview will show here.',
     generate: 'Generate',
     generatedCodeTitle: 'Generated Code',
     loading: 'Generating code...',

web/i18n/ja-JP/app-debug.ts

@@ -224,6 +224,8 @@ const translation = {
     description: 'コードジェネレーターは、設定されたモデルを使用して指示に基づいて高品質なコードを生成します。明確で詳細な指示を提供してください。',
     instruction: '指示',
     instructionPlaceholder: '生成したいコードの詳細な説明を入力してください。',
+    noDataLine1: '左側に使用例を記入してください,',
+    noDataLine2: 'コードのプレビューがこちらに表示されます。',
     generate: '生成',
     generatedCodeTitle: '生成されたコード',
     loading: 'コードを生成中...',

web/i18n/zh-Hans/app-debug.ts

@@ -224,6 +224,8 @@ const translation = {
     description: '代码生成器使用配置的模型根据您的指令生成高质量的代码。请提供清晰详细的说明。',
     instruction: '指令',
     instructionPlaceholder: '请输入您想要生成的代码的详细描述。',
+    noDataLine1: '在左侧描述您的用例，',
+    noDataLine2: '代码预览将在此处显示。',
     generate: '生成',
     generatedCodeTitle: '生成的代码',
     loading: '正在生成代码...',