fix(web): chat content labelPosition & markdown support edit
This commit is contained in:
@@ -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>
|
||||||
}
|
}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user