update spinner and add basic error handling

apps/web-remix/app/components/chat/Webchat.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Trash, Upload } from 'lucide-react';
+import { LoaderCircle, Trash, Upload } from 'lucide-react';
 
 import {
   ChatGeneratingAnimation,
@@ -85,6 +85,7 @@ export const Webchat = ({
     latestAiMessage,
     isLoading,
     isError,
+    error: chatError,
     pipeline,
   } = useChat({
     organizationId: organizationId as unknown as number,
@@ -120,8 +121,11 @@ export const Webchat = ({
     };
   }, []);
 
-  if (isLoading) return <p>LOADING...</p>;
-  if (isError || !pipeline) return <p>ERROR</p>;
+  if (isLoading)
+    return <LoaderCircle className="animate-spin ease-in-out duration-300" />;
+  if (chatError) return <p className="text-foreground text-sm">{chatError}</p>;
+  if (isError || !pipeline)
+    return <p className="text-foreground text-sm">Something went wrong</p>;
 
   return (
     <ChatWrapper className={cn('h-full py-3 lg:py-4 relative', rest.className)}>

apps/web-remix/app/components/chat/chat.reducer.ts

@@ -1,4 +1,5 @@
 import cloneDeep from 'lodash.clonedeep';
+import startCase from 'lodash.startcase';
 import { v4 as uuidv4 } from 'uuid';
 
 import type {
@@ -17,6 +18,9 @@ type Action =
     }
   | {
       type: 'ERROR';
+      payload: {
+        error: string | null;
+      };
     }
   | {
       type: 'SEND_MESSAGE';
@@ -47,6 +51,7 @@ export type ChatStatus =
 export type ChatOutputStatus = 'idle' | 'generating';
 
 export type ChatReducerState = {
+  error: null | string;
   status: ChatStatus;
   pipelineConfig: WebchatPipelineConfig | null;
   outputsStatus: Record<string, ChatOutputStatus>;
@@ -61,6 +66,7 @@ export const chatReducer = (
     case 'CONNECT':
       return {
         ...state,
+        error: null,
         pipelineConfig: action.payload.data,
         status: 'connected',
         outputsStatus: toOutputStatus(
@@ -70,6 +76,7 @@ export const chatReducer = (
     case 'ERROR':
       return {
         ...state,
+        error: action.payload.error,
         status: 'errored',
         outputsStatus: setEveryOutputStatus(state.outputsStatus, 'idle'),
       };
@@ -132,9 +139,12 @@ export const connect = (config: WebchatPipelineConfig) => {
   } as const;
 };
 
-export const error = () => {
+export const error = (err: string | null = null) => {
   return {
     type: 'ERROR',
+    payload: {
+      error: err ? startCase(err) : null,
+    },
   } as const;
 };
 

apps/web-remix/app/components/chat/useChat.tsx

@@ -46,6 +46,7 @@ export const useChat = ({
   const [state, dispatch] = useReducer(chatReducer, {
     status: 'loading',
     pipelineConfig: null,
+    error: null,
     messages: [],
     outputsStatus: {},
   });
@@ -78,12 +79,13 @@ export const useChat = ({
     }
   };
 
-  const onBlockError = () => {
-    dispatch(error());
+  const onBlockError = (blockId: string, errors: string[]) => {
+    console.error(blockId, errors);
+    // dispatch(error());
   };
 
-  const onError = () => {
-    dispatch(error());
+  const onError = (err: string) => {
+    dispatch(error(err));
   };
 
   const onConnect = (
@@ -171,6 +173,7 @@ export const useChat = ({
   return {
     push,
     isError,
+    error: state.error,
     stopRun,
     startRun,
     joinRun,