From dd2060480680544f0a59d50c841728a64ec7e7de Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <mkermani144@gmail.com>
Date: Tue, 1 Apr 2025 10:50:24 +0000
Subject: [PATCH 1/2] feat: change "thinking" text with an exponentially
 increasing interval

---
 components/message.tsx | 42 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/components/message.tsx b/components/message.tsx
index d9d7f17..7da0092 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -4,7 +4,7 @@ import type { ChatRequestOptions, Message } from 'ai';
 import cx from 'classnames';
 import equal from 'fast-deep-equal';
 import { AnimatePresence, motion } from 'framer-motion';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import type { Vote } from '@/lib/db/schema';
 import { cn } from '@/lib/utils';
@@ -206,6 +206,29 @@ export const PreviewMessage = memo(
 export const ThinkingMessage = () => {
   const role = 'assistant';
 
+  const texts = [
+    'Thinking...',
+    'Calling relevant tools...',
+    'Fetching external data...',
+    'Finalizing response...',
+  ];
+  const [index, setIndex] = useState(0);
+
+  /**
+   * Change the text with an interval which increases exponentially, hence
+   * displaying the latter texts for a longer time
+   */
+  useEffect(() => {
+    texts.slice(0, -1).map((_, textIndex) => {
+      setTimeout(
+        () => {
+          setIndex(textIndex + 1);
+        },
+        1000 * 3 ** (textIndex + 1),
+      );
+    });
+  }, []);
+
   return (
     <motion.div
       className="w-full mx-auto max-w-3xl px-4 group/message "
@@ -225,10 +248,19 @@ export const ThinkingMessage = () => {
           <SparklesIcon size={14} />
         </div>
 
-        <div className="flex flex-col gap-2 w-full">
-          <div className="flex flex-col gap-4 text-muted-foreground">
-            Thinking...
-          </div>
+        <div className="flex flex-col justify-center gap-2 w-full">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={texts[index]}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3 }}
+              className="text-muted-foreground absolute"
+            >
+              {texts[index]}
+            </motion.div>
+          </AnimatePresence>
         </div>
       </div>
     </motion.div>

From 8d1f44dbbbe3c6be419b56d217b7116cb59651c2 Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <mkermani144@gmail.com>
Date: Tue, 1 Apr 2025 10:58:47 +0000
Subject: [PATCH 2/2] refactor: extract thinking text change logic into a
 custom hook

---
 components/message.tsx     | 30 +++++-------------------------
 hooks/use-thinking-text.ts | 30 ++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 25 deletions(-)
 create mode 100644 hooks/use-thinking-text.ts

diff --git a/components/message.tsx b/components/message.tsx
index 7da0092..3def9dc 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -4,8 +4,9 @@ import type { ChatRequestOptions, Message } from 'ai';
 import cx from 'classnames';
 import equal from 'fast-deep-equal';
 import { AnimatePresence, motion } from 'framer-motion';
-import { memo, useEffect, useState } from 'react';
+import { memo, useState } from 'react';
 
+import { useThinkingText } from '@/hooks/use-thinking-text';
 import type { Vote } from '@/lib/db/schema';
 import { cn } from '@/lib/utils';
 
@@ -206,28 +207,7 @@ export const PreviewMessage = memo(
 export const ThinkingMessage = () => {
   const role = 'assistant';
 
-  const texts = [
-    'Thinking...',
-    'Calling relevant tools...',
-    'Fetching external data...',
-    'Finalizing response...',
-  ];
-  const [index, setIndex] = useState(0);
-
-  /**
-   * Change the text with an interval which increases exponentially, hence
-   * displaying the latter texts for a longer time
-   */
-  useEffect(() => {
-    texts.slice(0, -1).map((_, textIndex) => {
-      setTimeout(
-        () => {
-          setIndex(textIndex + 1);
-        },
-        1000 * 3 ** (textIndex + 1),
-      );
-    });
-  }, []);
+  const thinkingText = useThinkingText();
 
   return (
     <motion.div
@@ -251,14 +231,14 @@ export const ThinkingMessage = () => {
         <div className="flex flex-col justify-center gap-2 w-full">
           <AnimatePresence mode="wait">
             <motion.div
-              key={texts[index]}
+              key={thinkingText}
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -10 }}
               transition={{ duration: 0.3 }}
               className="text-muted-foreground absolute"
             >
-              {texts[index]}
+              {thinkingText}
             </motion.div>
           </AnimatePresence>
         </div>
diff --git a/hooks/use-thinking-text.ts b/hooks/use-thinking-text.ts
new file mode 100644
index 0000000..d5f27d1
--- /dev/null
+++ b/hooks/use-thinking-text.ts
@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * A custom hook that returns a thinking text that changes every few seconds
+ * with an exponentially increasing interval.
+ * @param base - The base of the exponential function
+ * @returns The current thinking text
+ */
+export const useThinkingText = (base = 3) => {
+  const texts = [
+    'Thinking...',
+    'Calling relevant tools...',
+    'Fetching external data...',
+    'Finalizing response...',
+  ];
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    texts.slice(0, -1).map((_, textIndex) => {
+      setTimeout(
+        () => {
+          setIndex(textIndex + 1);
+        },
+        1000 * 3 ** (textIndex + 1),
+      );
+    });
+  }, []);
+
+  return texts[index];
+};