Losita/mai-bot
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'Mai-with-u:dev' into dev

Browse Source
This commit is contained in:
Dawn ARC
2026-05-01 19:51:57 +08:00
committed by GitHub
parent f42c4a3b0c d9a509b6c2
commit 4b0d30d808
33 changed files with 3234 additions and 1419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/src/components/dynamic-form/DynamicConfigForm.tsx
View File

@@ -157,6 +157,7 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
value={values[key]}
onChange={(v) => onChange(key, v)}
schema={nestedField ?? nestedSchema}
nestedSchema={nestedSchema}
/>
</div>
)
@@ -169,6 +170,7 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
value={values[key]}
onChange={(v) => onChange(key, v)}
schema={nestedField ?? nestedSchema}
nestedSchema={nestedSchema}
>
<DynamicConfigForm
schema={nestedSchema}

4
dashboard/src/components/dynamic-form/DynamicField.tsx
View File

@@ -183,7 +183,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
{schema.required && <span className="text-destructive">*</span>}
</Label>
{schema.description && (
<p className="text-[13px] text-muted-foreground">{schema.description}</p>
<p className="text-[13px] text-muted-foreground whitespace-pre-line">{schema.description}</p>
)}
</div>
<Switch
@@ -325,7 +325,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
{/* Description */}
{schema.description && (
<p className="text-[13px] text-muted-foreground">{schema.description}</p>
<p className="text-[13px] text-muted-foreground whitespace-pre-line">{schema.description}</p>
)}
</div>
)

17
dashboard/src/index.css
View File

@@ -331,6 +331,23 @@
.border-primary-gradient {
border-image: var(--color-primary-gradient, linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-primary)))) 1;
}
/* 聊天消息行被回复点击命中时的高亮闪烁。 */
.chat-message-flash {
animation: chat-message-flash 1.6s ease-out;
border-radius: 0.75rem;
}
}
@keyframes chat-message-flash {
0% {
background-color: hsl(var(--color-primary) / 0.18);
box-shadow: 0 0 0 4px hsl(var(--color-primary) / 0.18);
}
100% {
background-color: transparent;
box-shadow: 0 0 0 0 transparent;
}
}
/* 禁用动效时的样式 */

77
dashboard/src/lib/chat-ws-client.ts
View File

@@ -11,10 +11,31 @@ interface ChatSessionOpenPayload {
type ChatSessionListener = (message: Record<string, unknown>) => void
/** 浅层比较两个 session.open 负载是否完全一致。 */
function arePayloadsEqual(
left: ChatSessionOpenPayload,
right: ChatSessionOpenPayload
): boolean {
const keys = new Set<keyof ChatSessionOpenPayload>([
...(Object.keys(left) as Array<keyof ChatSessionOpenPayload>),
...(Object.keys(right) as Array<keyof ChatSessionOpenPayload>),
])
for (const key of keys) {
if (left[key] !== right[key]) {
return false
}
}
return true
}
class ChatWsClient {
private initialized = false
private listeners: Map<string, Set<ChatSessionListener>> = new Map()
private sessionPayloads: Map<string, ChatSessionOpenPayload> = new Map()
// 记录当前 WS 连接上已打开的会话，避免 React StrictMode 双挂载重复发送 ``session.open``。
private openedSessions: Set<string> = new Set()
// 记录正在进行中的打开请求，使同一会话的重复调用复用同一个 Promise。
private pendingOpens: Map<string, Promise<void>> = new Map()
private initialize(): void {
if (this.initialized) {
@@ -41,9 +62,20 @@ class ChatWsClient {
})
unifiedWsClient.onReconnect(() => {
// 重连后需要重新订阅，清空本地“已打开”标记。
this.openedSessions.clear()
this.pendingOpens.clear()
void this.reopenSessions()
})
unifiedWsClient.onConnectionChange((connected) => {
if (!connected) {
// 连接断开后，下次重新连上需要重新发送 session.open。
this.openedSessions.clear()
this.pendingOpens.clear()
}
})
this.initialized = true
}
@@ -60,6 +92,7 @@ class ChatWsClient {
restore: true,
} as Record<string, unknown>,
})
this.openedSessions.add(sessionId)
} catch (error) {
console.error(`恢复聊天会话失败 (${sessionId}):`, error)
}
@@ -68,17 +101,49 @@ class ChatWsClient {
async openSession(sessionId: string, payload: ChatSessionOpenPayload): Promise<void> {
this.initialize()
const previousPayload = this.sessionPayloads.get(sessionId)
this.sessionPayloads.set(sessionId, payload)
await unifiedWsClient.call({
domain: 'chat',
method: 'session.open',
session: sessionId,
data: payload as Record<string, unknown>,
})
// 同一会话上一次打开请求还未完成 → 复用该 Promise，避免重复发送。
const inflight = this.pendingOpens.get(sessionId)
if (inflight) {
await inflight
return
}
// 如果该会话在当前 WS 连接上已经打开，且负载未变化，则跳过，避免服务端重复断开/重连。
if (
this.openedSessions.has(sessionId) &&
previousPayload !== undefined &&
arePayloadsEqual(previousPayload, payload)
) {
return
}
const openPromise = unifiedWsClient
.call({
domain: 'chat',
method: 'session.open',
session: sessionId,
data: payload as Record<string, unknown>,
})
.then(() => {
this.openedSessions.add(sessionId)
})
this.pendingOpens.set(sessionId, openPromise)
try {
await openPromise
} finally {
this.pendingOpens.delete(sessionId)
}
}
async closeSession(sessionId: string): Promise<void> {
this.sessionPayloads.delete(sessionId)
this.openedSessions.delete(sessionId)
this.pendingOpens.delete(sessionId)
if (unifiedWsClient.getStatus() !== 'connected') {
return
}

6
dashboard/src/lib/field-hooks.ts
View File

@@ -15,6 +15,12 @@ export interface FieldHookComponentProps {
onChange?: (value: unknown) => void
children?: ReactNode
schema?: ConfigSchema | FieldSchema
/**
* 如果当前字段是 `List[ConfigBase]` 或嵌套 ConfigBase，
* 这里会传入对应子配置类的 ConfigSchema，便于自定义编辑器
* 直接渲染列表项的字段。
*/
nestedSchema?: ConfigSchema
}
/**

2
dashboard/src/lib/version.ts
View File

@@ -5,7 +5,7 @@
* 修改此处的版本号后，所有展示版本的地方都会自动更新
*/
export const APP_VERSION = '1.0.0'
export const APP_VERSION = '1.0.1'
export const APP_NAME = 'MaiBot Dashboard'
export const APP_FULL_NAME = `${APP_NAME} v${APP_VERSION}`

14
dashboard/src/routes/chat/ChatScrollContext.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { createContext, useContext } from 'react'
/** 暴露给消息内容渲染器使用的滚动 / 高亮接口。 */
export interface ChatScrollContextValue {
/** 滚动并高亮指定消息；若消息不在可视列表中则返回 ``false``。 */
scrollToMessage: (messageId: string) => boolean
}
export const ChatScrollContext = createContext<ChatScrollContextValue | null>(null)
/** 在消息列表内部使用：访问 ``scrollToMessage`` 等能力。 */
export function useChatScroll(): ChatScrollContextValue | null {
return useContext(ChatScrollContext)
}

6
dashboard/src/routes/chat/ChatWorkspaceSidebar.tsx
View File

@@ -22,9 +22,8 @@ interface ChatWorkspaceSidebarProps {
onUpdateUserName: (name: string) => void
}
function getMessagePreview(message: ChatMessage | undefined, fallback: string, thinking: string) {
function getMessagePreview(message: ChatMessage | undefined, fallback: string) {
if (!message) return fallback
if (message.type === 'thinking') return thinking
if (message.type === 'system' || message.type === 'error') return message.content || fallback
return message.content || fallback
}
@@ -45,8 +44,7 @@ function ConversationItem({
const lastMessage = tab.messages[tab.messages.length - 1]
const preview = getMessagePreview(
lastMessage,
t('chat.sidebar.emptyPreview'),
t('chat.message.thinking')
t('chat.sidebar.emptyPreview')
)
const Icon = isVirtual ? UserCircle2 : Bot

106
dashboard/src/routes/chat/MessageList.tsx
View File

@@ -1,11 +1,12 @@
import { Bot, Sparkles, User } from 'lucide-react'
import { useEffect, useRef } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'
import { ChatScrollContext, type ChatScrollContextValue } from './ChatScrollContext'
import { RenderMessageContent } from './MessageRenderer'
import type { ChatMessage } from './types'
@@ -13,20 +14,27 @@ interface MessageListProps {
messages: ChatMessage[]
isLoadingHistory: boolean
botDisplayName: string
/** 机器人 QQ 号；存在时会从 QQ 头像公开接口拉取头像作为 bot 头像。 */
botQq?: string
userName: string
language: string
}
interface BubbleAvatarProps {
type: 'user' | 'bot' | 'thinking'
type: 'user' | 'bot'
visible: boolean
/** bot 头像 URL（可选）；加载失败时自动 fallback 到默认 SVG 图标。 */
imageUrl?: string
}
function BubbleAvatar({ type, visible }: BubbleAvatarProps) {
function BubbleAvatar({ type, visible, imageUrl }: BubbleAvatarProps) {
return (
<div className="h-8 w-8 shrink-0 sm:h-9 sm:w-9">
{visible && (
<Avatar className="h-full w-full ring-1 ring-border/60">
{type === 'bot' && imageUrl ? (
<AvatarImage src={imageUrl} alt="" className="object-cover" />
) : null}
<AvatarFallback
className={cn(
'text-xs',
@@ -47,20 +55,6 @@ function BubbleAvatar({ type, visible }: BubbleAvatarProps) {
)
}
function ThinkingBubble() {
const { t } = useTranslation()
return (
<div className="bg-muted/80 text-muted-foreground inline-flex items-center gap-2 rounded-2xl rounded-bl-sm px-3.5 py-2.5">
<span className="flex gap-1">
<span className="bg-primary/60 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0ms]" />
<span className="bg-primary/60 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:150ms]" />
<span className="bg-primary/60 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:300ms]" />
</span>
<span className="text-xs">{t('chat.message.thinking')}</span>
</div>
)
}
function EmptyState({ botName }: { botName: string }) {
const { t } = useTranslation()
return (
@@ -80,22 +74,42 @@ function EmptyState({ botName }: { botName: string }) {
}
/**
* 聊天消息列表：支持连续同发送者消息分组、思考占位、富文本与系统/错误信息样式。
* 聊天消息列表：支持连续同发送者消息分组、富文本与系统/错误信息样式。
*/
export function MessageList({
messages,
isLoadingHistory,
botDisplayName,
botQq,
userName,
language,
}: MessageListProps) {
const { t } = useTranslation()
const endRef = useRef<HTMLDivElement>(null)
const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map())
useEffect(() => {
endRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [messages])
const scrollToMessage = useCallback((messageId: string) => {
const target = messageRefs.current.get(messageId)
if (!target) {
return false
}
target.scrollIntoView({ behavior: 'smooth', block: 'center' })
target.classList.add('chat-message-flash')
window.setTimeout(() => {
target.classList.remove('chat-message-flash')
}, 1600)
return true
}, [])
const scrollContextValue = useMemo<ChatScrollContextValue>(
() => ({ scrollToMessage }),
[scrollToMessage]
)
const formatTime = (timestamp: number) => {
const date = new Date(timestamp * 1000)
return date.toLocaleTimeString(language || 'zh-CN', {
@@ -104,6 +118,11 @@ export function MessageList({
})
}
// 优先使用 q1.qlogo.cn s=640（高清），QQ 公开头像接口。
const botAvatarUrl = botQq && /^\d+$/.test(botQq)
? `https://q1.qlogo.cn/g?b=qq&nk=${botQq}&s=640`
: undefined
if (messages.length === 0 && !isLoadingHistory) {
return (
<div className="min-w-0 min-h-0 flex-1 overflow-hidden">
@@ -127,7 +146,8 @@ export function MessageList({
scrollbars="vertical"
viewportClassName="[&>div]:!block [&>div]:!min-w-0 [&>div]:w-full"
>
<div className="mx-auto flex w-full max-w-4xl min-w-0 flex-col gap-1 px-3 py-5 sm:px-6 sm:py-6">
<ChatScrollContext.Provider value={scrollContextValue}>
<div className="mx-auto flex w-full max-w-4xl min-w-0 flex-col gap-1 px-3 py-5 sm:px-6 sm:py-6">
{messages.map((message, index) => {
// 系统消息：作为分隔条
if (message.type === 'system') {
@@ -154,8 +174,7 @@ export function MessageList({
}
const isUser = message.type === 'user'
const isThinking = message.type === 'thinking'
const bubbleType: 'user' | 'bot' | 'thinking' = isUser ? 'user' : isThinking ? 'thinking' : 'bot'
const bubbleType: 'user' | 'bot' = isUser ? 'user' : 'bot'
// 是否与上一条消息属于同一发送者（用于分组：仅首条显示头像 + 名字）
const previous = messages[index - 1]
@@ -171,13 +190,25 @@ export function MessageList({
return (
<div
key={message.id}
ref={(node) => {
if (node) {
messageRefs.current.set(message.id, node)
} else {
messageRefs.current.delete(message.id)
}
}}
data-message-id={message.id}
className={cn(
'flex w-full min-w-0 items-end gap-2 sm:gap-3',
'chat-message-row flex w-full min-w-0 items-end gap-2 sm:gap-3',
isUser ? 'flex-row-reverse' : 'flex-row',
sameGroup ? 'mt-0.5' : 'mt-3 first:mt-0'
)}
>
<BubbleAvatar type={bubbleType === 'thinking' ? 'bot' : bubbleType} visible={!sameGroup} />
<BubbleAvatar
type={bubbleType}
visible={!sameGroup}
imageUrl={bubbleType === 'bot' ? botAvatarUrl : undefined}
/>
<div
className={cn(
@@ -197,20 +228,16 @@ export function MessageList({
</div>
)}
{isThinking ? (
<ThinkingBubble />
) : (
<div
className={cn(
'shadow-sm/30 wrap-break-word min-w-0 max-w-full overflow-hidden px-3.5 py-2 text-sm leading-relaxed',
isUser
? 'bg-primary text-primary-foreground rounded-2xl rounded-br-md'
: 'bg-muted text-foreground rounded-2xl rounded-bl-md'
)}
>
<RenderMessageContent message={message} isBot={!isUser} />
</div>
)}
<div
className={cn(
'shadow-sm/30 wrap-break-word min-w-0 max-w-full overflow-hidden px-3.5 py-2 text-sm leading-relaxed',
isUser
? 'bg-primary text-primary-foreground rounded-2xl rounded-br-md'
: 'bg-muted text-foreground rounded-2xl rounded-bl-md'
)}
>
<RenderMessageContent message={message} isBot={!isUser} />
</div>
</div>
</div>
)
@@ -220,7 +247,8 @@ export function MessageList({
<span className="sr-only" aria-live="polite">
{messages.length > 0 ? t('chat.sidebar.subtitle', { count: messages.length }) : ''}
</span>
</div>
</div>
</ChatScrollContext.Provider>
</ScrollArea>
</div>
)

127
dashboard/src/routes/chat/MessageRenderer.tsx
View File

@@ -1,8 +1,30 @@
import { Reply as ReplyIcon } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { useToast } from '@/hooks/use-toast'
import { cn } from '@/lib/utils'
import type { ChatMessage, MessageSegment } from './types'
import { useChatScroll } from './ChatScrollContext'
import type {
AtSegmentData,
ChatMessage,
MessageSegment,
ReplySegmentData,
} from './types'
function normalizeAtSegment(segment: MessageSegment): AtSegmentData {
if (segment.data && typeof segment.data === 'object') {
return segment.data as AtSegmentData
}
return { target_user_id: segment.data == null ? null : String(segment.data) }
}
function normalizeReplySegment(segment: MessageSegment): ReplySegmentData {
if (segment.data && typeof segment.data === 'object') {
return segment.data as ReplySegmentData
}
return { target_message_id: segment.data == null ? null : String(segment.data) }
}
// 渲染单个消息段
export function RenderMessageSegment({ segment }: { segment: MessageSegment }) {
@@ -74,8 +96,27 @@ export function RenderMessageSegment({ segment }: { segment: MessageSegment }) {
</span>
)
case 'reply':
return <span className="text-muted-foreground text-xs">{t('chat.media.reply')}</span>
case 'reply': {
const replyData = normalizeReplySegment(segment)
return <ReplySegmentBlock data={replyData} />
}
case 'at': {
const atData = normalizeAtSegment(segment)
const atLabel =
atData.target_user_cardname ||
atData.target_user_nickname ||
atData.target_user_id ||
''
return (
<span
className="text-primary bg-primary/10 mx-0.5 inline-flex items-center rounded px-1 text-[0.95em] font-medium"
title={atData.target_user_id ? `@${atData.target_user_id}` : '@'}
>
@{atLabel || t('chat.media.unknownMessage')}
</span>
)
}
case 'forward':
return <span className="text-muted-foreground">{t('chat.media.forward')}</span>
@@ -103,11 +144,29 @@ export function RenderMessageContent({
}) {
// 如果是富文本消息，渲染消息段
if (message.message_type === 'rich' && message.segments && message.segments.length > 0) {
// 将 reply 段与后续内容拆开，避免回复块与文本出现在同一行上。
const inlineSegments: MessageSegment[] = []
const replySegments: MessageSegment[] = []
for (const segment of message.segments) {
if (segment.type === 'reply') {
replySegments.push(segment)
} else {
inlineSegments.push(segment)
}
}
return (
<div className="flex flex-col gap-2">
{message.segments.map((segment, index) => (
<RenderMessageSegment key={index} segment={segment} />
{replySegments.map((segment, index) => (
<RenderMessageSegment key={`reply-${index}`} segment={segment} />
))}
{inlineSegments.length > 0 && (
<div className="flex flex-wrap items-baseline whitespace-pre-wrap">
{inlineSegments.map((segment, index) => (
<RenderMessageSegment key={`inline-${index}`} segment={segment} />
))}
</div>
)}
</div>
)
}
@@ -115,3 +174,61 @@ export function RenderMessageContent({
// 普通文本消息
return <span className="whitespace-pre-wrap">{message.content}</span>
}
// 回复消息块：点击可跳转到原始消息；如原消息不可见则提示错误。
function ReplySegmentBlock({ data }: { data: ReplySegmentData }) {
const { t } = useTranslation()
const { toast } = useToast()
const chatScroll = useChatScroll()
const senderName =
data.target_message_sender_cardname ||
data.target_message_sender_nickname ||
data.target_message_sender_id ||
t('chat.message.replyUnknownSender', { defaultValue: '未知发送者' })
const previewText =
data.target_message_content?.trim() ||
t('chat.media.replyMissing', { defaultValue: '原消息内容不可用' })
const targetMessageId = data.target_message_id ? String(data.target_message_id) : ''
const isClickable = Boolean(targetMessageId && chatScroll)
const handleClick = () => {
if (!targetMessageId || !chatScroll) {
return
}
const found = chatScroll.scrollToMessage(targetMessageId)
if (!found) {
toast({
title: t('chat.toast.replyNotFoundTitle', { defaultValue: '原始消息不在当前视图' }),
description: t('chat.toast.replyNotFoundDescription', {
defaultValue: '该消息可能已被清除、不在本会话中，或者尚未加载。',
}),
variant: 'destructive',
})
}
}
const className = cn(
'group block w-full rounded-md border-l-2 border-primary/60 bg-background/40 px-2 py-1 text-left text-xs',
isClickable && 'cursor-pointer transition hover:bg-background/70'
)
const content = (
<div className="flex items-start gap-2">
<ReplyIcon className="mt-0.5 h-3 w-3 shrink-0 opacity-70" aria-hidden />
<div className="min-w-0 flex-1">
<div className="text-primary/80 truncate text-[11px] font-medium">{senderName}</div>
<div className="text-muted-foreground truncate">{previewText}</div>
</div>
</div>
)
if (isClickable) {
return (
<button type="button" className={className} onClick={handleClick}>
{content}
</button>
)
}
return <div className={className}>{content}</div>
}

68
dashboard/src/routes/chat/index.tsx
View File

@@ -214,6 +214,7 @@ export function ChatPage() {
user_id: data.user_id,
user_name: data.user_name,
bot_name: data.bot_name,
bot_qq: data.bot_qq,
},
})
break
@@ -278,7 +279,6 @@ export function ChatPage() {
setTabs((prev) =>
prev.map((tab) => {
if (tab.id !== tabId) return tab
const filteredMessages = tab.messages.filter((msg) => msg.type !== 'thinking')
const newMessage: ChatMessage = {
id: generateMessageId('bot'),
type: 'bot',
@@ -290,7 +290,7 @@ export function ChatPage() {
}
return {
...tab,
messages: [...filteredMessages, newMessage],
messages: [...tab.messages, newMessage],
}
})
)
@@ -305,11 +305,10 @@ export function ChatPage() {
setTabs((prev) =>
prev.map((tab) => {
if (tab.id !== tabId) return tab
const filteredMessages = tab.messages.filter((msg) => msg.type !== 'thinking')
return {
...tab,
messages: [
...filteredMessages,
...tab.messages,
{
id: generateMessageId('error'),
type: 'error' as const,
@@ -330,33 +329,27 @@ export function ChatPage() {
case 'history': {
const historyMessages = data.messages || []
const processedSet = new Set<string>()
const formattedMessages: ChatMessage[] = historyMessages.map(
(msg: {
id?: string
content: string
timestamp: number
sender_name?: string
sender_id?: string
is_bot?: boolean
}) => {
const isBot = msg.is_bot || false
const msgId = msg.id || generateMessageId(isBot ? 'bot' : 'user')
const contentHash = `${isBot ? 'bot' : 'user'}-${msg.content}-${Math.floor(msg.timestamp * 1000)}`
processedSet.add(contentHash)
return {
id: msgId,
type: isBot ? 'bot' : ('user' as const),
content: msg.content,
timestamp: msg.timestamp,
sender: {
name:
msg.sender_name || (isBot ? t('chat.botNameFallback') : t('chat.userFallback')),
user_id: msg.sender_id,
is_bot: isBot,
},
}
const formattedMessages: ChatMessage[] = historyMessages.map((msg) => {
const isBot = msg.is_bot || false
const msgId = msg.id || generateMessageId(isBot ? 'bot' : 'user')
const contentHash = `${isBot ? 'bot' : 'user'}-${msg.content}-${Math.floor(msg.timestamp * 1000)}`
processedSet.add(contentHash)
const isRich = msg.message_type === 'rich' && Array.isArray(msg.segments) && msg.segments.length > 0
return {
id: msgId,
type: isBot ? 'bot' : ('user' as const),
content: msg.content,
timestamp: msg.timestamp,
message_type: isRich ? 'rich' : 'text',
segments: isRich ? (msg.segments ?? undefined) : undefined,
sender: {
name:
msg.sender_name || (isBot ? t('chat.botNameFallback') : t('chat.userFallback')),
user_id: msg.sender_id,
is_bot: isBot,
},
}
)
})
processedMessagesMapRef.current.set(tabId, processedSet)
updateTab(tabId, { messages: formattedMessages })
@@ -509,19 +502,6 @@ export function ChatPage() {
}
addMessageToTab(activeTabId, userMessage)
// 再添加"思考中"占位消息
const thinkingMessage: ChatMessage = {
id: generateMessageId('thinking'),
type: 'thinking',
content: '',
timestamp: currentTimestamp + 0.001, // 稍微晚一点确保顺序
sender: {
name: activeTab?.sessionInfo.bot_name || t('chat.botNameFallback'),
is_bot: true,
},
}
addMessageToTab(activeTabId, thinkingMessage)
setInputValue('')
try {
@@ -534,7 +514,6 @@ export function ChatPage() {
return {
...tab,
isTyping: false,
messages: tab.messages.filter((msg) => msg.type !== 'thinking'),
}
})
)
@@ -759,6 +738,7 @@ export function ChatPage() {
messages={activeTab?.messages ?? []}
isLoadingHistory={isLoadingHistory}
botDisplayName={botDisplayName}
botQq={activeTab?.sessionInfo.bot_qq}
userName={userName}
language={i18n.language}
/>

36
dashboard/src/routes/chat/types.ts
View File

@@ -49,20 +49,49 @@ export interface ChatTab {
user_id?: string
user_name?: string
bot_name?: string
bot_qq?: string
}
}
// 消息段类型
export interface MessageSegment {
type: 'text' | 'image' | 'emoji' | 'face' | 'voice' | 'video' | 'music' | 'file' | 'reply' | 'forward' | 'unknown'
type:
| 'text'
| 'image'
| 'emoji'
| 'face'
| 'voice'
| 'video'
| 'music'
| 'file'
| 'reply'
| 'at'
| 'forward'
| 'unknown'
data: string | number | object
original_type?: string
}
// @某人 消息段的负载
export interface AtSegmentData {
target_user_id?: string | null
target_user_nickname?: string | null
target_user_cardname?: string | null
}
// 回复消息段的负载
export interface ReplySegmentData {
target_message_id?: string | null
target_message_content?: string | null
target_message_sender_id?: string | null
target_message_sender_nickname?: string | null
target_message_sender_cardname?: string | null
}
// 消息类型
export interface ChatMessage {
id: string
type: 'user' | 'bot' | 'system' | 'error' | 'thinking'
type: 'user' | 'bot' | 'system' | 'error'
content: string
timestamp: number
message_type?: 'text' | 'rich' // 消息格式类型
@@ -85,6 +114,7 @@ export interface WsMessage {
user_id?: string
user_name?: string
bot_name?: string
bot_qq?: string
sender?: {
name: string
user_id?: string
@@ -98,6 +128,8 @@ export interface WsMessage {
sender_name?: string
sender_id?: string
is_bot?: boolean
message_type?: string
segments?: MessageSegment[] | null
}>
group_id?: string
// 富文本消息

2
dashboard/src/routes/config/bot/hooks/JsonFieldHookFactory.tsx
View File

@@ -67,7 +67,7 @@ export function createJsonFieldHook(options: JsonFieldHookOptions): FieldHookCom
<div className="space-y-1">
<h3 className="text-base font-semibold">{label}</h3>
{description && (
<p className="text-sm text-muted-foreground">{description}</p>
<p className="text-sm text-muted-foreground whitespace-pre-line">{description}</p>
)}
<p className="text-xs text-muted-foreground">{options.helperText}</p>
</div>

283
dashboard/src/routes/config/bot/hooks/ListItemEditorHookFactory.tsx Normal file
View File

@@ -0,0 +1,283 @@
import { useCallback, useMemo } from 'react'
import * as LucideIcons from 'lucide-react'
import { Plus, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { DynamicConfigForm } from '@/components/dynamic-form/DynamicConfigForm'
import type { FieldHookComponent } from '@/lib/field-hooks'
import type { ConfigSchema, FieldSchema } from '@/types/config-schema'
/**
* createListItemEditorHook
*
* 通过 nestedSchema 渲染列表项式的富 UI 编辑器，替换原来直接展示 JSON 文本的 fallback。
* 适用于 `List[ConfigBase]` 类型字段（schema.nested 中存在对应子配置类）。
*/
export interface ListItemEditorOptions {
/** 用于生成每个 item 的标题，如 `${index+1} · ${item.platform}` */
itemTitle?: (item: Record<string, unknown>, index: number) => string
/** 添加按钮文案 */
addLabel?: string
/** 顶部辅助说明 */
helperText?: string
/** 列表为空时的占位说明 */
emptyText?: string
/** 顶部图标（覆盖 schema 自带的 x-icon） */
iconName?: string
}
function resolveLabel(schema?: ConfigSchema | FieldSchema, fieldPath?: string): string {
if (!schema) {
return fieldPath?.split('.').at(-1) ?? '列表配置'
}
if ('label' in schema && schema.label) {
return schema.label
}
if ('uiLabel' in schema && schema.uiLabel) {
return schema.uiLabel
}
if ('classDoc' in schema && schema.classDoc) {
return schema.classDoc
}
if ('className' in schema && schema.className) {
return schema.className
}
return fieldPath?.split('.').at(-1) ?? '列表配置'
}
function resolveDescription(schema?: ConfigSchema | FieldSchema): string {
if (!schema) return ''
if ('description' in schema && schema.description) return schema.description
if ('classDoc' in schema && schema.classDoc) return schema.classDoc
return ''
}
function resolveIconName(
iconOverride: string | undefined,
schema?: ConfigSchema | FieldSchema,
nested?: ConfigSchema,
): string | undefined {
if (iconOverride) return iconOverride
if (schema && 'x-icon' in schema && schema['x-icon']) return schema['x-icon']
if (nested?.uiIcon) return nested.uiIcon
return undefined
}
function renderLucideIcon(iconName: string | undefined, className: string) {
if (!iconName) return null
const Icon = LucideIcons[iconName as keyof typeof LucideIcons] as
| React.ComponentType<{ className?: string }>
| undefined
if (!Icon) return null
return <Icon className={className} />
}
/** 根据 itemSchema 字段默认值构造一个新 item */
function buildDefaultItem(itemSchema: ConfigSchema | undefined): Record<string, unknown> {
if (!itemSchema?.fields) return {}
const next: Record<string, unknown> = {}
for (const field of itemSchema.fields) {
if ('default' in field && field.default !== undefined) {
// 数组/对象需要做一次浅拷贝，避免多个 item 共享同一引用
if (Array.isArray(field.default)) {
next[field.name] = [...field.default]
} else if (
field.default !== null &&
typeof field.default === 'object'
) {
next[field.name] = { ...(field.default as Record<string, unknown>) }
} else {
next[field.name] = field.default
}
continue
}
switch (field.type) {
case 'boolean':
next[field.name] = false
break
case 'integer':
case 'number':
next[field.name] = 0
break
case 'array':
next[field.name] = []
break
case 'object':
next[field.name] = {}
break
case 'select':
next[field.name] = field.options?.[0] ?? ''
break
default:
next[field.name] = ''
}
}
return next
}
/**
* 把 dotted-path 写入 item 对象（兼容 DynamicConfigForm 的 onChange）
*/
function setNested(target: Record<string, unknown>, path: string, value: unknown) {
const keys = path.split('.')
if (keys.length === 1) {
target[keys[0]] = value
return
}
let cursor: Record<string, unknown> = target
for (let i = 0; i < keys.length - 1; i++) {
const key = keys[i]
const existing = cursor[key]
if (existing && typeof existing === 'object' && !Array.isArray(existing)) {
cursor[key] = { ...(existing as Record<string, unknown>) }
} else {
cursor[key] = {}
}
cursor = cursor[key] as Record<string, unknown>
}
cursor[keys[keys.length - 1]] = value
}
export function createListItemEditorHook(
options: ListItemEditorOptions = {},
): FieldHookComponent {
const ListItemEditorHook: FieldHookComponent = ({
fieldPath,
onChange,
schema,
nestedSchema,
value,
}) => {
const items = useMemo<Record<string, unknown>[]>(() => {
if (!Array.isArray(value)) return []
return value.map((item) =>
item && typeof item === 'object' && !Array.isArray(item)
? (item as Record<string, unknown>)
: {},
)
}, [value])
const handleAdd = useCallback(() => {
const next = [...items, buildDefaultItem(nestedSchema)]
onChange?.(next)
}, [items, nestedSchema, onChange])
const handleRemove = useCallback(
(index: number) => {
const next = items.filter((_, idx) => idx !== index)
onChange?.(next)
},
[items, onChange],
)
const handleItemFieldChange = useCallback(
(index: number, fieldName: string, fieldValue: unknown) => {
const next = items.map((item, idx) => {
if (idx !== index) return item
const cloned = { ...item }
setNested(cloned, fieldName, fieldValue)
return cloned
})
onChange?.(next)
},
[items, onChange],
)
const label = resolveLabel(schema, fieldPath)
const description = resolveDescription(schema)
const iconName = resolveIconName(options.iconName, schema, nestedSchema)
if (!nestedSchema) {
return (
<Card>
<CardHeader>
<CardTitle className="text-base">{label}</CardTitle>
<CardDescription>未获取到子配置 schema，无法渲染富编辑器。</CardDescription>
</CardHeader>
</Card>
)
}
return (
<Card>
<CardHeader className="space-y-2 pb-4">
<div className="flex items-center gap-2">
{renderLucideIcon(iconName, 'h-5 w-5 text-muted-foreground')}
<CardTitle className="text-base">{label}</CardTitle>
</div>
{description && (
<CardDescription className="whitespace-pre-line">{description}</CardDescription>
)}
{options.helperText && (
<p className="text-xs text-muted-foreground">{options.helperText}</p>
)}
</CardHeader>
<CardContent className="space-y-3">
{items.length === 0 ? (
<div className="rounded-md border border-dashed border-muted-foreground/25 bg-muted/10 p-6 text-center text-sm text-muted-foreground">
{options.emptyText ?? '尚未添加任何条目，点击下方按钮新增。'}
</div>
) : (
items.map((item, index) => {
const title =
options.itemTitle?.(item, index) ?? `条目 ${index + 1}`
return (
<div
key={index}
className="space-y-3 rounded-lg border bg-card/40 p-4"
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 text-sm font-semibold">
<span className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground">
{index + 1}
</span>
<span className="truncate">{title}</span>
</div>
<Button
type="button"
variant="ghost"
size="sm"
className="text-destructive hover:text-destructive"
onClick={() => handleRemove(index)}
>
<Trash2 className="mr-1 h-4 w-4" />
删除
</Button>
</div>
<DynamicConfigForm
schema={nestedSchema}
values={item}
onChange={(field, fieldValue) =>
handleItemFieldChange(index, field, fieldValue)
}
basePath=""
level={1}
/>
</div>
)
})
)}
<Button
type="button"
variant="outline"
size="sm"
onClick={handleAdd}
className="w-full"
>
<Plus className="mr-1 h-4 w-4" />
{options.addLabel ?? '添加一项'}
</Button>
</CardContent>
</Card>
)
}
return ListItemEditorHook
}

111
dashboard/src/routes/config/bot/hooks/complexFieldHooks.tsx
View File

@@ -1,15 +1,98 @@
import { createJsonFieldHook } from './JsonFieldHookFactory'
import { createListItemEditorHook } from './ListItemEditorHookFactory'
export const ChatTalkValueRulesHook = createJsonFieldHook({
emptyValue: [],
helperText: '复杂对象数组使用 JSON 编辑。每一项对应一个聊天频率规则对象。',
placeholder: '[\n {\n "platform": "",\n "item_id": "",\n "rule_type": "group",\n "time": "00:00-23:59",\n "value": 1.0\n }\n]',
const ruleTypeLabel = (rule: unknown) => {
if (rule === 'private') return '私聊'
if (rule === 'group') return '群聊'
return rule ? String(rule) : '未指定'
}
const platformLabel = (item: Record<string, unknown>) => {
const platform = typeof item.platform === 'string' ? item.platform.trim() : ''
const itemId = typeof item.item_id === 'string' ? item.item_id.trim() : ''
if (!platform && !itemId) return '全局'
if (!platform) return itemId
if (!itemId) return platform
return `${platform}:${itemId}`
}
const truncate = (text: string, max = 32) => {
if (text.length <= max) return text
return `${text.slice(0, max)}…`
}
const collectStringList = (value: unknown): string[] => {
if (!Array.isArray(value)) return []
return value
.map((item) => (typeof item === 'string' ? item.trim() : ''))
.filter((item) => item.length > 0)
}
export const ChatTalkValueRulesHook = createListItemEditorHook({
addLabel: '添加发言频率规则',
helperText: '可按平台/聊天流/时段分别配置发言频率，留空表示全局。',
emptyText: '尚未配置任何规则，将使用全局默认频率。',
itemTitle: (item) => {
const time =
typeof item.time === 'string' && item.time.trim()
? item.time.trim()
: '全天'
const value =
typeof item.value === 'number' ? item.value.toFixed(2) : '—'
return `${platformLabel(item)} · ${ruleTypeLabel(item.rule_type)} · ${time} · 频率 ${value}`
},
})
export const ExpressionLearningListHook = createJsonFieldHook({
emptyValue: [],
helperText: '表达学习配置较复杂，使用 JSON 编辑更稳妥。每一项对应一个学习规则。',
placeholder: '[\n {\n "platform": "",\n "item_id": "",\n "rule_type": "group",\n "use_expression": true,\n "enable_learning": true,\n "enable_jargon_learning": true\n }\n]',
export const ExpressionLearningListHook = createListItemEditorHook({
addLabel: '添加表达学习规则',
helperText: '为不同聊天流单独配置是否启用表达/jargon 学习。',
emptyText: '尚未配置任何学习规则。',
itemTitle: (item) => {
const flags: string[] = []
if (item.use_expression) flags.push('表达')
if (item.enable_learning) flags.push('优化学习')
if (item.enable_jargon_learning) flags.push('jargon')
const flagText = flags.length ? flags.join(' / ') : '全部关闭'
return `${platformLabel(item)} · ${ruleTypeLabel(item.rule_type)} · ${flagText}`
},
})
export const KeywordRulesHook = createListItemEditorHook({
addLabel: '添加关键词规则',
helperText: '匹配命中后会用 reaction 内容作为额外上下文。keywords 至少填一条，或使用正则模式。',
emptyText: '尚未添加任何关键词规则。',
itemTitle: (item) => {
const keywords = collectStringList(item.keywords)
const regex = collectStringList(item.regex)
const reaction =
typeof item.reaction === 'string' ? item.reaction.trim() : ''
const left = keywords.length
? `关键词 ${keywords.length} 条`
: regex.length
? `正则 ${regex.length} 条`
: '未配置匹配项'
const right = reaction ? `→ ${truncate(reaction)}` : '→ 未填写反应'
return `${left} ${right}`
},
})
export const RegexRulesHook = createListItemEditorHook({
addLabel: '添加正则规则',
helperText: '正则模式按 Python 语法编写，命中时把 reaction 作为提示注入。',
emptyText: '尚未添加任何正则规则。',
itemTitle: (item) => {
const regex = collectStringList(item.regex)
const keywords = collectStringList(item.keywords)
const reaction =
typeof item.reaction === 'string' ? item.reaction.trim() : ''
const left = regex.length
? `正则 ${regex.length} 条`
: keywords.length
? `关键词 ${keywords.length} 条`
: '未配置匹配项'
const right = reaction ? `→ ${truncate(reaction)}` : '→ 未填写反应'
return `${left} ${right}`
},
})
export const ExpressionGroupsHook = createJsonFieldHook({
@@ -24,18 +107,6 @@ export const ExperimentalChatPromptsHook = createJsonFieldHook({
placeholder: '[\n {\n "platform": "qq",\n "item_id": "123456",\n "rule_type": "group",\n "prompt": "这里填写额外提示词"\n }\n]',
})
export const KeywordRulesHook = createJsonFieldHook({
emptyValue: [],
helperText: '关键词规则为对象数组，建议直接编辑 JSON。',
placeholder: '[\n {\n "keywords": ["早安"],\n "regex": [],\n "reaction": "早安呀"\n }\n]',
})
export const RegexRulesHook = createJsonFieldHook({
emptyValue: [],
helperText: '正则规则为对象数组，建议直接编辑 JSON。',
placeholder: '[\n {\n "keywords": [],\n "regex": ["https?://[^\\\\s]+"],\n "reaction": "检测到链接：[0]"\n }\n]',
})
export const MCPRootItemsHook = createJsonFieldHook({
emptyValue: [],
helperText: 'MCP Roots 条目为对象数组，使用 JSON 编辑。',