From 1ecc04fee7cc4e8d6b3bda4a091d0fd51cb43c25 Mon Sep 17 00:00:00 2001
From: zhaoying <zhaoyingyz@126.com>
Date: Tue, 7 Apr 2026 22:14:20 +0800
Subject: [PATCH] fix(web): chat content labelPosition & markdown support edit

---
 web/src/components/Chat/ChatContent.tsx       |  8 ++---
 web/src/components/Markdown/index.tsx         | 35 ++++++++++---------
 .../ApplicationConfig/TestChat/index.tsx      |  4 +--
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/web/src/components/Chat/ChatContent.tsx b/web/src/components/Chat/ChatContent.tsx
index 4b5a83a8..7ff9f9f5 100644
--- a/web/src/components/Chat/ChatContent.tsx
+++ b/web/src/components/Chat/ChatContent.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2025-12-10 16:46:17 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 21:29:59
+ * @Last Modified time: 2026-04-07 22:13:47
  */
 import { type FC, useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
@@ -284,7 +284,7 @@ const ChatContent: FC<ChatContentProps> = ({
                   }
                 </div>
                 {/* Bottom label (such as timestamp, username, etc.) */}
-                {labelPosition === 'bottom' && <Flex gap={16} align="center" justify={item.role === 'user' ? 'end' : 'start'}>
+                {(labelPosition === 'bottom' || item.meta_data?.audio_url) && <Flex gap={16} align="center" justify={item.role === 'user' ? 'end' : 'start'}>
                   {item.meta_data?.audio_url && <>
                     {playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
                       ? <Spin />
@@ -299,9 +299,9 @@ const ChatContent: FC<ChatContentProps> = ({
                         />
                     }
                   </>}
-                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
+                  {labelPosition === 'bottom' && <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
                     {labelFormat(item)}
-                  </div>
+                  </div>}
                 </Flex>
                 }
               </>
diff --git a/web/src/components/Markdown/index.tsx b/web/src/components/Markdown/index.tsx
index 10cf177b..4f48e655 100644
--- a/web/src/components/Markdown/index.tsx
+++ b/web/src/components/Markdown/index.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:17:31 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 15:14:02
+ * @Last Modified time: 2026-04-07 21:56:00
  */
 /**
  * RbMarkdown Component
@@ -97,47 +97,48 @@ const buildComponents = (onFormSubmit?: (values: Record<string, any>) => void) =
     const ctx = useContext(FormContext)
     return <RbButton {...props} onClick={() => ctx?.onSubmit?.(ctx.values)}>{[children]}</RbButton>
   },
-  input: ({ children, ...props }: any) => {
+  input: ({ children, value, ...props }: any) => {
     const ctx = useContext(FormContext)
     const handleChange = useCallback((val: any) => {
       if (props.name) ctx?.setValue(props.name, val)
     }, [ctx, props.name])
+    console.log('props', props)
     switch (props.type) {
       case 'color':
-        return <ColorPicker className="rb:mb-4!" {...props} onChange={handleChange} />
+        return <ColorPicker className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
       case 'time':
-        return <TimePicker className="rb:mb-4!" {...props} onChange={handleChange} />
+        return <TimePicker className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
       case 'date':
-        return <DatePicker className="rb:mb-4!" {...props} onChange={handleChange} />
+        return <DatePicker className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
       case 'datetime':
       case 'datetime-local':
-        return <DatePicker className="rb:mb-4!" showTime={true} {...props} onChange={handleChange} />
+        return <DatePicker className="rb:mb-4!" defaultValue={value} showTime={true} {...props} onChange={handleChange} />
       case 'week':
-        return <DatePicker className="rb:mb-4!" picker="week" {...props} onChange={handleChange} />
+        return <DatePicker className="rb:mb-4!" defaultValue={value} picker="week" {...props} onChange={handleChange} />
       case 'month':
-        return <DatePicker className="rb:mb-4!" picker="month" {...props} onChange={handleChange} />
+        return <DatePicker className="rb:mb-4!" defaultValue={value} picker="month" {...props} onChange={handleChange} />
       case 'number':
-        return <InputNumber className="rb:mb-4!" {...props} onChange={handleChange} />
+        return <InputNumber className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
       case 'search':
-        return <Input.Search className="rb:mb-4!" {...props} onChange={(e) => handleChange(e.target.value)} />
+        return <Input.Search className="rb:mb-4!" defaultValue={value} {...props} onChange={(e) => handleChange(e.target.value)} />
       case 'range':
-        return <Slider className="rb:mb-4!" {...props} onChange={handleChange} />
+        return <Slider className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
       case 'submit':
       case 'button':
-        return <RbButton className="rb:mb-4!" {...props} onClick={() => ctx?.onSubmit?.(ctx.values)}>{[props.value || children]}</RbButton>
+        return <RbButton className="rb:mb-4!" defaultValue={value} {...props} onClick={() => ctx?.onSubmit?.(ctx.values)}>{[props.value || children]}</RbButton>
       case 'checkbox':
-        return <Checkbox className="rb:mb-4!" {...props} onChange={(e) => handleChange(e.target.checked)}>{children}</Checkbox>
+        return <Checkbox className="rb:mb-4!" defaultValue={value} {...props} onChange={(e) => handleChange(e.target.checked)}>{children}</Checkbox>
       case 'password':
-        return <Input.Password className="rb:mb-4!" {...props} onChange={(e) => handleChange(e.target.value)} />
+        return <Input.Password className="rb:mb-4!" defaultValue={value} {...props} onChange={(e) => handleChange(e.target.value)} />
       case 'radio':
-        return <Radio className="rb:mb-4!" {...props} onChange={(e) => handleChange(e.target.value)}>{children}</Radio>
+        return <Radio className="rb:mb-4!" defaultValue={value} {...props} onChange={(e) => handleChange(e.target.value)}>{children}</Radio>
       case 'select': {
         const raw = props['data-options']
         const options = (typeof raw === 'string' ? JSON.parse(raw) : raw || []).map((v: string) => ({ label: v, value: v }))
-        return <Select className="rb:mb-4! rb:w-full!" options={options} onChange={(val) => { if (props.name) ctx?.setValue(props.name, val) }} />
+        return <Select className="rb:mb-4! rb:w-full!" defaultValue={value} options={options} onChange={(val) => { if (props.name) ctx?.setValue(props.name, val) }} />
       }
       default:
-        return <Input className="rb:mb-4!" value={children} {...props} onChange={(e) => handleChange(e.target.value)} />
+        return <Input className="rb:mb-4!" defaultValue={value} {...props} onChange={(e) => handleChange(e.target.value)} />
     }
   },
   select: ({ children, ...props }: any) => {
diff --git a/web/src/views/ApplicationConfig/TestChat/index.tsx b/web/src/views/ApplicationConfig/TestChat/index.tsx
index 563fb2d4..bfb9b569 100644
--- a/web/src/views/ApplicationConfig/TestChat/index.tsx
+++ b/web/src/views/ApplicationConfig/TestChat/index.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-03-13 17:27:52 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 21:31:19
+ * @Last Modified time: 2026-04-07 21:48:30
  */
 import { type FC, useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -95,7 +95,7 @@ const TestChat: FC<TestChatProps> = ({
 
   useEffect(() => {
     getVariables()
-  }, [application, config])
+  }, [application, JSON.stringify(config)])
 
   useEffect(() => {
     return () => {