LLM Chat 工具 UI 结构图
本文档详细展示 LLM Chat 工具的完整UI结构，包括内部组件和外部依赖关系。
注意: LLM Chat 是整个应用中最复杂的工具模块，包含 90+ 个组件文件，大量使用了独立的
rich-text-renderer模块和通用组件库。
0. 完整组件关系总览
图例说明
| 符号 | 含义 |
|---|---|
──> | 组件包含/父子关系 |
-.-> | 外部依赖引用 |
| 📋 📁 💬 | 布局区域标识 |
| 🔲 | 对话框/弹出层 |
| 📦 | 外部模块依赖 |
核心数据流
1. 整体布局结构
2. ChatArea 核心组件树
ChatArea 是对话的核心区域，包含消息展示、输入和多个对话框：
3. 消息组件层次 (message/)
消息组件负责渲染每条对话消息：
4. 智能体管理组件 (agent/)
智能体管理已重构为高度模块化的分段式编辑器：
5. 对话树图组件 (conversation-tree-graph/)
力导向布局的对话树可视化：
6. 上下文分析器 (context-analyzer/)
分析和调试对话上下文：
7. 导入导出组件 (export/)
会话和智能体的导入导出：
8. 设置组件 (settings/)
9. 外部依赖：富文本渲染器 (rich-text-renderer/)
LLM Chat 大量依赖独立的富文本渲染模块：
10. 外部依赖：通用组件库 (components/common/)
LLM Chat 使用的通用组件：
11. Composables 层 (composables/)
LLM Chat 使用的组合式函数：
12. 完整组件文件清单
llm-chat/components/ 目录结构
components/
├── ChatArea.vue # 核心对话区域
├── AttachmentCard.vue # 附件卡片
│
├── agent/ # 智能体管理
│ ├── AgentAssetsDialog.vue
│ ├── AgentAssetsManager.vue # 资产管理器 (新增)
│ ├── AgentPresetBatchDialog.vue
│ ├── AgentPresetEditor.vue
│ ├── AgentUpgradeDialog.vue # 升级对话框 (新增)
│ ├── CreateAgentDialog.vue
│ ├── EditAgentDialog.vue
│ ├── MacroSelector.vue
│ ├── MiniAgentList.vue
│ ├── ModelParametersEditor.vue
│ ├── ParameterItem.vue
│ ├── PresetMessageEditor.vue
│ ├── STPresetImportDialog.vue
│ ├── agent-editor/ # 分段式编辑器 (重构)
│ │ ├── AgentEditor.vue
│ │ ├── agentEditConfig.ts
│ │ └── sections/
│ │ ├── BasicInfoSection.vue
│ │ ├── CapabilitiesSection.vue
│ │ ├── OutputDisplaySection.vue
│ │ └── PersonalitySection.vue
│ └── parameters/ # 参数子面板
│ ├── ContextCompressionConfigPanel.vue
│ ├── ContextStatsCard.vue
│ ├── CustomParamsPanel.vue
│ ├── PostProcessingPanel.vue
│ └── SafetySettingsPanel.vue
│
├── common/ # 模块内通用
│ ├── ChatRegexEditor.vue
│ ├── ChatRegexHelpDialog.vue
│ ├── ChatRegexRuleForm.vue
│ └── ConfigSection.vue
│
├── context-analyzer/ # 上下文分析
│ ├── AnalysisChartView.vue
│ ├── ContextAnalyzerDialog.vue
│ ├── MacroDebugView.vue
│ ├── RawRequestView.vue
│ └── StructuredView.vue
│
├── conversation-tree-graph/ # 对话树图
│ ├── ContextMenu.vue
│ └── flow/
│ ├── FlowTreeGraph.vue
│ └── components/
│ ├── CustomConnectionLine.vue
│ ├── GraphNode.vue
│ ├── GraphNodeContent.vue
│ ├── GraphNodeDetailPopup.vue
│ ├── GraphNodeMenubar.vue
│ ├── GraphUsageGuideDialog.vue
│ └── HistoryPanel.vue
│
├── export/ # 导入导出
│ ├── ExportAgentDialog.vue
│ ├── ExportBranchDialog.vue
│ ├── ExportOptionsPanel.vue
│ ├── ExportPreviewSection.vue
│ ├── ExportSessionDialog.vue
│ └── ImportAgentDialog.vue
│
├── message/ # 消息组件
│ ├── BranchSelector.vue
│ ├── ChatMessage.vue
│ ├── CompressionMessage.vue # 压缩节点
│ ├── MessageContent.vue
│ ├── MessageDataEditor.vue # 数据编辑器
│ ├── MessageHeader.vue
│ ├── MessageList.vue
│ ├── MessageMenubar.vue
│ ├── MessageNavigator.vue
│ └── ViewModeSwitcher.vue
│
├── message-input/ # 消息输入
│ ├── ChatCodeMirrorEditor.vue # CodeMirror 编辑器 (新增)
│ ├── MessageInput.vue
│ ├── MessageInputAttachments.vue # 附件管理 (新增)
│ ├── MessageInputToolbar.vue # 工具栏
│ └── MiniSessionList.vue # 迷你列表
│
├── quick-action/ # 快捷动作系统 (新增)
│ ├── QuickActionDetail.vue
│ ├── QuickActionFullManager.vue
│ ├── QuickActionManagerDialog.vue
│ └── QuickActionSelector.vue
│
├── search/ # 聊天搜索 (新增)
│ └── ChatSearchPanel.vue
│
├── settings/ # 设置
│ ├── ChatSettingsDialog.vue
│ ├── PipelineConfig.vue # 管道配置
│ ├── settings-types.ts
│ └── settingsConfig.ts
│
├── sidebar/ # 侧边栏
│ ├── AgentListItem.vue
│ ├── AgentsSidebar.vue
│ ├── LeftSidebar.vue
│ ├── ParametersSidebar.vue
│ └── SessionsSidebar.vue
│
├── user-profile/ # 用户档案
│ └── EditUserProfileDialog.vue
│
└── worldbook/ # 世界书系统 (新增)
├── WorldbookDetail.vue
├── WorldbookFullManager.vue
├── WorldbookManager.vue
├── WorldbookManagerDialog.vue
├── WorldbookOverview.vue
└── WorldbookSelector.vuellm-chat/composables/ 目录结构
composables/
├── chat/
│ ├── useChatExecutor.ts
│ ├── useChatHandler.ts
│ ├── useChatResponseHandler.ts
│ ├── useLlmChatSync.ts
│ ├── useLlmSearch.ts # 聊天搜索逻辑
│ ├── useTopicNamer.ts
│ └── useTranslation.ts
├── features/
│ ├── useAttachmentManager.ts # 附件管理逻辑
│ ├── useChatContextStats.ts
│ ├── useContextCompressor.ts
│ ├── useExportManager.ts # 导入导出逻辑
│ └── useTranscriptionManager.ts
├── input/
│ ├── useChatInputManager.ts
│ ├── useChatInputTokenPreview.ts
│ ├── useMessageInputActions.ts
│ └── useMessageInputResize.ts
├── session/
│ ├── useBranchManager.ts
│ ├── useNodeManager.ts
│ ├── useSessionManager.ts
│ └── useSessionNodeHistory.ts
├── settings/
│ ├── useChatSettings.ts
│ └── usePluginSettings.ts
├── storage/
│ ├── useAgentStorageSeparated.ts
│ ├── useChatStorageSeparated.ts
│ ├── useQuickActionStorage.ts
│ ├── useUserProfileStorage.ts
│ └── useWorldbookStorageSeparated.ts
├── ui/
│ ├── useAnchorRegistry.ts
│ ├── useDetachedChatArea.ts
│ ├── useDetachedChatInput.ts
│ ├── useLlmChatStateConsumer.ts
│ ├── useLlmChatUiState.ts
│ └── useResolvedAvatar.ts
└── visualization/
├── useContextChart.ts
├── useFlowTreeGraph.ts
└── useGraphActions.ts总计: 90+ 个组件文件, 30+ 个 Composables