Skip to content

162 workspace query loading #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yatendra2001 merged 4 commits into from
Jan 10, 2024
Merged

162 workspace query loading #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94d53b5
feat(File paths): Displaying files while querying workspace
wadhia-yash Jan 9, 2024
7de9bd2
fix(Dart Icon): Added dart icon while showing workspace query loader
wadhia-yash Jan 10, 2024
9d578a6
feat(Timer): Added timer to display additional loading message if exe…
wadhia-yash Jan 10, 2024
a40fa79
chore: changed loading texts
yatendra2001 Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 8 additions & 52 deletions media/chat/chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,60 +23,16 @@
<!-- 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-32 animate__animated animate__slideInUp px-2 py-3" id="workspace-loader">
<div class="inline-flex flex-row">
<!-- loader -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="animate-spin hidden" id="accessing-workspace-loader">
<path clip-rule="evenodd"
d="M20.8754 10.5001C20.5189 8.40424 19.4322 6.50216 17.8078 5.1307C16.1833 3.75925 14.1259 3.0069 11.9999 3.0069C9.87397 3.0069 7.81659 3.75925 6.19214 5.1307C4.56768 6.50216 3.48097 8.40424 3.12445 10.5001H1.60645C1.96988 8.00293 3.22025 5.72008 5.12879 4.0692C7.03734 2.41831 9.47646 1.50977 11.9999 1.50977C14.5234 1.50977 16.9626 2.41831 18.8711 4.0692C20.7796 5.72008 22.03 8.00293 22.3934 10.5001H20.8754Z"
/>
</svg>
<!-- check -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="block" id="accessing-workspace-done">
<path clip-rule="evenodd"
d="M21.6464 4.98462L8.94145 19.9846L7.75645 19.9306L2.73145 12.7756L3.95845 11.9146L8.42545 18.2746L20.5019 4.01562L21.6479 4.98462H21.6464Z"
/>
</svg>
<span class="mx-2">Accessing work structure (it can take a while in first time)</span>
</div>
<div class="inline-flex flex-row">
<!-- loader -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="animate-spin" id="fetching-file-loader">
<path clip-rule="evenodd"
d="M20.8754 10.5001C20.5189 8.40424 19.4322 6.50216 17.8078 5.1307C16.1833 3.75925 14.1259 3.0069 11.9999 3.0069C9.87397 3.0069 7.81659 3.75925 6.19214 5.1307C4.56768 6.50216 3.48097 8.40424 3.12445 10.5001H1.60645C1.96988 8.00293 3.22025 5.72008 5.12879 4.0692C7.03734 2.41831 9.47646 1.50977 11.9999 1.50977C14.5234 1.50977 16.9626 2.41831 18.8711 4.0692C20.7796 5.72008 22.03 8.00293 22.3934 10.5001H20.8754Z"
/>
</svg>
<!-- check -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="hidden" id="fetching-file-done">
<path clip-rule="evenodd"
d="M21.6464 4.98462L8.94145 19.9846L7.75645 19.9306L2.73145 12.7756L3.95845 11.9146L8.42545 18.2746L20.5019 4.01562L21.6479 4.98462H21.6464Z"
/>
</svg>
<span class="mx-2">Fetching most relevant files</span>
</div>
<div class="inline-flex flex-row">
<!-- loader -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="animate-spin" id="creating-result-loader">
<path clip-rule="evenodd"
d="M20.8754 10.5001C20.5189 8.40424 19.4322 6.50216 17.8078 5.1307C16.1833 3.75925 14.1259 3.0069 11.9999 3.0069C9.87397 3.0069 7.81659 3.75925 6.19214 5.1307C4.56768 6.50216 3.48097 8.40424 3.12445 10.5001H1.60645C1.96988 8.00293 3.22025 5.72008 5.12879 4.0692C7.03734 2.41831 9.47646 1.50977 11.9999 1.50977C14.5234 1.50977 16.9626 2.41831 18.8711 4.0692C20.7796 5.72008 22.03 8.00293 22.3934 10.5001H20.8754Z"
/>
</svg>
<!-- check -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="hidden" id="creating-result-done">
<path clip-rule="evenodd"
d="M21.6464 4.98462L8.94145 19.9846L7.75645 19.9306L2.73145 12.7756L3.95845 11.9146L8.42545 18.2746L20.5019 4.01562L21.6479 4.98462H21.6464Z"
/>
</svg>
<span class="mx-2">Creating a result for you</span>
<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>

Expand Down
134 changes: 101 additions & 33 deletions media/chat/css/chatpage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -200,7 +236,7 @@ body {
}

#dynamic-messages {
word-break: break-word;
word-break: break-word;
}

#workspace-loader {
Expand Down Expand Up @@ -252,7 +288,8 @@ ul li::before {
margin-right: 5px;
}

ol, ul {
ol,
ul {
padding-left: 11px;
}

Expand All @@ -262,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);
}
}
Loading