+`
+ result += fmt.Sprintf(`
+`
+ result += `
+`
+ result += `
+`
+ result += fmt.Sprintf(` {{ file.name }}
+`, field.FieldJson)
+ result += `
+`
+ result += `
+`
+ result += `
+`, field.FieldJson)
+ result += `
+`
+ result += `
+`
+ result += `
+`
+ }
+ }
+
+ // 关闭描述项
+ result += `
+
+ )
+}
diff --git a/web-app/src/components/ChatArea.tsx b/web-app/src/components/ChatArea.tsx
new file mode 100644
index 0000000..abcdd59
--- /dev/null
+++ b/web-app/src/components/ChatArea.tsx
@@ -0,0 +1,719 @@
+import {
+ Check,
+ Copy,
+ Download,
+ Mic,
+ MoreVertical,
+ Paperclip,
+ RefreshCw,
+ Send,
+ Settings,
+ Trash2,
+ Waves,
+ Zap
+} from 'lucide-react'
+import {useEffect, useRef, useState} from 'react'
+import {createPortal} from 'react-dom'
+import {type Conversation, conversationApi, type Message} from '../api/conversation'
+import {type Character} from '../api/character'
+import {type AIConfig, aiConfigApi} from '../api/aiConfig'
+import {type Preset, presetApi} from '../api/preset'
+import MessageContent from './MessageContent'
+
+interface ChatAreaProps {
+ conversation: Conversation
+ character: Character
+ onConversationUpdate: (conversation: Conversation) => void
+}
+
+export default function ChatArea({ conversation, character, onConversationUpdate }: ChatAreaProps) {
+ const [messages, setMessages] = useState
+
+
+ 角色信息
+
+
+ {onClose && (
+
+ )}
+
+
+
+
+
+ {character.avatar ? (
+ 
+ ) : (
+
+
+ {character.name ? character.name.charAt(0) : '?'}
+
+ )}
+ {character.name || '未命名角色'}
+{character.description || '暂无描述'}
+ +
+
+
+ {tags.length > 0 && (
+
+
+
+ )}
+
+ {character.personality && (
+ 标签
+
+ {tags.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+
+
+ )}
+
+ {character.scenario && (
+ 性格特征
+{character.personality}
+
+
+ )}
+
+ {character.creator && (
+ 场景设定
+{character.scenario}
+
+
+ )}
+
+ 创建者
+{character.creator}
+
+
+
+ {character.characterBook && (
+ 对话统计
+
+
+
+ 消息数
+ {conversation.messageCount}
+
+
+ Token 使用
+ {conversation.tokenCount}
+
+
+ AI 模型
+ {conversation.model || 'GPT-4'}
+
+
+
+ )}
+ 世界书
++ {typeof character.characterBook === 'object' && character.characterBook.entries + ? `${character.characterBook.entries.length} 个条目` + : '已启用'} +
+
+
+
+
+
+
+
+
+ {conversation.title}
+
+ 与 {character.name} 对话中
+
+
+
+
+
+ {showModelSelector && createPortal(
+
+
+ {/* 预设选择器 */}
+ e.stopPropagation()}
+ >
+ {aiConfigs.length === 0 ? (
+
,
+ document.body
+ )}
+
+ 暂无可用配置
+
+ ) : (
+ aiConfigs.map((config) => (
+
+ ))
+ )}
+
+
+ {showPresetSelector && createPortal(
+
+
+
+
+ e.stopPropagation()}
+ >
+ {presets.length === 0 ? (
+
,
+ document.body
+ )}
+
+ 暂无可用预设
+
+ ) : (
+ presets.map((preset) => (
+
+ ))
+ )}
+
+
+ {showMenu && createPortal(
+
+ e.stopPropagation()}
+ >
+
+
+
,
+ document.body
+ )}
+
+ {loading ? (
+
+
+ 加载消息中...
+ ) : messages.length === 0 ? (
+
+
+ ) : (
+ messages.map((msg) => (
+ 还没有消息
+发送第一条消息开始对话吧！
+
+
+ ))
+ )}
+ {sending && (
+
+ {msg.role === 'assistant' && (
+ {
+ setInputValue(choice)
+ // 自动聚焦到输入框
+ textareaRef.current?.focus()
+ }}
+ />
+
+
+ {character.avatar && (
+
+ )}
+ {character.name}
+
+ )}
+
+ {formatTime(msg.createdAt)}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+