update progress animation

mbektas · Dec 28, 2024 · 01675ff · 01675ff
1 parent 60c9b65
commit 01675ff
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git a/src/chat-sidebar.tsx b/src/chat-sidebar.tsx
@@ -107,7 +107,10 @@ function ChatResponse(props: any) {
     return (
         <div className={`chat-message chat-message-${msg.from}`} >
             <div className="chat-message-header">
-                <div className="chat-message-from">{msg.from === 'user' ? 'User' : 'Copilot'}</div>
+                <div className="chat-message-from">
+                    <div className="chat-message-from-title">{msg.from === 'user' ? 'User' : 'Copilot'}</div>
+                    <div className='chat-message-from-progress' style={{ display: `${props.showGenerating ? 'visible' : 'none'}` }}><div className='loading-ellipsis'>Generating</div></div>
+                </div>
                 <div className="chat-message-timestamp">{timestamp}</div>
             </div>
             <div className="chat-message-content">
@@ -581,11 +584,8 @@ function SidebarComponent(props: any) {
                 ) : (
                     <div className="sidebar-messages">
                         {chatMessages.map((msg, index) => (
-                            <ChatResponse key={`key-${index}`} message={msg} openFile={props.openFile} getApp={props.getApp} />
+                            <ChatResponse key={`key-${index}`} message={msg} openFile={props.openFile} getApp={props.getApp} showGenerating={(index === chatMessages.length - 1 && msg.from === 'copilot') && copilotRequestInProgress} />
                         ))}
-                        <div className='copilot-progress-row' style={{ display: `${copilotRequestInProgress ? 'flex' : 'none'}` }}>
-                            <div className='copilot-progress'></div>
-                        </div>
                         <div ref={messagesEndRef} />
                     </div>
                 )}

diff --git a/style/base.css b/style/base.css
@@ -82,8 +82,30 @@
 }
 
 .chat-message-from {
+    display: flex;
+    flex-grow: 1;
+}
+.chat-message-from-title {
     font-weight: bold;
+}
+.chat-message-from-progress {
+    padding-left: 10px;
     flex-grow: 1;
+    font-size: 12px;
+}
+
+.loading-ellipsis::after {
+    display: inline-block;
+    animation: animated-ellipsis steps(1,end) 1s infinite;
+    content: '';
+}
+
+@keyframes animated-ellipsis {
+    0%   { content: ''; }
+    25%  { content: '.'; }
+    50%  { content: '..'; }
+    75%  { content: '...'; }
+    100% { content: ''; }
 }
 
 .chat-message-timestamp {
@@ -100,30 +122,6 @@
     background-color: var(--jp-toolbar-active-background);
 }
 
-.copilot-progress-row {
-    width: 100%;
-    height: 18px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.copilot-progress {
-    color: var(--jp-ui-font-color1);
-    width: 4px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
-    transform: translateX(-38px) translateY(8px);
-    animation: copilot_progress_animation .5s infinite alternate linear;
-    scale: 0.5;
-}
-
-@keyframes copilot_progress_animation {
-    50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
-    100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
-}
-
 .copilot-generated-notebook-link {
     text-decoration: underline;
     cursor: pointer;