Nebula: Update Reasoning UI: show only latest presence in pending state (#6913)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `Reasoning` component in the `Reasoning.tsx` file by improving the handling of text display based on the `isPending` prop, adding conditional rendering for showing all texts or just the last one.

### Detailed summary
- Added `showAll` variable to determine if all texts should be displayed.
- Introduced `lastText` to hold the last item from `props.texts`.
- Updated the rendering logic to conditionally show all texts or just the last one based on `showAll`.
- Changed `<span>` to `<span className="text-foreground">` for styling consistency.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.tsx

@@ -11,6 +11,8 @@ export function Reasoning(props: {
 }) {
   const [_isOpen, setIsOpen] = useState(false);
   const isOpen = props.isPending ? true : _isOpen;
+  const showAll = !props.isPending;
+  const lastText = props.texts[props.texts.length - 1];
 
   return (
     <DynamicHeight>
@@ -23,7 +25,7 @@ export function Reasoning(props: {
         {props.isPending ? (
           <TextShimmer text="Reasoning..." />
         ) : (
-          <span>Reasoning</span>
+          <span className="text-foreground">Reasoning</span>
         )}
 
         {!props.isPending && (
@@ -36,17 +38,27 @@ export function Reasoning(props: {
         )}
       </Button>
 
-      {isOpen && props.texts.length > 0 && (
-        <ul className="list-none space-y-1.5">
-          {props.texts.map((text) => (
-            <li
-              key={text}
-              className="fade-in-0 animate-in text-muted-foreground text-sm leading-relaxed duration-300"
-            >
-              {text.trim()}
-            </li>
-          ))}
-        </ul>
+      {isOpen && (
+        <>
+          {showAll && props.texts.length > 0 && (
+            <ul className="list-none space-y-1.5">
+              {props.texts.map((text) => (
+                <li
+                  key={text}
+                  className="fade-in-0 animate-in text-muted-foreground text-sm leading-relaxed duration-300"
+                >
+                  {text.trim()}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {!showAll && lastText && (
+            <div className="text-muted-foreground text-sm leading-relaxed">
+              {lastText.trim()}
+            </div>
+          )}
+        </>
       )}
     </DynamicHeight>
   );