🏄‍♂️ refactor: Optimize Reasoning UI & Token Streaming (#5546)

* ✨ feat: Implement Show Thinking feature; refactor: testing thinking render optimizations

* ✨ feat: Refactor Thinking component styles and enhance Markdown rendering

* chore: add back removed code, revert type changes

* chore: Add back resetCounter effect to Markdown component for improved code block indexing

* chore: bump @librechat/agents and google langchain packages

* WIP: reasoning type updates

* WIP: first pass, reasoning content blocks

* chore: revert code

* chore: bump @librechat/agents

* refactor: optimize reasoning tag handling

* style: ul indent padding

* feat: add Reasoning component to handle reasoning display

* feat: first pass, content reasoning part styling

* refactor: add content placeholder for endpoints using new stream handler

* refactor: only cache messages when requesting stream audio

* fix: circular dep.

* fix: add default param

* refactor: tts, only request after message stream, fix chrome autoplay

* style: update label for submitting state and add localization for 'Thinking...'

* fix: improve global audio pause logic and reset active run ID

* fix: handle artifact edge cases

* fix: remove unnecessary console log from artifact update test

* feat: add support for continued message handling with new streaming method

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

packages/data-provider/src/types/agents.ts

@@ -8,6 +8,11 @@ export namespace Agents {
 
   export type ImageDetail = 'auto' | 'low' | 'high';
 
+  export type ReasoningContentText = {
+    type: ContentTypes.THINK;
+    think: string;
+  };
+
   export type MessageContentText = {
     type: ContentTypes.TEXT;
     text: string;
@@ -20,6 +25,7 @@ export namespace Agents {
   };
 
   export type MessageContentComplex =
+    | ReasoningContentText
     | MessageContentText
     | MessageContentImageUrl
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -212,12 +218,44 @@ export namespace Agents {
    * The delta containing the fields that have changed on the Message.
    */
   export interface MessageDelta {
+    /**
+     * The content of the message in array of text and/or images.
+     */
+    content?: Agents.MessageContentComplex[];
+  }
+
+  /**
+   * Represents a reasoning delta i.e. any changed fields on a message during
+   * streaming.
+   */
+  export interface ReasoningDeltaEvent {
+    /**
+     * The identifier of the message, which can be referenced in API endpoints.
+     */
+    id: string;
+
+    /**
+     * The delta containing the fields that have changed.
+     */
+    delta: ReasoningDelta;
+  }
+
+  /**
+   * The reasoning delta containing the fields that have changed on the Message.
+   */
+  export interface ReasoningDelta {
     /**
      * The content of the message in array of text and/or images.
      */
     content?: MessageContentComplex[];
   }
-  export type ContentType = ContentTypes.TEXT | ContentTypes.IMAGE_URL | string;
+
+  export type ReasoningDeltaUpdate = { type: ContentTypes.THINK; think: string };
+  export type ContentType =
+    | ContentTypes.THINK
+    | ContentTypes.TEXT
+    | ContentTypes.IMAGE_URL
+    | string;
 }
 
 export type ToolCallResult = {

packages/data-provider/src/types/assistants.ts

@@ -432,6 +432,7 @@ export type ContentPart = (
 
 export type TMessageContentParts =
   | { type: ContentTypes.ERROR; text: Text & PartMetadata }
+  | { type: ContentTypes.THINK; think: string | (Text & PartMetadata) }
   | { type: ContentTypes.TEXT; text: string | (Text & PartMetadata); tool_call_ids?: string[] }
   | {
       type: ContentTypes.TOOL_CALL;

packages/data-provider/src/types/runs.ts

@@ -1,5 +1,6 @@
 export enum ContentTypes {
   TEXT = 'text',
+  THINK = 'think',
   TEXT_DELTA = 'text_delta',
   TOOL_CALL = 'tool_call',
   IMAGE_FILE = 'image_file',