Merge pull request #85 from upstash/improve-agents-researcher

DX-1601: Further Improvements

Author: yunusemreozdemir

examples/agents-researcher/app/[session]/page.tsx

@@ -0,0 +1,15 @@
+import { Suspense } from 'react';
+import { AgentUI } from '../components/agent-ui';
+
+export default async function Page({
+    params,
+  }: {
+    params: Promise<{ session: string }>
+  }) {
+    const { session } = await params
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <AgentUI session={session} />
+    </Suspense>
+  );
+}

examples/agents-researcher/app/components/agent-info.tsx

@@ -1,25 +1,28 @@
-import { useState } from 'react';
-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';
+import { useState } from "react";
+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,
   text,
-  maxLength = 300
+  maxLength = 300,
 }: {
   title: string;
   text: string;
   maxLength?: number;
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  // Ensure text starts on a new line by adding a newline if it doesn't already have one
+  const formattedText = text && !text.startsWith('\n') ? `\n${text}` : text;
+
   if (!text || text.length <= maxLength)
     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>
@@ -32,16 +35,16 @@ const CollapsibleText = ({
               ),
               ul: ({ children }) => (
                 <ol className="list-disc list-inside">{children}</ol>
-              )
-            }
+              ),
+            },
           }}
         >
-          {text}
+          {formattedText}
         </Markdown>
       </div>
     );
 
-  const displayText = isExpanded ? text : text.slice(0, maxLength) + '...';
+  const displayText = isExpanded ? formattedText : formattedText.slice(0, maxLength) + "...";
 
   return (
     <div className="border-gray-300 border-2 p-3 rounded-xl text-md font-mono break-words">
@@ -55,8 +58,8 @@ const CollapsibleText = ({
             ),
             ul: ({ children }) => (
               <ol className="list-disc list-inside">{children}</ol>
-            )
-          }
+            ),
+          },
         }}
       >
         {displayText}
@@ -65,7 +68,7 @@ const CollapsibleText = ({
         onClick={() => setIsExpanded(!isExpanded)}
         className="text-purple-500 hover:text-purple-600 font-medium text-sm font-mono mt-2"
       >
-        {isExpanded ? 'Read Less' : 'Read More'}
+        {isExpanded ? "Read Less" : "Read More"}
       </button>
     </div>
   );
@@ -74,14 +77,16 @@ const CollapsibleText = ({
 export const AgentInfo = ({
   name,
   code,
-  state
+  state,
 }: {
   name: AgentName;
   code: string;
-  state: false | 'loading' | StepRecord[];
+  state: false | "loading" | StepRecord[];
 }) => {
   const [displayCode, setDisplayCode] = useState(false);
-  const [displayOutput, setDisplayOutput] = useState(false);
+  const [displayOutput, setDisplayOutput] = useState(
+    name === "Cross Reference"
+  );
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-2 w-full">
@@ -91,8 +96,8 @@ export const AgentInfo = ({
         >
           <IconCaretDownFilled
             className={cx(
-              'transform transition-transform',
-              displayCode && 'rotate-180'
+              "transform transition-transform",
+              displayCode && "rotate-180"
             )}
           />
           <label className="">{name} Agent Code</label>
@@ -104,31 +109,31 @@ export const AgentInfo = ({
       <div className="flex flex-col gap-4 w-full">
         <button
           id={
-            name === 'Cross Reference'
-              ? 'cross-reference-output'
-              : 'intermediate-output'
+            name === "Cross Reference"
+              ? "cross-reference-output"
+              : "intermediate-output"
           }
           className={cx(
-            'flex gap-1 w-full px-2 py-2 rounded-xl items-center',
-            state && state !== 'loading'
-              ? 'bg-purple-500/10 text-purple-500'
-              : 'bg-gray-100 text-gray-400'
+            "flex gap-1 w-full px-2 py-2 rounded-xl items-center",
+            state && state !== "loading"
+              ? "bg-purple-500/10 text-purple-500"
+              : "bg-gray-100 text-gray-400"
           )}
           onClick={() => {
-            if (state && state !== 'loading') setDisplayOutput(!displayOutput);
+            if (state && state !== "loading") setDisplayOutput(!displayOutput);
           }}
         >
           <IconCaretDownFilled
             className={cx(
-              'transform transition-transform',
-              displayOutput && 'rotate-180'
+              "transform transition-transform",
+              displayOutput && "rotate-180"
             )}
           />
-          <label className={''}>{name} Agent Output</label>
+          <label className={""}>{name} Agent Output</label>
         </button>
         {displayOutput &&
           state &&
-          state !== 'loading' &&
+          state !== "loading" &&
           state.map((s, i) => (
             <div key={i}>
               <CollapsibleText title={s.stepName} text={s.stepOut} />