fix: change ws to an optional field in form and question

src/components/dynamicForm/dynamicForm.stories.tsx

@@ -1,3 +1,4 @@
+import { optionalWsDescription } from '../sharedDescription'
 import UniformsForm from './uniformsForm'
 
 export default {
@@ -7,6 +8,9 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    ws: optionalWsDescription,
+  },
 }
 
 export const Default = {
@@ -23,6 +27,7 @@ export const Default = {
       },
       required: ['street', 'zip', 'state'],
     },
+    ws: { send: () => {} },
   },
 }
 
@@ -42,5 +47,28 @@ export const Meeting = {
         sunday: { type: 'boolean' },
       },
     },
+    ws: { send: () => {} },
+  },
+}
+
+export const ReadOnly = {
+  args: {
+    title: 'Choose the days',
+    schema: {
+      title: 'Meeting Days',
+      type: 'object',
+      properties: {
+        monday: { type: 'boolean' },
+        tuesday: { type: 'boolean' },
+        wednesday: { type: 'boolean' },
+        thursday: { type: 'boolean' },
+        friday: { type: 'boolean' },
+        saturday: { type: 'boolean' },
+        sunday: { type: 'boolean' },
+      },
+    },
+    data: {
+      thursday: true,
+    },
   },
 }

src/components/dynamicForm/uniformsForm.tsx

@@ -62,7 +62,7 @@ export default function UniformsForm(props: DynamicFormProps) {
       data: { data: model, inReplyTo: props.messageId },
     }
     setData(model)
-    props.ws.send(formattedMessage)
+    props.ws?.send(formattedMessage)
   }
 
   return (
@@ -73,7 +73,7 @@ export default function UniformsForm(props: DynamicFormProps) {
         schema={bridge}
         onSubmit={(model) => handleSubmit(model)}
         model={data}
-        disabled={!!data}
+        disabled={!!data || !props.ws}
       />
     </Box>
   )

src/components/promptBuilder/promptBuilder.stories.tsx

@@ -175,7 +175,7 @@ function CustomTextInput(props: Omit<QuestionProps, 'options'>) {
       inReplyTo: props.messageId,
     }
 
-    props.ws.send(formattedMessage)
+    props.ws?.send(formattedMessage)
     setIsSubmitted(true)
   }
 

src/components/question/question.stories.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 
 import Icon from '../icon/icon'
 import MessageCanvas from '../messageCanvas/messageCanvas'
-import { senderDescription, wsDescription } from '../sharedDescription'
+import { optionalWsDescription, senderDescription } from '../sharedDescription'
 import Text from '../text/text'
 import type { Message } from '../types'
 import Question from './question'
@@ -28,7 +28,7 @@ const meta: Meta<React.ComponentProps<typeof Question>> = {
 }
 
 meta.argTypes = {
-  ws: wsDescription,
+  ws: optionalWsDescription,
   sender: senderDescription,
 }
 
@@ -128,3 +128,14 @@ export const InMessageSpace = {
     },
   ],
 }
+
+export const ReadOnly = {
+  args: {
+    sender: agent,
+    conversationId: '2',
+    messageId: '1',
+    title: 'What do you think?',
+    description: 'Choose either of the options below.',
+    options,
+  },
+}

src/components/question/question.tsx

@@ -43,7 +43,7 @@ export default function Question(props: QuestionProps) {
       inReplyTo: props.messageId,
     }
 
-    props.ws.send(formattedMessage)
+    props.ws?.send(formattedMessage)
   }
 
   const buttonList = props.options.map((option, index) => {
@@ -61,8 +61,8 @@ export default function Question(props: QuestionProps) {
         size="small"
         sx={selectedOption === option ? selectedStyles : {}}
         className="rustic-option"
-        disabled={!!selectedOption}
-        aria-disabled={!!selectedOption}
+        disabled={!!selectedOption || !props.ws}
+        aria-disabled={!!selectedOption || !props.ws}
         label={option}
       ></Chip>
     )

src/components/sharedDescription.ts

@@ -27,9 +27,9 @@ export const senderDescription: InputType = {
   },
 }
 
-export const wsDescription: InputType = {
+export const optionalWsDescription: InputType = {
   description:
-    'WebSocket connection to send and receive messages to and from a backend. The onReceive prop will override the default handler once it is set. If you need to use the WebSocket for purposes other than chat, you will need to create a separate WebSocket connection.',
+    'WebSocket connection to send response messages to a backend. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. If not provided, the component will not be interactive.',
   type: {
     name: 'object',
     value: {
@@ -38,7 +38,6 @@ export const wsDescription: InputType = {
       reconnect: { name: 'function', required: true },
       onReceive: { name: 'function', required: false },
     },
-    required: true,
   },
   table: {
     type: {
@@ -53,6 +52,13 @@ export const wsDescription: InputType = {
   },
 }
 
+export const wsDescription: InputType = {
+  ...optionalWsDescription,
+  description:
+    'WebSocket connection to send and receive messages to and from a backend. The onReceive prop will override the default handler once it is set. If you need to use the WebSocket for purposes other than chat, you will need to create a separate WebSocket connection.',
+  required: true,
+}
+
 export const participantDetail =
   'Each Participant has the following fields:\n' +
   ' id: String representing the unique identifier for a participant\n' +

src/components/types.ts

@@ -362,9 +362,9 @@ export type MultimodalInputProps = TextInputProps &
     | 'errorMessagesContainer'
   >
 
-export interface ConversationProps {
-  /** WebSocket connection to send and receive messages to and from a backend. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. */
-  ws: WebSocketClient
+export interface ConversationBaseProps {
+  /** WebSocket connection to send and receive messages to and from a backend. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. If not provided, the component may not be able to send or receive messages. */
+  ws?: WebSocketClient
   /** Current user. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. */
   sender: Sender
   /** Id of the current conversation. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. */
@@ -373,20 +373,35 @@ export interface ConversationProps {
   messageId: string
 }
 
+export interface ConversationPropsWithOptionalWs extends ConversationBaseProps {
+  /** WebSocket connection to send response messages to a backend. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. If not provided, the component will not be interactive. */
+  ws?: WebSocketClient
+}
+
+export interface ConversationPropsWithMandatoryWs
+  extends ConversationBaseProps {
+  /** WebSocket connection to send and receive messages to and from a backend. This value will be set automatically if the component is rendered with `ElementRenderer` or `MessageSpace`. */
+  ws: WebSocketClient
+}
+
 export interface QuestionFormat extends DataFormat {
   /** Array of options to choose from. */
   options: (string | number)[]
 }
 
-export interface QuestionProps extends QuestionFormat, ConversationProps {}
+export interface QuestionProps
+  extends QuestionFormat,
+    ConversationPropsWithOptionalWs {}
 
 export interface PromptsFormat {
   /** A list of prompt strings for users to select from. These prompts will be displayed as interactive elements in the UI. */
   prompts: string[]
   position?: 'inConversation' | 'hoverOverInput'
 }
 
-export interface PromptsProps extends PromptsFormat, ConversationProps {
+export interface PromptsProps
+  extends PromptsFormat,
+    ConversationPropsWithMandatoryWs {
   /** An optional className to apply to the prompts container. */
   className?: string
 }
@@ -446,7 +461,9 @@ export interface FormFormat extends DataFormat {
   data?: any
 }
 
-export interface DynamicFormProps extends FormFormat, ConversationProps {}
+export interface DynamicFormProps
+  extends FormFormat,
+    ConversationPropsWithOptionalWs {}
 
 interface ContentBase {
   type: 'text' | 'image_url' | 'input_audio' | 'file_url'