Add error messages for spaces around select label and options

Author: Takahiro Kubo

Diff for: packages/web/public/locales/translation/en.yaml

@@ -843,6 +843,10 @@ useCaseBuilder:
     rag_knowledge_base_not_enabled: >-
       {{retrieveKnowledgeBase}} is specified in the prompt template, but RAG
       Chat (Knowledge Base) is not enabled in GenU.
+    spaces_in_label: >-
+      Remove any white spaces before and after {{label}}.
+    spaces_in_value: >-
+      Remove any white spaces before and after options of {{label}}.
   favorites: Favorites
   fileUploadDescription: Users can upload files for the LLM to reference the content.
   fileUploadDisabled: Disable file upload

Diff for: packages/web/public/locales/translation/ja.yaml

@@ -720,6 +720,8 @@ useCaseBuilder:
     rag_knowledge_base_not_enabled: >-
       プロンプトテンプレート内で {{retrieveKnowledgeBase}} が指定されていますが GenU で RAG チャット
       (Knowledge Base) が有効になっていません。
+    spaces_in_label: '{{label}}の前後にある空白を削除してください。'
+    spaces_in_value: '{{label}}の値は、前後に空白を含まないよう設定してください。'
   favorites: お気に入り
   fileUploadDescription: 添付可能なファイルはモデルによって異なります
   fileUploadDisabled: ファイルは添付できません

Diff for: packages/web/src/components/useCaseBuilder/UseCaseBuilderView.tsx

@@ -280,6 +280,14 @@ const UseCaseBuilderView: React.FC<Props> = (props) => {
       }
     }
 
+    for (const item of items) {
+      if (item.label != item.label.trim()) {
+        tmpErrorMessages.push(
+          t('useCaseBuilder.error.spaces_in_label', {label: item.label})
+        );
+      }
+    }
+
     for (const item of selectItems) {
       if (!item.options || item.options.length === 0) {
         tmpErrorMessages.push(t('useCaseBuilder.error.missing_select_options'));
@@ -295,6 +303,16 @@ const UseCaseBuilderView: React.FC<Props> = (props) => {
           );
         }
 
+        // Check for options with leading/trailing spaces
+        const spacedOptions = options.filter((o) => o !== o.trim());
+        if (spacedOptions.length > 0) {
+          tmpErrorMessages.push(
+            t('useCaseBuilder.error.spaces_in_value', {
+              label: item.label
+            })
+          );
+        }
+
         const uniqueOptions = options.filter(
           (elem, idx, self) => self.findIndex((e) => e === elem) === idx
         );