⬤ style: Circular Streaming Cursor (#1736)

* Updated Style Cursor like ChatGPT

* style(Markdown.tsx): add space before cursor when there is text

* fix: revert OpenAIClient.tokens.js change

* fix:(Markdown.tsx): revert change of unused file

* fix(convos.spec.ts): test fix

* chore: remove raw HTML for cursor animations

---------

Co-authored-by: Danny Avila <danacordially@gmail.com>
Co-authored-by: Danny Avila <messagedaniel@protonmail.com>

client/src/style.css

@@ -1314,7 +1314,7 @@ html {
 .result-streaming {
   -webkit-animation: blink 1s steps(5, start) infinite;
   animation: blink 1s steps(5, start) infinite;
-  content:"▋";
+  content:"⬤ ";
   margin-left: 0.25rem;
   vertical-align: baseline;
 }
@@ -1777,4 +1777,49 @@ html {
 .border-token-surface-tertiary {
   border-color: #ececf1;
   border-color: var(--surface-tertiary)
+}
+
+@-webkit-keyframes pulseSize {
+  0%,
+  to {
+    -webkit-transform:scaleX(1);
+    transform:scaleX(1)
+  }
+  50% {
+    -webkit-transform:scale3d(1.25,1.25,1);
+    transform:scale3d(1.25,1.25,1)
+  }
+}
+@keyframes pulseSize {
+  0%,
+  to {
+    -webkit-transform:scaleX(1);
+    transform:scaleX(1)
+  }
+  50% {
+    -webkit-transform:scale3d(1.25,1.25,1);
+    transform:scale3d(1.25,1.25,1)
+  }
+}
+.result-thinking:empty:last-child:after {
+  -webkit-font-smoothing:subpixel-antialiased;
+  -webkit-animation:pulseSize 1.25s ease-in-out infinite;
+  animation:pulseSize 1.25s ease-in-out infinite;
+  -webkit-backface-visibility:hidden;
+  backface-visibility:hidden;
+  background-color:#0d0d0d;
+  background-color:var(--text-primary);
+  border-radius:50%;
+  box-sizing:border-box;
+  content:" ";
+  display:block;
+  height:12px;
+  position:absolute;
+  top:32px;
+  -webkit-transform:translateZ(0);
+  transform:translateZ(0);
+  -webkit-transform-origin:center;
+  transform-origin:center;
+  width:12px;
+  will-change:transform
 }