Update page1.py

page1.py

@@ -41,11 +41,94 @@ def text():
                     "content": prompt
                 }
             )
+        # Custom HTML and CSS for three-dot animation
+        spinner_html = """
+        <div class="col-3">
+        <div class="snippet" data-title="dot-pulse">
+          <div class="stage">
+            <div class="dot-pulse"></div>
+          </div>
+        </div>
+      </div>
+        """
 
-        with st.spinner('Generating...'):
-            for chunk in llm_chain.stream(prompt):
-                text_output = chunk.get("text", "")
+        spinner_css = """
+        .dot-pulse {
+  position: relative;
+  left: -9999px;
+  
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  box-shadow: 9999px 0 0 -5px;
+  animation: dot-pulse 1.5s infinite linear;
+  animation-delay: 0.25s;
+}
+.dot-pulse::before, .dot-pulse::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+}
+.dot-pulse::before {
+  box-shadow: 9984px 0 0 -5px;
+  animation: dot-pulse-before 1.5s infinite linear;
+  animation-delay: 0s;
+}
+.dot-pulse::after {
+  box-shadow: 10014px 0 0 -5px;
+  animation: dot-pulse-after 1.5s infinite linear;
+  animation-delay: 0.5s;
+}
 
+@keyframes dot-pulse-before {
+  0% {
+    box-shadow: 9984px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 9984px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 9984px 0 0 -5px;
+  }
+}
+@keyframes dot-pulse {
+  0% {
+    box-shadow: 9999px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 9999px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 9999px 0 0 -5px;
+  }
+}
+@keyframes dot-pulse-after {
+  0% {
+    box-shadow: 10014px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 10014px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 10014px 0 0 -5px;
+  }
+}
+        """
+
+        st.markdown(f'<style>{spinner_css}</style>', unsafe_allow_html=True)
+        st.markdown(spinner_html, unsafe_allow_html=True)
+
+        for chunk in llm_chain.stream(prompt):
+            text_output = chunk.get("text", "")
+        st.markdown('<style>.dot-pulse { visibility: hidden; }</style>', unsafe_allow_html=True)
 
         with st.chat_message("assistant").markdown(text_output):
             st.session_state.messages.append(
@@ -53,4 +136,4 @@ def text():
                     "role": "assistant",
                     "content": text_output
                 }
-            )
+            )