chore: enchance some use experience (#2204)

web/app/components/app/chat/answer/index.tsx

@@ -260,7 +260,7 @@ const Answer: FC<IAnswerProps> = ({
           <div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>
               <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
-                {(isResponsing && (isAgentMode ? (!content && (agent_thoughts || []).length === 0) : !content))
+                {(isResponsing && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content))
                   ? (
                     <div className='flex items-center justify-center w-6 h-5'>
                       <LoadingAnim type='text' />
@@ -268,7 +268,6 @@ const Answer: FC<IAnswerProps> = ({
                   )
                   : (
                     <div>
-
                       {annotation?.logAnnotation && (
                         <div className='mb-1'>
                           <div className='mb-3'>
@@ -299,9 +298,9 @@ const Answer: FC<IAnswerProps> = ({
                           author: annotation.authorName,
                         })} />
                       )}
-                      {item.isOpeningStatement && item.suggestedQuestions && item.suggestedQuestions.length > 0 && (
+                      {item.isOpeningStatement && item.suggestedQuestions && item.suggestedQuestions.filter(q => !!q && q.trim()).length > 0 && (
                         <div className='flex flex-wrap'>
-                          {item.suggestedQuestions.map((question, index) => (
+                          {item.suggestedQuestions.filter(q => !!q && q.trim()).map((question, index) => (
                             <div
                               key={index}
                               className='mt-1 mr-1 max-w-full last:mr-0 shrink-0 py-[5px] leading-[18px] items-center px-4 rounded-lg border border-gray-200 shadow-xs bg-white text-xs font-medium text-primary-600 cursor-pointer'

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -84,15 +84,12 @@ const AgentTools: FC = () => {
           </div>
         }
       >
-        <div className='flex items-center flex-wrap justify-between'>
+        <div className='grid gap-1 grid-cols-1 2xl:grid-cols-2 items-center flex-wrap justify-between'>
           {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
             <div key={index}
               className={cn((item.isDeleted || item.notAuthor) ? 'bg-white/50' : 'bg-white', (item.enabled && !item.isDeleted && !item.notAuthor) && 'shadow-xs', index > 1 && 'mt-1', 'group relative flex justify-between items-center last-of-type:mb-0  pl-2.5 py-2 pr-3 w-full  rounded-lg border-[0.5px] border-gray-200 ')}
-              style={{
-                width: 'calc(50% - 2px)',
-              }}
             >
-              <div className='flex items-center'>
+              <div className='grow w-0 flex items-center'>
                 {(item.isDeleted || item.notAuthor)
                   ? (
                     <DefaultToolIcon className='w-6 h-6' />
@@ -117,12 +114,12 @@ const AgentTools: FC = () => {
                       ))}
                 <div
                   title={item.tool_name}
-                  className={cn((item.isDeleted || item.notAuthor) ? 'line-through opacity-50' : 'group-hover:max-w-[70px]', 'ml-2 max-w-[200px]  leading-[18px] text-[13px] font-medium text-gray-800  truncate')}
+                  className={cn((item.isDeleted || item.notAuthor) ? 'line-through opacity-50' : '', 'grow w-0 ml-2 leading-[18px] text-[13px] font-medium text-gray-800  truncate')}
                 >
                   {item.tool_label || item.tool_name}
                 </div>
               </div>
-              <div className='flex items-center'>
+              <div className='shrink-0 ml-1 flex items-center'>
                 {(item.isDeleted || item.notAuthor)
                   ? (
                     <div className='flex items-center'>

web/app/components/app/configuration/config/index.tsx

@@ -183,6 +183,8 @@ const Config: FC = () => {
   })
 
   const hasChatConfig = isChatApp && (featureConfig.openingStatement || featureConfig.suggestedQuestionsAfterAnswer || (featureConfig.speechToText && !!speech2textDefaultModel) || (featureConfig.textToSpeech && !!text2speechDefaultModel) || featureConfig.citation)
+  const hasCompletionConfig = !isChatApp && (moreLikeThisConfig.enabled || (featureConfig.textToSpeech && !!text2speechDefaultModel))
+
   const hasToolbox = moderationConfig.enabled || featureConfig.annotation
 
   const wrapRef = useRef<HTMLDivElement>(null)
@@ -272,8 +274,8 @@ const Config: FC = () => {
           )
         }
 
-        {/* TextnGeneration config */}{
-          !hasChatConfig && (
+        {/* Text Generation config */}{
+          hasCompletionConfig && (
             <ExperienceEnchanceGroup
               isShowMoreLike={moreLikeThisConfig.enabled}
               isShowTextToSpeech={featureConfig.textToSpeech && !!text2speechDefaultModel}

web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx

@@ -68,7 +68,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   }, [value])
 
   const [tempSuggestedQuestions, setTempSuggestedQuestions] = useState(suggestedQuestions || [])
-
+  const notEmptyQuestions = tempSuggestedQuestions.filter(question => !!question && question.trim())
   const coloredContent = (tempValue || '')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
@@ -208,7 +208,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
       </div>
     ) : (
       <div className='mt-1.5 flex flex-wrap'>
-        {tempSuggestedQuestions.map((question, index) => {
+        {notEmptyQuestions.map((question, index) => {
           return (
             <div key={index} className='mt-1 mr-1 max-w-full truncate last:mr-0 shrink-0 leading-8 items-center px-2.5 rounded-lg border border-gray-200 shadow-xs bg-white text-[13px] font-normal text-gray-900 cursor-pointer'>
               {question}