diff --git a/src/components/cactiComponents/ErrorResponse.tsx b/src/components/cactiComponents/ErrorResponse.tsx new file mode 100644 index 00000000..bd625a05 --- /dev/null +++ b/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 ( + + + {({ open }) => ( + <> + + +
+
+ +
+ {props.text} +
+
{open ? : }
+ + + + +
+ {props.error} +
+
+ +
+ + + )} + + + ); +}; diff --git a/src/components/cactiComponents/index.ts b/src/components/cactiComponents/index.ts index f2148899..e637c332 100644 --- a/src/components/cactiComponents/index.ts +++ b/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>([ [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 }; diff --git a/src/components/experimental_/MessageTranslator_.tsx b/src/components/experimental_/MessageTranslator_.tsx index 4e1c8582..b378eaab 100644 --- a/src/components/experimental_/MessageTranslator_.tsx +++ b/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,7 +74,22 @@ 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, + , + ]; + return [ ...list, { 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([ , @@ -153,7 +169,6 @@ export interface WidgetProps { export const Widget = (props: WidgetProps) => { const widgets = new Map(); - 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', - + ); widgets.set('nft-asset-list-container', ); @@ -249,8 +268,10 @@ export const Widget = (props: WidgetProps) => { /** * Experimental: Bring in some 'direct' cacti components * */ + widgets.set('ErrorResponse', ); widgets.set('tableresponse', ); widgets.set('TextResponse', ); + widgets.set('table-container', ); widgets.set( 'zksync-deposit', diff --git a/tsconfig.json b/tsconfig.json index 2159bf45..cd0f3701 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,8 @@ "baseUrl": ".", "paths": { "@/*": ["./src/*"] - } + }, + "downlevelIteration": true }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]