ui and layout updates

microsoft · Nov 13, 2024 · 2bbc963 · 2bbc963
1 parent ea94534
commit 2bbc963
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 8 deletions.
diff --git a/python/packages/autogen-studio/frontend/src/components/views/playground/chat/chat.tsx b/python/packages/autogen-studio/frontend/src/components/views/playground/chat/chat.tsx
@@ -429,7 +429,7 @@ export default function ChatView({
       </div>
       <div className="flex flex-col h-full">
         <div
-          className="flex-1 overflow-y-auto scroll relative min-h-0"
+          className="flex-1 overflow-y-auto scroll mt-2 relative min-h-0"
           ref={chatContainerRef}
         >
           <MessageList
@@ -443,7 +443,7 @@ export default function ChatView({
           />
         </div>
 
-        {sessions && sessions?.length === 0 ? (
+        {sessions !== null && sessions?.length === 0 ? (
           <div className="flex h-[calc(100%-100px)] flex-col items-center justify-center w-full">
             <div className="mt-4 text-sm text-secondary text-center">
               <img src={logo} alt="Welcome" className="w-72 h-72 mb-4" />

diff --git a/python/packages/autogen-studio/frontend/src/components/views/playground/chat/messagelist.tsx b/python/packages/autogen-studio/frontend/src/components/views/playground/chat/messagelist.tsx
@@ -17,6 +17,7 @@ import {
 } from "lucide-react";
 import AgentFlow from "./agentflow/agentflow";
 import ThreadView from "./threadview";
+import LoadingDots from "../../shared/atoms";
 
 interface MessageListProps {
   messages: Message[];
@@ -107,21 +108,36 @@ export const MessageList: React.FC<MessageListProps> = ({
               size={20}
               className="inline-block mr-1 text-accent animate-spin"
             />{" "}
-            Processing ...
+            <span className="inline-block mr-2">Processing</span>{" "}
+            <LoadingDots size={8} />
           </div>
         );
 
       case "complete":
         return (
-          <CheckCircle size={20} className="inline-block mr-1 text-accent" />
+          <div className="text-sm    mb-2">
+            <CheckCircle size={20} className="inline-block mr-1 text-accent" />{" "}
+            Task completed
+          </div>
         );
       case "error":
         return (
-          <AlertTriangle size={20} className="inline-block mr-1 text-red-500" />
+          // <AlertTriangle size={20} className="inline-block mr-1 text-red-500" />
+          <div className="text-sm    mb-2">
+            <AlertTriangle
+              size={20}
+              className="inline-block mr-1 text-red-500"
+            />{" "}
+            An error occurred.
+          </div>
         );
       case "cancelled":
         return (
-          <StopCircle size={20} className="inline-block mr-1 text-red-500" />
+          // <StopCircle size={20} className="inline-block mr-1 text-red-500" />
+          <div className="text-sm    mb-2">
+            <StopCircle size={20} className="inline-block mr-1 text-red-500" />{" "}
+            Task was cancelled.
+          </div>
         );
       default:
         return null;
@@ -173,7 +189,7 @@ export const MessageList: React.FC<MessageListProps> = ({
                 {/* Thread section with left border for hierarchy */}
                 {hasThread && (
                   <div className="mt-2 pl-4 border-l-2 border-secondary/30">
-                    <div className="flex">
+                    <div className="flex   pt-2">
                       <div className="flex-1">
                         <button
                           onClick={() => toggleThread(botMessage.run_id)}

diff --git a/python/packages/autogen-studio/frontend/src/components/views/playground/chat/threadview.tsx b/python/packages/autogen-studio/frontend/src/components/views/playground/chat/threadview.tsx
@@ -3,6 +3,7 @@ import { StopCircle } from "lucide-react";
 import { ThreadState } from "./types";
 import { AgentMessageConfig } from "../../../types/datamodel";
 import { RenderMessage } from "./rendermessage";
+import LoadingDots from "../../shared/atoms";
 
 interface ThreadViewProps {
   thread: ThreadState;
@@ -25,7 +26,11 @@ const ThreadView: React.FC<ThreadViewProps> = ({
       <div className="sticky top-0 z-10 flex bg-primary rounded-t items-center justify-between p-3 border-b border-secondary bg-secondary/10">
         <div className="text-sm text-primary">
           {isStreaming ? (
-            "Agents discussing..."
+            <>
+              {" "}
+              <span className="inline-block mr-2">Agents discussing</span>{" "}
+              <LoadingDots size={8} />
+            </>
           ) : (
             <>
               <span className="font-semibold mr-2">Stop Reason</span>

diff --git a/python/packages/autogen-studio/frontend/src/components/views/shared/atoms.tsx b/python/packages/autogen-studio/frontend/src/components/views/shared/atoms.tsx
@@ -6,3 +6,38 @@ export const LoadingIndicator = ({ size = 16 }: { size: number }) => (
     <Loader2 size={size} className="animate-spin" />
   </div>
 );
+
+export const LoadingDots = ({ size = 8 }) => {
+  return (
+    <span className="inline-flex items-center gap-2">
+      <span
+        className="bg-accent rounded-full animate-bounce"
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+          animationDuration: "0.6s",
+        }}
+      />
+      <span
+        className="bg-accent rounded-full animate-bounce"
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+          animationDuration: "0.6s",
+          animationDelay: "0.2s",
+        }}
+      />
+      <span
+        className="bg-accent rounded-full animate-bounce"
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+          animationDuration: "0.6s",
+          animationDelay: "0.4s",
+        }}
+      />
+    </span>
+  );
+};
+
+export default LoadingDots;