fix: validate name assistant and improve area clickable (#5920)

web-app/src/containers/DropdownAssistant.tsx

@@ -81,7 +81,7 @@ const DropdownAssistant = () => {
             >
               <DropdownMenuItem className="hover:bg-transparent">
                 <div
-                  className="text-main-view-fg/70 cursor-pointer flex gap-2"
+                  className="text-main-view-fg/70 cursor-pointer flex gap-2 w-full"
                   onClick={() => {
                     setCurrentAssistant(assistant)
                     updateCurrentThreadAssistant(assistant)

web-app/src/containers/dialogs/AddEditAssistant.tsx

@@ -61,6 +61,7 @@ export default function AddEditAssistant({
   const [paramsTypes, setParamsTypes] = useState<string[]>(['string'])
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const emojiPickerRef = useRef<HTMLDivElement>(null)
+  const [nameError, setNameError] = useState<string | null>(null)
 
   // Handle click outside emoji picker
   useEffect(() => {
@@ -118,6 +119,7 @@ export default function AddEditAssistant({
     setParamsKeys([''])
     setParamsValues([''])
     setParamsTypes(['string'])
+    setNameError(null)
   }
 
   const handleParameterChange = (
@@ -193,6 +195,11 @@ export default function AddEditAssistant({
   }
 
   const handleSave = () => {
+    if (!name.trim()) {
+      setNameError(t('assistants:nameRequired'))
+      return
+    }
+    setNameError(null)
     // Convert parameters arrays to object
     const parameters: Record<string, unknown> = {}
     paramsKeys.forEach((key, index) => {
@@ -275,13 +282,22 @@ export default function AddEditAssistant({
               </label>
               <Input
                 value={name}
-                onChange={(e) => setName(e.target.value)}
+                onChange={(e) => {
+                  setName(e.target.value)
+                  if (e.target.value.trim()) setNameError(null)
+                }}
                 placeholder={t('assistants:enterName')}
                 autoFocus
               />
             </div>
           </div>
 
+          {nameError && (
+            <div className="ml-12 text-xs text-destructive mt-1">
+              {nameError}
+            </div>
+          )}
+
           <div className="space-y-2">
             <label className="text-sm mb-2 inline-block">
               {t('assistants:description')}

web-app/src/locales/de-DE/assistants.json

@@ -10,6 +10,7 @@
   "emoji": "Emoji",
   "name": "Name",
   "enterName": "Namen eingeben",
+  "nameRequired": "Name ist erforderlich",
   "description": "Beschreibung (optional)",
   "enterDescription": "Beschreibung eingeben",
   "instructions": "Anweisungen",

web-app/src/locales/en/assistants.json

@@ -10,6 +10,7 @@
   "emoji": "Emoji",
   "name": "Name",
   "enterName": "Enter name",
+  "nameRequired": "Name is required",
   "description": "Description (optional)",
   "enterDescription": "Enter description",
   "instructions": "Instructions",

web-app/src/locales/id/assistants.json

@@ -10,6 +10,7 @@
   "emoji": "Emoji",
   "name": "Nama",
   "enterName": "Masukkan nama",
+  "nameRequired": "Nama wajib diisi",
   "description": "Deskripsi (opsional)",
   "enterDescription": "Masukkan deskripsi",
   "instructions": "Instruksi",

web-app/src/locales/vn/assistants.json

@@ -10,6 +10,7 @@
   "emoji": "Biểu tượng",
   "name": "Tên",
   "enterName": "Nhập tên",
+  "nameRequired": "Tên là bắt buộc",
   "description": "Mô tả (tùy chọn)",
   "enterDescription": "Nhập mô tả",
   "instructions": "Hướng dẫn",

web-app/src/locales/zh-CN/assistants.json

@@ -10,6 +10,7 @@
   "emoji": "表情符号",
   "name": "名称",
   "enterName": "输入名称",
+  "nameRequired": "名称为必填项",
   "description": "描述（可选）",
   "enterDescription": "输入描述",
   "instructions": "说明",

web-app/src/locales/zh-TW/assistants.json

@@ -10,6 +10,7 @@
   "emoji": "表情符號",
   "name": "名稱",
   "enterName": "輸入名稱",
+  "nameRequired": "名稱為必填項",
   "description": "描述（可選）",
   "enterDescription": "輸入描述",
   "instructions": "指示",