+ {data.map((section) => (
+
event.type !== "human"
+ )
+ }}
+ />
+ ))}
+
+ );
+ }
+};
diff --git a/src/components/Agentic/common/AgentEventSection/index.tsx b/src/components/Agentic/common/AgentEventSection/index.tsx
new file mode 100644
index 000000000..71baedea3
--- /dev/null
+++ b/src/components/Agentic/common/AgentEventSection/index.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from "react";
+import { AgentEventList } from "../AgentEventList";
+import * as s from "./styles";
+import type { AgentEventSectionProps, AgentEventSectionType } from "./types";
+
+const getHue = (index: number, sectionType?: AgentEventSectionType) => {
+ if (sectionType === "intro") {
+ return 30;
+ }
+
+ if (sectionType === "summary") {
+ return 330;
+ }
+
+ const hueValues = [90, 150, 210, 270];
+ return hueValues[index % hueValues.length];
+};
+
+export const AgentEventSection = ({
+ data,
+ type,
+ typeInitialEvents,
+ index
+}: AgentEventSectionProps) => {
+ const [isSticky, setIsSticky] = useState(false);
+ const stickyRef = useRef