fix(reasoning): make "Thought for a few seconds" message reachable (#223)

* fix(reasoning): make "Thought for a few seconds" message reachable

The "Thought for a few seconds" fallback message was unreachable due to
useControllableState defaulting duration to 0 instead of undefined.

- Changed defaultProp from 0 to undefined in useControllableState
- Updated ReasoningContextValue type to allow undefined duration
- Added test coverage for the undefined duration case

Fixes the conditional logic where duration === 0 would trigger the
shimmer animation, preventing the undefined check from ever executing.

* Create odd-grapes-behave.md

---------

Co-authored-by: Hayden Bleasel <hello@haydenbleasel.com>

Author: bendrucker

.changeset/odd-grapes-behave.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+fix(reasoning): make "Thought for a few seconds" message reachable

packages/elements/__tests__/reasoning.test.tsx

@@ -126,6 +126,15 @@ describe("ReasoningTrigger", () => {
     expect(screen.getByText("Thinking...")).toBeInTheDocument();
   });
 
+  it("renders generic message when duration is undefined", () => {
+    render(
+      <Reasoning isStreaming={false}>
+        <ReasoningTrigger />
+      </Reasoning>
+    );
+    expect(screen.getByText("Thought for a few seconds")).toBeInTheDocument();
+  });
+
   it("renders custom children", () => {
     render(
       <Reasoning>

packages/elements/src/reasoning.tsx

@@ -17,7 +17,7 @@ type ReasoningContextValue = {
   isStreaming: boolean;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
-  duration: number;
+  duration: number | undefined;
 };
 
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
@@ -59,7 +59,7 @@ export const Reasoning = memo(
     });
     const [duration, setDuration] = useControllableState({
       prop: durationProp,
-      defaultProp: 0,
+      defaultProp: undefined,
     });
 
     const [hasAutoClosed, setHasAutoClosed] = useState(false);