Merge pull request #6459 from chezsmithy/refactor-ellipsis

refactor: ♻️ Refactor to use a single animated ellipsis component

Author: RomneyDa

gui/src/components/AnimatedEllipsis.tsx

@@ -0,0 +1,24 @@
+import styled, { keyframes } from "styled-components";
+
+const ellipsisAnimation = keyframes`
+  0% { width: 0; }
+  33% { width: 0.33em; }
+  66% { width: 0.66em; }
+  100% { width: 1em; }
+`;
+
+export const AnimatedEllipsis = styled.span`
+  display: inline-block;
+  width: 1em; /* Fixed width to match the maximum animation width */
+
+  &::after {
+    content: "...";
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: bottom;
+    animation: ${ellipsisAnimation} 2s infinite;
+    width: 0;
+  }
+`;
+
+export default AnimatedEllipsis;

gui/src/components/StepContainer/ConversationSummary.tsx

@@ -2,7 +2,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { ChatHistoryItem } from "core";
 import { useState } from "react";
-import { AnimatedEllipsis } from "../";
+import { AnimatedEllipsis } from "../AnimatedEllipsis";
 import { useAppSelector } from "../../redux/hooks";
 import StyledMarkdownPreview from "../StyledMarkdownPreview";
 import { useDeleteCompaction } from "../../util/compactConversation";

gui/src/components/index.ts

@@ -1,4 +1,4 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import { varWithFallback } from "../styles/theme";
 
 export const defaultBorderRadius = "0.5rem";
@@ -199,21 +199,3 @@ export const CloseButton = styled.button`
   justify-content: center;
   cursor: pointer;
 `;
-
-const ellipsisAnimation = keyframes`
-  0% { width: 0; }
-  33% { width: 0.33em; }
-  66% { width: 0.66em; }
-  100% { width: 1em; }
-`;
-
-export const AnimatedEllipsis = styled.span`
-  &::after {
-    content: "...";
-    display: inline-block;
-    overflow: hidden;
-    vertical-align: bottom;
-    animation: ${ellipsisAnimation} 2s infinite;
-    width: 0;
-  }
-`;

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

@@ -1,4 +1,4 @@
-import { AnimatedEllipsis } from "../../..";
+import { AnimatedEllipsis } from "../../../AnimatedEllipsis";
 
 export function GeneratingIndicator({
   text = "Generating",

gui/src/components/mainInput/belowMainInput/ContextItemsPeek.tsx

@@ -3,13 +3,13 @@ import { ContextItemWithId } from "core";
 import { ctxItemToRifWithContents } from "core/commands/util";
 import { getUriPathBasename } from "core/util/uri";
 import { ComponentType, useContext, useMemo } from "react";
-import { AnimatedEllipsis } from "../..";
 import {
   IdeMessengerContext,
   IIdeMessenger,
 } from "../../../context/IdeMessenger";
 import { useAppSelector } from "../../../redux/hooks";
 import { selectIsGatheringContext } from "../../../redux/slices/sessionSlice";
+import { AnimatedEllipsis } from "../../AnimatedEllipsis";
 import FileIcon from "../../FileIcon";
 import SafeImg from "../../SafeImg";
 import ToggleDiv from "../../ToggleDiv";

gui/src/components/mainInput/belowMainInput/ThinkingBlockPeek.tsx

@@ -4,8 +4,10 @@ import { ChevronUpIcon } from "@heroicons/react/24/solid";
 import { ChatHistoryItem } from "core";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
+
 import { defaultBorderRadius, lightGray, vscBackground } from "../..";
 import { getFontSize } from "../../../util";
+import { AnimatedEllipsis } from "../../AnimatedEllipsis";
 import StyledMarkdownPreview from "../../StyledMarkdownPreview";
 
 const SpoilerButton = styled.div`
@@ -36,34 +38,11 @@ const ButtonContent = styled.div`
   gap: 6px;
 `;
 
-export const ThinkingText = styled.span`
-  position: relative;
-  padding-right: 12px;
-
-  &:after {
-    content: "...";
-    position: absolute;
-    animation: ellipsis 1s steps(4, end) infinite;
-    width: 0px;
-    display: inline-block;
-    overflow: hidden;
-  }
+const ThinkingTextContainer = styled.span`
+  display: inline-block;
+  min-width: fit-content;
 
-  @keyframes ellipsis {
-    0%,
-    100% {
-      width: 0px;
-    }
-    33% {
-      width: 8px;
-    }
-    66% {
-      width: 16px;
-    }
-    90% {
-      width: 24px;
-    }
-  }
+  padding-right: 1em; /* Reserve space for the ellipsis animation */
 `;
 
 const MarkdownWrapper = styled.div`
@@ -120,12 +99,13 @@ function ThinkingBlockPeek({
           className="flex items-center justify-start pl-2 text-xs text-gray-300"
           data-testid="thinking-block-peek"
         >
-          <SpoilerButton onClick={() => setOpen((prev) => !prev)}>
+          <SpoilerButton onClick={() => setOpen(!open)}>
             <ButtonContent>
               {inProgress ? (
-                <ThinkingText>
+                <span>
                   {redactedThinking ? "Redacted Thinking" : "Thinking"}
-                </ThinkingText>
+                  <AnimatedEllipsis />
+                </span>
               ) : redactedThinking ? (
                 "Redacted Thinking"
               ) : (
@@ -141,7 +121,6 @@ function ThinkingBlockPeek({
             </ButtonContent>
           </SpoilerButton>
         </div>
-
         <div
           className={`ml-2 mt-2 overflow-y-auto transition-none duration-300 ease-in-out ${
             open ? "mb-2 mt-5 opacity-100" : "max-h-0 border-0 opacity-0"

gui/src/pages/config/IndexingProgress/IndexingProgressTitleText.tsx

@@ -1,5 +1,5 @@
 import { IndexingProgressUpdate } from "core";
-import { AnimatedEllipsis } from "../../../components";
+import { AnimatedEllipsis } from "../../../components/AnimatedEllipsis";
 
 export interface IndexingProgressTitleTextProps {
   update: IndexingProgressUpdate;