Update animations.

nulib · Dec 17, 2024 · a71bbb0 · a71bbb0
1 parent e4f8c6e
commit a71bbb0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/components/Chat/Response/Interstitial.styled.tsx b/components/Chat/Response/Interstitial.styled.tsx
@@ -18,9 +18,21 @@ const StyledInterstitialIcon = styled("div", {
     "linear-gradient(73deg, $purple120 0%, $purple 38.2%, $brightBlueB 61.8%)",
   backgroundSize: "250%",
   backgroundPosition: "61.8%",
-  animation: `${gradientAnimation} 3s infinite alternate`,
+  animation: `${gradientAnimation} 5s infinite alternate`,
+  transition: "$dcAll",
   content: "",
 
+  variants: {
+    isActive: {
+      true: {
+        backgroundPosition: "61.8%",
+      },
+      false: {
+        backgroundPosition: "0%",
+      },
+    },
+  },
+
   svg: {
     fill: "$white",
     width: "0.85rem",
@@ -30,7 +42,6 @@ const StyledInterstitialIcon = styled("div", {
 
 const StyledInterstitial = styled("div", {
   color: "$black",
-  margin: "$gr2 0",
   fontFamily: "$northwesternSansBold",
   fontSize: "$gr3",
   display: "flex",

diff --git a/components/Chat/Response/Interstitial.tsx b/components/Chat/Response/Interstitial.tsx
@@ -1,9 +1,10 @@
 import {
   StyledInterstitial,
   StyledInterstitialIcon,
-} from "./Interstitial.styled";
+} from "@/components/Chat/Response/Interstitial.styled";
 
 import { IconSearch } from "@/components/Shared/SVG/Icons";
+import React from "react";
 import { ToolStartMessage } from "@/types/components/chat";
 
 interface ResponseInterstitialProps {
@@ -18,7 +19,6 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
 
   switch (tool) {
     case "aggregate":
-      console.log(`aggregate input`, input);
       text = `Aggregating ${input.agg_field} by ${input.term_field} ${input.term}`;
       break;
     case "discover_fields":
@@ -41,4 +41,4 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
   );
 };
 
-export default ResponseInterstitial;
+export default React.memo(ResponseInterstitial);
diff --git a/components/Chat/Response/Response.tsx b/components/Chat/Response/Response.tsx
@@ -3,12 +3,12 @@ import {
   StyledQuestion,
   StyledResponse,
   StyledResponseWrapper,
-} from "./Response.styled";
+} from "@/components/Chat/Response/Response.styled";
 
 import BouncingLoader from "@/components/Shared/BouncingLoader";
 import Container from "@/components/Shared/Container";
 import ResponseImages from "@/components/Chat/Response/Images";
-import ResponseInterstitial from "./Interstitial";
+import ResponseInterstitial from "@/components/Chat/Response/Interstitial";
 import ResponseMarkdown from "@/components/Chat/Response/Markdown";
 import { StreamingMessage } from "@/types/components/chat";
 
@@ -71,6 +71,18 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
         </>
       ));
     }
+
+    if (type === "aggregation_result") {
+      console.log(`aggregation result`, message.message);
+
+      // @ts-ignore
+      setRenderedMessage((prev) => (
+        <>
+          {prev}
+          <></>
+        </>
+      ));
+    }
   }, [message]);
 
   function resetStreamedMessage() {
@@ -91,4 +103,4 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
   );
 };
 
-export default ChatResponse;
+export default React.memo(ChatResponse);