OddMeta
A place to learn and practice AI
OddMeta
ProjectXL

XiaoMate更新：聊天体验优化，Live2D点击触控动作优化，多端构建

by |Published

前言

在 9 月 26 日的 v2.0.7 版本中，XiaoMate 完成了 Live2D 与 3D 模型同台运行的核心能力。这个国庆节放假了，我把重心转向了另一个同样重要的方向：聊天交互体验，同时，Live2D点击触控动作也优化了一下，支持点击不同身体部位播放不同的动作和声音（需要Live2D模型的支持），另外，也准备开始支持Windows/MacOS双端构建（缺一台Ｍａｃ电脑来验证）。

此前，XiaoMate 的聊天界面虽然能够正常收发消息，但在细节上仍有明显不足：Markdown 格式未被正确渲染、实时消息与历史记录样式不一致、工具消息堆叠时占用过多空间、消息显示顺序错乱、以及滚动加载大量历史记录时体验不佳。

现在这个版本只是在交互上优化了一下，但是这个界面总觉得不够漂亮，不够大气，但是我又不知道怎么改才能看起来更舒服一些。。。

同时，在工程层面，项目正式更名为 XiaoMate/小美同学，并补充了 macOS 构建支持，现在可以同时发布 Windows 和 Mac OS 两个平台的版本。

经过这一轮重构和优化，现在 XiaoMate 的聊天窗口已经接近主流 LLM 聊天界面的体验标准：

  • 消息以圆角气泡形式展示，用户消息靠右、AI 消息靠左
  • 支持完整的 Markdown 渲染，包括代码块、列表、链接和表格
  • 工具消息默认折叠，按需展开查看
  • 滚动到顶部可自动加载更早的历史记录
  • 流式输出流畅，完成后自动格式化为 Markdown

当前版本：v2.1.8

下载地址

现在XiaoMate 已经可以支持不少的技能了，但是一直没时间来介绍一下，但是国庆已经过去了一半了，后面几天有空的话，我再整理一下，把XiaoMate目前已经支持的技能一个个的来介绍一下。

下面是完整更新说明。

一、聊天体验全面升级

这是本次更新的重头戏，涉及消息渲染、显示顺序、分页加载和交互细节等多个方面。

1. Markdown 渲染支持

问题背景：

  • 历史聊天记录和实时流式消息只显示纯文本，Markdown 语法未被解析
  • 即使项目已包含 marked.min.js 库，但未在 index.html 中加载

修复方案：

  • 在 index.html 中正确加载 marked.min.js 库
  • 为助手消息（assistant 角色）启用 Markdown 渲染
  • 创建 applyMarkdownStyles() 函数，统一 Markdown 元素的样式

渲染支持的内容：

语法示例效果
粗体**文本**文本
斜体*文本*文本
行内代码`代码`代码
代码块```language ... ```语法高亮代码块
列表- 项目项目符号列表
链接[文本](URL)可点击链接
引用> 引用内容左侧带竖线的引用块
表格`列1

样式控制细节：

  • 为每个 Markdown 容器分配唯一 ID，使用精确的 CSS 选择器
  • 重置所有元素的默认 margin 和 padding
  • 统一设置 line-height: 1.0，与普通文本保持一致
  • 代码块添加半透明黑色背景和圆角
  • 引用块添加蓝色左侧边框
  • 链接使用蓝色，悬停时显示下划线

2. 流式消息 Markdown 渲染优化

问题背景：

  • 每次收到流式文本块时都重新渲染 Markdown，导致频繁 DOM 操作
  • 性能差，可能出现显示闪烁
  • 不完整的 Markdown 语法（如 **粗体 只有开头）会被错误解析

优化方案：

采用延迟 Markdown 渲染策略：

  • 流式输出阶段：只显示纯文本，使用 white-space: pre-wrap 保留格式，逐个字符流畅显示
  • 消息完成阶段：收到 done 或 finish 信号后，一次性渲染完整的 Markdown

性能对比：

假设一条消息包含 100 个字符：

指标优化前优化后提升
Markdown 渲染次数100 次1 次100 倍
DOM 操作次数100 次1 次100 倍
样式应用次数100 次1 次100 倍

用户体验效果：

  • 流式输出时：流畅的打字机效果，文字逐个显示，不卡顿
  • 完成瞬间：突然变成漂亮的 Markdown 格式，视觉冲击感强

3. 聊天窗口行间距修复

问题背景：

  • 即使代码中设置了 line-height: 1.0，实际显示的行间距仍然过大
  • 原因是 chat-history 容器本身未设置行高，浏览器使用默认值（1.2-1.5）

修复方案：

在以下四个层级统一设置 line-height: 1.0：

  1. 容器层级：chat-history 容器
  2. 消息内容层级：历史消息和工具消息的内容 span
  3. 实时消息容器层级：流式输出的 stream-text 容器
  4. Markdown 渲染层级：applyMarkdownStyles() 函数和 CSS 规则

效果：

  • 修复前：行间距约 14-18px
  • 修复后：行间距 12px（12px 字体 × 1.0）
  • 在有限的聊天窗口内可以显示更多内容

4. 实时消息显示顺序修复

问题背景：

  • 实时收到的消息显示顺序错误：用户 → 助手 → 工具
  • 正确顺序应该是：用户 → 工具 → 助手
  • 与历史聊天记录的显示顺序不一致

根本原因：

  • 用户发送消息时立即创建了空的助手消息容器并添加到 DOM
  • 后续工具消息使用 appendChatMessage() 追加到 DOM，自然在助手消息之后
  • 但实际上工具调用发生在助手回复之前

修复方案：

采用延迟助手消息容器创建策略：

  • 当收到 tool_call_progress 或 async_tool_completed 消息时，检测到存在临时的助手消息容器，先移除它
  • 工具消息正常追加到聊天历史
  • 当真正收到助手回复（llm_response_chunk 或 llm_response）时，再重新创建助手消息容器

修复后的消息流：

1. 用户发送消息
   → 创建临时助手消息容器

2. 收到工具调用进度
   → 移除临时助手容器
   → 工具消息添加到聊天历史 ✓

3. 收到工具完成消息
   → 工具完成消息添加到聊天历史 ✓

4. 收到助手回复
   → 重新创建助手消息容器（在工具消息之后）✓
   → 填充内容

最终效果：

  • 用户消息 → 工具消息（折叠） → 助手消息
  • 与历史记录的显示顺序完全一致

5. 工具消息折叠/展开功能

功能描述：

为工具消息（system 和 tool 角色）添加折叠/展开功能：

  • 默认隐藏：工具消息内容默认折叠，只显示标题
  • 点击展开：点击标题栏展开/折叠内容
  • 视觉提示：显示三角形图标和”点击展开”提示文字
  • 状态切换：展开后提示文字消失，图标方向改变

消息结构：

<div class="tool-message">
  <!-- 标题栏（始终显示） -->
  <div class="tool-message-header">
    <span class="tool-toggle-icon">▶</span>
    <span>系统:</span>
    <span class="tool-hint">（点击展开）</span>
  </div>
  
  <!-- 内容区（默认隐藏） -->
  <div class="tool-message-content">
    工具消息内容...
  </div>
</div>

优势：

  • 减少干扰：工具消息默认隐藏，不干扰主要对话流
  • 按需查看：用户可以根据需要展开查看工具调用详情
  • 节省空间：多个工具消息折叠后占用空间极小

6. 标准 LLM 聊天框样式

设计目标：

参照主流 LLM 聊天界面（如 ChatGPT、Claude 等）的设计风格：

  • 用户消息靠右显示，AI 消息靠左显示
  • 不同角色的消息使用不同背景色的圆角气泡框
  • 简洁现代的 UI 风格

具体实现：

消息类型位置背景色文字颜色
用户消息右侧紫色渐变 #667eea → #764ba2白色 #fff
AI 助手消息左侧半透明白色 rgba(255,255,255,0.08)浅灰 #eee
工具/系统消息左侧橙色半透明 rgba(255,180,84,0.1)橙色 #ffb454

细节设计：

  • 圆角气泡：12px 圆角，友好柔和
  • 最大宽度：75%，避免消息过宽
  • 内边距：10px 14px
  • 消息间距：8px
  • 字体大小：13px
  • 行高：1.5（气泡内部）
  • 时间戳：10px，灰色，用户消息右对齐

7. 聊天记录滚动加载更多

功能描述：

在聊天窗口中实现滚动加载更多历史记录的功能：

  • 首次打开聊天窗口：加载最新的 20 条消息
  • 向上滚动到顶部：自动加载更早的消息
  • 每页加载 20 条消息

API 设计：

首次加载：GET /api/chat/history/?limit=20
加载更多：GET /api/chat/history/?before_id=<oldestMessageId>&limit=20

用户体验优化：

  • 防重复加载：通过 isLoadingMore 标志防止滚动时重复触发
  • 边界检测：返回消息数少于 20 条时，自动停止继续加载
  • 滚动位置保持：加载新消息后，自动调整滚动位置，避免跳动
  • 加载状态提示：显示”加载中…”或”加载更多失败（点击重试）”
  • 关闭重开：每次打开聊天窗口时重置分页状态，重新加载最新记录

8. 小美书签分页加载优化

优化内容：

  • 支持分页加载书签收藏
  • 修复打开提醒待办窗口时，滚动也会误触加载书签的问题
  • 不同窗口的滚动事件独立处理，互不干扰

二、登录界面交互优化

优化内容：

  • 优化了登录界面的交互流程
  • 改进了登录状态管理和 UI 反馈
  • 圆盘菜单中显示登入/登出菜单项
    • 已登录：显示”登出”
    • 未登录：显示”登入”

用户影响：

  • 登录流程更加直观
  • 登录状态一目了然

三、聊天窗口鼠标点击交互调整

问题背景：

  • 此前为了让聊天内容可选择、可复制，导致主界面无法正常拖拽

修复方案：

  • 将拖动限制为只有点击在聊天窗口标题栏时生效
  • 点击聊天窗口内容区域时，可以正常选择和复制文本
  • 修复了 Live2D 模型点击身体没有触发动画的问题

用户影响：

  • 聊天内容现在可以正常选择和复制
  • 窗口拖拽仍然可以通过标题栏完成
  • Live2D 模型点击互动恢复正常

四、项目品牌与工程更新

1. 项目更名为 XiaoMate/小美同学

此前项目使用 Charlotty 作为名称，有朋友提到该名字相对偏向女性角色。XiaoMate 不限定角色性别：

  • 既可以承载女性角色
  • 也可以承载男性角色或宠物角色

因此调整为更加中性的 XiaoMate。

名称约定：

  • 项目/仓库名称：XiaoMate
  • 桌宠和快捷方式名称：小美同学
  • 应用 ID：com.oddmeta.xiaomate

仓库地址：

2. macOS 构建支持

新增内容：

  • 补充了 build.sh 和 start.sh 脚本
  • 更新了 package.json 的构建配置
  • 现在可以同时支持 Windows 和 Mac OS 两个平台

构建脚本：

平台构建脚本启动脚本
Windowsbuild.batstart.bat
macOS/Linuxbuild.shstart.sh

技术文档更新：

  • 补充 CROSS_PLATFORM.md：跨平台开发和构建指南
  • 补充 QUICKSTART.md：快速开始文档

3. JavaScript 文件目录结构调整

调整内容：

  • 将库文件按类型归类到子目录：
    • lib/live2d/：Live2D 相关库（PIXI.js、Cubism 等）
    • lib/utils/：通用工具库（marked、qwebchannel 等）
    • lib/：业务逻辑文件保持不变

用户影响：

  • 对项目使用者更友好，文件组织更清晰
  • 对普通用户无影响

五、完整更新列表

ID更新内容用户影响
–登录界面交互优化登录流程更直观
–修复聊天内容可选择导致主界面无法拖拽拖拽限制到标题栏，内容可选择复制
–聊天窗口鼠标点击交互调整拖拽和内容选择分离
–修复 Live2D 点击身体没有动画的问题模型点击互动恢复正常
–优化 Live2D 模型动画检测机制动画检测更准确
–修复提醒窗口滚动误触加载书签不同窗口滚动事件独立处理
–小美书签分页加载优化书签加载性能提升
–项目更名为 XiaoMate/小美同学品牌和应用名称更新
–发布 v2.1.8，支持 Windows 和 Mac OS双平台构建支持
–聊天记录获取可分页首次加载 20 条，性能提升
–async_tool_failed 消息格式化错误提示更清晰
–统一各个窗口样式风格UI 风格一致
–通用窗口默认带滚动条长内容可滚动
–流式输出只显示纯文本，不实时渲染 Markdown性能提升 100 倍
–工具消息支持折叠/展开，默认折叠减少干扰，节省空间
–修复实时消息显示顺序顺序与历史记录一致
–历史消息和实时消息支持 Markdown 渲染完整的 Markdown 支持
–MCP 工具调用链路调整后端交互更稳定
–圆盘菜单显示登入/登出菜单项登录状态一目了然

六、快速开始

本次提供 Windows 和 Mac OS 两个平台的版本：

使用说明

  1. AI 对话、书签、提醒、自动任务、MCP 技能和通知等在线功能仍然依赖后端；Live2D/3D 模型展示、窗口交互和本地设置不依赖后端。
  2. 默认后端地址仅用于演示，服务器配置较低，只建议用于体验界面；运行 Playwright 等复杂任务时大概率会失败。长期使用请自行下载并部署后端，这样数据也可以保存在自己的电脑中。
  3. 如果遇到问题，可以添加作者微信：oddmeta；也欢迎关注公众号”奥德元”,一起学习 AI，一起追赶时代。Good good study, day day up。

七、升级说明

1. 旧版用户

建议先退出旧版 XiaoMate，再解压并运行新版本，避免旧窗口或 Electron 进程占用文件。

2. 在线功能

AI 对话、书签、提醒、自动任务、MCP 和通知仍需要 XiaoMate 后端。离线状态下，模型展示、窗口交互和本地设置仍可使用。

3. 当前已知限制

  • 部分复杂 VRM、GLB 或 GLTF 模型的效果会受模型骨骼、动画命名和文件结构影响；
  • 3D 模型自动走动仍需要针对更多模型继续验证和优化。

XiaoMate — 支持 Live2D 与 3D 模型的 Windows/Mac 桌面宠物。

桌面客户端：https://github.com/oddmeta/xiaomate-desktop

后端服务：https://github.com/oddmeta/xiaomate

Windows/macOS 前端便携版：https://github.com/oddmeta/xiaomate-desktop/releases/tag/v2.1.8

问题反馈微信：oddmeta

公众号：奥德元

You may also like

给小落同学后台加个进程保护
Published

给小落同学后台加个进程保护

[TOC] 前言 由于买的这个阿里云ECS是最低配的（2核1G内存），小落同学的后台进程经常会被莫名奇妙的杀掉，因此拟给加个看门狗保护下。整个保护分成两部分：1）进程检测脚本：watchdog.sh2）将检测脚本加入crontab 具体步骤如下。 进程检测脚本：watchdog.sh 利用一个配置文件，将小落同学绑定的端口及进程启动脚本在配置文件里配置好。然后再用一个脚本去telnet这个端口，若telnet成功，说明进程还活着，否则就是进程没了，需调用启动脚本进行启动。 配置文件 小落同学总共有两个进程，分别是backend和frontend，各使用8000端口和3000端口。文件名：watchdog.list 脚本内容 文件名：watchdog.sh 将检测脚本加入crontab 查看下当前cronjob列表。 查看命令 结果 加入小落同学相关的进程监控脚本 用crontab -e编辑，并加入小落同学相关的进程监控脚本，并将其设置为每分钟都检测一下。 查看当前back-end进程情况 返回8000端口进程情况 手动杀进程，看看能不能恢复？ 杀进程后，等一会儿再看看进程有没有重新启来？ 其它 […]

Published

Three.js:经过一番痛苦的思想斗争，我还是放弃了3D虚拟，转投2D

一、前言 在过去的一段时间里，我花费了大量精力钻研three.js技术，期望能将小落同学的形象塑造为3D虚拟人，实现与用户的交互功能。为此，我对vrm/obj/fbx模型进行了反复调整，还结合mixamo的动作资源进行适配。然而，无论我如何努力，始终无法达到理想的效果。在实际展示中，模型与动作之间总是存在各种问题，比如部分动作出现模型撕裂现象，或是动作呈现出不自然的颤抖，这让我十分苦恼。经过五一假期的深思熟虑，我决定暂时搁置3D方案，转向2D领域寻求解决办法。这意味着之前为three.js所做的模型构建、动作设计、表情制作等工作可能要暂时搁置，虽然心中满是遗憾，但也只能期待未来有机会能让它们重新发挥作用。 二、选定2D解决方案 对于2D虚拟人的实现，其实有多种方案可供选择。在大型商业化直播场景中，许多虚拟人采用VTuber的解决方案。不过，该方案对硬件配置要求较高，以我目前使用的每年仅需99元的阿里云ECS服务器而言，难以满足其运行需求。综合各方面因素考虑，我最终选定了Live2D技术。它不仅技术成熟度高，而且非常适合用于基于Web的虚拟人项目开发，能够很好地满足我的需求。 三、Live2D练手 在Github平台上，有众多关于Live2D的开源项目。其中，目前仍保持活跃状态的项目之一是https://github.com/stevenjoezhang/live2d-widget。我按照该项目提供的步骤进行安装实践，发现当使用远程CDN上的配置时，系统能够正常运行。但当我尝试配置本地的autoload.js时，却始终遭遇“initWidget is not defined”的报错。尽管多次排查尝试，依然未能找到问题的根源，无奈之下只能放弃该项目。 最终，我成功运行了https://github.com/JokerPan12/live2d项目。接下来，我计划先将这个Live2D看板安装到网站上，积累经验后再应用到小落同学的项目中。 四、将Live2D看板安装到wordpress网站上 以下是详细的操作步骤： 1. 下载代码 通过执行以下命令克隆项目代码： 2. 安装SDK代码及live2D模型 从克隆的仓库中，选取live2d、asteroids、icons这三个目录，并上传至网站服务器。我的服务器目录结构如下： 3. 修改wordpress的theme 上传完SDK和模型后，需要对wordpress的主题进行修改，以启用live2d功能。进入wordpress的主题目录：wp-content/themes/{正在使用的主题名}，找到其中的header.php以及footer.php文件。 修改header.php […]

Published

把你的MCP Server部署到公网，让阿里云上的应用来访问和使用

一、前言 前前后后的给小落同学加了许多的MCP。 但是这些功能之前一直在我本地的小落同学上跑，部署在阿里云ECS上的小落同学因为买的ECS配置太低（99元一年的2H2G特惠主机）跑不动，这个周末在家没事做，想想是不是干脆用frp让公网上的小落同学也可以把这些MCP也都给支持起来。 所以这个周末的任务就是：把原先一直在我本地电脑上跑的小落同学的MCP Server部署到公网，并让阿里云上的小落同学来访问和使用。 目前小落同学支持的MCP包括： 既然想了，那不管有没有人用小落同学，咱先给它配上去再说。 二、MCP Server可配置化 1. 新增ODDMCP配置 在小落同学的.env环境变量里新增mcp相关环境变量配置 2. 同步调整MCP Server和MCP Client中与MCP相关的配置 把原先固定的localhost的地址，改成从环境变量中获取。 1）代码：oddmcp_server.py 2）代码：oddmcp_client.py 3）代码：oddmcp_status_callback.py 4）oddagent 同步的时候发现几个新的MCP […]

Published

关于如何利用小落同学来实现克隆一个数字版本的自己的思考

一、缘起 一直以来，我都有一个梦想，希望能拥有一个数字版的自己。 在此这前，我需要好好认真的去思考一下的是，要实现一个数字版的我自己，应该、可能、也许、大概、似乎可以怎么做？ 这个问题我自己一个人想了很久，但是一直没有想清楚。暂时先用记录一下。 等有时间了，我再来一点点完善。也希望抛砖引玉，有志同道合的人可以一起来探讨。 目前为止，只是花了171块钱（阿里云ECS 99块钱每年，域名72块钱每年），做了一个初始版本的对话机器人：小落同学。 二、子系统分拆 1。后台 1。我告诉大模型关于我自己的一些初始信息：角色设定。2。我每天或者不定期的把发生在自己身上的故事告诉大模型。3。大模型帮我一件件记录下来，并能够自动识别和提取故事中的关键信息，比如日期、地点、人物、事件结果等，并将这些故事进行结构化存储。4。大模型定期（每个月？每个季度）或者不定期的形成阶段性的人格快照，将发生在这段时间内的各种有条理建立时间线、人物关系、关键事件等。5。随着关于我的信息的不断完善，大模型一点点复刻出来的我的身份。 2。前台 1。在小落同学的前端界面展示这个数字版的我，并允许他人来跟这个数字版的我进行对话，让这个数字版的我来代表我自己（提示对方，所有回复的内容仅供参考）。 三、初步设想 1。后台-角色设定的prompt（一次性任务） 系统人设prompt：你是我的数字记忆体和数字分身，将永久存储我的人生故事 2。后台-初始档案子系统（一次性任务） 3。后台-记忆库构建子系统（日常任务） 记录我每天分享的故事、观点、情感、聊天记录、邮件、社交动态。由我自己每天登录到后台，并将今天的事情跟小落同学汇报一下，然后由小落同学将这些事情一件件的总结输出，并保存的记忆中。 4。后台-人格模拟子系统（周期任务） 这个子系统用于： 待思考确认，是否先去研预一下Agentic RAG和Manus，是否可以让Agent来自动完成？ […]

Leave a comment

Your email address will not be published. Required fields are marked *