Merge pull request #4870 from continuedev/pe/generating-text-lump

feat: add animated ellipsis to lump

Author: sestinj

gui/src/components/mainInput/Lump/LumpToolbar.tsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import styled from "styled-components";
+import { AnimatedEllipsis } from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import { cancelStream } from "../../../redux/thunks/cancelStream";
@@ -8,7 +9,8 @@ import { BlockSettingsTopToolbar } from "./BlockSettingsTopToolbar";
 
 const Container = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
 `;
 
@@ -24,6 +26,15 @@ interface TopToolbarProps {
   setSelectedSection: (value: string | null) => void;
 }
 
+function GeneratingIndicator() {
+  return (
+    <div className="text-xs text-gray-400">
+      <span>Generating</span>
+      <AnimatedEllipsis />
+    </div>
+  );
+}
+
 export function LumpToolbar(props: TopToolbarProps) {
   const dispatch = useAppDispatch();
   const ideMessenger = useContext(IdeMessengerContext);
@@ -33,6 +44,7 @@ export function LumpToolbar(props: TopToolbarProps) {
   if (ttsActive) {
     return (
       <Container>
+        <GeneratingIndicator />
         <StopButton
           className="text-gray-400"
           onClick={() => {
@@ -48,6 +60,7 @@ export function LumpToolbar(props: TopToolbarProps) {
   if (isStreaming) {
     return (
       <Container>
+        <GeneratingIndicator />
         <StopButton
           className="text-gray-400"
           onClick={() => {