Merge branch 'feature/ui-ux-refresh' of https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator into feature/ui-ux-refresh

Author: marktayl1

src/frontend_react/src/components/content/PlanChat.tsx

@@ -15,7 +15,7 @@ const PlanChat: React.FC<PlanChatProps> = ({
     planData,
     OnChatSubmit
 }) => {
-    const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
+    // const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
     const [input, setInput] = useState("");
     const [isTyping, setIsTyping] = useState(false);
     const [showScrollButton, setShowScrollButton] = useState(false);
@@ -24,19 +24,18 @@ const PlanChat: React.FC<PlanChatProps> = ({
 
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const inputContainerRef = useRef<HTMLDivElement>(null);
-
+    const messages = planData.messages || [];
     const scrollToBottom = () => {
     };
     const clearChat = async () => {
-        setMessages([]);
         setInput("");
         setCurrentConversationId(undefined);
     };
     return (
         <div className="chat-container">
             <div className="messages" ref={messagesContainerRef}>
                 <div className="message-wrapper">
-                    {messages.map((msg, index) => (<div key={index} className={`message ${msg.role}`}>
+                    {messages.map((msg, index) => (<div key={index} className={`message ${msg.source !== "human" ? "assistant" : "user"}`}>
                         <Body1>
                             <div className="plan-chat-message-content">
                                 <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>

src/frontend_react/src/components/content/TaskDetails.tsx

@@ -30,10 +30,11 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
 
         switch (status) {
             case 'completed':
+            case 'accepted':
                 return <CheckmarkCircle20Regular className="task-details-status-completed" />;
             case 'planned':
                 return <CircleHalfFill20Regular className="task-details-status-working" />;
-            case 'removed':
+            case 'rejected':
                 return <Dismiss20Regular className="task-details-status-removed" />;
             default:
                 return null;
@@ -80,19 +81,23 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
 
                             <div key={subtask.id} className="task-details-subtask-item">
                                 <div className="task-details-status-icon">
-                                    {renderStatusIcon(subtask.status)}
+                                    {renderStatusIcon(subtask.human_approval_status || subtask.status)}
                                 </div>
                                 <div className="task-details-subtask-content">
-                                    <span className="task-details-subtask-name">{description}</span>
+                                    <span className={`task-details-subtask-name ${subtask.human_approval_status === "rejected" ? "strikethrough" : ""}`}>{description}</span>
                                     <div className="task-details-subtask-actions">
-                                        <CheckboxChecked20Regular
-                                            onClick={planData.hasHumanClarificationRequest ? () => OnApproveStep(subtask) : undefined}
-                                            className={`${!planData.hasHumanClarificationRequest ? 'task-details-checkbox-icon-disabled' : 'task-details-checkbox-icon'}`}
-                                        />
-                                        <DismissSquare20Regular
-                                            onClick={planData.hasHumanClarificationRequest ? () => OnRejectStep(subtask) : undefined}
-                                            className={`${!planData.hasHumanClarificationRequest ? 'task-details-dismiss-icon-disabled' : 'task-details-dismiss-icon'}`}
-                                        />
+                                        {(subtask.human_approval_status !== "accepted" && subtask.human_approval_status !== "rejected") && (
+                                            <>
+                                                <CheckboxChecked20Regular
+                                                    onClick={planData.hasHumanClarificationRequest ? () => OnApproveStep(subtask) : undefined}
+                                                    className={`${!planData.hasHumanClarificationRequest ? 'task-details-checkbox-icon-disabled' : 'task-details-checkbox-icon'}`}
+                                                />
+                                                <DismissSquare20Regular
+                                                    onClick={planData.hasHumanClarificationRequest ? () => OnRejectStep(subtask) : undefined}
+                                                    className={`${!planData.hasHumanClarificationRequest ? 'task-details-dismiss-icon-disabled' : 'task-details-dismiss-icon'}`}
+                                                />
+                                            </>
+                                        )}
                                     </div>
                                 </div>
                             </div>

src/frontend_react/src/styles/TaskDetails.css

@@ -183,4 +183,8 @@
     padding: 4px;
     border-radius: var(--borderRadiusSmall);
     transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.strikethrough {
+    text-decoration: line-through;
 }