Add try/catch around `fetch()`, style system messages correctly

src/lib/Chat.svelte

@@ -62,29 +62,34 @@
     // Show updating bar
     updating = true;
 
-    const response: Response = await (
+    let response: Response;
-      await fetch("https://api.openai.com/v1/chat/completions", {
+    try {
-        method: "POST",
+      response = await (
-        headers: {
+        await fetch("https://api.openai.com/v1/chat/completions", {
-          Authorization: `Bearer ${$apiKeyStorage}`,
+          method: "POST",
-          "Content-Type": "application/json",
+          headers: {
-        },
+            Authorization: `Bearer ${$apiKeyStorage}`,
-        body: JSON.stringify({
+            "Content-Type": "application/json",
-          model: "gpt-3.5-turbo",
+          },
-          // Submit only the role and content of the messages, provide the previous messages as well for context
+          body: JSON.stringify({
-          messages: messages.map((message): Message => {
+            model: "gpt-3.5-turbo",
-            const { role, content } = message;
+            // Submit only the role and content of the messages, provide the previous messages as well for context
-            return { role, content };
+            messages: messages.map((message): Message => {
+              const { role, content } = message;
+              return { role, content };
+            }),
+            // temperature: 1
+            // top_p: 1
+            // n: 1
+            //stream: false,
+            // stop: null
+            //max_tokens: 4096,
           }),
-          // temperature: 1
+        })
-          // top_p: 1
+      ).json();
-          // n: 1
+    } catch (e) {
-          //stream: false,
+      response = { error: { message: e.message } };
-          // stop: null
+    }
-          //max_tokens: 4096,
-        }),
-      })
-    ).json();
 
     // Hide updating bar
     updating = false;
@@ -214,13 +219,15 @@
     </article>
   {:else if message.role === "system"}
     <article class="message is-danger">
-      <SvelteMarkdown
+      <div class="message-body">
-        source={message.content}
+        <SvelteMarkdown
-        options={markedownOptions}
+          source={message.content}
-        renderers={{
+          options={markedownOptions}
-          /*code: Code*/
+          renderers={{
-        }}
+            /*code: Code*/
-      />
+          }}
+        />
+      </div>
     </article>
   {:else}
     <article class="message is-success">