feat: improve look of messages and distinguish between types

sourcery-ai · Jul 20, 2023 · fad0fcb · fad0fcb
1 parent b9f8b07
commit fad0fcb
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/media/troubleshooting.css b/media/troubleshooting.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   background-color: var(--vscode-sideBar-background);
   gap: 1px solid var(--vscode-sideBar-border);
-  padding: var(--spacing-sm);
+  padding: var(--spacing-md);
   height: 100%;
 }
 
@@ -12,11 +12,13 @@
   flex-grow: 1;
   margin-block-start: 0;
   margin-block-end: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
 }
 
 .troubleshooting__input {
   position: relative;
-  padding: var(--spacing-md);
   flex-shrink: 0;
   flex-grow: 0;
   margin-block-start: 0;
@@ -28,8 +30,7 @@
   font-size: var(--vscode-font-size);
   border-radius: var(--spacing-xxs);
   background-color: var(--vscode-editor-background);
-  padding-right: 3rem;
-  outline: 1px solid transparent;
+  padding: 0.5rem 3rem 0.5rem 0.5rem;
   min-height: 10rem;
   resize: vertical;
 }
@@ -54,4 +55,30 @@
   opacity: 0.2;
 }
 
+.troubleshooting__message {
+  border-radius: var(--spacing-sm);
+  background-color: var(--vscode-settings-textInputBackground);
+  padding: var(--spacing-md);
+}
 
+.troubleshooting__message--user {
+  text-align: right;
+  border-bottom-right-radius: 0;
+  margin-left: var(--spacing-lg);
+}
+
+.troubleshooting__message--feedback {
+  border-bottom-left-radius: 0;
+  margin-right: var(--spacing-lg);
+}
+
+.troubleshooting__message--assistance {
+  border-bottom-left-radius: 0;
+  margin-right: var(--spacing-lg);
+  border: 1px solid var(--vscode-panel-border);
+}
+
+.troubleshooting__message--error {
+  margin-right: var(--spacing-lg);
+  background: var(--vscode-inputValidation-errorBackground);
+}
diff --git a/src/webview/troubleshooting.js b/src/webview/troubleshooting.js
@@ -37,9 +37,13 @@ function createSubmitButton(postMessage) {
     submitButton.innerText = "Submit";
     submitButton.onclick = function () {
         postMessage({ action: "submit", promptValue: getPrompt().value });
+        getInput().remove();
     };
     return submitButton;
 }
+function getInput() {
+    return document.getElementById("input");
+}
 function getPrompt() {
     // Return the prompt, if it exists (which it should)
     return document.getElementById("prompt");
@@ -51,13 +55,14 @@ function getBody() {
     return document.getElementById("body");
 }
 function handleMessage(_a) {
-    var data = _a.data;
+    var _b = _a.data, type = _b.type, content = _b.content;
     var mainSection = getMainSection();
     var newMessage = createElement({
         tagName: "p",
         className: "troubleshooting__message"
     });
-    newMessage.textContent = data;
+    newMessage.classList.add("troubleshooting__message--" + type);
+    newMessage.textContent = content;
     mainSection.appendChild(newMessage);
 }
 function init(postMessage) {
@@ -67,6 +72,7 @@ function init(postMessage) {
     getBody().append(createElement({
         tagName: "section",
         className: "troubleshooting__input",
+        id: "input",
         children: [createPrompt(), createSubmitButton(postMessage)]
     }), createElement({
         tagName: "section",

diff --git a/src/webview/troubleshooting.ts b/src/webview/troubleshooting.ts
@@ -63,10 +63,15 @@ function createSubmitButton(postMessage: PostMessage): HTMLButtonElement {
   submitButton.innerText = "Submit";
   submitButton.onclick = () => {
     postMessage({ action: "submit", promptValue: getPrompt().value });
+    getInput().remove();
   };
   return submitButton;
 }
 
+function getInput(): HTMLElement {
+  return document.getElementById("input");
+}
+
 function getPrompt(): HTMLTextAreaElement {
   // Return the prompt, if it exists (which it should)
   return document.getElementById("prompt") as HTMLTextAreaElement;
@@ -80,13 +85,18 @@ function getBody() {
   return document.getElementById("body");
 }
 
-function handleMessage({ data }: { data: string }) {
+function handleMessage({
+  data: { type, content },
+}: {
+  data: { type: "user" | "feedback" | "assistance"; content: string };
+}) {
   const mainSection = getMainSection();
   const newMessage = createElement({
     tagName: "p",
     className: "troubleshooting__message",
   });
-  newMessage.textContent = data;
+  newMessage.classList.add("troubleshooting__message--" + type);
+  newMessage.textContent = content;
   mainSection.appendChild(newMessage);
 }
 
@@ -98,6 +108,7 @@ function init(postMessage: PostMessage) {
     createElement({
       tagName: "section",
       className: "troubleshooting__input",
+      id: "input",
       children: [createPrompt(), createSubmitButton(postMessage)],
     }),
     createElement({