From 6e0fbdea3c909e2e3802e4af4ee3ec0ff698eb26 Mon Sep 17 00:00:00 2001 From: abhi1992002 Date: Mon, 2 Feb 2026 12:23:43 +0530 Subject: [PATCH] refactor(components): enhance FindBlocksTool and MorphingTextAnimation - Updated the `FindBlocksTool` to utilize the new `MorphingTextAnimation` for improved visual feedback. - Refactored `MorphingTextAnimation` to accept a `text` prop, simplifying its usage and enhancing flexibility. - Improved the rendering logic in `ChatMessagesContainer` to ensure proper key assignment for dynamic elements. These changes aim to enhance the user experience by providing better visual transitions and cleaner component interactions. --- .../ChatMessagesContainer.tsx | 7 +- .../MorphingTextAnimation.tsx | 87 +++++++++---------- .../copilot-2/tools/FindBlocks/FindBlocks.tsx | 52 ++++++++--- .../copilot-2/tools/FindBlocks/helpers.tsx | 57 ++++++++++++ .../components/ai-elements/conversation.tsx | 2 - 5 files changed, 142 insertions(+), 63 deletions(-) create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx index 61ddb04e56..d0a6739f1a 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx @@ -10,7 +10,7 @@ import { MessageResponse, } from "@/components/ai-elements/message"; import { MessageSquareIcon } from "lucide-react"; -import { UIMessage, UIDataTypes, UITools } from "ai"; +import { UIMessage, UIDataTypes, UITools, ToolUIPart } from "ai"; import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks"; interface ChatMessagesContainerProps { @@ -54,7 +54,10 @@ export const ChatMessagesContainer = ({ ); case "tool-find_block": return ( - + ); default: return null; diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation.tsx index 5137022233..9fbe3a810e 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation.tsx @@ -1,57 +1,52 @@ -import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; -const MorphingTextAnimationComponent = ({ - currentText, -}: { - currentText: string; -}) => { - const letters = currentText.split(""); - return ( - - {letters.map((char, index) => ( - - {char === " " ? "\u00A0" : char} - - ))} - - ); -}; - -export const MorphingTextAnimation = () => { - const textArray = ["Searching for Twitter blocks", "Found 10 twitter blocks"]; - const [currentText, setCurrentText] = useState(textArray[0]); - - useEffect(() => { - const interval = setInterval(() => { - setCurrentText(textArray[Math.floor(Math.random() * textArray.length)]); - }, 1000); - return () => clearInterval(interval); - }, []); +export function MorphingTextAnimation({ text }: Props) { + const letters = text.split(""); return (
- - + + + {letters.map((char, index) => ( + + {char === " " ? "\u00A0" : char} + + ))} +
); -}; +} diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx index 1bff1c64bc..f2facc9d80 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx @@ -1,17 +1,43 @@ -import { UIMessage, UIDataTypes, UITools, UIMessagePart } from "ai"; +import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation"; +import { BlockInfo } from "@/app/api/__generated__/models/blockInfo"; +import { ToolUIPart } from "ai"; +import { getAnimationText, StateIcon } from "./helpers"; + +export interface FindBlockInput { + query: string; +} + +export interface FindBlockOutput { + type: "block_list"; + message: string; + session_id: string; + blocks: BlockInfo[]; + count: number; + query: string; + usage_hint: string; +} + +export interface FindBlockToolPart { + type: string; + toolName?: string; + toolCallId: string; + state: ToolUIPart["state"]; + input?: FindBlockInput | unknown; + output?: string | FindBlockOutput | unknown; + title?: string; +} + +interface Props { + part: FindBlockToolPart; +} + +export function FindBlocksTool({ part }: Props) { + const text = getAnimationText(part); -export const FindBlocksTool = ({ - message, - i, - part, -}: { - message: UIMessage; - i: number; - part: UIMessagePart; -}) => { return ( -
-

Find Blocks

+
+ +
); -}; +} diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx new file mode 100644 index 0000000000..ea3758fea2 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx @@ -0,0 +1,57 @@ +import { ToolUIPart } from "ai"; +import { FindBlockInput, FindBlockOutput, FindBlockToolPart } from "./FindBlocks"; +import { CheckCircleIcon, CircleNotchIcon, XCircleIcon } from "@phosphor-icons/react"; + +export const getAnimationText = (part: FindBlockToolPart): string => { + switch (part.state) { + case "input-streaming": + return "Searching blocks for you"; + + case "input-available": { + const query = (part.input as FindBlockInput).query; + return `Finding "${query}" blocks`; + } + + case "output-available": { + const parsed = JSON.parse(part.output as string) as FindBlockOutput; + if (parsed) { + return `Found ${parsed.count} "${(part.input as FindBlockInput).query}" blocks`; + } + return "Found blocks"; + } + + case "output-error": + return "Error finding blocks"; + + default: + return "Processing"; + } + } + + export const StateIcon = ({ state }: { state: ToolUIPart["state"] }) => { + switch (state) { + case "input-streaming": + case "input-available": + return ( + + ); + case "output-available": + return ( + + ); + case "output-error": + return ( + + ); + default: + return null; + } + } + \ No newline at end of file diff --git a/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx b/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx index 91689b1423..ea2ff4e421 100644 --- a/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx +++ b/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx @@ -1,6 +1,5 @@ "use client"; -import { MorphingTextAnimation } from "@/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { ArrowDownIcon } from "lucide-react"; @@ -67,7 +66,6 @@ export const ConversationEmptyState = ({ {description}

)} -
)}