feat: Animated waiting icon for chat (#120)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: jonkafton

src/components/AiChat/AiChat.tsx

@@ -4,7 +4,7 @@ import type { FC } from "react"
 import styled from "@emotion/styled"
 import Typography from "@mui/material/Typography"
 import classNames from "classnames"
-import { RiSendPlaneFill, RiStopFill, RiMoreFill } from "@remixicon/react"
+import { RiSendPlaneFill, RiStopFill } from "@remixicon/react"
 import { Input, AdornmentButton } from "../Input/Input"
 import type { AiChatDisplayProps, AiChatProps } from "./types"
 import { EntryScreen } from "./EntryScreen"
@@ -17,6 +17,7 @@ import { AiChatProvider, useAiChat } from "./AiChatContext"
 import { useScrollSnap } from "../ScrollSnap/useScrollSnap"
 import type { Message } from "@ai-sdk/react"
 import Markdown from "./Markdown"
+import EllipsisIcon from "./EllipsisIcon"
 
 const classes = {
   root: "MitAiChat--root",
@@ -203,6 +204,14 @@ const Disclaimer = styled(Typography)(({ theme }) => ({
   textAlign: "center",
 }))
 
+const StyledEllipsisIcon = styled(EllipsisIcon)(({ theme }) => ({
+  ellipse: {
+    fill: theme.custom.colors.darkGray2,
+  },
+  width: "24px",
+  height: "24px",
+}))
+
 const AiChatDisplay: FC<AiChatDisplayProps> = ({
   conversationStarters,
   askTimTitle,
@@ -364,7 +373,7 @@ const AiChatDisplay: FC<AiChatDisplayProps> = ({
                   key={"loading"}
                 >
                   <Message>
-                    <RiMoreFill />
+                    <StyledEllipsisIcon />
                   </Message>
                 </MessageRow>
               ) : null}

src/components/AiChat/EllipsisIcon.tsx

@@ -0,0 +1,101 @@
+import * as React from "react"
+import type { FC } from "react"
+
+type EllipsisIconProps = {
+  className?: string
+}
+
+const EllipsisIcon: FC<EllipsisIconProps> = ({ className }) => (
+  <svg
+    viewBox="0 -10 100 40"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <ellipse cx="20" cy="15" rx="8" ry="8" fill="#000">
+      <animate
+        attributeName="cy"
+        values="15;4;15;15"
+        dur="1.2s"
+        keyTimes="0;0.3;0.6;1"
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
+        calcMode="spline"
+        repeatCount="indefinite"
+        begin="0s"
+      ></animate>
+      <animate
+        attributeName="ry"
+        values="8;8;7;8;8"
+        dur="1.2s"
+        keyTimes="0;0.52;0.6;0.7;1"
+        repeatCount="indefinite"
+        begin="0s"
+      ></animate>
+      <animate
+        attributeName="rx"
+        values="8;8;9;8;8"
+        dur="1.2s"
+        keyTimes="0;0.52;0.6;0.7;1"
+        repeatCount="indefinite"
+        begin="0s"
+      ></animate>
+    </ellipse>
+    <ellipse cx="50" cy="15" rx="8" ry="8" fill="#000">
+      <animate
+        attributeName="cy"
+        values="15;4;15;15"
+        dur="1.2s"
+        keyTimes="0;0.3;0.6;1"
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
+        calcMode="spline"
+        repeatCount="indefinite"
+        begin="0.2s"
+      ></animate>
+      <animate
+        attributeName="ry"
+        values="8;8;7;8;8"
+        dur="1.2s"
+        keyTimes="0;0.52;0.6;0.7;1"
+        repeatCount="indefinite"
+        begin="0.2s"
+      ></animate>
+      <animate
+        attributeName="rx"
+        values="8;8;9;8;8"
+        dur="1.2s"
+        keyTimes="0;0.52;0.6;0.7;1"
+        repeatCount="indefinite"
+        begin="0.2s"
+      ></animate>
+    </ellipse>
+    <ellipse cx="80" cy="15" rx="8" ry="8" fill="#000">
+      <animate
+        attributeName="cy"
+        values="15;4;15;15"
+        dur="1.2s"
+        keyTimes="0;0.3;0.6;1"
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
+        calcMode="spline"
+        repeatCount="indefinite"
+        begin="0.4s"
+      ></animate>
+      <animate
+        attributeName="ry"
+        values="8;8;7;8;8"
+        dur="1.2s"
+        keyTimes="0;0.52;0.6;0.7;1"
+        repeatCount="indefinite"
+        begin="0.4s"
+      ></animate>
+      <animate
+        attributeName="rx"
+        values="8;8;9;8;8"
+        dur="1.2s"
+        keyTimes="0;0.52;0.6;0.7;1"
+        repeatCount="indefinite"
+        begin="0.4s"
+      ></animate>
+    </ellipse>
+  </svg>
+)
+
+export default EllipsisIcon