From 01e8f6066a913aac92e1d7a661fe762c158e9619 Mon Sep 17 00:00:00 2001
From: Kota-Yamaguchi <50980947+Kota-Yamaguchi@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:45:07 +0900
Subject: [PATCH] chore : code generator preview hint (#10188)

---
 .../config/code-generator/get-code-generator-res.tsx   | 10 ++++++++++
 web/i18n/en-US/app-debug.ts                            |  2 ++
 web/i18n/ja-JP/app-debug.ts                            |  2 ++
 web/i18n/zh-Hans/app-debug.ts                          |  2 ++
 4 files changed, 16 insertions(+)

diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index b63e3e2693..85c522ca0f 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/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>
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index b2144262f6..e17afc38bf 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/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...',
diff --git a/web/i18n/ja-JP/app-debug.ts b/web/i18n/ja-JP/app-debug.ts
index 620d9b2f55..05e81a2ae2 100644
--- a/web/i18n/ja-JP/app-debug.ts
+++ b/web/i18n/ja-JP/app-debug.ts
@@ -224,6 +224,8 @@ const translation = {
     description: 'コードジェネレーターは、設定されたモデルを使用して指示に基づいて高品質なコードを生成します。明確で詳細な指示を提供してください。',
     instruction: '指示',
     instructionPlaceholder: '生成したいコードの詳細な説明を入力してください。',
+    noDataLine1: '左側に使用例を記入してください,',
+    noDataLine2: 'コードのプレビューがこちらに表示されます。',
     generate: '生成',
     generatedCodeTitle: '生成されたコード',
     loading: 'コードを生成中...',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 3e801bcf62..9e21945755 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -224,6 +224,8 @@ const translation = {
     description: '代码生成器使用配置的模型根据您的指令生成高质量的代码。请提供清晰详细的说明。',
     instruction: '指令',
     instructionPlaceholder: '请输入您想要生成的代码的详细描述。',
+    noDataLine1: '在左侧描述您的用例，',
+    noDataLine2: '代码预览将在此处显示。',
     generate: '生成',
     generatedCodeTitle: '生成的代码',
     loading: '正在生成代码...',