error handling

src/api/helper.ts

@@ -12,7 +12,12 @@ export const parseEventSource = (
         .map((line) => line.replace(/^data: /, ''))
         .join('');
       if (jsonString === '[DONE]') return jsonString;
-      else return JSON.parse(jsonString);
+      try {
+        const json = JSON.parse(jsonString);
+        return json;
+      } catch {
+        return '[ERROR]';
+      }
     });
   return result;
 };

src/components/Chat/ChatContent/ChatContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ScrollToBottom from 'react-scroll-to-bottom';
 import useStore from '@store/store';
 
@@ -24,6 +24,7 @@ const ChatContent = () => {
       state.setMessages,
     ]
   );
+  const [error, setError] = useState<string>('');
 
   const handleSubmit = async () => {
     const updatedMessages: MessageInterface[] = JSON.parse(
@@ -33,26 +34,26 @@ const ChatContent = () => {
     setMessages(updatedMessages);
     let stream;
 
-    if (apiFree) {
+    try {
-      stream = await getChatCompletionStreamFree(messages);
+      if (apiFree) {
-    } else if (apiKey) {
+        stream = await getChatCompletionStreamFree(messages);
-      stream = await getChatCompletionStreamCustom(apiKey, messages);
+      } else if (apiKey) {
-    }
+        stream = await getChatCompletionStreamCustom(apiKey, messages);
+      }
 
-    if (stream) {
+      if (stream) {
-      const reader = stream.getReader();
+        const reader = stream.getReader();
-      let reading = true;
+        let reading = true;
-      while (reading) {
+        while (reading) {
-        const { done, value } = await reader.read();
+          const { done, value } = await reader.read();
 
-        try {
           const result = parseEventSource(new TextDecoder().decode(value));
 
           if (result === '[DONE]' || done) {
             reading = false;
           } else {
             const resultString = result.reduce((output: string, curr) => {
-              if (curr === '[DONE]') return output;
+              if (typeof curr === 'string') return output;
               else {
                 const content = curr.choices[0].delta.content;
                 if (content) output += content;
@@ -66,10 +67,15 @@ const ChatContent = () => {
             updatedMessages[updatedMessages.length - 1].content += resultString;
             setMessages(updatedMessages);
           }
-        } catch (e: unknown) {
-          console.log((e as Error).message);
         }
       }
+    } catch (e: unknown) {
+      const err = (e as Error).message;
+      console.log(err);
+      setError(err);
+      setTimeout(() => {
+        setError(''), 10000;
+      });
     }
   };
 
@@ -95,6 +101,12 @@ const ChatContent = () => {
           ))}
           <Message role={inputRole} content='' messageIndex={-1} sticky />
 
+          {error !== '' && (
+            <div className='bg-red-600/50 p-2 rounded-sm w-3/5 mt-3 text-gray-900 dark:text-gray-300 text-sm'>
+              Invalid API key!
+            </div>
+          )}
+
           <div className='text-center mt-6 flex justify-center gap-2'>
             <button
               className='btn relative btn-primary mt-2'

src/components/Chat/ChatContent/Message/Message.tsx

@@ -26,7 +26,11 @@ const Message = ({
   return (
     <div
       className={`w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group ${backgroundStyle[role]}`}
-      key={Math.random()}
+      key={
+        messageIndex !== -1
+          ? `${messageIndex}-${content}`
+          : 'sticky-message-text-area'
+      }
     >
       <div className='text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0'>
         <Avatar role={role} />

src/components/Chat/ChatContent/Message/MessageContent.tsx

@@ -264,11 +264,12 @@ const EditView = ({
             );
             if (sticky) {
               updatedMessages.push({ role: inputRole, content: _content });
+              _setContent('');
             } else {
               updatedMessages[messageIndex].content = _content;
+              setIsEdit(false);
             }
             setMessages(updatedMessages);
-            setIsEdit(false);
           }}
         >
           <div className='flex items-center justify-center gap-2'>Save</div>