Wrap <think> tags in chat responses and process them in the fronten…

…d for better context handling.

api/chat_main_handler.go

@@ -555,7 +555,7 @@ func (h *ChatHandler) chatStream(w http.ResponseWriter, chatSession sqlc_queries
 		bufferLen += 1
 	}
 	textBuffer := newTextBuffer(bufferLen, "", "")
-	reasonBuffer := newTextBuffer(bufferLen, "\n\n", "\n\n")
+	reasonBuffer := newTextBuffer(bufferLen, "<think>\n\n", "\n\n</think>\n\n")
 	if regenerate {
 		answer_id = chatUuid
 	}
@@ -579,7 +579,8 @@ func (h *ChatHandler) chatStream(w http.ResponseWriter, chatSession sqlc_queries
 					fmt.Fprintf(w, "data: %v\n\n", string(data))
 					flusher.Flush()
 				}
-				return answer, answer_id, false
+				// no reason in the answer (so do not disrupt the context)
+				return textBuffer.String("\n"), answer_id, false
 			} else {
 				log.Printf("%v", err)
 				RespondWithError(w, http.StatusInternalServerError, fmt.Sprintf("Stream error: %v", err), nil)

web/src/views/components/Message/Text.vue

@@ -8,7 +8,7 @@ import { t } from '@/locales'
 import { escapeBrackets, escapeDollarNumber } from '@/utils/string'
 
 interface Props {
-  inversion?: boolean
+  inversion?: boolean // user message is inversioned (on the right side)
   error?: boolean
   text?: string
   loading?: boolean
@@ -22,7 +22,7 @@ const { isMobile } = useBasicLayout()
 const textRef = ref<HTMLElement>()
 
 const mdi = new MarkdownIt({
-  html: false,
+  html: false, // true vs false
   linkify: true,
   highlight(code, language) {
     const validLang = !!(language && hljs.getLanguage(language))
@@ -48,11 +48,25 @@ const wrapClass = computed(() => {
   ]
 })
 
+function processTextForCollapsibles(text: string): string {
+  return text.replace(/<think>(.*?)<\/think>/gs, (_, content) => {
+    return `**reason**
+
+${content.trim()}
+
+**answer**
+`
+  })
+}
+
 const text = computed(() => {
   const value = props.text ?? ''
-    // 对数学公式进行处理，自动添加 $$ 符号
+  // 对数学公式进行处理，自动添加 $$ 符号
   if (!props.inversion) {
-    const escapedText = escapeBrackets(escapeDollarNumber(value))
+    // prcessing <think></think> tag
+    const thinked = processTextForCollapsibles(value)
+    const escapedText = escapeBrackets(escapeDollarNumber(thinked))
+    console.log(escapedText)
     return mdi.render(escapedText)
   }
   return value