fix markdown (#83)

* fix markdown

* fix color

* fix dev mode

Author: ademilter

Diff for: examples/agents-researcher/app/components/agent-block.tsx

@@ -17,8 +17,10 @@ export const AgentBlock = ({
   return (
     <button
       className={cx(
-        ' bg-white border-2 size-14 flex items-center justify-center text-opacity-60 rounded-xl',
-        agentInfoDisplay === name ? 'border-purple-400' : 'border-gray-300'
+        ' bg-white border-2 size-16 flex items-center justify-center text-opacity-60 rounded-xl',
+        agentInfoDisplay === name
+          ? 'border-purple-500 bg-purple-100'
+          : 'border-gray-200'
       )}
       onClick={() => setAgentInfoDisplay(name)}
       disabled={isDisabled}

Diff for: examples/agents-researcher/app/components/agent-info.tsx

@@ -3,6 +3,7 @@ import cx from '../utils/cx';
 import CodeBlock from './code-block';
 import { IconCaretDownFilled } from '../icons/caret-dropdown';
 import { AgentName, StepRecord } from '../types';
+import Markdown from 'markdown-to-jsx';
 
 const CollapsibleText = ({
   title,
@@ -22,7 +23,21 @@ const CollapsibleText = ({
         <label className="text-base font-semibold text-purple-500">
           {title}
         </label>
-        <div className="whitespace-pre-wrap mt-2">{text}</div>
+        <Markdown
+          className="whitespace-pre-wrap mt-2 *:mb-2 text-sm"
+          options={{
+            overrides: {
+              ol: ({ children }) => (
+                <ol className="list-decimal list-inside">{children}</ol>
+              ),
+              ul: ({ children }) => (
+                <ol className="list-disc list-inside">{children}</ol>
+              )
+            }
+          }}
+        >
+          {text}
+        </Markdown>
       </div>
     );
 
@@ -31,7 +46,21 @@ const CollapsibleText = ({
   return (
     <div className="border-gray-300 border-2 p-3 rounded-xl text-md font-mono break-words">
       <label className="text-base font-semibold text-purple-500">{title}</label>
-      <div className="whitespace-pre-wrap mt-2">{displayText}</div>
+      <Markdown
+        className="whitespace-pre-wrap mt-2 *:mb-2 text-sm"
+        options={{
+          overrides: {
+            ol: ({ children }) => (
+              <ol className="list-decimal list-inside">{children}</ol>
+            ),
+            ul: ({ children }) => (
+              <ol className="list-disc list-inside">{children}</ol>
+            )
+          }
+        }}
+      >
+        {displayText}
+      </Markdown>
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className="text-purple-500 hover:text-purple-600 font-medium text-sm font-mono mt-2"
@@ -69,9 +98,7 @@ export const AgentInfo = ({
           <label className="">{name} Agent Code</label>
         </button>
         {displayCode && (
-          <CodeBlock className="bg-zinc-800 p-3 rounded-xl !text-sm language-javascript">
-            {code}
-          </CodeBlock>
+          <CodeBlock className="language-javascript">{code}</CodeBlock>
         )}
       </div>
       <div className="flex flex-col gap-4 w-full">
@@ -97,7 +124,7 @@ export const AgentInfo = ({
               displayOutput && 'rotate-180'
             )}
           />
-          <label className={'text-sm font-semibold'}>{name} Agent Output</label>
+          <label className={''}>{name} Agent Output</label>
         </button>
         {displayOutput &&
           state &&

Diff for: examples/agents-researcher/app/components/code-block.tsx

@@ -2,9 +2,12 @@
 
 import React, { useEffect } from 'react';
 import Prism from 'prismjs';
+import 'prismjs/themes/prism-twilight.css';
+import cx from '@/app/utils/cx';
 
 export default function CodeBlock({
   children,
+  className,
   ...props
 }: React.ComponentProps<'pre'>) {
   const ref = React.useRef<HTMLPreElement>(null);
@@ -16,7 +19,7 @@ export default function CodeBlock({
 
   return (
     <pre
-      className="!m-0 border-t border-t-zinc-800 !bg-transparent !p-4 !text-sm"
+      className={cx('!p-4 !rounded-xl !border-0 !text-sm !m-0', className)}
       {...props}
     >
       <code ref={ref}>{children}</code>

Diff for: examples/agents-researcher/app/components/step-list.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 import * as React from 'react';
 import cx from '../utils/cx';
-import type {StepStatus} from '../types';
-import {IconLoader} from '../icons/loader';
+import type { StepStatus } from '../types';
+import { IconLoader2 } from '@tabler/icons-react';
 
 export interface StepProps extends React.ComponentPropsWithoutRef<'div'> {}
 
@@ -21,10 +21,10 @@ const StepItem = ({ status, className, ...props }: StepItemProps) => {
       className={cx(
         'relative border-l-2 border-l-zinc-200 pb-16 pl-6 last:pb-0 sm:ml-4 sm:pl-8 dark:border-l-zinc-900',
         status === 'init'
-          ? 'border-l-zinc-200'
+          ? 'border-l-purple-100'
           : status === 'loading'
-            ? 'border-l-purple-500'
-            : 'border-l-emerald-500',
+            ? 'border-l-zinc-300'
+            : 'border-l-black',
         className
       )}
       {...props}
@@ -53,7 +53,7 @@ const StepNumber = ({
             'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
             'flex size-8 items-center justify-center sm:size-10',
             'text-center rounded-full border-4 border-white',
-            status === 'init' ? 'bg-zinc-100' : 'bg-emerald-500',
+            status === 'init' ? 'bg-zinc-100' : 'bg-black',
             className
           )}
           {...props}
@@ -75,8 +75,8 @@ const StepNumber = ({
             'text-center rounded-full border-4 border-white'
           )}
         >
-          <span className="bg-white">
-            <IconLoader className="animate-spin size-8 text-purple-500" />
+          <span className="bg-white size-8 flex items-center justify-center">
+            <IconLoader2 className="animate-spin text-zinc-500" size={28} />
           </span>
         </span>
       )}
@@ -105,7 +105,7 @@ export interface StepContentProps
   extends React.ComponentPropsWithoutRef<'div'> {}
 
 const StepContent = ({ className, ...props }: StepContentProps) => {
-  return <div className={cx('mt-6', className)} {...props} />;
+  return <div className={cx('mt-4', className)} {...props} />;
 };
 StepContent.displayName = 'StepContent';
 

Diff for: examples/agents-researcher/app/icons/loader.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Img from 'next/image';
+import * as React from 'react';
 import { FormEvent, Suspense, useState } from 'react';
 import {
   Step,
@@ -15,7 +16,7 @@ import { WorkflowIcon } from './icons/workflow-icon';
 import { CODES } from './constants/codes';
 import type { AgentName, StepRecord } from './types';
 import { AgentBlock } from './components/agent-block';
-import { IconLoader } from './icons/loader';
+import { IconBrandGithub, IconFile, IconLoader2 } from '@tabler/icons-react';
 
 export default function HomePage() {
   return (
@@ -187,74 +188,46 @@ const Page = () => {
       {progress && (
         <div className="fixed bottom-5 right-5 bg-purple-500/10 text-purple-500 border-purple-500 border-2 px-4 py-2 rounded-md font-semibold flex flex-row gap-2">
           <div>{progress}</div>
-          <IconLoader className="animate-spin" />
+          <IconLoader2 className="animate-spin" size={28} />
         </div>
       )}
 
       <div className="pb-24">
         {/* header */}
         <header className="bg-purple-50  text-center">
-          <div className="mx-auto max-w-screen-sm px-6 py-12">
-            <h1 className="text-2xl font-bold">Cross Reference Agent</h1>
+          <div className="mx-auto max-w-screen-sm px-8 py-12">
+            <h1 className="text-3xl font-bold">Cross Reference Agent</h1>
 
-            <div className="mt-2 text-zinc-500">
+            <div className="mt-2 text-lg opacity-60">
               This is a simple example to demonstrate how to use
-              <WorkflowIcon size={18} className=" ml-2 inline-flex" /> Upstash
+              <WorkflowIcon size={18} className="ml-2 inline-flex" /> Upstash
               Workflow Agents to cross-reference information from different
               sources.
             </div>
 
-            <div className="flex justify-center items-center gap-2 mt-4">
+            <div className="flex justify-center items-center gap-6 mt-4">
               <a
-                className="inline-flex items-center gap-1 h-8 pl-3 pr-4 bg-black text-white rounded-lg hover:opacity-80"
+                className="inline-flex items-center font-medium gap-0.5 underline"
                 href="https://upstash.com/docs/qstash/workflow/quickstarts/vercel-nextjs"
                 target="_blank"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                  <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-                  <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                  <path d="M10 13l-1 2l1 2" />
-                  <path d="M14 13l1 2l-1 2" />
-                </svg>
+                <IconFile size={18} />
                 Docs
               </a>
               <a
-                className="inline-flex items-center gap-1 h-8 pl-3 pr-4 bg-black text-white rounded-lg hover:opacity-80"
+                className="inline-flex items-center gap-0.5 font-medium underline"
                 href="https://github.com/upstash/workflow-js/tree/main/examples/agents-researcher"
+                target="_blank"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                  <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
-                </svg>
+                <IconBrandGithub size={18} />
                 Repository
               </a>
             </div>
           </div>
         </header>
 
         {/* step-by-step */}
-        <section className="px-6 mx-auto max-w-screen-sm">
+        <section className="px-8 mx-auto max-w-screen-sm">
           <Step className="mt-16 md:mt-16">
             {/* step-1 */}
             <StepItem status={resolveStepStatus(1)}>
@@ -277,12 +250,12 @@ const Page = () => {
                     value={query}
                     onChange={(e) => setQuery(e.target.value)}
                     disabled={loading}
-                    className="block w-full h-8 px-2 bg-white border border-gray-300 rounded-md"
+                    className="block w-full h-9 px-4 bg-white border border-gray-300 rounded-md"
                   />
 
                   <button
                     disabled={loading}
-                    className={`h-8 rounded-md bg-purple-500 px-4 text-white ${
+                    className={`h-9 rounded-md bg-purple-500 px-4 text-white ${
                       loading ? 'opacity-30' : ''
                     }`}
                   >
@@ -312,7 +285,7 @@ const Page = () => {
                         question.
                       </span>
                     )}
-                    <div className="flex gap-4 w-full">
+                    <div className="flex gap-2 w-full">
                       <AgentBlock
                         name="Wikipedia"
                         agentInfoDisplay={agentInfoDisplay}

Diff for: examples/agents-researcher/app/page.tsx

@@ -12,9 +12,12 @@
     "@langchain/community": "^0.3.28",
     "@langchain/core": "^0.3.40",
     "@langchain/exa": "^0.1.0",
+    "@tabler/icons-react": "^3.31.0",
     "@upstash/redis": "^1.34.4",
     "@upstash/workflow": "^0.2.6",
     "clsx": "^2.1.1",
+    "exa-js": "^1.4.10",
+    "markdown-to-jsx": "^7.7.4",
     "next": "15.1.6",
     "prismjs": "^1.29.0",
     "react": "^19.0.0",