fix(web): chat content labelPosition & markdown support edit

This commit is contained in:
zhaoying
2026-04-07 22:14:20 +08:00
parent eb9f4f39f1
commit 1ecc04fee7
3 changed files with 24 additions and 23 deletions

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2025-12-10 16:46:17 * @Date: 2025-12-10 16:46:17
* @Last Modified by: ZhaoYing * @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 { type FC, useRef, useEffect, useState } from 'react'
import clsx from 'clsx' import clsx from 'clsx'
@@ -284,7 +284,7 @@ const ChatContent: FC<ChatContentProps> = ({
} }
</div> </div>
{/* Bottom label (such as timestamp, username, etc.) */} {/* 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 && <> {item.meta_data?.audio_url && <>
{playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending' {playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
? <Spin /> ? <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)} {labelFormat(item)}
</div> </div>}
</Flex> </Flex>
} }
</> </>

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-02 15:17:31 * @Date: 2026-02-02 15:17:31
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-07 15:14:02 * @Last Modified time: 2026-04-07 21:56:00
*/ */
/** /**
* RbMarkdown Component * RbMarkdown Component
@@ -97,47 +97,48 @@ const buildComponents = (onFormSubmit?: (values: Record<string, any>) => void) =
const ctx = useContext(FormContext) const ctx = useContext(FormContext)
return <RbButton {...props} onClick={() => ctx?.onSubmit?.(ctx.values)}>{[children]}</RbButton> return <RbButton {...props} onClick={() => ctx?.onSubmit?.(ctx.values)}>{[children]}</RbButton>
}, },
input: ({ children, ...props }: any) => { input: ({ children, value, ...props }: any) => {
const ctx = useContext(FormContext) const ctx = useContext(FormContext)
const handleChange = useCallback((val: any) => { const handleChange = useCallback((val: any) => {
if (props.name) ctx?.setValue(props.name, val) if (props.name) ctx?.setValue(props.name, val)
}, [ctx, props.name]) }, [ctx, props.name])
console.log('props', props)
switch (props.type) { switch (props.type) {
case 'color': case 'color':
return <ColorPicker className="rb:mb-4!" {...props} onChange={handleChange} /> return <ColorPicker className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
case 'time': case 'time':
return <TimePicker className="rb:mb-4!" {...props} onChange={handleChange} /> return <TimePicker className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
case 'date': 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':
case 'datetime-local': 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': 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': 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': case 'number':
return <InputNumber className="rb:mb-4!" {...props} onChange={handleChange} /> return <InputNumber className="rb:mb-4!" defaultValue={value} {...props} onChange={handleChange} />
case 'search': 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': 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 'submit':
case 'button': 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': 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': 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': 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': { case 'select': {
const raw = props['data-options'] const raw = props['data-options']
const options = (typeof raw === 'string' ? JSON.parse(raw) : raw || []).map((v: string) => ({ label: v, value: v })) 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: 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) => { select: ({ children, ...props }: any) => {

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-03-13 17:27:52 * @Date: 2026-03-13 17:27:52
* @Last Modified by: ZhaoYing * @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 { type FC, useState, useRef, useEffect } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@@ -95,7 +95,7 @@ const TestChat: FC<TestChatProps> = ({
useEffect(() => { useEffect(() => {
getVariables() getVariables()
}, [application, config]) }, [application, JSON.stringify(config)])
useEffect(() => { useEffect(() => {
return () => { return () => {