✨ | Clean up and simplify async handling

plugins/gpt-unslothed/index.jsx

@@ -13,7 +13,6 @@ const {
     TextBox,
     ReactiveRoot,
     TextArea,
-    ButtonLooks,
   },
   plugin: { store },
   util: { getFiber },
@@ -83,18 +82,15 @@ export function onLoad() {
   .mb-2 {
     margin-bottom: .5rem;
   }
-  
+
   .pr-2 {
     padding-right: .5rem;
   }`);
 
-  let closeModal = null;
   const openGenerationModal = async () => {
-    let savedModel = store.model || "";
-
-    let model = savedModel;
+    let model = store.model || "";
     let prompt = "";
-    closeModal = openModal((p) => (
+    closeModal = openModal(() => (
       <ModalRoot size={ModalSizes.SMALL}>
         <ModalHeader close={() => closeModal()}>Generate Response</ModalHeader>
         <ModalBody>
@@ -116,7 +112,6 @@ export function onLoad() {
             </div>
             <TextArea
               width="100%"
-              value=""
               placeholder="Prompt"
               onInput={(e) => {
                 prompt = e;
@@ -135,9 +130,10 @@ export function onLoad() {
               onClick={async () => {
                 closeModal();
 
-                const myUsername = document.querySelector(
-                  "[class^=nameTag] > div"
-                ).textContent;
+                const usernameEl = document.querySelector(
+                  "[class^=nameTag] > div",
+                );
+                const myUsername = usernameEl?.textContent ?? "unknown";
 
                 store.model = model;
 
@@ -156,13 +152,11 @@ export function onLoad() {
 
                 // add loading indicator
                 const messageBar = document.querySelector(
-                  '[class*="slateContainer"]'
+                  '[class*="slateContainer"]',
                 );
-                // get absolute position of messagebar
                 const { x, y } = messageBar.getBoundingClientRect();
-                const loadingIndicatorElem = document.body.appendChild(
-                  loadingIndicator()
-                );
+                const loadingIndicatorElem =
+                  document.body.appendChild(loadingIndicator());
 
                 loadingIndicatorElem.style.position = "absolute";
                 loadingIndicatorElem.style.left = `${x}px`;
@@ -182,27 +176,26 @@ export function onLoad() {
                   stream: false,
                 };
 
-                fetch(apiUrl, {
-                  method: "POST",
-                  headers: apiHeaders,
-                  body: JSON.stringify(apiBody),
-                })
-                  .then((res) => res.json())
-                  .then((res) => {
-                    const response = res.choices[0].message.content;
-                    appendTextToMessagebar(
-                      response
-                        .replace(/^(?=.{0,49}:)([\w\s\-]+?[^ ]):/, "")
-                        .trim()
-                    );
-
-                    loadingIndicatorElem.remove();
-                  })
-                  .catch((err) => {
-                    console.error("API Error:", err);
-                    loadingIndicatorElem.remove();
-                    alert(`Error: ${err.message || "Failed to generate response"}`);
+                try {
+                  const res = await fetch(apiUrl, {
+                    method: "POST",
+                    headers: apiHeaders,
+                    body: JSON.stringify(apiBody),
                   });
+                  const body = await res.json();
+                  if (!res.ok) {
+                    throw new Error(
+                      `${res.status} ${res.statusText}${body.detail ? `: ${body.detail}` : ""}`,
+                    );
+                  }
+                  const response = body.choices[0].message.content;
+                  appendTextToMessagebar(response.trim());
+                } catch (err) {
+                  console.error("API Error:", err);
+                  alert(`Error: ${err.message || "Failed to generate response"}`);
+                } finally {
+                  loadingIndicatorElem.remove();
+                }
               }}
             >
               Generate
@@ -239,9 +232,9 @@ export function onLoad() {
             </button>
           </div>
         </ReactiveRoot>,
-        node.firstChild
+        node.firstChild,
       );
-    }
+    },
   );
 }