Enhance agent and buffer message UI components

Updated StreamingAgentMessage to improve message rendering, add bot tags, copy button, and sample data tag for assistant messages. Refined TeamSelected spacing using non-breaking spaces. Changed StreamingBufferMessage to show the last 500 characters of the buffer with a leading ellipsis for long messages.

Author: Fr4nc3

src/frontend/src/components/common/TeamSelected.tsx

@@ -9,10 +9,10 @@ const TeamSelected: React.FC<TeamSelectedProps> = ({ selectedTeam }) => {
     return (
         <div className={styles.teamSelectorContent}>
             <Caption1 className={styles.currentTeamLabel}>
-                Current Team
+                &nbsp;&nbsp;Current Team
             </Caption1>
             <Body1 className={styles.currentTeamName}>
-                {"     "}  {selectedTeam ? selectedTeam.name : 'No team selected'}
+                &nbsp;&nbsp;{selectedTeam ? selectedTeam.name : 'No team selected'}
             </Body1>
         </div>
     );

src/frontend/src/components/content/streaming/StreamingAgentMessage.tsx

@@ -1,35 +1,109 @@
-import { AgentMessageData } from "@/models";
+import { AgentMessageData, AgentMessageType, role } from "@/models";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypePrism from "rehype-prism";
+import { Body1, Button, Tag } from "@fluentui/react-components";
+import { TaskService } from "@/services";
+import { Copy } from "@/coral/imports/bundleicons";
+import { DiamondRegular, HeartRegular } from "@fluentui/react-icons";
 
 
 const StreamingAgentMessage = (agentMessages: AgentMessageData[]) => {
   if (!agentMessages?.length) return null;
 
   // Filter out messages with empty content
   const validMessages = agentMessages.filter(msg => msg.raw_content?.trim());
-
+  const messages = validMessages;
   if (!validMessages.length) return null;
 
   return (
-    <div className="streaming-agent-messages">
-      {validMessages.map((message, index) => (
-        <div key={`${message.agent}-${message.timestamp}-${index}`} className="agent-message">
-          <div className="agent-name">
-            <strong>{message.agent}</strong>:
-          </div>
-          <div className="agent-content">
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              rehypePlugins={[rehypePrism]}
-            >
-              {message.raw_content.trim()}
-            </ReactMarkdown>
+    // <div className="streaming-agent-messages">
+    //   {validMessages.map((message, index) => (
+    //     <div key={`${message.agent}-${message.timestamp}-${index}`} className="agent-message">
+    //       <div className="agent-name">
+    //         <strong>{message.agent}</strong>:
+    //       </div>
+    //       <div className="agent-content">
+    //         <ReactMarkdown
+    //           remarkPlugins={[remarkGfm]}
+    //           rehypePlugins={[rehypePrism]}
+    //         >
+    //           {message.raw_content.trim()}
+    //         </ReactMarkdown>
+    //       </div>
+    //     </div>
+    //   ))}
+    // </div>
+
+    <div className="message-wrapper">
+      {messages.map((msg, index) => {
+        const isHuman = msg.agent_type === AgentMessageType.HUMAN_AGENT;
+
+        return (
+          <div
+            key={index}
+            className={`message ${isHuman ? role.user : role.assistant}`}
+          >
+            {!isHuman && (
+              <div className="plan-chat-header">
+                <div className="plan-chat-speaker">
+                  <Body1 className="speaker-name">
+                    {TaskService.cleanTextToSpaces(msg.agent)}
+                  </Body1>
+                  <Tag
+                    size="extra-small"
+                    shape="rounded"
+                    appearance="brand"
+                    className="bot-tag"
+                  >
+                    BOT
+                  </Tag>
+                </div>
+              </div>
+            )}
+
+            <Body1>
+              <div className="plan-chat-message-content">
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypePrism]}
+                >
+                  {TaskService.cleanHRAgent(msg.raw_content) || ""}
+                </ReactMarkdown>
+
+                {!isHuman && (
+                  <div className="assistant-footer">
+                    <div className="assistant-actions">
+                      <div>
+                        <Button
+                          onClick={() =>
+                            msg.raw_content &&
+                            navigator.clipboard.writeText(msg.raw_content)
+                          }
+                          title="Copy Response"
+                          appearance="subtle"
+                          style={{ height: 28, width: 28 }}
+                          icon={<Copy />}
+                        />
+                      </div>
+
+                      <Tag
+                        icon={<DiamondRegular />}
+                        appearance="filled"
+                        size="extra-small"
+                      >
+                        Sample data for demonstration purposes only.
+                      </Tag>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </Body1>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
+
   );
 };
 

src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx

@@ -12,9 +12,10 @@ const renderBufferMessage = (streamingMessageBuffer: string) => {
 
     if (!streamingMessageBuffer || streamingMessageBuffer.trim() === "") return null;
 
-    const previewText = streamingMessageBuffer.length > 500
-        ? streamingMessageBuffer.substring(0, 500) + "..."
-        : streamingMessageBuffer;
+    const start = Math.max(0, streamingMessageBuffer.length - 500);
+    const previewText = start === 0
+        ? streamingMessageBuffer
+        : "..." + streamingMessageBuffer.substring(start);
 
     return (
         <div style={{

src/frontend/src/pages/PlanPage.tsx

@@ -518,7 +518,7 @@ const PlanPage: React.FC = () => {
                                 streamingMessages={streamingMessages}
                                 wsConnected={wsConnected}
                                 onPlanApproval={(approved) => setPlanApproved(approved)}
-                                onPlanProcessing={(showProcessingPlanSpinner) => setShowProcessingPlanSpinner(showProcessingPlanSpinner)}
+                                setShowProcessingPlanSpinner={(showProcessingPlanSpinner) => setShowProcessingPlanSpinner(showProcessingPlanSpinner)}
                                 planApprovalRequest={planApprovalRequest}
                                 waitingForPlan={waitingForPlan}
                                 messagesContainerRef={messagesContainerRef}