BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile diff comment input placeholder and review comments pill

Browse Source 
Use a shorter comment placeholder on mobile (drop the Cmd+Enter hint that has
no touch equivalent) so it no longer clips in the auto-sized textarea.

Add a remove (x) button to the review comments pill, matching the annotation
and dev-server-log pills, and stop the mobile touch-target min-height/width
from inflating the pill close buttons.
This commit is contained in:
Bohdan Triapitsyn
2026-06-02 20:50:08 +03:00
parent d0623705b1
commit f1b57f53d3
10 changed files with 40 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+23
View File
@@ -1394,6 +1394,17 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
}
}
}, [currentSessionId, newSessionDraftOpen, removeInlineCommentDraft]);
// Review comments are the inline-comment drafts that aren't preview sources.
const removeReviewDrafts = React.useCallback(() => {
const sessionKey = currentSessionId ?? (newSessionDraftOpen ? 'draft' : '');
if (!sessionKey) return;
const drafts = useInlineCommentDraftStore.getState().drafts[sessionKey] ?? [];
for (const draft of drafts) {
if (draft.source !== 'preview-console' && draft.source !== 'preview-annotation') {
removeInlineCommentDraft(sessionKey, draft.id);
}
}
}, [currentSessionId, newSessionDraftOpen, removeInlineCommentDraft]);
// User message history for up/down arrow navigation.
// Keep this on a narrow hook instead of full session message records.
@@ -3973,6 +3984,16 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
>
<span className="text-xs font-medium text-muted-foreground">{t('chat.chatInput.reviewComments')}</span>
<span className="text-xs font-semibold" style={{ color: currentTheme?.colors?.status?.info }}>{reviewCount}</span>
<button
type="button"
className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
style={{ minHeight: 0, minWidth: 0 }}
onClick={removeReviewDrafts}
aria-label={t('chat.chatInput.reviewCommentsRemove')}
title={t('chat.chatInput.reviewCommentsRemove')}
>
<Icon name="close" className="h-3 w-3" />
</button>
</div>
) : null}
{previewConsoleCount > 0 ? (
@@ -3988,6 +4009,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
<button
type="button"
className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
style={{ minHeight: 0, minWidth: 0 }}
onClick={() => removePreviewDrafts('preview-console')}
aria-label={t('chat.chatInput.devServerLogsRemove')}
title={t('chat.chatInput.devServerLogsRemove')}
@@ -4009,6 +4031,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
<button
type="button"
className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
style={{ minHeight: 0, minWidth: 0 }}
onClick={() => removePreviewDrafts('preview-annotation')}
aria-label={t('chat.chatInput.previewContextRemove')}
title={t('chat.chatInput.previewContextRemove')}