[PR #186] Add think block support for AI assistant messages #194

Open
opened 2026-02-16 10:16:23 -05:00 by yindo · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/langgenius/webapp-conversation/pull/186
Author: @lyzno1
Created: 9/20/2025
Status: 🔄 Open

Base: mainHead: feat/think-block-support


📝 Commits (3)

  • 0746d4c feat: Add think block support to StreamdownMarkdown
  • 819ed56 i18n: Add translations for think block states
  • 456015a fix: apply suggestions

📊 Changes

11 files changed (+287 additions, -4 deletions)

View changed files

📝 app/components/base/streamdown-markdown.tsx (+162 -2)
📝 app/components/chat/answer/index.tsx (+2 -2)
app/components/chat/think-block/index.tsx (+3 -0)
app/components/chat/think-block/think-block-content.tsx (+31 -0)
app/components/chat/think-block/think-block-header.tsx (+71 -0)
📝 i18n/lang/common.en.ts (+3 -0)
📝 i18n/lang/common.es.ts (+3 -0)
📝 i18n/lang/common.fr.ts (+3 -0)
📝 i18n/lang/common.ja.ts (+3 -0)
📝 i18n/lang/common.vi.ts (+3 -0)
📝 i18n/lang/common.zh.ts (+3 -0)

📄 Description

Summary

  • Added collapsible think block support for AI assistant messages
  • Supports both <think> and <details> tags for compatibility
  • Integrated seamlessly with existing StreamdownMarkdown component

Implementation Details

Components Created

  • ThinkBlockHeader: Displays thinking status with animated loading indicator, supports expand/collapse functionality
  • ThinkBlockContent: Renders think block content using Streamdown with smooth transitions

Core Features

  • Automatic detection of <think> and <details> tags at the beginning of messages
  • Real-time streaming support with "thinking" status animation
  • Auto-expands when thinking starts for better user experience
  • Smooth animations for expand/collapse transitions
  • Full internationalization support (en, zh, ja, fr, es, vi)

Technical Approach

The implementation extends the existing StreamdownMarkdown component to:

  1. Extract think block content from the message
  2. Render think blocks separately with appropriate styling
  3. Maintain streaming capabilities for both think and main content
  4. Handle incomplete/unclosed tags during streaming

Test Plan

  • Tested with <think> tags
  • Tested with <details> tags
  • Verified streaming behavior
  • Tested expand/collapse functionality
  • Verified all language translations display correctly

🤖 Generated with Claude Code


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/langgenius/webapp-conversation/pull/186 **Author:** [@lyzno1](https://github.com/lyzno1) **Created:** 9/20/2025 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/think-block-support` --- ### 📝 Commits (3) - [`0746d4c`](https://github.com/langgenius/webapp-conversation/commit/0746d4c69fc99c2b41cac9a5ca0d560891ff2ef5) feat: Add think block support to StreamdownMarkdown - [`819ed56`](https://github.com/langgenius/webapp-conversation/commit/819ed56d6bf988ecd815ec7c9adcfda57f1365cd) i18n: Add translations for think block states - [`456015a`](https://github.com/langgenius/webapp-conversation/commit/456015a27a967abae5023b3c4b562e8fdfcc7f2c) fix: apply suggestions ### 📊 Changes **11 files changed** (+287 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `app/components/base/streamdown-markdown.tsx` (+162 -2) 📝 `app/components/chat/answer/index.tsx` (+2 -2) ➕ `app/components/chat/think-block/index.tsx` (+3 -0) ➕ `app/components/chat/think-block/think-block-content.tsx` (+31 -0) ➕ `app/components/chat/think-block/think-block-header.tsx` (+71 -0) 📝 `i18n/lang/common.en.ts` (+3 -0) 📝 `i18n/lang/common.es.ts` (+3 -0) 📝 `i18n/lang/common.fr.ts` (+3 -0) 📝 `i18n/lang/common.ja.ts` (+3 -0) 📝 `i18n/lang/common.vi.ts` (+3 -0) 📝 `i18n/lang/common.zh.ts` (+3 -0) </details> ### 📄 Description ## Summary - Added collapsible think block support for AI assistant messages - Supports both `<think>` and `<details>` tags for compatibility - Integrated seamlessly with existing StreamdownMarkdown component ## Implementation Details ### Components Created - **ThinkBlockHeader**: Displays thinking status with animated loading indicator, supports expand/collapse functionality - **ThinkBlockContent**: Renders think block content using Streamdown with smooth transitions ### Core Features - Automatic detection of `<think>` and `<details>` tags at the beginning of messages - Real-time streaming support with "thinking" status animation - Auto-expands when thinking starts for better user experience - Smooth animations for expand/collapse transitions - Full internationalization support (en, zh, ja, fr, es, vi) ### Technical Approach The implementation extends the existing `StreamdownMarkdown` component to: 1. Extract think block content from the message 2. Render think blocks separately with appropriate styling 3. Maintain streaming capabilities for both think and main content 4. Handle incomplete/unclosed tags during streaming ## Test Plan - [x] Tested with `<think>` tags - [x] Tested with `<details>` tags - [x] Verified streaming behavior - [x] Tested expand/collapse functionality - [x] Verified all language translations display correctly 🤖 Generated with [Claude Code](https://claude.ai/code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-16 10:16:23 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/webapp-conversation#194