feat: add request reply 2

library/src/config/config.ts

@@ -6,6 +6,8 @@ export interface ConfigInterface {
   parserOptions?: any;
   publishLabel?: string;
   subscribeLabel?: string;
+  requestLabel?: string;
+  replyLabel?: string;
 }
 
 export interface ShowConfig {

library/src/constants.ts

@@ -38,6 +38,10 @@ export const PUBLISH_TEXT = 'Publish';
 export const PUBLISH_LABEL_DEFAULT_TEXT = 'PUB';
 export const SUBSCRIBE_TEXT = 'Subscribe';
 export const SUBSCRIBE_LABEL_DEFAULT_TEXT = 'SUB';
+export const REQUEST_TEXT = 'Request';
+export const REQUEST_LABEL_DEFAULT_TEXT = 'REQUEST';
+export const REPLIER_TEXT = 'Reply';
+export const REPLIER_LABEL_DEFAULT_TEXT = 'REPLY';
 export const REQUIRED_TEXT = 'Required';
 export const GENERATED_TEXT = 'Generated';
 

library/src/containers/Operations/Operation.tsx

@@ -17,6 +17,8 @@ import { CommonHelpers, SchemaHelpers } from '../../helpers';
 import {
   EXTERAL_DOCUMENTATION_TEXT,
   PUBLISH_LABEL_DEFAULT_TEXT,
+  REPLIER_LABEL_DEFAULT_TEXT,
+  REQUEST_LABEL_DEFAULT_TEXT,
   SUBSCRIBE_LABEL_DEFAULT_TEXT,
 } from '../../constants';
 import { PayloadType } from '../../types';
@@ -168,6 +170,8 @@ export const Operation: React.FunctionComponent<Props> = props => {
           </div>
         )}
       </div>
+
+      <OperationReplyInfo {...props} />
     </div>
   );
 };
@@ -185,6 +189,18 @@ function getTypeInformation({
       typeLabel: config.subscribeLabel ?? SUBSCRIBE_LABEL_DEFAULT_TEXT,
     };
   }
+  if (type === PayloadType.REPLY) {
+    return {
+      borderColor: 'border-orange-600 text-orange-600',
+      typeLabel: config.publishLabel || REPLIER_LABEL_DEFAULT_TEXT,
+    };
+  }
+  if (type === PayloadType.REQUEST) {
+    return {
+      borderColor: 'border-red-600 text-red-600',
+      typeLabel: config.publishLabel || REQUEST_LABEL_DEFAULT_TEXT,
+    };
+  }
   // type === PayloadType.PUBLISH
   return {
     borderColor: 'border-blue-600 text-blue-500',
@@ -256,3 +272,115 @@ export const OperationInfo: React.FunctionComponent<Props> = props => {
     </>
   );
 };
+
+export const OperationReplyInfo: React.FunctionComponent<Props> = props => {
+  const { type = PayloadType.PUBLISH, operation } = props;
+  if (type !== PayloadType.REPLY && type !== PayloadType.REQUEST) return <></>;
+  const reply = operation.reply();
+  if (reply === undefined) return <></>;
+  const config = useConfig();
+  const { typeLabel } = getTypeInformation({ type, config });
+  const replyMessages = reply.messages();
+  const explicitChannel = reply.channel();
+
+  return (
+    <>
+      <div className="mb-4">
+        <h3>
+          <span
+            className={`font-mono border uppercase p-1 rounded mr-2`}
+            title={type}
+          >
+            {typeLabel} information
+          </span>
+        </h3>
+      </div>
+
+      {explicitChannel && (
+        <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
+          <div className="text-sm text-gray-700">
+            {typeLabel} should be done on channel
+            <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+              {explicitChannel.id()}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="w-full mt-4">
+        {replyMessages.length > 1 ? (
+          <div className="mt-2">
+            <p className="px-8">
+              The reply should be with <strong>one of</strong> the following
+              messages:
+            </p>
+            <ul>
+              {replyMessages.all().map((msg, idx) => (
+                <li className="mt-4" key={idx}>
+                  <Message message={msg} index={idx} showExamples={true} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <div className="mt-2">
+            <p className="px-8">Reply should be with the following message:</p>
+            <div className="mt-2">
+              <Message message={replyMessages.all()[0]} showExamples={true} />
+            </div>
+          </div>
+        )}
+      </div>
+      <OperationReplyAddressInfo {...props} />
+
+      <Extensions name="Operation Reply Extensions" item={reply} />
+    </>
+  );
+};
+
+export const OperationReplyAddressInfo: React.FunctionComponent<Props> = ({
+  type = PayloadType.PUBLISH,
+  operation,
+}) => {
+  if (type !== PayloadType.REPLY && type !== PayloadType.REQUEST) return <></>;
+  const reply = operation.reply();
+  if (reply === undefined || !reply.hasAddress()) return <></>;
+  const config = useConfig();
+  const { typeLabel } = getTypeInformation({ type, config });
+  const replyAddress = reply.address()!;
+  const replyAddressLocation = replyAddress.location();
+
+  return (
+    <>
+      <div className="mb-4">
+        <h3>
+          <span
+            className={`font-mono border uppercase p-1 rounded mr-2`}
+            title={type}
+          >
+            Operation {typeLabel} address information
+          </span>
+        </h3>
+      </div>
+
+      {replyAddress.hasDescription() && (
+        <div className="mt-2">
+          <Markdown>{replyAddress.description()}</Markdown>
+        </div>
+      )}
+
+      {replyAddressLocation && (
+        <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
+          <div className="text-sm text-gray-700">
+            Operation {typeLabel} address location
+            <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+              {replyAddressLocation}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <Extensions name="Operation Reply Address Extensions" item={reply} />
+    </>
+  );
+};

library/src/containers/Operations/Operations.tsx

@@ -21,42 +21,82 @@ export const Operations: React.FunctionComponent = () => {
     const channel = operation.channels().all()[0];
     const channelAddress = channel?.address() ?? '';
     if (operation.isSend()) {
-      operationsList.push(
-        <li
-          className="mb-12"
-          key={`pub-${operation.id()}`}
-          id={CommonHelpers.getIdentifier(
-            `operation-${PayloadType.PUBLISH}-${operation.id()}`,
-            config,
-          )}
-        >
-          <Operation
-            type={PayloadType.PUBLISH}
-            operation={operation}
-            channelName={channelAddress}
-            channel={channel}
-          />
-        </li>,
-      );
+      if (operation.reply() !== undefined) {
+        operationsList.push(
+          <li
+            className="mb-12"
+            key={`req-${operation.id()}`}
+            id={CommonHelpers.getIdentifier(
+              `operation-${PayloadType.REQUEST}-${operation.id()}`,
+              config,
+            )}
+          >
+            <Operation
+              type={PayloadType.REQUEST}
+              operation={operation}
+              channelName={channelAddress}
+              channel={channel}
+            />
+          </li>,
+        );
+      } else {
+        operationsList.push(
+          <li
+            className="mb-12"
+            key={`pub-${operation.id()}`}
+            id={CommonHelpers.getIdentifier(
+              `operation-${PayloadType.PUBLISH}-${operation.id()}`,
+              config,
+            )}
+          >
+            <Operation
+              type={PayloadType.PUBLISH}
+              operation={operation}
+              channelName={channelAddress}
+              channel={channel}
+            />
+          </li>,
+        );
+      }
     }
     if (operation.isReceive()) {
-      operationsList.push(
-        <li
-          className="mb-12"
-          key={`sub-${operation.id()}`}
-          id={CommonHelpers.getIdentifier(
-            `operation-${PayloadType.SUBSCRIBE}-${operation.id()}`,
-            config,
-          )}
-        >
-          <Operation
-            type={PayloadType.SUBSCRIBE}
-            operation={operation}
-            channelName={channelAddress}
-            channel={channel}
-          />
-        </li>,
-      );
+      if (operation.reply() !== undefined) {
+        operationsList.push(
+          <li
+            className="mb-12"
+            key={`replier-${operation.id()}`}
+            id={CommonHelpers.getIdentifier(
+              `operation-${PayloadType.REPLY}-${operation.id()}`,
+              config,
+            )}
+          >
+            <Operation
+              type={PayloadType.REPLY}
+              operation={operation}
+              channelName={channelAddress}
+              channel={channel}
+            />
+          </li>,
+        );
+      } else {
+        operationsList.push(
+          <li
+            className="mb-12"
+            key={`sub-${operation.id()}`}
+            id={CommonHelpers.getIdentifier(
+              `operation-${PayloadType.SUBSCRIBE}-${operation.id()}`,
+              config,
+            )}
+          >
+            <Operation
+              type={PayloadType.SUBSCRIBE}
+              operation={operation}
+              channelName={channelAddress}
+              channel={channel}
+            />
+          </li>,
+        );
+      }
     }
   });
 

library/src/types.ts

@@ -32,6 +32,8 @@ export interface ParserReturn {
 export enum PayloadType {
   PUBLISH = 'publish',
   SUBSCRIBE = 'subscribe',
+  REQUEST = 'request',
+  REPLY = 'reply',
 }
 
 export interface MessageExample {

web-component/package.json

@@ -51,8 +51,8 @@
     "web-react-components": "^1.4.2"
   },
   "devDependencies": {
-    "@types/react": "^16.9.2",
     "ts-loader": "9.4.4",
+    "@types/react": "^16.9.2",
     "webpack": "5.88.2",
     "webpack-cli": "5.1.4"
   },