fix(playground): resolve cursor jump, implement image-only upload, fix textarea stretch - #1
Open
MIt-gancm wants to merge 2 commits into
Open
fix(playground): resolve cursor jump, implement image-only upload, fix textarea stretch#1MIt-gancm wants to merge 2 commits into
MIt-gancm wants to merge 2 commits into
Conversation
…x textarea horizontal stretch Three fixes for the playground chat input area: 1. Fix cursor jumping to beginning when editing historical messages - Root cause: useEffect depended on [editingKey, messages], and messages array reference changed on every parent re-render, causing editText to be reset to original content on each keystroke - Fix: track previous editing key with useRef to avoid re-initializing editText when only messages reference changes 2. Implement image-only attachment upload - Removed placeholder dropdown with unimplemented actions (upload-file, upload-photo, take-screenshot, take-photo) - Added direct image upload button using PromptInput's built-in attachment system - Restricted to image/* via accept prop on PromptInput - Supports multi-select and drag-drop 3. Fix input textarea stretching right with long content - Added overflow-x-hidden break-words to textarea className - Prevents horizontal expansion when long unbroken text (URLs, etc.) is entered
…cursor jump - Pass image URLs from PromptInput through PlaygroundInput.handleSubmit into handleSendMessage, createUserMessage, and formatMessageForAPI - Add imageUrls field to Message type for storing uploaded image data URLs - formatMessageForAPI now returns ContentPart[] when message has images - Allow submit when only images are present without text - Show attachment preview chips (PromptInputHeader + PromptInputAttachments) in the playground input area - Fix CodeMirror cursor jumping: use lastDispatchedValueRef to track the last value emitted by CodeMirror's own update listener, skip re-dispatch when React sends the same value back via the prop, preserving cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
变更描述
三个修复覆盖了 Playground 聊天输入区域的问题：
1. 修复编辑历史对话时光标跳回开头
问题： 当用户编辑历史消息时，每次输入一个字符光标就会跳转到文本开头。
根因：
PlaygroundChat中useEffect的依赖项[editingKey, messages]中，messages数组引用在每次父组件重渲染（包括用户输入触发 setState）时都会变成新引用，导致 effect 重复执行并重置editText为原始消息内容。修复： 使用
useRef追踪上一次的editingKey，仅当editingKey实际变化（用户选择编辑另一条消息）时才重新初始化编辑内容，忽略messages引用变化带来的误触发。2. 实现图片上传（仅允许图片格式）
问题： 附件按钮（Paperclip 图标）的四个菜单项全部只显示 "Feature in development" 的 toast，完全不可用。
修复：
PromptInput添加accept="image/*"限制只能选择图片文件multiple）PromptInput附件系统（缩略图显示、悬停预览、可删除、支持拖拽粘贴）3. 修复输入框内容过长时向右拉伸
问题： 输入长无空格文本（如 URL）时 textarea 会横向无限拉伸。
根因： Textarea 使用
field-sizing-content自动调整尺寸，但缺少文本换行控制。修复： 添加
overflow-x-hidden break-wordsCSS 类，强制长文本在达到 textarea 宽度时换行。变更类型
Checklist