Fix: Optimize the MultiSelect component and system prompt templates #3221 (#9752)

### What problem does this PR solve?

Fix: Optimize the MultiSelect component and system prompt templates
#3221

- Modify the conditional statements in the MultiSelect component, using
the ?. operator to improve code readability
- Optimize the formatting of the system prompt template to make it more
standardized and easier to read
- Update the Chinese translation, changing "ExeSQL" to "Execute SQL"

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/components/ui/multi-select.tsx

@@ -209,13 +209,13 @@ export const MultiSelect = React.forwardRef<
     const [isAnimating, setIsAnimating] = React.useState(false);
 
     React.useEffect(() => {
-      if (!selectedValues && props.value) {
+      if (!selectedValues?.length && props.value) {
         setSelectedValues(props.value as string[]);
       }
     }, [props.value, selectedValues]);
 
     React.useEffect(() => {
-      if (!selectedValues && !props.value && defaultValue) {
+      if (!selectedValues?.length && !props.value && defaultValue) {
         setSelectedValues(defaultValue);
       }
     }, [defaultValue, props.value, selectedValues]);

web/src/locales/en.ts

@@ -916,16 +916,17 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       maxRetries: 'Max retries',
       advancedSettings: 'Advanced Settings',
       addTools: 'Add Tools',
-      sysPromptDefultValue: `<role>
-  You are {{agent_name}}, an AI assistant specialized in {{domain_or_task}}.
-</role>
-<instructions>
-  1. Understand the user’s request.  
-  2. Decompose it into logical subtasks.  
-  3. Execute each subtask step by step, reasoning transparently.  
-  4. Validate accuracy and consistency.  
-  5. Summarize the final result clearly.
-</instructions>`,
+      sysPromptDefultValue: `
+      <role>
+        You are {{agent_name}}, an AI assistant specialized in {{domain_or_task}}.
+      </role>
+      <instructions>
+        1. Understand the user’s request.  
+        2. Decompose it into logical subtasks.  
+        3. Execute each subtask step by step, reasoning transparently.  
+        4. Validate accuracy and consistency.  
+        5. Summarize the final result clearly.
+      </instructions>`,
       singleLineText: 'Single-line text',
       multimodalModels: 'Multimodal Models',
       textOnlyModels: 'Text-only Models',

web/src/locales/zh.ts

@@ -872,16 +872,17 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       maxRetries: '最大重试次数',
       advancedSettings: '高级设置',
       addTools: '添加工具',
-      sysPromptDefultValue: `<role>
-        您是{{agent_name}}，一位专注于{{领域_or_任务}}的AI助手。
-        </role>
-        <instructions>
+      sysPromptDefultValue: `
+<role>
+        你是{{agent_name}}，一位专注于{{领域_or_任务}}的AI助手。
+</role>
+<instructions>
         1. 理解用户请求。
         2. 将其分解为逻辑子任务。
         3. 逐步执行每个子任务，并清晰地进行推理。
         4. 验证准确性和一致性。
         5. 清晰地总结最终结果。
-        </instructions>`,
+</instructions>`,
       line: '单行文本',
       paragraph: '段落文字',
       options: '选项',
@@ -1129,7 +1130,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
         '30d': '30天',
       },
       publish: 'API',
-      exeSQL: 'ExeSQL',
+      exeSQL: '执行 SQL',
       exeSQLDescription:
         '该组件通过SQL语句从相应的关系数据库中查询结果。支持MySQL，PostgreSQL，MariaDB。',
       dbType: '数据库类型',