feat(reasoning): ReasoningTrigger allows custom getThinkingMessage function (#255)

* feat(reasoning): ReasoningTrigger allows custom getThinkingMessage function

* Update reasoning.mdx

* Create giant-streets-swim.md

---------

Co-authored-by: Comyn LI 李学明 <[email protected]>
Co-authored-by: Hayden Bleasel <[email protected]>

Author: 3 people

.changeset/giant-streets-swim.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+ReasoningTrigger allows custom getThinkingMessage function

apps/docs/content/docs/components/(chatbot)/reasoning.mdx

@@ -175,6 +175,10 @@ export async function POST(req: Request) {
       type: 'string',
       default: '"Reasoning"',
     },
+    getThinkingMessage: {
+      description: 'Optional function to customize the thinking message. Receives isStreaming and duration parameters.',
+      type: '(isStreaming: boolean, duration?: number) => ReactNode',
+    },
     '...props': {
       description: 'Any other props are spread to the underlying CollapsibleTrigger component.',
       type: 'React.ComponentProps<typeof CollapsibleTrigger>',

packages/elements/src/reasoning.tsx

@@ -8,7 +8,7 @@ import {
 } from "@repo/shadcn-ui/components/ui/collapsible";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import { createContext, memo, useContext, useEffect, useState } from "react";
 import { Streamdown } from "streamdown";
 import { Shimmer } from "./shimmer";
@@ -22,7 +22,7 @@ type ReasoningContextValue = {
 
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
 
-const useReasoning = () => {
+export const useReasoning = () => {
   const context = useContext(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
@@ -111,9 +111,11 @@ export const Reasoning = memo(
   }
 );
 
-export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
 
-const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
   if (isStreaming || duration === 0) {
     return <Shimmer duration={1}>Thinking...</Shimmer>;
   }
@@ -124,7 +126,7 @@ const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
 };
 
 export const ReasoningTrigger = memo(
-  ({ className, children, ...props }: ReasoningTriggerProps) => {
+  ({ className, children, getThinkingMessage = defaultGetThinkingMessage ...props }: ReasoningTriggerProps) => {
     const { isStreaming, isOpen, duration } = useReasoning();
 
     return (