From 383e5b4e3716209e8c06e5a1c573497b7d02945f Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sun, 6 Feb 2022 16:40:45 -0800
Subject: [PATCH] stale state text for convo

---
 .../components/MainTabsOrPages/ViewConvo.tsx  | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/web/components/MainTabsOrPages/ViewConvo.tsx b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
index 260626c..56ab2a0 100644
--- a/packages/web/components/MainTabsOrPages/ViewConvo.tsx
+++ b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
@@ -275,22 +275,31 @@ export default function ViewConvo(props: { conversationId: string }) {
           )}
 
           {/* have one row, but just translate it along y downward to put it in it's own place */}
+
           <span
             className="flex flex-row flex-nowrap pb-[10rem] py-[5rem] 
           overflow-auto min-h-max shadow-xl bg-slate-50 rounded"
           >
-            {audioClips.reverse().map((audClip, index) => {
-              const restAudioClips = audioClips.slice(index);
-              return (
-                <TimelineAudioClip
-                  key={audClip.id}
-                  index={index}
-                  audioClip={audClip}
-                  convoId={props.conversationId}
-                  audioClipsToPlay={restAudioClips}
-                />
-              );
-            })}
+            {audioClips?.length > 0 ? (
+              audioClips.reverse().map((audClip, index) => {
+                const restAudioClips = audioClips.slice(index);
+                return (
+                  <TimelineAudioClip
+                    key={audClip.id}
+                    index={index}
+                    audioClip={audClip}
+                    convoId={props.conversationId}
+                    audioClipsToPlay={restAudioClips}
+                  />
+                );
+              })
+            ) : (
+              <span className="text-slate-300 mx-auto my-auto text-center">
+                Please get this conversation started <br></br> by pressing and
+                holding{" "}
+                <span className="text-orange-500 font-semibold">R.</span>
+              </span>
+            )}
 
             <span ref={endOfTimeline}></span>
           </span>