mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-07-24 09:26:48 +08:00
1bcb6deb6f
## Summary - **Collapsible thinking**: Replace `<section>` with `<details>` for `<think>` content, so model thinking output is collapsed by default (click to expand). Works for all models that output `<think>` tags (Qwen3, DeepSeek, Gemini, Claude, etc.). - **Fix double thinking tags**: When reasoning/deep research mode is enabled in knowledge base chat, both the retrieval progress and model thinking were wrapped in `<think>` tags, producing two "Thinking..." blocks. Now retrieval progress uses a dedicated `<retrieving>` tag rendered as a separate "Retrieving..." collapsible with a distinct green accent. ### Before - Thinking content displayed as flat gray-bordered `<section>`, occupying significant screen space - Deep research + model thinking both use `<think>` → two identical "Thinking..." blocks ### After - Thinking content collapsed by default in a `<details>` element, click "Thinking..." to expand - Deep research shows "Retrieving..." (green border), model thinking shows "Thinking..." (gray border) ## Changes **Backend (`api/db/services/dialog_service.py`)** - Deep research callback: replace `start_to_think`/`end_to_think` marker flags with direct `<retrieving>`/`</retrieving>` answer text **Frontend** - `web/src/utils/chat.ts`: `replaceThinkToSection()` now uses `<details>` instead of `<section>`; add new `replaceRetrievingToSection()` - 4 tsx files: import and pipe `replaceRetrievingToSection`, whitelist `details`, `summary`, `retrieving` in DOMPurify `ADD_TAGS` - 4 less files: `section.think` → `details.think` with `<summary>` styles; add `details.retrieving` with green accent; dark mode and RTL variants ## Test plan - [ ] Open a chat WITHOUT knowledge base, ask a question to a model with thinking (e.g. Qwen3) → thinking content should be collapsed by default, click "Thinking..." to expand - [ ] Open a chat WITH knowledge base and reasoning enabled, ask a question → "Retrieving..." (green) shows retrieval progress, "Thinking..." (gray) shows model thinking, each independently collapsible - [ ] Verify dark mode renders correctly for both collapsible blocks - [ ] Verify RTL layout renders correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: wanghualoong <wanghualoong@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
84 lines
1.5 KiB
Plaintext
84 lines
1.5 KiB
Plaintext
.messageItem {
|
|
padding: 24px 0;
|
|
.messageItemSection {
|
|
display: inline-block;
|
|
}
|
|
.messageItemSectionLeft {
|
|
width: 80%;
|
|
}
|
|
.messageItemContent {
|
|
display: inline-flex;
|
|
gap: 20px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.messageItemContentReverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.messageTextBase() {
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
& > p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.messageText {
|
|
.chunkText();
|
|
.messageTextBase();
|
|
// background-color: #e6f4ff;
|
|
word-break: break-word;
|
|
}
|
|
.messageTextDark {
|
|
.chunkText();
|
|
.messageTextBase();
|
|
padding: 0;
|
|
word-break: break-word;
|
|
:global(details.think) {
|
|
color: rgb(166, 166, 166);
|
|
border-inline-start-color: rgb(78, 78, 86);
|
|
|
|
summary {
|
|
color: rgb(140, 140, 140);
|
|
&:hover {
|
|
color: rgb(180, 180, 180);
|
|
}
|
|
}
|
|
}
|
|
:global(details.retrieving) {
|
|
color: rgb(166, 166, 166);
|
|
border-inline-start-color: rgb(60, 100, 90);
|
|
|
|
summary {
|
|
color: rgb(120, 170, 155);
|
|
&:hover {
|
|
color: rgb(150, 200, 185);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.messageUserText {
|
|
.chunkText();
|
|
.messageTextBase();
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
word-break: break-word;
|
|
text-align: justify;
|
|
}
|
|
.messageEmpty {
|
|
width: 300px;
|
|
}
|
|
|
|
.thumbnailImg {
|
|
max-width: 20px;
|
|
}
|
|
}
|
|
|
|
.messageItemLeft {
|
|
text-align: start;
|
|
}
|
|
|
|
.messageItemRight {
|
|
text-align: end;
|
|
}
|