🐛 Modify the title and content of the construction of agent

Author: Phinease

frontend/app/[locale]/chat/components/chatAgentSelector.tsx

@@ -305,7 +305,7 @@ export function ChatAgentSelector({
                     <div
                       key={agent.agent_id}
                       className={`
-                      flex items-start gap-3 px-3.5 py-3 text-sm
+                      flex items-start gap-3 px-3.5 py-3 text-sm h-[60px]
                       transition-all duration-150 ease-in-out
                       ${
                         agent.is_available
@@ -351,27 +351,37 @@ export function ChatAgentSelector({
                               : "text-slate-400"
                           }`}
                         >
-                          {agent.display_name && (
-                            <span className="text-sm leading-none">
-                              {agent.display_name}
+                          <div className="flex items-center">
+                            {agent.display_name && (
+                              <span className="text-sm leading-none">
+                                {agent.display_name}
+                              </span>
+                            )}
+                            <span
+                              className={`text-sm leading-none align-baseline ${
+                                agent.display_name ? "ml-2" : "text-sm"
+                              }`}
+                            >
+                              {agent.name}
                             </span>
-                          )}
-                          <span
-                            className={`text-sm leading-none align-baseline ${
-                              agent.display_name ? "ml-2" : "text-sm"
-                            }`}
-                          >
-                            {agent.name}
-                          </span>
+                          </div>
                         </div>
                         <div
-                          className={`text-xs mt-1 leading-relaxed ${
+                          className={`text-xs mt-1 leading-relaxed overflow-hidden ${
                             agent.is_available
                               ? selectedAgentId === agent.agent_id
                                 ? "text-blue-500"
                                 : "text-slate-500"
                               : "text-slate-300"
                           }`}
+                          style={{
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            maxHeight: '2rem'
+                          }}
                         >
                           {agent.description}
                           {!agent.is_available && (

frontend/app/[locale]/setup/agents/components/agent/SubAgentPool.tsx

@@ -182,7 +182,7 @@ export default function SubAgentPool({
                     <Tooltip key={agent.id}>
                       <TooltipTrigger asChild>
                         <div
-                          className={`py-2 px-2 flex flex-col justify-center transition-colors border-t border-gray-200 ${
+                          className={`py-3 px-2 flex flex-col justify-center transition-colors border-t border-gray-200 h-[80px] ${
                             isCurrentlyEditing
                               ? "bg-blue-50 border-l-4 border-l-blue-500" // Highlight editing agent, add left vertical line
                               : !isAvailable
@@ -214,7 +214,7 @@ export default function SubAgentPool({
                                   !isAvailable ? "text-gray-500" : ""
                                 }`}
                               >
-                                <span className="flex items-baseline">
+                                <div className="flex items-center">
                                   {agent.display_name && (
                                     <span className="text-base leading-normal">
                                       {agent.display_name}
@@ -229,12 +229,20 @@ export default function SubAgentPool({
                                   >
                                     {agent.name}
                                   </span>
-                                </span>
+                                </div>
                               </div>
                               <div
-                                className={`text-xs line-clamp-2 transition-colors duration-300 ${
+                                className={`text-xs line-clamp-2 transition-colors duration-300 leading-[1.25] overflow-hidden ${
                                   !isAvailable ? "text-gray-400" : "text-gray-500"
                                 }`}
+                                style={{
+                                  display: '-webkit-box',
+                                  WebkitLineClamp: 2,
+                                  WebkitBoxOrient: 'vertical',
+                                  overflow: 'hidden',
+                                  textOverflow: 'ellipsis',
+                                  maxHeight: '2.5rem'
+                                }}
                               >
                                 {agent.description}
                               </div>