add in an ErrorResponse element

src/components/cactiComponents/ErrorResponse.tsx

@@ -0,0 +1,56 @@
+import { Disclosure } from '@headlessui/react';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ExclamationTriangleIcon,
+} from '@heroicons/react/24/outline';
+import { Markdown } from '../experimental_/Markdown';
+import { buttonStyle } from '../experimental_/layout/sidebar/NewChatButton';
+import { ResponseTitle, ResponseWrap } from './helpers/layout';
+
+const textStyle = 'text-base text-white text-opacity-70 gap-1 ';
+
+
+export interface ErrorResponseProps {
+  text: string,
+  error: string,
+}
+/**
+ * Error response element
+ *
+ * Includes:
+ * Text
+ */
+
+export const ErrorResponse = (props: ErrorResponseProps): JSX.Element => {
+  return (
+    <ResponseWrap>
+      <Disclosure as="div" defaultOpen={false}>
+        {({ open }) => (
+          <>
+            <Disclosure.Button as="div">
+              <ResponseTitle>
+                <div className="flex items-center gap-4 text-base">
+                  <div className="w-[16px]">    
+                    <ExclamationTriangleIcon />
+                  </div>
+                  {props.text}
+                </div>
+                <div className="w-[16px]">{open ? <ChevronUpIcon /> : <ChevronDownIcon />}</div>
+              </ResponseTitle>
+            </Disclosure.Button>
+
+            <Disclosure.Panel as="div" className={`${textStyle} gap-4`}>
+              <div className="p-4 font-mono text-xs">
+                <Markdown>{props.error}</Markdown>
+              </div>
+              <div className="flex w-full justify-center">
+                <button className={buttonStyle}> Submit Bug Report </button>
+              </div>
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
+    </ResponseWrap>
+  );
+};

src/components/cactiComponents/index.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import { ActionResponse, ActionResponseProps } from './ActionResponse';
 import { DoubleLineResponse } from './DoubleLineResponse';
 import { HeaderResponse } from './HeaderResponse';
@@ -7,6 +7,7 @@ import { ImageResponse, ImageResponseProps } from './ImageResponse';
 import { ListResponse } from './ListResponse';
 import { SingleLineResponse } from './SingleLineResponse';
 import { TextResponse } from './TextResponse';
+import { ErrorResponse } from './ErrorResponse';
 
 export enum CactiResponse {
   TextResponse = 'TextResponse',
@@ -17,6 +18,7 @@ export enum CactiResponse {
   ActionResponse = 'ActionResponse',
   ImageResponse = 'ImageResponse',
   DoubleLineResponse = 'DoubleLineResponse',
+  ErrorResponse = 'ErrorResponse',
   // ActionStepper = 'ActionStepper',
   // InlineChip = 'InlineChip',
 }
@@ -26,15 +28,13 @@ export type CactiResponseProps = ImageResponseProps | ActionResponseProps | any;
 export const cactiComponentMap = new Map<string, FunctionComponent<CactiResponseProps>>([
   [CactiResponse.TextResponse as const, TextResponse],
   [CactiResponse.HeaderResponse as const, HeaderResponse],
-
   [CactiResponse.ListResponse as const, ListResponse],
-
   [CactiResponse.SingleLineResponse as const, SingleLineResponse],
   [CactiResponse.DoubleLineResponse as const, DoubleLineResponse],
   [CactiResponse.IconResponse as const, IconResponse],
-
   [CactiResponse.ActionResponse as const, ActionResponse],
   [CactiResponse.ImageResponse as const, ImageResponse],
+  [CactiResponse.ErrorResponse as const, ErrorResponse],
 ]);
 
 export {
@@ -46,4 +46,5 @@ export {
   ListResponse,
   ActionResponse,
   ImageResponse,
+  ErrorResponse
 };

src/components/experimental_/MessageTranslator_.tsx

@@ -1,11 +1,11 @@
-import { Fragment, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { AnyARecord } from 'dns';
 import { Message } from '@/contexts/ChatContext';
 import { SharedStateContextProvider } from '@/contexts/SharedStateContext';
 import { parseMessage } from '@/utils/parse-message';
 import Avatar from '../Avatar';
 import { Widgetize } from '../MessageTranslator';
-import { ListResponse, TextResponse } from '../cactiComponents';
+import { ErrorResponse, TextResponse } from '../cactiComponents';
 import { ImageVariant } from '../cactiComponents/ImageResponse';
 import { TableResponse } from '../cactiComponents/TableResponse';
 import { FeedbackButton } from './FeedbackButton_';
@@ -74,14 +74,30 @@ export const MessageTranslator = ({ message }: { message: Message }) => {
       try {
         const list = parsedMessage.reduce((list, item, idx) => {
           /* if item is a string (and not nothing) simply send a text response */
-          if (typeof item === 'string' && item.trim() !== '')
+          if (typeof item === 'string' && item.trim() !== '') {
+            if (item.includes('exception evaluating'))
+              return [
+                ...list,
+                <Widget
+                  key={idx}
+                  widget={{
+                    name: 'ErrorResponse',
+                    params: {
+                      text: 'We encountered a problem building this particular widget.',
+                      error: item,
+                    },
+                  }}
+                />,
+              ];
+
             return [
               ...list,
               <Widget
                 key={item.slice(0, 16)}
                 widget={{ name: 'TextResponse', params: { text: item } }}
               />,
             ];
+          }
 
           /* if item is an object, assume it is a container or a widget */
           if (typeof item !== 'string' && item.name) {
@@ -112,14 +128,14 @@ export const MessageTranslator = ({ message }: { message: Message }) => {
         setWidgetGroup(list);
       } catch (e) {
         /* Catch the case where the widget fails to render for ANY reason */
-        console.error(e);
         setWidgetGroup([
           <Widget
             key={'error'}
             widget={{
-              name: 'TextResponse',
+              name: 'ErrorResponse',
               params: {
-                text: 'Hmmm, it looks like we had a little trouuble translating the AI response.',
+                text: 'Hmmm, it looks like we had a little trouble translating the AI response.',
+                error: e,
               },
             }}
           />,
@@ -153,7 +169,6 @@ export interface WidgetProps {
 
 export const Widget = (props: WidgetProps) => {
   const widgets = new Map<string, JSX.Element>();
-
   const { name, params, variant } = props.widget;
   const fnName = name.replace('display-', '');
   const parsedArgs = parseArgs(params);
@@ -189,7 +204,11 @@ export const Widget = (props: WidgetProps) => {
 
   widgets.set(
     'nft-collection-assets-container',
-    <NftCollection {...parsedArgs.collection?.params} assetsToShow={parsedArgs.assets} variant={ImageVariant.SHOWCASE} />
+    <NftCollection
+      {...parsedArgs.collection?.params}
+      assetsToShow={parsedArgs.assets}
+      variant={ImageVariant.SHOWCASE}
+    />
   );
 
   widgets.set('nft-asset-list-container', <NftAssetList {...parsedArgs} />);
@@ -249,8 +268,10 @@ export const Widget = (props: WidgetProps) => {
   /**
    * Experimental: Bring in some 'direct' cacti components
    * */
+  widgets.set('ErrorResponse', <ErrorResponse {...parsedArgs} />);
   widgets.set('tableresponse', <TableResponse {...parsedArgs} />);
   widgets.set('TextResponse', <TextResponse {...parsedArgs} />);
+
   widgets.set('table-container', <TableResponse {...parsedArgs} />);
   widgets.set(
     'zksync-deposit',

tsconfig.json

@@ -17,7 +17,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "downlevelIteration": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]