🏄‍♂️ 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>
2025-12-17 17:00:15 +01:00 · 2025-01-29 19:46:58 -05:00 · 2025-01-29 19:46:58 -05:00 · 591a019766
commit 591a019766
parent d60a149ad9
48 changed files with 1791 additions and 726 deletions
--- a/api/server/controllers/AskController.js
+++ b/api/server/controllers/AskController.js
@ -1,8 +1,6 @@
-const throttle = require('lodash/throttle');
-const { getResponseSender, Constants, CacheKeys, Time } = require('librechat-data-provider');
+const { getResponseSender, Constants } = require('librechat-data-provider');
 const { createAbortController, handleAbortError } = require('~/server/middleware');
 const { sendMessage, createOnProgress } = require('~/server/utils');
-const { getLogStores } = require('~/cache');
 const { saveMessage } = require('~/models');
 const { logger } = require('~/config');

@ -57,33 +55,9 @@ const AskController = async (req, res, next, initializeClient, addTitle) => {

  try {
    const { client } = await initializeClient({ req, res, endpointOption });
-    const messageCache = getLogStores(CacheKeys.MESSAGES);
-    const { onProgress: progressCallback, getPartialText } = createOnProgress({
-      onProgress: throttle(
-        ({ text: partialText }) => {
-          /*
-              const unfinished = endpointOption.endpoint === EModelEndpoint.google ? false : true;
-          messageCache.set(responseMessageId, {
-            messageId: responseMessageId,
-            sender,
-            conversationId,
-            parentMessageId: overrideParentMessageId ?? userMessageId,
-            text: partialText,
-            model: client.modelOptions.model,
-            unfinished,
-            error: false,
-            user,
-          }, Time.FIVE_MINUTES);
-          */
+    const { onProgress: progressCallback, getPartialText } = createOnProgress();

-          messageCache.set(responseMessageId, partialText, Time.FIVE_MINUTES);
-        },
-        3000,
-        { trailing: false },
-      ),
-    });
-
-    getText = getPartialText;
+    getText = client.getStreamText != null ? client.getStreamText.bind(client) : getPartialText;

    const getAbortData = () => ({
      sender,
@ -91,7 +65,7 @@ const AskController = async (req, res, next, initializeClient, addTitle) => {
      userMessagePromise,
      messageId: responseMessageId,
      parentMessageId: overrideParentMessageId ?? userMessageId,
-      text: getPartialText(),
+      text: getText(),
      userMessage,
      promptTokens,
    });
--- a/api/server/controllers/EditController.js
+++ b/api/server/controllers/EditController.js
@ -1,8 +1,6 @@
-const throttle = require('lodash/throttle');
-const { getResponseSender, CacheKeys, Time } = require('librechat-data-provider');
+const { getResponseSender } = require('librechat-data-provider');
 const { createAbortController, handleAbortError } = require('~/server/middleware');
 const { sendMessage, createOnProgress } = require('~/server/utils');
-const { getLogStores } = require('~/cache');
 const { saveMessage } = require('~/models');
 const { logger } = require('~/config');

@ -53,62 +51,44 @@ const EditController = async (req, res, next, initializeClient) => {
    }
  };

-  const messageCache = getLogStores(CacheKeys.MESSAGES);
  const { onProgress: progressCallback, getPartialText } = createOnProgress({
    generation,
-    onProgress: throttle(
-      ({ text: partialText }) => {
-        /*
-          const unfinished = endpointOption.endpoint === EModelEndpoint.google ? false : true;
-        {
-          messageId: responseMessageId,
-          sender,
-          conversationId,
-          parentMessageId: overrideParentMessageId ?? userMessageId,
-          text: partialText,
-          model: endpointOption.modelOptions.model,
-          unfinished,
-          isEdited: true,
-          error: false,
-          user,
-        } */
-        messageCache.set(responseMessageId, partialText, Time.FIVE_MINUTES);
-      },
-      3000,
-      { trailing: false },
-    ),
  });

-  const getAbortData = () => ({
-    conversationId,
-    userMessagePromise,
-    messageId: responseMessageId,
-    sender,
-    parentMessageId: overrideParentMessageId ?? userMessageId,
-    text: getPartialText(),
-    userMessage,
-    promptTokens,
-  });
-
-  const { abortController, onStart } = createAbortController(req, res, getAbortData, getReqData);
-
-  res.on('close', () => {
-    logger.debug('[EditController] Request closed');
-    if (!abortController) {
-      return;
-    } else if (abortController.signal.aborted) {
-      return;
-    } else if (abortController.requestCompleted) {
-      return;
-    }
-
-    abortController.abort();
-    logger.debug('[EditController] Request aborted on close');
-  });
+  let getText;

  try {
    const { client } = await initializeClient({ req, res, endpointOption });

+    getText = client.getStreamText != null ? client.getStreamText.bind(client) : getPartialText;
+
+    const getAbortData = () => ({
+      conversationId,
+      userMessagePromise,
+      messageId: responseMessageId,
+      sender,
+      parentMessageId: overrideParentMessageId ?? userMessageId,
+      text: getText(),
+      userMessage,
+      promptTokens,
+    });
+
+    const { abortController, onStart } = createAbortController(req, res, getAbortData, getReqData);
+
+    res.on('close', () => {
+      logger.debug('[EditController] Request closed');
+      if (!abortController) {
+        return;
+      } else if (abortController.signal.aborted) {
+        return;
+      } else if (abortController.requestCompleted) {
+        return;
+      }
+
+      abortController.abort();
+      logger.debug('[EditController] Request aborted on close');
+    });
+
    let response = await client.sendMessage(text, {
      user,
      generation,
@ -153,7 +133,7 @@ const EditController = async (req, res, next, initializeClient) => {
      );
    }
  } catch (error) {
-    const partialText = getPartialText();
+    const partialText = getText();
    handleAbortError(res, req, error, {
      partialText,
      conversationId,
--- a/api/server/controllers/agents/callbacks.js
+++ b/api/server/controllers/agents/callbacks.js
@ -10,7 +10,7 @@ const {
 const { processCodeOutput } = require('~/server/services/Files/Code/process');
 const { saveBase64Image } = require('~/server/services/Files/process');
 const { loadAuthValues } = require('~/app/clients/tools/util');
-const { logger } = require('~/config');
+const { logger, sendEvent } = require('~/config');

 /** @typedef {import('@librechat/agents').Graph} Graph */
 /** @typedef {import('@librechat/agents').EventHandler} EventHandler */
@ -21,20 +21,6 @@ const { logger } = require('~/config');
 /** @typedef {import('@librechat/agents').ContentAggregatorResult['aggregateContent']} ContentAggregator */
 /** @typedef {import('@librechat/agents').GraphEvents} GraphEvents */

-/**
- * Sends message data in Server Sent Events format.
- * @param {ServerResponse} res - The server response.
- * @param {{ data: string | Record<string, unknown>, event?: string }} event - The message event.
- * @param {string} event.event - The type of event.
- * @param {string} event.data - The message to be sent.
- */
-const sendEvent = (res, event) => {
-  if (typeof event.data === 'string' && event.data.length === 0) {
-    return;
-  }
-  res.write(`event: message\ndata: ${JSON.stringify(event)}\n\n`);
-};
-
 class ModelEndHandler {
  /**
   * @param {Array<UsageMetadata>} collectedUsage
@ -322,7 +308,6 @@ function createToolEndCallback({ req, res, artifactPromises }) {
 }

 module.exports = {
-  sendEvent,
  getDefaultHandlers,
  createToolEndCallback,
 };
--- a/api/server/controllers/assistants/chatV2.js
+++ b/api/server/controllers/assistants/chatV2.js
@ -397,18 +397,6 @@ const chatV2 = async (req, res) => {

      response = streamRunManager;
      response.text = streamRunManager.intermediateText;
-
-      if (response.text) {
-        const messageCache = getLogStores(CacheKeys.MESSAGES);
-        messageCache.set(
-          responseMessageId,
-          {
-            complete: true,
-            text: response.text,
-          },
-          Time.FIVE_MINUTES,
-        );
-      }
    };

    await processRun();