From 6bc98f34ad21c13ed550014762db1cc49c5a8577 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 8 Jul 2024 17:02:36 +0100
Subject: [PATCH 1/2] feat: added typing animation to ai summary

---
 .../AiSummary/AiSummaryDetail/index.tsx       | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx b/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx
index 10102b6e2..78a9b841f 100644
--- a/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx
+++ b/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
@@ -28,9 +29,37 @@ const SummaryText = styled(Text)`
   line-height: 19.6px;
 `
 
-export const AiSummaryDetails = ({ question, answer }: Props) => (
-  <AiSummaryDetailsWrapper>
-    <Title>{question}</Title>
-    <SummaryText>{answer}</SummaryText>
-  </AiSummaryDetailsWrapper>
-)
+export const AiSummaryDetails = ({ question, answer }: Props) => {
+  const [displayedText, setDisplayedText] = useState('')
+
+  useEffect(() => {
+    let currentIndex = 0
+
+    const typeCharacter = () => {
+      if (currentIndex < answer.length) {
+        setDisplayedText((prev) => prev + answer[currentIndex])
+        currentIndex += 1
+        setTimeout(typeCharacter, 25)
+      }
+    }
+
+    if (answer) {
+      typeCharacter()
+    }
+
+    // Cleanup function in case the component unmounts during typing
+    return () => {
+      if (answer) {
+        currentIndex = answer.length
+      }
+    }
+  }, [answer])
+
+  return (
+    <AiSummaryDetailsWrapper>
+      <Title>{question}</Title>
+
+      <SummaryText>{displayedText}</SummaryText>
+    </AiSummaryDetailsWrapper>
+  )
+}

From b0a66dfb1d9dc0a17fc8ce63c4f9c7f2f5043cc5 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 8 Jul 2024 23:33:03 +0100
Subject: [PATCH 2/2] fix: text always having undefined at the end of a
 sentence

---
 .../App/SideBar/AiSummary/AiSummaryDetail/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx b/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx
index 78a9b841f..57c30b781 100644
--- a/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx
+++ b/src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx
@@ -37,7 +37,14 @@ export const AiSummaryDetails = ({ question, answer }: Props) => {
 
     const typeCharacter = () => {
       if (currentIndex < answer.length) {
-        setDisplayedText((prev) => prev + answer[currentIndex])
+        setDisplayedText((prev) => {
+          if (prev === answer) {
+            return prev
+          }
+
+          return `${prev}${answer[currentIndex]}`
+        })
+
         currentIndex += 1
         setTimeout(typeCharacter, 25)
       }
@@ -49,9 +56,7 @@ export const AiSummaryDetails = ({ question, answer }: Props) => {
 
     // Cleanup function in case the component unmounts during typing
     return () => {
-      if (answer) {
-        currentIndex = answer.length
-      }
+      currentIndex = answer?.length || 0
     }
   }, [answer])