Initial commit
This commit is contained in:
饺子大魔王
@@ -0,0 +1,39 @@
|
||||
import { useChatContext } from '@/app/components/chat/context'
|
||||
import Button from '@/app/components/base/button'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const MarkdownButton = ({ node }: any) => {
|
||||
const { onSend } = useChatContext()
|
||||
const variant = node.properties.dataVariant
|
||||
const message = node.properties.dataMessage
|
||||
const link = node.properties.dataLink
|
||||
const size = node.properties.dataSize
|
||||
|
||||
function is_valid_url(url: string): boolean {
|
||||
try {
|
||||
const parsed_url = new URL(url)
|
||||
return ['http:', 'https:'].includes(parsed_url.protocol)
|
||||
}
|
||||
catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return <Button
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn('!h-8 !px-3 select-none')}
|
||||
onClick={() => {
|
||||
if (is_valid_url(link)) {
|
||||
window.open(link, '_blank')
|
||||
return
|
||||
}
|
||||
onSend?.(message)
|
||||
}}
|
||||
>
|
||||
<span className='text-[13px]'>{node.children[0]?.value || ''}</span>
|
||||
</Button>
|
||||
}
|
||||
MarkdownButton.displayName = 'MarkdownButton'
|
||||
|
||||
export default MarkdownButton
|
||||
@@ -0,0 +1,147 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import { useChatContext } from '@/app/components/chat/context'
|
||||
enum DATA_FORMAT {
|
||||
TEXT = 'text',
|
||||
JSON = 'json',
|
||||
}
|
||||
enum SUPPORTED_TAGS {
|
||||
LABEL = 'label',
|
||||
INPUT = 'input',
|
||||
TEXTAREA = 'textarea',
|
||||
BUTTON = 'button',
|
||||
}
|
||||
enum SUPPORTED_TYPES {
|
||||
TEXT = 'text',
|
||||
PASSWORD = 'password',
|
||||
EMAIL = 'email',
|
||||
NUMBER = 'number',
|
||||
}
|
||||
const MarkdownForm = ({ node }: any) => {
|
||||
// const supportedTypes = ['text', 'password', 'email', 'number']
|
||||
// <form data-format="text">
|
||||
// <label for="username">Username:</label>
|
||||
// <input type="text" name="username" />
|
||||
// <label for="password">Password:</label>
|
||||
// <input type="password" name="password" />
|
||||
// <label for="content">Content:</label>
|
||||
// <textarea name="content"></textarea>
|
||||
// <button data-size="small" data-variant="primary">Login</button>
|
||||
// </form>
|
||||
const { onSend } = useChatContext()
|
||||
|
||||
const [formValues, setFormValues] = useState<{ [key: string]: any }>({})
|
||||
|
||||
useEffect(() => {
|
||||
const initialValues: { [key: string]: any } = {}
|
||||
node.children.forEach((child: any) => {
|
||||
if ([SUPPORTED_TAGS.INPUT, SUPPORTED_TAGS.TEXTAREA].includes(child.tagName))
|
||||
initialValues[child.properties.name] = child.properties.value
|
||||
})
|
||||
setFormValues(initialValues)
|
||||
}, [node.children])
|
||||
|
||||
const getFormValues = (children: any) => {
|
||||
const values: { [key: string]: any } = {}
|
||||
children.forEach((child: any) => {
|
||||
if ([SUPPORTED_TAGS.INPUT, SUPPORTED_TAGS.TEXTAREA].includes(child.tagName))
|
||||
values[child.properties.name] = formValues[child.properties.name]
|
||||
})
|
||||
return values
|
||||
}
|
||||
|
||||
const onSubmit = (e: any) => {
|
||||
e.preventDefault()
|
||||
const format = node.properties.dataFormat || DATA_FORMAT.TEXT
|
||||
const result = getFormValues(node.children)
|
||||
|
||||
if (format === DATA_FORMAT.JSON) {
|
||||
onSend?.(JSON.stringify(result))
|
||||
}
|
||||
else {
|
||||
const textResult = Object.entries(result)
|
||||
.map(([key, value]) => `${key}: ${value}`)
|
||||
.join('\n')
|
||||
onSend?.(textResult)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<form
|
||||
autoComplete="off"
|
||||
className='flex flex-col self-stretch'
|
||||
onSubmit={(e: any) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
{node.children.filter((i: any) => i.type === 'element').map((child: any, index: number) => {
|
||||
if (child.tagName === SUPPORTED_TAGS.LABEL) {
|
||||
return (
|
||||
<label
|
||||
key={index}
|
||||
htmlFor={child.properties.for}
|
||||
className="my-2 system-md-semibold text-text-secondary"
|
||||
>
|
||||
{child.children[0]?.value || ''}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
if (child.tagName === SUPPORTED_TAGS.INPUT && Object.values(SUPPORTED_TYPES).includes(child.properties.type)) {
|
||||
return (
|
||||
<Input
|
||||
key={index}
|
||||
type={child.properties.type}
|
||||
name={child.properties.name}
|
||||
placeholder={child.properties.placeholder}
|
||||
value={formValues[child.properties.name] || ''}
|
||||
onChange={(e) => {
|
||||
setFormValues(prevValues => ({
|
||||
...prevValues,
|
||||
[child.properties.name]: e.target.value,
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (child.tagName === SUPPORTED_TAGS.TEXTAREA) {
|
||||
return (
|
||||
<Textarea
|
||||
key={index}
|
||||
name={child.properties.name}
|
||||
placeholder={child.properties.placeholder}
|
||||
value={formValues[child.properties.name] || ''}
|
||||
onChange={(e) => {
|
||||
setFormValues(prevValues => ({
|
||||
...prevValues,
|
||||
[child.properties.name]: e.target.value,
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (child.tagName === SUPPORTED_TAGS.BUTTON) {
|
||||
const variant = child.properties.dataVariant
|
||||
const size = child.properties.dataSize
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant={variant}
|
||||
size={size}
|
||||
className='mt-4'
|
||||
key={index}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
<span className='text-[13px]'>{child.children[0]?.value || ''}</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
return <p key={index}>Unsupported tag: {child.tagName}</p>
|
||||
})}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
MarkdownForm.displayName = 'MarkdownForm'
|
||||
export default MarkdownForm
|
||||
@@ -0,0 +1,101 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const hasEndThink = (children: any): boolean => {
|
||||
if (typeof children === 'string')
|
||||
return children.includes('[ENDTHINKFLAG]')
|
||||
|
||||
if (Array.isArray(children))
|
||||
return children.some(child => hasEndThink(child))
|
||||
|
||||
if (children?.props?.children)
|
||||
return hasEndThink(children.props.children)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const removeEndThink = (children: any): any => {
|
||||
if (typeof children === 'string')
|
||||
return children.replace('[ENDTHINKFLAG]', '')
|
||||
|
||||
if (Array.isArray(children))
|
||||
return children.map(child => removeEndThink(child))
|
||||
|
||||
if (children?.props?.children) {
|
||||
return React.cloneElement(
|
||||
children,
|
||||
{
|
||||
...children.props,
|
||||
children: removeEndThink(children.props.children),
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
return children
|
||||
}
|
||||
|
||||
const useThinkTimer = (children: any) => {
|
||||
const [startTime] = useState(Date.now())
|
||||
const [elapsedTime, setElapsedTime] = useState(0)
|
||||
const [isComplete, setIsComplete] = useState(false)
|
||||
const timerRef = useRef<NodeJS.Timeout>()
|
||||
|
||||
useEffect(() => {
|
||||
timerRef.current = setInterval(() => {
|
||||
if (!isComplete)
|
||||
setElapsedTime(Math.floor((Date.now() - startTime) / 100) / 10)
|
||||
}, 100)
|
||||
|
||||
return () => {
|
||||
if (timerRef.current)
|
||||
clearInterval(timerRef.current)
|
||||
}
|
||||
}, [startTime, isComplete])
|
||||
|
||||
useEffect(() => {
|
||||
if (hasEndThink(children)) {
|
||||
setIsComplete(true)
|
||||
if (timerRef.current)
|
||||
clearInterval(timerRef.current)
|
||||
}
|
||||
}, [children])
|
||||
|
||||
return { elapsedTime, isComplete }
|
||||
}
|
||||
|
||||
export const ThinkBlock = ({ children, ...props }: any) => {
|
||||
const { elapsedTime, isComplete } = useThinkTimer(children)
|
||||
const displayContent = removeEndThink(children)
|
||||
const { t } = useTranslation()
|
||||
|
||||
if (!(props['data-think'] ?? false))
|
||||
return (<details {...props}>{children}</details>)
|
||||
|
||||
return (
|
||||
<details {...(!isComplete && { open: true })} className="group">
|
||||
<summary className="text-gray-500 font-bold list-none pl-2 flex items-center cursor-pointer select-none whitespace-nowrap">
|
||||
<div className="shrink-0 flex items-center">
|
||||
<svg
|
||||
className="w-3 h-3 mr-2 transition-transform duration-500 group-open:rotate-90"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
{isComplete ? `${t('common.chat.thought')}(${elapsedTime.toFixed(1)}s)` : `${t('common.chat.thinking')}(${elapsedTime.toFixed(1)}s)`}
|
||||
</div>
|
||||
</summary>
|
||||
<div className="text-gray-500 p-3 ml-2 bg-gray-50 border-l border-gray-300">
|
||||
{displayContent}
|
||||
</div>
|
||||
</details>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThinkBlock
|
||||
Reference in New Issue
Block a user