fix: validate name assistant and improve area clickable

web-app/src/containers/DropdownAssistant.tsx

@@ -1,100 +1,100 @@
 import { useState } from 'react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { useAssistant } from '@/hooks/useAssistant'
 import AddEditAssistant from './dialogs/AddEditAssistant'
 import { IconCirclePlus, IconSettings } from '@tabler/icons-react'
 import { useThreads } from '@/hooks/useThreads'
 import { AvatarEmoji } from '@/containers/AvatarEmoji'
 
 const DropdownAssistant = () => {
   const {
     assistants,
     currentAssistant,
     addAssistant,
     updateAssistant,
     setCurrentAssistant,
   } = useAssistant()
   const { updateCurrentThreadAssistant } = useThreads()
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const [dialogOpen, setDialogOpen] = useState(false)
   const [editingAssistantId, setEditingAssistantId] = useState<string | null>(
     null
   )
 
   const selectedAssistant =
     assistants.find((a) => a.id === currentAssistant.id) || assistants[0]
 
   return (
     <>
       <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
         <div className="flex items-center justify-between gap-2 bg-main-view-fg/5 py-1 hover:bg-main-view-fg/8 px-2 rounded-sm">
           <DropdownMenuTrigger asChild>
             <button className="font-medium cursor-pointer flex items-center gap-1.5 relative z-20 max-w-40">
               <div className="text-main-view-fg/80 flex items-center gap-1">
                 {selectedAssistant?.avatar && (
                   <span className="shrink-0 w-4 h-4 relative flex items-center justify-center">
                     <AvatarEmoji
                       avatar={selectedAssistant.avatar}
                       imageClassName="object-cover"
                       textClassName="text-sm"
                     />
                   </span>
                 )}
                 <div className="truncate max-w-30">
                   <span>{selectedAssistant?.name || 'Jan'}</span>
                 </div>
               </div>
             </button>
           </DropdownMenuTrigger>
           <div
             className="size-5 cursor-pointer relative z-10 flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out "
             onClick={() => {
               if (selectedAssistant) {
                 setEditingAssistantId(selectedAssistant.id)
                 setDialogOpen(true)
               }
             }}
           >
             <IconSettings
               size={16}
               className="text-main-view-fg/50"
               title="Edit Assistant"
             />
           </div>
         </div>
         <DropdownMenuContent
           className="w-44 max-h-[320px]"
           side="bottom"
           sideOffset={10}
           align="start"
         >
           {assistants.map((assistant) => (
             <div
               className="relative pr-6 hover:bg-main-view-fg/4 rounded-sm"
               key={assistant.id}
             >
               <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)
                   }}
                 >
                   {assistant?.avatar && (
                     <div className="shrink-0 relative w-4 h-4">
                       <AvatarEmoji
                         avatar={assistant?.avatar}
                         imageClassName="object-cover"
                         textClassName=""
                       />
                     </div>
                   )}
 
                   <div className="text-left">

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",
@@ -29,4 +30,4 @@
   "createNew": "Create New Assistant",
   "personality": "Personality",
   "capabilities": "Capabilities"
-}
+}

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",
@@ -29,4 +30,4 @@
   "createNew": "Buat Asisten Baru",
   "personality": "Kepribadian",
   "capabilities": "Kemampuan"
-}
+}

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",
@@ -29,4 +30,4 @@
   "createNew": "Tạo Trợ lý Mới",
   "personality": "Tính cách",
   "capabilities": "Khả năng"
-}
+}

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

@@ -10,6 +10,7 @@
   "emoji": "表情符号",
   "name": "名称",
   "enterName": "输入名称",
+  "nameRequired": "名称为必填项",
   "description": "描述（可选）",
   "enterDescription": "输入描述",
   "instructions": "说明",
@@ -29,4 +30,4 @@
   "createNew": "创建新助手",
   "personality": "个性",
   "capabilities": "能力"
-}
+}

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

@@ -10,6 +10,7 @@
   "emoji": "表情符號",
   "name": "名稱",
   "enterName": "輸入名稱",
+  "nameRequired": "名稱為必填項",
   "description": "描述（可選）",
   "enterDescription": "輸入描述",
   "instructions": "指示",
@@ -29,4 +30,4 @@
   "createNew": "建立新助理",
   "personality": "個性",
   "capabilities": "能力"
-}
+}