task: wrap text display in markdown component and polish workflow sp…

…inner (#409)

src/components/cactiComponents/TextResponse.tsx

@@ -1,5 +1,6 @@
 import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { Markdown } from '../experimental_/Markdown';
 import { ResponseTitle, ResponseWrap } from './helpers/layout';
 
 /**
@@ -18,7 +19,11 @@ export const TextResponse = (props: any) => {
         </>
       )}
 
-      {!props.title && <div className=" text-base text-white text-opacity-70">{props.text}</div>}
+      {!props.title && (
+        <div className=" text-base text-white text-opacity-70">
+          <Markdown>{props.text}</Markdown>
+        </div>
+      )}
 
       {props.title && props.collapsible && (
         <Disclosure as="div" defaultOpen>

src/components/experimental_/Markdown.tsx

@@ -2,5 +2,15 @@ import ReactMarkdown from 'react-markdown';
 
 //======================================
 export const Markdown = ({ children }: { children: string }) => {
-  return <ReactMarkdown>{children}</ReactMarkdown>;
+  return (
+    <ReactMarkdown
+      components={{
+        ul: (props) => <ul className="list-disc" {...props} />,
+        a: (props) => <a className="text-blue-400 underline" {...props} />,
+        code: (props) => <code className="text-orange-300" {...props} />,
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
 };

src/components/experimental_/MultiStepProgressIndicator.tsx

@@ -21,11 +21,8 @@ export const MultiStepProgressIndicator = () => {
       >
         <ResponseWrap>
           <div className="cen flex w-full justify-center">
-            <Spinner className="h-4 w-4 text-white" />
-            <div>
-              There are more steps in the current workflow, please wait as the system computes the
-              next step.
-            </div>
+            <Spinner className="mx-2 my-1 h-4 w-4 text-white" />
+            <div>There are more steps in the current workflow, please wait for next step...</div>
           </div>
         </ResponseWrap>
       </div>