refactor(frontend): Update styles and components in HorizontalScroll and ChatSidebar

- Changed gradient background colors in HorizontalScroll to use 'background' instead of 'white'.
- Replaced SpinnerGapIcon with LoadingSpinner in ChatSidebar for improved loading indication.
- Introduced BlockCard component in FindBlocks for better block representation.
- Integrated HorizontalScroll in FindBlocksTool to enhance block navigation.

These changes improve UI consistency and enhance user experience in the application.

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx

@@ -70,10 +70,10 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
           {children}
         </div>
         {canScrollLeft && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-white via-white/80 to-white/0" />
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background via-background/80 to-background/0" />
         )}
         {canScrollRight && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white via-white/80 to-white/0" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background via-background/80 to-background/0" />
         )}
         {canScrollLeft && (
           <button

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatSidebar/ChatSidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
 import { Button } from "@/components/atoms/Button/Button";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
 import {
   Sidebar,
@@ -14,7 +15,6 @@ import { cn } from "@/lib/utils";
 import {
   PlusCircleIcon,
   PlusIcon,
-  SpinnerGapIcon,
 } from "@phosphor-icons/react";
 import { motion } from "framer-motion";
 import { parseAsString, useQueryState } from "nuqs";
@@ -125,7 +125,7 @@ export function ChatSidebar() {
           >
             {isLoadingSessions ? (
               <div className="flex items-center justify-center py-4">
-                <SpinnerGapIcon className="h-5 w-5 animate-spin text-neutral-400" />
+                <LoadingSpinner size="small" className="text-neutral-400" />
               </div>
             ) : sessions.length === 0 ? (
               <p className="py-4 text-center text-sm text-neutral-500">

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx

@@ -1,7 +1,12 @@
+"use client";
+
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
 import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
+import type { BlockInfoSummary } from "@/app/api/__generated__/models/blockInfoSummary";
 import { ToolUIPart } from "ai";
-import { getAnimationText, ToolIcon } from "./helpers";
+import { HorizontalScroll } from "@/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll";
+import { getAnimationText, parseOutput, ToolIcon } from "./helpers";
 
 export interface FindBlockInput {
   query: string;
@@ -23,19 +28,57 @@ interface Props {
   part: FindBlockToolPart;
 }
 
+function BlockCard({ block }: { block: BlockInfoSummary }) {
+  return (
+    <div className="w-48 shrink-0 rounded-2xl border bg-background p-3">
+      <p className="truncate text-sm font-medium text-foreground">
+        {block.name}
+      </p>
+      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+        {block.description}
+      </p>
+    </div>
+  );
+}
+
 export function FindBlocksTool({ part }: Props) {
   const text = getAnimationText(part);
   const isStreaming =
     part.state === "input-streaming" || part.state === "input-available";
   const isError = part.state === "output-error";
 
+  const parsed =
+    part.state === "output-available" ? parseOutput(part.output) : null;
+  const hasBlocks = !!parsed && parsed.blocks.length > 0;
+
+  const query = (part.input as FindBlockInput | undefined)?.query?.trim();
+  const accordionDescription = parsed
+    ? `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${query ? ` for "${query}"` : ""}`
+    : undefined;
+
   return (
-    <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
-      <ToolIcon isStreaming={isStreaming} isError={isError} />
-      <MorphingTextAnimation
-        text={text}
-        className={isError ? "text-red-500" : undefined}
-      />
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasBlocks && parsed && (
+        <ToolAccordion
+          badgeText="Blocks"
+          title="Block results"
+          description={accordionDescription}
+        >
+          <HorizontalScroll dependencyList={[parsed.blocks.length]}>
+            {parsed.blocks.map((block) => (
+              <BlockCard key={block.id} block={block} />
+            ))}
+          </HorizontalScroll>
+        </ToolAccordion>
+      )}
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx

@@ -4,7 +4,7 @@ import { ResponseType } from "@/app/api/__generated__/models/responseType";
 import { FindBlockInput, FindBlockToolPart } from "./FindBlocks";
 import { PackageIcon } from "@phosphor-icons/react";
 
-function parseOutput(output: unknown): BlockListResponse | null {
+export function parseOutput(output: unknown): BlockListResponse | null {
   if (!output) return null;
   if (typeof output === "string") {
     const trimmed = output.trim();