Fix: Improve Agent templates functionality and fix some UI style issues (#9129)

### What problem does this PR solve?

Fix: Improve Agent templates functionality and fix some UI style issues
#3221

### Type of change

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

web/src/components/message-input/next.tsx

@@ -132,7 +132,7 @@ export function NextMessageInput({
           onChange={onInputChange}
           placeholder="Type your message here..."
           className="field-sizing-content min-h-10 w-full resize-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 dark:bg-transparent"
-          disabled={isUploading || disabled}
+          disabled={isUploading || disabled || sendLoading}
           onKeyDown={handleKeyDown}
         />
         <div className="flex items-center justify-between gap-1.5">

web/src/components/next-message-item/index.tsx

@@ -7,6 +7,7 @@ import {
   PropsWithChildren,
   memo,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -15,6 +16,7 @@ import {
 import { IRegenerateMessage, IRemoveMessageById } from '@/hooks/logic-hooks';
 import { INodeEvent } from '@/hooks/use-send-message';
 import { cn } from '@/lib/utils';
+import { AgentChatContext } from '@/pages/agent/context';
 import { WorkFlowTimeline } from '@/pages/agent/log-sheet/workFlowTimeline';
 import { IMessage } from '@/pages/chat/interface';
 import { isEmpty } from 'lodash';
@@ -74,6 +76,14 @@ function MessageItem({
   const { visible, hideModal, showModal } = useSetModalState();
   const [clickedDocumentId, setClickedDocumentId] = useState('');
 
+  const { setLastSendLoadingFunc } = useContext(AgentChatContext);
+
+  useEffect(() => {
+    if (typeof setLastSendLoadingFunc === 'function') {
+      setLastSendLoadingFunc(loading, item.id);
+    }
+  }, [loading, setLastSendLoadingFunc, item.id]);
+
   const referenceDocuments = useMemo(() => {
     const docs = reference?.doc_aggs ?? {};
 
@@ -115,7 +125,6 @@ function MessageItem({
             ) : (
               <AssistantIcon />
             ))}
-
           <section className="flex-col gap-2 flex-1">
             <div className="space-x-1">
               {isAssistant ? (
@@ -177,6 +186,7 @@ function MessageItem({
                   )}
                   currentMessageId={item.id}
                   canvasId={conversationId}
+                  sendLoading={loading}
                 />
               </div>
             )}