Improve error handling

Author: charlesLoder

src/components/Messages/style.module.css

@@ -1,4 +1,5 @@
 .messagesContainer {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -8,16 +9,26 @@
   scrollbar-color: var(--clover-ai-colors-secondaryAlt) transparent;
   overflow-y: scroll;
 
+  &::after {
+    font-style: italic;
+    --line-height: 1.5;
+    line-height: var(--line-height);
+    /* The multiplier -2 is used to adjust the positioning of the content text
+         relative to the preceding content. It ensures the text appears slightly above
+         its default position for better visual alignment. */
+    margin-block-start: calc(-2 * (var(--line-height) * var(--clover-ai-sizes-3)));
+  }
+
   &[data-state="assistant_responding"] {
     &::after {
       content: "Thinking...";
-      font-style: italic;
-      --line-height: 1.5;
-      line-height: var(--line-height);
-      /* The multiplier -2 is used to adjust the positioning of the "Thinking..." text
-         relative to the preceding content. It ensures the text appears slightly above
-         its default position for better visual alignment. */
-      margin-block-start: calc(-2 * (var(--line-height) * var(--clover-ai-sizes-3)));
+    }
+  }
+
+  &[data-state="error"] {
+    &::after {
+      content: "An error occurred. Please try again.";
+      color: var(--clover-ai-colors-error);
     }
   }
 

src/components/TextArea/index.tsx

@@ -8,9 +8,8 @@ type ContentEditableProps = ComponentProps<typeof ContentEditable>;
 export interface TextareaProps extends ContentEditableProps {
   label?: string;
   labelDisplay?: "hidden" | "visible";
+  /** An error message to display to the user */
   error?: string;
-  helperText?: string;
-  variant?: "default" | "bordered" | "filled";
   size?: "small" | "medium" | "large";
   id?: string;
   children?: React.ReactNode;
@@ -20,18 +19,15 @@ export const Textarea: FC<TextareaProps> = ({
   label,
   labelDisplay = "visible",
   error,
-  helperText,
-  variant = "default",
   size = "medium",
   children,
   ...rest
 }) => {
   const textareaId = `textarea-contenteditable-container`;
   const labelId = `textarea-label`;
-  const helperId = `textarea-helper`;
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} data-error={!!error}>
       {label && (
         <label
           className={labelDisplay === "hidden" ? styles.visuallyHidden : styles.label}
@@ -43,12 +39,9 @@ export const Textarea: FC<TextareaProps> = ({
         </label>
       )}
       <div
-        aria-describedby={helperId}
         aria-labelledby={label ? labelId : undefined}
         className={styles.textarea}
-        data-error={!!error}
         data-size={size}
-        data-variant={variant}
         id={textareaId}
       >
         <ContentEditable
@@ -60,9 +53,9 @@ export const Textarea: FC<TextareaProps> = ({
         />
         {children && <div className={styles.childrenContainer}>{children}</div>}
       </div>
-      {(error || helperText) && (
-        <div className={styles.helperText} data-error={!!error} id={helperId}>
-          {error || helperText}
+      {error && (
+        <div className={styles.errorMessage} aria-live="polite">
+          {error}
         </div>
       )}
     </div>

src/providers/userTokenProvider/index.tsx

@@ -232,7 +232,7 @@ export class UserTokenProvider extends BaseProvider {
 
       this.set_conversation_state("idle");
     } catch (error) {
-      console.error("Error sending messages:", error); // eslint-disable-line no-console
+      console.error(error); // eslint-disable-line no-console
       this.set_conversation_state("error");
     }
   }