feat: enhance channel options with tips and descriptions for better user guidance

web/default/src/helpers/helper.js

@@ -0,0 +1,13 @@
+import {CHANNEL_OPTIONS} from '../constants';
+
+let channelMap = undefined;
+
+export function getChannelOption(channelId) {
+    if (channelMap === undefined) {
+        channelMap = {};
+        CHANNEL_OPTIONS.forEach((option) => {
+            channelMap[option.key] = option;
+        });
+    }
+    return channelMap[channelId];
+}

web/default/src/helpers/render.js

@@ -1,5 +1,6 @@
-import { Label } from 'semantic-ui-react';
-import { useTranslation } from 'react-i18next';
+import {Label, Message} from 'semantic-ui-react';
+import {getChannelOption} from './helper';
+import React from 'react';
 
 export function renderText(text, limit) {
   if (text.length > limit) {
@@ -98,3 +99,15 @@ export function renderColorLabel(text) {
     </Label>
   );
 }
+
+export function renderChannelTip(channelId) {
+  let channel = getChannelOption(channelId);
+  if (channel === undefined || channel.tip === undefined) {
+    return <></>;
+  }
+  return (
+      <Message>
+        <div dangerouslySetInnerHTML={{__html: channel.tip}}></div>
+      </Message>
+  );
+}