Add spinner and fix histogram spacing (#2245)

Used the VS Code loading spinner when busy


https://github.com/user-attachments/assets/6c5c2dc4-7dbc-4eb4-8419-37df56878034

Also fixed the spacing at the bottom of this histogram:

Before

<img width="468" alt="image"
src="https://github.com/user-attachments/assets/b336f171-e2f2-4128-aa28-90e0a6aa69e1"
/>

After

<img width="469" alt="image"
src="https://github.com/user-attachments/assets/14829faf-ddd9-4b12-9d76-cba6ff17859e"
/>

Also added the 'bash' language in code highlighting, as sometimes
commands or plain text try to use this language (and the console was
showing warnings if it wasn't registered).

---------

Co-authored-by: Mine Starks <[email protected]>

Author: billti

vscode/src/copilot/webview/copilot.css

@@ -38,10 +38,13 @@ h1 {
 }
 
 .status-indicator {
-  height: 30px;
-  font-weight: bold;
-  text-align: right;
-  font-size: smaller;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  align-content: center;
+  height: 28px;
+  font-style: italic;
+  font-size: 0.9em;
 }
 
 .input-textarea {
@@ -165,6 +168,7 @@ pre code {
 
 .histogram-container {
   width: 100%;
+  margin-bottom: 10px;
 }
 
 /* If not specified it defaults to the 'pre code' default monospace font  */

vscode/src/copilot/webview/copilot.tsx

@@ -20,6 +20,7 @@ import hljs from "highlight.js/lib/core";
 import CopyButtonPlugin from "highlightjs-copy";
 import "highlightjs-copy/styles/highlightjs-copy.css";
 import python from "highlight.js/lib/languages/python";
+import bash from "highlight.js/lib/languages/bash"; // Used sometimes for plain text
 import markdownIt from "markdown-it";
 import { useEffect, useRef } from "preact/hooks";
 import { Histogram, Markdown, setRenderer } from "qsharp-lang/ux";
@@ -34,9 +35,10 @@ import { WebviewApi } from "vscode-webview";
 
 const vscodeApi: WebviewApi<ChatElement[]> = acquireVsCodeApi();
 
-// Only include the Python and Q# languages so as not
+// Only include a small set of languages so as not
 // to bloat the code
 hljs.registerLanguage("python", python);
+hljs.registerLanguage("bash", bash);
 hljs.registerLanguage("qsharp", hlsjQsharp);
 hljs.addPlugin(new CopyButtonPlugin());
 const md = markdownIt("commonmark");
@@ -162,13 +164,18 @@ function ChatHistory({ model }: { model: ChatViewModel }) {
 function StatusIndicator({ status }: { status: Status }) {
   return (
     <div className="status-indicator">
-      {status.status === "waitingAssistantResponse"
-        ? "🕒"
-        : status.status === "executingTool"
-          ? "🕒 " + status.toolName
-          : status.status === "assistantConnectionError"
-            ? "There was an error communicating with Azure Quantum Copilot. Please check your Internet connection and try again."
-            : ""}
+      {status.status === "waitingAssistantResponse" ? (
+        <span class="codicon codicon-loading codicon-modifier-spin"></span>
+      ) : status.status === "executingTool" ? (
+        <>
+          <span>{status.toolName}&nbsp;</span>
+          <span class="codicon codicon-loading codicon-modifier-spin"></span>
+        </>
+      ) : status.status === "assistantConnectionError" ? (
+        "There was an error communicating with Azure Quantum Copilot. Please check your Internet connection and try again."
+      ) : (
+        ""
+      )}
     </div>
   );
 }