智能快速聊天对话框定位：更好的用户体验

我们刚刚推出了 ChatOllama 快速聊天功能的重大改进，解决了用户在屏幕边缘选择文本时遇到的常见问题。快速聊天对话框现在可以智能定位，确保始终保持在视口内，同时为 AI 回复提供更多空间。

问题所在

之前，当用户在屏幕右下角或视口边缘附近选择文本时，快速聊天对话框会部分出现在可见区域之外或完全被截断。这使得阅读 AI 回复和与对话框交互变得困难。此外，对话框相当狭窄（320px），限制了可以舒适显示的文本量。

解决方案

我们的新智能定位算法通过几个关键改进解决了这些问题：

1. 智能定位逻辑

对话框现在遵循复杂的定位策略：

  • 水平定位：首先尝试定位在选定文本的右侧，如果空间不足则定位在左侧，如果两侧都不行则水平居中
  • 垂直定位：首先尝试定位在选择区域下方，如果需要则定位在上方，最后选择垂直居中
  • 视口感知：始终确保对话框保持在屏幕边界内，具有适当的边距

2. 更大的对话框尺寸

  • 宽度增加：从 320px 增加到 480px，提高可读性
  • 动态高度：根据回复内容长度自动调整
  • 回复区域：最大高度从 160px 增加到 320px
  • 更好的排版：回复文本大小从超小号增加到小号，提高可读性

3. 动态内容适应

对话框现在根据 AI 回复长度计算最佳尺寸，确保较长的回复有足够的空间，同时保持较短回复的紧凑性。

技术实现

定位算法使用几个关键常量：

const DIALOG_WIDTH = 480  // 从 320px 增加
const DIALOG_MIN_HEIGHT = 280
const DIALOG_MAX_HEIGHT = 600  // 回复较长时的最大高度
const VIEWPORT_PADDING = 20
const OFFSET_FROM_SELECTION = 10

智能定位逻辑确保对话框：

  • 与视口边缘保持 20px 边距
  • 与选定文本保持 10px 距离
  • 根据回复内容动态调整高度
  • 永远不会被截断或出现在可见区域之外

对用户体验的影响

这些改进带来了几个实质性的好处：

  1. 更好的可访问性：用户现在可以在屏幕的任何地方选择文本，无需担心对话框定位问题
  2. 改善的可读性：更大的对话框和文本大小使 AI 回复更容易阅读
  3. 更智能的行为：对话框自动适应不同的屏幕尺寸和选择位置