feat: show feedback and final message in chat

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

Hide file tree

Showing 3 changed files with 94 additions and 38 deletions.
diff --git a/src/troubleshooting.ts b/src/troubleshooting.ts
@@ -77,7 +77,7 @@ export class TroubleshootingProvider implements WebviewViewProvider {
 
     ${styleSheets}
 </head>
-<body class="troubleshooting" id="main">
+<body class="troubleshooting" id="body">
 
 </body>
 <script nonce="${nonce}" src="${scriptUri}"></script>

diff --git a/src/webview/troubleshooting.js b/src/webview/troubleshooting.js
@@ -8,50 +8,72 @@ function createMessagePoster(vscode) {
     // Create a wrapper function which is strongly typed
     return function (message) { return vscode.postMessage(message); };
 }
-function createElement(tagName, className, children) {
-    if (children === void 0) { children = []; }
+function createElement(_a) {
+    var tagName = _a.tagName, className = _a.className, id = _a.id, _b = _a.children, children = _b === void 0 ? [] : _b;
     // Generically create an element and attach its children
     var element = document.createElement(tagName);
     element.className = className;
+    element.id = id;
     children.forEach(function (child) { return element.appendChild(child); });
     return element;
 }
 function createPrompt() {
     // Create the prompt and add custom placeholder and ID
-    var prompt = createElement("textarea", "troubleshooting__prompt");
+    var prompt = createElement({
+        tagName: "textarea",
+        className: "troubleshooting__prompt"
+    });
     prompt.id = "prompt";
     prompt.placeholder = "Describe the issue in detail.";
     return prompt;
 }
-function getPrompt() {
-    // Return the prompt, if it exists (which it should)
-    return document.getElementById("prompt");
-}
 function createSubmitButton(postMessage) {
     // Create the submit button and attach submit action
     // Would this system be better as a form?
-    var submitButton = createElement("button", "troubleshooting__send_button");
+    var submitButton = createElement({
+        tagName: "button",
+        className: "troubleshooting__send_button"
+    });
     submitButton.innerText = "Submit";
     submitButton.onclick = function () {
         postMessage({ action: "submit", promptValue: getPrompt().value });
     };
     return submitButton;
 }
-function getMain() {
+function getPrompt() {
+    // Return the prompt, if it exists (which it should)
+    return document.getElementById("prompt");
+}
+function getMainSection() {
     return document.getElementById("main");
 }
+function getBody() {
+    return document.getElementById("body");
+}
+function handleMessage(_a) {
+    var data = _a.data;
+    var mainSection = getMainSection();
+    var newMessage = createElement({
+        tagName: "p",
+        className: "troubleshooting__message"
+    });
+    newMessage.textContent = data;
+    mainSection.appendChild(newMessage);
+}
 function init(postMessage) {
     // Add children to main element
     // It's easier to do this in the script because we can reload the webview in development, rather than restarting
     // the whole extension development host.
-    getMain().append(createElement("section", "troubleshooting__input", [
-        createPrompt(),
-        createSubmitButton(postMessage),
-    ]), createElement("section", "troubleshooting__main"));
-    window.addEventListener("message", function (_a) {
-        var data = _a.data;
-        return console.log(data);
-    });
+    getBody().append(createElement({
+        tagName: "section",
+        className: "troubleshooting__input",
+        children: [createPrompt(), createSubmitButton(postMessage)]
+    }), createElement({
+        tagName: "section",
+        className: "troubleshooting__main",
+        id: "main"
+    }));
+    window.addEventListener("message", handleMessage);
 }
 (function () {
     var vscode = acquireVsCodeApi();

diff --git a/src/webview/troubleshooting.ts b/src/webview/troubleshooting.ts
@@ -21,59 +21,93 @@ function createMessagePoster(vscode: any): PostMessage {
   return (message: Message) => vscode.postMessage(message);
 }
 
-function createElement<K extends keyof HTMLElementTagNameMap>(
-  tagName: K,
-  className: string,
-  children: HTMLElement[] = []
-): HTMLElementTagNameMap[K] {
+type Props<K extends keyof HTMLElementTagNameMap> = {
+  tagName: K;
+  className: string;
+  id?: any;
+  children?: HTMLElement[];
+};
+
+function createElement<K extends keyof HTMLElementTagNameMap>({
+  tagName,
+  className,
+  id,
+  children = [],
+}: Props<K>): HTMLElementTagNameMap[K] {
   // Generically create an element and attach its children
   const element = document.createElement(tagName);
   element.className = className;
+  element.id = id;
   children.forEach((child) => element.appendChild(child));
   return element;
 }
 
 function createPrompt(): HTMLTextAreaElement {
   // Create the prompt and add custom placeholder and ID
-  const prompt = createElement("textarea", "troubleshooting__prompt");
+  const prompt = createElement({
+    tagName: "textarea",
+    className: "troubleshooting__prompt",
+  });
   prompt.id = "prompt";
   prompt.placeholder = "Describe the issue in detail.";
   return prompt;
 }
 
-function getPrompt(): HTMLTextAreaElement {
-  // Return the prompt, if it exists (which it should)
-  return document.getElementById("prompt") as HTMLTextAreaElement;
-}
-
 function createSubmitButton(postMessage: PostMessage): HTMLButtonElement {
   // Create the submit button and attach submit action
   // Would this system be better as a form?
-  const submitButton = createElement("button", "troubleshooting__send_button");
+  const submitButton = createElement({
+    tagName: "button",
+    className: "troubleshooting__send_button",
+  });
   submitButton.innerText = "Submit";
   submitButton.onclick = () => {
     postMessage({ action: "submit", promptValue: getPrompt().value });
   };
   return submitButton;
 }
 
-function getMain() {
+function getPrompt(): HTMLTextAreaElement {
+  // Return the prompt, if it exists (which it should)
+  return document.getElementById("prompt") as HTMLTextAreaElement;
+}
+
+function getMainSection(): HTMLElement {
   return document.getElementById("main");
 }
 
+function getBody() {
+  return document.getElementById("body");
+}
+
+function handleMessage({ data }: { data: string }) {
+  const mainSection = getMainSection();
+  const newMessage = createElement({
+    tagName: "p",
+    className: "troubleshooting__message",
+  });
+  newMessage.textContent = data;
+  mainSection.appendChild(newMessage);
+}
+
 function init(postMessage: PostMessage) {
   // Add children to main element
   // It's easier to do this in the script because we can reload the webview in development, rather than restarting
   // the whole extension development host.
-  getMain().append(
-    createElement("section", "troubleshooting__input", [
-      createPrompt(),
-      createSubmitButton(postMessage),
-    ]),
-    createElement("section", "troubleshooting__main")
+  getBody().append(
+    createElement({
+      tagName: "section",
+      className: "troubleshooting__input",
+      children: [createPrompt(), createSubmitButton(postMessage)],
+    }),
+    createElement({
+      tagName: "section",
+      className: "troubleshooting__main",
+      id: "main",
+    })
   );
 
-  window.addEventListener("message", ({ data }) => console.log(data));
+  window.addEventListener("message", handleMessage);
 }
 
 (function () {