CommandDash · yatendra2001 · Jan 10, 2024 · Jan 7, 2024 · Jan 8, 2024 · Jan 8, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,8 @@ All notable changes to the "fluttergpt" extension will be documented in this fil
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
-## [0.2.1]
+## [0.2.2]
 
-- Major improvement in chat user experience.
-- Feature to provide workspace as context.
-- Minor bug fixes.
+- Major improvement in workspace chat user experience.
+- Feature to provide workspace as context in chat history.
+- Added a clear chat button.
diff --git a/README.md b/README.md
@@ -146,10 +146,10 @@ To get a sense of direction of where we're heading, please check out our [Roadma
 This is the beta version and can be unstable. Please check our [issues board](https://github.com/Welltested-AI/fluttergpt/issues) for any known issues.
 
 
-## Release Notes: 0.2.1 
-- Major improvement in chat user experience.
-- Feature to provide workspace as context.
-- Minor bug fixes.
+## Release Notes: 0.2.2 
+- Major improvement in workspace chat user experience.
+- Feature to provide workspace as context in chat history.
+- Added a clear chat button.
 
 ## License
 

diff --git a/media/chat/chat.html b/media/chat/chat.html
@@ -7,11 +7,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
     <link rel="stylesheet" href="{{prismCssUri}}">
     <link rel="stylesheet" href="{{cssUri}}">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
-    <script
-        src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-dart.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 </head>
 
 <body>
@@ -26,17 +23,30 @@
         <!-- Display chat messages -->
         <div id="dynamic-messages"></div>
         <!-- Add the loading indicator inside the chat container -->
-        <span class="loader" id="loader" style="display: none;"></span>
+        <div class="ml-7">
+            <div class="dot-flashing" id="loader"></div>
+        </div>
+
+        <div class="hidden flex-col w-full h-48 animate__animated animate__slideInUp px-2 py-3" id="workspace-loader">
+            <div class="inline-flex flex-row items-end px-2">
+                <span id="workspace-loader-text">Finding the most relevant files</span>
+                <div class="typing-loader mx-2"></div>
+            </div>
+            <div class="inline-flex flex-col px-3" id="file-names"></div>
+        </div>
         <div id="response" class="pt-4 text-sm"></div>
 
         <div id="snackbar">
             <i class="fa-solid fa-triangle-exclamation" style="color: #ffffff;"></i>
         </div>
-
         <textarea spellcheck="false" placeholder="Ask FlutterGPT something" rows="1" aria-multiline="true" id="prompt-input"></textarea>
         <div id="menu" class="menu" role="listbox" ></div>
         <script src="{{scriptUri}}"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-dart.min.js"></script>
 </body>
 
 </html>
diff --git a/media/chat/css/chatpage.css b/media/chat/css/chatpage.css
@@ -45,18 +45,18 @@ body {
     position: absolute;
     align-items: center;
     justify-content: center;
-    top: 86%; 
+    top: 86%;
     left: 50%;
     transform: translateX(-50%);
-    background-color: #ffcc00; 
+    background-color: #ffcc00;
     color: #ffffff;
     text-align: center;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    width: calc(100% - 18px); 
-    z-index: 100; 
-    animation: fadeInOut 5s ease; 
+    width: calc(100% - 18px);
+    z-index: 100;
+    animation: fadeInOut 5s ease;
 }
 
 #snackbar i {
@@ -91,12 +91,12 @@ body {
     top: 90%;
     left: 50%;
     transform: translateX(-50%) translateY(100%);
-    background-color: #ffcc00; 
+    background-color: #ffcc00;
     color: #ffffff;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    width: calc(100% - 18px); 
+    width: calc(100% - 18px);
     z-index: 100;
     animation: slideUp 0.5s ease-in-out forwards;
 }
@@ -109,48 +109,84 @@ body {
     margin-left: 8px;
 }
 
-.loader {
-    width: 8px;
-    height: 8px;
-    left: 16px;
-    border-radius: 50%;
-    background-color: var(--vscode-progressBar-background);
-    box-shadow: 32px 0 var(--vscode-progressBar-background), -32px 0 var(--vscode-progressBar-background);
-    position: relative;
-    animation: flash 0.5s ease-out infinite alternate;
+.file-path {
+    font-family: 'Courier New', Courier, monospace;
+    color: var(--vscode-editor-foreground);
 }
 
-@keyframes flash {
-    0% {
-        background-color: #FFF2;
-        box-shadow: 16px 0 #FFF2, -16px 0 var(--vscode-progressBar-background);
-    }
+.dot-flashing {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: var(--vscode-progressBar-background);
+    color: var(--vscode-progressBar-background);
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+    display: none;
+  }
 
-    50% {
-        background-color: var(--vscode-progressBar-background);
-        box-shadow: 16px 0 #FFF2, -16px 0 #FFF2;
-    }
+  .dot-flashing::before, .dot-flashing::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 0;
+  }
 
-    100% {
-        background-color: #FFF2;
-        box-shadow: 16px 0 var(--vscode-progressBar-background), -16px 0 #FFF2;
+  .dot-flashing::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: var(--vscode-progressBar-background);
+    color: var(--vscode-progressBar-background);
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 0s;
+  }
+
+  .dot-flashing::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: var(--vscode-progressBar-background);
+    color: var(--vscode-progressBar-background);
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 1s;
+  }
+
+  @keyframes dot-flashing {
+    0% {
+      background-color: var(--vscode-progressBar-background);
     }
-}
+    50%, 100% {
+      background-color: var(--vscode-editor-foreground);
+    }
+  }
 
 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateX(-50%) translateY(100%);
     }
+
     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
     }
 }
 
 @keyframes fadeInOut {
-    0%, 100% { opacity: 0; }
-    10%, 90% { opacity: 1; }
+
+    0%,
+    100% {
+        opacity: 0;
+    }
+
+    10%,
+    90% {
+        opacity: 1;
+    }
 }
 
 .message {
@@ -200,7 +236,13 @@ body {
 }
 
 #dynamic-messages {
-word-break: break-word;
+    word-break: break-word;
+}
+
+#workspace-loader {
+    background-color: var(--vscode-editor-background);
+    color: var(--vscode-editor-foreground);
+    fill: var(--vscode-editor-foreground);
 }
 
 .user-gemini-pro p {
@@ -246,7 +288,8 @@ ul li::before {
     margin-right: 5px;
 }
 
-ol, ul {
+ol,
+ul {
     padding-left: 11px;
 }
 
@@ -256,4 +299,35 @@ ol {
 
 ul {
     list-style-type: disc;
+}
+
+.typing-loader {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    animation: loading 1s linear infinite alternate;
+    margin-bottom: 4px;
+}
+
+@keyframes loading {
+    0% {
+        background-color: var(--vscode-progressBar-background);
+        box-shadow:
+            8px 0px 0px 0px var(--vscode-editor-foreground),
+            16px 0px 0px 0px var(--vscode-editor-foreground);
+    }
+
+    25% {
+        background-color: var(--vscode-editor-foreground);
+        box-shadow:
+            8px 0px 0px 0px var(--vscode-progressBar-background),
+            16px 0px 0px 0px var(--vscode-editor-foreground);
+    }
+
+    75% {
+        background-color: var(--vscode-editor-foreground);
+        box-shadow:
+            8px 0px 0px 0px var(--vscode-editor-foreground),
+            16px 0px 0px 0px var(--vscode-progressBar-background);
+    }
 }